:root {
  --ink: #0f1722;
  --muted: #59636b;
  --blue: #1f4d50;
  --blue-deep: #143638;
  --cyan: #d7c39a;
  --sky: #f7f3ea;
  --white: #ffffff;
  --glass: rgba(255, 255, 255, 0.68);
  --line: rgba(31, 77, 80, 0.16);
  --shadow: 0 22px 62px rgba(15, 23, 34, 0.12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(125deg, rgba(215, 195, 154, 0.16) 0%, transparent 30%, rgba(31, 77, 80, 0.1) 58%, transparent 82%),
    radial-gradient(circle at 12% 8%, rgba(215, 195, 154, 0.34), transparent 24rem),
    radial-gradient(circle at 86% 16%, rgba(31, 77, 80, 0.12), transparent 26rem),
    linear-gradient(180deg, #f7f3ea 0%, #eee8dc 52%, #f8f5ef 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(15, 23, 34, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 34, 0.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 18%, rgba(255,255,255,.46) 18% 19%, transparent 19% 46%, rgba(31,77,80,.055) 46% 47%, transparent 47% 100%),
    linear-gradient(180deg, rgba(247,243,234,.16) 0%, rgba(238,232,220,.72) 100%);
}

body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container,
.site-footer {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  width: min(1120px, calc(100% - 32px));
  min-height: 64px;
  padding: 10px 12px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(242,248,252,.72));
  box-shadow: 0 18px 52px rgba(25, 54, 78, 0.11), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(24px) saturate(1.18);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f1722, #1f4d50);
  color: white;
  box-shadow: 0 12px 24px rgba(47, 111, 143, 0.14);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
}

.nav-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  margin: 5px auto;
  border-radius: 2px;
  background: currentColor;
}

.nav-menu {
  display: flex;
  justify-content: end;
  gap: 6px;
}

.nav-menu a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 13px;
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 750;
}

.nav-menu a:hover,
.nav-menu a.active {
  border-color: var(--line);
  background: rgba(47, 111, 143, 0.07);
  color: var(--blue-deep);
}

.hero,
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 152px 0 74px;
  background:
    linear-gradient(90deg, rgba(247,243,234,.97), rgba(247,243,234,.84) 52%, rgba(247,243,234,.68)),
    linear-gradient(180deg, rgba(238,232,220,.32), rgba(238,232,220,.94)),
    url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1800&q=84") center / cover;
}

.hero { min-height: 92vh; display: grid; align-items: center; }
.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(238,232,220,.94));
  pointer-events: none;
}

.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 96px 0 auto;
  height: 360px;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 35%, rgba(31,77,80,.14), transparent 18rem),
    linear-gradient(115deg, transparent 7%, rgba(31,77,80,.07) 8%, transparent 38%),
    linear-gradient(155deg, transparent 18%, rgba(255,255,255,.78) 19%, transparent 52%);
  opacity: .92;
}

.hero::before {
  background:
    radial-gradient(circle at 78% 34%, rgba(31,77,80,.14), transparent 18rem),
    linear-gradient(115deg, transparent 8%, rgba(255,255,255,.7) 9%, transparent 36%),
    linear-gradient(155deg, transparent 22%, rgba(31,77,80,.065) 23%, transparent 56%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.75fr);
  gap: 42px;
  align-items: center;
}

.eyebrow,
.section-kicker {
  margin: 0 0 12px;
  color: var(--blue-deep);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 780px;
  margin-bottom: 18px;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: .98;
  letter-spacing: 0;
}
h2 {
  margin-bottom: 16px;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0;
}
h3 { margin-bottom: 10px; font-size: 1.08rem; }

.lead,
.hero-text,
.section-text {
  max-width: 650px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.hero-actions,
.split-actions,
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  max-width: 720px;
}
.hero-proof span {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  backdrop-filter: blur(14px);
}
.hero-proof strong {
  display: block;
  color: var(--blue-deep);
}

.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 20px;
  font-weight: 900;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, #12243a, #214c68 58%, #2f6f8f);
  color: white;
  box-shadow: 0 16px 32px rgba(18, 36, 58, 0.18);
}
.btn-primary:hover {
  box-shadow: 0 18px 38px rgba(18, 36, 58, 0.24);
}
.btn-ghost,
.socials a {
  border-color: var(--line);
  background: rgba(255,255,255,.58);
  color: var(--blue-deep);
  backdrop-filter: blur(14px);
}

.glass-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(32, 70, 98, 0.18);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(235,247,252,.56));
  box-shadow: 0 24px 70px rgba(25, 54, 78, 0.13), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(26px) saturate(1.18);
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), transparent 38%),
    linear-gradient(315deg, rgba(47,111,143,.08), transparent 42%);
}
.glass-card > * {
  position: relative;
  z-index: 1;
}

.dashboard {
  min-height: 390px;
  padding: 24px;
}
.panel-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 800;
}
.pulse {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #76b7cf;
  box-shadow: 0 0 16px rgba(118, 183, 207, 0.55);
}
.dashboard-number { margin: 32px 0 20px; }
.dashboard-number span { color: var(--muted); font-weight: 800; }
.dashboard-number strong {
  display: block;
  margin-top: 8px;
  color: var(--blue-deep);
  font-size: clamp(3rem, 8vw, 4.8rem);
  line-height: 1;
}
.signal-stack { display: grid; gap: 12px; margin: 24px 0; }
.signal-stack span {
  display: block;
  width: var(--w);
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.chip-grid span,
.stat {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255,255,255,.58);
  color: var(--muted);
  font-weight: 750;
}

.section { padding: 82px 0; }
.section-head { max-width: 760px; margin-bottom: 30px; }
.cards,
.stats-grid,
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card,
.step {
  min-height: 205px;
  padding: 22px;
}
.card-number,
.step span {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  margin-bottom: 28px;
  border-radius: 8px;
  background: rgba(47,111,143,.09);
  color: var(--blue-deep);
  font-weight: 900;
}
.card p,
.step p,
.contact-copy p {
  color: var(--muted);
  line-height: 1.65;
}
.stat strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-deep);
  font-size: 2rem;
}

.split,
.contact-grid {
  display: grid;
  grid-template-columns: .82fr 1fr;
  gap: 42px;
  align-items: center;
}
.visual-frame {
  overflow: hidden;
  min-height: 360px;
}
.visual-frame img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.reference-band {
  padding: 68px 0;
}
.logo-marquee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
}
.marquee-window {
  overflow: hidden;
  border: 1px solid rgba(32, 70, 98, 0.18);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(235,247,252,.58));
  backdrop-filter: blur(24px) saturate(1.16);
  box-shadow: 0 24px 70px rgba(25, 54, 78, 0.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
}
.logo-tile {
  display: grid;
  width: 230px;
  height: 118px;
  place-items: center;
  margin: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.logo-tile.dark { background: #081427; }
.logo-tile img {
  max-width: 170px;
  max-height: 82px;
  object-fit: contain;
}
.join-tile {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 142px;
  padding: 22px;
}
.join-tile strong { color: var(--blue-deep); font-size: 1.15rem; }
.join-tile span { color: var(--muted); line-height: 1.55; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.reviews-section {
  padding-top: 48px;
}
.reviews-head {
  margin-inline: auto;
  text-align: center;
}
.reviews-head .section-text {
  margin-inline: auto;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.review-card {
  min-height: 245px;
  border: 1px solid rgba(32, 70, 98, 0.16);
  border-radius: 8px;
  padding: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(247,250,252,.68));
  box-shadow: 0 20px 56px rgba(25, 54, 78, 0.1), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
}
.review-top {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.review-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #3f7fbd, #a9d9ef);
  color: white;
  font-weight: 900;
}
.review-top strong {
  display: block;
  color: var(--ink);
}
.review-top span:not(.google-mark) {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.88rem;
}
.google-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
  color: white;
  font-weight: 900;
  font-size: 0.9rem;
}
.stars {
  margin-bottom: 12px;
  color: #f4b400;
  font-size: 1.02rem;
  letter-spacing: 0;
}
.stars span {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  margin-left: 4px;
  border-radius: 50%;
  background: #5f8ee8;
  color: white;
  font-size: 0.65rem;
}
.review-card p {
  color: #25384d;
  line-height: 1.62;
}
.review-card button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  padding: 0;
}
.offer-form {
  display: grid;
  gap: 16px;
  padding: 24px;
}
label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.74);
  color: var(--ink);
  font: inherit;
  outline: none;
  padding: 14px 15px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(47,111,143,.1);
}
.form-note { min-height: 24px; margin: 0; color: var(--blue-deep); font-weight: 800; }
.socials a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 900;
}
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 24;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #1bd366, #9dffc4);
  color: #052414;
  font-weight: 950;
  box-shadow: 0 18px 42px rgba(27, 211, 102, 0.24);
}
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 40px;
  color: var(--muted);
}
.site-footer strong { color: var(--ink); }
.site-footer p { margin: 0; }

.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 720ms ease, transform 720ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.float-soft { transform: translate3d(0, calc(var(--scroll, 0) * -0.018px), 0); }

@media (max-width: 980px) {
  .hero-grid,
  .split,
  .contact-grid,
  .logo-marquee { grid-template-columns: 1fr; }
  .cards,
  .cards.four,
  .stats-grid,
  .process-grid,
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard { max-width: 620px; }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: auto auto;
    width: calc(100% - 24px);
  }
  .nav-toggle { display: block; }
  .nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(20px);
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { justify-content: center; }
  .hero,
  .page-hero { padding: 122px 0 56px; }
  .hero { min-height: auto; }
  h1 { font-size: clamp(2.3rem, 13vw, 4.2rem); }
  .section { padding: 66px 0; }
  .cards,
  .cards.four,
  .stats-grid,
  .process-grid,
  .review-grid { grid-template-columns: 1fr; }
  .card,
  .step { min-height: auto; }
  .visual-frame,
  .visual-frame img { min-height: 280px; }
}

@media (max-width: 460px) {
  .container,
  .site-footer { width: min(100% - 24px, 1120px); }
  .hero-actions,
  .split-actions,
  .socials { flex-direction: column; }
  .btn,
  .socials a { width: 100%; }
  .chip-grid { grid-template-columns: 1fr; }
  .logo-tile { width: 190px; }
  .hero-proof { grid-template-columns: 1fr; }
}

/* Suyat-inspired final theme override */
:root {
  --ink: #071a3a;
  --muted: #42546b;
  --blue: #1457d9;
  --blue-deep: #071a3a;
  --cyan: #7fc8ff;
  --sky: #f4f8ff;
  --line: rgba(20, 87, 217, 0.22);
  --shadow: 0 26px 76px rgba(7, 26, 58, 0.16);
}

body {
  background:
    linear-gradient(125deg, rgba(20,87,217,.12), transparent 32%, rgba(127,200,255,.28) 58%, transparent 82%),
    radial-gradient(circle at 12% 8%, rgba(127,200,255,.34), transparent 24rem),
    radial-gradient(circle at 86% 16%, rgba(20,87,217,.13), transparent 26rem),
    linear-gradient(180deg, #f7fbff 0%, #eef5ff 52%, #ffffff 100%);
}

body::before {
  background-image:
    linear-gradient(rgba(20,87,217,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,87,217,.04) 1px, transparent 1px);
}

body::after {
  background:
    linear-gradient(105deg, transparent 0 18%, rgba(255,255,255,.72) 18% 19%, transparent 19% 46%, rgba(20,87,217,.075) 46% 47%, transparent 47% 100%),
    linear-gradient(180deg, rgba(244,248,255,.12), rgba(238,245,255,.66));
}

.site-header,
.glass-card,
.marquee-window,
.review-card {
  border-color: rgba(20,87,217,.24);
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(230,243,255,.46));
  box-shadow: 0 28px 82px rgba(7,26,58,.18), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(20,87,217,.08);
  backdrop-filter: blur(34px) saturate(1.28);
}

.glass-card::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), transparent 36%),
    linear-gradient(315deg, rgba(20,87,217,.12), transparent 42%);
}

.hero,
.page-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.82) 52%, rgba(255,255,255,.62)),
    linear-gradient(180deg, rgba(244,248,255,.22), rgba(238,245,255,.94)),
    url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1800&q=84") center / cover;
}

.hero::after,
.page-hero::after {
  background: linear-gradient(180deg, transparent, rgba(238,245,255,.94));
}

.brand-mark,
.btn-primary {
  background: linear-gradient(135deg, #071a3a, #0b2d66 58%, #1457d9);
}

/* Final readability pass */
.lead,
.hero-text,
.section-text,
.card p,
.step p,
.contact-copy p,
.join-tile span,
.dashboard-number span,
.panel-line,
.chip-grid span,
.stat,
.review-top span:not(.google-mark),
.site-footer,
.review-card button {
  color: #405366;
}

.hero-proof span {
  color: #2f4358;
  background: rgba(255, 255, 255, 0.78);
}

.glass-card,
.marquee-window,
.review-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 252, 0.78));
  border-color: rgba(20, 61, 90, 0.18);
}

.review-card p {
  color: #1f3144;
}

.btn-primary {
  background: linear-gradient(135deg, #0f1722, #183638 58%, #1f4d50);
}

/* Final lock: Suyat-like blue glass */
.site-header,
.glass-card,
.marquee-window,
.review-card {
  border-color: rgba(20,87,217,.24);
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(230,243,255,.46));
  box-shadow: 0 28px 82px rgba(7,26,58,.18), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(20,87,217,.08);
  backdrop-filter: blur(34px) saturate(1.28);
}

.brand-mark,
.btn-primary {
  background: linear-gradient(135deg, #071a3a, #0b2d66 58%, #1457d9);
}

.btn-primary {
  color: #fff;
  box-shadow: 0 18px 38px rgba(7,26,58,.22);
}

/* Futuristic premium theme lock */
:root {
  --ink: #eaf6ff;
  --muted: #b5c6d8;
  --blue: #39c8ff;
  --blue-deep: #061527;
  --cyan: #87f7ff;
  --sky: #071626;
  --line: rgba(135, 247, 255, 0.22);
  --shadow: 0 30px 90px rgba(0, 10, 24, 0.36);
  color-scheme: dark;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(57, 200, 255, 0.28), transparent 27rem),
    radial-gradient(circle at 88% 14%, rgba(119, 88, 255, 0.24), transparent 29rem),
    radial-gradient(circle at 48% 92%, rgba(32, 214, 184, 0.14), transparent 32rem),
    linear-gradient(135deg, #05111f 0%, #071a2c 45%, #081421 100%);
}

body::before {
  background-image:
    linear-gradient(rgba(135,247,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(135,247,255,.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.72) 55%, transparent 92%);
}

body::after {
  background:
    linear-gradient(115deg, transparent 0 16%, rgba(135,247,255,.09) 16% 16.5%, transparent 16.5% 48%, rgba(119,88,255,.08) 48% 48.5%, transparent 48.5% 100%),
    linear-gradient(180deg, rgba(7,22,38,.08), rgba(5,17,31,.76));
}

.hero,
.page-hero {
  background:
    linear-gradient(90deg, rgba(5,17,31,.94), rgba(7,26,44,.78) 54%, rgba(5,17,31,.62)),
    linear-gradient(180deg, rgba(57,200,255,.08), rgba(5,17,31,.92)),
    url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1800&q=84") center / cover;
}

.hero::after,
.page-hero::after {
  background: linear-gradient(180deg, transparent, rgba(5,17,31,.98));
}

.hero::before,
.page-hero::before {
  background:
    radial-gradient(circle at 78% 34%, rgba(57,200,255,.24), transparent 18rem),
    linear-gradient(115deg, transparent 8%, rgba(135,247,255,.13) 9%, transparent 36%),
    linear-gradient(155deg, transparent 22%, rgba(119,88,255,.12) 23%, transparent 56%);
}

.site-header,
.glass-card,
.marquee-window,
.review-card {
  border-color: rgba(135,247,255,.24);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(89,150,210,.08));
  box-shadow:
    0 30px 90px rgba(0,10,24,.38),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(135,247,255,.14);
  backdrop-filter: blur(30px) saturate(1.35);
}

.glass-card::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 35%),
    radial-gradient(circle at 86% 0%, rgba(135,247,255,.16), transparent 19rem),
    linear-gradient(315deg, rgba(119,88,255,.12), transparent 45%);
}

.brand-mark,
.btn-primary {
  background: linear-gradient(135deg, #39c8ff, #7758ff 68%, #20d6b8);
  color: #03101d;
  box-shadow: 0 18px 42px rgba(57,200,255,.24);
}

.btn-ghost,
.socials a,
.hero-proof span,
.chip-grid span,
.stat,
.nav-toggle {
  border-color: rgba(135,247,255,.18);
  background: rgba(255,255,255,.08);
  color: #dcecff;
}

.nav-menu a,
.lead,
.hero-text,
.section-text,
.card p,
.step p,
.contact-copy p,
.join-tile span,
.dashboard-number span,
.panel-line,
.site-footer,
.review-card button {
  color: var(--muted);
}

.nav-menu a:hover,
.nav-menu a.active,
.eyebrow,
.section-kicker,
.card-number,
.step span,
.stat strong,
.dashboard-number strong {
  color: var(--cyan);
}

.nav-menu a:hover,
.nav-menu a.active {
  border-color: rgba(135,247,255,.26);
  background: rgba(135,247,255,.1);
}

.dashboard {
  min-height: 430px;
  padding: 24px;
  isolation: isolate;
}

.dashboard::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 0;
  border: 1px solid rgba(135,247,255,.12);
  border-radius: 8px;
  pointer-events: none;
}

.panel-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(135,247,255,.18);
}

.panel-label {
  display: block;
  margin-bottom: 7px;
  color: var(--cyan);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.panel-top strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
}

.status-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(32,214,184,.28);
  border-radius: 999px;
  background: rgba(32,214,184,.1);
  color: #cafff7;
  font-size: .82rem;
  font-weight: 900;
}

.status-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20d6b8;
  box-shadow: 0 0 18px rgba(32,214,184,.85);
}

.dashboard-number {
  margin: 26px 0 18px;
}

.dashboard-number strong {
  text-shadow: 0 0 28px rgba(57,200,255,.22);
}

.metric-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 22px;
}

.metric-grid div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(135,247,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
}

.metric-grid span,
.channel-list i {
  display: block;
  color: #91a9bd;
  font-size: .74rem;
  font-style: normal;
  font-weight: 800;
}

.metric-grid strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 1.25rem;
}

.signal-stack span {
  height: 10px;
  background: linear-gradient(90deg, #39c8ff, #7758ff 58%, #20d6b8);
  box-shadow: 0 0 20px rgba(57,200,255,.22);
}

.channel-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.channel-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(135,247,255,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
}

.channel-list b {
  color: #f4fbff;
  font-size: .92rem;
}

.review-card {
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(238,248,255,.78));
  color: #071a3a;
}

.review-card p {
  color: #1f3144;
}

@media (max-width: 760px) {
  .nav-menu {
    background: rgba(6,21,39,.94);
  }

  .dashboard {
    min-height: auto;
  }
}

/* Production Shopier call-to-action */
html body.contact-page .contact-simple {
  max-width: 1180px !important;
}

html body.contact-page .shopier-cta {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) 46px !important;
  align-items: center !important;
  gap: 18px !important;
  max-width: 1180px !important;
  min-height: 116px !important;
  margin: 20px auto 0 !important;
  padding: 20px 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(115, 47, 255, .28) !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 88% 20%, rgba(191, 148, 255, .28), transparent 30%),
    linear-gradient(120deg, #22103f 0%, #4e168f 52%, #7400ff 100%) !important;
  box-shadow: 0 24px 64px rgba(69, 24, 128, .22) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}

html body.contact-page .shopier-cta::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.22) 48%, transparent 68%) !important;
  transform: translateX(-130%) !important;
}

html body.contact-page .shopier-cta:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 32px 78px rgba(69, 24, 128, .3) !important;
}

html body.contact-page .shopier-cta:hover::after {
  animation: softShine .82s ease both !important;
}

html body.contact-page .shopier-cta img {
  width: 68px !important;
  height: 68px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  box-shadow: 0 12px 28px rgba(18, 5, 39, .28) !important;
}

html body.contact-page .shopier-cta span {
  display: grid !important;
  gap: 6px !important;
}

html body.contact-page .shopier-cta small {
  color: rgba(255,255,255,.72) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

html body.contact-page .shopier-cta strong {
  color: #ffffff !important;
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
}

html body.contact-page .shopier-cta b {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  font-size: 1.4rem !important;
}

@media (max-width: 620px) {
  html body.contact-page .shopier-cta {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    min-height: 104px !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  html body.contact-page .shopier-cta img {
    width: 54px !important;
    height: 54px !important;
    border-radius: 13px !important;
  }

  html body.contact-page .shopier-cta b {
    display: none !important;
  }

  html body.contact-page .shopier-cta small {
    font-size: .68rem !important;
  }

  html body.contact-page .shopier-cta strong {
    font-size: 1rem !important;
  }
}

/* 2026-07-17 — v36 Shopier brand, contained Ertas seal and hero marker draw */
html body .hero h1 .hero-marker {
  position: relative !important;
  display: inline !important;
  max-width: none !important;
  padding: 0 !important;
  vertical-align: baseline !important;
  white-space: normal !important;
  isolation: isolate !important;
  background: transparent !important;
  animation: none !important;
  line-height: inherit !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
}

html body .hero h1 .hero-marker-bg {
  display: none !important;
}

html body .hero h1 .hero-marker-label {
  position: relative !important;
  z-index: 1 !important;
  display: inline !important;
  padding: .005em .1em .04em !important;
  border-radius: .12em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .34) !important;
  white-space: normal !important;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .9)) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 0% 100% !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
  will-change: background-size !important;
}

html body .hero h1 .hero-marker.is-sweeping .hero-marker-label {
  animation: heroMarkerSweep 1.15s cubic-bezier(.22, 1, .36, 1) 0s forwards !important;
}

@keyframes heroMarkerSweep {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}

html body .reviews-section .review-avatar.is-logo.is-seal img {
  width: 68% !important;
  height: 68% !important;
  max-width: 68% !important;
  max-height: 68% !important;
}

html body.contact-page .shopier-cta {
  grid-template-columns: 148px minmax(0, 1fr) 38px !important;
}

html body.contact-page .shopier-cta .shopier-brand {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, .68) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 9px 24px rgba(3, 12, 28, .15) !important;
}

html body.contact-page .shopier-cta .shopier-brand img {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  object-fit: contain !important;
}

html body.contact-page .shopier-cta .shopier-brand em {
  color: #111827 !important;
  font-size: 1.02rem !important;
  font-style: normal !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
}

@media (max-width: 620px) {
  html body .hero h1 .hero-marker {
    padding: 0 !important;
  }

html body .hero h1 .hero-marker-label {
    padding: .005em .08em .035em !important;
  }

  html body.contact-page .shopier-cta {
    grid-template-columns: 116px minmax(0, 1fr) 28px !important;
  }

  html body.contact-page .shopier-cta .shopier-brand {
    gap: 7px !important;
    padding: 7px 8px !important;
  }

  html body.contact-page .shopier-cta .shopier-brand img {
    width: 29px !important;
    height: 29px !important;
    max-width: 29px !important;
    min-width: 29px !important;
  }

  html body.contact-page .shopier-cta .shopier-brand em {
    font-size: .84rem !important;
  }
}

/* 2026-07-17 — v46 mobile overflow guard for all pages */
@media (max-width: 620px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .container,
  .site-footer,
  .site-header {
    width: min(100% - 20px, 1120px) !important;
  }

  .site-header {
    top: 10px !important;
    min-height: 58px !important;
    padding: 8px 9px !important;
  }

  .brand,
  .brand-logo {
    min-width: 0 !important;
    max-width: 236px !important;
  }

  .brand-logo {
    height: auto !important;
  }

  main,
  section,
  .section,
  .hero,
  .process-journey,
  .result-section,
  .service-section,
  .about-section,
  .contact-section {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  h1,
  .hero h1,
  .section-head h1,
  .section-head h2,
  .process-journey-head h1,
  .operation-showcase-copy h2,
  .about-content h1,
  .contact-section h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 9.7vw, 3rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  h2,
  h3,
  p,
  a,
  strong,
  small,
  span,
  figcaption {
    overflow-wrap: anywhere !important;
  }

  .hero-grid,
  .operation-showcase-grid,
  .process-journey-head,
  .about-content,
  .contact-simple,
  .service-trust-note {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .hero-ops-dashboard,
  .channel-sync-shell,
  .channel-sync-window,
  .feature-panel,
  .about-aside,
  .service-package-slider,
  .performance-slider,
  .contact-simple {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-actions,
  .split-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-actions .btn,
  .split-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-proof,
  .operation-benefits,
  .ops-dashboard-flow,
  .channel-command-stats,
  .about-confidence-row,
  .contact-cards,
  .process-journey-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ops-status-row,
  .channel-command-overview,
  .channel-sync-bar,
  .review-top,
  .contact-card,
  .shopier-cta {
    min-width: 0 !important;
  }

  .ops-status-row {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .ops-status-row b {
    grid-column: 2 !important;
    justify-self: start !important;
    white-space: normal !important;
  }

  .channel-command-flow,
  .performance-metrics,
  .process-result-grid,
  .result-snapshot,
  .contact-cards {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .channel-command-flow > i,
  .performance-metric-arrow {
    transform: rotate(90deg) !important;
    justify-self: center !important;
  }

  .channel-command-logos,
  .channel-logos,
  .process-channel-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .channel-logo,
  .channel-command-logos span,
  .reference-logo {
    min-width: 0 !important;
  }

  .channel-logo img,
  .channel-command-logos img,
  .reference-logo img {
    max-width: 86% !important;
    max-height: 74px !important;
    object-fit: contain !important;
  }

  .reference-showcase {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .reference-flow {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .reference-group {
    gap: 12px !important;
  }

  .reference-logo {
    width: clamp(136px, 42vw, 172px) !important;
    height: 76px !important;
    border-radius: 16px !important;
  }

  .reference-cta-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .review-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .review-card {
    min-width: 0 !important;
    padding: 22px !important;
  }

  .review-result {
    white-space: normal !important;
  }

  .performance-slider-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .performance-controls {
    justify-content: center !important;
  }

  .performance-metrics {
    gap: 14px !important;
  }

  .organic-result {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .performance-track,
  .package-track {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
  }

  .performance-slide {
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .performance-window-body,
  .performance-visual,
  .performance-slide img {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .service-package-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .package-controls {
    justify-content: center !important;
  }

  .package-slide {
    flex: 0 0 min(88vw, 330px) !important;
    max-width: min(88vw, 330px) !important;
  }

  .pricing-card {
    min-width: 0 !important;
  }

  .about-identity {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  .about-portrait {
    width: 88px !important;
    height: 88px !important;
  }

  .channel-panel {
    padding: 24px !important;
  }

  .contact-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .contact-card svg {
    grid-row: span 2 !important;
  }

  .shopier-cta {
    grid-template-columns: minmax(0, 1fr) 28px !important;
    padding: 14px !important;
  }

  .shopier-cta .shopier-brand {
    grid-column: 1 / -1 !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  .whatsapp-float {
    right: 14px !important;
    bottom: 14px !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px !important;
  }
}


/* 2026-07-17 — original command panel, arrowless steps and lighter hero */
html body .hero .hero-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr) !important;
  gap: clamp(28px, 3.5vw, 54px) !important;
}

html body .hero .hero-grid > .reveal:first-child h1 {
  max-width: 760px !important;
  font-size: clamp(2.65rem, 4.15vw, 4.45rem) !important;
  line-height: .99 !important;
}

html body .hero .hero-proof {
  display: none !important;
}

html body .hero-ops-dashboard {
  max-width: 455px !important;
  padding: 18px !important;
  border-radius: 24px !important;
}

html body .hero-ops-dashboard .ops-dashboard-head {
  margin-bottom: 13px !important;
}

html body .hero-ops-dashboard .ops-dashboard-head h2 {
  font-size: 1.42rem !important;
}

html body .hero-ops-dashboard .ops-status-row {
  padding: 10px !important;
}

html body .hero-ops-dashboard .ops-dashboard-flow {
  display: none !important;
}

html body .how-section .how-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body .how-section .how-arrow {
  display: none !important;
}

html body .channel-sync-shell {
  padding: 14px 0 0 14px !important;
}

html body .channel-sync-shell::before {
  width: 104px !important;
  height: 104px !important;
  background: #dcebe9 !important;
}

html body .channel-sync-shell::after {
  width: 122px !important;
  height: 122px !important;
  right: -12px !important;
  bottom: -12px !important;
  background: #e7e2f2 !important;
}

html body .channel-sync-window {
  border-radius: 26px !important;
  background: linear-gradient(155deg, #ffffff, #f8fbfc) !important;
}

html body .channel-command-overview {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 20px !important;
}

html body .channel-command-overview > div {
  display: grid !important;
  gap: 5px !important;
}

html body .channel-command-overview small {
  color: #648092 !important;
  font-size: .62rem !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
}

html body .channel-command-overview h3 {
  margin: 0 !important;
  color: #102e48 !important;
  font-size: 1.15rem !important;
  letter-spacing: -.025em !important;
}

html body .channel-command-overview > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: #ecf8f3 !important;
  color: #177457 !important;
  font-size: .67rem !important;
  font-weight: 800 !important;
}

html body .channel-command-overview > span i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22b77f !important;
  box-shadow: 0 0 0 4px rgba(34, 183, 127, .1) !important;
}

html body .channel-command-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 18px 16px !important;
}

html body .channel-command-stats article {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
  padding: 13px !important;
  border: 1px solid #e5edf1 !important;
  border-radius: 15px !important;
  background: rgba(244, 248, 250, .9) !important;
}

html body .channel-command-stats small {
  color: #708492 !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
}

html body .channel-command-stats strong {
  color: #112f4b !important;
  font-size: 1rem !important;
}

html body .channel-command-stats span {
  overflow: hidden !important;
  color: #71828e !important;
  font-size: .58rem !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .channel-command-flow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 18px !important;
  padding: 16px !important;
  border: 1px solid #e3ebef !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

html body .channel-command-flow > span {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
}

html body .channel-command-flow small {
  color: #4a8790 !important;
  font-size: .57rem !important;
  font-weight: 900 !important;
}

html body .channel-command-flow strong {
  color: #14334d !important;
  font-size: .7rem !important;
}

html body .channel-command-flow b {
  color: #7b8b96 !important;
  font-size: .58rem !important;
  font-weight: 600 !important;
}

html body .channel-command-flow > i {
  display: block !important;
  height: 1px !important;
  background: linear-gradient(90deg, #b8cbd0, #65a8a4) !important;
}

html body .channel-command-health {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 14px 18px 18px !important;
  padding: 13px 15px !important;
  border-radius: 17px !important;
  background: #102c45 !important;
}

html body .channel-command-health > div:first-child {
  display: grid !important;
  gap: 3px !important;
}

html body .channel-command-health strong {
  color: #ffffff !important;
  font-size: .68rem !important;
}

html body .channel-command-health small {
  color: rgba(225, 237, 242, .58) !important;
  font-size: .56rem !important;
}

html body .channel-command-logos {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html body .channel-command-logos > span {
  display: grid !important;
  min-width: 0 !important;
  height: 32px !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  background: #ffffff !important;
}

html body .channel-command-logos img {
  display: block !important;
  width: 84% !important;
  height: 21px !important;
  object-fit: contain !important;
}

html body .channel-sync-footer {
  background: #f7fafb !important;
}

@media (max-width: 860px) {
  html body .hero .hero-grid {
    grid-template-columns: 1fr !important;
  }

  html body .how-section .how-steps {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  html body .hero .hero-grid > .reveal:first-child h1 {
    font-size: clamp(2.05rem, 10.5vw, 2.9rem) !important;
  }

  html body .channel-command-overview {
    align-items: flex-start !important;
    padding: 16px 14px !important;
  }

  html body .channel-command-stats {
    grid-template-columns: 1fr !important;
    padding: 0 12px 12px !important;
  }

  html body .channel-command-flow {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 0 12px !important;
  }

  html body .channel-command-flow > i {
    width: 1px !important;
    height: 12px !important;
    margin-left: 7px !important;
    background: #a9c5c8 !important;
  }

  html body .channel-command-health {
    grid-template-columns: 1fr !important;
    margin: 12px !important;
  }

  html body .channel-command-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 2026-07-17 — split channel control showcase and navy conversion band */
html body .channel-operations-showcase {
  padding: clamp(76px, 8vw, 120px) 0 !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(61, 107, 157, .08), transparent 28rem),
    linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

html body .operation-showcase-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr) !important;
  align-items: center !important;
  gap: clamp(44px, 7vw, 100px) !important;
  width: min(1440px, calc(100% - 72px)) !important;
  max-width: 1440px !important;
}

html body .operation-showcase-copy {
  max-width: 650px !important;
}

html body .operation-showcase-copy .section-kicker {
  margin-bottom: 16px !important;
  color: #164c77 !important;
  letter-spacing: .16em !important;
}

html body .operation-showcase-copy h2 {
  margin: 0 !important;
  color: #0c254a !important;
  font-size: clamp(2.4rem, 4.5vw, 4.5rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}

html body .operation-showcase-copy > p:not(.section-kicker) {
  max-width: 610px !important;
  margin: 24px 0 0 !important;
  color: #566980 !important;
  font-size: clamp(1rem, 1.45vw, 1.2rem) !important;
  line-height: 1.65 !important;
}

html body .operation-benefits {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 30px !important;
}

html body .operation-benefits > span {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  padding: 14px 15px !important;
  border: 1px solid rgba(12, 37, 74, .07) !important;
  border-radius: 16px !important;
  background: #f6f8fb !important;
}

html body .operation-benefits i {
  display: grid !important;
  flex: 0 0 23px !important;
  width: 23px !important;
  height: 23px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #0d2b55 !important;
  color: #ffffff !important;
  font-size: .67rem !important;
  font-style: normal !important;
}

html body .operation-benefits strong {
  color: #122c50 !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
}

html body .operation-showcase-btn {
  margin-top: 28px !important;
  padding: 14px 20px !important;
  border-radius: 999px !important;
  background: #0d2b55 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(13, 43, 85, .17) !important;
}

html body .operation-showcase-btn b {
  margin-left: 8px !important;
}

html body .channel-sync-shell {
  position: relative !important;
  padding: 18px 0 0 18px !important;
}

html body .channel-sync-shell::before,
html body .channel-sync-shell::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  border-radius: 22px !important;
  background: #dce7f4 !important;
}

html body .channel-sync-shell::before {
  top: 0 !important;
  left: 0 !important;
  width: 120px !important;
  height: 120px !important;
}

html body .channel-sync-shell::after {
  right: -18px !important;
  bottom: -18px !important;
  width: 150px !important;
  height: 150px !important;
  opacity: .62 !important;
}

html body .channel-sync-window {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  border: 1px solid rgba(12, 37, 74, .08) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 34px 90px rgba(18, 44, 78, .16) !important;
}

html body .channel-sync-toast {
  position: absolute !important;
  z-index: 3 !important;
  top: -10px !important;
  right: -18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 15px !important;
  border-radius: 16px !important;
  background: #0b264c !important;
  color: #ffffff !important;
  box-shadow: 0 18px 38px rgba(5, 25, 55, .24) !important;
}

html body .channel-sync-toast > span {
  display: grid !important;
  width: 31px !important;
  height: 31px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #14c991 !important;
  color: #052f29 !important;
  font-weight: 900 !important;
}

html body .channel-sync-toast div {
  display: grid !important;
  gap: 2px !important;
}

html body .channel-sync-toast strong {
  font-size: .74rem !important;
}

html body .channel-sync-toast small {
  color: rgba(255, 255, 255, .65) !important;
  font-size: .62rem !important;
}

html body .channel-sync-bar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 54px !important;
  padding: 0 20px !important;
  border-bottom: 1px solid #e8edf3 !important;
  background: #fbfcfe !important;
}

html body .channel-sync-bar > span {
  display: flex !important;
  gap: 6px !important;
}

html body .channel-sync-bar > span i {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #ff8d96 !important;
}

html body .channel-sync-bar > span i:nth-child(2) { background: #f7ca4d !important; }
html body .channel-sync-bar > span i:nth-child(3) { background: #51d5a2 !important; }

html body .channel-sync-bar b {
  color: #19355a !important;
  font-size: .76rem !important;
}

html body .channel-sync-bar small {
  color: #6a7c94 !important;
  font-size: .66rem !important;
}

html body .channel-sync-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 20px !important;
  border-bottom: 1px solid #e9eef4 !important;
}

html body .channel-sync-summary > div {
  display: grid !important;
  gap: 7px !important;
}

html body .channel-sync-summary small {
  color: #617792 !important;
  font-size: .62rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

html body .channel-sync-summary strong {
  color: #0c2a52 !important;
  font-size: .88rem !important;
}

html body .channel-sync-summary strong i {
  margin: 0 7px !important;
  color: #8aa0b9 !important;
  font-style: normal !important;
}

html body .channel-sync-summary > span {
  color: #008f68 !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
}

html body .channel-sync-summary > span b {
  font-size: 1rem !important;
}

html body .channel-sync-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 18px !important;
  background: #fbfcfe !important;
}

html body .channel-sync-item {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 11px !important;
  border: 1px solid #e7edf4 !important;
  border-radius: 14px !important;
  background: #f5f8fb !important;
}

html body .channel-sync-item > span {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid #dfe7f0 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
}

html body .channel-sync-item img {
  display: block !important;
  width: 84% !important;
  height: 25px !important;
  object-fit: contain !important;
}

html body .channel-sync-item > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

html body .channel-sync-item strong {
  overflow: hidden !important;
  color: #102c50 !important;
  font-size: .76rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .channel-sync-item small {
  overflow: hidden !important;
  color: #6d8097 !important;
  font-size: .61rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .channel-sync-item > b {
  display: grid !important;
  width: 21px !important;
  height: 21px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #08b980 !important;
  color: #ffffff !important;
  font-size: .65rem !important;
}

html body .channel-sync-footer {
  display: flex !important;
  justify-content: space-between !important;
  gap: 15px !important;
  padding: 14px 20px !important;
  border-top: 1px solid #e8edf3 !important;
  color: #6c7f96 !important;
  font-size: .65rem !important;
}

html body .channel-sync-footer strong {
  color: #0a8765 !important;
}

html body .operations-cta-section {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(70px, 7vw, 108px) 0 !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(44, 91, 151, .28), transparent 34rem),
    linear-gradient(118deg, #06152f, #0c2a55) !important;
}

html body .operations-cta-section::before,
html body .operations-cta-section::after {
  content: "" !important;
  position: absolute !important;
  width: 720px !important;
  height: 720px !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 50% !important;
}

html body .operations-cta-section::before { top: -560px !important; right: -180px !important; }
html body .operations-cta-section::after { bottom: -650px !important; left: 18% !important; }

html body .operations-cta-inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 920px !important;
  text-align: center !important;
}

html body .operations-cta-inner > p {
  margin: 0 0 15px !important;
  color: #9cc7e8 !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body .operations-cta-inner h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(2.25rem, 4.5vw, 4.25rem) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}

html body .operations-cta-inner > span {
  display: block !important;
  max-width: 760px !important;
  margin: 22px auto 0 !important;
  color: rgba(228, 237, 247, .72) !important;
  font-size: clamp(.98rem, 1.5vw, 1.15rem) !important;
  line-height: 1.62 !important;
}

html body .operations-cta-inner > div {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 30px !important;
}

html body .operations-cta-primary,
html body .operations-cta-secondary {
  padding: 14px 21px !important;
  border-radius: 999px !important;
}

html body .operations-cta-primary {
  background: #ffffff !important;
  color: #0b2851 !important;
}

html body .operations-cta-secondary {
  border: 1px solid rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .05) !important;
  color: #ffffff !important;
}

html body .operations-cta-inner .btn b {
  margin-left: 9px !important;
}

@media (max-width: 980px) {
  html body .operation-showcase-grid {
    grid-template-columns: 1fr !important;
    width: min(100% - 36px, 760px) !important;
  }

  html body .operation-showcase-copy {
    max-width: none !important;
  }
}

@media (max-width: 620px) {
  html body .channel-operations-showcase {
    padding: 62px 0 !important;
  }

  html body .operation-showcase-grid {
    width: min(100% - 24px, 760px) !important;
    gap: 34px !important;
  }

  html body .operation-showcase-copy h2 {
    font-size: clamp(2.15rem, 11vw, 3.2rem) !important;
  }

  html body .operation-benefits {
    grid-template-columns: 1fr !important;
  }

  html body .channel-sync-shell {
    padding: 12px 0 0 !important;
  }

  html body .channel-sync-toast {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: fit-content !important;
    margin: 0 12px -9px auto !important;
  }

  html body .channel-sync-bar {
    grid-template-columns: auto 1fr !important;
    padding: 0 14px !important;
  }

  html body .channel-sync-bar small {
    display: none !important;
  }

  html body .channel-sync-summary {
    align-items: flex-start !important;
    padding: 16px 14px !important;
  }

  html body .channel-sync-grid {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  html body .channel-sync-footer {
    display: grid !important;
    padding: 13px 14px !important;
  }

  html body .operations-cta-section {
    padding: 64px 0 !important;
  }

  html body .operations-cta-inner {
    width: min(100% - 24px, 920px) !important;
  }

  html body .operations-cta-inner h2 {
    font-size: clamp(2.05rem, 10.5vw, 3rem) !important;
  }

  html body .operations-cta-inner > div {
    display: grid !important;
  }
}

/* 2026-07-17 — hotel operations dashboard hero and system flow */
html body .hero .hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr) !important;
  align-items: center !important;
  gap: clamp(28px, 4vw, 64px) !important;
  width: min(1440px, calc(100% - 72px)) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

html body .hero .hero-grid > .reveal:first-child {
  width: 100% !important;
  max-width: 790px !important;
  margin: 0 !important;
}

html body .hero .hero-grid > .reveal:first-child h1 {
  max-width: 790px !important;
  font-size: clamp(2.8rem, 4.6vw, 5.15rem) !important;
  line-height: .97 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}

html body .hero .hero-grid > .reveal:first-child .hero-text {
  max-width: 750px !important;
}

html body .hero-ops-dashboard {
  position: relative !important;
  justify-self: end !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 510px !important;
  padding: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(115, 91, 184, .25), transparent 42%),
    linear-gradient(145deg, rgba(4, 18, 42, .76), rgba(9, 31, 55, .62)) !important;
  box-shadow: 0 30px 90px rgba(0, 8, 24, .34), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  backdrop-filter: blur(24px) saturate(1.12) !important;
}

html body .hero-ops-dashboard::before {
  content: "" !important;
  position: absolute !important;
  width: 190px !important;
  height: 190px !important;
  top: -105px !important;
  right: -65px !important;
  border-radius: 50% !important;
  background: rgba(122, 98, 198, .2) !important;
  filter: blur(32px) !important;
  pointer-events: none !important;
}

html body .ops-dashboard-head {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

html body .ops-dashboard-kicker {
  display: block !important;
  margin-bottom: 7px !important;
  color: #b7f3d0 !important;
  font-size: .66rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

html body .ops-dashboard-head h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

html body .ops-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(151, 240, 190, .2) !important;
  border-radius: 999px !important;
  background: rgba(53, 162, 105, .12) !important;
  color: #c9f7dc !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
}

html body .ops-live i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  box-shadow: 0 0 0 5px rgba(74, 222, 128, .1) !important;
}

html body .ops-status-list {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 9px !important;
}

html body .ops-status-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .075) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html body .ops-status-index {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #b8cad8 !important;
  font-size: .66rem !important;
  font-weight: 900 !important;
}

html body .ops-status-row div {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

html body .ops-status-row strong {
  color: #ffffff !important;
  font-size: .82rem !important;
}

html body .ops-status-row small {
  overflow: hidden !important;
  color: rgba(222, 232, 240, .62) !important;
  font-size: .66rem !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .ops-status-row > b {
  padding: 6px 8px !important;
  border-radius: 999px !important;
  background: rgba(94, 211, 146, .12) !important;
  color: #a9efc8 !important;
  font-size: .62rem !important;
  letter-spacing: .03em !important;
}

html body .ops-dashboard-flow {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 13px !important;
}

html body .ops-dashboard-flow > span {
  display: grid !important;
  min-width: 0 !important;
  padding: 11px 9px !important;
  border-radius: 14px !important;
  background: rgba(1, 12, 28, .3) !important;
}

html body .ops-dashboard-flow i {
  margin-bottom: 7px !important;
  color: #9fc0d2 !important;
  font-size: .62rem !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

html body .ops-dashboard-flow strong {
  color: #ffffff !important;
  font-size: .72rem !important;
}

html body .ops-dashboard-flow small {
  margin-top: 3px !important;
  color: rgba(220, 230, 239, .54) !important;
  font-size: .61rem !important;
}

html body .how-section {
  background:
    radial-gradient(circle at 86% 8%, rgba(107, 83, 173, .08), transparent 26rem),
    linear-gradient(180deg, #f4f7f8, #ffffff) !important;
}

html body .how-section .section-head {
  max-width: 830px !important;
}

html body .how-section .how-steps {
  padding: 15px !important;
  border: 1px solid rgba(11, 31, 51, .075) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 24px 70px rgba(12, 35, 49, .075), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(16px) !important;
}

html body .how-section .how-step {
  min-height: 210px !important;
  border: 1px solid rgba(11, 31, 51, .07) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(90, 143, 158, .08), transparent 55%),
    #ffffff !important;
  box-shadow: 0 12px 34px rgba(12, 35, 49, .055) !important;
}

html body .how-section .how-arrow {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  align-self: center !important;
  place-items: center !important;
  border: 1px solid rgba(11, 31, 51, .08) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #54727d !important;
  box-shadow: 0 8px 22px rgba(12, 35, 49, .07) !important;
}

@media (max-width: 1080px) {
  html body .hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(350px, .85fr) !important;
    width: min(100% - 44px, 1180px) !important;
    gap: 26px !important;
  }

  html body .hero .hero-grid > .reveal:first-child h1 {
    font-size: clamp(2.5rem, 5vw, 4.2rem) !important;
  }
}

@media (max-width: 860px) {
  html body .hero {
    height: auto !important;
    min-height: 0 !important;
  }

  html body .hero .hero-grid {
    grid-template-columns: 1fr !important;
    padding-top: 118px !important;
    padding-bottom: 48px !important;
  }

  html body .hero-ops-dashboard {
    justify-self: stretch !important;
    max-width: none !important;
  }
}

@media (max-width: 620px) {
  html body .hero .hero-grid {
    width: min(100% - 24px, 1440px) !important;
    padding-top: 94px !important;
    padding-bottom: 32px !important;
    gap: 24px !important;
  }

  html body .hero .hero-grid > .reveal:first-child h1 {
    font-size: clamp(2.15rem, 11vw, 3.15rem) !important;
  }

  html body .hero-ops-dashboard {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  html body .ops-dashboard-head {
    gap: 10px !important;
  }

  html body .ops-dashboard-head h2 {
    font-size: 1.22rem !important;
  }

  html body .ops-status-row {
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    padding: 10px !important;
  }

  html body .ops-status-index {
    width: 30px !important;
    height: 30px !important;
  }

  html body .ops-dashboard-flow {
    gap: 6px !important;
  }

  html body .ops-dashboard-flow > span {
    padding: 9px 7px !important;
  }

  html body .how-section .how-steps {
    padding: 10px !important;
    border-radius: 24px !important;
  }

  html body .how-section .how-arrow {
    display: none !important;
  }
}

@media (max-width: 460px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .panel-top {
    flex-direction: column;
  }
}

/* Dashboard compact polish */
.dashboard {
  min-height: 0;
  padding: 22px;
}

.dashboard-number {
  margin: 22px 0 14px;
}

.dashboard-number strong {
  font-size: clamp(2.8rem, 6vw, 4.1rem);
}

.dashboard .signal-stack {
  gap: 10px;
  margin: 18px 0;
}

.channel-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.channel-list span {
  min-height: 50px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

@media (max-width: 460px) {
  .channel-list {
    grid-template-columns: 1fr;
  }
}

/* Final readability and OTA result section */
body {
  color: #f4fbff;
}

h1,
h2,
h3,
.brand,
.panel-top strong,
.card h3,
.join-tile strong {
  color: #ffffff;
}

.hero-text,
.section-text,
.card p,
.step p,
.contact-copy p,
.lead,
.join-tile span,
.dashboard-number span,
.metric-grid span,
.channel-list i,
.site-footer,
.nav-menu a {
  color: #c7d8e8;
}

.hero-proof span,
.btn-ghost,
.socials a,
.chip-grid span,
.stat,
.metric-grid div,
.channel-list span {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(167, 234, 255, 0.24);
}

.btn-primary {
  border-color: rgba(135, 247, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
  color: #f4fbff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 42px rgba(0,10,24,.22);
  backdrop-filter: blur(18px) saturate(1.25);
}

.btn-primary:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #39c8ff, #7758ff 68%, #20d6b8);
  color: #03101d;
  box-shadow: 0 22px 52px rgba(57, 200, 255, 0.28);
}

.result-section {
  position: relative;
  overflow: hidden;
}

.result-section::before {
  content: "";
  position: absolute;
  inset: 8% 0 auto;
  height: 320px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 42%, rgba(57,200,255,.17), transparent 18rem),
    radial-gradient(circle at 86% 34%, rgba(119,88,255,.18), transparent 20rem);
}

.result-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.result-card {
  margin: 0;
  padding: 10px;
}

.result-card img {
  width: 100%;
  aspect-ratio: 1.1 / 1;
  object-fit: cover;
  object-position: left top;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.92);
}

.result-card figcaption {
  display: grid;
  gap: 7px;
  padding: 16px 8px 6px;
}

.result-card figcaption strong {
  color: #ffffff;
  font-size: 1rem;
}

.result-card figcaption span {
  color: #c7d8e8;
  line-height: 1.55;
}

.review-card {
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(237,248,255,.82));
}

.review-top strong,
.review-card p {
  color: #10233a;
}

@media (max-width: 920px) {
  .result-grid {
    grid-template-columns: 1fr;
  }

  .result-card img {
    aspect-ratio: 1.6 / 1;
  }
}

/* Final hotel-glass readability and hover motion */
.hero,
.page-hero {
  background:
    linear-gradient(90deg, rgba(5,17,31,.95), rgba(7,26,44,.8) 52%, rgba(5,17,31,.58)),
    linear-gradient(180deg, rgba(57,200,255,.08), rgba(5,17,31,.94)),
    url("https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=2200&q=84") center / cover;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(57, 200, 255, 0.24), transparent 27rem),
    radial-gradient(circle at 88% 14%, rgba(119, 88, 255, 0.21), transparent 29rem),
    linear-gradient(rgba(5,17,31,.86), rgba(5,17,31,.91)),
    url("https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=2200&q=82") center top / cover fixed;
}

.btn,
.hero-proof span,
.glass-card,
.marquee-window,
.review-card {
  position: relative;
  overflow: hidden;
}

.btn::before,
.hero-proof span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -42%;
  z-index: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(135,247,255,.28), rgba(255,255,255,.18), transparent);
  filter: blur(10px);
  opacity: 0;
  transform: skewX(-16deg);
  transition: left 520ms ease, opacity 220ms ease;
}

.btn:hover::before,
.hero-proof span:hover::before {
  left: 112%;
  opacity: 1;
}

.btn > *,
.hero-proof span > * {
  position: relative;
  z-index: 1;
}

.btn-primary,
.btn-ghost {
  border-color: rgba(215, 244, 255, 0.42);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.btn-primary:hover,
.btn-ghost:hover {
  border-color: rgba(135, 247, 255, 0.62);
  background: linear-gradient(135deg, rgba(57,200,255,.88), rgba(119,88,255,.86) 68%, rgba(32,214,184,.86));
  color: #ffffff;
  box-shadow: 0 22px 54px rgba(57, 200, 255, 0.26);
}

.hero-proof span {
  border-color: rgba(215, 244, 255, 0.34);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 34px rgba(0,10,24,.18);
}

.hero-proof strong {
  color: #ffffff;
}

.hero-text,
.lead,
.section-text,
.card p,
.step p,
.contact-copy p,
.join-tile span,
.result-card figcaption span,
.dashboard-number span,
.metric-grid span,
.channel-list i {
  color: #d9eaff;
}

.glass-card,
.marquee-window {
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(80,145,210,.09));
  border-color: rgba(215,244,255,.28);
  box-shadow:
    0 30px 90px rgba(0,10,24,.42),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(135,247,255,.16);
}

.result-section .section-head {
  max-width: 820px;
}

.result-card {
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(80,145,210,.08));
}

.result-card img {
  opacity: .94;
}

.about-section .visual-frame img {
  object-position: center;
}

/* Clean hero after removing the status panel */
.hero-grid {
  grid-template-columns: minmax(0, 0.9fr);
  justify-content: start;
  gap: 0;
}

.hero-grid > .reveal {
  max-width: 840px;
  margin-left: clamp(12px, 6vw, 92px);
}

.hero h1 {
  max-width: 820px;
}

.hero .hero-text {
  max-width: 680px;
}

.hero-proof {
  max-width: 760px;
}

@media (max-width: 920px) {
  .hero-grid > .reveal {
    margin-left: 0;
  }
}

/* Regnum-inspired soft hero and performance pass */
.hero,
.page-hero {
  background:
    linear-gradient(90deg, rgba(4,14,25,.86), rgba(8,25,42,.58) 48%, rgba(4,14,25,.28)),
    linear-gradient(180deg, rgba(4,14,25,.12), rgba(4,14,25,.78)),
    url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=2200&q=82") center / cover;
}

body {
  background:
    linear-gradient(rgba(4,14,25,.86), rgba(4,14,25,.9)),
    url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=2200&q=78") center top / cover;
}

body::before {
  opacity: .38;
}

body::after {
  background: linear-gradient(180deg, rgba(4,14,25,.08), rgba(4,14,25,.68));
}

.hero {
  min-height: 86vh;
}

.hero-grid {
  grid-template-columns: minmax(0, 760px);
  align-items: center;
}

.hero-grid > .reveal {
  max-width: 760px;
  margin-left: clamp(0px, 4vw, 62px);
}

.hero h1 {
  max-width: 720px;
  font-size: clamp(2.25rem, 4.8vw, 4rem);
  line-height: 1;
}

.hero .hero-text {
  max-width: 610px;
  font-size: 1rem;
}

.hero-proof {
  max-width: 620px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-header,
.glass-card,
.marquee-window {
  backdrop-filter: blur(18px) saturate(1.16);
}

.hero-proof span,
.btn-primary,
.btn-ghost {
  backdrop-filter: blur(10px) saturate(1.12);
}

.btn::before,
.hero-proof span::before {
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), rgba(135,247,255,.18), transparent);
  filter: blur(6px);
  transition: left 420ms ease, opacity 180ms ease;
}

.btn-primary:hover,
.btn-ghost:hover {
  background: linear-gradient(135deg, rgba(54,184,224,.82), rgba(90,116,214,.78) 68%, rgba(31,196,174,.78));
  box-shadow: 0 18px 42px rgba(57, 200, 255, 0.18);
}

.hero-proof span:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(135,247,255,.14));
}

@media (max-width: 760px) {
  .hero {
    min-height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 11vw, 3.4rem);
  }

  .hero-proof {
    grid-template-columns: 1fr;
  }
}

/* Full-width resort header and wider hero balance */
.site-header {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 76px;
  grid-template-columns: minmax(180px, 1fr) auto;
  padding: 12px clamp(18px, 5vw, 76px);
  transform: none;
  border-width: 0 0 1px;
  border-radius: 0;
  border-color: rgba(226, 246, 255, 0.22);
  background: linear-gradient(90deg, rgba(7, 20, 34, 0.56), rgba(255,255,255,0.1), rgba(7,20,34,0.42));
  box-shadow: 0 18px 48px rgba(0, 10, 24, 0.2), inset 0 1px 0 rgba(255,255,255,.24);
  backdrop-filter: blur(20px) saturate(1.12);
}

.brand {
  min-width: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
}

.nav-menu {
  justify-content: end;
  gap: clamp(4px, 1vw, 12px);
}

.nav-menu a {
  color: rgba(245, 250, 255, 0.82);
}

.nav-menu a:hover,
.nav-menu a.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(226, 246, 255, 0.25);
}

.hero,
.page-hero {
  padding-top: 132px;
}

.hero-grid {
  width: min(1320px, calc(100% - 40px));
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
}

.hero-grid > .reveal {
  width: min(980px, 100%);
  max-width: 980px;
  margin-left: clamp(0px, 7vw, 118px);
}

.hero h1 {
  max-width: 820px;
  font-size: clamp(2.15rem, 4.25vw, 3.7rem);
}

.hero .hero-text {
  max-width: 720px;
}

.hero-actions {
  max-width: 720px;
}

.hero-proof {
  max-width: 900px;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.hero-proof span {
  min-height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 760px) {
  .site-header {
    min-height: 68px;
    grid-template-columns: auto auto;
    padding: 10px 14px;
  }

  .nav-menu {
    left: 14px;
    right: 14px;
    background: rgba(6, 21, 39, 0.92);
  }

  .hero-grid {
    width: min(100% - 28px, 1120px);
  }

  .hero-grid > .reveal {
    margin-left: 0;
  }

  .hero-proof {
    grid-template-columns: 1fr;
  }
}

/* Suyat-inspired clean luxury theme */
:root {
  --ink: #081d49;
  --muted: #5f6d83;
  --blue: #174b91;
  --blue-deep: #081d49;
  --cyan: #c49a45;
  --sky: #f6f8fc;
  --line: rgba(8, 29, 73, 0.12);
  --shadow: 0 18px 48px rgba(8, 29, 73, 0.1);
  color-scheme: light;
}

body {
  color: var(--ink);
  background:
    linear-gradient(rgba(246,248,252,.94), rgba(255,255,255,.97)),
    url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=2200&q=78") center top / cover;
}

body::before {
  opacity: .18;
  background-image:
    linear-gradient(rgba(8,29,73,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,29,73,.04) 1px, transparent 1px);
}

body::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(246,248,252,.82)),
    radial-gradient(circle at 80% 8%, rgba(196,154,69,.13), transparent 24rem);
}

.site-header {
  background: linear-gradient(90deg, rgba(255,255,255,.86), rgba(245,248,252,.74), rgba(255,255,255,.86));
  border-color: rgba(8,29,73,.1);
  box-shadow: 0 14px 42px rgba(8,29,73,.1), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(18px) saturate(1.12);
}

.brand,
.nav-menu a {
  color: var(--blue-deep);
}

.brand-mark {
  background: linear-gradient(135deg, #081d49, #174b91);
  color: #fff;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--blue-deep);
  background: rgba(23,75,145,.08);
  border-color: rgba(23,75,145,.14);
}

.hero,
.page-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.86) 48%, rgba(255,255,255,.46)),
    linear-gradient(180deg, rgba(246,248,252,.12), rgba(246,248,252,.92)),
    url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.hero::after,
.page-hero::after {
  background: linear-gradient(180deg, transparent, rgba(246,248,252,.96));
}

.hero h1,
h1,
h2,
h3,
.card h3,
.join-tile strong {
  color: var(--blue-deep);
}

.eyebrow,
.section-kicker {
  color: var(--cyan);
}

.hero-text,
.lead,
.section-text,
.card p,
.step p,
.contact-copy p,
.join-tile span,
.result-card figcaption span {
  color: var(--muted);
}

.btn-primary,
.btn-ghost {
  border-color: rgba(8,29,73,.14);
  background: #ffffff;
  color: var(--blue-deep);
  box-shadow: 0 12px 30px rgba(8,29,73,.1);
}

.btn-primary {
  background: linear-gradient(135deg, #081d49, #174b91);
  color: #fff;
}

.btn-primary:hover,
.btn-ghost:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #c49a45, #e1bf73);
  color: #081d49;
  box-shadow: 0 18px 42px rgba(196,154,69,.24);
}

.hero-proof {
  max-width: 900px;
}

.hero-proof span {
  border-color: rgba(8,29,73,.12);
  background: rgba(255,255,255,.86);
  color: var(--blue-deep);
  box-shadow: 0 14px 34px rgba(8,29,73,.08);
  backdrop-filter: blur(12px) saturate(1.08);
}

.hero-proof strong {
  color: var(--blue-deep);
}

.hero-proof span:hover {
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(8,29,73,.12);
}

.glass-card,
.marquee-window {
  border-color: rgba(8,29,73,.1);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.08);
}

.glass-card::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.7), transparent 38%),
    linear-gradient(315deg, rgba(196,154,69,.08), transparent 46%);
}

.how-section {
  background: linear-gradient(180deg, rgba(246,248,252,.72), rgba(255,255,255,.94));
}

.cards.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  min-height: 230px;
}

.card-number,
.step span {
  background: rgba(196,154,69,.14);
  color: var(--blue-deep);
  border: 1px solid rgba(196,154,69,.22);
}

.reference-band,
.reviews-section {
  background: rgba(246,248,252,.72);
}

.result-card,
.review-card {
  background: rgba(255,255,255,.92);
  color: var(--blue-deep);
}

.result-card figcaption strong,
.review-top strong,
.review-card p {
  color: var(--blue-deep);
}

.result-card img {
  border-color: rgba(8,29,73,.1);
}

.site-footer {
  color: var(--muted);
}

@media (max-width: 920px) {
  .cards.three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-header {
    background: rgba(255,255,255,.9);
  }

  .nav-menu {
    background: rgba(255,255,255,.94);
  }
}

/* Suyat-style hero image and step cards */
.hero {
  min-height: 88vh;
  background:
    linear-gradient(90deg, rgba(8,29,73,.84), rgba(23,75,145,.58) 48%, rgba(23,75,145,.28)),
    linear-gradient(180deg, rgba(8,29,73,.12), rgba(8,29,73,.78)),
    url("https://images.unsplash.com/photo-1540541338287-41700207dee6?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.hero::before {
  opacity: .38;
  background:
    radial-gradient(circle at 16% 50%, rgba(80,210,244,.22), transparent 18rem),
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.16), transparent 20rem);
}

.hero::after {
  background: linear-gradient(180deg, transparent 58%, rgba(8,29,73,.72));
}

.hero h1 {
  color: #ffffff;
  text-shadow: 0 16px 38px rgba(0,0,0,.18);
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #ffffff;
  backdrop-filter: blur(10px);
}

.hero .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8b35e;
}

.hero .hero-text {
  color: rgba(255,255,255,.84);
  font-weight: 650;
}

.hero-proof span {
  border-radius: 14px;
  border-color: rgba(255,255,255,.25);
  background: rgba(8,29,73,.34);
  color: #ffffff;
  box-shadow: none;
}

.hero-proof strong {
  color: #ffffff;
}

.hero-proof span:hover {
  background: rgba(255,255,255,.14);
}

.btn-primary {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--blue-deep);
}

.btn-ghost {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #ffffff;
}

.how-section {
  padding: 92px 0 100px;
  background: #fbfbfd;
}

.how-section .section-head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 52px;
  text-align: center;
}

.how-section .section-kicker {
  color: var(--blue);
}

.how-section h2 {
  color: var(--blue-deep);
}

.how-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.how-step {
  text-align: center;
}

.how-icon {
  position: relative;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  margin: 0 auto 28px;
  border-radius: 18px;
  background: #edf1f6;
  color: var(--blue);
}

.how-icon.gold {
  background: #f4efe4;
  color: #b8943e;
}

.how-icon span {
  position: absolute;
  top: -10px;
  right: 14px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  font-weight: 900;
}

.how-icon.gold span {
  background: #d6b562;
  color: var(--blue-deep);
}

.how-icon b {
  font-size: 2rem;
  line-height: 1;
}

.how-step h3 {
  margin-bottom: 16px;
  color: var(--blue-deep);
  font-size: 1.18rem;
}

.how-step p {
  max-width: 310px;
  margin-inline: auto;
  color: var(--muted);
  line-height: 1.75;
}

.how-arrow {
  display: grid;
  min-height: 82px;
  place-items: center;
  color: #c8ced8;
  font-size: 3rem;
  line-height: 1;
}

.section:not(.how-section) {
  background: rgba(251,251,253,.92);
}

@media (max-width: 920px) {
  .how-steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .how-arrow {
    min-height: auto;
    transform: rotate(90deg);
  }
}

/* Photo-backed reference area and shared subpage cards */
.mapping-icon b {
  position: relative;
  display: block;
  width: 34px;
  height: 28px;
}

.mapping-icon b::before,
.mapping-icon b::after {
  content: "";
  position: absolute;
  width: 19px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.mapping-icon b::before {
  top: 0;
  left: 0;
}

.mapping-icon b::after {
  right: 0;
  bottom: 0;
}

.mapping-icon {
  color: var(--blue);
}

.reference-band {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,29,73,.9), rgba(23,75,145,.62) 48%, rgba(8,29,73,.72)),
    url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2200&q=80") center / cover;
}

.reference-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 36%, rgba(80,210,244,.16), transparent 22rem),
    linear-gradient(180deg, rgba(8,29,73,.1), rgba(8,29,73,.8));
}

.reference-band .container {
  position: relative;
  z-index: 1;
}

.reference-band .section-kicker,
.reference-band h2 {
  color: #ffffff;
}

.reference-band .marquee-window,
.reference-band .join-tile {
  background: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.24);
}

.reviews-section {
  background: #fbfbfd;
}

.service-section,
.process-section,
.page-card-section {
  background: #fbfbfd;
}

.service-cards .card,
.process-cards .step,
.page-card-section .card {
  min-height: 230px;
  text-align: center;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 46px rgba(8,29,73,.08);
}

.service-cards .card-number,
.process-cards .step span,
.page-card-section .card-number {
  width: 76px;
  height: 76px;
  margin: 0 auto 26px;
  border-radius: 18px;
  background: #edf1f6;
  color: var(--blue);
  border-color: transparent;
  font-size: 1.1rem;
}

.service-cards .card:nth-child(4) .card-number,
.process-cards .step:nth-child(3) span,
.page-card-section .card:nth-child(3) .card-number {
  background: #f4efe4;
  color: #b8943e;
}

.service-cards .card p,
.process-cards .step p,
.page-card-section .card p {
  max-width: 310px;
  margin-inline: auto;
}

.page-hero {
  background:
    linear-gradient(90deg, rgba(8,29,73,.84), rgba(23,75,145,.58) 48%, rgba(23,75,145,.32)),
    linear-gradient(180deg, rgba(8,29,73,.1), rgba(8,29,73,.78)),
    url("https://images.unsplash.com/photo-1540541338287-41700207dee6?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.page-hero h1,
.page-hero .lead {
  color: #ffffff;
}

.page-hero .eyebrow {
  color: #d8b35e;
}

/* Final polish: softer subpage transitions and professional icons */
.page-hero {
  min-height: 390px;
  padding-bottom: 86px;
  background:
    linear-gradient(90deg, rgba(8,29,73,.86), rgba(23,75,145,.58) 48%, rgba(23,75,145,.34)),
    linear-gradient(180deg, rgba(8,29,73,.08), rgba(8,29,73,.64)),
    url("https://images.unsplash.com/photo-1584132967334-10e028bd69f7?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.page-hero::after {
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(246,248,252,.48));
}

.service-section,
.process-section,
.page-card-section,
.about-section {
  background:
    linear-gradient(180deg, #f6f8fc 0%, #fbfbfd 100%);
}

.service-section,
.process-section,
.page-card-section {
  margin-top: 0;
  padding-top: 76px;
}

.reference-band {
  background:
    linear-gradient(90deg, rgba(8,29,73,.9), rgba(23,75,145,.58) 48%, rgba(8,29,73,.74)),
    url("https://images.unsplash.com/photo-1584132967334-10e028bd69f7?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.service-cards .card,
.process-cards .step,
.page-card-section .card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,253,.9));
}

.service-cards .card-number,
.process-cards .step span:not(.card-icon),
.page-card-section .card-number {
  display: none;
}

.card-icon {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  margin: 0 auto 26px;
  border-radius: 18px;
  background: #edf1f6;
  color: var(--blue);
}

.card-icon.gold {
  background: #f4efe4;
  color: #b8943e;
}

.card-icon::before,
.card-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.icon-connect::before {
  width: 34px;
  height: 34px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.icon-connect::after {
  width: 38px;
  height: 3px;
  background: currentColor;
  transform: rotate(-32deg);
}

.icon-mapping::before,
.icon-mapping::after {
  width: 24px;
  height: 19px;
  border: 3px solid currentColor;
  border-radius: 6px;
}

.icon-mapping::before {
  left: 18px;
  top: 20px;
}

.icon-mapping::after {
  right: 18px;
  bottom: 20px;
}

.icon-price::before {
  width: 34px;
  height: 34px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(4px);
}

.icon-price::after {
  width: 34px;
  height: 22px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(-28deg) translate(2px, -2px);
}

.icon-check::before {
  width: 34px;
  height: 18px;
  border-left: 4px solid currentColor;
  border-bottom: 4px solid currentColor;
  transform: rotate(-45deg) translate(4px, -3px);
}

.icon-search::before {
  width: 30px;
  height: 30px;
  border: 3px solid currentColor;
  border-radius: 50%;
  transform: translate(-4px, -4px);
}

.icon-search::after {
  width: 18px;
  height: 3px;
  border-radius: 99px;
  background: currentColor;
  transform: rotate(45deg) translate(18px, 15px);
}

.icon-hotel::before {
  width: 36px;
  height: 36px;
  border: 3px solid currentColor;
  border-radius: 7px;
}

.icon-hotel::after {
  width: 4px;
  height: 24px;
  background: currentColor;
  box-shadow: -10px 0 0 currentColor, 10px 0 0 currentColor;
}

.process-cards .step .card-icon {
  display: grid;
}

/* Final subpage hero line fade, resort backgrounds, and SVG icons */
.page-hero::before {
  display: none;
}

.page-hero::after {
  height: 16%;
  background: linear-gradient(180deg, transparent 0%, #f6f8fc 100%);
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.services-page .page-hero {
  background:
    linear-gradient(90deg, rgba(8,29,73,.86), rgba(23,75,145,.58) 48%, rgba(23,75,145,.34)),
    linear-gradient(180deg, rgba(8,29,73,.08), rgba(8,29,73,.64)),
    url("https://images.unsplash.com/photo-1584132967334-10e028bd69f7?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.process-page .page-hero {
  background:
    linear-gradient(90deg, rgba(8,29,73,.86), rgba(23,75,145,.56) 48%, rgba(23,75,145,.3)),
    linear-gradient(180deg, rgba(8,29,73,.08), rgba(8,29,73,.64)),
    url("https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.about-page .page-hero {
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(8,29,73,.86), rgba(23,75,145,.54) 48%, rgba(23,75,145,.3)),
    linear-gradient(180deg, rgba(8,29,73,.08), rgba(8,29,73,.64)),
    url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.about-page .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(8,29,73,.86), rgba(23,75,145,.54) 48%, rgba(23,75,145,.3)),
    linear-gradient(180deg, rgba(8,29,73,.08), rgba(8,29,73,.64)),
    url("https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=2200&q=82") center / cover;
  animation: resortHeroFade 18s ease-in-out infinite alternate;
}

@keyframes resortHeroFade {
  0%, 28% { opacity: 0; }
  72%, 100% { opacity: 1; }
}

.card-icon {
  color: var(--blue);
}

.card-icon::before,
.card-icon::after {
  display: none;
}

.card-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-icon.gold svg {
  stroke-width: 2.35;
}

/* Remove subpage white halo; keep a straight divider like home */
.services-page .page-hero,
.process-page .page-hero,
.about-page .page-hero {
  overflow: hidden;
  border-bottom: 1px solid rgba(8, 29, 73, 0.08);
}

.services-page .page-hero::after,
.process-page .page-hero::after,
.about-page .page-hero::after {
  display: none;
}

.services-page .service-section,
.process-page .process-section,
.about-page .about-section,
.about-page .page-card-section {
  padding-top: 76px;
  background: #f6f8fc;
}

/* About cleanup, resort slideshow, and contact social colors */
.about-points {
  display: none;
}

.about-page .about-section {
  padding-bottom: 96px;
}

.about-page .visual-frame {
  position: relative;
  min-height: 420px;
  background:
    url("https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=1400&q=82") center / cover;
}

.about-page .visual-frame img {
  display: none;
}

.about-page .visual-frame::before,
.about-page .visual-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  animation: aboutResortSlide 15s infinite;
}

.about-page .visual-frame::before {
  background-image: url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=1400&q=82");
}

.about-page .visual-frame::after {
  background-image: url("https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=1400&q=82");
  animation-delay: 5s;
}

@keyframes aboutResortSlide {
  0%, 22% { opacity: 0; }
  34%, 58% { opacity: 1; }
  72%, 100% { opacity: 0; }
}

.about-page .visual-frame.glass-card::before,
.about-page .visual-frame.glass-card::after {
  pointer-events: none;
}

.about-page .visual-frame > * {
  z-index: 1;
}

.contact-page .page-hero {
  overflow: hidden;
  border-bottom: 1px solid rgba(8, 29, 73, 0.08);
  background:
    linear-gradient(90deg, rgba(8,29,73,.86), rgba(23,75,145,.56) 48%, rgba(23,75,145,.3)),
    linear-gradient(180deg, rgba(8,29,73,.08), rgba(8,29,73,.64)),
    url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.contact-page .page-hero::before,
.contact-page .page-hero::after {
  display: none;
}

.contact-page .section {
  background: #f6f8fc;
}

.socials .social-whatsapp {
  border-color: transparent;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.24);
}

.socials .social-instagram {
  border-color: transparent;
  background: linear-gradient(135deg, #833ab4, #fd1d1d 48%, #fcb045);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(193, 53, 132, 0.22);
}

.socials .social-whatsapp:hover,
.socials .social-instagram:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

/* About section full-background resort motion */
.about-page .about-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 620px;
  display: grid;
  align-items: center;
  padding: 112px 0;
  background:
    linear-gradient(90deg, rgba(8,29,73,.84), rgba(23,75,145,.52) 48%, rgba(8,29,73,.22)),
    url("https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.about-page .about-section::before,
.about-page .about-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.03);
  animation: aboutFullResort 15s ease-in-out infinite;
}

.about-page .about-section::before {
  background-image: url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=2200&q=82");
}

.about-page .about-section::after {
  background-image: url("https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=2200&q=82");
  animation-delay: 5s;
}

.about-page .about-content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-content: end;
}

.about-page .about-content > .reveal {
  width: min(620px, 100%);
  padding: 34px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 24px 70px rgba(8,29,73,.18);
  backdrop-filter: blur(16px) saturate(1.08);
}

.about-page .about-content h2 {
  color: var(--blue-deep);
}

.about-page .about-content .section-text {
  color: var(--muted);
}

@keyframes aboutFullResort {
  0%, 18% {
    opacity: 0;
    transform: scale(1.03);
  }
  30%, 54% {
    opacity: 1;
    transform: scale(1.08);
  }
  66%, 100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

@media (max-width: 760px) {
  .about-page .about-section {
    min-height: auto;
    padding: 82px 0;
  }

  .about-page .about-content {
    justify-content: stretch;
  }

  .about-page .about-content > .reveal {
    padding: 24px;
  }
}

/* Full-page Regnum-style about background */
body.about-page {
  position: relative;
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(5,15,30,.82), rgba(8,29,73,.55) 52%, rgba(5,15,30,.72)),
    url("https://images.unsplash.com/photo-1584132967334-10e028bd69f7?auto=format&fit=crop&w=2400&q=90") center / cover fixed;
}

body.about-page::before,
body.about-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.03);
  animation: aboutPageResort 16s ease-in-out infinite;
}

body.about-page::before {
  background-image:
    linear-gradient(90deg, rgba(5,15,30,.82), rgba(8,29,73,.52) 52%, rgba(5,15,30,.72)),
    url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2400&q=90");
}

body.about-page::after {
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(5,15,30,.82), rgba(8,29,73,.5) 52%, rgba(5,15,30,.72)),
    url("https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=2400&q=90");
  animation-delay: 5.3s;
}

@keyframes aboutPageResort {
  0%, 18% {
    opacity: 0;
    transform: scale(1.03);
  }
  30%, 54% {
    opacity: 1;
    transform: scale(1.08);
  }
  66%, 100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

.about-page .site-header {
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.09), rgba(255,255,255,.16));
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 18px 52px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.28);
}

.about-page .brand,
.about-page .nav-menu a {
  color: #ffffff;
}

.about-page .nav-menu a:hover,
.about-page .nav-menu a.active {
  color: #ffffff;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
}

.about-page .page-hero,
.about-page .about-section {
  background: transparent;
  border-bottom: 0;
}

.about-page .page-hero {
  min-height: 58vh;
  display: grid;
  align-items: end;
  padding-bottom: 78px;
}

.about-page .page-hero::before,
.about-page .page-hero::after,
.about-page .about-section::before,
.about-page .about-section::after {
  display: none;
}

.about-page .page-hero h1,
.about-page .page-hero .lead,
.about-page .page-hero .eyebrow {
  color: #ffffff;
}

.about-page .about-section {
  min-height: 48vh;
  padding: 0 0 116px;
}

.about-page .about-content {
  justify-content: end;
}

.about-page .about-content > .reveal {
  background: rgba(5, 15, 30, 0.48);
  border-color: rgba(255,255,255,.2);
  color: #ffffff;
  box-shadow: 0 24px 78px rgba(0,0,0,.22);
}

.about-page .about-content h2,
.about-page .about-content .section-kicker,
.about-page .about-content .section-text {
  color: #ffffff;
}

.about-page .about-content .section-text {
  opacity: .88;
}

@media (max-width: 760px) {
  body.about-page {
    background-attachment: scroll;
  }

  .about-page .page-hero {
    min-height: auto;
    padding-bottom: 48px;
  }

  .about-page .about-section {
    min-height: auto;
    padding-bottom: 72px;
  }
}

/* Full-page services background, ready for future packages */
body.services-page {
  position: relative;
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(5,15,30,.82), rgba(8,29,73,.55) 52%, rgba(5,15,30,.72)),
    url("https://images.unsplash.com/photo-1584132967334-10e028bd69f7?auto=format&fit=crop&w=2400&q=90") center / cover fixed;
}

body.services-page::before,
body.services-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.03);
  animation: servicePageResort 16s ease-in-out infinite;
}

body.services-page::before {
  background-image:
    linear-gradient(90deg, rgba(5,15,30,.82), rgba(8,29,73,.52) 52%, rgba(5,15,30,.72)),
    url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2400&q=90");
}

body.services-page::after {
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(5,15,30,.82), rgba(8,29,73,.5) 52%, rgba(5,15,30,.72)),
    url("https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=2400&q=90");
  animation-delay: 5.3s;
}

@keyframes servicePageResort {
  0%, 18% {
    opacity: 0;
    transform: scale(1.03);
  }
  30%, 54% {
    opacity: 1;
    transform: scale(1.08);
  }
  66%, 100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

.services-page .site-header {
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.09), rgba(255,255,255,.16));
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 18px 52px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.28);
}

.services-page .brand,
.services-page .nav-menu a {
  color: #ffffff;
}

.services-page .nav-menu a:hover,
.services-page .nav-menu a.active {
  color: #ffffff;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
}

.services-page .page-hero,
.services-page .service-section {
  background: transparent;
  border-bottom: 0;
}

.services-page .page-hero {
  min-height: 58vh;
  display: grid;
  align-items: end;
  padding-bottom: 78px;
}

.services-page .page-hero::before,
.services-page .page-hero::after {
  display: none;
}

.services-page .page-hero h1,
.services-page .page-hero .lead,
.services-page .page-hero .eyebrow {
  color: #ffffff;
}

.services-page .service-section {
  min-height: 48vh;
  padding: 0 0 116px;
}

.services-page .service-content {
  display: grid;
  justify-content: end;
}

.services-page .service-content > .reveal {
  width: min(660px, 100%);
  padding: 34px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(5, 15, 30, 0.48);
  color: #ffffff;
  box-shadow: 0 24px 78px rgba(0,0,0,.22);
  backdrop-filter: blur(16px) saturate(1.08);
}

.services-page .service-content h2,
.services-page .service-content .section-kicker,
.services-page .service-content .section-text {
  color: #ffffff;
}

.services-page .service-content .section-text {
  opacity: .88;
}

@media (max-width: 760px) {
  body.services-page {
    background-attachment: scroll;
  }

  .services-page .page-hero {
    min-height: auto;
    padding-bottom: 48px;
  }

  .services-page .service-section {
    min-height: auto;
    padding-bottom: 72px;
  }

  .services-page .service-content {
    justify-content: stretch;
  }

  .services-page .service-content > .reveal {
    padding: 24px;
  }
}

/* Revert services/about to the clean home theme, keep the dark feature cards */
body.services-page,
body.about-page {
  color: var(--ink);
  background:
    linear-gradient(rgba(246,248,252,.94), rgba(255,255,255,.97)),
    url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=2200&q=78") center top / cover;
}

body.services-page::before,
body.services-page::after,
body.about-page::before,
body.about-page::after {
  display: none;
  animation: none;
}

.services-page .site-header,
.about-page .site-header {
  background: linear-gradient(90deg, rgba(255,255,255,.86), rgba(245,248,252,.74), rgba(255,255,255,.86));
  border-color: rgba(8,29,73,.1);
  box-shadow: 0 14px 42px rgba(8,29,73,.1), inset 0 1px 0 rgba(255,255,255,.92);
}

.services-page .brand,
.services-page .nav-menu a,
.about-page .brand,
.about-page .nav-menu a {
  color: var(--blue-deep);
}

.services-page .nav-menu a:hover,
.services-page .nav-menu a.active,
.about-page .nav-menu a:hover,
.about-page .nav-menu a.active {
  color: var(--blue-deep);
  background: rgba(23,75,145,.08);
  border-color: rgba(23,75,145,.14);
}

.services-page .page-hero,
.about-page .page-hero {
  min-height: 390px;
  display: grid;
  align-items: center;
  padding: 132px 0 86px;
  border-bottom: 1px solid rgba(8, 29, 73, 0.08);
  background:
    linear-gradient(90deg, rgba(8,29,73,.86), rgba(23,75,145,.58) 48%, rgba(23,75,145,.34)),
    linear-gradient(180deg, rgba(8,29,73,.08), rgba(8,29,73,.64)),
    url("https://images.unsplash.com/photo-1584132967334-10e028bd69f7?auto=format&fit=crop&w=2200&q=82") center / cover;
}

.services-page .page-hero::before,
.services-page .page-hero::after,
.about-page .page-hero::before,
.about-page .page-hero::after {
  display: none;
}

.services-page .page-hero h1,
.services-page .page-hero .lead,
.services-page .page-hero .eyebrow,
.about-page .page-hero h1,
.about-page .page-hero .lead,
.about-page .page-hero .eyebrow {
  color: #ffffff;
}

.services-page .service-section,
.about-page .about-section {
  min-height: auto;
  padding: 86px 0 104px;
  background: #f6f8fc;
}

.services-page .service-content,
.about-page .about-content {
  display: grid;
  justify-content: center;
}

.feature-panel,
.services-page .service-content > .feature-panel,
.about-page .about-content > .feature-panel {
  width: min(760px, 100%);
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(16,20,35,.92), rgba(11,32,66,.88));
  color: #ffffff;
  box-shadow: 0 28px 78px rgba(8,29,73,.24);
  backdrop-filter: blur(16px) saturate(1.08);
}

.feature-panel h2,
.feature-panel .section-kicker,
.feature-panel .section-text {
  color: #ffffff;
}

.feature-panel .section-text {
  opacity: .88;
}

@media (max-width: 760px) {
  .services-page .page-hero,
  .about-page .page-hero {
    min-height: auto;
    padding: 122px 0 56px;
  }
}

/* Otel Contract brand logo */
.brand {
  min-width: 0;
}

.brand-logo {
  display: block;
  width: clamp(142px, 16vw, 218px);
  height: auto;
  max-height: 42px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(10%) sepia(35%) saturate(2217%) hue-rotate(202deg) brightness(88%) contrast(101%);
}

.site-header .brand {
  min-height: 48px;
}

@media (max-width: 760px) {
  .brand-logo {
    width: 138px;
    max-height: 36px;
  }
}

/* Final alignment: centered brand bar and home-style subpages */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 74px;
  padding: 7px clamp(18px, 4vw, 72px) 9px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 16px;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(242,247,253,.78), rgba(255,255,255,.9));
  border: 0;
  border-bottom: 1px solid rgba(9, 27, 67, .1);
  box-shadow: 0 12px 34px rgba(8, 29, 73, .09), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(18px) saturate(1.08);
}

.site-header .brand {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  width: clamp(132px, 12vw, 172px);
  max-height: 25px;
}

.nav-toggle {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.nav-menu {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 58px);
}

.nav-menu a {
  min-height: 28px;
  padding: 4px 8px;
  color: var(--blue-deep);
  border-radius: 11px;
  font-size: .86rem;
  line-height: 1;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--blue-deep);
  background: rgba(28, 85, 154, .08);
  border-color: rgba(28, 85, 154, .16);
}

.hero,
.page-hero {
  background:
    linear-gradient(90deg, rgba(8, 20, 50, .86) 0%, rgba(23, 57, 111, .64) 50%, rgba(74, 116, 176, .24) 100%),
    linear-gradient(180deg, rgba(8, 17, 40, .2) 0%, rgba(8, 17, 40, .7) 100%),
    url("https://images.unsplash.com/photo-1540541338287-41700207dee6?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.page-hero,
.services-page .page-hero,
.process-page .page-hero,
.about-page .page-hero,
.contact-page .page-hero {
  min-height: 520px;
  display: grid;
  align-items: center;
  padding: 138px 0 78px;
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(8, 20, 50, .86) 0%, rgba(23, 57, 111, .64) 50%, rgba(74, 116, 176, .24) 100%),
    linear-gradient(180deg, rgba(8, 17, 40, .2) 0%, rgba(8, 17, 40, .7) 100%),
    url("https://images.unsplash.com/photo-1540541338287-41700207dee6?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.page-hero::before,
.page-hero::after,
.services-page .page-hero::before,
.services-page .page-hero::after,
.process-page .page-hero::before,
.process-page .page-hero::after,
.about-page .page-hero::before,
.about-page .page-hero::after,
.contact-page .page-hero::before,
.contact-page .page-hero::after {
  display: none;
}

.page-hero .container {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.page-hero h1,
.page-hero .lead,
.page-hero .eyebrow,
.services-page .page-hero h1,
.services-page .page-hero .lead,
.services-page .page-hero .eyebrow,
.process-page .page-hero h1,
.process-page .page-hero .lead,
.process-page .page-hero .eyebrow,
.about-page .page-hero h1,
.about-page .page-hero .lead,
.about-page .page-hero .eyebrow,
.contact-page .page-hero h1,
.contact-page .page-hero .lead,
.contact-page .page-hero .eyebrow {
  color: #ffffff;
}

.page-hero h1 {
  max-width: 760px;
  font-size: clamp(2.55rem, 5.4vw, 5.35rem);
  line-height: .98;
}

.page-hero .lead {
  max-width: 570px;
  color: rgba(255,255,255,.86);
}

.services-page .service-section,
.process-page .process-section,
.process-page .result-section,
.about-page .about-section,
.contact-page .contact-section {
  background: #f5f7fb;
}

.service-content,
.about-content {
  justify-content: center;
}

.feature-panel,
.services-page .service-content > .feature-panel,
.about-page .about-content > .feature-panel {
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(18, 22, 38, .94), rgba(12, 34, 70, .9));
  box-shadow: 0 28px 80px rgba(8, 29, 73, .25);
}

.contact-card,
.result-card,
.review-card,
.process-card,
.reference-strip,
.reference-cta,
.how-step {
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(246,249,253,.9));
  box-shadow: 0 18px 54px rgba(8, 29, 73, .1);
}

@media (max-width: 760px) {
  .site-header {
    min-height: 62px;
    padding: 9px 18px;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
  }

  .site-header .brand {
    grid-column: 1;
    justify-self: start;
  }

  .brand-logo {
    width: 136px;
    max-height: 26px;
  }

  .nav-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  .nav-menu {
    grid-column: 1 / -1;
    grid-row: auto;
    position: absolute;
    top: calc(100% + 8px);
    left: 18px;
    right: 18px;
    width: auto;
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    display: none;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(8,29,73,.1);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(8,29,73,.14);
    backdrop-filter: blur(18px);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .page-hero,
  .services-page .page-hero,
  .process-page .page-hero,
  .about-page .page-hero,
  .contact-page .page-hero {
    min-height: auto;
    padding: 116px 0 62px;
  }

  .page-hero .container {
    width: min(100% - 32px, 1120px);
  }
}

/* Services pricing and animated process results */
.services-page .service-section {
  padding: 104px 0 118px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%);
}

.services-page .service-section .section-head {
  max-width: 820px;
  margin: 0 auto 58px;
  text-align: center;
}

.services-page .service-section .section-kicker {
  color: #1f8a4c;
}

.services-page .service-section h2 {
  max-width: 760px;
  margin-inline: auto;
  color: #10172f;
  font-size: clamp(2rem, 3.3vw, 3.35rem);
  line-height: 1.06;
}

.services-page .service-section .section-text {
  max-width: 720px;
  margin-inline: auto;
  color: var(--muted);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.pricing-card {
  position: relative;
  min-height: 390px;
  padding: 28px 24px;
  overflow: hidden;
  border: 1px solid rgba(122, 88, 255, .22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 70% 18%, rgba(107, 55, 255, .22), transparent 34%),
    linear-gradient(180deg, #080b14 0%, #0d1020 100%);
  color: #ffffff;
  box-shadow: 0 28px 78px rgba(8, 12, 28, .18);
}

.pricing-card.featured {
  border-color: rgba(139, 92, 246, .72);
  background:
    radial-gradient(circle at 68% 22%, rgba(126, 58, 242, .72), transparent 45%),
    linear-gradient(180deg, #10132a 0%, #15102c 100%);
  transform: translateY(-10px);
}

.pricing-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.86);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pricing-card h3 {
  margin: 28px 0 10px;
  color: #ffffff;
  font-size: 1.35rem;
}

.pricing-card p {
  min-height: 58px;
  margin: 0 0 18px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}

.blur-price {
  display: block;
  margin: 6px 0 24px;
  color: #ffffff;
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
  filter: blur(5px);
  user-select: none;
}

.pricing-card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-card li {
  color: rgba(255,255,255,.8);
  font-size: .92rem;
}

.pricing-card li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #ffffff;
  font-size: .72rem;
}

.process-page .result-section {
  padding: 110px 0 128px;
}

.process-page .result-section .section-head {
  max-width: 850px;
}

.process-page .result-section h2 {
  max-width: 900px;
  font-size: clamp(2.15rem, 4vw, 4rem);
  line-height: 1.04;
}

.animated-results {
  perspective: 1400px;
}

.animated-results .result-card {
  animation: resultFloat 7s ease-in-out infinite;
  will-change: transform;
}

.animated-results .result-card:nth-child(2) {
  animation-delay: .9s;
}

.animated-results .result-card:nth-child(3) {
  animation-delay: 1.8s;
}

@keyframes resultFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0deg);
  }
  50% {
    transform: translateY(-16px) rotateX(2deg);
  }
}

@media (max-width: 980px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-card.featured {
    transform: none;
  }
}

@media (max-width: 620px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* Absolute final override: package area is a white strip, never image-backed */
html body.services-page main section.service-section.pricing-section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: 104px 0 116px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-color: #ffffff !important;
}

html body.services-page main section.service-section.pricing-section::before,
html body.services-page main section.service-section.pricing-section::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

html body.services-page main section.service-section.pricing-section .section-head {
  max-width: 840px !important;
  margin: 0 auto 56px !important;
  text-align: center !important;
}

html body.services-page main section.service-section.pricing-section .section-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(27, 143, 82, .08) !important;
  color: #15803d !important;
}

html body.services-page main section.service-section.pricing-section h2 {
  color: #10172f !important;
}

html body.services-page main section.service-section.pricing-section .section-text {
  color: var(--muted) !important;
}

/* Absolute final override: shared white strips for services, process, about and contact */
html body.services-page main section.service-section.pricing-section,
html body.process-page main section.result-section,
html body.about-page main section.about-section,
html body.contact-page main > section.section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(78px, 8vw, 116px) 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-color: #ffffff !important;
}

html body.services-page main section.service-section.pricing-section::before,
html body.services-page main section.service-section.pricing-section::after,
html body.process-page main section.result-section::before,
html body.process-page main section.result-section::after,
html body.about-page main section.about-section::before,
html body.about-page main section.about-section::after,
html body.contact-page main > section.section::before,
html body.contact-page main > section.section::after {
  content: none !important;
  display: none !important;
}

html body.process-page main section.result-section .section-head,
html body.about-page main section.about-section .about-content,
html body.contact-page main > section.section .contact-grid {
  max-width: 1120px !important;
  margin-inline: auto !important;
}

html body.process-page main section.result-section .section-head {
  max-width: 820px !important;
  margin-bottom: 46px !important;
  text-align: center !important;
}

html body.process-page main section.result-section .section-kicker,
html body.about-page main section.about-section .section-kicker,
html body.contact-page main > section.section .section-kicker {
  color: #b48d22 !important;
}

html body.process-page main section.result-section h2,
html body.about-page main section.about-section h2,
html body.contact-page main > section.section h2 {
  color: #10172f !important;
}

html body.process-page main section.result-section .section-text,
html body.about-page main section.about-section .section-text,
html body.contact-page main > section.section p,
html body.contact-page main > section.section label {
  color: #60708d !important;
}

html body.about-page main section.about-section .feature-panel,
html body.contact-page main > section.section .contact-copy,
html body.contact-page main > section.section .offer-form {
  border: 1px solid rgba(16, 23, 47, .08) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .94)) !important;
  box-shadow: 0 28px 90px rgba(16, 23, 47, .11) !important;
  color: #10172f !important;
}

html body.about-page main section.about-section .feature-panel {
  width: min(760px, 100%) !important;
  margin-inline: auto !important;
  padding: clamp(30px, 4vw, 52px) !important;
}

html body.contact-page main > section.section .contact-copy a.social-whatsapp {
  background: #25d366 !important;
  color: #062411 !important;
}

html body.contact-page main > section.section .contact-copy a.social-instagram {
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 24%, #d62976 52%, #962fbf 74%, #4f5bd5 100%) !important;
  color: #ffffff !important;
}

.pricing-card {
  transform-origin: center bottom !important;
  animation: pricingCardEnter .82s cubic-bezier(.2, .82, .18, 1) both !important;
  transition: transform .34s ease, box-shadow .34s ease, border-color .34s ease !important;
}

.pricing-card:nth-child(1) { animation-delay: .04s !important; }
.pricing-card:nth-child(2) { animation-delay: .14s !important; }
.pricing-card:nth-child(3) { animation-delay: .24s !important; }
.pricing-card:nth-child(4) { animation-delay: .34s !important; }

.pricing-card:hover {
  transform: translateY(-10px) scale(1.015) !important;
  box-shadow: 0 34px 90px rgba(28, 14, 71, .24) !important;
}

.pricing-card::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.18) 42%, transparent 64%) !important;
  transform: translateX(-115%) !important;
  opacity: .75 !important;
  transition: transform .7s ease !important;
}

.pricing-card:hover::after {
  transform: translateX(115%) !important;
}

.blur-price {
  color: #51df89 !important;
  filter: blur(4px) !important;
  opacity: .95 !important;
  text-shadow: 0 0 24px rgba(81, 223, 137, .52) !important;
}

.animated-results .result-card {
  animation: resultCardEnter .9s cubic-bezier(.2, .82, .18, 1) both !important;
  transition: transform .34s ease, box-shadow .34s ease !important;
}

.animated-results .result-card:nth-child(2) { animation-delay: .12s !important; }
.animated-results .result-card:nth-child(3) { animation-delay: .24s !important; }

.animated-results .result-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 30px 80px rgba(16, 23, 47, .14) !important;
}

@keyframes pricingCardEnter {
  from {
    opacity: 0;
    transform: translateY(34px) scale(.94);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes resultCardEnter {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 760px) {
  html body.services-page main section.service-section.pricing-section,
  html body.process-page main section.result-section,
  html body.about-page main section.about-section,
  html body.contact-page main > section.section {
    padding: 64px 0 !important;
  }
}

/* 2026-07-03: Otel Contract logo and services page without hero band */
.brand-logo {
  width: clamp(230px, 19vw, 310px) !important;
  height: auto !important;
  max-height: 44px !important;
  object-fit: contain !important;
}

.site-header .brand {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body.services-page main {
  padding-top: 0 !important;
}

html body.services-page main > .page-hero {
  display: none !important;
}

html body.services-page main section.service-section.pricing-section {
  min-height: calc(100vh - 72px) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(92px, 7vw, 112px) 0 clamp(76px, 7vw, 106px) !important;
}

html body.services-page main section.service-section.pricing-section .section-head {
  margin-bottom: clamp(34px, 4vw, 48px) !important;
}

@media (max-width: 760px) {
  .brand-logo {
    width: clamp(184px, 54vw, 230px) !important;
    max-height: 36px !important;
  }

  html body.services-page main section.service-section.pricing-section {
    min-height: auto !important;
    align-items: start !important;
    padding: 92px 0 64px !important;
  }
}

/* Final layout pass: white content strips and polished card motion across pages */
html body.services-page main section.service-section.pricing-section,
html body.process-page main section.result-section,
html body.about-page main section.about-section,
html body.contact-page main > section.section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(78px, 8vw, 116px) 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-color: #ffffff !important;
}

html body.services-page main section.service-section.pricing-section::before,
html body.services-page main section.service-section.pricing-section::after,
html body.process-page main section.result-section::before,
html body.process-page main section.result-section::after,
html body.about-page main section.about-section::before,
html body.about-page main section.about-section::after,
html body.contact-page main > section.section::before,
html body.contact-page main > section.section::after {
  content: none !important;
  display: none !important;
}

html body.process-page main section.result-section .section-head,
html body.about-page main section.about-section .about-content,
html body.contact-page main > section.section .contact-grid {
  max-width: 1120px !important;
  margin-inline: auto !important;
}

html body.process-page main section.result-section .section-head {
  max-width: 820px !important;
  margin-bottom: 46px !important;
  text-align: center !important;
}

html body.process-page main section.result-section .section-kicker,
html body.about-page main section.about-section .section-kicker,
html body.contact-page main > section.section .section-kicker {
  color: #b48d22 !important;
}

html body.process-page main section.result-section h2,
html body.about-page main section.about-section h2,
html body.contact-page main > section.section h2 {
  color: #10172f !important;
}

html body.process-page main section.result-section .section-text,
html body.about-page main section.about-section .section-text,
html body.contact-page main > section.section p,
html body.contact-page main > section.section label {
  color: #60708d !important;
}

html body.about-page main section.about-section .feature-panel,
html body.contact-page main > section.section .contact-copy,
html body.contact-page main > section.section .offer-form {
  border: 1px solid rgba(16, 23, 47, .08) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .94)) !important;
  box-shadow: 0 28px 90px rgba(16, 23, 47, .11) !important;
  color: #10172f !important;
}

html body.about-page main section.about-section .feature-panel {
  width: min(760px, 100%) !important;
  margin-inline: auto !important;
  padding: clamp(30px, 4vw, 52px) !important;
}

html body.contact-page main > section.section .contact-copy a.social-whatsapp {
  background: #25d366 !important;
  color: #062411 !important;
}

html body.contact-page main > section.section .contact-copy a.social-instagram {
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 24%, #d62976 52%, #962fbf 74%, #4f5bd5 100%) !important;
  color: #ffffff !important;
}

.pricing-card {
  transform-origin: center bottom !important;
  animation: pricingCardEnter .82s cubic-bezier(.2, .82, .18, 1) both !important;
  transition: transform .34s ease, box-shadow .34s ease, border-color .34s ease !important;
}

.pricing-card:nth-child(1) { animation-delay: .04s !important; }
.pricing-card:nth-child(2) { animation-delay: .14s !important; }
.pricing-card:nth-child(3) { animation-delay: .24s !important; }
.pricing-card:nth-child(4) { animation-delay: .34s !important; }

.pricing-card:hover {
  transform: translateY(-10px) scale(1.015) !important;
  box-shadow: 0 34px 90px rgba(28, 14, 71, .24) !important;
}

.pricing-card::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.18) 42%, transparent 64%) !important;
  transform: translateX(-115%) !important;
  opacity: .75 !important;
  transition: transform .7s ease !important;
}

.pricing-card:hover::after {
  transform: translateX(115%) !important;
}

.blur-price {
  color: #51df89 !important;
  filter: blur(4px) !important;
  opacity: .95 !important;
  text-shadow: 0 0 24px rgba(81, 223, 137, .52) !important;
}

.animated-results .result-card {
  animation: resultCardEnter .9s cubic-bezier(.2, .82, .18, 1) both !important;
  transition: transform .34s ease, box-shadow .34s ease !important;
}

.animated-results .result-card:nth-child(2) { animation-delay: .12s !important; }
.animated-results .result-card:nth-child(3) { animation-delay: .24s !important; }

.animated-results .result-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 30px 80px rgba(16, 23, 47, .14) !important;
}

@keyframes pricingCardEnter {
  from {
    opacity: 0;
    transform: translateY(34px) scale(.94);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes resultCardEnter {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 760px) {
  html body.services-page main section.service-section.pricing-section,
  html body.process-page main section.result-section,
  html body.about-page main section.about-section,
  html body.contact-page main > section.section {
    padding: 64px 0 !important;
  }
}

/* Shared white strip language + refined card motion */
html body.process-page main section.result-section,
html body.about-page main section.about-section,
html body.contact-page main > section.section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: 104px 0 116px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-color: #ffffff !important;
}

html body.process-page main section.result-section::before,
html body.process-page main section.result-section::after,
html body.about-page main section.about-section::before,
html body.about-page main section.about-section::after,
html body.contact-page main > section.section::before,
html body.contact-page main > section.section::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

html body.process-page main section.result-section .section-head,
html body.about-page main section.about-section .about-content,
html body.contact-page main > section.section .contact-grid {
  position: relative !important;
  z-index: 1 !important;
}

html body.process-page main section.result-section .section-kicker,
html body.about-page main section.about-section .section-kicker,
html body.contact-page main > section.section .section-kicker {
  color: #15803d !important;
}

html body.process-page main section.result-section h2,
html body.about-page main section.about-section h2,
html body.contact-page main > section.section h2 {
  color: #10172f !important;
}

html body.process-page main section.result-section .section-text,
html body.about-page main section.about-section .section-text,
html body.contact-page main > section.section p {
  color: var(--muted) !important;
  opacity: 1 !important;
}

html body.about-page main section.about-section .feature-panel,
html body.contact-page main > section.section .contact-copy,
html body.contact-page main > section.section .offer-form {
  border: 1px solid rgba(8, 29, 73, .08) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,251,255,.92)) !important;
  color: #10172f !important;
  box-shadow: 0 24px 70px rgba(8, 29, 73, .11) !important;
}

html body.about-page main section.about-section .feature-panel h2,
html body.about-page main section.about-section .feature-panel .section-text,
html body.contact-page main > section.section .contact-copy h2,
html body.contact-page main > section.section .contact-copy p,
html body.contact-page main > section.section .offer-form label {
  color: #10172f !important;
}

.blur-price {
  color: #59e38b !important;
  text-shadow: 0 0 22px rgba(89, 227, 139, .38);
}

.pricing-card {
  animation: pricingCardEnter .85s cubic-bezier(.2, .8, .2, 1) both !important;
  transform: translateY(18px) scale(.98);
  transition: transform .38s ease, border-color .38s ease, box-shadow .38s ease;
}

.pricing-card:nth-child(1) {
  animation-delay: .08s !important;
}

.pricing-card:nth-child(2) {
  animation-delay: .18s !important;
}

.pricing-card:nth-child(3) {
  animation-delay: .28s !important;
}

.pricing-card:nth-child(4) {
  animation-delay: .38s !important;
}

.pricing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.11) 45%, transparent 70%);
  opacity: 0;
  transform: translateX(-42%);
  transition: opacity .38s ease, transform .58s ease;
  pointer-events: none;
}

.pricing-card:hover {
  transform: translateY(-12px) scale(1.015);
  border-color: rgba(139, 92, 246, .72);
  box-shadow: 0 34px 86px rgba(42, 23, 112, .26);
}

.pricing-card:hover::after {
  opacity: 1;
  transform: translateX(42%);
}

@keyframes pricingCardEnter {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.96);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.animated-results .result-card {
  animation: resultCardEnter .9s cubic-bezier(.2, .8, .2, 1) both !important;
  transition: transform .38s ease, box-shadow .38s ease;
}

.animated-results .result-card:nth-child(2) {
  animation-delay: .14s !important;
}

.animated-results .result-card:nth-child(3) {
  animation-delay: .28s !important;
}

.animated-results .result-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 32px 86px rgba(8, 29, 73, .18);
}

@keyframes resultCardEnter {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Hard override: services pricing must be a clean white strip */
body.services-page main > .service-section.pricing-section,
body.services-page .pricing-section,
.services-page .pricing-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 104px 0 116px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
}

body.services-page main > .service-section.pricing-section::before,
body.services-page main > .service-section.pricing-section::after,
body.services-page .pricing-section::before,
body.services-page .pricing-section::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.pricing-section .section-head {
  max-width: 840px;
  margin: 0 auto 56px;
  text-align: center;
}

.pricing-section .section-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(27, 143, 82, .08);
  color: #15803d !important;
  letter-spacing: .16em;
}

.pricing-section h2 {
  margin: 22px auto 16px;
  max-width: 760px;
  color: #10172f !important;
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  line-height: 1.06;
}

.pricing-section .section-text {
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted) !important;
}

/* Final services pricing strip: clean like home sections */
.services-page .service-section {
  padding: 104px 0 116px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f9fd 48%, #ffffff 100%);
}

.services-page .service-section .section-head {
  max-width: 840px;
  margin: 0 auto 56px;
  text-align: center;
}

.services-page .service-section .section-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(27, 143, 82, .08);
  color: #15803d;
  letter-spacing: .16em;
}

.services-page .service-section h2 {
  margin: 22px auto 16px;
  max-width: 760px;
  color: #10172f;
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  line-height: 1.06;
}

.services-page .service-section .section-text {
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted);
}

.pricing-grid {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.pricing-card {
  min-height: 392px;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 26px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 72% 20%, rgba(122, 65, 255, .22), transparent 36%),
    linear-gradient(180deg, #080b14 0%, #0c1020 100%);
  color: #ffffff;
  transform: translateY(0);
  animation: pricingCardFloat 7s ease-in-out infinite;
}

.pricing-card:nth-child(2) {
  animation-delay: .35s;
}

.pricing-card:nth-child(3) {
  animation-delay: .7s;
}

.pricing-card:nth-child(4) {
  animation-delay: 1.05s;
}

.pricing-card.featured {
  background:
    radial-gradient(circle at 68% 20%, rgba(126, 58, 242, .78), transparent 44%),
    linear-gradient(180deg, #11152f 0%, #150f2f 100%);
  transform: none;
}

.pricing-tag {
  display: none;
}

.pricing-card h3 {
  margin: 0 0 12px;
}

.pricing-card p {
  min-height: 74px;
}

.blur-price {
  margin-top: auto;
}

@keyframes pricingCardFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

.process-page .result-section {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f9fd 46%, #ffffff 100%);
}

.process-page .result-section .section-kicker {
  color: #15803d;
}

.process-page .result-section h2 {
  color: #10172f;
}

.process-page .result-section .section-text {
  color: var(--muted);
  opacity: 1;
}

@media (max-width: 980px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* Split-page rhythm: white intro, resort-image content bands */
body.services-page,
body.process-page,
body.about-page,
body.contact-page {
  background: #f5f7fb;
}

.services-page .page-hero,
.process-page .page-hero,
.about-page .page-hero,
.contact-page .page-hero {
  min-height: 455px;
  padding: 150px 0 82px;
  background:
    radial-gradient(circle at 18% 18%, rgba(199, 226, 246, .72), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(226, 218, 255, .64), transparent 38%),
    linear-gradient(180deg, #fbfcff 0%, #f6f8fc 100%);
  border-bottom: 1px solid rgba(8, 29, 73, .07);
}

.services-page .page-hero h1,
.services-page .page-hero .lead,
.services-page .page-hero .eyebrow,
.process-page .page-hero h1,
.process-page .page-hero .lead,
.process-page .page-hero .eyebrow,
.about-page .page-hero h1,
.about-page .page-hero .lead,
.about-page .page-hero .eyebrow,
.contact-page .page-hero h1,
.contact-page .page-hero .lead,
.contact-page .page-hero .eyebrow {
  color: var(--blue-deep);
}

.services-page .page-hero .lead,
.process-page .page-hero .lead,
.about-page .page-hero .lead,
.contact-page .page-hero .lead {
  color: var(--muted);
}

.services-page .service-section,
.about-page .about-section,
.contact-page main > .section {
  position: relative;
  overflow: hidden;
  padding: 110px 0 120px;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(8, 18, 45, .88), rgba(17, 45, 92, .74) 52%, rgba(24, 58, 108, .36)),
    linear-gradient(180deg, rgba(8, 17, 40, .12), rgba(8, 17, 40, .78)),
    url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.about-page .about-section {
  background:
    linear-gradient(90deg, rgba(8, 18, 45, .9), rgba(17, 45, 92, .7) 52%, rgba(24, 58, 108, .32)),
    linear-gradient(180deg, rgba(8, 17, 40, .1), rgba(8, 17, 40, .76)),
    url("https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.contact-page main > .section {
  background:
    linear-gradient(90deg, rgba(8, 18, 45, .86), rgba(17, 45, 92, .68) 52%, rgba(24, 58, 108, .3)),
    linear-gradient(180deg, rgba(8, 17, 40, .08), rgba(8, 17, 40, .72)),
    url("https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.services-page .service-section::before,
.about-page .about-section::before,
.contact-page main > .section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(245,247,251,1) 0%, rgba(245,247,251,0) 14%, rgba(245,247,251,0) 86%, rgba(245,247,251,1) 100%);
  pointer-events: none;
}

.services-page .service-content,
.about-page .about-content {
  justify-content: start;
}

.services-page .service-content > .feature-panel,
.about-page .about-content > .feature-panel,
.contact-page .contact-copy,
.contact-page .offer-form {
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(145deg, rgba(18, 22, 38, .9), rgba(12, 34, 70, .82));
  color: #ffffff;
  box-shadow: 0 30px 86px rgba(2, 8, 24, .32);
  backdrop-filter: blur(18px) saturate(1.08);
}

.contact-page .contact-copy {
  padding: clamp(28px, 4vw, 42px);
  border-radius: 18px;
}

.contact-page .contact-copy h2,
.contact-page .contact-copy p,
.contact-page .contact-copy .section-kicker,
.contact-page .offer-form label {
  color: #ffffff;
}

.process-page .process-section {
  padding: 104px 0 112px;
  background:
    linear-gradient(180deg, #f6f8fc 0%, #ffffff 52%, #f5f7fb 100%);
}

.process-page .result-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0 118px;
  background:
    radial-gradient(circle at 14% 0%, rgba(206, 229, 248, .76), transparent 34%),
    radial-gradient(circle at 82% 0%, rgba(228, 219, 255, .72), transparent 36%),
    linear-gradient(180deg, #f7f9fd 0 37%, #ffffff 37% 100%);
}

.process-card,
.result-card,
.contact-card,
.review-card,
.how-step {
  border: 1px solid rgba(8, 29, 73, .08);
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(250,252,255,.9));
}

@media (max-width: 760px) {
  .services-page .page-hero,
  .process-page .page-hero,
  .about-page .page-hero,
  .contact-page .page-hero {
    min-height: auto;
    padding: 112px 0 62px;
  }

  .services-page .service-section,
  .about-page .about-section,
  .contact-page main > .section,
  .process-page .process-section,
  .process-page .result-section {
    padding: 72px 0;
  }
}

/* Clean split layout: no fog, stronger process split, larger logo */
:root {
  --clean-white: #f7f9fd;
}

.brand-logo {
  width: clamp(166px, 15vw, 224px);
  max-height: 34px;
}

.site-header .brand {
  min-height: 34px;
}

.services-page .page-hero,
.process-page .page-hero,
.about-page .page-hero,
.contact-page .page-hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--clean-white) 100%);
}

.services-page .service-section::before,
.about-page .about-section::before,
.contact-page main > .section::before,
.process-page .result-section::before,
.process-page .result-section::after,
.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after {
  display: none;
  content: none;
}

.services-page .service-section,
.about-page .about-section,
.contact-page main > .section {
  background:
    linear-gradient(90deg, rgba(8, 18, 45, .9), rgba(18, 45, 88, .72) 54%, rgba(18, 45, 88, .42)),
    url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.about-page .about-section {
  background:
    linear-gradient(90deg, rgba(8, 18, 45, .9), rgba(18, 45, 88, .7) 54%, rgba(18, 45, 88, .38)),
    url("https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.contact-page main > .section {
  background:
    linear-gradient(90deg, rgba(8, 18, 45, .9), rgba(18, 45, 88, .72) 54%, rgba(18, 45, 88, .38)),
    url("https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.process-page .process-section {
  background: #ffffff;
}

.process-page .result-section {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(8, 18, 45, .9), rgba(18, 45, 88, .72) 54%, rgba(18, 45, 88, .38)),
    url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.process-page .result-section .section-kicker,
.process-page .result-section h2,
.process-page .result-section .section-text {
  color: #ffffff;
}

.process-page .result-section .section-text {
  opacity: .86;
}

.process-page .result-card {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(250,252,255,.9));
  box-shadow: 0 28px 78px rgba(2, 8, 24, .22);
}

@media (max-width: 760px) {
  .brand-logo {
    width: 154px;
    max-height: 30px;
  }
}

/* Final visual correction: subpage heroes match home hero, compact type, fixed steps */
.hero,
.page-hero,
.services-page .page-hero,
.process-page .page-hero,
.about-page .page-hero,
.contact-page .page-hero {
  min-height: 92vh;
  display: grid;
  align-items: center;
  padding: 132px 0 76px;
  border: 0;
}

.hero h1,
.page-hero h1,
.services-page .page-hero h1,
.process-page .page-hero h1,
.about-page .page-hero h1,
.contact-page .page-hero h1 {
  max-width: 760px;
  font-size: clamp(2.35rem, 4.15vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.hero .hero-text,
.page-hero .lead,
.services-page .page-hero .lead,
.process-page .page-hero .lead,
.about-page .page-hero .lead,
.contact-page .page-hero .lead {
  max-width: 620px;
  font-size: clamp(.98rem, 1.25vw, 1.12rem);
  line-height: 1.75;
}

.page-hero .container,
.services-page .page-hero .container,
.process-page .page-hero .container,
.about-page .page-hero .container,
.contact-page .page-hero .container {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.page-hero,
.services-page .page-hero,
.process-page .page-hero,
.about-page .page-hero,
.contact-page .page-hero {
  background:
    linear-gradient(90deg, rgba(8, 20, 50, .86) 0%, rgba(23, 57, 111, .64) 50%, rgba(74, 116, 176, .24) 100%),
    linear-gradient(180deg, rgba(8, 17, 40, .2) 0%, rgba(8, 17, 40, .7) 100%),
    url("https://images.unsplash.com/photo-1540541338287-41700207dee6?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.services-page .page-hero {
  background:
    linear-gradient(90deg, rgba(8, 20, 50, .86) 0%, rgba(23, 57, 111, .64) 50%, rgba(74, 116, 176, .24) 100%),
    linear-gradient(180deg, rgba(8, 17, 40, .2) 0%, rgba(8, 17, 40, .7) 100%),
    url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.process-page .page-hero {
  background:
    linear-gradient(90deg, rgba(8, 20, 50, .86) 0%, rgba(23, 57, 111, .64) 50%, rgba(74, 116, 176, .24) 100%),
    linear-gradient(180deg, rgba(8, 17, 40, .2) 0%, rgba(8, 17, 40, .7) 100%),
    url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.about-page .page-hero {
  background:
    linear-gradient(90deg, rgba(8, 20, 50, .86) 0%, rgba(23, 57, 111, .64) 50%, rgba(74, 116, 176, .24) 100%),
    linear-gradient(180deg, rgba(8, 17, 40, .2) 0%, rgba(8, 17, 40, .7) 100%),
    url("https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.contact-page .page-hero {
  background:
    linear-gradient(90deg, rgba(8, 20, 50, .86) 0%, rgba(23, 57, 111, .64) 50%, rgba(74, 116, 176, .24) 100%),
    linear-gradient(180deg, rgba(8, 17, 40, .2) 0%, rgba(8, 17, 40, .7) 100%),
    url("https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=2400&q=84") center / cover;
}

.page-hero h1,
.page-hero .lead,
.page-hero .eyebrow,
.services-page .page-hero h1,
.services-page .page-hero .lead,
.services-page .page-hero .eyebrow,
.process-page .page-hero h1,
.process-page .page-hero .lead,
.process-page .page-hero .eyebrow,
.about-page .page-hero h1,
.about-page .page-hero .lead,
.about-page .page-hero .eyebrow,
.contact-page .page-hero h1,
.contact-page .page-hero .lead,
.contact-page .page-hero .eyebrow {
  color: #ffffff;
}

.page-hero .lead,
.services-page .page-hero .lead,
.process-page .page-hero .lead,
.about-page .page-hero .lead,
.contact-page .page-hero .lead {
  color: rgba(255,255,255,.86);
}

.how-section {
  padding: 96px 0 104px;
}

.how-section .section-head {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}

.how-section h2 {
  font-size: clamp(2rem, 3.3vw, 3.25rem);
  line-height: 1.06;
}

.how-steps {
  align-items: stretch;
  gap: clamp(18px, 3.4vw, 44px);
}

.how-step {
  min-height: 250px;
  padding: 34px 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

.how-icon {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 0 auto 26px;
  flex: 0 0 auto;
}

.how-icon span {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
}

.how-step h3 {
  margin-top: 0;
}

.how-step p {
  margin-bottom: 0;
}

.how-arrow {
  align-self: center;
  transform: translateY(-14px);
}

@media (max-width: 760px) {
  .hero,
  .page-hero,
  .services-page .page-hero,
  .process-page .page-hero,
  .about-page .page-hero,
  .contact-page .page-hero {
    min-height: auto;
    padding: 118px 0 72px;
  }

  .hero h1,
  .page-hero h1,
  .services-page .page-hero h1,
  .process-page .page-hero h1,
  .about-page .page-hero h1,
  .contact-page .page-hero h1 {
    font-size: clamp(2.15rem, 11vw, 3.1rem);
  }

  .how-steps {
    gap: 18px;
  }

  .how-arrow {
    display: none;
  }
}

/* Header and process polish: brand left, nav right, cleaner white section */
.site-header {
  min-height: 66px;
  padding: 10px clamp(18px, 4vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.site-header .brand {
  min-height: 36px;
  justify-self: auto;
  flex: 0 0 auto;
}

.brand-logo {
  width: clamp(178px, 16vw, 238px);
  max-height: 36px;
}

.nav-toggle {
  margin-left: auto;
}

.nav-menu {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(16px, 2.8vw, 42px);
}

.process-page .process-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%);
}

.process-page .process-section .section-head {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}

.process-page .process-section h2 {
  font-size: clamp(2rem, 3.3vw, 3.25rem);
  line-height: 1.06;
}

.process-page .process-section .section-text {
  max-width: 680px;
  margin-inline: auto;
}

.process-page .process-cards {
  align-items: stretch;
  gap: clamp(18px, 3vw, 36px);
}

.process-page .process-card,
.process-page .step {
  min-height: 230px;
  padding: 34px 28px 30px;
  border-radius: 18px;
  border: 1px solid rgba(8, 29, 73, .08);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,251,255,.92));
  box-shadow: 0 24px 70px rgba(8, 29, 73, .11);
}

@media (max-width: 760px) {
  .site-header {
    min-height: 62px;
    padding: 9px 18px;
  }

  .brand-logo {
    width: 156px;
    max-height: 30px;
  }

  .nav-menu {
    margin-left: 0;
    justify-content: flex-start;
  }

  .process-page .process-section {
    padding: 70px 0;
  }
}

/* REAL FINAL OVERRIDE - keep services pricing exactly like the white home strip */
html body.services-page main section.service-section.pricing-section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: 104px 0 116px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-color: #ffffff !important;
}

html body.services-page main section.service-section.pricing-section::before,
html body.services-page main section.service-section.pricing-section::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

html body.services-page main section.service-section.pricing-section .section-head {
  max-width: 840px !important;
  margin: 0 auto 56px !important;
  text-align: center !important;
}

html body.services-page main section.service-section.pricing-section .section-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(27, 143, 82, .08) !important;
  color: #15803d !important;
}

html body.services-page main section.service-section.pricing-section h2 {
  color: #10172f !important;
}

html body.services-page main section.service-section.pricing-section .section-text {
  color: var(--muted) !important;
}
/* EOF final override: shared white strips for all inner pages */
html body.services-page main section.service-section.pricing-section,
html body.process-page main section.result-section,
html body.about-page main section.about-section,
html body.contact-page main > section.section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(78px, 8vw, 116px) 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
  background-color: #ffffff !important;
}

html body.services-page main section.service-section.pricing-section::before,
html body.services-page main section.service-section.pricing-section::after,
html body.process-page main section.result-section::before,
html body.process-page main section.result-section::after,
html body.about-page main section.about-section::before,
html body.about-page main section.about-section::after,
html body.contact-page main > section.section::before,
html body.contact-page main > section.section::after {
  content: none !important;
  display: none !important;
}

html body.process-page main section.result-section .section-head {
  max-width: 820px !important;
  margin: 0 auto 46px !important;
  text-align: center !important;
}

html body.about-page main section.about-section .about-content,
html body.contact-page main > section.section .contact-grid {
  max-width: 1120px !important;
  margin-inline: auto !important;
}

html body.process-page main section.result-section .section-kicker,
html body.about-page main section.about-section .section-kicker,
html body.contact-page main > section.section .section-kicker {
  color: #b48d22 !important;
}

html body.process-page main section.result-section h2,
html body.about-page main section.about-section h2,
html body.contact-page main > section.section h2 {
  color: #10172f !important;
}

html body.process-page main section.result-section .section-text,
html body.about-page main section.about-section .section-text,
html body.contact-page main > section.section p,
html body.contact-page main > section.section label {
  color: #60708d !important;
}

html body.about-page main section.about-section .feature-panel,
html body.contact-page main > section.section .contact-copy,
html body.contact-page main > section.section .offer-form {
  border: 1px solid rgba(16, 23, 47, .08) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .94)) !important;
  box-shadow: 0 28px 90px rgba(16, 23, 47, .11) !important;
  color: #10172f !important;
}

html body.about-page main section.about-section .feature-panel {
  width: min(760px, 100%) !important;
  margin-inline: auto !important;
  padding: clamp(30px, 4vw, 52px) !important;
}

html body.contact-page main > section.section .contact-copy a.social-whatsapp {
  background: #25d366 !important;
  color: #062411 !important;
}

html body.contact-page main > section.section .contact-copy a.social-instagram {
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 24%, #d62976 52%, #962fbf 74%, #4f5bd5 100%) !important;
  color: #ffffff !important;
}

.pricing-card {
  transform-origin: center bottom !important;
  animation: pricingCardEnter .82s cubic-bezier(.2, .82, .18, 1) both !important;
  transition: transform .34s ease, box-shadow .34s ease, border-color .34s ease !important;
}

.pricing-card:nth-child(1) { animation-delay: .04s !important; }
.pricing-card:nth-child(2) { animation-delay: .14s !important; }
.pricing-card:nth-child(3) { animation-delay: .24s !important; }
.pricing-card:nth-child(4) { animation-delay: .34s !important; }

.pricing-card:hover {
  transform: translateY(-10px) scale(1.015) !important;
  box-shadow: 0 34px 90px rgba(28, 14, 71, .24) !important;
}

.pricing-card::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.18) 42%, transparent 64%) !important;
  transform: translateX(-115%) !important;
  opacity: .75 !important;
  transition: transform .7s ease !important;
}

.pricing-card:hover::after {
  transform: translateX(115%) !important;
}

.blur-price {
  color: #51df89 !important;
  filter: blur(4px) !important;
  opacity: .95 !important;
  text-shadow: 0 0 24px rgba(81, 223, 137, .52) !important;
}

.animated-results .result-card {
  animation: resultCardEnter .9s cubic-bezier(.2, .82, .18, 1) both !important;
  transition: transform .34s ease, box-shadow .34s ease !important;
}

.animated-results .result-card:nth-child(2) { animation-delay: .12s !important; }
.animated-results .result-card:nth-child(3) { animation-delay: .24s !important; }

.animated-results .result-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 30px 80px rgba(16, 23, 47, .14) !important;
}

@media (max-width: 760px) {
  html body.services-page main section.service-section.pricing-section,
  html body.process-page main section.result-section,
  html body.about-page main section.about-section,
  html body.contact-page main > section.section {
    padding: 64px 0 !important;
  }
}

/* EOF 2026-07-03: logo and services page without blue hero */
.brand-logo {
  width: clamp(230px, 19vw, 310px) !important;
  height: auto !important;
  max-height: 44px !important;
  object-fit: contain !important;
}

.site-header .brand {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body.services-page main {
  padding-top: 0 !important;
}

html body.services-page main > .page-hero {
  display: none !important;
}

html body.services-page main section.service-section.pricing-section {
  min-height: calc(100vh - 72px) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(92px, 7vw, 112px) 0 clamp(76px, 7vw, 106px) !important;
}

html body.services-page main section.service-section.pricing-section .section-head {
  margin-bottom: clamp(34px, 4vw, 48px) !important;
}

@media (max-width: 760px) {
  .brand-logo {
    width: clamp(184px, 54vw, 230px) !important;
    max-height: 36px !important;
  }

  html body.services-page main section.service-section.pricing-section {
    min-height: auto !important;
    align-items: start !important;
    padding: 92px 0 64px !important;
  }
}

/* EOF 2026-07-03: white inner pages, compact about, contact without form */
html body.process-page main,
html body.about-page main,
html body.contact-page main {
  padding-top: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 54%, #ffffff 100%) !important;
}

html body.process-page main > .page-hero,
html body.about-page main > .page-hero,
html body.contact-page main > .page-hero {
  display: none !important;
}

html body.process-page main section.result-section,
html body.about-page main section.about-section,
html body.contact-page main section.contact-section {
  min-height: calc(100vh - 72px) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(96px, 8vw, 124px) 0 clamp(72px, 7vw, 104px) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 54%, #ffffff 100%) !important;
}

html body.about-page main section.about-section .about-content {
  display: block !important;
}

html body.about-page main section.about-section .feature-panel {
  max-width: 820px !important;
  width: min(820px, 100%) !important;
  margin: 0 auto !important;
  padding: clamp(30px, 4vw, 48px) !important;
  border-radius: 22px !important;
}

html body.about-page main section.about-section .feature-panel h2 {
  font-size: clamp(2rem, 3.2vw, 3.25rem) !important;
  line-height: 1.06 !important;
}

html body.about-page main section.about-section .feature-panel .section-text {
  max-width: 720px !important;
  font-size: clamp(1rem, 1.1vw, 1.12rem) !important;
  line-height: 1.8 !important;
}

.contact-simple {
  max-width: 1080px !important;
}

.contact-simple .section-head {
  max-width: 760px !important;
  margin: 0 auto 44px !important;
  text-align: center !important;
}

.contact-simple h1 {
  margin: 0 0 18px !important;
  color: #10172f !important;
  font-size: clamp(2.15rem, 4vw, 4rem) !important;
  line-height: 1.02 !important;
}

.contact-cards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.contact-card {
  min-height: 156px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 24px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 23, 47, .09) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,251,255,.94)) !important;
  color: #10172f !important;
  text-decoration: none !important;
  box-shadow: 0 26px 76px rgba(16, 23, 47, .1) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

.contact-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(37, 99, 235, .22) !important;
  box-shadow: 0 34px 86px rgba(16, 23, 47, .14) !important;
}

.contact-card span {
  color: #60708d !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.contact-card strong {
  color: inherit !important;
  font-size: clamp(1.02rem, 1.3vw, 1.25rem) !important;
  line-height: 1.35 !important;
}

.contact-card.social-whatsapp {
  background: linear-gradient(145deg, #25d366, #dfffea) !important;
  color: #052d15 !important;
}

.contact-card.social-instagram {
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 24%, #d62976 52%, #962fbf 74%, #4f5bd5 100%) !important;
  color: #ffffff !important;
}

.contact-card.social-whatsapp span,
.contact-card.social-instagram span {
  color: currentColor !important;
  opacity: .82 !important;
}

@media (max-width: 960px) {
  .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  html body.process-page main section.result-section,
  html body.about-page main section.about-section,
  html body.contact-page main section.contact-section {
    min-height: auto !important;
    padding: 92px 0 64px !important;
  }

  .contact-cards {
    grid-template-columns: 1fr !important;
  }

  .contact-card {
    min-height: 132px !important;
  }
}

/* EOF 2026-07-03: denser about section and icon contact cards */
html body.about-page main section.about-section {
  min-height: calc(100vh - 72px) !important;
  padding: clamp(86px, 7vw, 108px) 0 clamp(62px, 6vw, 88px) !important;
}

html body.about-page main section.about-section .about-content {
  max-width: 1180px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

html body.about-page main section.about-section .feature-panel {
  max-width: none !important;
  width: 100% !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: clamp(30px, 3.4vw, 44px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

html body.about-page main section.about-section .feature-panel h2 {
  max-width: 720px !important;
  font-size: clamp(2rem, 3vw, 3.05rem) !important;
}

html body.about-page main section.about-section .feature-panel .section-text {
  max-width: 700px !important;
}

.about-aside {
  display: grid !important;
  gap: 14px !important;
}

.about-aside article {
  min-height: 142px !important;
  padding: 22px !important;
  border: 1px solid rgba(16, 23, 47, .08) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,251,255,.94)) !important;
  box-shadow: 0 22px 58px rgba(16, 23, 47, .09) !important;
}

.about-aside span {
  display: inline-grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  margin-bottom: 14px !important;
  border-radius: 12px !important;
  background: #eef3fb !important;
  color: #24458f !important;
  font-weight: 900 !important;
}

.about-aside strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: #10172f !important;
  font-size: 1.05rem !important;
}

.about-aside p {
  margin: 0 !important;
  color: #60708d !important;
  line-height: 1.65 !important;
}

.contact-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 900px !important;
  margin-inline: auto !important;
}

.contact-card {
  position: relative !important;
  min-height: 168px !important;
  overflow: hidden !important;
}

.contact-card svg {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  width: 42px !important;
  height: 42px !important;
  padding: 9px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.7) !important;
  color: currentColor !important;
  fill: currentColor !important;
}

.contact-card.contact-mail {
  background: linear-gradient(145deg, #f7fbff 0%, #e9f2ff 56%, #ffffff 100%) !important;
  border-color: rgba(37, 99, 235, .16) !important;
}

.contact-card.contact-mail strong {
  color: #1f55b5 !important;
  word-break: break-word !important;
}

.contact-card.social-whatsapp {
  background: linear-gradient(145deg, #25d366 0%, #86efac 58%, #eafff1 100%) !important;
}

.contact-card.social-instagram {
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 22%, #d62976 50%, #962fbf 74%, #4f5bd5 100%) !important;
}

@media (max-width: 960px) {
  html body.about-page main section.about-section .about-content {
    grid-template-columns: 1fr !important;
  }

  .about-aside {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .contact-cards {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
  }
}

@media (max-width: 680px) {
  .about-aside {
    grid-template-columns: 1fr !important;
  }
}

/* EOF 2026-07-03: service package prices and compact process visual */
.pricing-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.pricing-card {
  min-height: 430px !important;
  padding: 28px 24px !important;
}

.pricing-card h3 {
  font-size: clamp(1.28rem, 1.45vw, 1.7rem) !important;
}

.pricing-card p {
  min-height: 76px !important;
}

.price-range {
  display: block !important;
  margin: 18px 0 22px !important;
  color: #7edc78 !important;
  font-size: clamp(1.35rem, 1.9vw, 2rem) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 18px rgba(126, 220, 120, .2) !important;
}

.pricing-card.featured .price-range {
  color: #9df28f !important;
}

.process-snapshot {
  max-width: 920px !important;
  margin: 0 auto 42px !important;
  padding: 14px !important;
  border: 1px solid rgba(16, 23, 47, .1) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,251,255,.94)) !important;
  box-shadow: 0 28px 80px rgba(16, 23, 47, .12) !important;
}

.process-snapshot img {
  width: 100% !important;
  max-height: 360px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16, 23, 47, .08) !important;
}

.process-snapshot figcaption {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 16px 6px 4px !important;
}

.process-snapshot figcaption strong {
  color: #10172f !important;
  font-size: 1rem !important;
}

.process-snapshot figcaption span {
  max-width: 560px !important;
  color: #60708d !important;
  line-height: 1.55 !important;
  text-align: right !important;
}

@media (max-width: 1180px) {
  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .pricing-card {
    min-height: auto !important;
  }

  .pricing-card p {
    min-height: auto !important;
  }

  .process-snapshot figcaption {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .process-snapshot figcaption span {
    text-align: left !important;
  }
}

/* EOF 2026-07-03: remove commission card, improve service cards and channel logos */
.pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.pricing-card {
  min-height: 360px !important;
  padding: 26px !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto 1fr !important;
}

.pricing-card h3 {
  min-height: auto !important;
  margin-bottom: 12px !important;
}

.pricing-card p {
  min-height: 68px !important;
  margin-bottom: 0 !important;
}

.price-range {
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  font-size: clamp(1.25rem, 1.7vw, 1.8rem) !important;
}

.pricing-card ul {
  align-self: end !important;
}

.channel-panel {
  padding: clamp(26px, 3vw, 38px) !important;
  border: 1px solid rgba(16, 23, 47, .08) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 82% 0%, rgba(126, 220, 120, .18), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,251,255,.94)) !important;
  box-shadow: 0 28px 76px rgba(16, 23, 47, .11) !important;
}

.channel-panel h3 {
  margin: 8px 0 12px !important;
  color: #10172f !important;
  font-size: clamp(1.45rem, 2vw, 2.05rem) !important;
  line-height: 1.12 !important;
}

.channel-panel > p:not(.section-kicker) {
  margin: 0 0 22px !important;
  color: #60708d !important;
  line-height: 1.7 !important;
}

.channel-logos {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.channel-logos span {
  min-height: 54px !important;
  display: grid !important;
  place-items: center !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(16, 23, 47, .08) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.82) !important;
  color: #10172f !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.channel-logos span:nth-child(1) {
  grid-column: span 2 !important;
  color: #46589b !important;
  font-size: 1.12rem !important;
}

.channel-logos span:nth-child(5) {
  color: #006ce4 !important;
}

.channel-logos span:last-child {
  grid-column: span 2 !important;
  color: #60708d !important;
  font-size: .92rem !important;
}

.process-snapshot figcaption span {
  max-width: 620px !important;
}

@media (max-width: 1180px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .pricing-card {
    min-height: auto !important;
  }

  .pricing-card p,
  .price-range {
    min-height: auto !important;
  }

  .channel-logos {
    grid-template-columns: 1fr !important;
  }

  .channel-logos span,
  .channel-logos span:nth-child(1),
  .channel-logos span:last-child {
    grid-column: auto !important;
  }
}

/* EOF 2026-07-03: square channel tiles and balanced service card typography */
.channel-logos {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

.channel-logos span,
.channel-logos span:nth-child(1),
.channel-logos span:nth-child(5),
.channel-logos span:last-child {
  grid-column: auto !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 10px !important;
  border-radius: 18px !important;
  color: #10172f !important;
  font-size: clamp(.82rem, 1vw, .98rem) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  text-align: center !important;
}

.channel-logos span:nth-child(1) { color: #46589b !important; }
.channel-logos span:nth-child(4) { color: #18213d !important; }
.channel-logos span:nth-child(5) { color: #006ce4 !important; }
.channel-logos span:nth-child(7) { color: #60708d !important; font-size: .82rem !important; }

.pricing-grid {
  grid-template-columns: repeat(4, minmax(230px, 1fr)) !important;
  align-items: stretch !important;
}

.pricing-card {
  min-height: 0 !important;
  padding: 28px 26px !important;
  display: flex !important;
  flex-direction: column !important;
}

.pricing-card h3 {
  min-height: 58px !important;
  margin: 0 0 12px !important;
  color: #ffffff !important;
  font-size: clamp(1.45rem, 1.65vw, 1.85rem) !important;
  line-height: 1.12 !important;
}

.pricing-card p {
  min-height: 92px !important;
  margin: 0 0 18px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
}

.price-range {
  min-height: 74px !important;
  margin: 0 0 22px !important;
  color: #8ee982 !important;
  font-size: clamp(1.55rem, 2.05vw, 2.15rem) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
}

.pricing-card ul {
  margin-top: auto !important;
  display: grid !important;
  gap: 12px !important;
}

.pricing-card li {
  color: rgba(255,255,255,.78) !important;
  font-size: .95rem !important;
  line-height: 1.32 !important;
  font-weight: 750 !important;
}

@media (max-width: 1180px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .channel-logos {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .pricing-card h3,
  .pricing-card p,
  .price-range {
    min-height: auto !important;
  }
}

/* EOF 2026-07-03: real square channel logo tiles */
html body.about-page .channel-panel .channel-logos {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(1),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(5),
html body.about-page .channel-panel .channel-logos .channel-logo:last-child {
  grid-column: auto !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 23, 47, .1) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 34px rgba(16, 23, 47, .06), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo img {
  display: block !important;
  width: 92% !important;
  max-width: 112px !important;
  max-height: 54px !important;
  height: auto !important;
  object-fit: contain !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(1) img,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(5) img {
  max-width: 132px !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo:last-child img {
  max-width: 96px !important;
}

@media (max-width: 760px) {
  html body.about-page .channel-panel .channel-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* EOF 2026-07-03: user-provided logos and truly square service cards */
html body.about-page .channel-panel .channel-logos {
  grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
  gap: 14px !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  padding: 12px !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo img {
  width: 100% !important;
  max-width: 118px !important;
  max-height: 66px !important;
  object-fit: contain !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(1) img {
  max-width: 132px !important;
  max-height: 62px !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(4) img {
  max-width: 108px !important;
  max-height: 78px !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(5) img,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(6) img {
  max-width: 132px !important;
}

html body.services-page .pricing-section .container {
  width: min(1340px, calc(100% - 44px)) !important;
}

html body.services-page .pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

html body.services-page .pricing-card {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(18px, 1.45vw, 24px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

html body.services-page .pricing-card h3 {
  min-height: auto !important;
  margin-bottom: 10px !important;
  font-size: clamp(1.22rem, 1.45vw, 1.62rem) !important;
  line-height: 1.08 !important;
}

html body.services-page .pricing-card p {
  min-height: auto !important;
  margin-bottom: 14px !important;
  font-size: clamp(.86rem, .95vw, .98rem) !important;
  line-height: 1.45 !important;
}

html body.services-page .pricing-card .price-range {
  min-height: auto !important;
  margin: 0 0 14px !important;
  font-size: clamp(1.22rem, 1.65vw, 1.78rem) !important;
  line-height: 1.05 !important;
}

html body.services-page .pricing-card ul {
  gap: 8px !important;
  margin-top: auto !important;
}

html body.services-page .pricing-card li {
  font-size: clamp(.78rem, .85vw, .9rem) !important;
  line-height: 1.22 !important;
}

@media (max-width: 1180px) {
  html body.services-page .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html body.about-page .channel-panel .channel-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.services-page .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  html body.services-page .pricing-card {
    aspect-ratio: auto !important;
  }
}

/* EOF 2026-07-03: polish header logo, service text flow and animated channel logos */
.brand-logo {
  width: clamp(198px, 15vw, 258px) !important;
  max-height: 36px !important;
}

.site-header .brand {
  min-height: 34px !important;
}

html body.services-page .pricing-grid {
  grid-template-columns: repeat(4, minmax(245px, 1fr)) !important;
  gap: clamp(16px, 1.6vw, 22px) !important;
}

html body.services-page .pricing-card {
  aspect-ratio: 1 / 1 !important;
  padding: clamp(18px, 1.25vw, 22px) !important;
}

html body.services-page .pricing-card .pricing-tag {
  font-size: .68rem !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

html body.services-page .pricing-card h3 {
  font-size: clamp(1.18rem, 1.34vw, 1.48rem) !important;
  line-height: 1.1 !important;
  min-height: 42px !important;
  margin-bottom: 10px !important;
}

html body.services-page .pricing-card p {
  font-size: clamp(.8rem, .86vw, .9rem) !important;
  line-height: 1.42 !important;
  min-height: 70px !important;
  margin-bottom: 12px !important;
}

html body.services-page .pricing-card .price-range {
  font-size: clamp(1.08rem, 1.38vw, 1.5rem) !important;
  line-height: 1.08 !important;
  min-height: 50px !important;
  margin-bottom: 12px !important;
}

html body.services-page .pricing-card li {
  font-size: clamp(.74rem, .78vw, .82rem) !important;
  line-height: 1.18 !important;
}

html body.about-page .channel-panel .channel-logos {
  grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
  gap: 14px !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo {
  aspect-ratio: 1 / 1 !important;
  animation: channelTileIn .7s cubic-bezier(.2,.82,.18,1) both !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(1) { animation-delay: .03s !important; }
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(2) { animation-delay: .09s !important; }
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(3) { animation-delay: .15s !important; }
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(4) { animation-delay: .21s !important; }
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(5) { animation-delay: .27s !important; }
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(6) { animation-delay: .33s !important; }

html body.about-page .channel-panel .channel-logos .channel-logo:hover {
  transform: translateY(-5px) scale(1.03) !important;
  border-color: rgba(37, 99, 235, .2) !important;
  box-shadow: 0 20px 46px rgba(16, 23, 47, .12) !important;
}

.channel-more {
  margin: 16px 0 0 !important;
  color: #60708d !important;
  font-size: .9rem !important;
  font-weight: 850 !important;
  text-align: center !important;
  letter-spacing: .02em !important;
}

@keyframes channelTileIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.94);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 1180px) {
  html body.services-page .pricing-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .brand-logo {
    width: clamp(172px, 50vw, 214px) !important;
    max-height: 32px !important;
  }

  html body.services-page .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  html body.services-page .pricing-card {
    aspect-ratio: auto !important;
  }

  html body.services-page .pricing-card h3,
  html body.services-page .pricing-card p,
  html body.services-page .pricing-card .price-range {
    min-height: auto !important;
  }
}

/* EOF 2026-07-03: final pricing card alignment */
html body.services-page .pricing-section .container {
  width: min(1280px, calc(100% - 44px)) !important;
}

html body.services-page .pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

html body.services-page .pricing-card {
  position: relative !important;
  aspect-ratio: 1.08 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 24px 24px 22px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto 1fr !important;
  align-content: start !important;
}

html body.services-page .pricing-card.featured {
  border-color: rgba(126, 87, 255, .8) !important;
}

html body.services-page .pricing-tag {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 24px !important;
  align-items: center !important;
  padding: 0 10px !important;
  margin: 0 0 12px !important;
  border-radius: 999px !important;
  background: rgba(142, 233, 130, .14) !important;
  color: #9df28f !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
}

html body.services-page .pricing-card:not(.featured) .pricing-tag {
  visibility: hidden !important;
}

html body.services-page .pricing-card h3 {
  min-height: 44px !important;
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: clamp(1.2rem, 1.34vw, 1.48rem) !important;
  line-height: 1.1 !important;
}

html body.services-page .pricing-card p {
  min-height: 62px !important;
  margin: 0 0 14px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: clamp(.82rem, .86vw, .92rem) !important;
  line-height: 1.42 !important;
  font-weight: 700 !important;
}

html body.services-page .pricing-card .price-range {
  min-height: 46px !important;
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  color: #8ee982 !important;
  font-size: clamp(1.18rem, 1.55vw, 1.68rem) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

html body.services-page .pricing-card ul {
  align-self: start !important;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  display: grid !important;
  gap: 8px !important;
}

html body.services-page .pricing-card li {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  column-gap: 8px !important;
  align-items: start !important;
  color: rgba(255,255,255,.8) !important;
  font-size: clamp(.74rem, .78vw, .84rem) !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
}

html body.services-page .pricing-card li::before {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  font-size: .72rem !important;
  line-height: 1 !important;
}

@media (max-width: 1180px) {
  html body.services-page .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html body.services-page .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  html body.services-page .pricing-card {
    aspect-ratio: auto !important;
  }

  html body.services-page .pricing-card h3,
  html body.services-page .pricing-card p,
  html body.services-page .pricing-card .price-range {
    min-height: auto !important;
  }
}

/* EOF 2026-07-03: locked square package cards */
html body.services-page .pricing-grid {
  align-items: stretch !important;
}

html body.services-page .pricing-card {
  aspect-ratio: 1 / 1 !important;
  padding: 22px !important;
  grid-template-rows: 24px 50px 62px 48px auto !important;
}

html body.services-page .pricing-card h3,
html body.services-page .pricing-card p,
html body.services-page .pricing-card .price-range {
  align-self: start !important;
}

html body.services-page .pricing-card h3 {
  min-height: 50px !important;
  display: flex !important;
  align-items: flex-start !important;
  font-size: clamp(1.18rem, 1.24vw, 1.42rem) !important;
}

html body.services-page .pricing-card p {
  min-height: 62px !important;
  max-width: 100% !important;
  font-size: clamp(.78rem, .76vw, .86rem) !important;
}

html body.services-page .pricing-card .price-range {
  min-height: 48px !important;
  margin-bottom: 8px !important;
  font-size: clamp(1.22rem, 1.42vw, 1.56rem) !important;
  white-space: normal !important;
}

html body.services-page .pricing-card ul {
  width: 100% !important;
  min-width: 0 !important;
  padding-top: 10px !important;
  gap: 7px !important;
}

html body.services-page .pricing-card li {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  font-size: clamp(.72rem, .72vw, .8rem) !important;
}

@media (max-width: 760px) {
  html body.services-page .pricing-card {
    aspect-ratio: auto !important;
    grid-template-rows: auto !important;
  }
}

/* EOF 2026-07-03: process and contact motion polish */
html body.process-page .section-head,
html body.contact-page .section-head {
  animation: softTitleIn .72s cubic-bezier(.2, .82, .18, 1) both !important;
}

html body.process-page .process-snapshot {
  position: relative !important;
  overflow: hidden !important;
  animation: softCardIn .86s cubic-bezier(.2, .82, .18, 1) .08s both !important;
  transition: transform .36s ease, box-shadow .36s ease !important;
}

html body.process-page .process-snapshot::after,
html body.contact-page .contact-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.42) 44%, transparent 64%) !important;
  transform: translateX(-130%) !important;
  opacity: .55 !important;
}

html body.process-page .process-snapshot:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 34px 90px rgba(16, 23, 47, .16) !important;
}

html body.process-page .process-snapshot:hover::after,
html body.contact-page .contact-card:hover::after {
  animation: softShine .82s ease both !important;
}

html body.process-page .process-snapshot img {
  transition: transform 1.1s cubic-bezier(.2, .82, .18, 1), filter .5s ease !important;
}

html body.process-page .process-snapshot:hover img {
  transform: scale(1.025) translateY(-4px) !important;
  filter: saturate(1.06) contrast(1.03) !important;
}

html body.process-page .animated-results .result-card {
  animation: softCardIn .78s cubic-bezier(.2, .82, .18, 1) both !important;
}

html body.process-page .animated-results .result-card:nth-child(2) {
  animation-delay: .12s !important;
}

html body.process-page .animated-results .result-card:nth-child(3) {
  animation-delay: .24s !important;
}

html body.process-page .result-card {
  transition: transform .34s ease, box-shadow .34s ease, border-color .34s ease !important;
}

html body.process-page .result-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: rgba(37, 99, 235, .2) !important;
  box-shadow: 0 30px 84px rgba(16, 23, 47, .16) !important;
}

html body.contact-page .contact-card {
  animation: contactCardIn .74s cubic-bezier(.2, .82, .18, 1) both !important;
  transform-origin: center bottom !important;
  transition: transform .34s ease, box-shadow .34s ease, filter .34s ease !important;
}

html body.contact-page .contact-card:nth-child(1) {
  animation-delay: .06s !important;
}

html body.contact-page .contact-card:nth-child(2) {
  animation-delay: .16s !important;
}

html body.contact-page .contact-card:nth-child(3) {
  animation-delay: .26s !important;
}

html body.contact-page .contact-card:hover {
  transform: translateY(-8px) scale(1.018) !important;
  filter: saturate(1.05) !important;
}

html body.contact-page .contact-card svg {
  transition: transform .34s ease, background .34s ease !important;
}

html body.contact-page .contact-card:hover svg {
  transform: translateY(-2px) rotate(-4deg) scale(1.05) !important;
  background: rgba(255,255,255,.86) !important;
}

@keyframes softTitleIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes softCardIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.985);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes contactCardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.96);
    filter: blur(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes softShine {
  from {
    transform: translateX(-130%);
  }
  to {
    transform: translateX(130%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.process-page .section-head,
  html body.contact-page .section-head,
  html body.process-page .process-snapshot,
  html body.process-page .animated-results .result-card,
  html body.contact-page .contact-card {
    animation: none !important;
  }

  html body.process-page .process-snapshot,
  html body.process-page .result-card,
  html body.contact-page .contact-card,
  html body.process-page .process-snapshot img,
  html body.contact-page .contact-card svg {
    transition: none !important;
  }
}

/* EOF 2026-07-04: service section uses supplied visual package images */
html body.services-page main section.service-section.pricing-section {
  padding: clamp(86px, 6vw, 108px) 0 clamp(72px, 6vw, 96px) !important;
}

html body.services-page .service-image-grid {
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  align-items: stretch !important;
}

html body.services-page .service-image-card {
  position: relative !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(16, 23, 47, .1) !important;
  background: #ffffff !important;
  box-shadow: 0 28px 74px rgba(16, 23, 47, .12) !important;
  animation: serviceImageIn .82s cubic-bezier(.2, .82, .18, 1) both !important;
  transition: transform .36s ease, box-shadow .36s ease, border-color .36s ease !important;
}

html body.services-page .service-image-card:nth-child(2) { animation-delay: .12s !important; }
html body.services-page .service-image-card:nth-child(3) { animation-delay: .24s !important; }

html body.services-page .service-image-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.38) 46%, transparent 68%) !important;
  transform: translateX(-125%) !important;
  opacity: .55 !important;
}

html body.services-page .service-image-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: rgba(31, 138, 76, .2) !important;
  box-shadow: 0 34px 92px rgba(16, 23, 47, .18) !important;
}

html body.services-page .service-image-card:hover::after {
  animation: softShine .82s ease both !important;
}

html body.services-page .service-image-card img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  object-fit: cover !important;
  transition: transform .9s cubic-bezier(.2, .82, .18, 1), filter .36s ease !important;
}

html body.services-page .service-image-card:hover img {
  transform: scale(1.025) !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

html body.services-page .service-image-card figcaption {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255,255,255,.52) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(18px) !important;
  color: #10172f !important;
  box-shadow: 0 16px 42px rgba(16, 23, 47, .14) !important;
}

html body.services-page .service-image-card figcaption span {
  display: inline-grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  background: #e8f5ed !important;
  color: #1f6f3d !important;
  font-weight: 900 !important;
}

html body.services-page .service-image-card figcaption strong {
  min-width: 0 !important;
  font-size: clamp(.92rem, 1vw, 1.05rem) !important;
  line-height: 1.18 !important;
  text-align: right !important;
}

html body.services-page .service-image-card.featured-service figcaption span {
  background: #1f6f3d !important;
  color: #ffffff !important;
}

@keyframes serviceImageIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.97);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 980px) {
  html body.services-page .service-image-grid {
    grid-template-columns: 1fr !important;
    max-width: 680px !important;
  }

  html body.services-page .service-image-card img {
    aspect-ratio: 1.12 / 1 !important;
  }
}

@media (max-width: 620px) {
  html body.services-page .service-image-card {
    border-radius: 18px !important;
  }

  html body.services-page .service-image-card figcaption {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body.services-page .service-image-card figcaption strong {
    text-align: left !important;
  }
}

/* EOF 2026-07-04: service lightbox and disappearing caption */
html body.services-page .service-image-card {
  cursor: zoom-in !important;
  outline: none !important;
}

html body.services-page .service-image-card:focus-visible {
  border-color: rgba(31, 111, 61, .45) !important;
  box-shadow: 0 0 0 4px rgba(31, 111, 61, .13), 0 34px 92px rgba(16, 23, 47, .18) !important;
}

html body.services-page .service-image-card figcaption {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform .42s cubic-bezier(.2, .82, .18, 1), opacity .28s ease, filter .28s ease !important;
}

html body.services-page .service-image-card:hover figcaption,
html body.services-page .service-image-card:focus-visible figcaption {
  transform: translateY(calc(100% + 26px)) !important;
  opacity: 0 !important;
  filter: blur(8px) !important;
}

.service-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  background: rgba(5, 10, 24, .78);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.service-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.service-lightbox__inner {
  position: relative;
  width: min(1080px, 96vw);
  max-height: 92vh;
  animation: lightboxIn .32s cubic-bezier(.2, .82, .18, 1) both;
}

.service-lightbox img {
  width: 100%;
  max-height: 86vh;
  display: block;
  object-fit: contain;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 36px 110px rgba(0,0,0,.42);
}

.service-lightbox__title {
  position: absolute;
  left: 18px;
  right: 64px;
  bottom: 18px;
  width: max-content;
  max-width: calc(100% - 92px);
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #10172f;
  font-weight: 900;
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
}

.service-lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #10172f;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 38px rgba(0,0,0,.2);
}

@keyframes lightboxIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (hover: none) {
  html body.services-page .service-image-card:hover figcaption {
    transform: translateY(0) !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

@media (max-width: 620px) {
  .service-lightbox {
    padding: 12px;
  }

  .service-lightbox img {
    border-radius: 16px;
  }

  .service-lightbox__title {
    left: 12px;
    right: 58px;
    bottom: 12px;
    font-size: .86rem;
  }
}

/* EOF 2026-07-04: service click hint and refined numbering */
html body.services-page .service-image-card figcaption {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

html body.services-page .service-image-card figcaption span {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid rgba(31, 111, 61, .28) !important;
  background: rgba(255,255,255,.72) !important;
  color: #1f6f3d !important;
  box-shadow: inset 0 0 0 6px rgba(31, 111, 61, .06) !important;
}

html body.services-page .service-image-card.featured-service figcaption span {
  border-color: #1f6f3d !important;
  background: #1f6f3d !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(31, 111, 61, .26) !important;
}

html body.services-page .service-image-card figcaption strong {
  text-align: left !important;
}

html body.services-page .service-image-card figcaption em {
  justify-self: end !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  background: rgba(31, 111, 61, .09) !important;
  color: #1f6f3d !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html body.services-page .service-image-card:hover figcaption em,
html body.services-page .service-image-card:focus-visible figcaption em {
  animation: clickHintPulse .7s ease both !important;
}

@keyframes clickHintPulse {
  0%, 100% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(4px);
  }
}

@media (max-width: 1180px) {
  html body.services-page .service-image-card figcaption {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  html body.services-page .service-image-card figcaption em {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

@media (max-width: 620px) {
  html body.services-page .service-image-card figcaption {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  html body.services-page .service-image-card figcaption em {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }
}

/* EOF 2026-07-04: all service numbers use the same outlined style */
html body.services-page .service-image-card.featured-service figcaption span,
html body.services-page .service-image-card figcaption span {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid rgba(31, 111, 61, .28) !important;
  background: rgba(255,255,255,.72) !important;
  color: #1f6f3d !important;
  box-shadow: inset 0 0 0 6px rgba(31, 111, 61, .06) !important;
}

/* EOF 2026-07-04: equal service caption bars */
html body.services-page .service-image-card figcaption {
  min-height: 76px !important;
  grid-template-columns: 46px minmax(0, 1fr) 132px !important;
  align-items: center !important;
  padding: 13px 16px !important;
}

html body.services-page .service-image-card figcaption span {
  width: 44px !important;
  height: 44px !important;
  font-size: 1rem !important;
}

html body.services-page .service-image-card figcaption strong {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  font-size: clamp(.94rem, .98vw, 1.04rem) !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

html body.services-page .service-image-card figcaption em {
  width: 132px !important;
  justify-self: end !important;
  text-align: center !important;
}

@media (max-width: 1180px) {
  html body.services-page .service-image-card figcaption {
    min-height: 88px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  html body.services-page .service-image-card figcaption em {
    width: auto !important;
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

@media (max-width: 620px) {
  html body.services-page .service-image-card figcaption {
    min-height: auto !important;
  }
}

/* EOF 2026-07-04: lightweight rotating hero video */
html body .hero {
  background: #071426 !important;
  isolation: isolate !important;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #071426;
}

.hero-video-wrap::before,
.hero-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-video-wrap::before {
  background:
    linear-gradient(90deg, rgba(5, 14, 30, .86) 0%, rgba(8, 24, 48, .62) 48%, rgba(8, 24, 48, .22) 100%),
    linear-gradient(180deg, rgba(5, 14, 30, .18) 0%, rgba(5, 14, 30, .78) 100%);
}

.hero-video-wrap::after {
  background: linear-gradient(180deg, transparent 58%, rgba(5, 14, 30, .86) 100%);
}

.hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .82;
  transform: scale(1.015);
  transition: opacity .55s ease, transform 4.8s ease;
  will-change: opacity, transform;
}

.hero-video.is-switching {
  opacity: .18;
}

.hero-video.is-playing {
  opacity: .82;
  transform: scale(1.045);
}

.hero > .container,
.hero .hero-grid {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 760px) {
  .hero-video {
    opacity: .64;
  }

  .hero-video-wrap::before {
    background:
      linear-gradient(90deg, rgba(5, 14, 30, .9), rgba(8, 24, 48, .72)),
      linear-gradient(180deg, rgba(5, 14, 30, .14), rgba(5, 14, 30, .88));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    transition: none;
    transform: none;
  }
}

/* EOF 2026-07-04: restore strong home hero scale and lock service bars */
html body .hero {
  min-height: calc(100vh - 72px) !important;
  padding: clamp(132px, 9vh, 166px) 0 clamp(82px, 9vh, 112px) !important;
  align-items: center !important;
}

html body .hero-grid {
  width: min(1420px, calc(100% - 56px)) !important;
  min-height: calc(100vh - 230px) !important;
  display: grid !important;
  align-items: center !important;
}

html body .hero-grid > .reveal {
  width: min(920px, 100%) !important;
  max-width: 920px !important;
  margin-left: clamp(18px, 8vw, 132px) !important;
}

html body .hero h1 {
  max-width: 900px !important;
  font-size: clamp(3rem, 5vw, 5.15rem) !important;
  line-height: .96 !important;
  letter-spacing: 0 !important;
}

html body .hero .hero-text {
  max-width: 760px !important;
  font-size: clamp(1.02rem, 1.18vw, 1.24rem) !important;
  line-height: 1.68 !important;
}

html body .hero-actions {
  margin-top: 28px !important;
}

html body .hero .btn {
  min-height: 52px !important;
  padding: 0 24px !important;
  font-size: 1rem !important;
}

html body .hero-proof {
  max-width: 900px !important;
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 30px !important;
}

html body .hero-proof span {
  min-height: 72px !important;
  padding: 16px 18px !important;
  font-size: 1rem !important;
}

html body.services-page .service-image-card figcaption {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 128px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
}

html body.services-page .service-image-card figcaption span {
  width: 42px !important;
  height: 42px !important;
  align-self: center !important;
}

html body.services-page .service-image-card figcaption strong {
  min-height: 0 !important;
  height: 42px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  align-self: center !important;
  font-size: clamp(.88rem, .9vw, .98rem) !important;
  line-height: 1.12 !important;
}

html body.services-page .service-image-card figcaption em {
  width: 128px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  align-self: center !important;
  padding: 0 10px !important;
  font-size: .74rem !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  html body.services-page .service-image-card figcaption {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  html body.services-page .service-image-card figcaption em {
    grid-column: 2 !important;
    width: 128px !important;
    justify-self: start !important;
  }
}

@media (max-width: 760px) {
  html body .hero {
    min-height: calc(100vh - 64px) !important;
    padding: 112px 0 76px !important;
  }

  html body .hero-grid {
    width: min(100% - 28px, 1120px) !important;
    min-height: auto !important;
  }

  html body .hero-grid > .reveal {
    margin-left: 0 !important;
  }

  html body .hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.55rem) !important;
  }

  html body .hero-proof {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  html body.services-page .service-image-card figcaption {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  html body.services-page .service-image-card figcaption em {
    grid-column: 2 !important;
    width: 126px !important;
  }
}

/* EOF 2026-07-04: calmer home hero type and slightly brighter video */
html body .hero h1 {
  max-width: 820px !important;
  font-size: clamp(2.55rem, 4.15vw, 4.35rem) !important;
  line-height: .98 !important;
}

html body .hero .hero-text {
  max-width: 700px !important;
  font-size: clamp(.95rem, 1.02vw, 1.08rem) !important;
  line-height: 1.62 !important;
  font-weight: 750 !important;
}

html body .hero .eyebrow {
  transform: scale(.94) !important;
  transform-origin: left center !important;
}

html body .hero .btn {
  min-height: 48px !important;
  padding: 0 21px !important;
  font-size: .94rem !important;
}

html body .hero-proof {
  max-width: 820px !important;
  gap: 11px !important;
  margin-top: 26px !important;
}

html body .hero-proof span {
  min-height: 64px !important;
  padding: 13px 16px !important;
  font-size: .92rem !important;
}

.hero-video {
  opacity: .9 !important;
}

.hero-video.is-playing {
  opacity: .9 !important;
}

.hero-video-wrap::before {
  background:
    linear-gradient(90deg, rgba(5, 14, 30, .76) 0%, rgba(8, 24, 48, .54) 48%, rgba(8, 24, 48, .18) 100%),
    linear-gradient(180deg, rgba(5, 14, 30, .10) 0%, rgba(5, 14, 30, .70) 100%) !important;
}

.hero-video-wrap::after {
  background: linear-gradient(180deg, transparent 62%, rgba(5, 14, 30, .78) 100%) !important;
}

@media (max-width: 760px) {
  html body .hero h1 {
    font-size: clamp(2.15rem, 9.6vw, 3.15rem) !important;
  }

  html body .hero .hero-text {
    font-size: .95rem !important;
  }

  .hero-video {
    opacity: .74 !important;
  }

  .hero-video-wrap::before {
    background:
      linear-gradient(90deg, rgba(5, 14, 30, .84), rgba(8, 24, 48, .66)),
      linear-gradient(180deg, rgba(5, 14, 30, .10), rgba(5, 14, 30, .80)) !important;
  }
}

/* EOF 2026-07-04: final softer hero size and brighter video */
html body .hero h1 {
  max-width: 760px !important;
  font-size: clamp(2.25rem, 3.65vw, 3.85rem) !important;
  line-height: 1 !important;
}

html body .hero .hero-text {
  max-width: 650px !important;
  font-size: clamp(.9rem, .95vw, 1rem) !important;
  line-height: 1.58 !important;
}

html body .hero .btn {
  min-height: 45px !important;
  padding: 0 19px !important;
  font-size: .9rem !important;
}

html body .hero-proof {
  max-width: 760px !important;
  margin-top: 24px !important;
}

html body .hero-proof span {
  min-height: 58px !important;
  padding: 12px 15px !important;
  font-size: .86rem !important;
}

.hero-video,
.hero-video.is-playing {
  opacity: .96 !important;
}

.hero-video-wrap::before {
  background:
    linear-gradient(90deg, rgba(5, 14, 30, .68) 0%, rgba(8, 24, 48, .46) 48%, rgba(8, 24, 48, .12) 100%),
    linear-gradient(180deg, rgba(5, 14, 30, .06) 0%, rgba(5, 14, 30, .62) 100%) !important;
}

.hero-video-wrap::after {
  background: linear-gradient(180deg, transparent 66%, rgba(5, 14, 30, .68) 100%) !important;
}

@media (max-width: 760px) {
  html body .hero h1 {
    font-size: clamp(2rem, 8.8vw, 2.85rem) !important;
  }

  html body .hero-proof span {
    min-height: 54px !important;
  }

  .hero-video,
  .hero-video.is-playing {
    opacity: .82 !important;
  }
}

/* EOF 2026-07-04: premium service visual showcase */
html body.services-page .service-image-grid {
  width: min(1280px, 100%) !important;
  gap: clamp(22px, 2.4vw, 34px) !important;
}

html body.services-page .service-image-card {
  border-radius: 28px !important;
  box-shadow: 0 34px 92px rgba(16, 23, 47, .13) !important;
}

html body.services-page .service-image-card img {
  aspect-ratio: .86 / 1 !important;
  object-fit: cover !important;
}

html body.services-page .service-image-card figcaption {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  grid-template-columns: 38px minmax(0, 1fr) 94px !important;
  gap: 10px !important;
  padding: 9px 11px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 16px 44px rgba(16, 23, 47, .16) !important;
}

html body.services-page .service-image-card figcaption span {
  width: 36px !important;
  height: 36px !important;
  font-size: .88rem !important;
  box-shadow: inset 0 0 0 5px rgba(31, 111, 61, .055) !important;
}

html body.services-page .service-image-card figcaption strong {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(.88rem, .92vw, 1rem) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

html body.services-page .service-image-card figcaption em {
  width: 94px !important;
  height: 32px !important;
  padding: 0 9px !important;
  background: #e8f5ed !important;
  font-size: .72rem !important;
}

html body.services-page .service-image-card:hover figcaption,
html body.services-page .service-image-card:focus-visible figcaption {
  transform: translateY(calc(100% + 22px)) !important;
  opacity: 0 !important;
  filter: blur(7px) !important;
}

@media (max-width: 980px) {
  html body.services-page .service-image-grid {
    max-width: 720px !important;
  }

  html body.services-page .service-image-card img {
    aspect-ratio: 1 / 1 !important;
  }
}

@media (max-width: 620px) {
  html body.services-page .service-image-card figcaption {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

html body.services-page .service-image-card figcaption em {
    grid-column: 2 !important;
    width: 94px !important;
  }
}

/* EOF 2026-07-05: process performance slider */
html body.process-page .performance-story {
  position: relative !important;
  z-index: 2 !important;
  max-width: 920px !important;
  margin: 0 auto 28px !important;
  padding: 22px 26px !important;
  border: 1px solid rgba(19, 45, 90, .1) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(134, 239, 172, .22), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,251,255,.9)) !important;
  box-shadow: 0 24px 74px rgba(16, 23, 47, .09) !important;
  color: #10172f !important;
}

html body.process-page .performance-story span {
  display: inline-flex !important;
  margin-bottom: 10px !important;
  color: #15803d !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body.process-page .performance-story p {
  margin: 0 !important;
  color: #53647f !important;
  font-size: clamp(.96rem, 1vw, 1.08rem) !important;
  line-height: 1.72 !important;
}

html body.process-page .performance-slider {
  position: relative !important;
  z-index: 2 !important;
  width: min(1180px, 100%) !important;
  margin: 0 auto 42px !important;
  padding: clamp(18px, 2vw, 26px) !important;
  border: 1px solid rgba(19, 45, 90, .1) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, .14), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,249,253,.92)) !important;
  box-shadow: 0 30px 90px rgba(16, 23, 47, .12) !important;
  overflow: hidden !important;
}

html body.process-page .performance-slider-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

html body.process-page .performance-slider-head .section-kicker {
  margin-bottom: 8px !important;
  color: #15803d !important;
}

html body.process-page .performance-slider h3 {
  max-width: 680px !important;
  margin: 0 !important;
  color: #10172f !important;
  font-size: clamp(1.35rem, 2.1vw, 2.15rem) !important;
  line-height: 1.12 !important;
}

html body.process-page .performance-controls {
  display: inline-flex !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

html body.process-page .performance-btn {
  width: 44px !important;
  height: 44px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(19, 45, 90, .14) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #10172f !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 30px rgba(16, 23, 47, .08) !important;
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease !important;
}

html body.process-page .performance-btn:hover {
  transform: translateY(-2px) !important;
  background: #eaf6ef !important;
  box-shadow: 0 18px 40px rgba(16, 23, 47, .12) !important;
}

html body.process-page .performance-track {
  display: flex !important;
  gap: 18px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  padding: 4px 4px 16px !important;
  cursor: grab !important;
  scrollbar-color: rgba(21, 128, 61, .42) rgba(16, 23, 47, .08) !important;
}

html body.process-page .performance-track.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

html body.process-page .performance-track::-webkit-scrollbar {
  height: 10px !important;
}

html body.process-page .performance-track::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: rgba(16, 23, 47, .08) !important;
}

html body.process-page .performance-track::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(21, 128, 61, .45) !important;
}

html body.process-page .performance-slide {
  flex: 0 0 min(920px, 88vw) !important;
  margin: 0 !important;
  padding: 14px !important;
  scroll-snap-align: center !important;
  border: 1px solid rgba(19, 45, 90, .1) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 22px 60px rgba(16, 23, 47, .1) !important;
  transition: transform .34s ease, box-shadow .34s ease !important;
}

html body.process-page .performance-slide:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 30px 76px rgba(16, 23, 47, .14) !important;
}

html body.process-page .performance-slide img {
  width: 100% !important;
  height: clamp(310px, 42vw, 520px) !important;
  display: block !important;
  object-fit: contain !important;
  border: 1px solid rgba(19, 45, 90, .08) !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
}

html body.process-page .performance-slide figcaption {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 16px 4px 2px !important;
}

html body.process-page .performance-slide figcaption strong {
  color: #10172f !important;
  font-size: 1rem !important;
}

html body.process-page .performance-slide figcaption span {
  max-width: 600px !important;
  color: #60708d !important;
  line-height: 1.55 !important;
  text-align: right !important;
}

html body.process-page .process-snapshot {
  display: none !important;
}

@media (max-width: 780px) {
  html body.process-page .performance-slider-head,
  html body.process-page .performance-slide figcaption {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body.process-page .performance-slide {
    flex-basis: 92vw !important;
  }

  html body.process-page .performance-slide img {
    height: clamp(240px, 72vw, 390px) !important;
  }

  html body.process-page .performance-slide figcaption span {
    text-align: left !important;
  }
}

/* EOF 2026-07-05: compact process panel and service package slider */
html body.process-page .performance-slider {
  width: min(1040px, 100%) !important;
  padding: clamp(14px, 1.6vw, 20px) !important;
  border-radius: 24px !important;
}

html body.process-page .performance-slider h3 {
  font-size: clamp(1.18rem, 1.65vw, 1.72rem) !important;
}

html body.process-page .performance-slide {
  flex-basis: min(760px, 82vw) !important;
  padding: 10px !important;
  border-radius: 20px !important;
}

html body.process-page .performance-slide img {
  height: clamp(250px, 32vw, 400px) !important;
  border-radius: 16px !important;
}

html body.process-page .performance-slide figcaption {
  position: relative !important;
  overflow: hidden !important;
  margin-top: 12px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: rgba(248, 251, 255, .9) !important;
}

html body.process-page .performance-slide figcaption::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: linear-gradient(90deg, rgba(187, 247, 208, .45), rgba(34, 197, 94, .16), transparent) !important;
  transform: translateX(-102%) !important;
  animation: metricFill 5.8s ease-in-out infinite !important;
}

html body.process-page .performance-slide figcaption > * {
  position: relative !important;
  z-index: 1 !important;
}

html body.process-page .performance-slide figcaption span {
  max-width: 560px !important;
  color: #51627d !important;
  font-weight: 650 !important;
}

@keyframes metricFill {
  0%, 18% { transform: translateX(-102%); opacity: .35; }
  48% { transform: translateX(0); opacity: 1; }
  78%, 100% { transform: translateX(102%); opacity: .2; }
}

html body.services-page .service-package-slider {
  width: min(1180px, 100%) !important;
  margin: clamp(34px, 4vw, 52px) auto 0 !important;
  padding: clamp(18px, 2vw, 24px) !important;
  border: 1px solid rgba(19, 45, 90, .08) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 246, .13), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,253,.94)) !important;
  box-shadow: 0 30px 90px rgba(16, 23, 47, .1) !important;
  overflow: hidden !important;
}

html body.services-page .service-package-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

html body.services-page .service-package-head h3 {
  max-width: 650px !important;
  margin: 0 !important;
  color: #10172f !important;
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
  line-height: 1.12 !important;
}

html body.services-page .package-controls {
  display: inline-flex !important;
  gap: 10px !important;
}

html body.services-page .package-btn {
  width: 42px !important;
  height: 42px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(19, 45, 90, .12) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #10172f !important;
  font-size: 1.45rem !important;
  cursor: pointer !important;
  box-shadow: 0 12px 30px rgba(16, 23, 47, .08) !important;
  transition: transform .24s ease, background .24s ease !important;
}

html body.services-page .package-btn:hover {
  transform: translateY(-2px) !important;
  background: #f1edff !important;
}

html body.services-page .package-track {
  display: flex !important;
  gap: 18px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  padding: 4px 4px 16px !important;
  cursor: grab !important;
  scrollbar-color: rgba(126, 87, 255, .5) rgba(16, 23, 47, .08) !important;
}

html body.services-page .package-track.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

html body.services-page .package-track::-webkit-scrollbar {
  height: 10px !important;
}

html body.services-page .package-track::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: rgba(16, 23, 47, .08) !important;
}

html body.services-page .package-track::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(126, 87, 255, .5) !important;
}

html body.services-page .package-slide {
  flex: 0 0 272px !important;
  aspect-ratio: auto !important;
  min-height: 360px !important;
  scroll-snap-align: start !important;
  border: 1px solid rgba(139, 92, 246, .24) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  background:
    radial-gradient(circle at 70% 18%, rgba(126, 58, 242, .34), transparent 44%),
    linear-gradient(180deg, #110b28 0%, #070b1d 100%) !important;
  box-shadow: 0 24px 62px rgba(26, 14, 54, .18) !important;
  color: #fff !important;
  animation: packageSlideIn .72s cubic-bezier(.2, .82, .18, 1) both !important;
}

html body.services-page .package-slide.featured {
  border-color: rgba(139, 92, 246, .78) !important;
  background:
    radial-gradient(circle at 68% 18%, rgba(126, 58, 242, .82), transparent 48%),
    linear-gradient(180deg, #1b0f43 0%, #100925 100%) !important;
}

html body.services-page .package-slide:nth-child(2) { animation-delay: .08s !important; }
html body.services-page .package-slide:nth-child(3) { animation-delay: .16s !important; }
html body.services-page .package-slide:nth-child(4) { animation-delay: .24s !important; }

html body.services-page .package-slide .pricing-tag {
  display: inline-flex !important;
  align-self: flex-start !important;
  visibility: visible !important;
  margin: 0 0 18px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.84) !important;
  font-size: .67rem !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

html body.services-page .package-slide.featured .pricing-tag {
  background: rgba(157, 242, 143, .18) !important;
  color: #b9ffae !important;
}

html body.services-page .package-slide h3 {
  min-height: 0 !important;
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: 1.42rem !important;
  line-height: 1.08 !important;
}

html body.services-page .package-slide p {
  min-height: 84px !important;
  margin: 0 0 18px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: .91rem !important;
  line-height: 1.5 !important;
}

html body.services-page .package-slide .price-range {
  min-height: 0 !important;
  margin: 0 0 18px !important;
  color: #9df28f !important;
  font-size: 1.48rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

html body.services-page .package-slide ul {
  margin: auto 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  display: grid !important;
  gap: 9px !important;
}

html body.services-page .package-slide li {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 8px !important;
  color: rgba(255,255,255,.8) !important;
  font-size: .82rem !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

html body.services-page .package-slide li::before {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  background: rgba(255,255,255,.16) !important;
  color: #d9ffd3 !important;
}

html body.services-page .package-slide:hover {
  transform: translateY(-8px) scale(1.012) !important;
  box-shadow: 0 34px 84px rgba(42, 23, 112, .26) !important;
}

@keyframes packageSlideIn {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  html body.process-page .performance-slide {
    flex-basis: 88vw !important;
  }

  html body.services-page .service-package-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body.services-page .package-slide {
    flex-basis: 82vw !important;
    min-height: 0 !important;
  }
}

/* EOF 2026-07-05: final package hover details and compact process heading */
html body.services-page .service-image-grid {
  display: none !important;
}

html body.services-page main section.service-section.pricing-section {
  padding-top: clamp(70px, 5vw, 88px) !important;
}

html body.services-page .service-package-slider {
  margin-top: 0 !important;
}

html body.services-page .package-slide {
  position: relative !important;
  flex-basis: 300px !important;
  min-height: 410px !important;
  padding: 24px !important;
  isolation: isolate !important;
}

html body.services-page .package-slide::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 34%, rgba(157,242,143,.08)) !important;
  opacity: .75 !important;
  pointer-events: none !important;
}

html body.services-page .package-slide .price-range {
  display: grid !important;
  gap: 5px !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(157,242,143,.35) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(157,242,143,.18), transparent 42%),
    rgba(8, 13, 30, .56) !important;
  color: #9df28f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.16) !important;
  font-size: clamp(1.2rem, 1.5vw, 1.56rem) !important;
}

html body.services-page .package-slide .price-range small {
  color: rgba(255,255,255,.58) !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body.services-page .package-detail {
  position: absolute !important;
  inset: 12px !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 22px !important;
  border: 1px solid rgba(157,242,143,.28) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(126, 58, 242, .38), transparent 45%),
    linear-gradient(160deg, rgba(11, 8, 30, .97), rgba(7, 11, 29, .95)) !important;
  box-shadow: 0 24px 62px rgba(0,0,0,.24) !important;
  opacity: 0 !important;
  transform: translateY(12px) scale(.98) !important;
  pointer-events: none !important;
  transition: opacity .26s ease, transform .26s ease !important;
}

html body.services-page .package-detail strong {
  color: #9df28f !important;
  font-size: .78rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body.services-page .package-detail p {
  min-height: 0 !important;
  margin: 0 0 6px !important;
  color: rgba(255,255,255,.82) !important;
  font-size: .84rem !important;
  line-height: 1.48 !important;
}

html body.services-page .package-slide:hover .package-detail,
html body.services-page .package-slide:focus-within .package-detail {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

html body.process-page .result-section {
  padding-top: clamp(64px, 5vw, 84px) !important;
}

html body.process-page .result-section .section-head {
  max-width: 760px !important;
  margin-bottom: 24px !important;
}

html body.process-page .result-section h2 {
  font-size: clamp(2rem, 3.4vw, 3.25rem) !important;
}

html body.process-page .result-section .section-text {
  max-width: 720px !important;
  font-size: clamp(.98rem, 1vw, 1.08rem) !important;
}

html body.process-page .performance-story {
  width: min(760px, 100%) !important;
  margin: 0 auto 26px !important;
  padding: 18px 22px !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 54px rgba(16, 23, 47, .08) !important;
}

html body.process-page .performance-story p {
  font-size: .96rem !important;
  line-height: 1.62 !important;
}

@media (max-width: 760px) {
  html body.services-page .package-slide {
    flex-basis: 84vw !important;
    min-height: 430px !important;
  }

  html body.services-page .package-detail {
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }
}

/* EOF 2026-07-05: cleaner package slider and purple performance panel */
html body.services-page .package-track {
  padding-bottom: 4px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body.services-page .package-track::-webkit-scrollbar {
  display: none !important;
}

html body.process-page .performance-slider {
  border-color: rgba(139, 92, 246, .22) !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(126, 58, 242, .34), transparent 38%),
    radial-gradient(circle at 10% 92%, rgba(157, 242, 143, .12), transparent 34%),
    linear-gradient(160deg, rgba(19, 12, 47, .98), rgba(7, 11, 29, .96)) !important;
  box-shadow: 0 34px 92px rgba(26, 14, 54, .24) !important;
}

html body.process-page .performance-slider-head .section-kicker {
  color: #9df28f !important;
}

html body.process-page .performance-slider h3 {
  color: #ffffff !important;
}

html body.process-page .performance-btn {
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.1) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
}

html body.process-page .performance-btn:hover {
  background: rgba(157, 242, 143, .16) !important;
}

html body.process-page .performance-track {
  padding-bottom: 4px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html body.process-page .performance-track::-webkit-scrollbar {
  display: none !important;
}

html body.process-page .performance-slide {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.22) !important;
}

html body.process-page .performance-slide img {
  background: #ffffff !important;
  border-color: rgba(255,255,255,.2) !important;
}

html body.process-page .performance-slide figcaption {
  background:
    radial-gradient(circle at 0 0, rgba(157, 242, 143, .13), transparent 46%),
    rgba(10, 14, 34, .72) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

html body.process-page .performance-slide figcaption strong {
  color: #ffffff !important;
}

html body.process-page .performance-slide figcaption span {
  color: rgba(255,255,255,.76) !important;
}

/* EOF 2026-07-05: merge process reports into one panel */
html body.process-page .performance-story {
  display: none !important;
}

html body.process-page .performance-slider-head {
  align-items: flex-start !important;
}

html body.process-page .metric-note {
  max-width: min(840px, calc(100vw - 80px)) !important;
  margin: 12px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(190, 156, 255, .24) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(90deg, rgba(190, 156, 255, .14), rgba(255,255,255,.04)) !important;
  color: rgba(255,255,255,.8) !important;
  font-size: .92rem !important;
  line-height: 1.55 !important;
  display: grid !important;
  gap: 9px !important;
  overflow: hidden !important;
}

html body.process-page .metric-note span,
html body.process-page .metric-note em {
  position: relative !important;
  z-index: 1 !important;
}

html body.process-page .metric-note em {
  display: inline !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 2px 4px !important;
  color: rgba(255,255,255,.9) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.65 !important;
  background:
    linear-gradient(90deg, rgba(168, 85, 247, .0) 0%, rgba(168, 85, 247, .34) 42%, rgba(216, 180, 254, .2) 70%, rgba(168, 85, 247, .0) 100%) !important;
  background-size: 240% 100% !important;
  border-radius: 8px !important;
  animation: purpleMarker 4.8s ease-in-out infinite !important;
}

html body.process-page .compact-report {
  flex-basis: min(360px, 78vw) !important;
}

html body.process-page .compact-report img {
  height: clamp(260px, 34vw, 360px) !important;
  object-fit: contain !important;
}

html body.process-page .compact-report figcaption {
  display: grid !important;
  gap: 6px !important;
}

html body.process-page .compact-report figcaption span {
  text-align: left !important;
}

html body.process-page .result-grid {
  display: none !important;
}

@keyframes purpleMarker {
  0%, 18% { background-position: 120% 0; }
  50% { background-position: 20% 0; }
  82%, 100% { background-position: -120% 0; }
}

@media (max-width: 760px) {
  html body.process-page .metric-note {
    max-width: 100% !important;
  }
}

/* EOF 2026-07-05: stretch process metric note */
html body.process-page .performance-slider-head {
  position: relative !important;
  display: block !important;
  padding-right: 124px !important;
}

html body.process-page .performance-controls {
  position: absolute !important;
  top: 2px !important;
  right: 0 !important;
}

html body.process-page .metric-note {
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 780px) {
  html body.process-page .performance-slider-head {
    padding-right: 0 !important;
  }

  html body.process-page .performance-controls {
    position: static !important;
    margin-top: 14px !important;
  }
}

/* EOF 2026-07-05: center stubborn process note */
html body.process-page .performance-slider-head {
  padding-right: 0 !important;
}

html body.process-page .performance-slider-head > div:first-child {
  width: 100% !important;
  max-width: none !important;
}

html body.process-page .metric-note {
  width: min(920px, 100%) !important;
  max-width: 100% !important;
  margin: 14px auto 0 !important;
}

html body.process-page .performance-controls {
  top: 4px !important;
  right: 0 !important;
}

/* EOF 2026-07-06: delayed purple wash for process page */
html body.process-page {
  background: #f7f9fd !important;
  animation: processPageWash 1.6s ease 2s forwards;
}

html body.process-page main section.result-section {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f9fd 52%, #ffffff 100%) !important;
}

html body.process-page main section.result-section::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 72% 34%, rgba(119, 42, 210, .2), transparent 34%),
    radial-gradient(circle at 28% 76%, rgba(59, 18, 112, .14), transparent 36%),
    linear-gradient(135deg, rgba(24, 13, 55, .04), rgba(98, 36, 168, .12) 52%, rgba(255,255,255,.02));
  animation: processPurpleWash 1.8s ease 2s forwards;
}

html body.process-page main section.result-section > .container {
  position: relative !important;
  z-index: 1 !important;
}

@keyframes processPurpleWash {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes processPageWash {
  to {
    background: #f2eff8;
  }
}

/* EOF 2026-07-07: make delayed process background visibly arrive */
html body.process-page main section.result-section {
  background: #f7f9fd !important;
  transition: background-color .8s ease !important;
}

html body.process-page main section.result-section::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 72% 28%, rgba(132, 68, 220, .42), transparent 38%),
    radial-gradient(circle at 18% 78%, rgba(46, 22, 89, .22), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(244,239,255,.96) 42%, rgba(226,214,255,.9) 100%) !important;
  animation: processPurpleWashVisible 1.75s ease 2s forwards !important;
}

html body.process-page main section.result-section::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(111, 58, 180, .18) 48%, transparent 100%) !important;
  transform: translateX(-18%);
  animation: processPurpleSweep 1.9s ease 2.05s forwards !important;
}

html body.process-page main section.result-section > .container {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes processPurpleWashVisible {
  from {
    opacity: 0;
  }
  to {
    opacity: .92;
  }
}

@keyframes processPurpleSweep {
  0% {
    opacity: 0;
    transform: translateX(-18%);
  }
  35% {
    opacity: .75;
  }
  100% {
    opacity: .36;
    transform: translateX(0);
  }
}

/* Production mobile navigation: compact popover */
@media (max-width: 760px) {
  html body .site-header {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    padding: 9px 14px !important;
  }

  html body .brand {
    min-width: 0 !important;
  }

  html body .brand-logo {
    display: block !important;
    width: min(210px, 68vw) !important;
    height: auto !important;
    max-height: 38px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  html body .nav-menu {
    top: calc(100% + 8px) !important;
    left: auto !important;
    right: 0 !important;
    width: min(286px, calc(100vw - 28px)) !important;
    padding: 8px !important;
    gap: 3px !important;
    border: 1px solid rgba(20, 38, 77, .12) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 18px 50px rgba(13, 28, 61, .18) !important;
    backdrop-filter: blur(18px) !important;
  }

  html body .nav-menu a {
    min-height: 43px !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    color: #0d1b44 !important;
    font-size: .98rem !important;
  }

  html body .nav-menu a.active {
    background: #eef3fb !important;
    border-color: #d7dfed !important;
  }
}

/* Production contact channels */
html body.contact-page .contact-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: 1180px !important;
}

html body.contact-page .contact-card.social-bionluk {
  background: linear-gradient(145deg, #143d39 0%, #1f6b5d 58%, #b9f3df 145%) !important;
  border-color: rgba(31, 107, 93, .3) !important;
  color: #ffffff !important;
}

html body.contact-page .contact-card.social-bionluk span {
  color: currentColor !important;
  opacity: .82 !important;
}

html body.contact-page .contact-card:nth-child(4) {
  animation-delay: .36s !important;
}

@media (max-width: 960px) {
  html body.contact-page .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 720px !important;
  }
}

@media (max-width: 620px) {
  html body.contact-page .contact-cards {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
  }
}

/* Production mobile navigation: stays in document flow */
@media (max-width: 760px) {
  html body .site-header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 100% !important;
    min-height: 62px !important;
    transform: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 10px !important;
  }

  html body.menu-open {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body .nav-menu {
    position: static !important;
    order: 3 !important;
    display: none !important;
    width: 100% !important;
    margin: 8px 0 2px !important;
    padding: 7px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    box-shadow: none !important;
  }

  html body .nav-menu.is-open {
    display: grid !important;
  }

  html body .nav-menu a {
    min-width: 0 !important;
    min-height: 40px !important;
    justify-content: center !important;
    padding: 0 8px !important;
    text-align: center !important;
  }

  html body .nav-menu a:last-child {
    grid-column: 1 / -1 !important;
  }

  html body .hero,
  html body .page-hero {
    padding-top: 54px !important;
  }
}

/* SEO heading semantics without changing the visual hierarchy */
html body.services-page main section.service-section.pricing-section h1 {
  margin: 12px 0 16px !important;
  color: #10172f !important;
  font-size: clamp(2.2rem, 4vw, 4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

html body.process-page .result-section h1,
html body.about-page .feature-panel h1 {
  margin: 12px 0 18px !important;
  color: #10172f !important;
  font-size: clamp(2rem, 3.4vw, 3.25rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 620px) {
  html body.services-page main section.service-section.pricing-section h1,
  html body.process-page .result-section h1,
  html body.about-page .feature-panel h1 {
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
  }
}

/* 2026-07-14: process overview and reliable channel artwork */
html body.process-page .process-overview {
  margin: 0 0 clamp(28px, 4vw, 48px) !important;
  padding: clamp(24px, 3vw, 38px) !important;
  border: 1px solid rgba(43, 67, 119, .12) !important;
  border-radius: 28px !important;
  background: radial-gradient(circle at 92% 0%, rgba(126, 58, 242, .12), transparent 32%), linear-gradient(145deg, #ffffff, #f4f7fc) !important;
  box-shadow: 0 24px 70px rgba(16, 23, 47, .09) !important;
}
html body.process-page .process-overview-head { max-width: 760px !important; margin-bottom: 24px !important; }
html body.process-page .process-overview h2 { margin: 8px 0 0 !important; color: #10172f !important; font-size: clamp(1.65rem, 2.7vw, 2.65rem) !important; line-height: 1.08 !important; }
html body.process-page .process-steps { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
html body.process-page .process-step { position: relative !important; min-height: 210px !important; padding: 22px 20px !important; overflow: hidden !important; border: 1px solid rgba(43, 67, 119, .12) !important; border-radius: 20px !important; background: rgba(255,255,255,.9) !important; box-shadow: 0 14px 34px rgba(16, 23, 47, .06) !important; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important; }
html body.process-page .process-step:hover { transform: translateY(-5px) !important; border-color: rgba(126, 58, 242, .28) !important; box-shadow: 0 22px 46px rgba(16, 23, 47, .11) !important; }
html body.process-page .process-step-number { display: grid !important; width: 42px !important; height: 42px !important; margin-bottom: 24px !important; place-items: center !important; border-radius: 13px !important; background: linear-gradient(135deg, #10172f, #49318a) !important; color: #fff !important; font-size: .78rem !important; font-weight: 900 !important; letter-spacing: .06em !important; }
html body.process-page .process-step h3 { margin: 0 0 9px !important; color: #10172f !important; font-size: 1.02rem !important; }
html body.process-page .process-step p { margin: 0 !important; color: #60708d !important; font-size: .88rem !important; line-height: 1.55 !important; }
html body.process-page .process-channel-strip { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 18px !important; }
html body.process-page .process-channel-strip span { display: grid !important; min-height: 76px !important; place-items: center !important; padding: 12px !important; border: 1px solid rgba(43, 67, 119, .1) !important; border-radius: 16px !important; background: #fff !important; }
html body.process-page .process-channel-strip img { width: 100% !important; max-width: 118px !important; max-height: 48px !important; object-fit: contain !important; }
html body.about-page .channel-logo img[src$="jolly.svg"], html body.about-page .channel-logo img[src$="ets.svg"] { width: 100% !important; max-width: 126px !important; max-height: 70px !important; object-fit: contain !important; }
html body.process-page .performance-slide img { display: block !important; width: 100% !important; min-height: 280px !important; object-fit: contain !important; }

/* 2026-07-14: focused process performance presentation */
html body.process-page .result-section {
  min-height: auto !important;
  padding: clamp(30px, 4vw, 54px) 0 !important;
}

html body.process-page .result-section > .container {
  width: min(1080px, calc(100% - 36px)) !important;
}

html body.process-page .performance-slider {
  width: min(100%, 1040px) !important;
  margin: 0 auto !important;
  padding: clamp(22px, 2.6vw, 32px) !important;
  border: 1px solid rgba(171, 143, 255, .2) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(119, 74, 214, .32), transparent 34%),
    linear-gradient(145deg, #17112f 0%, #211445 52%, #11162d 100%) !important;
  box-shadow: 0 30px 80px rgba(28, 19, 58, .22) !important;
  overflow: hidden !important;
}

html body.process-page .performance-slider-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 28px !important;
  margin-bottom: 18px !important;
}

html body.process-page .performance-heading {
  max-width: 680px !important;
}

html body.process-page .performance-heading .section-kicker {
  margin: 0 0 10px !important;
  color: #bfa6ff !important;
  letter-spacing: .12em !important;
}

html body.process-page .performance-heading h1 {
  margin: 0 !important;
  max-width: 650px !important;
  color: #fff !important;
  font-size: clamp(1.75rem, 3.2vw, 2.85rem) !important;
  line-height: 1.07 !important;
  letter-spacing: -.045em !important;
}

html body.process-page .performance-lead {
  max-width: 680px !important;
  margin: 12px 0 0 !important;
  color: rgba(255,255,255,.68) !important;
  font-size: clamp(.98rem, 1.6vw, 1.1rem) !important;
  line-height: 1.65 !important;
}

html body.process-page .performance-controls {
  display: flex !important;
  gap: 10px !important;
}

html body.process-page .performance-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

html body.process-page .performance-metrics {
  display: grid !important;
  grid-template-columns: auto 34px auto minmax(240px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 0 18px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.055) !important;
}

html body.process-page .performance-metric {
  display: grid !important;
  gap: 1px !important;
  min-width: 130px !important;
}

html body.process-page .performance-metric span,
html body.process-page .performance-metric small {
  color: rgba(255,255,255,.55) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
}

html body.process-page .performance-metric strong {
  color: #fff !important;
  font-size: clamp(1.55rem, 2.8vw, 2.2rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
}

html body.process-page .performance-metric.is-highlighted strong {
  color: #b8f5a9 !important;
}

html body.process-page .performance-metric-arrow {
  color: rgba(255,255,255,.34) !important;
  font-size: 1.45rem !important;
  text-align: center !important;
}

html body.process-page .organic-result {
  display: flex !important;
  align-items: center !important;
  justify-self: end !important;
  gap: 10px !important;
  max-width: 360px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.72) !important;
  font-size: .86rem !important;
  line-height: 1.5 !important;
}

html body.process-page .organic-result > span {
  flex: 0 0 auto !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #9df28f !important;
  box-shadow: 0 0 0 5px rgba(157, 242, 143, .1) !important;
}

html body.process-page .performance-track {
  display: flex !important;
  gap: 18px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  padding: 0 !important;
}

html body.process-page .performance-slide,
html body.process-page .performance-slide.compact-report {
  flex: 0 0 100% !important;
  width: 100% !important;
  scroll-snap-align: start !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body.process-page .performance-slide img,
html body.process-page .performance-slide.compact-report img {
  display: block !important;
  width: 100% !important;
  height: clamp(280px, 42vw, 470px) !important;
  min-height: 0 !important;
  max-height: 470px !important;
  padding: 10px !important;
  border: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  background: #fff !important;
  object-fit: contain !important;
}

html body.process-page .performance-slide figcaption {
  display: grid !important;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr) !important;
  align-items: center !important;
  gap: 24px !important;
  min-height: 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 0 !important;
  background: rgba(9, 12, 30, .42) !important;
}

html body.process-page .performance-slide figcaption::before {
  display: none !important;
}

html body.process-page .performance-slide figcaption strong {
  color: #fff !important;
  font-size: 1rem !important;
}

html body.process-page .performance-slide figcaption span {
  color: rgba(255,255,255,.62) !important;
  font-size: .9rem !important;
  line-height: 1.55 !important;
}

@media (max-width: 820px) {
  html body.process-page .performance-metrics {
    grid-template-columns: 1fr 24px 1fr !important;
  }

  html body.process-page .organic-result {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    max-width: none !important;
    padding-top: 4px !important;
  }
}

@media (max-width: 620px) {
  html body.process-page .result-section > .container {
    width: min(100% - 22px, 1240px) !important;
  }

  html body.process-page .performance-slider {
    padding: 20px 16px !important;
    border-radius: 24px !important;
  }

  html body.process-page .performance-slider-head {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html body.process-page .performance-controls {
    position: static !important;
  }

  html body.process-page .performance-metrics {
    padding: 15px !important;
    gap: 10px !important;
  }

  html body.process-page .performance-slide img,
  html body.process-page .performance-slide.compact-report img {
    height: clamp(260px, 78vw, 410px) !important;
    padding: 8px !important;
  }

  html body.process-page .performance-slide figcaption {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 16px !important;
  }
}

html body.process-page .process-channel-strip img,
html body.about-page .channel-panel .channel-logos .channel-logo img {
  width: 100% !important;
  object-fit: contain !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo img {
  filter: none !important;
  opacity: 1 !important;
}
@media (max-width: 980px) {
  html body.process-page .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body.process-page .process-channel-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  html body.process-page .process-overview { padding: 20px 16px !important; border-radius: 22px !important; }
  html body.process-page .process-steps { grid-template-columns: 1fr !important; }
  html body.process-page .process-step { min-height: auto !important; }
  html body.process-page .process-channel-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 2026-07-14: premium reference showcase */
html body .reference-band {
  padding: 48px 0 !important;
  background:
    linear-gradient(112deg, rgba(4, 18, 47, .96) 0%, rgba(12, 59, 91, .78) 46%, rgba(30, 18, 70, .88) 100%),
    url("https://images.unsplash.com/photo-1584132967334-10e028bd69f7?auto=format&fit=crop&w=2200&q=88") center 58% / cover !important;
}

html body .reference-band::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(69, 205, 211, .2), transparent 30rem),
    radial-gradient(circle at 82% 28%, rgba(152, 105, 255, .18), transparent 27rem),
    linear-gradient(180deg, rgba(2, 15, 40, .08), rgba(2, 14, 38, .68)) !important;
}

html body .reference-band .section-head {
  margin-bottom: 16px !important;
}

html body .reference-band .section-head h2 {
  max-width: 760px !important;
  margin-bottom: 0 !important;
  font-size: clamp(2rem, 3.4vw, 3.15rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

html body .reference-showcase {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 24px !important;
  background: rgba(4, 17, 43, .5) !important;
  box-shadow: 0 30px 80px rgba(0, 10, 32, .28), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  overflow: hidden !important;
}

html body .reference-flow {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 19px 0 0 19px !important;
}

html body .reference-flow::before,
html body .reference-flow::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 58px !important;
  pointer-events: none !important;
}

html body .reference-flow::before {
  left: 0 !important;
  background: linear-gradient(90deg, rgba(8, 27, 60, .96), transparent) !important;
}

html body .reference-flow::after {
  right: 0 !important;
  background: linear-gradient(270deg, rgba(8, 27, 60, .96), transparent) !important;
}

html body .reference-track {
  display: flex !important;
  width: max-content !important;
  gap: 16px !important;
  padding: 0 !important;
  animation: referenceLoop 32s linear infinite !important;
  will-change: transform !important;
}

html body .reference-showcase:hover .reference-track {
  animation-play-state: running !important;
}

html body .reference-group {
  display: flex !important;
  gap: 16px !important;
}

html body .reference-logo {
  display: grid !important;
  flex: 0 0 210px !important;
  width: 210px !important;
  height: 104px !important;
  place-items: center !important;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 14px 34px rgba(0, 9, 30, .16) !important;
}

html body .reference-logo.is-dark {
  border-color: rgba(255,255,255,.1) !important;
  background: #07152b !important;
}

html body .reference-logo img {
  display: block !important;
  max-width: 100% !important;
  max-height: 66px !important;
  object-fit: contain !important;
}

html body .reference-cta-card {
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  min-height: 104px !important;
  margin-left: 10px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(196, 171, 255, .22) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(169, 119, 255, .3), transparent 42%),
    linear-gradient(145deg, rgba(56, 31, 111, .96), rgba(20, 19, 55, .96)) !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

html body .reference-cta-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(196, 171, 255, .5) !important;
  box-shadow: 0 18px 42px rgba(10, 7, 33, .3) !important;
}

html body .reference-cta-kicker {
  color: #b9f6aa !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

html body .reference-cta-card strong {
  max-width: 230px !important;
  color: #fff !important;
  font-size: 1.08rem !important;
  line-height: 1.3 !important;
}

html body .reference-cta-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
}

html body .reference-cta-link b {
  color: #b9f6aa !important;
  font-size: 1.1rem !important;
  transition: transform .25s ease !important;
}

html body .reference-cta-card:hover .reference-cta-link b {
  transform: translateX(4px) !important;
}

@keyframes referenceLoop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - 8px), 0, 0); }
}

@media (max-width: 900px) {
  html body .reference-showcase {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html body .reference-flow {
    border-radius: 19px !important;
  }

  html body .reference-cta-card {
    margin-left: 0 !important;
    min-height: 104px !important;
  }
}

@media (max-width: 620px) {
  html body .reference-band {
    padding: 44px 0 !important;
  }

  html body .reference-band .section-head h2 {
    font-size: clamp(2.1rem, 11vw, 3.25rem) !important;
  }

  html body .reference-showcase {
    padding: 10px !important;
    border-radius: 22px !important;
  }

  html body .reference-flow {
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    scrollbar-width: none !important;
  }

  html body .reference-flow::-webkit-scrollbar {
    display: none !important;
  }

  html body .reference-flow::before,
  html body .reference-flow::after {
    width: 24px !important;
  }

  html body .reference-track {
    width: max-content !important;
    animation: referenceLoop 32s linear infinite !important;
  }

  html body .reference-group[aria-hidden="true"] {
    display: flex !important;
  }

  html body .reference-logo {
    flex-basis: min(76vw, 270px) !important;
    width: min(76vw, 270px) !important;
    height: 104px !important;
    scroll-snap-align: center !important;
  }

  html body .reference-cta-card {
    padding: 22px !important;
    border-radius: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .reference-track {
    animation: referenceLoop 32s linear infinite !important;
  }
}

/* Optical logo sizing: source canvases have very different aspect ratios. */
html body .reference-logo img[src$="atabey-konagi-normalized.png"] {
  width: 164px !important;
  max-width: 164px !important;
  max-height: 58px !important;
}

html body .reference-logo img[src$="infinity-hotel-normalized.png"] {
  width: 148px !important;
  max-width: 148px !important;
  max-height: 72px !important;
}

html body .reference-logo img[src$="side-ertas-otel-normalized.png"] {
  width: 84px !important;
  max-width: 84px !important;
  max-height: 84px !important;
  transform: translateY(0) !important;
}

/* Strictly equal outer frames for every reference logo. */
html body .reference-group {
  align-items: center !important;
}

html body .reference-logo,
html body .reference-logo.is-dark {
  box-sizing: border-box !important;
  flex: 0 0 208px !important;
  width: 208px !important;
  min-width: 208px !important;
  max-width: 208px !important;
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(255,255,255,.3) !important;
  border-radius: 18px !important;
  transform: none !important;
  overflow: hidden !important;
  line-height: 0 !important;
  box-shadow: 0 12px 30px rgba(0, 9, 30, .16) !important;
}

/* Infinity uses the same white outer frame; its dark field is inset. */
html body .reference-logo.is-dark {
  position: relative !important;
  isolation: isolate !important;
  background: rgba(255,255,255,.94) !important;
}

html body .reference-logo.is-dark::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 8px !important;
  border-radius: 12px !important;
  background: #07152b !important;
}

html body .reference-logo.is-dark img {
  position: relative !important;
  z-index: 1 !important;
}

/* 2026-07-15: seamless two-layer hero crossfade */
html body .hero-video-wrap .hero-video,
html body .hero-video-wrap .hero-video.is-playing {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  object-fit: cover !important;
  transform: scale(1.015) !important;
  transition:
    opacity 1.4s cubic-bezier(.22, .61, .36, 1),
    transform 7s ease-out !important;
  will-change: opacity, transform !important;
}

html body .hero-video-wrap .hero-video.is-active,
html body .hero-video-wrap .hero-video.is-active.is-playing {
  z-index: 1 !important;
  opacity: .96 !important;
  transform: scale(1.055) !important;
}

@media (max-width: 760px) {
  html body .hero-video-wrap .hero-video.is-active,
  html body .hero-video-wrap .hero-video.is-active.is-playing {
    opacity: .82 !important;
  }
}

/* Dark mist overlay for stronger hero text contrast. */
html body .hero-video-wrap::before {
  z-index: 2 !important;
  background:
    radial-gradient(circle at 72% 28%, rgba(173, 196, 214, .1), transparent 34%),
    linear-gradient(90deg, rgba(3, 11, 28, .88) 0%, rgba(5, 19, 40, .7) 46%, rgba(6, 20, 40, .38) 100%),
    linear-gradient(180deg, rgba(3, 11, 26, .2) 0%, rgba(3, 12, 28, .72) 100%) !important;
  backdrop-filter: blur(1px) saturate(.88) !important;
}

html body .hero-video-wrap::after {
  z-index: 2 !important;
  background: linear-gradient(180deg, rgba(3, 11, 26, .04) 48%, rgba(3, 11, 26, .76) 100%) !important;
}

/* 2026-07-16 — clear hero copy and soft lavender process presentation */
html body .hero h1 {
  max-width: 960px !important;
}

html body .hero .hero-text {
  max-width: 850px !important;
}

html body.process-page .performance-slider {
  border-color: rgba(108, 69, 170, .2) !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(145, 105, 205, .14), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgba(247, 243, 253, .96) 56%, rgba(238, 232, 248, .92) 100%) !important;
  box-shadow: 0 30px 80px rgba(42, 24, 74, .13) !important;
  backdrop-filter: blur(18px) !important;
}

html body.process-page .performance-heading .section-kicker {
  color: #6c45aa !important;
}

html body.process-page .performance-heading h1 {
  color: #171229 !important;
}

html body.process-page .performance-lead {
  color: #665f73 !important;
}

html body.process-page .performance-btn {
  border-color: rgba(108, 69, 170, .18) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #6c45aa !important;
  box-shadow: 0 10px 28px rgba(42, 24, 74, .08) !important;
}

html body.process-page .performance-metrics {
  border-color: rgba(108, 69, 170, .14) !important;
  background: rgba(255, 255, 255, .78) !important;
}

html body.process-page .performance-metric span,
html body.process-page .performance-metric small {
  color: #766f82 !important;
}

html body.process-page .performance-metric strong {
  color: #171229 !important;
}

html body.process-page .performance-metric.is-highlighted {
  padding: 10px 14px !important;
  border: 1px solid rgba(108, 69, 170, .16) !important;
  border-radius: 16px !important;
  background: #f1ebfa !important;
}

html body.process-page .performance-metric.is-highlighted strong {
  color: #59388e !important;
}

html body.process-page .performance-metric-arrow {
  color: #9c83c4 !important;
}

html body.process-page .organic-result {
  color: #665f73 !important;
}

html body.process-page .performance-slide,
html body.process-page .performance-slide.compact-report {
  border-color: rgba(108, 69, 170, .14) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 48px rgba(42, 24, 74, .08) !important;
}

html body.process-page .performance-slide figcaption {
  border-top-color: rgba(108, 69, 170, .12) !important;
  background: linear-gradient(90deg, #ffffff, #f7f3fd) !important;
}

html body.process-page .performance-slide figcaption strong {
  color: #171229 !important;
}

html body.process-page .performance-slide figcaption span {
  color: #665f73 !important;
}

/* 2026-07-16 — slimmer reference band and neutral glass partnership card */
html body .reference-band {
  padding: 34px 0 !important;
}

html body .reference-band .section-head {
  margin-bottom: 12px !important;
}

html body .reference-band .section-head h2 {
  max-width: 720px !important;
  font-size: clamp(1.9rem, 3vw, 2.75rem) !important;
}

html body .reference-showcase {
  grid-template-columns: minmax(0, 1fr) 250px !important;
  padding: 8px !important;
  border-radius: 21px !important;
}

html body .reference-track,
html body .reference-group {
  gap: 13px !important;
}

html body .reference-logo,
html body .reference-logo.is-dark {
  flex-basis: 180px !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  padding: 8px 15px !important;
  border-radius: 15px !important;
}

html body .reference-logo.is-dark::before {
  inset: 7px !important;
  border-radius: 10px !important;
}

html body .reference-logo img[src$="atabey-konagi-normalized.png"] {
  width: 142px !important;
  max-width: 142px !important;
  max-height: 50px !important;
}

html body .reference-logo img[src$="infinity-hotel-normalized.png"] {
  width: 128px !important;
  max-width: 128px !important;
  max-height: 60px !important;
}

html body .reference-logo img[src$="side-ertas-otel-normalized.png"] {
  width: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
}

html body .reference-cta-card {
  min-height: 88px !important;
  margin-left: 8px !important;
  padding: 13px 16px !important;
  border-color: rgba(255, 255, 255, .72) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 104, 190, .13), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(246, 242, 251, .94)) !important;
  color: #15172a !important;
  box-shadow: 0 12px 32px rgba(4, 12, 35, .13), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

html body .reference-cta-card:hover {
  border-color: rgba(126, 87, 177, .28) !important;
  box-shadow: 0 17px 38px rgba(4, 12, 35, .18) !important;
}

html body .reference-cta-kicker {
  color: #71509f !important;
}

html body .reference-cta-card strong {
  color: #15172a !important;
  font-size: 1rem !important;
  line-height: 1.24 !important;
}

html body .reference-cta-link {
  color: #686378 !important;
  font-size: .84rem !important;
}

html body .reference-cta-link b {
  color: #71509f !important;
}

@media (max-width: 900px) {
  html body .reference-cta-card {
    min-height: 88px !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 620px) {
  html body .reference-band {
    padding: 30px 0 !important;
  }

  html body .reference-band .section-head h2 {
    font-size: clamp(1.9rem, 9.6vw, 2.7rem) !important;
  }

  html body .reference-logo,
  html body .reference-logo.is-dark {
    flex-basis: min(70vw, 230px) !important;
    width: min(70vw, 230px) !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
  }

  html body .reference-cta-card {
    padding: 16px 18px !important;
  }
}

/* 2026-07-16 — Apple-inspired light process page */
html body.process-page,
html body.process-page main,
html body.process-page main section.result-section {
  background: #f5f5f7 !important;
}

html body.process-page main section.result-section {
  position: relative !important;
  padding: clamp(44px, 6vw, 82px) 0 clamp(54px, 7vw, 96px) !important;
}

html body.process-page main section.result-section::before {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 88% 2%, rgba(134, 101, 185, .11), transparent 27rem),
    radial-gradient(circle at 8% 35%, rgba(176, 161, 207, .09), transparent 24rem) !important;
}

html body.process-page main section.result-section::after {
  display: none !important;
}

html body.process-page .result-section > .container {
  width: min(1160px, calc(100% - 40px)) !important;
}

html body.process-page .performance-slider {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

html body.process-page .performance-slider-head {
  position: relative !important;
  display: block !important;
  margin: 0 auto clamp(28px, 4vw, 46px) !important;
  text-align: center !important;
}

html body.process-page .performance-heading {
  max-width: 900px !important;
  margin: 0 auto !important;
}

html body.process-page .performance-heading .section-kicker {
  display: inline-flex !important;
  margin: 0 0 15px !important;
  padding: 8px 13px !important;
  border: 1px solid rgba(112, 80, 159, .14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #70509f !important;
  box-shadow: 0 8px 24px rgba(29, 29, 31, .05) !important;
  letter-spacing: .1em !important;
}

html body.process-page .performance-heading h1 {
  max-width: 880px !important;
  margin: 0 auto !important;
  color: #1d1d1f !important;
  font-size: clamp(2.25rem, 5vw, 4.7rem) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance !important;
}

html body.process-page .performance-lead {
  max-width: 720px !important;
  margin: 20px auto 0 !important;
  color: #68686d !important;
  font-size: clamp(1rem, 1.7vw, 1.22rem) !important;
  line-height: 1.55 !important;
  text-wrap: balance !important;
}

html body.process-page .performance-controls {
  position: absolute !important;
  right: 0 !important;
  bottom: -2px !important;
  display: flex !important;
  gap: 9px !important;
}

html body.process-page .performance-btn {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(29, 29, 31, .08) !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #3c3c43 !important;
  box-shadow: 0 8px 24px rgba(29, 29, 31, .07) !important;
}

html body.process-page .performance-btn:hover {
  border-color: rgba(112, 80, 159, .22) !important;
  background: #fff !important;
  color: #70509f !important;
}

html body.process-page .performance-metrics {
  display: grid !important;
  grid-template-columns: minmax(160px, .75fr) 28px minmax(180px, .9fr) minmax(270px, 1.45fr) !important;
  gap: 14px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.process-page .performance-metric,
html body.process-page .performance-metric.is-highlighted,
html body.process-page .organic-result {
  min-height: 122px !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(29, 29, 31, .07) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 16px 44px rgba(29, 29, 31, .065) !important;
}

html body.process-page .performance-metric {
  align-content: center !important;
}

html body.process-page .performance-metric.is-highlighted {
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 104, 190, .14), transparent 55%),
    linear-gradient(145deg, #fff, #f3eef9) !important;
}

html body.process-page .performance-metric span,
html body.process-page .performance-metric small {
  color: #77777c !important;
}

html body.process-page .performance-metric strong,
html body.process-page .performance-metric.is-highlighted strong {
  color: #1d1d1f !important;
  font-size: clamp(1.75rem, 3vw, 2.55rem) !important;
}

html body.process-page .performance-metric.is-highlighted strong {
  color: #654692 !important;
}

html body.process-page .performance-metric-arrow {
  align-self: center !important;
  color: #a5a5aa !important;
}

html body.process-page .organic-result {
  justify-self: stretch !important;
  max-width: none !important;
  color: #56565c !important;
  font-size: .9rem !important;
}

html body.process-page .organic-result > span {
  background: #34c759 !important;
  box-shadow: 0 0 0 5px rgba(52, 199, 89, .11) !important;
}

html body.process-page .performance-track {
  gap: 18px !important;
  padding: 3px 3px 22px !important;
  scrollbar-color: rgba(112, 80, 159, .25) transparent !important;
}

html body.process-page .performance-slide,
html body.process-page .performance-slide.compact-report {
  border: 1px solid rgba(29, 29, 31, .07) !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(29, 29, 31, .09) !important;
}

html body.process-page .performance-slide img,
html body.process-page .performance-slide.compact-report img {
  height: clamp(300px, 43vw, 520px) !important;
  max-height: 520px !important;
  padding: clamp(10px, 2vw, 22px) !important;
  border-radius: 30px 30px 0 0 !important;
  background: #fff !important;
}

html body.process-page .performance-slide figcaption {
  min-height: 104px !important;
  padding: 20px 24px !important;
  border-top: 1px solid rgba(29, 29, 31, .06) !important;
  background: #fafafa !important;
}

html body.process-page .performance-slide figcaption strong {
  color: #1d1d1f !important;
  font-size: 1.02rem !important;
}

html body.process-page .performance-slide figcaption span {
  color: #6e6e73 !important;
  font-size: .92rem !important;
}

@media (max-width: 820px) {
  html body.process-page .performance-controls {
    position: static !important;
    justify-content: center !important;
    margin-top: 22px !important;
  }

  html body.process-page .performance-metrics {
    grid-template-columns: 1fr 24px 1fr !important;
  }

  html body.process-page .organic-result {
    grid-column: 1 / -1 !important;
    min-height: auto !important;
  }
}

@media (max-width: 620px) {
  html body.process-page main section.result-section {
    padding: 36px 0 58px !important;
  }

  html body.process-page .result-section > .container {
    width: min(100% - 22px, 1160px) !important;
  }

  html body.process-page .performance-heading h1 {
    font-size: clamp(2.15rem, 11.5vw, 3.3rem) !important;
  }

  html body.process-page .performance-metric,
  html body.process-page .performance-metric.is-highlighted {
    min-height: 108px !important;
    padding: 17px 16px !important;
    border-radius: 20px !important;
  }

  html body.process-page .performance-slide,
  html body.process-page .performance-slide.compact-report {
    border-radius: 24px !important;
  }

  html body.process-page .performance-slide img,
  html body.process-page .performance-slide.compact-report img {
    height: clamp(250px, 78vw, 390px) !important;
    border-radius: 24px 24px 0 0 !important;
  }

  html body.process-page .performance-slide figcaption {
    min-height: 0 !important;
    padding: 17px !important;
  }
}

/* 2026-07-16 — equal reference row, frosted CTA rail and compact animated process */
html body .reference-showcase {
  grid-template-columns: minmax(0, 1fr) 250px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px !important;
  background:
    linear-gradient(90deg,
      rgba(4, 17, 43, .56) 0,
      rgba(4, 17, 43, .56) calc(100% - 258px),
      rgba(255, 255, 255, .2) calc(100% - 258px),
      rgba(255, 255, 255, .34) 100%) !important;
}

html body .reference-flow {
  height: 88px !important;
  border-radius: 15px !important;
}

html body .reference-track,
html body .reference-group {
  height: 88px !important;
  align-items: center !important;
}

html body .reference-logo,
html body .reference-logo.is-dark {
  align-self: center !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
}

html body .reference-cta-card {
  align-self: center !important;
  align-content: center !important;
  gap: 3px !important;
  width: 100% !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  overflow: hidden !important;
  border-color: rgba(255, 255, 255, .78) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(133, 99, 180, .13), transparent 52%),
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(246, 243, 250, .72)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 8px 24px rgba(5, 12, 34, .12) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
}

html body .reference-cta-kicker {
  font-size: .64rem !important;
  line-height: 1.1 !important;
}

html body .reference-cta-card strong {
  max-width: none !important;
  font-size: .91rem !important;
  line-height: 1.16 !important;
}

html body .reference-cta-link {
  font-size: .76rem !important;
  line-height: 1.1 !important;
}

html body.process-page main section.result-section {
  padding: clamp(34px, 4.5vw, 58px) 0 clamp(42px, 5vw, 68px) !important;
}

html body.process-page .result-section > .container {
  width: min(1040px, calc(100% - 40px)) !important;
}

html body.process-page .performance-slider-head {
  margin-bottom: clamp(22px, 3vw, 32px) !important;
}

html body.process-page .performance-heading {
  max-width: 790px !important;
}

html body.process-page .performance-heading h1 {
  max-width: 780px !important;
  font-size: clamp(2rem, 4.15vw, 3.55rem) !important;
  line-height: 1.01 !important;
}

html body.process-page .performance-lead {
  max-width: 650px !important;
  margin-top: 15px !important;
  font-size: clamp(.96rem, 1.45vw, 1.08rem) !important;
}

html body.process-page .performance-metrics {
  grid-template-columns: minmax(145px, .72fr) 24px minmax(165px, .84fr) minmax(250px, 1.35fr) !important;
  gap: 11px !important;
  margin-bottom: 17px !important;
}

html body.process-page .performance-metric,
html body.process-page .performance-metric.is-highlighted,
html body.process-page .organic-result {
  min-height: 96px !important;
  padding: 15px 18px !important;
  border-radius: 20px !important;
}

html body.process-page .performance-metric strong,
html body.process-page .performance-metric.is-highlighted strong {
  font-size: clamp(1.55rem, 2.5vw, 2.15rem) !important;
}

html body.process-page .organic-result {
  font-size: .82rem !important;
}

html body.process-page .performance-slide,
html body.process-page .performance-slide.compact-report {
  border-radius: 24px !important;
}

html body.process-page .performance-slide img,
html body.process-page .performance-slide.compact-report img {
  height: clamp(260px, 36vw, 410px) !important;
  max-height: 410px !important;
  padding: clamp(9px, 1.5vw, 16px) !important;
  border-radius: 24px 24px 0 0 !important;
}

html body.process-page .performance-slide figcaption {
  min-height: 88px !important;
  padding: 15px 20px !important;
}

@keyframes processAppleRise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes processAppleScale {
  from { opacity: 0; transform: scale(.975); }
  to { opacity: 1; transform: scale(1); }
}

html body.process-page .performance-heading .section-kicker,
html body.process-page .performance-heading h1,
html body.process-page .performance-lead,
html body.process-page .performance-metrics,
html body.process-page .performance-controls {
  opacity: 0;
  animation: processAppleRise .72s cubic-bezier(.22, .61, .36, 1) forwards;
}

html body.process-page .performance-heading h1 { animation-delay: .08s; }
html body.process-page .performance-lead { animation-delay: .16s; }
html body.process-page .performance-metrics { animation-delay: .25s; }
html body.process-page .performance-controls { animation-delay: .32s; }

html body.process-page .performance-track {
  opacity: 0;
  animation: processAppleScale .82s .34s cubic-bezier(.22, .61, .36, 1) forwards;
}

html body.process-page .performance-slide img {
  transition: transform .8s cubic-bezier(.22, .61, .36, 1) !important;
}

html body.process-page .performance-slide:hover img {
  transform: scale(1.012) !important;
}

@media (max-width: 900px) {
  html body .reference-showcase {
    grid-template-columns: 1fr !important;
    background: rgba(4, 17, 43, .5) !important;
  }

  html body .reference-cta-card {
    height: auto !important;
    min-height: 82px !important;
    max-height: none !important;
    padding: 13px 16px !important;
  }
}

@media (max-width: 820px) {
  html body.process-page .performance-metrics {
    grid-template-columns: 1fr 22px 1fr !important;
  }
}

@media (max-width: 620px) {
  html body.process-page main section.result-section {
    padding: 30px 0 48px !important;
  }

  html body.process-page .result-section > .container {
    width: min(100% - 22px, 1040px) !important;
  }

  html body.process-page .performance-heading h1 {
    font-size: clamp(2rem, 10vw, 2.85rem) !important;
  }

  html body.process-page .performance-slide img,
  html body.process-page .performance-slide.compact-report img {
    height: clamp(230px, 68vw, 340px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.process-page .performance-heading .section-kicker,
  html body.process-page .performance-heading h1,
  html body.process-page .performance-lead,
  html body.process-page .performance-metrics,
  html body.process-page .performance-controls,
  html body.process-page .performance-track {
    opacity: 1 !important;
    animation: none !important;
  }

  html body.process-page .performance-slide:hover img {
    transform: none !important;
  }
}

/* 2026-07-16 — neutral hospitality reference and executive process palette */
html body .reference-band {
  background:
    radial-gradient(circle at 18% 12%, rgba(48, 127, 141, .22), transparent 30rem),
    radial-gradient(circle at 84% 18%, rgba(77, 127, 141, .13), transparent 27rem),
    linear-gradient(112deg, #031522 0%, #082c3a 50%, #071d2d 100%) !important;
}

html body .reference-band::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(78, 165, 177, .13), transparent 30rem),
    radial-gradient(circle at 88% 16%, rgba(121, 160, 173, .1), transparent 28rem),
    linear-gradient(180deg, rgba(2, 15, 25, .05), rgba(2, 16, 28, .58)) !important;
}

html body .reference-showcase {
  border-color: rgba(220, 236, 241, .22) !important;
  background:
    linear-gradient(90deg,
      rgba(3, 20, 36, .72) 0,
      rgba(3, 20, 36, .72) calc(100% - 258px),
      rgba(234, 242, 245, .38) calc(100% - 258px),
      rgba(244, 248, 249, .48) 100%) !important;
  box-shadow: 0 24px 62px rgba(0, 12, 24, .25), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

html body .reference-flow::before {
  width: 28px !important;
  background: linear-gradient(90deg, rgba(4, 24, 42, .94), transparent) !important;
}

html body .reference-flow::after {
  width: 28px !important;
  background: linear-gradient(270deg, rgba(4, 24, 42, .94), transparent) !important;
}

html body .reference-cta-card {
  border-color: rgba(255, 255, 255, .92) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(239, 246, 248, .91)) !important;
  color: #0b2135 !important;
  box-shadow: inset 0 1px 0 #fff, 0 9px 26px rgba(0, 17, 31, .14) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
}

html body .reference-cta-card:hover {
  border-color: rgba(151, 194, 202, .7) !important;
  box-shadow: inset 0 1px 0 #fff, 0 13px 30px rgba(0, 17, 31, .18) !important;
}

html body .reference-cta-kicker {
  color: #176a78 !important;
}

html body .reference-cta-card strong {
  color: #0b2135 !important;
}

html body .reference-cta-link {
  color: #5e6d76 !important;
}

html body .reference-cta-link b {
  color: #176a78 !important;
}

html body.process-page,
html body.process-page main,
html body.process-page main section.result-section {
  background: #f4f7f8 !important;
}

html body.process-page main section.result-section::before {
  background:
    radial-gradient(circle at 90% 0%, rgba(79, 139, 154, .1), transparent 25rem),
    radial-gradient(circle at 6% 38%, rgba(130, 166, 175, .08), transparent 24rem) !important;
}

html body.process-page .performance-heading .section-kicker {
  border-color: rgba(23, 106, 120, .13) !important;
  background: rgba(255, 255, 255, .84) !important;
  color: #176a78 !important;
}

html body.process-page .performance-heading h1 {
  color: #0b1f33 !important;
}

html body.process-page .performance-lead {
  color: #65727b !important;
}

html body.process-page .performance-btn {
  border-color: rgba(11, 31, 51, .08) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #334956 !important;
}

html body.process-page .performance-btn:hover {
  border-color: rgba(23, 106, 120, .24) !important;
  color: #176a78 !important;
}

html body.process-page .performance-metric,
html body.process-page .organic-result {
  border-color: rgba(11, 31, 51, .07) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 14px 38px rgba(12, 35, 49, .065) !important;
}

html body.process-page .performance-metric.is-highlighted {
  border-color: rgba(45, 142, 93, .14) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(79, 177, 126, .12), transparent 52%),
    linear-gradient(145deg, #ffffff, #edf7f2) !important;
}

html body.process-page .performance-metric strong {
  color: #0b1f33 !important;
}

html body.process-page .performance-metric.is-highlighted strong {
  color: #247b52 !important;
}

html body.process-page .performance-metric span,
html body.process-page .performance-metric small,
html body.process-page .organic-result {
  color: #69767e !important;
}

html body.process-page .performance-metric-arrow {
  color: #9aa8ae !important;
}

html body.process-page .performance-track {
  scrollbar-color: rgba(23, 106, 120, .24) transparent !important;
}

html body.process-page .performance-slide,
html body.process-page .performance-slide.compact-report {
  border-color: rgba(11, 31, 51, .075) !important;
  box-shadow: 0 22px 58px rgba(12, 35, 49, .09) !important;
}

html body.process-page .performance-slide figcaption {
  border-top-color: rgba(11, 31, 51, .06) !important;
  background: linear-gradient(90deg, #fbfcfc, #f2f6f7) !important;
}

html body.process-page .performance-slide figcaption strong {
  color: #0b1f33 !important;
}

html body.process-page .performance-slide figcaption span {
  color: #65727b !important;
}

@media (max-width: 900px) {
  html body .reference-showcase {
    background: rgba(3, 20, 36, .72) !important;
  }
}

/* 2026-07-16 — four-step process and minimal action card */
html body .reference-cta-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: center !important;
  gap: 5px !important;
  padding: 11px 54px 11px 15px !important;
  border: 1px solid rgba(255, 255, 255, .96) !important;
  background: rgba(248, 252, 252, .94) !important;
}

html body .reference-cta-card strong {
  font-size: .9rem !important;
  line-height: 1.18 !important;
}

html body .reference-cta-link {
  display: block !important;
  color: #5c6d75 !important;
  font-size: .74rem !important;
}

html body .reference-cta-link b {
  position: absolute !important;
  top: 50% !important;
  right: 13px !important;
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #0f6170 !important;
  color: #fff !important;
  font-size: .96rem !important;
  font-weight: 700 !important;
  transform: translateY(-50%) !important;
  transition: transform .25s ease, background .25s ease !important;
}

html body .reference-cta-card:hover .reference-cta-link b {
  background: #0a4b57 !important;
  transform: translate(3px, -50%) !important;
}

html body.process-page .process-journey {
  position: relative !important;
  padding: clamp(40px, 5vw, 64px) 0 28px !important;
  overflow: hidden !important;
  background: #fff !important;
}

html body.process-page .process-journey::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(57, 132, 146, .08), transparent 25rem),
    linear-gradient(180deg, #fff, #f8fafb) !important;
}

html body.process-page .process-journey .container {
  position: relative !important;
  width: min(1040px, calc(100% - 40px)) !important;
}

html body.process-page .process-journey-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .72fr) !important;
  align-items: end !important;
  gap: clamp(28px, 5vw, 72px) !important;
  margin-bottom: 26px !important;
}

html body.process-page .process-journey-head .section-kicker {
  margin: 0 0 10px !important;
  color: #176a78 !important;
}

html body.process-page .process-journey-head h1 {
  max-width: 650px !important;
  margin: 0 !important;
  color: #0b1f33 !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}

html body.process-page .process-journey-head > p {
  margin: 0 0 3px !important;
  color: #66757e !important;
  font-size: .98rem !important;
  line-height: 1.6 !important;
}

html body.process-page .process-journey-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body.process-page .process-journey-step {
  position: relative !important;
  min-height: 156px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(11, 31, 51, .075) !important;
  border-radius: 19px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 13px 34px rgba(12, 35, 49, .06) !important;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}

html body.process-page .process-journey-step::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #176a78, #6fa5ad) !important;
}

html body.process-page .process-journey-step:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(23, 106, 120, .2) !important;
  box-shadow: 0 18px 40px rgba(12, 35, 49, .1) !important;
}

html body.process-page .process-journey-step > span {
  display: inline-grid !important;
  width: 34px !important;
  height: 28px !important;
  margin-bottom: 14px !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: #edf5f6 !important;
  color: #176a78 !important;
  font-size: .7rem !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
}

html body.process-page .process-journey-step h2 {
  margin: 0 0 7px !important;
  color: #0b1f33 !important;
  font-size: 1rem !important;
}

html body.process-page .process-journey-step p {
  margin: 0 !important;
  color: #68767e !important;
  font-size: .82rem !important;
  line-height: 1.48 !important;
}

html body.process-page main section.result-section {
  padding: 30px 0 62px !important;
  background: #f4f7f8 !important;
}

html body.process-page .performance-slider {
  padding: clamp(20px, 3vw, 30px) !important;
  border: 1px solid rgba(11, 31, 51, .075) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 22px 64px rgba(12, 35, 49, .075) !important;
}

html body.process-page .performance-slider-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  margin: 0 0 20px !important;
  text-align: left !important;
}

html body.process-page .performance-heading {
  max-width: 680px !important;
  margin: 0 !important;
}

html body.process-page .performance-heading .section-kicker {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.process-page .performance-heading h2 {
  max-width: 660px !important;
  margin: 0 !important;
  color: #0b1f33 !important;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
}

html body.process-page .performance-lead {
  max-width: 660px !important;
  margin: 11px 0 0 !important;
  font-size: .94rem !important;
  line-height: 1.55 !important;
}

html body.process-page .performance-controls {
  position: static !important;
  align-self: start !important;
  opacity: 0;
}

html body.process-page .performance-metrics {
  grid-template-columns: minmax(150px, .7fr) 22px minmax(175px, .85fr) minmax(250px, 1.4fr) !important;
}

html body.process-page .performance-slide img,
html body.process-page .performance-slide.compact-report img {
  height: clamp(250px, 34vw, 380px) !important;
  max-height: 380px !important;
}

@media (max-width: 820px) {
  html body.process-page .process-journey-head {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  html body.process-page .process-journey-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  html body.process-page .process-journey {
    padding: 32px 0 20px !important;
  }

  html body.process-page .process-journey .container {
    width: min(100% - 22px, 1040px) !important;
  }

  html body.process-page .process-journey-grid {
    grid-template-columns: 1fr !important;
  }

  html body.process-page .process-journey-step {
    min-height: 0 !important;
  }

  html body.process-page .performance-slider {
    padding: 17px 14px !important;
    border-radius: 22px !important;
  }

  html body.process-page .performance-slider-head {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-16 — blurred reference transition and framed performance visual */
html body.process-page .process-journey {
  padding-top: clamp(58px, 6.5vw, 82px) !important;
  border-top: 12px solid #f4f7f8 !important;
}

html body.process-page .process-journey::before {
  inset: 12px 0 0 !important;
  background:
    radial-gradient(circle at 83% 8%, rgba(72, 151, 164, .12), transparent 25rem),
    radial-gradient(circle at 12% 28%, rgba(177, 210, 214, .13), transparent 22rem),
    linear-gradient(180deg, #ffffff 0%, #f8fafb 100%) !important;
  filter: blur(.01px) !important;
}

html body.process-page .performance-visual {
  padding: 14px !important;
  background:
    radial-gradient(circle at 90% 5%, rgba(64, 141, 153, .13), transparent 28%),
    linear-gradient(145deg, #eef4f5, #f8fafb) !important;
}

html body.process-page .performance-window-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(11, 31, 51, .08) !important;
  border-bottom: 0 !important;
  border-radius: 15px 15px 0 0 !important;
  background: rgba(255, 255, 255, .95) !important;
}

html body.process-page .performance-window-bar span {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #c7d2d6 !important;
}

html body.process-page .performance-window-bar span:first-child {
  background: #e79a8f !important;
}

html body.process-page .performance-window-bar span:nth-child(2) {
  background: #e7c56f !important;
}

html body.process-page .performance-window-bar span:nth-child(3) {
  background: #70b894 !important;
}

html body.process-page .performance-window-bar b {
  margin-left: 7px !important;
  color: #52646d !important;
  font-size: .72rem !important;
  font-weight: 750 !important;
}

html body.process-page .performance-window-body {
  display: grid !important;
  min-height: 280px !important;
  place-items: center !important;
  padding: 15px !important;
  border: 1px solid rgba(11, 31, 51, .08) !important;
  border-radius: 0 0 15px 15px !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(12, 35, 49, .08) !important;
}

html body.process-page .performance-visual .performance-window-body img {
  display: block !important;
  width: 100% !important;
  height: 270px !important;
  min-height: 0 !important;
  max-height: 270px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  object-fit: contain !important;
  transform: none !important;
}

html body.process-page .performance-visual-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  padding: 11px 2px 0 !important;
}

html body.process-page .performance-visual-tags span {
  padding: 6px 10px !important;
  border: 1px solid rgba(23, 106, 120, .1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #42606b !important;
  font-size: .68rem !important;
  font-weight: 750 !important;
}

html body.process-page .performance-slide:hover .performance-visual img {
  transform: none !important;
}

html body .reference-band {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: linear-gradient(120deg, #041824 0%, #0a3541 48%, #071d2b 100%) !important;
}

html body .reference-band::before {
  inset: -70px !important;
  opacity: .92 !important;
  background:
    radial-gradient(circle at 14% 36%, rgba(59, 170, 181, .32), transparent 25rem),
    radial-gradient(circle at 52% 10%, rgba(79, 139, 159, .21), transparent 23rem),
    radial-gradient(circle at 88% 44%, rgba(26, 101, 124, .28), transparent 24rem) !important;
  filter: blur(46px) !important;
  transform: scale(1.08) !important;
}

html body .reference-band .container {
  position: relative !important;
  z-index: 1 !important;
}

html body .reference-showcase {
  grid-template-columns: minmax(0, 1fr) 250px !important;
  gap: 14px !important;
  padding: 8px !important;
  border-color: rgba(211, 232, 237, .2) !important;
  background: rgba(2, 20, 34, .5) !important;
  box-shadow: 0 24px 62px rgba(0, 11, 22, .25), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
}

html body .reference-flow {
  border-radius: 15px !important;
}

html body .reference-cta-card {
  border-color: rgba(255, 255, 255, .9) !important;
  box-shadow: inset 0 1px 0 #fff, 0 9px 24px rgba(0, 15, 28, .13) !important;
}

@media (max-width: 900px) {
  html body .reference-showcase {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 620px) {
  html body.process-page .process-journey {
    padding-top: 42px !important;
    border-top-width: 8px !important;
  }

  html body.process-page .performance-visual {
    padding: 8px !important;
  }

  html body.process-page .performance-window-body {
    min-height: 210px !important;
    padding: 8px !important;
  }

  html body.process-page .performance-visual .performance-window-body img {
    height: 205px !important;
    max-height: 205px !important;
  }
}

/* 2026-07-16 — icon journey, navy reference and flush slide corners */
html body.process-page .process-journey-step > .process-step-icon {
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 15px !important;
  place-items: center !important;
  border: 1px solid rgba(23, 106, 120, .1) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #f3f8f9, #e7f1f3) !important;
  color: #176a78 !important;
}

html body.process-page .process-step-icon svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body.process-page .performance-track {
  align-items: flex-start !important;
}

html body.process-page .performance-slide,
html body.process-page .performance-slide.compact-report {
  align-self: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
}

html body.process-page .performance-slide figcaption {
  border-radius: 0 0 24px 24px !important;
}

html body .reference-band {
  background:
    radial-gradient(circle at 18% 30%, rgba(25, 71, 111, .24), transparent 31rem),
    radial-gradient(circle at 84% 18%, rgba(30, 61, 103, .2), transparent 28rem),
    linear-gradient(118deg, #02050b 0%, #061326 48%, #030914 100%) !important;
}

html body .reference-band::before {
  opacity: .78 !important;
  background:
    radial-gradient(circle at 18% 42%, rgba(37, 91, 139, .24), transparent 24rem),
    radial-gradient(circle at 54% 4%, rgba(42, 73, 119, .18), transparent 22rem),
    radial-gradient(circle at 88% 40%, rgba(18, 56, 94, .2), transparent 24rem) !important;
  filter: blur(52px) !important;
}

html body .reference-showcase {
  border-color: rgba(154, 181, 211, .2) !important;
  background: rgba(3, 10, 22, .58) !important;
  box-shadow: 0 24px 64px rgba(0, 3, 10, .34), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

/* 2026-07-16 — definitive removal of inherited slide gutters */
html body.process-page .performance-slide,
html body.process-page .performance-slide.compact-report {
  display: block !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

html body.process-page .performance-slide figcaption {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

html body.process-page .performance-slide > img,
html body.process-page .performance-slide > .performance-visual {
  margin: 0 !important;
}

/* 2026-07-16 — transparent slide shell with joined visual and caption */
html body.process-page .performance-slide,
html body.process-page .performance-slide.compact-report {
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 18px 32px rgba(12, 35, 49, .09)) !important;
}

html body.process-page .performance-slide > img,
html body.process-page .performance-slide.compact-report > img {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid rgba(11, 31, 51, .075) !important;
  border-bottom: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background: #fff !important;
}

html body.process-page .performance-slide > .performance-visual {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(11, 31, 51, .075) !important;
  border-bottom: 0 !important;
  border-radius: 24px 24px 0 0 !important;
}

html body.process-page .performance-slide figcaption {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid rgba(11, 31, 51, .075) !important;
  border-radius: 0 0 24px 24px !important;
  background: linear-gradient(90deg, #fbfcfc, #f2f6f7) !important;
}

html body.process-page .performance-slide:hover {
  box-shadow: none !important;
  filter: drop-shadow(0 22px 38px rgba(12, 35, 49, .12)) !important;
}

/* 2026-07-16 — about identity and service trust standard */
html body.about-page .about-section {
  padding-bottom: 34px !important;
}

html body.about-page .about-identity {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  width: fit-content !important;
  margin: 0 0 22px !important;
  padding: 9px 14px 9px 9px !important;
  border: 1px solid rgba(11, 31, 51, .08) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 10px 28px rgba(12, 35, 49, .06) !important;
}

html body.about-page .about-monogram {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  place-items: center !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #0b1f33, #176a78) !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

html body.about-page .about-identity div {
  display: grid !important;
  gap: 3px !important;
}

html body.about-page .about-identity strong {
  color: #0b1f33 !important;
  font-size: .93rem !important;
}

html body.about-page .about-identity small {
  color: #68767e !important;
  font-size: .75rem !important;
}

html body.about-page .about-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin: 22px 0 !important;
}

html body.about-page .about-trust-grid > span {
  display: grid !important;
  gap: 5px !important;
  padding: 14px !important;
  border: 1px solid rgba(11, 31, 51, .075) !important;
  border-radius: 15px !important;
  background: #f7fafb !important;
}

html body.about-page .about-trust-grid b {
  color: #0b1f33 !important;
  font-size: .79rem !important;
}

html body.about-page .about-trust-grid small {
  color: #69777f !important;
  font-size: .7rem !important;
  line-height: 1.45 !important;
}

html body.about-page .about-standard {
  margin-top: 16px !important;
  padding: 16px !important;
  border: 1px solid rgba(23, 106, 120, .12) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #f5fafb, #eaf4f5) !important;
}

html body.about-page .about-standard strong {
  color: #0b1f33 !important;
  font-size: .88rem !important;
}

html body.about-page .about-standard p {
  margin: 6px 0 0 !important;
  color: #60717a !important;
  font-size: .78rem !important;
  line-height: 1.5 !important;
}

html body.about-page .about-principles-section {
  padding: 34px 0 68px !important;
  background: #f4f7f8 !important;
}

html body.about-page .about-principles-section .section-head {
  max-width: 760px !important;
  margin-bottom: 22px !important;
}

html body.about-page .about-principles-section h2 {
  margin: 7px 0 0 !important;
  color: #0b1f33 !important;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
}

html body.about-page .about-principles-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 13px !important;
}

html body.about-page .about-principles-grid article {
  padding: 21px !important;
  border: 1px solid rgba(11, 31, 51, .075) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 14px 38px rgba(12, 35, 49, .06) !important;
}

html body.about-page .about-principles-grid span {
  display: inline-grid !important;
  width: 34px !important;
  height: 28px !important;
  margin-bottom: 18px !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: #eaf4f5 !important;
  color: #176a78 !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
}

html body.about-page .about-principles-grid h3 {
  margin: 0 0 8px !important;
  color: #0b1f33 !important;
  font-size: 1rem !important;
}

html body.about-page .about-principles-grid p {
  margin: 0 !important;
  color: #68767e !important;
  font-size: .82rem !important;
  line-height: 1.52 !important;
}

html body.services-page .service-assurance {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
}

html body.services-page .service-assurance > span {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 3px 10px !important;
  padding: 15px !important;
  border: 1px solid rgba(11, 31, 51, .075) !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(12, 35, 49, .055) !important;
}

html body.services-page .service-assurance b {
  grid-row: 1 / 3 !important;
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: #eaf4f5 !important;
  color: #176a78 !important;
  font-size: .66rem !important;
}

html body.services-page .service-assurance strong {
  color: #0b1f33 !important;
  font-size: .78rem !important;
}

html body.services-page .service-assurance small {
  color: #6c7980 !important;
  font-size: .68rem !important;
  line-height: 1.38 !important;
}

html body.services-page .package-slide .package-delivery {
  min-height: 0 !important;
  margin: 14px 0 0 !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(255, 255, 255, .76) !important;
  font-size: .72rem !important;
  line-height: 1.42 !important;
}

html body.services-page .package-delivery span {
  display: inline-block !important;
  margin-right: 5px !important;
  color: #b9f6aa !important;
  font-size: .64rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body.services-page .service-trust-note {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr) !important;
  gap: 34px !important;
  align-items: center !important;
  margin-top: 26px !important;
  padding: clamp(22px, 3vw, 32px) !important;
  border: 1px solid rgba(121, 155, 185, .18) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #071323, #0b2034) !important;
  box-shadow: 0 20px 54px rgba(0, 8, 20, .16) !important;
}

html body.services-page .service-trust-note .section-kicker {
  color: #91d1d7 !important;
}

html body.services-page .service-trust-note h2 {
  margin: 7px 0 0 !important;
  color: #fff !important;
  font-size: clamp(1.5rem, 2.7vw, 2.25rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

html body.services-page .service-trust-note ul {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.services-page .service-trust-note li {
  position: relative !important;
  padding-left: 24px !important;
  color: rgba(255, 255, 255, .75) !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
}

html body.services-page .service-trust-note li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: #8fd39d !important;
  font-weight: 900 !important;
}

@media (max-width: 900px) {
  html body.about-page .about-trust-grid,
  html body.about-page .about-principles-grid {
    grid-template-columns: 1fr !important;
  }

  html body.services-page .service-assurance {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.services-page .service-trust-note {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 620px) {
  html body.about-page .about-identity {
    width: 100% !important;
  }

  html body.about-page .about-trust-grid,
  html body.services-page .service-assurance {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-16 — profile photo, equal about columns and compact principles */
html body .reveal {
  transition-delay: var(--reveal-delay, 0ms) !important;
  transition-duration: 620ms !important;
  transition-timing-function: cubic-bezier(.22, .61, .36, 1) !important;
}

html body.about-page main section.about-section {
  min-height: auto !important;
  padding: clamp(48px, 5vw, 68px) 0 18px !important;
}

html body.about-page main section.about-section .about-content {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

html body.about-page main section.about-section .feature-panel,
html body.about-page main section.about-section .channel-panel {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

html body.about-page main section.about-section .feature-panel {
  justify-content: flex-start !important;
  padding: clamp(25px, 3vw, 38px) !important;
}

html body.about-page main section.about-section .channel-panel {
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(25px, 3vw, 38px) !important;
}

html body.about-page .about-identity {
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 12px !important;
  gap: clamp(18px, 2.5vw, 28px) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(81, 151, 163, .12), transparent 38%),
    linear-gradient(145deg, #ffffff, #f1f6f7) !important;
}

html body.about-page .about-portrait {
  display: block !important;
  width: 132px !important;
  height: 158px !important;
  flex: 0 0 132px !important;
  border-radius: 17px !important;
  object-fit: cover !important;
  object-position: 50% 38% !important;
  box-shadow: 0 14px 30px rgba(5, 18, 31, .16) !important;
}

html body.about-page .about-identity div {
  align-content: center !important;
  gap: 9px !important;
}

html body.about-page .about-identity strong {
  color: #0b1f33 !important;
  font-size: clamp(1.65rem, 2.7vw, 2.45rem) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

html body.about-page .about-identity small {
  max-width: 300px !important;
  color: #60717a !important;
  font-size: clamp(.86rem, 1.2vw, 1rem) !important;
  line-height: 1.45 !important;
}

html body.about-page .about-trust-grid > span {
  height: 100% !important;
  align-content: start !important;
}

html body.about-page .channel-more {
  margin-bottom: 14px !important;
}

html body.about-page .about-standard {
  margin-top: auto !important;
}

html body.about-page .about-principles-section {
  margin-top: 0 !important;
  padding: 20px 0 44px !important;
}

html body.about-page .about-principles-section .section-head {
  max-width: 690px !important;
  margin-bottom: 16px !important;
}

html body.about-page .about-principles-section h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.3rem) !important;
}

html body.about-page .about-principles-grid {
  gap: 10px !important;
}

html body.about-page .about-principles-grid article {
  min-height: 0 !important;
  padding: 17px 18px !important;
  border-radius: 17px !important;
}

html body.about-page .about-principles-grid span {
  margin-bottom: 12px !important;
}

html body.services-page .service-trust-note h2 {
  opacity: 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

html body.services-page .service-trust-note .section-kicker {
  opacity: 1 !important;
  color: #91d1d7 !important;
  -webkit-text-fill-color: #91d1d7 !important;
}

@media (max-width: 900px) {
  html body.about-page main section.about-section .about-content {
    grid-template-columns: 1fr !important;
  }

  html body.about-page main section.about-section .feature-panel,
  html body.about-page main section.about-section .channel-panel {
    min-height: auto !important;
  }
}

@media (max-width: 620px) {
  html body.about-page .about-identity {
    align-items: center !important;
    padding: 10px !important;
  }

  html body.about-page .about-portrait {
    width: 92px !important;
    height: 116px !important;
    flex-basis: 92px !important;
    border-radius: 14px !important;
  }

  html body.about-page .about-identity strong {
    font-size: 1.45rem !important;
  }

  html body.about-page .about-principles-section {
    padding: 16px 0 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .reveal {
    transition: none !important;
  }
}

/* 2026-07-16 — restored about proportions, equal confidence row and compact service trust */
html body.about-page main section.about-section {
  padding: clamp(48px, 5vw, 66px) 0 42px !important;
}

html body.about-page main section.about-section .about-content {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

html body.about-page main section.about-section .feature-panel,
html body.about-page main section.about-section .channel-panel {
  height: auto !important;
  min-height: 0 !important;
}

html body.about-page main section.about-section .feature-panel {
  padding: clamp(26px, 3vw, 36px) !important;
}

html body.about-page main section.about-section .channel-panel {
  display: block !important;
  padding: clamp(24px, 2.7vw, 34px) !important;
}

html body.about-page .about-identity {
  width: fit-content !important;
  max-width: min(100%, 470px) !important;
  margin-bottom: 20px !important;
  padding: 9px 14px 9px 9px !important;
  gap: 15px !important;
  border-radius: 17px !important;
}

html body.about-page .about-portrait {
  width: 82px !important;
  height: 98px !important;
  flex-basis: 82px !important;
  border-radius: 13px !important;
}

html body.about-page .about-identity div {
  gap: 5px !important;
}

html body.about-page .about-identity strong {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
  letter-spacing: -.025em !important;
}

html body.about-page .about-identity small {
  max-width: 270px !important;
  font-size: .82rem !important;
}

html body.about-page main section.about-section .feature-panel h1 {
  max-width: 720px !important;
  font-size: clamp(2rem, 3.35vw, 3.2rem) !important;
  line-height: 1.04 !important;
}

html body.about-page main section.about-section .feature-panel .section-text {
  font-size: clamp(.92rem, 1.1vw, 1.02rem) !important;
  line-height: 1.62 !important;
}

html body.about-page .about-confidence-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 11px !important;
  margin-top: 18px !important;
}

html body.about-page .about-confidence-card {
  box-sizing: border-box !important;
  min-height: 112px !important;
  padding: 17px 18px !important;
  border: 1px solid rgba(11, 31, 51, .075) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, #ffffff, #f2f7f8) !important;
  box-shadow: 0 12px 32px rgba(12, 35, 49, .055) !important;
}

html body.about-page .about-confidence-card strong {
  display: block !important;
  color: #0b1f33 !important;
  font-size: .84rem !important;
}

html body.about-page .about-confidence-card p {
  margin: 7px 0 0 !important;
  color: #68777f !important;
  font-size: .74rem !important;
  line-height: 1.48 !important;
}

html body.services-page .service-trust-note {
  width: min(1040px, 100%) !important;
  margin: 20px auto 0 !important;
  padding: 20px 24px !important;
  gap: 26px !important;
  border-radius: 20px !important;
}

html body.services-page .service-trust-note h2 {
  max-width: 610px !important;
  font-size: clamp(1.35rem, 2.25vw, 1.9rem) !important;
}

html body.services-page .service-trust-note li {
  font-size: .76rem !important;
}

@media (max-width: 900px) {
  html body.about-page main section.about-section .about-content {
    grid-template-columns: 1fr !important;
  }

  html body.about-page .about-confidence-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  html body.about-page .about-confidence-row {
    grid-template-columns: 1fr !important;
  }

  html body.about-page .about-confidence-card {
    min-height: 0 !important;
  }

  html body.about-page .about-portrait {
    width: 74px !important;
    height: 88px !important;
    flex-basis: 74px !important;
  }
}

/* 2026-07-16 — hard reset about section flow and visible scroll motion */
html body.about-page main section.about-section {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
}

html body.about-page main section.about-section > .about-content,
html body.about-page main section.about-section > .about-confidence-row {
  position: relative !important;
  z-index: 1 !important;
  width: min(1180px, calc(100% - 36px)) !important;
  max-width: 1180px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

html body.about-page main section.about-section > .about-content {
  display: grid !important;
}

html body.about-page main section.about-section > .about-confidence-row {
  display: grid !important;
  margin-top: 18px !important;
}

html body.scroll-animations-ready .reveal {
  opacity: 0 !important;
  transform: translate3d(0, 28px, 0) scale(.992) !important;
  transition:
    opacity 680ms cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform 680ms cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms) !important;
  will-change: opacity, transform !important;
}

html body.scroll-animations-ready .reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.scroll-animations-ready .reveal,
  html body.scroll-animations-ready .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 2026-07-16 — compact equal about panels and repeatable scroll reveal */
html body.about-page main section.about-section {
  display: block !important;
  padding: 62px 0 38px !important;
}

html body.about-page main section.about-section > .about-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr) !important;
  align-items: stretch !important;
  gap: 18px !important;
}

html body.about-page main section.about-section .feature-panel,
html body.about-page main section.about-section .channel-panel {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
}

html body.about-page main section.about-section .feature-panel {
  padding: 22px 26px !important;
}

html body.about-page main section.about-section .channel-panel {
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 24px !important;
}

html body.about-page .about-identity {
  margin-bottom: 15px !important;
  padding: 7px 12px 7px 7px !important;
  gap: 12px !important;
  border-radius: 15px !important;
}

html body.about-page .about-portrait {
  width: 68px !important;
  height: 80px !important;
  flex: 0 0 68px !important;
  border-radius: 11px !important;
}

html body.about-page .about-identity strong {
  font-size: clamp(1.08rem, 1.45vw, 1.28rem) !important;
}

html body.about-page .about-identity small {
  font-size: .76rem !important;
  line-height: 1.35 !important;
}

html body.about-page main section.about-section .feature-panel h1 {
  margin-bottom: 15px !important;
  font-size: clamp(1.9rem, 2.9vw, 2.7rem) !important;
  line-height: 1.03 !important;
}

html body.about-page main section.about-section .feature-panel .section-text {
  margin-bottom: 13px !important;
  font-size: clamp(.84rem, .98vw, .94rem) !important;
  line-height: 1.55 !important;
}

html body.about-page main section.about-section .feature-panel .btn {
  margin-top: 3px !important;
  padding: 11px 17px !important;
}

html body.about-page main section.about-section .channel-panel h3 {
  margin-bottom: 10px !important;
  font-size: clamp(1.3rem, 1.75vw, 1.68rem) !important;
  line-height: 1.08 !important;
}

html body.about-page main section.about-section .channel-panel > p {
  margin-bottom: 15px !important;
  font-size: .82rem !important;
  line-height: 1.5 !important;
}

html body.about-page .channel-panel .channel-logos {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo {
  box-sizing: border-box !important;
  min-height: 88px !important;
  height: 88px !important;
  padding: 10px !important;
  border-radius: 15px !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo img {
  max-width: 88% !important;
  max-height: 48px !important;
}

html body.about-page .channel-panel .channel-more {
  margin: 12px 0 0 !important;
  font-size: .77rem !important;
}

html body.scroll-animations-ready .reveal {
  opacity: 0 !important;
  transform: translate3d(0, 34px, 0) scale(.988) !important;
  transition:
    opacity 720ms cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform 720ms cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms) !important;
}

html body.scroll-animations-ready .reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

@media (max-width: 900px) {
  html body.about-page main section.about-section {
    padding-top: 48px !important;
  }

  html body.about-page main section.about-section > .about-content {
    grid-template-columns: 1fr !important;
  }

  html body.about-page main section.about-section .feature-panel,
  html body.about-page main section.about-section .channel-panel {
    height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.scroll-animations-ready .reveal {
    opacity: 0 !important;
    transform: none !important;
    transition: opacity 160ms ease !important;
  }

  html body.scroll-animations-ready .reveal.is-visible {
    opacity: 1 !important;
  }
}

/* 2026-07-16 — forced visible scroll motion on every page */
html body.scroll-animations-ready .reveal {
  opacity: 0 !important;
  filter: blur(5px) !important;
  transform: translate3d(0, 46px, 0) scale(.976) !important;
  transition:
    opacity 820ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    transform 820ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    filter 680ms ease var(--reveal-delay, 0ms) !important;
  will-change: opacity, transform, filter !important;
}

html body.scroll-animations-ready .reveal.reveal-left {
  transform: translate3d(-38px, 36px, 0) scale(.976) !important;
}

html body.scroll-animations-ready .reveal.reveal-right {
  transform: translate3d(38px, 36px, 0) scale(.976) !important;
}

html body.scroll-animations-ready .reveal.is-visible,
html body.scroll-animations-ready .reveal.reveal-left.is-visible,
html body.scroll-animations-ready .reveal.reveal-right.is-visible {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

@media (max-width: 700px) {
  html body.scroll-animations-ready .reveal.reveal-left,
  html body.scroll-animations-ready .reveal.reveal-right {
    transform: translate3d(0, 38px, 0) scale(.982) !important;
  }

  html body.scroll-animations-ready .reveal.is-visible {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}

/* 2026-07-16 — fast outer-block reveals without nested card delay */
html body.scroll-animations-ready .reveal {
  opacity: 0 !important;
  filter: blur(2px) !important;
  transform: translate3d(0, 26px, 0) scale(.99) !important;
  transition:
    opacity 540ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    transform 540ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    filter 420ms ease var(--reveal-delay, 0ms) !important;
}

html body.scroll-animations-ready .reveal.reveal-left {
  transform: translate3d(-20px, 22px, 0) scale(.99) !important;
}

html body.scroll-animations-ready .reveal.reveal-right {
  transform: translate3d(20px, 22px, 0) scale(.99) !important;
}

html body.scroll-animations-ready .reveal.is-visible,
html body.scroll-animations-ready .reveal.reveal-left.is-visible,
html body.scroll-animations-ready .reveal.reveal-right.is-visible {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* 2026-07-16 — restore v18 reveal system and equal channel tiles */
html body .reveal {
  opacity: 0 !important;
  filter: none !important;
  transform: translate3d(0, 22px, 0) !important;
  transition: opacity 720ms ease, transform 720ms ease !important;
  transition-delay: 0ms !important;
  will-change: opacity, transform !important;
}

html body .reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

html body.about-page .channel-panel .channel-logos {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 104px !important;
  align-items: stretch !important;
  gap: 12px !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(1),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(2),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(3),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(4),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(5),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(6) {
  box-sizing: border-box !important;
  grid-column: auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  margin: 0 !important;
  padding: 12px !important;
  aspect-ratio: auto !important;
  animation: none !important;
  transform: none !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo img {
  display: block !important;
  width: auto !important;
  max-width: 88% !important;
  height: auto !important;
  max-height: 56px !important;
  margin: auto !important;
  object-fit: contain !important;
}

@media (max-width: 620px) {
  html body.about-page .channel-panel .channel-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 2026-07-16 — restore compact 88px channel tiles and contain every logo */
html body.about-page .channel-panel .channel-logos {
  grid-auto-rows: 88px !important;
  gap: 9px !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(1),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(2),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(3),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(4),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(5),
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(6) {
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  padding: 12px !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

html body.about-page .channel-panel .channel-logos .channel-logo img,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(1) img,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(2) img,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(3) img,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(4) img,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(5) img,
html body.about-page .channel-panel .channel-logos .channel-logo:nth-child(6) img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  max-height: 52px !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* 2026-07-17 — hotel operations language and process mobile containment */
html body .hero-proof span {
  min-width: 0 !important;
}

html body .hero-proof strong {
  color: #ffffff !important;
}

@media (max-width: 620px) {
  html body.process-page {
    overflow-x: hidden !important;
  }

  html body.process-page .site-header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }

  html body.process-page main {
    padding-top: 0 !important;
  }

  html body.process-page .result-section,
  html body.process-page .result-section > .container,
  html body.process-page .performance-slider,
  html body.process-page .performance-slider-head,
  html body.process-page .performance-heading,
  html body.process-page .performance-metrics,
  html body.process-page .performance-track {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body.process-page .performance-slider {
    padding: 16px 12px !important;
    overflow: hidden !important;
  }

  html body.process-page .performance-slider-head {
    margin-bottom: 22px !important;
  }

  html body.process-page .performance-heading h2 {
    max-width: 100% !important;
    font-size: clamp(1.75rem, 8.7vw, 2.25rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
  }

  html body.process-page .performance-lead {
    max-width: 100% !important;
    margin-top: 13px !important;
    font-size: .92rem !important;
    line-height: 1.52 !important;
    text-wrap: pretty !important;
  }

  html body.process-page .performance-controls {
    position: static !important;
    justify-content: flex-start !important;
    margin-top: 16px !important;
  }

  html body.process-page .performance-metrics {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 9px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
  }

  html body.process-page .performance-metric,
  html body.process-page .performance-metric.is-highlighted {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 104px !important;
    padding: 15px 12px !important;
  }

  html body.process-page .performance-metric strong,
  html body.process-page .performance-metric.is-highlighted strong {
    font-size: clamp(1.65rem, 8vw, 2rem) !important;
  }

  html body.process-page .performance-metric span,
  html body.process-page .performance-metric small {
    font-size: .7rem !important;
  }

  html body.process-page .performance-metric-arrow {
    min-width: 0 !important;
    font-size: 1.25rem !important;
  }

  html body.process-page .organic-result {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 10px minmax(0, 1fr) !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 15px 16px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: .82rem !important;
    line-height: 1.45 !important;
  }

  html body.process-page .performance-slide,
  html body.process-page .performance-slide.compact-report {
    box-sizing: border-box !important;
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* 2026-07-17 — v30 final cascade guard */
html body .hero .hero-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr) !important;
  gap: clamp(28px, 3.5vw, 54px) !important;
}

html body .hero .hero-grid > .reveal:first-child h1 {
  max-width: 760px !important;
  font-size: clamp(2.65rem, 4.15vw, 4.45rem) !important;
  line-height: .99 !important;
}

html body .hero .hero-proof {
  display: none !important;
}

html body .hero .hero-ops-dashboard {
  max-width: 455px !important;
  padding: 18px !important;
  border-radius: 24px !important;
}

html body .hero .hero-ops-dashboard .ops-dashboard-head {
  margin-bottom: 13px !important;
}

html body .hero .hero-ops-dashboard .ops-dashboard-head h2 {
  font-size: 1.42rem !important;
}

html body .hero .hero-ops-dashboard .ops-status-row {
  padding: 10px !important;
}

html body .hero .hero-ops-dashboard .ops-dashboard-flow {
  display: none !important;
}

html body .how-section .how-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body .how-section .how-arrow {
  display: none !important;
}

@media (max-width: 860px) {
  html body .hero .hero-grid,
  html body .how-section .how-steps {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  html body .hero .hero-grid > .reveal:first-child h1 {
    font-size: clamp(2.05rem, 10.5vw, 2.9rem) !important;
  }
}

/* 2026-07-17 — v31 service system, icon scope, reviews and reliable reveal */
html body .hero .hero-ops-dashboard {
  max-width: 476px !important;
  padding: 17px !important;
}

html body .hero .hero-ops-dashboard .ops-status-list {
  gap: 8px !important;
}

html body .hero .hero-ops-dashboard .ops-status-row {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 11px !important;
  min-height: 62px !important;
  padding: 9px 10px !important;
}

html body .ops-status-icon {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border: 1px solid rgba(190, 232, 220, .17) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(123, 160, 190, .18), rgba(116, 95, 184, .16)) !important;
  color: #bfe8dc !important;
}

html body .ops-status-icon svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .hero .ops-status-row strong {
  font-size: .82rem !important;
}

html body .hero .ops-status-row small {
  margin-top: 2px !important;
  font-size: .66rem !important;
}

html body .hero .ops-status-row > b {
  padding: 6px 9px !important;
  font-size: .64rem !important;
}

html body .how-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

html body .how-section .how-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 16px !important;
  border: 1px solid rgba(11, 31, 51, .07) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 28px 80px rgba(12, 35, 49, .08) !important;
}

html body .how-section .how-arrow {
  display: none !important;
}

html body .how-section .how-step {
  position: relative !important;
  display: flex !important;
  min-height: 326px !important;
  padding: 39px 31px 32px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  border: 1px solid rgba(11, 31, 51, .08) !important;
  border-radius: 23px !important;
  background: linear-gradient(145deg, #ffffff, #fbfcfd) !important;
  box-shadow: none !important;
}

html body .how-section .how-icon {
  position: relative !important;
  display: grid !important;
  width: 94px !important;
  height: 94px !important;
  margin: 0 auto 28px !important;
  place-items: center !important;
  border-radius: 22px !important;
  background: #edf3f8 !important;
  color: #1d579b !important;
}

html body .how-section .how-icon > span {
  position: absolute !important;
  top: -13px !important;
  right: -13px !important;
  display: grid !important;
  width: 39px !important;
  height: 39px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #1c579e !important;
  color: #ffffff !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
}

html body .how-section .how-icon.gold {
  background: #f6f0e4 !important;
  color: #b8902c !important;
}

html body .how-section .how-icon.gold > span {
  background: #dfb84e !important;
  color: #0b1f33 !important;
}

html body .how-section .how-step h3 {
  margin: 0 0 14px !important;
  color: #0b2447 !important;
  font-size: 1.25rem !important;
}

html body .how-section .how-step p {
  max-width: 300px !important;
  color: #687b94 !important;
  line-height: 1.65 !important;
}

html body .reviews-section {
  background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
}

html body .reviews-section .review-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

html body .reviews-section .review-card {
  position: relative !important;
  display: flex !important;
  min-height: 330px !important;
  padding: 26px !important;
  flex-direction: column !important;
  border: 1px solid rgba(17, 56, 85, .09) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(100, 149, 189, .09), transparent 42%),
    rgba(255, 255, 255, .96) !important;
  box-shadow: 0 22px 58px rgba(12, 35, 49, .08) !important;
}

html body .reviews-section .review-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 28px !important;
  left: 28px !important;
  height: 3px !important;
  border-radius: 0 0 999px 999px !important;
  background: linear-gradient(90deg, #214f85, #77b7c7) !important;
}

html body .reviews-section .review-avatar {
  background: linear-gradient(145deg, #173e72, #73bad0) !important;
  color: #ffffff !important;
}

html body .reviews-section .review-card > p {
  margin-bottom: 22px !important;
  color: #203752 !important;
  line-height: 1.62 !important;
}

html body .reviews-section .review-result {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-top: auto !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(36, 123, 82, .12) !important;
  border-radius: 999px !important;
  background: #edf7f2 !important;
  color: #247b52 !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
}

html body.services-page .pricing-section {
  padding-top: clamp(58px, 7vw, 90px) !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(112, 80, 159, .08), transparent 28%),
    linear-gradient(180deg, #f6f9fb 0%, #ffffff 38%, #f6f9fa 100%) !important;
}

html body.services-page .pricing-section > .container {
  width: min(1420px, calc(100% - 48px)) !important;
}

html body.services-page .pricing-section > .container > .section-head {
  max-width: 980px !important;
  margin: 0 0 36px !important;
  text-align: left !important;
}

html body.services-page .pricing-section > .container > .section-head h1 {
  max-width: 900px !important;
  font-size: clamp(2.55rem, 5vw, 5rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

html body.services-page .pricing-section > .container > .section-head .section-text {
  max-width: 880px !important;
  margin: 18px 0 0 !important;
}

html body.services-page .service-package-slider {
  padding: clamp(24px, 3vw, 38px) !important;
  border: 1px solid rgba(11, 31, 51, .08) !important;
  border-radius: 32px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 26px 80px rgba(12, 35, 49, .09) !important;
  backdrop-filter: blur(18px) !important;
}

html body.services-page .service-package-head {
  align-items: flex-end !important;
  margin-bottom: 24px !important;
}

html body.services-page .service-package-head h3 {
  max-width: 720px !important;
  color: #0b1f33 !important;
  font-size: clamp(1.65rem, 3vw, 2.8rem) !important;
}

html body.services-page .package-btn {
  border-color: rgba(11, 45, 75, .12) !important;
  background: #0c2c4c !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(12, 44, 76, .16) !important;
}

html body.services-page .package-btn:hover {
  background: #174e79 !important;
}

html body.services-page .package-track {
  gap: 16px !important;
  padding: 4px 4px 16px !important;
  scrollbar-color: rgba(27, 94, 111, .42) rgba(16, 23, 47, .06) !important;
}

html body.services-page .pricing-card,
html body.services-page .pricing-card.featured,
html body.services-page .pricing-card.ai-video-package,
html body.services-page .package-slide {
  position: relative !important;
  flex: 0 0 min(390px, calc(33.333% - 11px)) !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 592px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: 27px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid #dfe7ee !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(83, 140, 154, .09), transparent 40%),
    #ffffff !important;
  color: #0b1f33 !important;
  box-shadow: 0 16px 44px rgba(12, 35, 49, .07) !important;
  animation: none !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}

html body.services-page .pricing-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 26px !important;
  left: 26px !important;
  height: 3px !important;
  border-radius: 0 0 999px 999px !important;
  background: linear-gradient(90deg, #2e7181, #9bc9c2) !important;
}

html body.services-page .pricing-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(31, 108, 124, .24) !important;
  box-shadow: 0 24px 60px rgba(12, 35, 49, .11) !important;
}

html body.services-page .pricing-card.featured {
  border-color: rgba(23, 106, 120, .24) !important;
  background: linear-gradient(145deg, #f4fbfa, #eef6f8) !important;
}

html body.services-page .pricing-card.featured::before {
  background: linear-gradient(90deg, #167066, #63b9a7) !important;
}

html body.services-page .pricing-card.ai-video-package {
  background:
    radial-gradient(circle at 100% 0%, rgba(112, 80, 159, .12), transparent 44%),
    #ffffff !important;
}

html body.services-page .pricing-card.ai-video-package::before {
  background: linear-gradient(90deg, #6f559b, #b3a3cf) !important;
}

html body.services-page .package-slide .pricing-tag,
html body.services-page .pricing-card:not(.featured) .pricing-tag {
  display: inline-flex !important;
  width: max-content !important;
  visibility: visible !important;
  margin: 0 0 18px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: #eaf4f3 !important;
  color: #276b72 !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

html body.services-page .pricing-card.featured .pricing-tag {
  background: #dff1eb !important;
  color: #167066 !important;
}

html body.services-page .pricing-card.ai-video-package .pricing-tag {
  background: #eee9f6 !important;
  color: #6c4f91 !important;
}

html body.services-page .pricing-card h3 {
  min-height: 58px !important;
  margin: 0 0 11px !important;
  color: #0b1f33 !important;
  font-size: clamp(1.35rem, 1.7vw, 1.72rem) !important;
  line-height: 1.08 !important;
}

html body.services-page .pricing-card > p:not(.package-delivery) {
  min-height: 76px !important;
  margin: 0 0 17px !important;
  color: #617489 !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

html body.services-page .pricing-card .price-range {
  display: grid !important;
  min-height: 84px !important;
  margin: 0 0 18px !important;
  padding: 15px 17px !important;
  align-content: center !important;
  border: 1px solid rgba(31, 108, 92, .14) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #eff8f4, #f9fcfb) !important;
  color: #1e7a56 !important;
  font-size: clamp(1.75rem, 2.2vw, 2.25rem) !important;
  line-height: 1 !important;
}

html body.services-page .pricing-card .price-range small {
  margin-bottom: 6px !important;
  color: #718176 !important;
  font-size: .65rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body.services-page .pricing-card ul {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  display: grid !important;
  gap: 10px !important;
  border-top: 1px solid rgba(11, 31, 51, .09) !important;
}

html body.services-page .pricing-card li {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 8px !important;
  color: #263d54 !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
}

html body.services-page .pricing-card li::before {
  display: inline-grid !important;
  width: 18px !important;
  height: 18px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #e4f2ed !important;
  color: #1f7b5d !important;
}

html body.services-page .pricing-card .package-delivery {
  min-height: 72px !important;
  margin: auto 0 0 !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(24, 92, 108, .1) !important;
  border-radius: 16px !important;
  background: #f4f8fa !important;
  color: #617489 !important;
  font-size: .75rem !important;
  line-height: 1.45 !important;
}

html body.services-page .pricing-card .package-delivery span {
  color: #1b6672 !important;
}

html body.services-page .pricing-card .package-detail {
  border-color: rgba(11, 31, 51, .08) !important;
  background: #f7f9fb !important;
  color: #0b1f33 !important;
}

html body.services-page .pricing-card .package-detail p {
  color: #617489 !important;
}

html body.services-page .service-trust-note {
  margin-top: 34px !important;
}

html.reveal-enabled body .reveal {
  opacity: 0 !important;
  transform: translate3d(0, 26px, 0) !important;
  transition: opacity 680ms cubic-bezier(.22, 1, .36, 1), transform 680ms cubic-bezier(.22, 1, .36, 1) !important;
}

html.reveal-enabled body .reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

@media (max-width: 1080px) {
  html body.services-page .pricing-card,
  html body.services-page .pricing-card.featured,
  html body.services-page .pricing-card.ai-video-package,
  html body.services-page .package-slide {
    flex-basis: calc(50% - 8px) !important;
  }

  html body .reviews-section .review-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 860px) {
  html body .how-section .how-steps,
  html body .reviews-section .review-grid {
    grid-template-columns: 1fr !important;
  }

  html body .how-section .how-step {
    min-height: 0 !important;
  }

  html body .reviews-section .review-card {
    min-height: 0 !important;
  }
}

@media (max-width: 700px) {
  html body.services-page .pricing-section > .container {
    width: min(100% - 24px, 1420px) !important;
  }

  html body.services-page .pricing-section > .container > .section-head h1 {
    font-size: clamp(2.2rem, 11vw, 3.5rem) !important;
  }

  html body.services-page .service-package-slider {
    padding: 18px 14px !important;
    border-radius: 24px !important;
  }

  html body.services-page .service-package-head {
    align-items: flex-start !important;
  }

  html body.services-page .package-controls {
    flex-shrink: 0 !important;
  }

  html body.services-page .pricing-card,
  html body.services-page .pricing-card.featured,
  html body.services-page .pricing-card.ai-video-package,
  html body.services-page .package-slide {
    flex-basis: calc(100% - 8px) !important;
    min-height: 0 !important;
  }

  html body.services-page .pricing-card h3,
  html body.services-page .pricing-card > p:not(.package-delivery) {
    min-height: 0 !important;
  }

  html body .hero .hero-ops-dashboard {
    width: 100% !important;
    max-width: none !important;
  }
}

/* 2026-07-17 — v32 compact typography, dark glass pricing, warm reviews and true scroll reveal */
html body .how-section {
  padding: clamp(62px, 6vw, 82px) 0 !important;
}

html body .how-section .section-head {
  max-width: 680px !important;
  margin-bottom: 32px !important;
}

html body .how-section .section-head h2 {
  font-size: clamp(2rem, 3vw, 3rem) !important;
  line-height: 1.04 !important;
}

html body .how-section .how-steps {
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 24px !important;
}

html body .how-section .how-step {
  min-height: 238px !important;
  padding: 27px 24px 24px !important;
  border-radius: 19px !important;
}

html body .how-section .how-icon {
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 22px !important;
  border-radius: 18px !important;
}

html body .how-section .how-icon > span {
  top: -10px !important;
  right: -10px !important;
  width: 31px !important;
  height: 31px !important;
  font-size: .72rem !important;
}

html body .how-section .how-icon b {
  transform: scale(.82) !important;
}

html body .how-section .how-step h3 {
  margin-bottom: 10px !important;
  font-size: 1.05rem !important;
}

html body .how-section .how-step p {
  max-width: 270px !important;
  font-size: .87rem !important;
  line-height: 1.55 !important;
}

html body .channel-operations-showcase {
  padding: clamp(66px, 6vw, 92px) 0 !important;
}

html body .operation-showcase-grid {
  grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr) !important;
  gap: clamp(40px, 6vw, 82px) !important;
}

html body .operation-showcase-copy {
  max-width: 590px !important;
}

html body .operation-showcase-copy h2 {
  max-width: 570px !important;
  font-size: clamp(2.15rem, 3.25vw, 3.55rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -.045em !important;
}

html body .operation-showcase-copy > p:not(.section-kicker) {
  max-width: 560px !important;
  margin-top: 19px !important;
  font-size: clamp(.92rem, 1.05vw, 1.05rem) !important;
  line-height: 1.6 !important;
}

html body .operation-benefits {
  margin-top: 24px !important;
}

html body .operation-benefits > span {
  padding: 12px 13px !important;
}

html body .reviews-section {
  padding: clamp(66px, 6vw, 92px) 0 !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(181, 151, 96, .08), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(126, 103, 142, .08), transparent 30%),
    linear-gradient(180deg, #fbfaf8, #ffffff) !important;
}

html body .reviews-section .reviews-head {
  margin-bottom: 34px !important;
}

html body .reviews-section .reviews-head h2 {
  color: #202131 !important;
  font-size: clamp(2.1rem, 3.4vw, 3.45rem) !important;
}

html body .reviews-section .reviews-head .section-kicker {
  color: #9a7435 !important;
}

html body .reviews-section .review-card {
  min-height: 306px !important;
  padding: 24px !important;
  border-color: rgba(81, 63, 88, .11) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(130, 104, 145, .08), transparent 42%),
    linear-gradient(145deg, #ffffff, #fcfaf8) !important;
  box-shadow: 0 22px 58px rgba(54, 43, 61, .08) !important;
}

html body .reviews-section .review-card::before {
  background: linear-gradient(90deg, #b99047, #856889) !important;
}

html body .reviews-section .review-avatar {
  background: linear-gradient(145deg, #43394d, #987ca0) !important;
}

html body .reviews-section .review-top strong,
html body .reviews-section .review-card > p {
  color: #292637 !important;
}

html body .reviews-section .review-top span {
  color: #726b79 !important;
}

html body .reviews-section .review-card > p {
  font-size: .92rem !important;
  line-height: 1.58 !important;
}

html body .reviews-section .review-result {
  border-color: rgba(92, 112, 76, .13) !important;
  background: #f0f5ec !important;
  color: #526c42 !important;
}

html body.services-page .pricing-section {
  padding: clamp(58px, 5.5vw, 78px) 0 clamp(68px, 6vw, 90px) !important;
  background:
    radial-gradient(circle at 84% 9%, rgba(116, 91, 151, .07), transparent 28%),
    linear-gradient(180deg, #f8f9fb 0%, #ffffff 34%, #f6f7fa 100%) !important;
}

html body.services-page .pricing-section > .container {
  width: min(1320px, calc(100% - 48px)) !important;
}

html body.services-page .pricing-section > .container > .section-head {
  max-width: 820px !important;
  margin-bottom: 28px !important;
}

html body.services-page .pricing-section > .container > .section-head h1 {
  max-width: 780px !important;
  font-size: clamp(2.35rem, 3.9vw, 4rem) !important;
  line-height: 1.01 !important;
  letter-spacing: -.048em !important;
}

html body.services-page .pricing-section > .container > .section-head .section-text {
  max-width: 760px !important;
  margin-top: 15px !important;
  font-size: clamp(.92rem, 1.05vw, 1.04rem) !important;
  line-height: 1.6 !important;
}

html body.services-page .service-package-slider {
  padding: 24px !important;
  border-color: rgba(139, 117, 184, .28) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(100, 75, 168, .34), transparent 35%),
    radial-gradient(circle at 8% 100%, rgba(29, 106, 112, .2), transparent 32%),
    linear-gradient(155deg, rgba(12, 30, 55, .99), rgba(17, 24, 54, .98)) !important;
  box-shadow: 0 28px 78px rgba(8, 20, 42, .2) !important;
}

html body.services-page .service-package-head {
  margin-bottom: 19px !important;
}

html body.services-page .service-package-head .section-kicker {
  color: #a9efc4 !important;
}

html body.services-page .service-package-head h3 {
  max-width: 600px !important;
  color: #ffffff !important;
  font-size: clamp(1.45rem, 2.2vw, 2.15rem) !important;
  line-height: 1.08 !important;
}

html body.services-page .package-btn {
  width: 42px !important;
  height: 42px !important;
  border-color: rgba(255, 255, 255, .13) !important;
  background: rgba(255, 255, 255, .09) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

html body.services-page .package-btn:hover {
  background: rgba(255, 255, 255, .16) !important;
}

html body.services-page .package-track {
  gap: 14px !important;
  padding: 2px 2px 10px !important;
}

html body.services-page .pricing-card,
html body.services-page .pricing-card.featured,
html body.services-page .pricing-card.ai-video-package,
html body.services-page .package-slide {
  flex: 0 0 308px !important;
  min-height: 498px !important;
  padding: 21px !important;
  border-color: rgba(196, 205, 230, .14) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(58, 72, 104, .62), rgba(28, 42, 70, .78)) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 38px rgba(3, 10, 26, .17) !important;
  backdrop-filter: blur(16px) !important;
}

html body.services-page .pricing-card.featured {
  border-color: rgba(150, 120, 219, .48) !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(117, 74, 194, .42), transparent 43%),
    linear-gradient(145deg, rgba(67, 53, 112, .88), rgba(29, 35, 72, .9)) !important;
}

html body.services-page .pricing-card.ai-video-package {
  background:
    radial-gradient(circle at 90% 0%, rgba(88, 69, 143, .3), transparent 42%),
    linear-gradient(145deg, rgba(57, 65, 96, .76), rgba(26, 39, 66, .88)) !important;
}

html body.services-page .pricing-card::before,
html body.services-page .pricing-card.featured::before,
html body.services-page .pricing-card.ai-video-package::before {
  right: 21px !important;
  left: 21px !important;
  background: linear-gradient(90deg, #91e8bb, rgba(152, 121, 212, .8)) !important;
}

html body.services-page .package-slide .pricing-tag,
html body.services-page .pricing-card:not(.featured) .pricing-tag,
html body.services-page .pricing-card.featured .pricing-tag,
html body.services-page .pricing-card.ai-video-package .pricing-tag {
  margin-bottom: 13px !important;
  padding: 6px 9px !important;
  background: rgba(121, 222, 170, .13) !important;
  color: #a9efc4 !important;
  font-size: .59rem !important;
}

html body.services-page .pricing-card h3 {
  min-height: 45px !important;
  margin-bottom: 8px !important;
  color: #ffffff !important;
  font-size: 1.22rem !important;
  line-height: 1.08 !important;
}

html body.services-page .pricing-card > p:not(.package-delivery) {
  min-height: 62px !important;
  margin-bottom: 13px !important;
  color: rgba(232, 237, 247, .74) !important;
  font-size: .76rem !important;
  line-height: 1.46 !important;
  font-weight: 650 !important;
}

html body.services-page .pricing-card .price-range {
  min-height: 66px !important;
  margin-bottom: 13px !important;
  padding: 11px 13px !important;
  border-color: rgba(133, 230, 176, .2) !important;
  border-radius: 15px !important;
  background: rgba(7, 18, 38, .52) !important;
  color: #9ff49b !important;
  font-size: 1.72rem !important;
  box-shadow: inset 0 0 24px rgba(91, 204, 132, .05) !important;
}

html body.services-page .pricing-card .price-range small {
  margin-bottom: 4px !important;
  color: rgba(225, 235, 229, .58) !important;
  font-size: .57rem !important;
}

html body.services-page .pricing-card ul {
  padding-top: 12px !important;
  gap: 7px !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

html body.services-page .pricing-card li {
  color: rgba(240, 243, 250, .82) !important;
  font-size: .72rem !important;
  line-height: 1.3 !important;
}

html body.services-page .pricing-card li::before {
  background: rgba(126, 226, 170, .16) !important;
  color: #a9efc4 !important;
}

html body.services-page .pricing-card .package-delivery {
  min-height: 60px !important;
  padding: 10px 11px !important;
  border-color: rgba(255, 255, 255, .1) !important;
  border-radius: 13px !important;
  background: rgba(8, 18, 38, .34) !important;
  color: rgba(231, 236, 245, .68) !important;
  font-size: .66rem !important;
}

html body.services-page .pricing-card .package-delivery span {
  color: #a9efc4 !important;
}

html body.services-page .pricing-card .package-detail {
  border-color: rgba(255, 255, 255, .12) !important;
  background: #16233d !important;
  color: #ffffff !important;
}

html body.services-page .pricing-card .package-detail p {
  color: rgba(235, 239, 247, .72) !important;
}

html body.contact-page .contact-section {
  min-height: calc(100vh - 110px) !important;
  padding: clamp(64px, 6vw, 90px) 0 !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(101, 76, 169, .3), transparent 32%),
    radial-gradient(circle at 12% 88%, rgba(25, 118, 116, .22), transparent 33%),
    linear-gradient(150deg, #07192f 0%, #101a38 58%, #0a1b31 100%) !important;
}

html body.contact-page .contact-simple {
  width: min(1180px, calc(100% - 48px)) !important;
  padding: clamp(28px, 4vw, 48px) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, .065) !important;
  box-shadow: 0 34px 90px rgba(1, 8, 21, .28) !important;
  backdrop-filter: blur(20px) !important;
}

html body.contact-page .contact-simple .section-head {
  max-width: 780px !important;
  margin: 0 0 30px !important;
  text-align: left !important;
}

html body.contact-page .contact-simple .section-kicker {
  color: #a9efc4 !important;
}

html body.contact-page .contact-simple h1 {
  max-width: 760px !important;
  color: #ffffff !important;
  font-size: clamp(2.35rem, 4vw, 4rem) !important;
  line-height: 1.01 !important;
  letter-spacing: -.045em !important;
}

html body.contact-page .contact-simple .section-text {
  max-width: 720px !important;
  margin: 16px 0 0 !important;
  color: rgba(235, 240, 248, .72) !important;
  font-size: clamp(.92rem, 1.05vw, 1.04rem) !important;
  line-height: 1.6 !important;
}

html body.contact-page .contact-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: none !important;
  gap: 13px !important;
  margin: 0 !important;
}

html body.contact-page .contact-card,
html body.contact-page .contact-card.contact-mail,
html body.contact-page .contact-card.social-bionluk {
  min-height: 138px !important;
  padding: 20px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 19px !important;
  background: rgba(255, 255, 255, .09) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

html body.contact-page .contact-card.social-whatsapp {
  background: linear-gradient(145deg, rgba(29, 164, 82, .78), rgba(75, 196, 123, .38)) !important;
}

html body.contact-page .contact-card.social-instagram {
  background: linear-gradient(145deg, rgba(205, 80, 120, .72), rgba(102, 73, 170, .58)) !important;
}

html body.contact-page .contact-card.social-bionluk {
  background: linear-gradient(145deg, rgba(23, 105, 96, .78), rgba(35, 132, 116, .42)) !important;
}

html body.contact-page .contact-card span,
html body.contact-page .contact-card strong,
html body.contact-page .contact-card.contact-mail strong {
  color: #ffffff !important;
}

html body.contact-page .contact-card span {
  opacity: .72 !important;
}

html body.contact-page .contact-card svg {
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 8px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .13) !important;
}

html body.contact-page .shopier-cta {
  margin-top: 16px !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  background: rgba(255, 255, 255, .09) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

html body.contact-page .shopier-cta small,
html body.contact-page .shopier-cta strong,
html body.contact-page .shopier-cta b {
  color: #ffffff !important;
}

html.reveal-enabled body .reveal {
  opacity: 0 !important;
  transform: translate3d(0, 34px, 0) scale(.985) !important;
  filter: blur(8px) !important;
  animation: none !important;
  transition:
    opacity 780ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    transform 780ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    filter 780ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms) !important;
  will-change: opacity, transform, filter !important;
}

html.reveal-enabled body .reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0) !important;
}

@media (max-width: 980px) {
  html body .operation-showcase-grid {
    grid-template-columns: 1fr !important;
  }

  html body.contact-page .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  html body .how-section .how-step {
    min-height: 0 !important;
  }

  html body .operation-showcase-copy h2 {
    font-size: clamp(2rem, 9.8vw, 2.8rem) !important;
  }

  html body.services-page .pricing-section > .container,
  html body.contact-page .contact-simple {
    width: min(100% - 24px, 1320px) !important;
  }

  html body.services-page .pricing-section > .container > .section-head h1,
  html body.contact-page .contact-simple h1 {
    font-size: clamp(2.1rem, 10vw, 3rem) !important;
  }

  html body.services-page .service-package-slider {
    padding: 17px 13px !important;
  }

  html body.services-page .pricing-card,
  html body.services-page .pricing-card.featured,
  html body.services-page .pricing-card.ai-video-package,
  html body.services-page .package-slide {
    flex-basis: calc(100% - 6px) !important;
    min-height: 0 !important;
  }

  html body.contact-page .contact-simple {
    padding: 22px 16px !important;
  }

  html body.contact-page .contact-cards {
    grid-template-columns: 1fr !important;
  }

  html.reveal-enabled body .reveal {
    transform: translate3d(0, 24px, 0) scale(.99) !important;
  }

  html.reveal-enabled body .reveal.is-visible {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}

/* 2026-07-17 — v33 business logos, linked reviews, stable contact and scroll trigger */
html body .reviews-section .review-card {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(130, 104, 145, .1), transparent 42%),
    linear-gradient(145deg, #f7f3f7, #fffdfb) !important;
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease !important;
}

html body .reviews-section .review-card::before {
  height: 3px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(93, 72, 101, .22) !important;
}

html body .reviews-section .review-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(117, 91, 126, .2) !important;
  box-shadow: 0 30px 70px rgba(54, 43, 61, .13) !important;
}

html body .reviews-section .review-card:focus-visible {
  outline: 3px solid rgba(112, 84, 126, .35) !important;
  outline-offset: 4px !important;
}

html body .reviews-section .review-avatar.is-logo {
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  padding: 7px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(73, 58, 78, .1) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(50, 40, 56, .08) !important;
}

html body .reviews-section .review-avatar.is-logo.is-dark {
  background: #07172d !important;
}

html body .reviews-section .review-avatar.is-logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body .reviews-section .google-logo {
  display: block !important;
  width: 27px !important;
  height: 27px !important;
  object-fit: contain !important;
}

html body.contact-page,
html body.contact-page main,
html body.contact-page .contact-section {
  overflow-x: hidden !important;
}

html body.contact-page .contact-section,
html body.contact-page .contact-simple,
html body.contact-page .contact-cards,
html body.contact-page .contact-card,
html body.contact-page .shopier-cta {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

html body.contact-page .contact-simple {
  position: relative !important;
  overflow: hidden !important;
}

html body.contact-page .contact-cards {
  width: 100% !important;
  align-items: stretch !important;
}

html body.contact-page .contact-card,
html body.contact-page .contact-card.contact-mail,
html body.contact-page .contact-card.social-whatsapp,
html body.contact-page .contact-card.social-instagram,
html body.contact-page .contact-card.social-bionluk {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 20px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
  text-decoration: none !important;
  isolation: isolate !important;
}

html body.contact-page .contact-card span {
  max-width: calc(100% - 42px) !important;
  margin-bottom: 5px !important;
  font-size: .7rem !important;
}

html body.contact-page .contact-card strong,
html body.contact-page .contact-card.contact-mail strong {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-size: clamp(.78rem, .9vw, .92rem) !important;
  line-height: 1.28 !important;
}

html body.contact-page .contact-card svg {
  z-index: 1 !important;
  flex: none !important;
}

html body.contact-page .shopier-cta {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: 64px minmax(0, 1fr) 38px !important;
  gap: 16px !important;
  align-items: center !important;
  overflow: hidden !important;
}

html body.contact-page .shopier-cta img {
  display: block !important;
  width: 58px !important;
  height: 42px !important;
  padding: 7px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

html body.contact-page .shopier-cta span {
  min-width: 0 !important;
}

html body.contact-page .shopier-cta small,
html body.contact-page .shopier-cta strong {
  display: block !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 620px) {
  html body .reviews-section .review-avatar.is-logo {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  html body.contact-page .contact-card,
  html body.contact-page .contact-card.contact-mail,
  html body.contact-page .contact-card.social-whatsapp,
  html body.contact-page .contact-card.social-instagram,
  html body.contact-page .contact-card.social-bionluk {
    min-height: 126px !important;
  }

  html body.contact-page .shopier-cta {
    grid-template-columns: 52px minmax(0, 1fr) 28px !important;
    gap: 11px !important;
    padding: 14px !important;
  }

  html body.contact-page .shopier-cta img {
    width: 50px !important;
    height: 38px !important;
  }
}

/* 2026-07-17 — v34 neutral reviews, fitted brand marks, contact hard reset and full scroll coverage */
html body .reviews-section {
  background:
    radial-gradient(circle at 12% 10%, rgba(196, 171, 111, .07), transparent 27%),
    linear-gradient(180deg, #f8faf9, #ffffff) !important;
}

html body .reviews-section .review-card {
  border-color: rgba(48, 68, 61, .11) !important;
  background: linear-gradient(145deg, #ffffff, #fafcfb) !important;
  box-shadow: 0 22px 58px rgba(29, 45, 39, .08) !important;
}

html body .reviews-section .review-card:hover {
  border-color: rgba(86, 120, 95, .24) !important;
  box-shadow: 0 30px 70px rgba(29, 45, 39, .13) !important;
}

html body .reviews-section .review-card:focus-visible {
  outline-color: rgba(86, 120, 95, .35) !important;
}

html body .reviews-section .review-top {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) 30px !important;
  gap: 14px !important;
  align-items: center !important;
}

html body .reviews-section .review-top > div:nth-child(2) {
  min-width: 0 !important;
}

html body .reviews-section .review-avatar.is-logo,
html body .reviews-section .review-avatar.is-logo.is-dark {
  width: 88px !important;
  height: 62px !important;
  min-width: 88px !important;
  padding: 8px !important;
  border-color: rgba(48, 68, 61, .1) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(29, 45, 39, .07) !important;
}

html body .reviews-section .review-avatar.is-logo.is-dark {
  background: #07172d !important;
}

html body .reviews-section .review-avatar.is-logo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

html body .reviews-section .review-top strong {
  color: #1f2d28 !important;
}

html body .reviews-section .review-top span,
html body .reviews-section .review-card > p {
  color: #58665f !important;
}

html body .reviews-section .review-card::before {
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(37, 56, 48, .16) !important;
}

html body.contact-page main section.contact-section {
  position: relative !important;
  min-height: calc(100vh - 72px) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(64px, 6vw, 90px) 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(44, 107, 123, .2), transparent 32%),
    radial-gradient(circle at 10% 90%, rgba(34, 118, 101, .16), transparent 34%),
    linear-gradient(150deg, #07192f 0%, #101d34 58%, #0a1b31 100%) !important;
}

html body.contact-page main section.contact-section::before,
html body.contact-page main section.contact-section::after {
  display: none !important;
  content: none !important;
}

html body.contact-page main section.contact-section .contact-simple {
  position: relative !important;
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: clamp(28px, 4vw, 48px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 30px !important;
  background: rgba(10, 25, 47, .9) !important;
  box-shadow: 0 34px 90px rgba(1, 8, 21, .3) !important;
  backdrop-filter: blur(20px) !important;
}

html body.contact-page main section.contact-section .contact-simple .section-head {
  opacity: 1;
}

html body.contact-page main section.contact-section .contact-simple .contact-mail {
  background: linear-gradient(145deg, rgba(32, 56, 83, .95), rgba(23, 45, 70, .92)) !important;
}

html body.contact-page main section.contact-section .contact-simple .shopier-cta {
  border-color: rgba(255, 255, 255, .13) !important;
  background: linear-gradient(145deg, rgba(32, 56, 83, .82), rgba(23, 45, 70, .88)) !important;
}

@media (max-width: 620px) {
  html body .reviews-section .review-top {
    grid-template-columns: 72px minmax(0, 1fr) 27px !important;
    gap: 11px !important;
  }

  html body .reviews-section .review-avatar.is-logo,
  html body .reviews-section .review-avatar.is-logo.is-dark {
    width: 72px !important;
    height: 54px !important;
    min-width: 72px !important;
    padding: 7px !important;
  }

  html body.contact-page main section.contact-section {
    min-height: auto !important;
    padding: 42px 0 56px !important;
  }

  html body.contact-page main section.contact-section .contact-simple {
    width: min(100% - 24px, 1180px) !important;
    padding: 22px 16px !important;
    border-radius: 24px !important;
  }
}

/* 2026-07-17 — v35 compact reviews and reversible bidirectional scroll reveals */
html body .reviews-section .review-grid {
  gap: 16px !important;
}

html body .reviews-section .review-card {
  min-height: 292px !important;
  padding: 20px !important;
  border-radius: 21px !important;
}

html body .reviews-section .review-top {
  grid-template-columns: 70px minmax(0, 1fr) 27px !important;
  gap: 12px !important;
}

html body .reviews-section .review-avatar.is-logo,
html body .reviews-section .review-avatar.is-logo.is-dark {
  width: 70px !important;
  height: 52px !important;
  min-width: 70px !important;
  padding: 8px !important;
  border-radius: 13px !important;
}

html body .reviews-section .review-avatar.is-logo img {
  width: 88% !important;
  height: 88% !important;
  max-width: 88% !important;
  max-height: 88% !important;
  margin: auto !important;
  object-fit: contain !important;
}

html body .reviews-section .review-top strong {
  font-size: .94rem !important;
  line-height: 1.2 !important;
}

html body .reviews-section .review-top span {
  margin-top: 3px !important;
  font-size: .75rem !important;
  line-height: 1.3 !important;
}

html body .reviews-section .google-logo {
  width: 25px !important;
  height: 25px !important;
}

html body .reviews-section .stars {
  margin: 14px 0 13px !important;
  font-size: .86rem !important;
}

html body .reviews-section .review-card > p {
  margin-bottom: 16px !important;
  font-size: .84rem !important;
  line-height: 1.5 !important;
}

html body .reviews-section .review-result {
  padding: 7px 10px !important;
  font-size: .66rem !important;
}

@media (max-width: 620px) {
  html body .reviews-section .review-top {
    grid-template-columns: 64px minmax(0, 1fr) 25px !important;
    gap: 10px !important;
  }

  html body .reviews-section .review-avatar.is-logo,
  html body .reviews-section .review-avatar.is-logo.is-dark {
    width: 64px !important;
    height: 48px !important;
    min-width: 64px !important;
    padding: 7px !important;
  }
}

/* v36 final cascade lock — keep v35 sizing and motion intact */
html body .reviews-section .review-avatar.is-logo.is-seal img {
  width: 68% !important;
  height: 68% !important;
  max-width: 68% !important;
  max-height: 68% !important;
  margin: auto !important;
  object-fit: contain !important;
}

html body.contact-page main section.contact-section .contact-simple .shopier-cta {
  grid-template-columns: 148px minmax(0, 1fr) 38px !important;
}

html body.contact-page main section.contact-section .contact-simple .shopier-cta .shopier-brand {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, .68) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 9px 24px rgba(3, 12, 28, .15) !important;
}

html body.contact-page main section.contact-section .contact-simple .shopier-cta .shopier-brand img {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  object-fit: contain !important;
}

html body.contact-page main section.contact-section .contact-simple .shopier-cta .shopier-brand em {
  color: #111827 !important;
  font-size: 1.02rem !important;
  font-style: normal !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
}

@media (max-width: 620px) {
  html body.contact-page main section.contact-section .contact-simple .shopier-cta {
    grid-template-columns: 116px minmax(0, 1fr) 28px !important;
  }

  html body.contact-page main section.contact-section .contact-simple .shopier-cta .shopier-brand {
    gap: 7px !important;
    padding: 7px 8px !important;
  }

  html body.contact-page main section.contact-section .contact-simple .shopier-cta .shopier-brand img {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
  }

  html body.contact-page main section.contact-section .contact-simple .shopier-cta .shopier-brand em {
    font-size: .84rem !important;
  }
}

/* 2026-07-17 — v46 final mobile overflow guard */
@media (max-width: 620px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .container,
  .site-footer,
  .site-header {
    width: min(100% - 20px, 1120px) !important;
    max-width: calc(100% - 20px) !important;
  }

  main,
  section,
  .section,
  .hero,
  .process-journey,
  .result-section,
  .service-section,
  .about-section,
  .contact-section,
  .performance-slider,
  .service-package-slider,
  .reference-showcase,
  .about-content,
  .contact-simple {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .hero-grid,
  .operation-showcase-grid,
  .process-journey-head,
  .process-journey-grid,
  .about-content,
  .about-confidence-row,
  .contact-cards,
  .contact-simple,
  .service-trust-note,
  .performance-slider-head,
  .performance-metrics,
  .channel-command-flow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  h1,
  .hero h1,
  .section-head h1,
  .process-journey-head h1,
  .about-content h1,
  .contact-section h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 9.5vw, 3rem) !important;
    line-height: 1.06 !important;
    overflow-wrap: anywhere !important;
  }

  h2,
  h3,
  p,
  strong,
  small,
  span,
  figcaption,
  a {
    overflow-wrap: anywhere !important;
  }

  .hero-ops-dashboard,
  .channel-sync-shell,
  .channel-sync-window,
  .feature-panel,
  .about-aside,
  .pricing-card,
  .review-card,
  .contact-card,
  .shopier-cta {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .ops-status-row {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .ops-status-row b {
    grid-column: 2 !important;
    justify-self: start !important;
    white-space: normal !important;
  }

  .channel-command-flow > i,
  .performance-metric-arrow {
    transform: rotate(90deg) !important;
    justify-self: center !important;
  }

  .organic-result {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .performance-track,
  .package-track {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
  }

  .performance-slide {
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .package-slide {
    flex: 0 0 min(88vw, 330px) !important;
    max-width: min(88vw, 330px) !important;
  }

  .performance-slide img,
  .performance-visual,
  .performance-window-body,
  .performance-window-body img {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .reference-showcase {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .reference-flow {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .reference-logo {
    width: clamp(136px, 42vw, 172px) !important;
    height: 76px !important;
  }

  .review-grid,
  .channel-logos,
  .channel-command-logos,
  .process-channel-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .review-grid,
  .contact-cards,
  .process-journey-grid,
  .about-confidence-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .channel-logo img,
  .channel-command-logos img,
  .reference-logo img {
    max-width: 86% !important;
    max-height: 74px !important;
    object-fit: contain !important;
  }

  .about-identity {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  .about-portrait {
    width: 88px !important;
    height: 88px !important;
  }

  html body.contact-page main section.contact-section .contact-simple {
    width: min(100% - 20px, 1180px) !important;
    max-width: calc(100% - 20px) !important;
    padding: 22px 16px !important;
  }

  .contact-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  html body.contact-page .shopier-cta,
  html body.contact-page main section.contact-section .contact-simple .shopier-cta,
  .shopier-cta {
    grid-template-columns: minmax(0, 1fr) 28px !important;
    padding: 14px !important;
  }

  .shopier-cta .shopier-brand,
  html body.contact-page main section.contact-section .contact-simple .shopier-cta .shopier-brand {
    grid-column: 1 / -1 !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  .whatsapp-float {
    right: 14px !important;
    bottom: 14px !important;
    width: 58px !important;
    height: 58px !important;
  }
}

/* 2026-07-17 — v47 mobile touch-scroll + header alignment fix */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }

  html body .site-header {
    left: auto !important;
    right: auto !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    transform: none !important;
    margin: 8px 10px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  html body .site-header .brand {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body .brand-logo {
    width: min(230px, calc(100vw - 96px)) !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  html body .nav-toggle {
    display: inline-flex !important;
    justify-self: end !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 44px !important;
  }

  html body .nav-menu {
    position: fixed !important;
    top: 78px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  html body .nav-menu.is-open {
    display: grid !important;
  }

  html body .nav-menu a {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    font-size: .92rem !important;
    line-height: 1.1 !important;
    padding: 10px 12px !important;
  }

  html body main,
  html body section,
  html body .section,
  html body .hero,
  html body .page-hero,
  html body .process-journey,
  html body .result-section,
  html body .service-section,
  html body .about-section,
  html body .contact-section,
  html body .performance-slider,
  html body .service-package-slider,
  html body .about-content,
  html body .contact-simple {
    touch-action: pan-y !important;
  }

  html body .hero-video,
  html body .hero-video-wrap,
  html body .hero::before,
  html body .hero::after {
    pointer-events: none !important;
  }

  html body .performance-track,
  html body .package-track {
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* 2026-07-17 — v48 mobile hero compression from recorded phone QA */
@media (max-width: 760px) {
  html body .nav-toggle span {
    width: 20px !important;
    height: 2px !important;
    background: #0b1838 !important;
    opacity: 1 !important;
    border-radius: 999px !important;
    display: block !important;
  }

  html body .hero {
    min-height: auto !important;
    padding: 88px 0 34px !important;
  }

  html body .hero .container {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }

  html body .hero .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
  }

  html body .hero .hero-grid > .reveal:first-child {
    max-width: 100% !important;
  }

  html body .hero-proof {
    display: flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 9px 13px !important;
    margin-bottom: 14px !important;
    border-radius: 999px !important;
  }

  html body .hero .hero-grid > .reveal:first-child .eyebrow {
    width: fit-content !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    margin: 0 0 13px !important;
    white-space: nowrap !important;
    font-size: clamp(.58rem, 2.45vw, .68rem) !important;
    line-height: 1.05 !important;
    letter-spacing: .02em !important;
  }

  html body .hero-proof span,
  html body .hero-proof strong {
    white-space: nowrap !important;
    font-size: clamp(.58rem, 2.45vw, .68rem) !important;
    line-height: 1.05 !important;
    letter-spacing: .02em !important;
  }

  html body .hero .hero-grid > .reveal:first-child h1,
  html body .hero h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 8.45vw, 2.28rem) !important;
    line-height: 1 !important;
    letter-spacing: -.055em !important;
    margin: 0 0 16px !important;
  }

  html body .hero h1 .hero-marker,
  html body .hero h1 .hero-marker-label {
    display: inline !important;
    line-height: inherit !important;
  }

  html body .hero .hero-text {
    max-width: 100% !important;
    font-size: clamp(.88rem, 3.55vw, .98rem) !important;
    line-height: 1.52 !important;
    margin: 0 0 22px !important;
  }

  html body .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-top: 0 !important;
    padding-right: 66px !important;
  }

  html body .hero-actions .btn {
    min-height: 50px !important;
    padding: 14px 16px !important;
    font-size: .94rem !important;
    width: 100% !important;
  }

  html body .hero-ops-dashboard {
    display: none !important;
  }

  html body .whatsapp-float {
    right: 12px !important;
    bottom: 12px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    font-size: .92rem !important;
  }
}

/* 2026-07-17 — v49 real mobile scroll unlock and compact floating menu */
html body.menu-open {
  overflow: visible !important;
  overflow-y: auto !important;
  position: static !important;
  height: auto !important;
}

@media (max-width: 760px) {
  html,
  body {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    touch-action: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body main,
  html body section,
  html body .hero,
  html body .page-hero,
  html body .about-section,
  html body .service-section,
  html body .process-journey,
  html body .contact-section {
    touch-action: auto !important;
  }

  html body .nav-menu {
    position: fixed !important;
    top: 76px !important;
    right: 12px !important;
    left: auto !important;
    width: min(232px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(11, 24, 56, .12) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 18px 44px rgba(11, 24, 56, .16) !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
    z-index: 60 !important;
  }

  html body .nav-menu.is-open {
    display: grid !important;
  }

  html body .nav-menu a {
    width: auto !important;
    min-height: 36px !important;
    padding: 9px 8px !important;
    border-radius: 12px !important;
    font-size: .76rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .nav-menu a:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* 2026-07-17 — v50 mobile marker animation off, zero scroll blockers */
@media (max-width: 760px) {
  html body .hero h1 .hero-marker,
  html body .hero h1 .hero-marker-label {
    animation: none !important;
    background: transparent !important;
    background-image: none !important;
    background-size: auto !important;
    will-change: auto !important;
    pointer-events: none !important;
    padding: 0 !important;
  }

  html body .hero h1 .hero-marker-bg {
    display: none !important;
  }

  html body .hero h1 .hero-marker.is-sweeping .hero-marker-label {
    animation: none !important;
  }

  html body.menu-open,
  html body.menu-open main,
  html body.menu-open .hero,
  html body.menu-open section {
    overflow: visible !important;
    overflow-y: auto !important;
    touch-action: auto !important;
  }
}

/* 2026-07-17 — v51 native mobile scroll, no JS interception */
@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    touch-action: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body *,
  html body main,
  html body section,
  html body .hero,
  html body .page-hero,
  html body .section,
  html body .container,
  html body .reveal {
    touch-action: auto !important;
  }

  html body .performance-track,
  html body .package-track,
  html body .reference-flow {
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body .hero-video-wrap,
  html body .hero-video {
    pointer-events: none !important;
  }

  html body .nav-menu {
    max-height: 42vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* 2026-07-17 — v52 remove nested mobile scroll containers */
@media (max-width: 760px) {
  html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100% !important;
  }

  body::before,
  body::after {
    pointer-events: none !important;
  }

  html body main,
  html body section,
  html body .section,
  html body .hero,
  html body .page-hero,
  html body .container,
  html body .hero-grid,
  html body .about-content,
  html body .contact-simple,
  html body .process-journey,
  html body .result-section,
  html body .service-section,
  html body .about-section,
  html body .contact-section,
  html body .performance-slider,
  html body .service-package-slider {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
    contain: none !important;
  }

  html body .reference-flow,
  html body .reference-showcase {
    overflow: hidden !important;
  }

  html body .performance-track,
  html body .package-track {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

/* 2026-07-17 — v53 compact mobile header and clean dropdown */
@media (max-width: 760px) {
  html body .site-header {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 0 !important;
    z-index: 120 !important;
  }

  html body .site-header .brand {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body .brand-logo {
    width: min(210px, calc(100vw - 92px)) !important;
    max-height: 34px !important;
    object-fit: contain !important;
  }

  html body .nav-toggle {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    justify-self: end !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(11, 24, 56, .10) !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: 0 10px 24px rgba(11, 24, 56, .08) !important;
    overflow: hidden !important;
  }

  html body .nav-toggle span {
    position: absolute !important;
    left: 11px !important;
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    display: block !important;
    border-radius: 999px !important;
    background: #0b1838 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body .nav-toggle span:nth-child(1) { top: 14px !important; }
  html body .nav-toggle span:nth-child(2) { top: 20px !important; }
  html body .nav-toggle span:nth-child(3) { top: 26px !important; }

  html body .nav-menu {
    position: fixed !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 64px) !important;
    right: 10px !important;
    left: auto !important;
    width: min(186px, calc(100vw - 20px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
    display: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(11, 24, 56, .12) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 16px 38px rgba(11, 24, 56, .18) !important;
    backdrop-filter: blur(18px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
    z-index: 119 !important;
    overflow: visible !important;
    max-height: none !important;
  }

  html body .nav-menu.is-open {
    display: grid !important;
  }

  html body .nav-menu a {
    width: 100% !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    border-radius: 11px !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  html body .nav-menu a:last-child {
    grid-column: auto !important;
  }
}

/* 2026-07-17 — v54 in-flow mobile header, no content overlay */
@media (max-width: 760px) {
  html body .site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: calc(100% - 20px) !important;
    min-height: 58px !important;
    margin: 10px 10px 0 !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    transform: none !important;
    border-radius: 0 !important;
    z-index: 30 !important;
  }

  html body .nav-menu {
    position: static !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 0 !important;
    padding: 7px !important;
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(11, 24, 56, .10) !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
    backdrop-filter: blur(12px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
    overflow: visible !important;
    max-height: none !important;
    z-index: auto !important;
  }

  html body .nav-menu.is-open {
    display: grid !important;
  }

  html body .nav-menu a {
    min-height: 34px !important;
    padding: 8px 9px !important;
    justify-content: center !important;
    font-size: .75rem !important;
    line-height: 1 !important;
    border-radius: 10px !important;
  }

  html body .nav-menu a:last-child {
    grid-column: 1 / -1 !important;
  }

  html body .hero {
    padding-top: 28px !important;
  }

  html body .page-hero {
    padding-top: 46px !important;
  }
}

/* 2026-07-17 — v55 full-bleed soft mobile header edges */
@media (max-width: 760px) {
  html body .site-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px 18px 16px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 14px 34px rgba(11, 24, 56, .10), inset 0 -1px 0 rgba(11,24,56,.06) !important;
  }

  html body .nav-toggle {
    border-radius: 15px !important;
  }

  html body .nav-menu {
    margin-top: 10px !important;
    padding: 8px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 26px rgba(11,24,56,.08) !important;
  }

  html body .nav-menu a {
    border-radius: 13px !important;
  }

  html body .hero {
    padding-top: 34px !important;
  }
}


/* v20260727 blog + footer + mega menu additions */
.nav-menu { align-items: center; }
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item > a { display: inline-flex; min-height: 42px; align-items: center; border: 1px solid transparent; border-radius: 8px; padding: 0 13px; color: var(--muted); font-size: .93rem; font-weight: 750; }
.nav-item.active-parent > a,
.nav-item > a:hover,
.nav-item:focus-within > a { border-color: var(--line); background: rgba(47,111,143,.07); color: var(--blue-deep); }
.mega-menu {
  position: fixed;
  top: 96px;
  left: 50%;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 320px;
  width: min(980px, calc(100vw - 40px));
  overflow: hidden;
  transform: translateX(-50%) translateY(10px);
  border: 1px solid rgba(18,45,70,.14);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 34px 90px rgba(6,18,35,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(24px) saturate(1.15);
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-main { padding: 26px; }
.mega-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--ink); text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; font-weight: 900; }
.mega-top small { margin-left: auto; color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 800; }
.mega-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #0b1730; color: white; letter-spacing: 0; font-size: .78rem; }
.mega-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.mega-cards a { display: grid; grid-template-columns: 52px 1fr; gap: 12px; min-height: 88px; padding: 16px; border: 1px solid rgba(19,45,74,.12); border-radius: 18px; background: rgba(248,251,253,.88); color: var(--ink); }
.mega-cards b { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: #0c1932; color: white; }
.mega-cards strong { display: block; font-size: 1rem; }
.mega-cards small { display: block; margin-top: 4px; color: #63738a; line-height: 1.35; }
.mega-modules { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 24px; margin-top: 16px; padding: 18px; border: 1px solid rgba(19,45,74,.1); border-radius: 18px; background: rgba(244,248,251,.82); }
.mega-modules strong { display: block; color: var(--ink); }
.mega-modules small { display: block; margin-top: 4px; color: #64748b; }
.mega-side { padding: 30px 26px; background: radial-gradient(circle at top right, rgba(61,83,130,.46), transparent 42%), #08172f; color: white; }
.mega-badge { display: inline-flex; margin-bottom: 42px; padding: 8px 18px; border-radius: 999px; background: #f2b705; color: #071426; font-size: .8rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.mega-side h3 { margin: 0 0 14px; font-size: 1.65rem; line-height: 1.05; }
.mega-side p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.6; }
.mega-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }
.mega-stats strong, .mega-stats span { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.08); }
.mega-stats strong { font-size: 1.35rem; }
.mega-stats span { color: rgba(255,255,255,.66); font-weight: 800; }
.mega-cta { display: flex; justify-content: center; align-items: center; min-height: 54px; border-radius: 14px; background: white; color: #08172f !important; font-weight: 950; }

.enhanced-footer {
  display: block !important;
  width: 100% !important;
  margin-top: 0;
  padding: 0 !important;
  color: rgba(226,235,246,.72);
  background: radial-gradient(circle at 85% 20%, rgba(30,84,91,.28), transparent 34%), linear-gradient(180deg, #081326, #071224);
}
.footer-solutions,
.footer-bottom { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.footer-solutions { display: grid; grid-template-columns: 240px 1fr; gap: 34px; padding: 58px 0 60px; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-kicker { margin: 0 0 10px; color: #f2c44f; font-size: .86rem; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
.footer-solutions h2 { margin: 0; color: rgba(226,235,246,.82); font-size: 1.28rem; line-height: 1.45; font-weight: 600; }
.footer-solution-links { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-solution-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(255,255,255,.045); color: white; font-weight: 850; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.footer-solution-links span { color: #f2c44f; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0 34px; color: rgba(226,235,246,.56); }
.footer-bottom strong { color: white; }
.footer-bottom p { margin: 0; }
.footer-bottom div { display: flex; gap: 20px; }
.footer-bottom a { color: rgba(226,235,246,.66); }

.blog-hero { padding: 156px 0 74px; background: radial-gradient(circle at 82% 22%, rgba(36,93,98,.18), transparent 34%), linear-gradient(180deg, #f8fafb 0%, #eef4f5 100%); }
.blog-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 42px; align-items: center; }
.blog-hero h1 { max-width: 780px; margin: 0; color: var(--ink); font-size: clamp(3rem, 6vw, 5.8rem); line-height: .98; letter-spacing: -.07em; }
.blog-hero-panel { padding: 30px; border: 1px solid rgba(12,28,50,.12); border-radius: 30px; background: rgba(255,255,255,.72); box-shadow: 0 28px 80px rgba(8,19,38,.1); backdrop-filter: blur(22px); }
.blog-hero-panel span { display: inline-flex; margin-bottom: 72px; color: #b88b23; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.blog-hero-panel h2 { margin: 0 0 22px; font-size: 1.75rem; color: var(--ink); line-height: 1.12; }
.blog-hero-panel a { display: inline-flex; color: #0d5060; font-weight: 950; }
.blog-category-strip { padding: 24px 0; background: #081326; color: white; }
.blog-category-inner { display: flex; gap: 24px; align-items: center; }
.blog-category-inner strong { color: #f2c44f; text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; }
.blog-category-inner nav { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.blog-category-inner a { white-space: nowrap; padding: 11px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.055); font-weight: 850; }
.blog-list-section { background: #f7f9fa; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.blog-card { min-height: 360px; border: 1px solid rgba(13,37,60,.1); border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: 0 22px 70px rgba(12,31,52,.08); overflow: hidden; }
.blog-card > a { display: flex; flex-direction: column; height: 100%; padding: 28px; }
.blog-card-featured { grid-column: span 2; background: radial-gradient(circle at 90% 15%, rgba(24,91,91,.16), transparent 30%), white; }
.blog-card-kicker { color: #b88b23; font-size: .82rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.blog-card h2 { margin: 18px 0 12px; color: var(--ink); font-size: clamp(1.65rem, 3vw, 2.8rem); line-height: 1.02; letter-spacing: -.045em; }
.blog-card p { margin: 0; color: #5f6f80; line-height: 1.65; }
.blog-meta { display: flex; gap: 12px; margin: auto 0 16px; color: #778599; font-weight: 800; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tags span { padding: 8px 12px; border-radius: 999px; background: #edf5f2; color: #386b58; font-size: .84rem; font-weight: 850; }
.article-shell { padding: 150px 0 80px; background: linear-gradient(180deg, #f8fafb, #eef4f5); }
.article-back { display: inline-flex; margin-bottom: 30px; color: #0d5060; font-weight: 950; }
.article-head { max-width: 880px; }
.article-head h1 { margin: 0; color: var(--ink); font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.07em; }
.article-head > p { color: #627286; font-size: 1.25rem; line-height: 1.7; }
.article-content { max-width: 820px; margin-top: 44px; padding: 44px; border: 1px solid rgba(12,38,60,.1); border-radius: 32px; background: rgba(255,255,255,.86); box-shadow: 0 28px 80px rgba(7,22,41,.08); }
.article-content h2 { margin: 34px 0 12px; color: var(--ink); font-size: 2rem; letter-spacing: -.035em; }
.article-content h2:first-child { margin-top: 0; }
.article-content p { color: #5f6f80; font-size: 1.05rem; line-height: 1.85; }
.article-faq { margin-top: 40px; }
.article-faq details { border-top: 1px solid rgba(12,38,60,.1); padding: 18px 0; }
.article-faq summary { cursor: pointer; color: var(--ink); font-weight: 900; }
.article-cta { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 34px; padding: 22px; border-radius: 22px; background: #081326; color: white; }
.article-cta a { color: #b8efe6; font-weight: 950; }

@media (max-width: 980px) {
  .mega-menu { display: none !important; }
  .blog-hero-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .blog-card-featured { grid-column: span 2; }
  .footer-solutions { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav-item { display: block; width: 100%; }
  .nav-item > a { justify-content: center; width: 100%; }
  .blog-hero { padding-top: 128px; }
  .blog-category-inner { align-items: flex-start; flex-direction: column; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-featured { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .article-content { padding: 26px; }
  .article-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 460px) {
  .footer-solutions,
  .footer-bottom { width: min(100% - 24px, 1120px) !important; }
  .footer-solution-links a { width: 100%; justify-content: space-between; }
  .blog-hero h1,
  .article-head h1 { letter-spacing: -.055em; }
}

/* v20260727 blog/footer refinement: smaller editorial type + slimmer original footer */
html body .blog-hero { padding: 138px 0 54px !important; }
html body .blog-hero h1 {
  max-width: 720px !important;
  font-size: clamp(2.25rem, 4.6vw, 4.35rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -.055em !important;
}
html body .blog-hero .section-text {
  max-width: 680px !important;
  font-size: 1.02rem !important;
  line-height: 1.72 !important;
}
html body .blog-hero-panel {
  padding: 24px !important;
  border-radius: 24px !important;
}
html body .blog-hero-panel span { margin-bottom: 42px !important; font-size: .76rem !important; }
html body .blog-hero-panel h2 { font-size: 1.36rem !important; line-height: 1.18 !important; }
html body .blog-list-section { padding-top: 58px !important; }
html body .blog-grid { gap: 16px !important; }
html body .blog-card { min-height: 294px !important; border-radius: 24px !important; }
html body .blog-card > a { padding: 24px !important; }
html body .blog-card-kicker { font-size: .74rem !important; letter-spacing: .14em !important; }
html body .blog-card h2 {
  margin: 14px 0 10px !important;
  font-size: clamp(1.28rem, 2.1vw, 2.05rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
}
html body .blog-card p {
  font-size: .94rem !important;
  line-height: 1.58 !important;
}
html body .blog-meta { margin: auto 0 12px !important; font-size: .86rem !important; }
html body .blog-tags span {
  padding: 6px 10px !important;
  font-size: .76rem !important;
}
html body .article-shell { padding: 136px 0 66px !important; }
html body .article-head { max-width: 780px !important; }
html body .article-head h1 {
  font-size: clamp(2.15rem, 4.8vw, 4.15rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
}
html body .article-head > p {
  max-width: 710px !important;
  font-size: 1.05rem !important;
  line-height: 1.68 !important;
}
html body .article-content {
  max-width: 760px !important;
  margin-top: 34px !important;
  padding: 34px !important;
  border-radius: 26px !important;
}
html body .article-content h2 {
  margin: 28px 0 10px !important;
  font-size: 1.55rem !important;
}
html body .article-content p {
  font-size: .98rem !important;
  line-height: 1.76 !important;
}

html body .enhanced-footer {
  color: #64748b !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(31,77,80,.08), transparent 28%),
    linear-gradient(180deg, rgba(248,250,251,.98), rgba(238,244,246,.96)) !important;
  border-top: 1px solid rgba(12,38,60,.08) !important;
}
html body .footer-solutions,
html body .footer-bottom {
  width: min(1120px, calc(100% - 32px)) !important;
}
html body .footer-solutions {
  grid-template-columns: 210px 1fr !important;
  gap: 28px !important;
  padding: 26px 0 24px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(12,38,60,.08) !important;
}
html body .footer-kicker {
  margin-bottom: 6px !important;
  color: #0f5a60 !important;
  font-size: .72rem !important;
  letter-spacing: .15em !important;
}
html body .footer-solutions h2 {
  max-width: 190px !important;
  color: #526275 !important;
  font-size: .98rem !important;
  line-height: 1.42 !important;
  font-weight: 650 !important;
}
html body .footer-solution-links {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
html body .footer-solution-links a {
  position: relative !important;
  min-height: 36px !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(15,90,96,.12) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(239,247,247,.64)) !important;
  color: #0d2138 !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}
html body .footer-solution-links a::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  background: #1f8a80 !important;
  opacity: .72 !important;
}
html body .footer-solution-links a span {
  margin-left: auto !important;
  color: #0f5a60 !important;
  font-size: .82rem !important;
}
html body .footer-bottom {
  padding: 18px 0 22px !important;
  font-size: .9rem !important;
}
html body .footer-bottom strong { color: #0d2138 !important; }
html body .footer-bottom p { color: #64748b !important; }
html body .footer-bottom a { color: #0f5a60 !important; font-weight: 800 !important; }

@media (max-width: 980px) {
  html body .footer-solutions {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body .footer-solutions h2 { max-width: 100% !important; }
  html body .footer-solution-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  html body .blog-hero { padding: 120px 0 44px !important; }
  html body .blog-hero h1,
  html body .article-head h1 { font-size: clamp(2rem, 10vw, 3rem) !important; }
  html body .article-content { padding: 24px !important; }
  html body .footer-bottom { gap: 10px !important; }
}
@media (max-width: 520px) {
  html body .footer-solution-links { grid-template-columns: 1fr !important; }
  html body .footer-solution-links a { min-height: 38px !important; }
}

/* v20260727 mega menu refinement */
html body .nav-menu > a,
html body .nav-menu .nav-item > a {
  color: #0c1932 !important;
  font-weight: 850 !important;
  opacity: 1 !important;
}
html body .nav-menu > a:hover,
html body .nav-menu > a.active,
html body .nav-menu .nav-item:hover > a,
html body .nav-menu .nav-item:focus-within > a,
html body .nav-menu .nav-item.active-parent > a {
  border-color: rgba(12, 32, 58, .12) !important;
  background: rgba(235, 243, 250, .88) !important;
  color: #0b1730 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7) !important;
}
html body .has-mega::after {
  content: "" !important;
  position: fixed !important;
  top: 72px !important;
  left: 0 !important;
  right: 0 !important;
  height: 42px !important;
  display: none !important;
  z-index: 44 !important;
}
html body .has-mega:hover::after,
html body .has-mega:focus-within::after {
  display: block !important;
}
html body .mega-menu {
  top: 82px !important;
  grid-template-columns: minmax(0, 1fr) 306px !important;
  width: min(930px, calc(100vw - 36px)) !important;
  border-radius: 22px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(12, 32, 58, .14) !important;
  box-shadow: 0 28px 72px rgba(5, 16, 32, .22) !important;
  transform: translateX(-50%) translateY(8px) !important;
}
html body .has-mega:hover .mega-menu,
html body .has-mega:focus-within .mega-menu {
  transform: translateX(-50%) translateY(0) !important;
}
html body .mega-main {
  padding: 20px !important;
}
html body .mega-top {
  min-height: 42px !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(12, 32, 58, .08) !important;
  color: #0b1730 !important;
  font-size: .78rem !important;
  letter-spacing: .18em !important;
}
html body .mega-top small {
  color: #60718a !important;
  font-size: .82rem !important;
}
html body .mega-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: #0b1730 !important;
  font-size: .72rem !important;
}
html body .mega-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
html body .mega-cards a {
  min-height: 92px !important;
  grid-template-columns: 46px 1fr !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(12, 32, 58, .11) !important;
  background: linear-gradient(145deg, #ffffff, #f4f8fb) !important;
  color: #0b1730 !important;
  box-shadow: 0 8px 26px rgba(13, 34, 55, .045) !important;
}
html body .mega-cards a:hover {
  border-color: rgba(20, 80, 92, .22) !important;
  background: linear-gradient(145deg, #ffffff, #eef7f7) !important;
}
html body .mega-cards b {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  background: #0b1730 !important;
  font-size: .88rem !important;
}
html body .mega-cards strong {
  max-width: 100% !important;
  overflow: hidden !important;
  color: #0b1730 !important;
  font-size: .98rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
html body .mega-cards small {
  margin-top: 5px !important;
  color: #63738a !important;
  font-size: .84rem !important;
  line-height: 1.35 !important;
}
html body .mega-cards em {
  display: inline-flex !important;
  margin-top: 8px !important;
  color: #0f6470 !important;
  font-size: .78rem !important;
  font-style: normal !important;
  font-weight: 900 !important;
}
html body .mega-modules {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 22px !important;
  margin-top: 12px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: #f1f5f8 !important;
}
html body .mega-modules strong {
  color: #0b1730 !important;
  font-size: .92rem !important;
}
html body .mega-modules small {
  color: #64748b !important;
  font-size: .8rem !important;
}
html body .mega-side {
  padding: 24px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(37, 83, 118, .38), transparent 34%),
    linear-gradient(180deg, #09172e, #061127) !important;
  color: white !important;
  border-left: 1px solid rgba(255,255,255,.06) !important;
}
html body .mega-badge {
  margin-bottom: 34px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  background: #f3b90b !important;
  color: #081326 !important;
  font-size: .74rem !important;
  letter-spacing: .16em !important;
}
html body .mega-side h3 {
  max-width: 240px !important;
  color: #ffffff !important;
  font-size: 1.36rem !important;
  line-height: 1.1 !important;
}
html body .mega-side p {
  color: rgba(235, 242, 250, .76) !important;
  font-size: .92rem !important;
  line-height: 1.55 !important;
}
html body .mega-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 20px 0 22px !important;
}
html body .mega-stats span {
  display: block !important;
  min-height: 66px !important;
  padding: 11px !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(235, 242, 250, .72) !important;
}
html body .mega-stats strong {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}
html body .mega-stats small {
  display: block !important;
  margin-top: 6px !important;
  color: rgba(235, 242, 250, .64) !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
html body .mega-cta {
  min-height: 48px !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #081326 !important;
  font-size: .93rem !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.16) !important;
}

@media (max-width: 980px) {
  html body .has-mega::after { display: none !important; }
}


/* v20260727 mega/footer final compact fix */
html body .nav-menu > a,
html body .nav-menu .nav-item > a {
  color: #0b1730 !important;
  opacity: 1 !important;
  font-weight: 880 !important;
}
html body .nav-menu .has-mega > a::after {
  content: "⌄";
  margin-left: 6px;
  font-size: .82em;
  opacity: .74;
}
html body .has-mega::after {
  content: "" !important;
  position: fixed !important;
  top: 70px !important;
  left: 0 !important;
  right: 0 !important;
  height: 32px !important;
  z-index: 44 !important;
  display: none !important;
}
html body .has-mega:hover::after,
html body .has-mega:focus-within::after { display: block !important; }
html body .mega-menu {
  top: 78px !important;
  width: min(860px, calc(100vw - 40px)) !important;
  max-height: min(520px, calc(100vh - 112px)) !important;
  grid-template-columns: minmax(0, 1fr) 270px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: #fbfcfe !important;
  border: 1px solid rgba(13, 34, 58, .16) !important;
  box-shadow: 0 24px 64px rgba(4, 16, 32, .22) !important;
}
html body .mega-main { padding: 16px !important; }
html body .mega-top {
  min-height: 34px !important;
  margin: 0 0 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(13,34,58,.08) !important;
  color: #0b1730 !important;
  font-size: .72rem !important;
  letter-spacing: .17em !important;
}
html body .mega-top small { color: #66758a !important; font-size: .78rem !important; }
html body .mega-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; font-size: .68rem !important; }
html body .mega-cards { gap: 8px !important; }
html body .mega-cards a {
  min-height: 78px !important;
  grid-template-columns: 38px 1fr !important;
  gap: 10px !important;
  padding: 11px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #ffffff, #f5f8fb) !important;
}
html body .mega-cards b {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  font-size: .78rem !important;
}
html body .mega-cards strong {
  font-size: .92rem !important;
  line-height: 1.08 !important;
}
html body .mega-cards small {
  margin-top: 3px !important;
  font-size: .77rem !important;
  line-height: 1.25 !important;
}
html body .mega-cards em {
  margin-top: 5px !important;
  font-size: .72rem !important;
}
html body .mega-modules {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #f1f5f8 !important;
}
html body .mega-modules strong { font-size: .78rem !important; }
html body .mega-modules small { margin-top: 2px !important; font-size: .7rem !important; line-height: 1.25 !important; }
html body .mega-side {
  padding: 20px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(50, 91, 132, .34), transparent 36%),
    linear-gradient(180deg, #0a1730, #061127) !important;
  color: #fff !important;
}
html body .mega-badge {
  margin-bottom: 22px !important;
  padding: 6px 13px !important;
  font-size: .68rem !important;
}
html body .mega-side h3 {
  max-width: 220px !important;
  font-size: 1.14rem !important;
  line-height: 1.12 !important;
}
html body .mega-side p {
  font-size: .82rem !important;
  line-height: 1.48 !important;
}
html body .mega-stats {
  gap: 7px !important;
  margin: 14px 0 16px !important;
}
html body .mega-stats span {
  min-height: 54px !important;
  padding: 9px !important;
  border-radius: 11px !important;
}
html body .mega-stats strong { font-size: 1.05rem !important; }
html body .mega-stats small { margin-top: 4px !important; font-size: .62rem !important; }
html body .mega-cta {
  min-height: 42px !important;
  border-radius: 12px !important;
  font-size: .82rem !important;
}

html body .enhanced-footer {
  color: rgba(226,235,246,.72) !important;
  background:
    radial-gradient(circle at 86% 24%, rgba(30,84,91,.24), transparent 32%),
    linear-gradient(180deg, #081326, #071224) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
html body .footer-solutions {
  grid-template-columns: 205px 1fr !important;
  gap: 22px !important;
  padding: 20px 0 18px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
html body .footer-kicker {
  color: #f2c44f !important;
  font-size: .7rem !important;
  letter-spacing: .16em !important;
}
html body .footer-solutions h2 {
  max-width: 180px !important;
  color: rgba(226,235,246,.72) !important;
  font-size: .92rem !important;
  line-height: 1.4 !important;
}
html body .footer-solution-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html body .footer-solution-links a {
  min-height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.065) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.08) !important;
  backdrop-filter: blur(14px) saturate(1.18) !important;
}
html body .footer-solution-links a::before {
  content: none !important;
}
html body .footer-solution-links a span {
  color: #f2c44f !important;
  font-size: .78rem !important;
}
html body .footer-bottom {
  padding: 14px 0 18px !important;
  color: rgba(226,235,246,.56) !important;
  font-size: .86rem !important;
}
html body .footer-bottom strong { color: rgba(255,255,255,.92) !important; }
html body .footer-bottom p { color: rgba(226,235,246,.56) !important; }
html body .footer-bottom a { color: rgba(226,235,246,.72) !important; }

@media (max-width: 980px) {
  html body .mega-menu,
  html body .has-mega::after { display: none !important; }
  html body .footer-solutions { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  html body .footer-solution-links a { min-height: 36px !important; }
}

/* v20260727 hero text scale + mobile operation panel fix */
html body .hero .hero-grid {
  grid-template-columns: minmax(0, 1.06fr) minmax(390px, .78fr) !important;
  gap: clamp(28px, 4vw, 56px) !important;
  align-items: center !important;
}

html body .hero .hero-grid > .reveal:first-child h1,
html body .hero h1 {
  max-width: 830px !important;
  font-size: clamp(2.75rem, 4.85vw, 5.65rem) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
}

html body .hero .hero-text {
  max-width: 800px !important;
  font-size: clamp(.98rem, 1.06vw, 1.12rem) !important;
  line-height: 1.55 !important;
}

html body .hero .eyebrow {
  font-size: clamp(.72rem, .78vw, .86rem) !important;
}

html body .hero .hero-ops-dashboard {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 510px !important;
  margin-left: auto !important;
  transform: none !important;
}

@media (max-width: 1180px) {
  html body .hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  html body .hero .hero-grid > .reveal:first-child {
    max-width: 860px !important;
  }

  html body .hero .hero-grid > .reveal:first-child h1,
  html body .hero h1 {
    max-width: 860px !important;
    font-size: clamp(2.65rem, 7.1vw, 4.9rem) !important;
  }

  html body .hero .hero-ops-dashboard {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    margin: 4px auto 0 !important;
  }
}

@media (max-width: 760px) {
  html body .hero {
    padding-top: 32px !important;
    padding-bottom: 44px !important;
  }

  html body .hero .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    overflow: visible !important;
  }

  html body .hero .hero-grid > .reveal:first-child h1,
  html body .hero h1 {
    max-width: 100% !important;
    font-size: clamp(1.88rem, 8vw, 2.42rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -.052em !important;
    margin-bottom: 15px !important;
  }

  html body .hero .hero-text {
    max-width: 100% !important;
    font-size: clamp(.86rem, 3.35vw, .96rem) !important;
    line-height: 1.52 !important;
    margin-bottom: 20px !important;
  }

  html body .hero-actions {
    padding-right: 64px !important;
  }

  html body .hero .hero-ops-dashboard {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
    transform: none !important;
  }

  html body .hero .ops-dashboard-head {
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  html body .hero .ops-dashboard-kicker {
    font-size: .64rem !important;
    letter-spacing: .11em !important;
  }

  html body .hero .ops-dashboard-head h2 {
    font-size: clamp(1rem, 4.6vw, 1.25rem) !important;
    line-height: 1.08 !important;
  }

  html body .hero .ops-live {
    flex: 0 0 auto !important;
    padding: 6px 9px !important;
    font-size: .68rem !important;
  }

  html body .hero .ops-status-list {
    gap: 7px !important;
  }

  html body .hero .ops-status-row {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    gap: 9px !important;
    min-height: 54px !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }

  html body .hero .ops-status-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  html body .hero .ops-status-row strong {
    font-size: .8rem !important;
    line-height: 1.12 !important;
  }

  html body .hero .ops-status-row small {
    margin-top: 2px !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
  }

  html body .hero .ops-status-row b {
    padding: 5px 7px !important;
    font-size: .62rem !important;
    border-radius: 999px !important;
  }

  html body .hero .ops-dashboard-flow {
    display: none !important;
  }

  html body .whatsapp-float {
    right: 12px !important;
    bottom: 14px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 15px !important;
    font-size: .9rem !important;
  }
}

@media (max-width: 430px) {
  html body .hero .hero-grid > .reveal:first-child h1,
  html body .hero h1 {
    font-size: clamp(1.78rem, 7.7vw, 2.16rem) !important;
  }

  html body .hero .hero-ops-dashboard {
    padding: 12px !important;
  }

  html body .hero .ops-status-row {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  html body .hero .ops-status-row b {
    display: none !important;
  }
}

/* v20260727 hero text REAL smaller correction */
html body .hero .hero-grid > .reveal:first-child h1,
html body .hero h1 {
  max-width: 760px !important;
  font-size: clamp(2.35rem, 3.9vw, 4.35rem) !important;
  line-height: 1 !important;
  letter-spacing: -.058em !important;
}

html body .hero .hero-text {
  max-width: 720px !important;
  font-size: clamp(.9rem, .96vw, 1.02rem) !important;
  line-height: 1.55 !important;
}

html body .hero .eyebrow {
  font-size: clamp(.68rem, .7vw, .8rem) !important;
}

@media (max-width: 1180px) {
  html body .hero .hero-grid > .reveal:first-child h1,
  html body .hero h1 {
    max-width: 760px !important;
    font-size: clamp(2.2rem, 5.4vw, 3.75rem) !important;
  }
}

@media (max-width: 760px) {
  html body .hero .hero-grid > .reveal:first-child h1,
  html body .hero h1 {
    max-width: 100% !important;
    font-size: clamp(1.62rem, 6.65vw, 2rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.046em !important;
  }

  html body .hero .hero-text {
    font-size: clamp(.78rem, 3.05vw, .88rem) !important;
    line-height: 1.48 !important;
  }
}

/* v20260727 hero headline aggressive downscale */
html body .hero .hero-grid > .reveal:first-child h1,
html body .hero h1 {
  max-width: 660px !important;
  font-size: clamp(2rem, 3vw, 3.35rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}

html body .hero .hero-text {
  max-width: 650px !important;
  font-size: clamp(.84rem, .84vw, .94rem) !important;
  line-height: 1.55 !important;
}

html body .hero .eyebrow {
  font-size: clamp(.62rem, .62vw, .72rem) !important;
}

@media (max-width: 1180px) {
  html body .hero .hero-grid > .reveal:first-child h1,
  html body .hero h1 {
    max-width: 640px !important;
    font-size: clamp(1.85rem, 4.35vw, 3.05rem) !important;
  }
}

@media (max-width: 760px) {
  html body .hero .hero-grid > .reveal:first-child h1,
  html body .hero h1 {
    max-width: 100% !important;
    font-size: clamp(1.34rem, 5.55vw, 1.66rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  html body .hero .hero-text {
    font-size: clamp(.72rem, 2.82vw, .8rem) !important;
    line-height: 1.5 !important;
  }

  html body .hero .eyebrow {
    font-size: clamp(.54rem, 2.15vw, .62rem) !important;
  }
}

/* v20260727 reliable services mega hover */
html body .has-mega.mega-open::after {
  display: block !important;
}

html body .has-mega.mega-open .mega-menu,
html body .has-mega:hover .mega-menu,
html body .has-mega:focus-within .mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

html body .mega-menu {
  visibility: hidden !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

html body .has-mega.mega-open > a,
html body .has-mega:hover > a,
html body .has-mega:focus-within > a {
  border-color: rgba(13, 34, 58, .16) !important;
  background: rgba(47,111,143,.08) !important;
  color: #0b1730 !important;
}

@media (min-width: 981px) {
  html body .has-mega::after {
    top: 58px !important;
    height: 64px !important;
  }
}

@media (max-width: 980px) {
  html body .has-mega.mega-open .mega-menu {
    display: none !important;
  }
}

/* v20260727 clean active nav state - no shine */
html body .nav-menu a.active,
html body .nav-menu .nav-item.active-parent > a {
  color: #0b1730 !important;
  background: rgba(255, 255, 255, .54) !important;
  background-image: none !important;
  border-color: rgba(11, 24, 56, .12) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body .nav-menu a.active::before,
html body .nav-menu a.active::after,
html body .nav-menu .nav-item.active-parent > a::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body .nav-menu a:hover {
  background: rgba(255, 255, 255, .46) !important;
  background-image: none !important;
  border-color: rgba(11, 24, 56, .12) !important;
  box-shadow: none !important;
  color: #0b1730 !important;
}

@media (max-width: 760px) {
  html body .nav-menu a.active {
    background: rgba(239, 244, 251, .72) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px rgba(11, 24, 56, .06) !important;
  }
}