:root {
  color-scheme: dark;
  --ink: #f3f8ff;
  --soft: #d9e7f4;
  --muted: #a6b8c8;
  --page: #101b2c;
  --page-deep: #08101b;
  --panel: #1b2d43;
  --panel-deep: #162437;
  --panel-strong: #243a54;
  --line: rgba(159, 216, 244, 0.42);
  --line-strong: #9fd8f4;
  --blue: #1093d6;
  --blue-strong: #087abc;
  --blue-soft: rgba(16, 147, 214, 0.2);
  --cyan: #79d5df;
  --green: #66bf75;
  --amber: #f4c762;
  --shadow: 3px 3px 0 rgba(2, 8, 16, 0.45);
  --header-height: 82px;
  --page-pad: clamp(18px, 5vw, 72px);
  font-family: "Space Mono", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(121, 213, 223, 0.09), transparent 26%),
    radial-gradient(circle at 88% 10%, rgba(102, 191, 117, 0.055), transparent 24%),
    linear-gradient(180deg, var(--page) 0%, #0b1422 72%, var(--page-deep) 100%);
  color: var(--ink);
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
}

body::before {
  background-image:
    radial-gradient(circle, rgba(159, 216, 244, 0.16) 0 1px, transparent 1.5px),
    linear-gradient(90deg, transparent 0 47px, rgba(159, 216, 244, 0.038) 47px 48px, transparent 48px 96px),
    linear-gradient(0deg, transparent 0 47px, rgba(159, 216, 244, 0.034) 47px 48px, transparent 48px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 7px);
  background-position: 14px 18px, 0 0, 0 0, 0 0;
  background-size: 96px 96px, 96px 96px, 96px 96px, auto;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.78) 58%, rgba(0, 0, 0, 0.35) 100%);
}

body::after {
  background-image:
    linear-gradient(90deg, transparent 0 23px, rgba(244, 199, 98, 0.045) 23px 24px, transparent 24px 128px),
    linear-gradient(0deg, transparent 0 31px, rgba(121, 213, 223, 0.038) 31px 32px, transparent 32px 128px);
  background-size: 128px 128px;
  opacity: 0.32;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

main {
  overflow: hidden;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: var(--header-height);
  border-bottom: 3px solid var(--line-strong);
  background: rgba(8, 16, 27, 0.94);
  box-shadow: 0 4px 0 rgba(2, 8, 16, 0.42);
  padding: 12px clamp(18px, 4vw, 54px);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 172px;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.nav,
.footer-nav,
.footer-contact,
.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
}

.nav {
  justify-content: center;
  gap: 8px;
}

.nav a,
.header-cta,
.secondary-action,
.primary-action {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  overflow: hidden;
  border: 3px solid var(--line-strong);
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: 11px 15px;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  text-transform: uppercase;
}

.nav a,
.secondary-action {
  background: rgba(27, 45, 67, 0.74);
  color: var(--soft);
}

.nav a:hover,
.nav a:focus,
.secondary-action:hover,
.secondary-action:focus {
  color: var(--amber);
}

.header-cta,
.primary-action {
  border-color: #aee5ff;
  background: linear-gradient(180deg, #17a0e0, var(--blue));
  color: #fff;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.header-cta:hover,
.header-cta:focus-visible,
.primary-action:hover,
.primary-action:focus-visible {
  background: linear-gradient(180deg, #118ed0, var(--blue-strong));
  transform: translate(1px, 1px);
}

.header-cta::before,
.primary-action::before {
  position: absolute;
  inset: 5px auto 5px 5px;
  z-index: -1;
  width: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(244, 199, 98, 0.28));
  content: "";
  transition: width 220ms steps(5, end);
}

.header-cta::after,
.primary-action::after {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 10px;
  height: 4px;
  background: rgba(244, 199, 98, 0.85);
  box-shadow:
    -14px 0 0 rgba(244, 199, 98, 0.45),
    -28px 0 0 rgba(244, 199, 98, 0.22);
  content: "";
  opacity: 0;
  transition: opacity 120ms ease;
}

.header-cta:hover::before,
.header-cta:focus-visible::before,
.primary-action:hover::before,
.primary-action:focus-visible::before {
  width: calc(100% - 10px);
}

.header-cta:hover::after,
.header-cta:focus-visible::after,
.primary-action:hover::after,
.primary-action:focus-visible::after {
  opacity: 1;
}

.menu-toggle {
  display: none;
  border: 3px solid var(--line-strong);
  border-radius: 0;
  background: rgba(27, 45, 67, 0.74);
  box-shadow: var(--shadow);
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr);
  grid-template-areas: "copy dynamic";
  align-items: center;
  gap: clamp(34px, 5vw, 72px);
  min-height: calc(100vh - var(--header-height));
  padding: clamp(58px, 8vw, 112px) var(--page-pad) clamp(44px, 7vw, 88px);
}

#pipes-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  image-rendering: pixelated;
  pointer-events: auto;
}

.hero > :not(#pipes-bg),
.trust-strip,
.tech-strip,
.service-strip,
.process,
.cases,
.contact-band,
.site-footer {
  position: relative;
  z-index: 1;
}

.eyebrow,
.flow-kicker,
.process-step-number,
.case-tag {
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 14px;
}

h1 {
  max-width: 820px;
  margin-bottom: 24px;
  font-family: "Jersey 15", "Space Mono", monospace;
  font-size: clamp(54px, 7.4vw, 104px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.9;
  text-shadow: 3px 3px 0 rgba(2, 8, 16, 0.44);
}

.hero-text {
  max-width: 660px;
  color: var(--soft);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
}

.hero-copy {
  grid-area: copy;
}

.hero-actions,
.contact-actions {
  gap: 12px;
  margin-top: 30px;
}

.hero-actions a,
.contact-actions a {
  min-width: 180px;
}

.hero-actions {
  gap: 16px;
  margin-top: 34px;
}

.hero-actions a {
  min-width: 220px;
  min-height: 58px;
  padding: 15px 22px;
  font-size: 13px;
}

.hero-actions .primary-action {
  border-color: #c8f0ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(180deg, #28b9f3, #0886ce);
  box-shadow:
    5px 5px 0 rgba(1, 9, 18, 0.62),
    0 0 0 2px rgba(11, 161, 219, 0.28),
    0 0 26px rgba(11, 161, 219, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.hero-actions .secondary-action {
  border-color: rgba(190, 233, 250, 0.92);
  background: rgba(21, 42, 65, 0.92);
  box-shadow:
    5px 5px 0 rgba(1, 9, 18, 0.56),
    inset 0 0 0 1px rgba(121, 213, 223, 0.14);
}

.hero-actions .primary-action:hover,
.hero-actions .primary-action:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(180deg, #39c6ff, #087abd);
}

.hero-actions .secondary-action:hover,
.hero-actions .secondary-action:focus-visible {
  border-color: var(--amber);
  background: rgba(31, 54, 78, 0.96);
}

.contact-actions {
  display: grid;
  justify-items: stretch;
  min-width: min(100%, 380px);
}

.contact-form-action {
  width: 100%;
  min-height: 52px;
}

.contact-direct-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-direct-links a {
  min-width: 0;
  font-size: 11px;
}

.quick-facts,
.dynamic-grid,
.flow-line,
.tech-grid,
.service-grid,
.case-grid,
.process-board,
.trust-strip {
  display: grid;
}

.quick-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 920px;
  margin: 36px 0 0;
}

.panel,
.quick-facts div,
.flow-card,
.mini-card,
.proof-stack,
.service-grid article,
.case-grid article,
.process-board article,
.contact-band,
.trust-strip span {
  border: 3px solid rgba(159, 216, 244, 0.86);
  border-radius: 0;
  background: rgba(22, 36, 55, 0.88);
  box-shadow: var(--shadow);
}

.quick-facts div {
  background: rgba(25, 42, 64, 0.82);
  padding: 16px;
}

.quick-facts .quick-fact-card {
  min-height: 118px;
}

.quick-fact-card .mini-card-face {
  padding: 16px;
}

.quick-facts dt,
.mini-card span {
  color: var(--amber);
  font-family: "Jersey 15", "Space Mono", monospace;
  font-size: 34px;
  font-weight: 400;
  line-height: 0.88;
}

.quick-facts dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.quick-facts dt {
  display: block;
  min-width: 0;
  font-size: clamp(29px, 2.1vw, 34px);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-dynamic {
  grid-area: dynamic;
  display: grid;
  gap: 14px;
}

.flow-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(31, 50, 74, 0.9), rgba(18, 31, 49, 0.9));
  padding: 28px;
}

.flow-card::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.11), transparent);
  animation: scan 5s ease-in-out infinite;
  content: "";
}

.flow-card > * {
  position: relative;
}

.flow-kicker {
  display: inline-flex;
  margin-bottom: 16px;
}

.flow-card h2,
.section-heading h2,
.contact-band h2,
.service-grid h3,
.case-grid h3,
.process-board h3 {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  letter-spacing: 0;
}

.flow-card h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.14;
}

.flow-card p,
.service-grid p,
.case-grid p,
.process-board p,
.proof-stack span {
  color: var(--soft);
}

.flow-card p {
  font-size: 16px;
  line-height: 1.6;
}

.flow-meter {
  overflow: hidden;
  height: 12px;
  border: 3px solid rgba(2, 8, 16, 0.48);
  border-radius: 0;
  background: rgba(2, 8, 16, 0.4);
  margin-top: 24px;
}

.flow-meter span {
  display: block;
  width: 62%;
  height: 100%;
  background: linear-gradient(90deg, var(--green), #ddec56);
  animation: meter 4.8s ease-in-out infinite;
}

.flow-line {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.flow-line span {
  height: 3px;
  background: var(--blue-soft);
}

.flow-line span:nth-child(2) {
  background: rgba(121, 213, 223, 0.28);
}

.dynamic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mini-card {
  position: relative;
  min-width: 0;
  min-height: 96px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: none;
  perspective: 650px;
}

.mini-card.is-striking {
  cursor: none;
}

.flow-hammer-cursor {
  position: fixed;
  left: var(--cursor-x, -100px);
  top: var(--cursor-y, -100px);
  width: 44px;
  height: 44px;
  pointer-events: none;
  opacity: 0;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%2307111c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23b9783c' d='M28 29h8v28.4c0 3.1-1.7 5.1-4 5.1s-4-2-4-5.1V29Z'/%3E%3Cpath fill='%23efbd7a' d='M30.2 30h3v27.2c0 2-.7 3.2-1.7 3.8L30.2 30Z' opacity='.78'/%3E%3Cpath fill='%238b98a1' d='M12 7h40c2.7 0 4.8 2.1 4.8 4.8v12.4c0 2.7-2.1 4.8-4.8 4.8H12c-2.7 0-4.8-2.1-4.8-4.8V11.8C7.2 9.1 9.3 7 12 7Z'/%3E%3Cpath fill='%23cfd8dd' d='M12.4 8.5h39.2c2.1 0 3.4 1.2 4 3.4H8.4c.6-2.2 1.9-3.4 4-3.4Z' opacity='.82'/%3E%3Cpath fill='%235f6c74' d='M8.3 24.2h47.4c-.6 2.2-1.9 3.4-4.1 3.4H12.4c-2.2 0-3.5-1.2-4.1-3.4Z' opacity='.55'/%3E%3Cpath fill='%23707e86' d='M7.2 12.4h5.2v11.2H7.2V12.4Z' opacity='.72'/%3E%3Cpath fill='%23707e86' d='M51.6 12.4h5.2v11.2h-5.2V12.4Z' opacity='.72'/%3E%3Cpath fill='%23aab6bc' d='M14 11.5h34' opacity='.75'/%3E%3C/g%3E%3C/svg%3E");
  transform: translate(-25px, -34px) rotate(30deg) scale(0.86);
  transform-origin: 58% 78%;
  transition: opacity 90ms ease;
  z-index: 80;
}

.flow-hammer-cursor.is-visible {
  opacity: 1;
}

.flow-hammer-cursor.is-hitting {
  animation: hammer-cursor-hit 280ms cubic-bezier(0.12, 0.82, 0.18, 1);
}

.flow-hammer-cursor i {
  display: none;
}

.hammer-spark {
  position: absolute;
  left: calc(var(--hit-x, 50%) - 2px);
  top: calc(var(--hit-y, 50%) - 2px);
  width: 4px;
  height: 4px;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(255, 207, 91, 0.72);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9;
  animation: spark-pop 460ms ease-out forwards;
}

.hammer-spark:nth-of-type(2) {
  --spark-x: -18px;
  --spark-y: -16px;
}

.hammer-spark:nth-of-type(3) {
  --spark-x: 16px;
  --spark-y: -14px;
}

.hammer-spark:nth-of-type(4) {
  --spark-x: -11px;
  --spark-y: 13px;
}

.hammer-spark:nth-of-type(5) {
  --spark-x: 18px;
  --spark-y: 10px;
}

.mini-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

.mini-card-inner {
  position: relative;
  display: block;
  min-height: 96px;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mini-card.is-flipped .mini-card-inner {
  transform: rotateY(180deg);
}

.mini-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background: rgba(25, 42, 64, 0.82);
  padding: 16px;
  backface-visibility: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mini-card:hover .mini-card-face {
  border-color: rgba(190, 233, 250, 0.96);
  background: rgba(31, 50, 74, 0.9);
}

.mini-card-back {
  background: rgba(18, 33, 52, 0.96);
  padding: 14px;
  transform: rotateY(180deg);
}

.mini-card strong {
  display: block;
  color: var(--amber);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.mini-card-front > span {
  display: block;
  min-width: 0;
  font-size: clamp(28px, 2.15vw, 34px);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mini-card-front > small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.mini-card-back > span {
  display: block;
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: clamp(10px, 0.68vw, 12px);
  font-weight: 700;
  line-height: 1.28;
}

@media (max-width: 1180px) {
  .quick-facts,
  .dynamic-grid {
    gap: 8px;
  }

  .quick-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
  }

  .quick-facts div {
    padding: 14px;
  }

  .quick-fact-card .mini-card-face {
    padding: 14px;
  }

  .quick-facts dt,
  .mini-card-front > span {
    font-size: clamp(24px, 1.45vw + 10px, 30px);
    line-height: 0.92;
  }

  .mini-card-front > small {
    font-size: 12px;
  }
}

.proof-stack {
  display: grid;
  gap: 1px;
  overflow: visible;
  background: var(--line);
}

.proof-stack p {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  margin: 0;
  background: rgba(22, 36, 55, 0.88);
  padding: 14px 16px;
}

.proof-stack strong {
  color: var(--amber);
}

.proof-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  min-height: 36px;
}

.proof-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 2px solid rgba(159, 216, 244, 0.36);
  background: rgba(15, 28, 45, 0.68);
  color: var(--soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 9px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      opacity 180ms ease,
      margin 180ms ease;
  transform-origin: center top;
  will-change: transform;
  position: relative;
  z-index: 1;
}

.proof-chips span:hover,
.proof-chips span.is-hovered {
  border-color: rgba(190, 233, 250, 0.72);
  background: rgba(22, 39, 59, 0.95);
  box-shadow: 0 0 0 2px rgba(87, 183, 255, 0.08);
}

.proof-chips span.is-suctioned {
  cursor: grabbing;
  transform: translate(var(--chip-x, 0px), var(--chip-y, -18px)) scale(0.98);
  border-color: rgba(244, 199, 98, 0.85);
  box-shadow:
    0 8px 0 rgba(2, 8, 16, 0.18),
    0 0 0 2px rgba(244, 199, 98, 0.08);
  z-index: 6;
}

.proof-chips span.is-dropping {
  animation: chip-drop 320ms ease;
}

.proof-chips span.is-popping {
  animation: chip-pop 190ms ease;
}

.proof-chips span.is-dragging {
  opacity: 0.42;
  cursor: grabbing;
  transform: rotate(-2deg) scale(0.98);
}

.proof-chips span.is-drop-target {
  border-color: rgba(159, 216, 244, 0.58);
  background: rgba(18, 35, 55, 0.84);
}

.proof-chip-placeholder {
  display: inline-block;
  width: 0;
  min-height: 28px;
  vertical-align: top;
  pointer-events: none;
  opacity: 0;
  transition:
    width 280ms cubic-bezier(0.22, 1, 0.36, 1),
    height 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.proof-chip-anchor {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.proof-chips > .proof-floating-chip {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 2px solid rgba(244, 199, 98, 0.88);
  background: rgba(15, 28, 45, 0.96);
  color: var(--soft);
  box-shadow:
    0 8px 0 rgba(2, 8, 16, 0.18),
    0 0 0 2px rgba(244, 199, 98, 0.08);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 9px;
  pointer-events: none;
  z-index: 8;
  transform: translate3d(var(--float-x, 0px), var(--float-y, 0px), 0) scale(0.98);
  transform-origin: center top;
  transition: none;
  will-change: transform;
}

.proof-plunger {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 56px;
  opacity: 0;
  transform: translate3d(var(--plunger-x, 0px), var(--plunger-y, -8px), 0) translateX(-50%) scale(0.62);
  transform-origin: 45% 84%;
  pointer-events: none;
  transition: transform 170ms ease, opacity 150ms ease, filter 170ms ease;
  z-index: 12;
  filter: drop-shadow(0 3px 0 rgba(2, 8, 16, 0.32));
}

.proof-plunger.is-visible {
  opacity: 1;
}

.proof-plunger.is-engaged {
  transform: translate3d(var(--plunger-x, 0px), var(--plunger-y, -7px), 0) translateX(-50%) scale(0.66);
  filter: drop-shadow(0 5px 0 rgba(2, 8, 16, 0.26));
  transition: opacity 150ms ease, filter 170ms ease;
}

.proof-plunger-handle {
  display: none;
}

.proof-plunger-shaft {
  position: absolute;
  left: 19px;
  top: 4px;
  width: 8px;
  height: 33px;
  border: 1px solid #07111c;
  border-radius: 999px 999px 4px 4px;
  background:
    linear-gradient(90deg, #8f6848 0 18%, #caa17a 22% 56%, #e6c19b 58% 74%, #9d7653 76% 100%);
  box-shadow:
    inset -1px 0 0 rgba(255, 230, 190, 0.34),
    inset 2px 0 0 rgba(70, 42, 22, 0.26);
  transform: rotate(0deg);
  transform-origin: 50% 100%;
  transition: transform 150ms ease, height 150ms ease, top 150ms ease;
  z-index: 4;
}

.proof-plunger-shaft::before {
  display: none;
  content: none;
}

.proof-plunger-collar {
  position: absolute;
  left: 14px;
  top: 33px;
  width: 18px;
  height: 10px;
  border: 1px solid #07111c;
  border-radius: 7px 7px 2px 2px;
  background:
    linear-gradient(90deg, #94140f 0 14%, #ff4438 18% 56%, #d4241d 60% 100%);
  box-shadow:
    inset -2px -1px 0 rgba(75, 8, 6, 0.32),
    inset 2px 1px 0 rgba(255, 139, 128, 0.22);
  transform: none;
  transition: transform 150ms ease;
  z-index: 5;
}

.proof-plunger-collar::before {
  display: none;
  content: none;
}

.proof-plunger-collar::after {
  display: none;
  content: none;
}

.proof-plunger-cup {
  position: absolute;
  left: 3px;
  top: 39px;
  width: 40px;
  height: 18px;
  border: 1px solid #07111c;
  border-radius: 50% 50% 5px 5px / 100% 100% 5px 5px;
  background:
    radial-gradient(ellipse at 34% 28%, rgba(255, 185, 176, 0.62) 0 14%, transparent 15%),
    radial-gradient(ellipse at 70% 78%, rgba(104, 8, 6, 0.22) 0 26%, transparent 27%),
    linear-gradient(180deg, #ff5146 0%, #e62b23 56%, #a91611 100%);
  box-shadow:
    inset -4px -3px 0 rgba(71, 8, 6, 0.28),
    inset 3px 2px 0 rgba(255, 136, 124, 0.2);
  clip-path: none;
  transform: none;
  transform-origin: 50% 50%;
  transition: transform 150ms ease, width 150ms ease, left 150ms ease, top 150ms ease;
  z-index: 2;
}

.proof-plunger-cup::before {
  display: none;
  content: none;
}

.proof-plunger-cup::after {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -2px;
  height: 4px;
  border: 1px solid #07111c;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #c91e17 0%, #8b120d 100%);
  transform: none;
  content: "";
}

.proof-plunger.is-engaged .proof-plunger-handle {
  display: none;
}

.proof-plunger.is-engaged .proof-plunger-shaft {
  top: 6px;
  height: 32px;
  transform: translateY(2px) rotate(0deg);
}

.proof-plunger.is-engaged .proof-plunger-collar {
  transform: translateY(2px) scaleX(0.94) scaleY(0.92);
}

.proof-plunger.is-engaged .proof-plunger-cup {
  left: 5px;
  top: 41px;
  width: 36px;
  transform: scaleX(0.9) scaleY(0.86);
}

.proof-plunger.is-grab-pop .proof-plunger-cup {
  animation: plunger-suction 220ms ease;
}

.proof-plunger.is-grab-pop .proof-plunger-shaft {
  animation: plunger-shaft-press 220ms ease;
}

.proof-plunger.is-grab-pop .proof-plunger-collar {
  animation: plunger-collar-press 220ms ease;
}

@keyframes chip-drop {
  0% {
    transform: translateY(-18px) scale(0.98);
  }
  55% {
    transform: translateY(4px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes chip-pop {
  0% {
    transform: translate(var(--chip-x, 0px), var(--chip-y, -10px)) scale(0.94);
  }
  55% {
    transform: translate(var(--chip-x, 0px), var(--chip-y, -16px)) scale(1.02);
  }
  100% {
    transform: translate(var(--chip-x, 0px), var(--chip-y, -18px)) scale(0.98);
  }
}

@keyframes plunger-suction {
  0% {
    transform: scaleY(1);
  }
  35% {
    transform: scaleX(0.88) scaleY(0.78);
  }
  65% {
    transform: scaleX(0.98) scaleY(0.94);
  }
  100% {
    transform: scaleX(0.9) scaleY(0.86);
  }
}

@keyframes plunger-shaft-press {
  0% {
    transform: translateY(2px) rotate(0deg);
  }
  35% {
    transform: translateY(4px) rotate(0deg);
  }
  100% {
    transform: translateY(2px) rotate(0deg);
  }
}

@keyframes plunger-collar-press {
  0% {
    transform: translateY(2px) scaleX(0.94) scaleY(0.92);
  }
  35% {
    transform: translateY(4px) scaleX(0.86) scaleY(0.82);
  }
  100% {
    transform: translateY(2px) scaleX(0.94) scaleY(0.92);
  }
}

@keyframes card-hit {
  0% {
    transform: translate(0, 0) scale(1);
  }
  30% {
    transform: translate(1px, 1px) scale(0.992);
  }
  52% {
    transform: translate(3px, 3px) scale(0.978);
  }
  76% {
    transform: translate(-1px, -1px) scale(1.01);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes hammer-cursor-hit {
  0% {
    transform: translate(-25px, -34px) rotate(30deg) scale(0.86);
  }
  24% {
    transform: translate(-22px, -38px) rotate(48deg) scale(0.9);
  }
  72% {
    transform: translate(-32px, -12px) rotate(-20deg) scale(0.92);
  }
  86% {
    transform: translate(-34px, -9px) rotate(-28deg) scale(0.86);
  }
  100% {
    transform: translate(-34px, -9px) rotate(-28deg) scale(0.86);
  }
}

@keyframes spark-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x, 12px)), calc(-50% + var(--spark-y, -12px))) scale(0.2);
  }
}

.tech-strip {
  scroll-margin-top: 104px;
  padding: 18px var(--page-pad) 10px;
}

.tech-heading {
  margin: 0 auto 20px;
  text-align: center;
}

.tech-intro {
  margin: 14px 0 0;
  color: var(--blue);
  font-family: "Space Mono", monospace;
  font-size: clamp(18px, 2.1vw, 24px);
  font-weight: 700;
  line-height: 1.35;
}

.tech-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  justify-content: center;
  gap: 14px;
}

.tech-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 62px;
  min-width: 0;
  border: 3px solid rgba(159, 216, 244, 0.74);
  border-radius: 0;
  background: rgba(22, 36, 55, 0.72);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.tech-item:hover {
  transform: translate(1px, 1px);
  border-color: rgba(159, 216, 244, 0.96);
  background: rgba(27, 45, 67, 0.9);
}

.tech-item img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  opacity: 0.92;
  filter:
    brightness(0) invert(1)
    drop-shadow(2px 2px 0 rgba(2, 8, 16, 0.34));
}

.tech-label {
  display: inline-block;
}

.service-strip,
.process,
.cases {
  scroll-margin-top: 104px;
  padding: clamp(68px, 7vw, 94px) var(--page-pad) clamp(58px, 7vw, 86px);
}

#contact {
  scroll-margin-top: 104px;
}

.service-strip + .process,
.process + .cases {
  padding-top: clamp(46px, 6vw, 72px);
}

.section-heading {
  max-width: 840px;
  margin-bottom: 24px;
}

.section-heading h2,
.contact-band h2 {
  margin-bottom: 0;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.12;
}

.service-grid,
.case-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

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

.process-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.service-grid article,
.case-grid article,
.process-board article {
  padding: clamp(22px, 2.4vw, 30px);
}

.service-card {
  position: relative;
  display: flex;
  min-height: 250px;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(31, 50, 74, 0.82), rgba(18, 33, 52, 0.9)),
    rgba(22, 36, 55, 0.88);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.service-card::before {
  content: none;
}

.service-card::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.72), transparent);
  opacity: 0.5;
}

.service-card:hover {
  border-color: rgba(190, 233, 250, 0.98);
  background:
    linear-gradient(180deg, rgba(35, 58, 83, 0.94), rgba(21, 39, 60, 0.96)),
    rgba(28, 48, 72, 0.92);
  transform: translateY(-4px);
}

.service-icon {
  position: relative;
  display: block;
  width: 46px;
  height: 40px;
  margin-bottom: 24px;
  color: var(--amber);
}

.service-icon::before {
  filter: drop-shadow(4px 4px 0 rgba(1, 9, 18, 0.42));
}

.service-icon::before,
.service-icon::after,
.service-icon span {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.service-icon-web::before {
  inset: 3px 5px 11px;
  border: 3px solid rgba(159, 216, 244, 0.92);
  background: rgba(11, 26, 43, 0.72);
}

.service-icon-web::after {
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 5px;
  border-top: 3px solid rgba(159, 216, 244, 0.92);
  border-bottom: 3px solid rgba(159, 216, 244, 0.92);
}

.service-icon-web span {
  left: 12px;
  top: 12px;
  width: 22px;
  height: 3px;
  background: var(--amber);
  box-shadow: 0 7px 0 rgba(121, 213, 223, 0.72);
}

.service-icon-support::before {
  left: 7px;
  top: 13px;
  width: 32px;
  height: 14px;
  border: 3px solid rgba(159, 216, 244, 0.92);
  background: rgba(121, 213, 223, 0.14);
}

.service-icon-support::after {
  left: 16px;
  top: 4px;
  width: 14px;
  height: 32px;
  border: 3px solid rgba(159, 216, 244, 0.92);
  background: rgba(255, 207, 91, 0.16);
}

.service-icon-support span {
  left: 20px;
  top: 17px;
  width: 6px;
  height: 6px;
  background: var(--amber);
}

.service-icon-label::before {
  left: 4px;
  top: 8px;
  width: 31px;
  height: 22px;
  border: 3px solid rgba(159, 216, 244, 0.92);
  background: rgba(11, 26, 43, 0.72);
}

.service-icon-label::after {
  right: 4px;
  top: 15px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid rgba(159, 216, 244, 0.92);
}

.service-icon-label span {
  left: 14px;
  top: 16px;
  width: 9px;
  height: 6px;
  border: 2px solid var(--amber);
}

.service-icon-dev::before {
  left: 6px;
  top: 8px;
  width: 34px;
  height: 24px;
  border: 3px solid rgba(159, 216, 244, 0.92);
  background: rgba(11, 26, 43, 0.72);
}

.service-icon-dev::after {
  left: 11px;
  top: 17px;
  width: 9px;
  height: 9px;
  border-left: 3px solid var(--amber);
  border-bottom: 3px solid var(--amber);
  transform: rotate(45deg);
}

.service-icon-dev span {
  left: 24px;
  top: 20px;
  width: 12px;
  height: 3px;
  background: rgba(121, 213, 223, 0.92);
}

.service-grid h3,
.case-grid h3,
.process-board h3 {
  margin: 20px 0 12px;
  font-size: 22px;
  line-height: 1.18;
}

.service-card h3 {
  position: relative;
  margin-top: 0;
}

.service-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -17px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(11, 26, 43, 0.88);
  background: rgba(121, 213, 223, 0.96);
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 0 10px rgba(121, 213, 223, 0.36);
  opacity: 0;
  transform: translateX(0) rotate(-45deg) scale(0.82);
}

.service-card h3::after {
  content: "";
  display: block;
  width: 74px;
  height: 3px;
  margin-top: 14px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.88), transparent);
  opacity: 0.88;
}

.service-card:hover h3::before {
  animation: service-drop-run 1.8s ease-in-out infinite alternate;
}

.service-grid p,
.case-grid p,
.process-board p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

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

.why-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  align-items: start;
  border: 2px solid rgba(159, 216, 244, 0.54);
  background: rgba(11, 26, 43, 0.42);
  padding: 18px;
}

.why-card h3 {
  margin: 0;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 15px;
  line-height: 1.25;
}

.why-card p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.why-icon {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  grid-row: span 2;
}

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

.why-icon-clock::before {
  inset: 2px;
  border: 3px solid rgba(159, 216, 244, 0.92);
  border-radius: 50%;
}

.why-icon-clock::after {
  left: 12px;
  top: 7px;
  width: 8px;
  height: 9px;
  border-left: 3px solid var(--amber);
  border-bottom: 3px solid var(--amber);
}

.why-icon-pay::before {
  left: 2px;
  top: 6px;
  width: 22px;
  height: 15px;
  border: 3px solid rgba(159, 216, 244, 0.92);
}

.why-icon-pay::after {
  left: 8px;
  top: 12px;
  width: 12px;
  height: 3px;
  background: var(--amber);
  box-shadow: 0 5px 0 rgba(121, 213, 223, 0.72);
}

.why-icon-risk::before {
  left: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(159, 216, 244, 0.92);
  transform: rotate(45deg);
}

.why-icon-risk::after {
  left: 11px;
  top: 7px;
  width: 4px;
  height: 13px;
  background: var(--amber);
}

.why-icon-direct::before {
  left: 4px;
  top: 5px;
  width: 18px;
  height: 16px;
  border: 3px solid rgba(159, 216, 244, 0.92);
}

.why-icon-direct::after {
  left: 10px;
  top: 11px;
  width: 12px;
  height: 3px;
  background: var(--amber);
  box-shadow: -6px 0 0 var(--amber), 0 5px 0 rgba(121, 213, 223, 0.72);
}

.case-tag {
  margin-bottom: 22px;
}

.contact-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  margin: clamp(10px, 3vw, 38px) var(--page-pad) clamp(42px, 6vw, 72px);
  padding: clamp(42px, 6vw, 72px);
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) auto minmax(220px, 0.9fr);
  gap: 28px;
  align-items: center;
  border-top: 3px solid rgba(159, 216, 244, 0.86);
  background: rgba(8, 16, 27, 0.94);
  padding: 26px var(--page-pad);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.site-footer .brand img {
  width: 108px;
}

.footer-brand p,
.footer-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.footer-nav,
.footer-contact {
  gap: 10px 16px;
  justify-content: center;
  font-style: normal;
}

.footer-nav a,
.footer-contact a,
.footer-contact span {
  color: var(--soft);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.footer-nav a:hover,
.footer-contact a:hover {
  color: var(--amber);
}

.footer-note {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(159, 216, 244, 0.22);
  padding-top: 16px;
  text-align: center;
}

@keyframes scan {
  0%, 28% {
    transform: translateX(-120%);
  }
  58%, 100% {
    transform: translateX(120%);
  }
}

@keyframes meter {
  0%, 100% {
    width: 54%;
  }
  50% {
    width: 82%;
  }
}

@keyframes service-drop-run {
  0% {
    opacity: 0.35;
    transform: translateX(0) rotate(-45deg) scale(0.82);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(66px) rotate(-45deg) scale(1);
  }
}

@media (max-width: 980px) {
  html {
    scroll-padding-top: 88px;
  }

  .site-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .nav,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: inline-grid;
    place-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 11px;
  }

  .site-header.menu-open .nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    display: grid;
    justify-content: stretch;
    border-bottom: 3px solid var(--line-strong);
    background: var(--page);
    padding: 12px 18px 18px;
  }

  .site-header.menu-open .nav a {
    justify-content: flex-start;
    min-height: 48px;
  }

  .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "dynamic";
    min-height: auto;
  }

  .service-strip,
  .tech-strip,
  .process,
  .cases,
  #contact {
    scroll-margin-top: 88px;
  }

  .service-grid,
  .case-grid,
  .process-board,
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-band,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer {
    text-align: center;
  }

  .footer-brand,
  .footer-contact {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 76px;
  }

  html {
    scroll-padding-top: 82px;
  }

  body::before {
    background-size: 112px 112px, 112px 112px, 112px 112px, auto;
    opacity: 0.72;
  }

  body::after {
    opacity: 0.22;
  }

  .site-header {
    min-height: var(--header-height);
    padding: 10px 16px;
  }

  .brand {
    width: 142px;
  }

  .site-header.menu-open .nav {
    top: var(--header-height);
  }

  .hero {
    padding: 44px 20px 42px;
  }

  h1 {
    font-size: 46px;
    line-height: 0.98;
    text-shadow: 2px 2px 0 rgba(2, 8, 16, 0.45);
  }

  .hero-text {
    font-size: 18px;
  }

  .hero-actions a,
  .contact-actions a {
    width: 100%;
  }

  .quick-facts,
  .dynamic-grid,
  .service-grid,
  .case-grid,
  .process-board,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .quick-facts dt,
  .mini-card span {
    font-size: 31px;
  }

  .quick-facts .quick-fact-card {
    min-height: 144px;
  }

  .mini-card-back > span {
    font-size: 11px;
    line-height: 1.35;
  }

  .mini-card-back strong {
    font-size: 12px;
    margin-bottom: 7px;
  }

  .tech-strip {
    padding: 28px 20px 4px;
  }

  .tech-heading {
    margin-bottom: 16px;
  }

  .tech-intro {
    font-size: 16px;
    line-height: 1.45;
  }

  .tech-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tech-item {
    min-height: 52px;
    padding: 12px 14px;
    font-size: 14px;
  }

  .tech-item img {
    width: 18px;
    height: 18px;
  }

  .flow-card {
    padding: 22px;
  }

  .flow-card h2,
  .section-heading h2,
  .contact-band h2 {
    font-size: 28px;
    line-height: 1.16;
  }

  .proof-stack p {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .service-strip,
  .tech-strip,
  .process,
  .cases {
    scroll-margin-top: 82px;
    padding: 46px 20px;
  }

  .service-strip + .process,
  .process + .cases {
    padding-top: 34px;
  }

  .section-heading {
    margin-bottom: 18px;
  }

  .service-grid article,
  .case-grid article,
  .process-board article {
    padding: 20px;
  }

  .service-card {
    min-height: 0;
  }

  .why-card {
    padding: 16px;
  }

  .service-grid h3,
  .case-grid h3,
  .process-board h3 {
    font-size: 21px;
  }

  .contact-band {
    margin: 16px 18px 28px;
    padding: 32px 20px;
    gap: 24px;
  }

  .contact-actions {
    gap: 10px;
  }

  .contact-direct-links {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .site-footer {
    gap: 18px;
    padding: 20px 20px 18px;
  }

  .footer-brand {
    flex-direction: column;
    gap: 10px;
  }

  .site-footer .brand img {
    width: 92px;
  }

  .footer-nav,
  .footer-contact {
    flex-direction: column;
    align-items: center;
  }

  .footer-brand p,
  .footer-note,
  .footer-nav a,
  .footer-contact a,
  .footer-contact span {
    font-size: 12px;
  }

  .footer-note {
    padding-top: 14px;
  }
}


/* =========================
   WebPlumbers custom header / CTA / footer refinement
   ========================= */

.site-header {
  grid-template-columns: none;
  gap: 0;
  min-height: var(--header-height);
  padding: 0;
}

.header-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: var(--header-height);
  margin-inline: 0;
  padding-inline: clamp(18px, 4vw, 54px);
}

.nav {
  align-items: center;
}

.nav > a,
.nav-dropdown-toggle,
.header-phone {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  overflow: hidden;
  border: 3px solid var(--line-strong);
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: 11px 15px;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  text-transform: uppercase;
  background: rgba(27, 45, 67, 0.74);
  color: var(--soft);
  cursor: pointer;
}

.nav > a:hover,
.nav > a:focus-visible,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.header-phone:hover,
.header-phone:focus-visible {
  color: var(--amber);
  border-color: rgba(190, 233, 250, 0.96);
  background: rgba(31, 50, 74, 0.9);
  outline: none;
}

.nav > a::before,
.nav-dropdown-toggle::before,
.header-phone::before {
  position: absolute;
  inset: 5px auto 5px 5px;
  z-index: -1;
  width: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(244, 199, 98, 0.28));
  content: "";
  transition: width 220ms steps(5, end);
}

.nav > a:hover::before,
.nav > a:focus-visible::before,
.nav-dropdown-toggle:hover::before,
.nav-dropdown-toggle:focus-visible::before,
.header-phone:hover::before,
.header-phone:focus-visible::before {
  width: calc(100% - 10px);
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-phone {
  min-width: 218px;
  background: rgba(18, 34, 52, 0.9);
  color: #fff;
}

.nav-item {
  position: relative;
}

.nav-dropdown-toggle {
  gap: 8px;
}

.nav-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 180ms ease;
}

.nav-dropdown.is-open .nav-caret,
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
  transform: rotate(-135deg) translateY(-1px);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  display: grid;
  gap: 8px;
  min-width: 290px;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background: rgba(27, 45, 67, 0.98);
  box-shadow: 7px 7px 0 rgba(2, 8, 16, 0.44);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.dropdown-panel a {
  display: block;
  border: 2px solid transparent;
  padding: 12px 14px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.dropdown-panel a:hover,
.dropdown-panel a:focus-visible {
  border-color: rgba(159, 216, 244, 0.48);
  background: rgba(19, 36, 57, 0.9);
  color: var(--amber);
  outline: none;
}

.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel,
.nav-dropdown.is-open .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hover-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.hover-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(16, 147, 214, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

.hover-card:hover::before,
.hover-card:focus-within::before {
  opacity: 1;
}

.service-card:hover,
.service-card:focus-within,
.process-board article:hover,
.process-board article:focus-within {
  border-color: rgba(190, 233, 250, 0.98);
  background: linear-gradient(180deg, rgba(35, 58, 83, 0.94), rgba(21, 39, 60, 0.96)), rgba(28, 48, 72, 0.92);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22), var(--shadow);
}

.cta-section {
  position: relative;
  z-index: 1;
  scroll-margin-top: 104px;
  padding: clamp(46px, 6vw, 72px) var(--page-pad) 52px;
}

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background: linear-gradient(90deg, rgba(19, 36, 57, 0.94), rgba(11, 32, 58, 0.94));
  box-shadow: var(--shadow);
  padding: clamp(34px, 5vw, 44px);
}

.cta-band h2 {
  margin-bottom: 10px;
  font-family: "Space Mono", monospace;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.12;
}

.cta-band p:last-child {
  max-width: 820px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.cta-band-actions {
  display: grid;
  gap: 12px;
  min-width: min(100%, 280px);
}

.cta-band-actions a {
  min-height: 58px;
  padding: 15px 22px;
  font-size: 13px;
}

.site-footer {
  display: block;
  grid-template-columns: none;
  width: 100%;
  margin: 0;
  border-top: 3px solid rgba(159, 216, 244, 0.86);
  background: rgba(6, 15, 25, 0.92);
  padding: 34px var(--page-pad) 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) repeat(3, minmax(180px, 0.8fr));
  gap: 34px;
  align-items: start;
}

.footer-brand-column,
.footer-column {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  text-decoration: none;
}

.footer-brand-mark {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 3px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(12, 30, 51, 0.95), rgba(8, 22, 37, 0.95));
  box-shadow: var(--shadow);
}

.footer-brand-mark::before,
.footer-brand-mark::after,
.footer-brand-mark span {
  content: "";
  position: absolute;
  display: block;
}

.footer-brand-mark::before {
  left: 9px;
  top: 9px;
  width: 17px;
  height: 17px;
  border: 3px solid var(--amber);
  border-right: 0;
  border-bottom: 0;
}

.footer-brand-mark::after {
  right: 8px;
  top: 8px;
  width: 9px;
  height: 24px;
  background: var(--line-strong);
}

.footer-brand-mark span {
  left: 10px;
  bottom: 8px;
  width: 24px;
  height: 6px;
  background: var(--line-strong);
}

.footer-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-brand-copy strong {
  font-family: "Jersey 15", "Space Mono", monospace;
  font-size: 38px;
  font-weight: 400;
  line-height: 0.9;
}

.footer-brand-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-transform: uppercase;
}

.footer-brand-column p {
  max-width: 420px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.footer-column h3 {
  margin-bottom: 16px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-footer .footer-nav,
.site-footer .footer-contact {
  display: grid;
  gap: 12px;
  justify-content: start;
  font-style: normal;
}

.site-footer .footer-nav a,
.site-footer .footer-contact a,
.site-footer .footer-contact span {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;
}

.site-footer .footer-nav a:hover,
.site-footer .footer-contact a:hover {
  color: var(--amber);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  grid-column: auto;
  margin-top: 28px;
  border-top: 1px solid rgba(159, 216, 244, 0.22);
  padding-top: 18px;
  text-align: left;
}

.footer-bottom p,
.footer-bottom a {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--amber);
}

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

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: none;
  }

  .header-shell {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .header-phone {
    display: none;
  }

  .site-header.menu-open .nav {
    position: absolute;
    top: calc(var(--header-height) + 4px);
    left: var(--page-pad);
    right: var(--page-pad);
    display: grid;
    justify-content: stretch;
    gap: 10px;
    border: 3px solid var(--line-strong);
    background: var(--page);
    padding: 14px;
    z-index: 41;
  }

  .site-header.menu-open .nav > a,
  .site-header.menu-open .nav-dropdown-toggle {
    justify-content: flex-start;
    width: 100%;
  }

  .site-header.menu-open .nav-item {
    display: grid;
    gap: 8px;
  }

  .site-header.menu-open .dropdown-panel {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    margin-top: 0;
    box-shadow: none;
    border-width: 2px;
  }

  .site-header.menu-open .nav-dropdown.is-open .dropdown-panel {
    display: grid;
  }

  .cta-band {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 640px) {
  .header-shell {
    padding-inline: 16px;
  }

  .cta-section {
    padding: 34px 20px 42px;
  }

  .cta-band {
    padding: 26px 20px;
  }

  .cta-band-actions {
    min-width: 0;
  }

  .cta-band-actions a,
  .footer-cta {
    width: 100%;
  }

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

  .site-footer {
    width: 100%;
    padding: 22px 20px 16px;
  }

  .footer-brand-copy strong {
    font-size: 32px;
  }

  .footer-brand-copy small {
    font-size: 10px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-brand-column p,
  .footer-bottom p,
  .footer-bottom a,
  .site-footer .footer-nav a,
  .site-footer .footer-contact a,
  .site-footer .footer-contact span {
    font-size: 12px;
  }
}

@media (hover: none) {
  .hover-card {
    transform: none !important;
  }
}


/* ===== Iteration 3: service card scan line, no droplet ===== */
.service-card h3::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.service-card h3::after {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  margin-top: 14px;
  background:
    linear-gradient(90deg,
      rgba(121, 213, 223, 0.22) 0%,
      rgba(121, 213, 223, 0.52) 18%,
      rgba(121, 213, 223, 0.98) 34%,
      rgba(194, 243, 255, 0.98) 40%,
      rgba(121, 213, 223, 0.98) 46%,
      rgba(121, 213, 223, 0.42) 64%,
      transparent 82%);
  background-size: 190px 100%;
  background-position: -120px 0;
  opacity: 0.92;
  box-shadow:
    0 0 10px rgba(121, 213, 223, 0.18),
    0 0 0 1px rgba(121, 213, 223, 0.06);
  transition: width 160ms steps(4, end), opacity 120ms steps(2, end);
}

.service-card:hover h3::after,
.service-card:focus-within h3::after {
  width: 112px;
  opacity: 1;
  animation: service-line-scan 1.35s steps(16, end) infinite;
}

@keyframes service-line-scan {
  0% {
    background-position: -120px 0;
    filter: brightness(0.92);
  }
  45% {
    filter: brightness(1.08);
  }
  100% {
    background-position: 120px 0;
    filter: brightness(1);
  }
}


/* ===== Iteration 4: smoother service line + homepage polish ===== */

/* HERO polish */
.hero {
  gap: clamp(42px, 5.6vw, 88px);
}

.hero-copy {
  position: relative;
  padding-right: clamp(8px, 1.6vw, 22px);
}

.hero-copy::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 2px;
  bottom: 10px;
  width: 3px;
  background: linear-gradient(180deg, rgba(121, 213, 223, 0.14), rgba(121, 213, 223, 0.85), rgba(121, 213, 223, 0.06));
  box-shadow: 0 0 14px rgba(121, 213, 223, 0.16);
  opacity: 0.72;
}

.hero .eyebrow {
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(244, 199, 98, 0.08);
}

h1 {
  margin-bottom: 20px;
  text-shadow:
    3px 3px 0 rgba(2, 8, 16, 0.44),
    0 0 18px rgba(159, 216, 244, 0.06);
}

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

.hero-actions {
  margin-top: 30px;
}

.hero-actions .primary-action,
.hero-actions .secondary-action {
  min-width: 198px;
}

.hero-dynamic {
  gap: 16px;
}

.flow-card {
  background:
    linear-gradient(180deg, rgba(37, 58, 86, 0.94), rgba(18, 31, 49, 0.92));
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(159, 216, 244, 0.08);
}

.flow-card h2 {
  max-width: 14ch;
}

.quick-facts .quick-fact-card {
  transition:
    transform 140ms steps(4, end),
    box-shadow 140ms steps(4, end),
    border-color 120ms steps(2, end);
}

.quick-facts .quick-fact-card:hover,
.quick-facts .quick-fact-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow:
    6px 6px 0 rgba(2, 8, 16, 0.34),
    0 0 0 2px rgba(121, 213, 223, 0.08);
}

/* SERVICES polish */
.service-grid {
  gap: 16px;
}

.service-card {
  min-height: 264px;
  background:
    linear-gradient(180deg, rgba(30, 49, 73, 0.86), rgba(17, 31, 49, 0.94)),
    rgba(22, 36, 55, 0.88);
}

.service-card::before {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(76, 193, 255, 0.14), transparent 58%);
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-4px);
}

.service-card .service-icon {
  transition: transform 160ms steps(4, end), filter 160ms steps(3, end);
}

.service-card:hover .service-icon,
.service-card:focus-within .service-icon {
  transform: translate(2px, -1px);
  filter: drop-shadow(0 0 8px rgba(121, 213, 223, 0.16));
}

.service-card h3 {
  margin-bottom: 16px;
}

.service-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -17px;
  width: 28px;
  height: 3px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0), rgba(194, 243, 255, 0.95), rgba(121, 213, 223, 0));
  box-shadow: 0 0 12px rgba(121, 213, 223, 0.34);
  opacity: 0;
  transform: translateX(0);
  border-radius: 1px;
}

.service-card h3::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin-top: 14px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.9), rgba(121, 213, 223, 0.34), transparent 80%);
  opacity: 0.94;
  box-shadow: 0 0 8px rgba(121, 213, 223, 0.14);
  transition: width 160ms ease, opacity 160ms ease;
}

.service-card:hover h3::before,
.service-card:focus-within h3::before {
  opacity: 1;
  animation: service-line-run-smooth 1.2s linear infinite;
}

.service-card:hover h3::after,
.service-card:focus-within h3::after {
  width: 118px;
  opacity: 1;
}

@keyframes service-line-run-smooth {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translateX(88px);
    opacity: 0;
  }
}

/* CASES polish */
.case-grid {
  gap: 16px;
}

.case-grid article {
  position: relative;
  overflow: hidden;
  min-height: 214px;
  background:
    linear-gradient(180deg, rgba(26, 45, 67, 0.88), rgba(16, 29, 47, 0.94));
  transition:
    transform 150ms steps(4, end),
    border-color 140ms steps(3, end),
    box-shadow 150ms steps(3, end),
    background 140ms steps(3, end);
}

.case-grid article::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 18px;
  height: 18px;
  border-top: 3px solid rgba(121, 213, 223, 0.7);
  border-right: 3px solid rgba(121, 213, 223, 0.7);
  opacity: 0.52;
  transition: transform 140ms steps(3, end), opacity 140ms steps(3, end);
}

.case-grid article::after {
  content: "Project snapshot";
  position: absolute;
  left: 26px;
  bottom: 22px;
  color: rgba(121, 213, 223, 0.88);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 140ms steps(2, end), transform 140ms steps(3, end);
}

.case-grid article:hover,
.case-grid article:focus-within {
  transform: translateY(-4px);
  border-color: rgba(190, 233, 250, 0.98);
  box-shadow:
    8px 8px 0 rgba(2, 8, 16, 0.34),
    0 0 0 2px rgba(121, 213, 223, 0.08);
  background:
    linear-gradient(180deg, rgba(31, 53, 78, 0.94), rgba(18, 34, 55, 0.96));
}

.case-grid article:hover::before,
.case-grid article:focus-within::before {
  opacity: 0.9;
  transform: translate(2px, -2px);
}

.case-grid article:hover::after,
.case-grid article:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

.case-grid h3 {
  max-width: 14ch;
}

.case-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 2px solid rgba(159, 216, 244, 0.2);
  background: rgba(10, 20, 32, 0.28);
  margin-bottom: 18px;
}

@media (max-width: 980px) {
  .hero-copy::before {
    display: none;
  }

  .service-card,
  .case-grid article {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .hero {
    gap: 28px;
  }

  .service-card:hover,
  .service-card:focus-within,
  .case-grid article:hover,
  .case-grid article:focus-within {
    transform: none;
  }

  .case-grid article::after {
    position: static;
    display: block;
    margin-top: 14px;
    transform: none;
    opacity: 0.72;
  }
}


/* ===== Iteration 5: final homepage polish ===== */

/* General visual rhythm */
.section-heading {
  position: relative;
}

.section-heading::after {
  content: "";
  display: block;
  width: 92px;
  height: 3px;
  margin-top: 18px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.9), rgba(244, 199, 98, 0.42), transparent);
  box-shadow: 0 0 10px rgba(121, 213, 223, 0.13);
}

.section-heading.tech-heading::after {
  margin-inline: auto;
}

/* Hero: stronger composition but still close to original */
.hero {
  padding-top: clamp(70px, 8.4vw, 118px);
}

.hero-copy {
  max-width: 880px;
}

.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-copy .eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  background: var(--amber);
  box-shadow: 10px 0 0 rgba(244, 199, 98, 0.28);
}

.hero-text {
  position: relative;
  max-width: 710px;
  padding-left: 18px;
  border-left: 3px solid rgba(121, 213, 223, 0.34);
}

.hero-actions .primary-action {
  box-shadow:
    5px 5px 0 rgba(1, 9, 18, 0.62),
    0 0 0 2px rgba(11, 161, 219, 0.28),
    0 0 26px rgba(11, 161, 219, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.hero-actions .secondary-action {
  background: rgba(13, 29, 48, 0.92);
}

.hero-actions .primary-action::after,
.cta-band-actions .primary-action::after {
  opacity: 1;
  transform: translateX(0);
}

.hero-dynamic {
  align-self: center;
}

.flow-card-large {
  min-height: 220px;
  display: grid;
  align-content: center;
}

.flow-card h2 {
  max-width: none;
}

/* Quick facts: more premium pixel cards */
.quick-fact-card .mini-card-face {
  background:
    linear-gradient(180deg, rgba(31, 50, 74, 0.88), rgba(18, 34, 53, 0.92));
}

.quick-fact-card .mini-card-front > small {
  color: #b8cadb;
}

.quick-fact-card:hover .mini-card-front > span,
.quick-fact-card:focus-visible .mini-card-front > span {
  color: #ffd77a;
}

/* Tech strip: less flat */
.tech-grid {
  align-items: stretch;
}

.tech-item {
  position: relative;
  overflow: hidden;
}

.tech-item::after {
  content: "";
  position: absolute;
  left: -40%;
  top: 0;
  width: 32%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(159, 216, 244, 0.13), transparent);
  transform: skewX(-18deg);
  transition: left 260ms ease;
}

.tech-item:hover::after {
  left: 115%;
}

/* Services: make the cards more intentional */
.service-card {
  isolation: isolate;
}

.service-card::after {
  opacity: 0.66;
}

.service-card p {
  max-width: 36em;
}

.service-card:hover p,
.service-card:focus-within p {
  color: #c4d3e2;
}

/* Process: make it feel like a real board */
.process-board article {
  position: relative;
  min-height: 224px;
  background:
    linear-gradient(180deg, rgba(28, 47, 70, 0.88), rgba(17, 31, 49, 0.94));
}

.process-board article::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  height: 3px;
  background: linear-gradient(90deg, rgba(244, 199, 98, 0.48), rgba(121, 213, 223, 0.44), transparent);
  opacity: 0.38;
  transition: opacity 160ms ease, transform 160ms ease;
}

.process-board article:hover::after,
.process-board article:focus-within::after {
  opacity: 0.86;
  transform: translateX(6px);
}

.process-step-number {
  display: inline-flex;
  min-height: 28px;
  padding: 5px 9px;
  border: 2px solid rgba(244, 199, 98, 0.24);
  background: rgba(244, 199, 98, 0.06);
}

/* Cases: stronger section and card polish */
.cases {
  padding-bottom: clamp(54px, 6vw, 78px);
}

.case-grid article,
.case-card {
  padding-bottom: 58px;
}

.case-grid article p:not(.case-tag) {
  max-width: 50em;
}

.case-grid article:hover .case-tag,
.case-grid article:focus-within .case-tag {
  color: #ffe09a;
  border-color: rgba(244, 199, 98, 0.36);
  background: rgba(244, 199, 98, 0.08);
}

.case-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.case-section-actions a {
  min-width: 220px;
  min-height: 54px;
}

/* CTA: make it feel like a proper final conversion block */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(121, 213, 223, 0.12), transparent 30%),
    linear-gradient(90deg, rgba(19, 36, 57, 0.96), rgba(11, 32, 58, 0.96));
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0 23px, rgba(159, 216, 244, 0.035) 23px 24px, transparent 24px 96px),
    linear-gradient(0deg, transparent 0 23px, rgba(159, 216, 244, 0.03) 23px 24px, transparent 24px 96px);
  background-size: 96px 96px;
  opacity: 0.76;
  pointer-events: none;
}

.cta-band > * {
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  max-width: 820px;
}

.cta-band-actions {
  align-self: stretch;
  justify-content: center;
}

.cta-band-actions a {
  width: 100%;
}

/* Footer polish */
.site-footer {
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159, 216, 244, 0.72), transparent);
}

.footer-grid {
  position: relative;
  z-index: 1;
}

.footer-brand-column {
  padding-right: clamp(8px, 2vw, 28px);
}

.footer-brand-mark {
  transition: transform 160ms steps(4, end), box-shadow 160ms steps(4, end);
}

.footer-brand:hover .footer-brand-mark,
.footer-brand:focus-visible .footer-brand-mark {
  transform: translate(-2px, -2px);
  box-shadow:
    5px 5px 0 rgba(2, 8, 16, 0.5),
    0 0 0 2px rgba(121, 213, 223, 0.08);
}

.footer-column h3 {
  position: relative;
}

.footer-column h3::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.82), transparent);
}

.footer-nav a,
.footer-contact a {
  width: fit-content;
  transition: color 140ms ease, transform 140ms ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-contact a:hover,
.footer-contact a:focus-visible {
  transform: translateX(4px);
  outline: none;
}

/* Smoother service underline override */
.service-card h3::before {
  width: 30px;
  height: 3px;
}

.service-card:hover h3::before,
.service-card:focus-within h3::before {
  animation: service-line-run-smooth 1.55s linear infinite;
}

@keyframes service-line-run-smooth {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  50% {
    opacity: 0.98;
  }
  93% {
    opacity: 1;
  }
  100% {
    transform: translateX(92px);
    opacity: 0;
  }
}

@media (max-width: 980px) {
  .hero-text {
    border-left: 0;
    padding-left: 0;
  }

  .process-board article {
    min-height: 0;
  }

  .cta-band-actions {
    align-self: auto;
  }
}

@media (max-width: 640px) {
  .case-section-actions {
    display: grid;
  }

  .case-section-actions a {
    width: 100%;
    min-width: 0;
  }

  .case-grid article,
  .case-card {
    padding-bottom: 20px;
  }

  .process-board article::after {
    position: static;
    display: block;
    margin-top: 18px;
  }
}


/* ===== Iteration 6: service icons as relevant pixel SVGs ===== */

.service-icon-svg {
  display: block;
  width: 48px;
  height: 40px;
  margin-bottom: 24px;
  overflow: visible;
  filter: drop-shadow(4px 4px 0 rgba(1, 9, 18, 0.42));
  transform: translateZ(0);
  transition:
    transform 160ms steps(4, end),
    filter 160ms steps(3, end);
}

.service-card:hover .service-icon-svg,
.service-card:focus-within .service-icon-svg {
  transform: translate(2px, -2px);
  filter:
    drop-shadow(4px 4px 0 rgba(1, 9, 18, 0.42))
    drop-shadow(0 0 9px rgba(121, 213, 223, 0.22));
}

.service-icon-svg rect,
.service-icon-svg path {
  transition:
    transform 180ms steps(4, end),
    opacity 140ms ease,
    filter 160ms steps(3, end);
  transform-box: fill-box;
  transform-origin: center;
}

.service-card:hover .service-icon-svg-web rect:nth-child(4),
.service-card:focus-within .service-icon-svg-web rect:nth-child(4) {
  transform: translateX(2px);
}

.service-card:hover .service-icon-svg-web rect:nth-child(6),
.service-card:focus-within .service-icon-svg-web rect:nth-child(6) {
  transform: translateX(-2px);
}

.service-card:hover .service-icon-svg-support,
.service-card:focus-within .service-icon-svg-support {
  transform: translate(2px, -2px) rotate(-3deg);
}

.service-card:hover .service-icon-svg-label path,
.service-card:focus-within .service-icon-svg-label path {
  transform: translateX(2px);
}

.service-card:hover .service-icon-svg-dev rect:nth-child(4),
.service-card:focus-within .service-icon-svg-dev rect:nth-child(4) {
  transform: translateY(-2px);
}

.service-card:hover .service-icon-svg-dev rect:nth-child(5),
.service-card:focus-within .service-icon-svg-dev rect:nth-child(5) {
  transform: translateY(2px);
}

/* Hide old pseudo-icon internals if an old class remains somewhere */
.service-card .service-icon-svg + h3 {
  margin-top: 0;
}


/* ===== Final fix: readable Support & Maintenance wrench ===== */
.service-card:hover .service-icon-svg-support,
.service-card:focus-within .service-icon-svg-support {
  transform: translate(2px, -2px);
}

.service-card:hover .service-icon-svg-support path:nth-child(2),
.service-card:focus-within .service-icon-svg-support path:nth-child(2) {
  transform: translate(1px, -1px);
}


/* ===== Final patch: Hero quick facts 3-card layout ===== */

.quick-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 860px;
  align-items: stretch;
}

.quick-fact-card {
  min-height: 128px;
}

.quick-fact-card .mini-card-inner {
  min-height: 128px;
}

.quick-fact-card .mini-card-face {
  min-height: 128px;
  padding: 16px 18px;
}

.quick-fact-card .mini-card-front > span {
  font-size: clamp(30px, 2.35vw, 40px);
  line-height: 0.9;
}

.quick-fact-card .mini-card-front > small {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
}

.quick-fact-card .mini-card-back {
  padding: 16px 18px;
}

.quick-fact-card .mini-card-back strong {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.2;
}

.quick-fact-card .mini-card-back > span {
  color: var(--soft);
  font-size: 13px;
  line-height: 1.4;
}

/* ===== CTA animated pips ===== */

.cta-btn::after {
  content: none !important;
  display: none !important;
}

.cta-btn {
  position: relative;
  overflow: hidden;
  padding-right: 48px;
}

.cta-btn .btn-label {
  position: relative;
  z-index: 2;
}

.cta-btn .btn-pips {
  position: absolute;
  right: 14px;
  bottom: 10px;
  display: inline-flex;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}

.cta-btn .btn-pips i {
  display: block;
  width: 10px;
  height: 4px;
  background: rgba(244, 199, 98, 0.42);
  box-shadow: 0 0 0 1px rgba(244, 199, 98, 0.08);
  opacity: 0.55;
  transform: translateY(0);
}

.cta-btn:hover .btn-pips i,
.cta-btn:focus-visible .btn-pips i {
  animation: cta-pip-load 0.9s linear infinite;
}

.cta-btn:hover .btn-pips i:nth-child(2),
.cta-btn:focus-visible .btn-pips i:nth-child(2) {
  animation-delay: 0.15s;
}

.cta-btn:hover .btn-pips i:nth-child(3),
.cta-btn:focus-visible .btn-pips i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes cta-pip-load {
  0% {
    opacity: 0.35;
    background: rgba(244, 199, 98, 0.28);
    transform: translateY(0);
  }

  35% {
    opacity: 1;
    background: #f4c762;
    box-shadow:
      0 0 8px rgba(244, 199, 98, 0.55),
      0 0 0 1px rgba(244, 199, 98, 0.18);
    transform: translateY(-1px);
  }

  100% {
    opacity: 0.4;
    background: rgba(244, 199, 98, 0.34);
    transform: translateY(0);
  }
}

/* ===== Final fix: readable Support & Maintenance wrench ===== */

.service-card:hover .service-icon-svg-support,
.service-card:focus-within .service-icon-svg-support {
  transform: translate(2px, -2px);
}

.service-card:hover .service-icon-svg-support path:nth-child(2),
.service-card:focus-within .service-icon-svg-support path:nth-child(2) {
  transform: translate(1px, -1px);
}

@media (max-width: 900px) {
  .quick-facts {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .quick-fact-card,
  .quick-fact-card .mini-card-inner,
  .quick-fact-card .mini-card-face {
    min-height: 128px;
  }
}


/* ===== Process cards: hammer flip interaction ===== */

.process-board {
  align-items: stretch;
}

.process-flip-card {
  position: relative;
  min-height: 236px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
  cursor: none;
  perspective: 900px;
}

.process-flip-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 5px;
}

.process-flip-inner {
  position: relative;
  display: block;
  min-height: 236px;
  transform-style: preserve-3d;
  transition: transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.process-flip-card.is-flipped .process-flip-inner {
  transform: rotateY(180deg);
}

.process-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(28, 47, 70, 0.88), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
  padding: clamp(22px, 2.4vw, 30px);
  backface-visibility: hidden;
  overflow: hidden;
}

.process-flip-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(76, 193, 255, 0.14), transparent 58%);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

.process-flip-card:hover .process-flip-face::before,
.process-flip-card:focus-visible .process-flip-face::before {
  opacity: 1;
}

.process-flip-face::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  height: 3px;
  background: linear-gradient(90deg, rgba(244, 199, 98, 0.48), rgba(121, 213, 223, 0.44), transparent);
  opacity: 0.38;
  transition: opacity 160ms ease, transform 160ms ease;
}

.process-flip-card:hover .process-flip-face::after,
.process-flip-card:focus-visible .process-flip-face::after {
  opacity: 0.86;
  transform: translateX(6px);
}

.process-flip-front h3 {
  margin: 18px 0 12px;
  font-family: "Space Mono", monospace;
  font-size: 22px;
  line-height: 1.18;
}

.process-flip-front p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.process-flip-back {
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(35, 58, 83, 0.94), rgba(18, 34, 55, 0.96));
  transform: rotateY(180deg);
}

.process-flip-back strong {
  display: block;
  margin-bottom: 14px;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: clamp(19px, 1.45vw, 24px);
  line-height: 1.18;
}

.process-flip-back > span {
  display: block;
  max-width: 48ch;
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: 15px;
  line-height: 1.55;
}

.process-flip-card .process-step-number {
  width: fit-content;
}

.process-flip-card:hover .process-step-number,
.process-flip-card:focus-visible .process-step-number {
  color: #ffe09a;
  border-color: rgba(244, 199, 98, 0.42);
  background: rgba(244, 199, 98, 0.1);
}

@media (hover: none) {
  .process-flip-card {
    cursor: pointer;
  }
}

@media (max-width: 980px) {
  .process-flip-card,
  .process-flip-inner {
    min-height: 224px;
  }
}

@media (max-width: 640px) {
  .process-flip-card,
  .process-flip-inner {
    min-height: 250px;
  }

  .process-flip-back strong {
    font-size: 18px;
  }

  .process-flip-back > span {
    font-size: 13px;
  }
}


/* ===== Logo asset path / sizing ===== */

.brand {
  width: 172px;
}

.brand img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}

@media (max-width: 640px) {
  .brand {
    width: 142px;
  }
}


/* ===== Footer real logo asset ===== */

.footer-brand-logo {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

.footer-brand-logo img {
  display: block;
  width: 230px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.footer-brand-logo .footer-brand-copy small {
  display: block;
  padding-left: 4px;
}

.footer-brand-logo:hover img,
.footer-brand-logo:focus-visible img {
  filter: drop-shadow(0 0 10px rgba(121, 213, 223, 0.18));
}

@media (max-width: 640px) {
  .footer-brand-logo img {
    width: 190px;
  }
}


/* ===== Footer logo size refinement ===== */

.footer-brand-logo img {
  width: 150px;
}

.footer-brand-logo .footer-brand-copy small {
  padding-left: 0;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.footer-brand-column p {
  max-width: 360px;
}

@media (max-width: 640px) {
  .footer-brand-logo img {
    width: 136px;
  }
}


/* ===== Header logo hover refinement ===== */

.brand {
  transition:
    transform 160ms steps(4, end),
    box-shadow 160ms steps(4, end),
    border-color 140ms steps(3, end),
    background 140ms steps(3, end);
}

.brand:hover,
.brand:focus-visible {
  transform: translate(-2px, -2px);
  border-color: rgba(159, 216, 244, 0.42);
  background: linear-gradient(180deg, rgba(13, 33, 53, 0.86), rgba(9, 20, 33, 0.48));
  box-shadow:
    5px 5px 0 rgba(2, 8, 16, 0.5),
    0 0 0 2px rgba(121, 213, 223, 0.08);
  outline: none;
}

.brand:hover img,
.brand:focus-visible img {
  filter: drop-shadow(0 0 10px rgba(121, 213, 223, 0.18));
}


/* ===== Header logo hover containment fix ===== */

.brand {
  overflow: hidden;
  transform: none !important;
}

.brand:hover,
.brand:focus-visible {
  transform: none !important;
  border-color: rgba(159, 216, 244, 0.42);
  background: linear-gradient(
    180deg,
    rgba(13, 33, 53, 0.72),
    rgba(9, 20, 33, 0.42)
  );
  box-shadow:
    inset 0 0 0 1px rgba(121, 213, 223, 0.08),
    0 0 14px rgba(121, 213, 223, 0.12);
  outline: none;
}

.brand img {
  transition:
    transform 160ms steps(4, end),
    filter 160ms steps(4, end);
}

.brand:hover img,
.brand:focus-visible img {
  transform: translate(-1px, -1px);
  filter: drop-shadow(0 0 10px rgba(121, 213, 223, 0.22));
}


/* ===== Footer structure aligned with current WP links ===== */

.footer-grid-wp {
  grid-template-columns: minmax(320px, 1.1fr) minmax(260px, 0.9fr) minmax(220px, 0.75fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: start;
}

.footer-grid-wp .footer-column h3 {
  margin-bottom: 22px;
}

.footer-contact-column {
  max-width: 540px;
}

.footer-contact-line {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  width: fit-content;
  color: var(--muted);
  text-decoration: none;
}

.footer-contact-icon {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  transform: translateY(1px);
}

.footer-contact-line:hover,
.footer-contact-line:focus-visible {
  color: var(--amber);
  outline: none;
}

.footer-contact-line:hover .footer-contact-icon,
.footer-contact-line:focus-visible .footer-contact-icon {
  color: var(--amber);
}

.footer-grid-wp .footer-nav {
  gap: 13px;
}

.footer-grid-wp .footer-nav a {
  font-size: 16px;
  line-height: 1.45;
}

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

  .footer-contact-column {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .footer-grid-wp {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-contact-line {
    grid-template-columns: 20px 1fr;
  }
}


/* ===== Cleaner services dropdown ===== */

.dropdown-panel {
  min-width: 330px;
  max-width: 360px;
  gap: 6px;
  padding: 12px;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(22, 39, 60, 0.98), rgba(12, 24, 39, 0.98));
  box-shadow:
    6px 6px 0 rgba(2, 8, 16, 0.48),
    0 0 0 1px rgba(121, 213, 223, 0.08);
}

.dropdown-panel-head {
  padding: 10px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(159, 216, 244, 0.22);
}

.dropdown-panel-head strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dropdown-panel-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.dropdown-panel a {
  position: relative;
  display: block;
  padding: 11px 12px 11px 26px;
  border: 2px solid transparent;
  background: rgba(10, 20, 33, 0.28);
  color: var(--soft);
  text-decoration: none;
  box-shadow: none;
}

.dropdown-panel a::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 16px;
  width: 6px;
  height: 6px;
  background: rgba(244, 199, 98, 0.9);
  box-shadow: 0 0 0 2px rgba(244, 199, 98, 0.12);
}

.dropdown-panel a strong {
  display: block;
  padding: 0;
  color: var(--soft);
  font-size: 12px;
  line-height: 1.35;
  text-transform: uppercase;
}

.dropdown-panel a small {
  display: block;
  padding: 0;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-transform: none;
}

.dropdown-panel a:hover,
.dropdown-panel a:focus-visible {
  border-color: rgba(159, 216, 244, 0.42);
  background: rgba(18, 35, 55, 0.92);
  outline: none;
}

.dropdown-panel a:hover strong,
.dropdown-panel a:focus-visible strong {
  color: var(--amber);
}

.dropdown-panel a:hover small,
.dropdown-panel a:focus-visible small {
  color: #c8d7e5;
}

/* Keep the menu compact on mobile too */
@media (max-width: 980px) {
  .site-header.menu-open .dropdown-panel {
    max-width: none;
    min-width: 0;
    padding: 10px;
  }

  .site-header.menu-open .dropdown-panel a {
    padding: 10px 12px 10px 26px;
  }
}


/* ===== Minimal services dropdown override ===== */

.dropdown-panel {
  min-width: 315px;
  max-width: 340px;
  gap: 0;
  padding: 10px;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(20, 36, 56, 0.98), rgba(12, 23, 38, 0.98));
  box-shadow:
    6px 6px 0 rgba(2, 8, 16, 0.48),
    0 0 0 1px rgba(121, 213, 223, 0.08);
}

.dropdown-panel-head {
  display: none !important;
}

.dropdown-panel a {
  position: relative;
  display: block;
  padding: 12px 12px 12px 26px;
  border: 0;
  border-bottom: 1px solid rgba(159, 216, 244, 0.14);
  background: transparent;
  color: var(--soft);
  text-decoration: none;
  box-shadow: none;
}

.dropdown-panel a:last-child {
  border-bottom: 0;
}

.dropdown-panel a::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 17px;
  width: 6px;
  height: 6px;
  background: rgba(244, 199, 98, 0.8);
  box-shadow: 0 0 0 2px rgba(244, 199, 98, 0.1);
}

.dropdown-panel a strong {
  display: block;
  padding: 0;
  color: var(--soft);
  font-size: 12px;
  line-height: 1.35;
  text-transform: uppercase;
}

.dropdown-panel a small {
  display: block;
  padding: 0;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-transform: none;
}

.dropdown-panel a:hover,
.dropdown-panel a:focus-visible {
  border-color: rgba(159, 216, 244, 0.14);
  background: rgba(18, 35, 55, 0.62);
  outline: none;
}

.dropdown-panel a:hover strong,
.dropdown-panel a:focus-visible strong {
  color: var(--amber);
}

.dropdown-panel a:hover small,
.dropdown-panel a:focus-visible small {
  color: #c8d7e5;
}

.dropdown-panel a:hover::before,
.dropdown-panel a:focus-visible::before {
  background: #f4c762;
  box-shadow:
    0 0 8px rgba(244, 199, 98, 0.38),
    0 0 0 2px rgba(244, 199, 98, 0.16);
}

@media (max-width: 980px) {
  .site-header.menu-open .dropdown-panel {
    max-width: none;
    min-width: 0;
    padding: 8px;
  }

  .site-header.menu-open .dropdown-panel a {
    padding: 11px 12px 11px 26px;
  }
}


/* ===== Services dropdown: terminal list style ===== */

.dropdown-panel {
  min-width: 330px;
  max-width: 360px;
  gap: 8px;
  padding: 14px;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(22, 39, 60, 0.98), rgba(12, 23, 38, 0.98));
  box-shadow:
    6px 6px 0 rgba(2, 8, 16, 0.48),
    0 0 0 1px rgba(121, 213, 223, 0.08);
}

.dropdown-panel-head {
  display: none !important;
}

.dropdown-panel a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 13px 18px;
  border: 0;
  border-bottom: 3px solid rgba(9, 19, 31, 0.8);
  background: rgba(22, 39, 60, 0.58);
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset -3px 0 0 rgba(2, 8, 16, 0.32);
}

.dropdown-panel a:last-child {
  border-bottom: 3px solid rgba(9, 19, 31, 0.8);
}

.dropdown-panel a::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 12px;
  background: rgba(244, 199, 98, 0.75);
  box-shadow: 0 0 0 2px rgba(244, 199, 98, 0.08);
  flex: 0 0 auto;
}

.dropdown-panel a strong {
  display: contents;
}

.dropdown-panel a small {
  display: none !important;
}

.dropdown-panel a:hover,
.dropdown-panel a:focus-visible {
  color: var(--amber);
  background: rgba(31, 52, 77, 0.9);
  outline: none;
  box-shadow:
    inset 3px 0 0 rgba(244, 199, 98, 0.75),
    inset -3px 0 0 rgba(121, 213, 223, 0.18);
}

.dropdown-panel a:hover::before,
.dropdown-panel a:focus-visible::before {
  background: #f4c762;
  box-shadow:
    0 0 8px rgba(244, 199, 98, 0.42),
    0 0 0 2px rgba(244, 199, 98, 0.16);
}

@media (max-width: 980px) {
  .site-header.menu-open .dropdown-panel {
    max-width: none;
    min-width: 0;
    padding: 10px;
    gap: 7px;
  }

  .site-header.menu-open .dropdown-panel a {
    min-height: 50px;
    padding: 12px 16px;
  }
}


/* ===== Services dropdown: compact no-dot version ===== */

.dropdown-panel {
  min-width: 320px;
  max-width: 350px;
  gap: 8px;
  padding: 14px;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(22, 39, 60, 0.98), rgba(12, 23, 38, 0.98));
  box-shadow:
    6px 6px 0 rgba(2, 8, 16, 0.48),
    0 0 0 1px rgba(121, 213, 223, 0.08);
}

.dropdown-panel-head {
  display: none !important;
}

.dropdown-panel a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 3px solid rgba(9, 19, 31, 0.82);
  background: rgba(22, 39, 60, 0.58);
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset -3px 0 0 rgba(2, 8, 16, 0.32);
}

.dropdown-panel a:last-child {
  border-bottom: 3px solid rgba(9, 19, 31, 0.82);
}

/* Remove the yellow dots from previous dropdown version */
.dropdown-panel a::before {
  content: none !important;
  display: none !important;
}

.dropdown-panel a strong {
  display: contents;
}

.dropdown-panel a small {
  display: none !important;
}

.dropdown-panel a:hover,
.dropdown-panel a:focus-visible {
  color: var(--amber);
  background: rgba(31, 52, 77, 0.9);
  outline: none;
  box-shadow:
    inset 3px 0 0 rgba(244, 199, 98, 0.75),
    inset -3px 0 0 rgba(121, 213, 223, 0.18);
}

@media (max-width: 980px) {
  .site-header.menu-open .dropdown-panel {
    max-width: none;
    min-width: 0;
    padding: 10px;
    gap: 7px;
  }

  .site-header.menu-open .dropdown-panel a {
    min-height: 48px;
    padding: 11px 16px;
  }
}


/* ===== Dropdown desktop alignment fix ===== */

.dropdown-panel a {
  justify-content: flex-start;
  text-align: left;
}

.dropdown-panel a strong,
.dropdown-panel a small {
  text-align: left;
}

.dropdown-panel a {
  padding-left: 18px;
  padding-right: 18px;
}


/* ===== Services page ===== */

.services-page-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.72fr);
  gap: clamp(36px, 5vw, 78px);
  width: min(100% - 64px, 1480px);
  margin: 0 auto;
  padding: clamp(92px, 10vw, 148px) 0 clamp(56px, 6vw, 90px);
}

.services-page-copy {
  position: relative;
  max-width: 930px;
}

.services-page-copy::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 4px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, rgba(121, 213, 223, 0.14), rgba(121, 213, 223, 0.85), rgba(121, 213, 223, 0.06));
  box-shadow: 0 0 14px rgba(121, 213, 223, 0.16);
  opacity: 0.72;
}

.services-page-copy h1 {
  max-width: 14ch;
}

.services-page-lead {
  max-width: 760px;
  margin-top: 22px;
  padding-left: 18px;
  border-left: 3px solid rgba(121, 213, 223, 0.34);
  color: var(--soft);
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.55;
}

.services-page-actions {
  margin-top: 30px;
}

.services-status-panel {
  align-self: center;
  min-height: 310px;
  padding: clamp(28px, 3vw, 42px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(37, 58, 86, 0.94), rgba(18, 31, 49, 0.92));
  box-shadow: var(--shadow);
}

.services-status-panel h2 {
  margin: 12px 0 18px;
  font-family: "Space Mono", monospace;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.05;
}

.services-status-panel p {
  color: var(--muted);
  line-height: 1.55;
}

.status-bar {
  height: 9px;
  margin-top: 28px;
  border: 3px solid rgba(2, 8, 16, 0.62);
  background: rgba(5, 13, 22, 0.8);
}

.status-bar span {
  display: block;
  width: 68%;
  height: 100%;
  background: linear-gradient(90deg, #7dd86c, #f4df60);
  box-shadow: 0 0 10px rgba(125, 216, 108, 0.22);
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.status-grid span {
  display: block;
  min-height: 58px;
  padding: 10px;
  border: 2px solid rgba(159, 216, 244, 0.38);
  background: rgba(10, 20, 33, 0.26);
  color: var(--soft);
  font-size: 12px;
  line-height: 1.35;
}

.status-grid strong {
  display: block;
  margin-bottom: 4px;
  color: var(--amber);
  font-size: 10px;
}

.services-overview,
.platforms-section,
.services-process,
.services-cta {
  position: relative;
  z-index: 1;
  width: min(100% - 64px, 1480px);
  margin: 0 auto;
  padding: clamp(48px, 5.6vw, 82px) 0;
}

.services-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.service-page-card {
  position: relative;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(30, 49, 73, 0.86), rgba(17, 31, 49, 0.94)),
    rgba(22, 36, 55, 0.88);
  box-shadow: var(--shadow);
  color: var(--soft);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 150ms steps(4, end),
    border-color 140ms steps(3, end),
    box-shadow 150ms steps(3, end),
    background 140ms steps(3, end);
}

.service-page-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(76, 193, 255, 0.14), transparent 58%);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

.service-page-card:hover,
.service-page-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(190, 233, 250, 0.98);
  box-shadow:
    8px 8px 0 rgba(2, 8, 16, 0.34),
    0 0 0 2px rgba(121, 213, 223, 0.08);
  outline: none;
}

.service-page-card:hover::before,
.service-page-card:focus-visible::before {
  opacity: 1;
}

.service-page-index {
  position: absolute;
  top: 22px;
  right: 22px;
  color: rgba(244, 199, 98, 0.8);
  font-size: 12px;
  font-weight: 800;
}

.service-page-card h3 {
  margin: 16px 0 16px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(21px, 1.6vw, 28px);
  line-height: 1.15;
}

.service-page-card p {
  color: var(--muted);
  line-height: 1.58;
}

.service-page-link {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding-top: 24px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service-page-card:hover .service-page-link,
.service-page-card:focus-visible .service-page-link {
  color: #ffe09a;
}

.service-proof-chips {
  justify-content: center;
  margin-top: 28px;
}

.services-process .process-board {
  margin-top: 30px;
}

.services-cta {
  padding-bottom: clamp(70px, 7vw, 110px);
}

@media (max-width: 1180px) {
  .services-page-hero {
    grid-template-columns: 1fr;
  }

  .services-page-copy h1 {
    max-width: 16ch;
  }

  .services-status-panel {
    align-self: stretch;
  }

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

  .service-page-card {
    min-height: 320px;
  }
}

@media (max-width: 760px) {
  .services-page-hero,
  .services-overview,
  .platforms-section,
  .services-process,
  .services-cta {
    width: min(100% - 32px, 1480px);
  }

  .services-page-copy::before {
    display: none;
  }

  .services-page-lead {
    padding-left: 0;
    border-left: 0;
  }

  .services-page-grid {
    grid-template-columns: 1fr;
  }

  .service-page-card {
    min-height: 0;
  }

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


/* ===== Footer logo restored ===== */

.footer-contact-column .footer-brand-logo {
  display: inline-flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  margin-bottom: 28px;
  color: var(--ink);
  text-decoration: none;
}

.footer-contact-column .footer-brand-logo img {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.footer-contact-column .footer-brand-logo .footer-brand-copy small {
  display: block;
  padding-left: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-contact-column .footer-brand-logo:hover img,
.footer-contact-column .footer-brand-logo:focus-visible img {
  filter: drop-shadow(0 0 10px rgba(121, 213, 223, 0.18));
}

@media (max-width: 640px) {
  .footer-contact-column .footer-brand-logo img {
    width: 136px;
  }
}


/* ===== Compact footer refinement ===== */

.site-footer {
  padding-top: 42px;
}

.footer-grid,
.footer-grid-wp {
  align-items: start;
  gap: clamp(34px, 6vw, 92px);
}

.footer-contact-column .footer-brand-logo {
  margin-bottom: 22px;
}

.footer-contact-column .footer-brand-logo img {
  width: 118px;
}

.footer-contact-column .footer-brand-logo .footer-brand-copy {
  display: none !important;
}

.footer-grid-wp .footer-column h3,
.footer-column h3 {
  margin-bottom: 16px;
}

.footer-contact,
.footer-nav {
  gap: 10px;
}

.footer-contact-line {
  line-height: 1.35;
}

.footer-grid-wp .footer-nav a,
.footer-nav a {
  font-size: 14px;
  line-height: 1.35;
}

.footer-bottom {
  margin-top: 28px;
  padding-top: 16px;
}

@media (max-width: 640px) {
  .site-footer {
    padding-top: 34px;
  }

  .footer-contact-column .footer-brand-logo img {
    width: 108px;
  }

  .footer-grid,
  .footer-grid-wp {
    gap: 26px;
  }
}


/* ===== Footer logo removed: compact final footer ===== */

.footer-contact-column .footer-brand-logo {
  display: none !important;
}

.site-footer {
  padding-top: 40px;
}

.footer-grid,
.footer-grid-wp {
  align-items: start;
  gap: clamp(36px, 7vw, 110px);
}

.footer-grid-wp .footer-column h3,
.footer-column h3 {
  margin-bottom: 16px;
}

.footer-contact,
.footer-nav {
  gap: 10px;
}

.footer-bottom {
  margin-top: 26px;
  padding-top: 16px;
}


/* ===== Services page rebuilt from current WordPress content ===== */

.wp-services-main {
  position: relative;
  overflow: hidden;
}

.wp-services-hero,
.wp-service-areas,
.wp-work-process,
.wp-prices,
.wp-why,
.wp-tech-stack,
.wp-faq,
.services-cta {
  position: relative;
  z-index: 1;
  width: min(100% - 64px, 1480px);
  margin: 0 auto;
}

.wp-services-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.58fr);
  gap: clamp(34px, 5vw, 80px);
  padding: clamp(92px, 10vw, 150px) 0 clamp(54px, 6vw, 88px);
}

.wp-services-hero-copy {
  position: relative;
  max-width: 930px;
}

.wp-services-hero-copy::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 6px;
  bottom: 10px;
  width: 3px;
  background: linear-gradient(180deg, rgba(121, 213, 223, 0.12), rgba(121, 213, 223, 0.88), rgba(121, 213, 223, 0.08));
  box-shadow: 0 0 14px rgba(121, 213, 223, 0.14);
}

.wp-services-hero h1 {
  max-width: 14ch;
}

.wp-services-lead {
  max-width: 800px;
  margin-top: 22px;
  padding-left: 18px;
  border-left: 3px solid rgba(121, 213, 223, 0.36);
  color: var(--soft);
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.55;
}

.wp-services-actions {
  margin-top: 30px;
}

.wp-services-terminal {
  align-self: center;
  padding: clamp(26px, 3vw, 40px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(37, 58, 86, 0.92), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
}

.wp-services-terminal h2 {
  margin: 12px 0 16px;
  font-family: "Space Mono", monospace;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.05;
}

.wp-services-terminal p {
  color: var(--muted);
  line-height: 1.56;
}

.terminal-rows {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.terminal-rows span {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid rgba(159, 216, 244, 0.34);
  background: rgba(9, 20, 34, 0.36);
  color: var(--soft);
  font-size: 13px;
  line-height: 1.35;
}

.terminal-rows strong {
  color: var(--amber);
  text-transform: uppercase;
}

.wp-service-areas,
.wp-work-process,
.wp-prices,
.wp-why,
.wp-tech-stack,
.wp-faq {
  padding: clamp(52px, 5.8vw, 86px) 0;
}

.section-intro {
  max-width: 920px;
  margin-top: 16px;
  color: var(--muted);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.65;
}

.wp-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.wp-service-card {
  position: relative;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(30, 49, 73, 0.86), rgba(17, 31, 49, 0.94)),
    rgba(22, 36, 55, 0.88);
  box-shadow: var(--shadow);
  color: var(--soft);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 150ms steps(4, end),
    border-color 140ms steps(3, end),
    box-shadow 150ms steps(3, end),
    background 140ms steps(3, end);
}

.wp-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(76, 193, 255, 0.14), transparent 58%);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

.wp-service-card:hover,
.wp-service-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(190, 233, 250, 0.98);
  outline: none;
  box-shadow:
    8px 8px 0 rgba(2, 8, 16, 0.34),
    0 0 0 2px rgba(121, 213, 223, 0.08);
}

.wp-service-card:hover::before,
.wp-service-card:focus-visible::before {
  opacity: 1;
}

.wp-service-card h3 {
  margin: 12px 0 14px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(22px, 1.6vw, 30px);
  line-height: 1.15;
}

.wp-service-card p {
  color: var(--muted);
  line-height: 1.58;
}

.wp-card-link {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding-top: 24px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service-icon-design,
.service-icon-custom {
  position: relative;
  display: block;
  width: 46px;
  height: 40px;
  margin-bottom: 24px;
  color: var(--amber);
}

.service-icon-design::before,
.service-icon-design::after,
.service-icon-design span,
.service-icon-custom::before,
.service-icon-custom::after,
.service-icon-custom span {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.service-icon-design::before {
  left: 7px;
  top: 5px;
  width: 28px;
  height: 22px;
  border: 3px solid rgba(159, 216, 244, 0.92);
  background: rgba(11, 26, 43, 0.72);
}

.service-icon-design::after {
  left: 13px;
  top: 11px;
  width: 16px;
  height: 10px;
  border-left: 4px solid var(--amber);
  border-bottom: 4px solid var(--amber);
  transform: rotate(-12deg);
}

.service-icon-design span {
  left: 10px;
  bottom: 4px;
  width: 24px;
  height: 4px;
  background: rgba(121, 213, 223, 0.84);
}

.service-icon-custom::before {
  left: 6px;
  top: 7px;
  width: 32px;
  height: 24px;
  border: 3px solid rgba(159, 216, 244, 0.92);
  background: rgba(11, 26, 43, 0.72);
}

.service-icon-custom::after {
  left: 14px;
  top: 14px;
  width: 18px;
  height: 3px;
  background: var(--amber);
  box-shadow: 0 7px 0 rgba(121, 213, 223, 0.78);
}

.service-icon-custom span {
  right: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(244, 199, 98, 0.14);
}

.wp-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.wp-process-grid .process-flip-card {
  min-height: 250px;
}

.wp-prices {
  max-width: 1280px;
}

.wp-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.wp-price-card {
  padding: clamp(26px, 3vw, 42px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(30, 49, 73, 0.86), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
}

.wp-price {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 800;
  line-height: 0.95;
}

.wp-price-card h3 {
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(24px, 2vw, 34px);
}

.wp-price-card p {
  color: var(--muted);
  line-height: 1.58;
}

.wp-price-card .secondary-action {
  margin-top: 22px;
}

.wp-why-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.wp-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.wp-why-card {
  min-height: 220px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(30, 49, 73, 0.86), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
}

.wp-why-card h3 {
  color: var(--ink);
  font-family: "Space Mono", monospace;
}

.wp-why-card p {
  color: var(--muted);
  line-height: 1.58;
}

.service-proof-chips {
  justify-content: center;
  margin-top: 28px;
}

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 980px;
  margin-top: 30px;
}

.faq-item {
  border: 3px solid rgba(159, 216, 244, 0.78);
  background:
    linear-gradient(180deg, rgba(24, 41, 63, 0.9), rgba(13, 25, 40, 0.94));
  box-shadow: var(--shadow);
}

.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 18px 58px 18px 22px;
  cursor: pointer;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 800;
  line-height: 1.3;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--amber);
  font-size: 24px;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-content {
  padding: 0 22px 22px;
  color: var(--muted);
  line-height: 1.65;
}

.faq-content p + p {
  margin-top: 12px;
}

.services-cta {
  padding: clamp(48px, 6vw, 88px) 0 clamp(70px, 7vw, 110px);
}

@media (max-width: 1180px) {
  .wp-services-hero,
  .wp-why-layout {
    grid-template-columns: 1fr;
  }

  .wp-service-grid,
  .wp-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wp-services-hero h1 {
    max-width: 16ch;
  }
}

@media (max-width: 820px) {
  .wp-services-hero,
  .wp-service-areas,
  .wp-work-process,
  .wp-prices,
  .wp-why,
  .wp-tech-stack,
  .wp-faq,
  .services-cta {
    width: min(100% - 32px, 1480px);
  }

  .wp-services-hero-copy::before {
    display: none;
  }

  .wp-services-lead {
    padding-left: 0;
    border-left: 0;
  }

  .wp-service-grid,
  .wp-process-grid,
  .wp-price-grid,
  .wp-why-grid {
    grid-template-columns: 1fr;
  }

  .terminal-rows span {
    grid-template-columns: 1fr;
  }
}


/* ===== Services page pipe background visibility fix ===== */

.pipes-bg-canvas,
#pipes-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}

.wp-services-main {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
}

.wp-services-main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(121, 213, 223, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 213, 223, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.45;
}

.wp-services-main > section,
.wp-services-main .site-footer {
  position: relative;
  z-index: 1;
}

/* Slightly more transparent cards so the repaired-pipes background is visible */
.wp-service-card,
.wp-price-card,
.wp-why-card,
.faq-item,
.wp-services-terminal {
  backdrop-filter: blur(1px);
}


/* ===== Services pipe background final fix ===== */

#pipes-bg,
.pipes-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  opacity: 1;
  pointer-events: auto;
  image-rendering: pixelated;
}

.wp-services-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
}

.wp-services-main > section {
  position: relative;
  z-index: 1;
}


/* ===== Services page iteration: full-width, simplified hero, richer interactions ===== */
.wp-services-hero,.wp-service-areas,.wp-work-process,.wp-prices,.wp-why,.wp-tech-stack,.wp-faq,.services-cta{width:min(100% - 48px,1760px)}
.wp-services-hero{grid-template-columns:1fr!important;min-height:min(78vh,860px);align-items:center;padding-top:clamp(88px,9vw,132px);padding-bottom:clamp(72px,8vw,118px)}
.wp-services-hero-copy{max-width:1120px}.wp-services-hero h1{max-width:16ch}.wp-services-lead{max-width:920px}
.wp-service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.wp-service-card{min-height:275px;transform-origin:50% 50%}.wp-service-card .wp-card-link{display:none!important}
.wp-service-card::after{content:"";position:absolute;left:24px;right:24px;bottom:22px;height:3px;background:linear-gradient(90deg,rgba(121,213,223,.95),rgba(244,199,98,.95),transparent 70%);transform:scaleX(.18);transform-origin:left center;opacity:.65;transition:transform 180ms steps(6,end),opacity 160ms ease}.wp-service-card:hover::after,.wp-service-card:focus-visible::after{transform:scaleX(1);opacity:1}.wp-service-card:hover h3,.wp-service-card:focus-visible h3{color:var(--amber)}.wp-service-card:hover .service-icon,.wp-service-card:focus-visible .service-icon{filter:drop-shadow(0 0 10px rgba(121,213,223,.18));transform:translateY(-2px)}.wp-service-card .service-icon{transition:transform 160ms steps(4,end),filter 160ms steps(4,end)}
.wp-prices{max-width:1760px}.pricing-heading{max-width:980px;margin-inline:auto;text-align:center}.pricing-heading .section-intro{margin-inline:auto}.pricing-orbit{position:relative;display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:18px;min-height:430px;margin-top:40px;perspective:1200px}.pricing-orbit:hover .pricing-float-card{animation-play-state:paused}.pricing-float-card{position:relative;min-height:360px;transform-style:preserve-3d;will-change:transform,filter;animation:priceFloat 7.5s ease-in-out infinite;transition:transform 230ms steps(6,end),filter 180ms ease,box-shadow 180ms steps(4,end),border-color 160ms steps(4,end)}.pricing-float-card:nth-child(2){animation-delay:-1.4s}.pricing-float-card:nth-child(3){animation-delay:-2.8s}.pricing-float-card:nth-child(4){animation-delay:-4.2s}@keyframes priceFloat{0%,100%{transform:translate3d(0,0,0) rotateZ(-.4deg)}25%{transform:translate3d(0,-16px,28px) rotateZ(.8deg)}50%{transform:translate3d(0,0,0) rotateZ(.2deg)}75%{transform:translate3d(0,14px,-12px) rotateZ(-.8deg)}}.pricing-float-card:hover,.pricing-float-card:focus-visible,.pricing-float-card.is-expanded{z-index:6;transform:translate3d(0,-34px,130px) scale(1.12) rotateZ(0deg)!important;border-color:rgba(244,199,98,.95);filter:drop-shadow(0 0 22px rgba(244,199,98,.24));box-shadow:0 0 0 2px rgba(244,199,98,.14),14px 14px 0 rgba(2,8,16,.34),0 0 46px rgba(121,213,223,.18);outline:none;animation-play-state:paused}.pricing-orbit:has(.pricing-float-card.is-expanded) .pricing-float-card:not(.is-expanded){transform:scale(.94);opacity:.82}.price-contact{display:inline-flex;width:fit-content;margin-top:22px;padding:14px 18px;border:3px solid rgba(159,216,244,.86);background:rgba(31,159,218,.88);color:#fff;font-family:"Space Mono",monospace;font-size:12px;font-weight:800;letter-spacing:.03em;text-decoration:none;text-transform:uppercase;box-shadow:4px 4px 0 rgba(2,8,16,.4),0 0 18px rgba(31,159,218,.12)}.price-contact:hover,.price-contact:focus-visible{background:rgba(244,199,98,.95);color:#081421;border-color:rgba(255,226,145,1);box-shadow:5px 5px 0 rgba(2,8,16,.48),0 0 24px rgba(244,199,98,.35);outline:none}
.tech-snake-wrap{position:relative;overflow:hidden;margin-top:34px;padding:38px 18px;border:3px solid rgba(159,216,244,.72);background:linear-gradient(180deg,rgba(22,39,60,.55),rgba(9,20,33,.42));box-shadow:var(--shadow)}.tech-snake{display:flex;width:max-content;flex-wrap:nowrap;gap:8px;justify-content:flex-start;animation:snakeLoop 18s linear infinite;will-change:transform}.tech-snake-wrap:hover .tech-snake,.tech-snake.is-dragging,.tech-snake.is-eyed{animation-play-state:paused}@keyframes snakeLoop{0%{transform:translateX(6%)}50%{transform:translateX(calc(-50% + min(70vw,840px)))}100%{transform:translateX(6%)}}.tech-snake .snake-chip,.tech-snake span{position:relative;flex:0 0 auto;cursor:grab;user-select:none;transition:transform 150ms steps(4,end),box-shadow 150ms steps(4,end),background 150ms steps(4,end)}.tech-snake .snake-chip:active{cursor:grabbing}.tech-snake .snake-chip:hover,.tech-snake .snake-chip:focus-visible,.tech-snake .snake-chip.is-drag-source{transform:translateY(-5px);box-shadow:0 0 0 2px rgba(244,199,98,.16),0 0 18px rgba(244,199,98,.18);outline:none}.tech-snake .snake-head{padding-left:28px;background:rgba(31,52,77,.86);border-color:rgba(244,199,98,.75)}.tech-snake .snake-head::before,.tech-snake .snake-head::after{content:"";position:absolute;opacity:0;pointer-events:none}.tech-snake .snake-head::before{left:10px;top:50%;width:9px;height:2px;background:var(--amber);box-shadow:5px 3px 0 var(--amber);transform:translateY(-50%)}.tech-snake-wrap:hover .snake-head::before{opacity:1}.tech-snake .snake-head::after{left:9px;top:-12px;width:7px;height:7px;background:#d8f6ff;box-shadow:13px 0 0 #d8f6ff;border-radius:50%;filter:drop-shadow(0 0 6px rgba(121,213,223,.5))}.tech-snake.is-eyed .snake-head::after,.tech-snake .snake-head.eyes-on::after{opacity:1}.tech-snake .snake-chip.eye-runner::after{content:"";position:absolute;left:50%;top:-12px;width:7px;height:7px;background:#d8f6ff;box-shadow:12px 0 0 #d8f6ff;border-radius:50%;transform:translateX(-50%);animation:eyeBlink 520ms steps(2,end) 1}@keyframes eyeBlink{0%,100%{opacity:1}50%{opacity:.35}}
.wp-faq .section-heading,.wp-faq .section-heading h2,.wp-faq .eyebrow{text-align:center}.wp-faq .faq-list{margin-left:auto;margin-right:auto}
@media(max-width:1180px){.pricing-orbit{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-float-card:hover,.pricing-float-card:focus-visible,.pricing-float-card.is-expanded{transform:translate3d(0,-18px,80px) scale(1.05)!important}}@media(max-width:820px){.wp-services-hero,.wp-service-areas,.wp-work-process,.wp-prices,.wp-why,.wp-tech-stack,.wp-faq,.services-cta{width:min(100% - 28px,1760px)}.pricing-orbit{grid-template-columns:1fr;min-height:0}.pricing-float-card{animation:none;min-height:0}.tech-snake-wrap{padding:24px 12px}}


/* ===== Requested services iteration refinements ===== */

/* Index: small CTA in What we handle */
.what-handle-services-cta {
  display: flex;
  justify-content: flex-start;
  margin-top: 22px;
}

.terminal-mini-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 12px 16px;
  border: 3px solid rgba(159, 216, 244, 0.82);
  background: rgba(13, 27, 44, 0.74);
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 rgba(2, 8, 16, 0.42);
  transition:
    transform 180ms steps(4, end),
    border-color 180ms steps(4, end),
    background 180ms steps(4, end);
}

.terminal-mini-link i {
  width: 18px;
  height: 4px;
  background: linear-gradient(90deg, var(--amber) 0 45%, transparent 45% 55%, var(--amber) 55% 100%);
  box-shadow: 0 0 10px rgba(244, 199, 98, 0.18);
}

.terminal-mini-link:hover,
.terminal-mini-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(244, 199, 98, 0.95);
  background: rgba(26, 48, 73, 0.92);
  outline: none;
}

/* Services hero centered and cleaner */
.wp-services-hero {
  grid-template-columns: 1fr !important;
  min-height: min(72vh, 820px);
  align-items: center;
  justify-items: center;
  text-align: center;
  padding-top: clamp(96px, 9vw, 140px);
  padding-bottom: clamp(74px, 8vw, 120px);
}

.wp-services-hero-copy {
  max-width: 1120px;
  margin-inline: auto;
}

.wp-services-hero-copy::before {
  display: none;
}

.wp-services-hero h1 {
  max-width: 15ch;
  margin-inline: auto;
}

.wp-services-lead {
  max-width: 900px;
  margin-inline: auto;
  padding-left: 0;
  border-left: 0;
}

.wp-services-actions {
  justify-content: center;
}

/* Unified service icons across index and services */
.service-unified-icon {
  display: block;
  width: 48px;
  height: 40px;
  margin-bottom: 24px;
  image-rendering: pixelated;
  transition: transform 180ms steps(4, end), filter 180ms steps(4, end);
}

.wp-service-card:hover .service-unified-icon,
.wp-service-card:focus-visible .service-unified-icon {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 10px rgba(121, 213, 223, 0.2));
}

.wp-service-card .service-icon {
  display: none !important;
}

/* Pricing: three cards, slower Hearthstone-like hover */
.pricing-orbit {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 22px;
  min-height: 430px;
}

.pricing-float-card {
  transition:
    transform 520ms cubic-bezier(.2,.9,.2,1),
    filter 420ms ease,
    box-shadow 420ms ease,
    border-color 360ms ease,
    opacity 320ms ease;
}

.pricing-float-card:hover,
.pricing-float-card:focus-visible,
.pricing-float-card.is-expanded {
  transform: translate3d(0, -28px, 110px) scale(1.08) rotateZ(0deg) !important;
}

.price-contact::after,
.price-contact .btn-pips {
  display: none !important;
  content: none !important;
}

.price-contact {
  transition:
    transform 260ms steps(5, end),
    background 260ms steps(5, end),
    box-shadow 260ms ease,
    border-color 260ms ease;
}

/* Why choose: subtle moving water/glow */
.wp-why-card {
  position: relative;
  overflow: hidden;
}

.wp-why-card::before {
  content: "";
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: -45%;
  height: 72%;
  background:
    radial-gradient(closest-side, rgba(121, 213, 223, 0.16), transparent 70%),
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.13), transparent);
  transform: translateX(-12%) rotate(2deg);
  animation: waterSweep 7s ease-in-out infinite;
  pointer-events: none;
}

.wp-why-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid transparent;
  box-shadow: inset 0 0 0 0 rgba(244, 199, 98, 0);
  pointer-events: none;
  transition: box-shadow 260ms ease;
}

.wp-why-card:hover::after,
.wp-why-card:focus-visible::after {
  box-shadow:
    inset 0 0 0 2px rgba(244, 199, 98, 0.3),
    inset 0 0 24px rgba(121, 213, 223, 0.14);
}

.wp-why-card h3,
.wp-why-card p {
  position: relative;
  z-index: 1;
}

@keyframes waterSweep {
  0%, 100% { transform: translateX(-16%) translateY(0) rotate(2deg); opacity: 0.42; }
  50% { transform: translateX(16%) translateY(-8px) rotate(-2deg); opacity: 0.72; }
}

/* Tech drops field on desktop */
.tech-drops-field {
  position: relative;
  display: block;
  height: 360px;
  margin-top: 34px;
  overflow: hidden;
  border: 3px solid rgba(159, 216, 244, 0.76);
  background:
    radial-gradient(circle at 50% 50%, rgba(121, 213, 223, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(22, 39, 60, 0.58), rgba(9, 20, 33, 0.48));
  box-shadow: var(--shadow);
}

.tech-drop {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 96px;
  height: 48px;
  padding: 0 18px;
  border: 3px solid rgba(159, 216, 244, 0.78);
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,0.24), transparent 18%),
    linear-gradient(180deg, rgba(53, 91, 124, 0.96), rgba(18, 48, 74, 0.96));
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow:
    inset 0 -8px 16px rgba(2, 8, 16, 0.16),
    0 0 18px rgba(121, 213, 223, 0.08);
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition:
    box-shadow 180ms ease,
    filter 180ms ease,
    border-color 180ms ease;
}

.tech-drop:hover,
.tech-drop:focus-visible,
.tech-drop.is-dragging {
  border-color: rgba(244, 199, 98, 0.94);
  filter: drop-shadow(0 0 12px rgba(244, 199, 98, 0.26));
  outline: none;
}

.tech-drop.is-dragging {
  cursor: grabbing;
  z-index: 4;
}

.tech-mobile-chips {
  display: none;
  justify-content: center;
  margin-top: 28px;
}

/* FAQ centered on desktop */
.wp-faq .section-heading,
.wp-faq .section-heading h2,
.wp-faq .eyebrow {
  text-align: center !important;
}

.wp-faq .faq-list {
  margin-left: auto !important;
  margin-right: auto !important;
}

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

  .pricing-float-card:hover,
  .pricing-float-card:focus-visible,
  .pricing-float-card.is-expanded {
    transform: translate3d(0, -18px, 70px) scale(1.045) !important;
  }
}

@media (max-width: 980px) {
  .pricing-orbit {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .pricing-float-card {
    animation: none;
    min-height: 0;
  }

  .pricing-float-card:hover,
  .pricing-float-card:focus-visible,
  .pricing-float-card.is-expanded {
    transform: translateY(-8px) scale(1.02) !important;
  }

  .tech-drops-field {
    display: none;
  }

  .tech-mobile-chips {
    display: flex;
  }
}

@media (max-width: 820px) {
  .wp-service-grid {
    grid-template-columns: 1fr;
  }

  .what-handle-services-cta {
    justify-content: flex-start;
  }
}


/* ===== Fix services CTA position ===== */

.what-handle-services-cta {
  display: none !important;
}

.all-services-page-cta {
  display: flex;
  justify-content: flex-start;
  margin-top: 24px;
}

.service-strip .all-services-page-cta {
  width: min(100%, 1480px);
}

.terminal-mini-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 12px 16px;
  border: 3px solid rgba(159, 216, 244, 0.82);
  background: rgba(13, 27, 44, 0.74);
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 rgba(2, 8, 16, 0.42);
  transition:
    transform 180ms steps(4, end),
    border-color 180ms steps(4, end),
    background 180ms steps(4, end);
}

.terminal-mini-link i {
  width: 18px;
  height: 4px;
  background: linear-gradient(90deg, var(--amber) 0 45%, transparent 45% 55%, var(--amber) 55% 100%);
  box-shadow: 0 0 10px rgba(244, 199, 98, 0.18);
}

.terminal-mini-link:hover,
.terminal-mini-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(244, 199, 98, 0.95);
  background: rgba(26, 48, 73, 0.92);
  outline: none;
}

/* ===== FAQ centering hard override ===== */

.wp-faq {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.wp-faq .section-heading {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.wp-faq .section-heading::after {
  margin-left: auto !important;
  margin-right: auto !important;
}

.wp-faq .section-heading *,
.wp-faq .eyebrow,
.wp-faq h2 {
  text-align: center !important;
}

.wp-faq .faq-list {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

.wp-faq .faq-item {
  text-align: left !important;
}

/* ===== Disable previous snake/droplet experiments ===== */

.tech-drops-field,
.tech-snake-wrap,
.tech-snake {
  display: none !important;
}

/* ===== Tech stack Pong mini-game ===== */

.tech-pong {
  display: block;
  margin-top: 34px;
}

.tech-pong-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
}

.tech-pong-hud button {
  min-height: 38px;
  padding: 8px 14px;
  border: 2px solid rgba(159, 216, 244, 0.82);
  background: rgba(13, 27, 44, 0.72);
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(2, 8, 16, 0.42);
}

.tech-pong-hud button:hover,
.tech-pong-hud button:focus-visible {
  border-color: rgba(244, 199, 98, 0.96);
  color: var(--amber);
  outline: none;
}

.tech-pong-field {
  position: relative;
  height: 430px;
  overflow: hidden;
  border: 3px solid rgba(159, 216, 244, 0.76);
  background:
    linear-gradient(rgba(121, 213, 223, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 213, 223, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(121, 213, 223, 0.07), transparent 56%),
    linear-gradient(180deg, rgba(22, 39, 60, 0.58), rgba(9, 20, 33, 0.5));
  background-size: 22px 22px, 22px 22px, auto, auto;
  box-shadow: var(--shadow);
}

.pong-bricks {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
}

.pong-brick {
  min-height: 44px;
  padding: 8px 10px;
  border: 3px solid rgba(159, 216, 244, 0.78);
  background:
    linear-gradient(180deg, rgba(53, 91, 124, 0.9), rgba(18, 48, 74, 0.9));
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow:
    inset 0 -6px 10px rgba(2, 8, 16, 0.18),
    3px 3px 0 rgba(2, 8, 16, 0.35);
  transition:
    opacity 160ms steps(4, end),
    transform 160ms steps(4, end),
    filter 160ms ease;
}

.pong-brick.is-hit {
  opacity: 0;
  transform: scale(0.78);
  filter: drop-shadow(0 0 18px rgba(244, 199, 98, 0.35));
  pointer-events: none;
}

.pong-ball {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(159, 216, 244, 0.95);
  background: var(--amber);
  box-shadow:
    0 0 12px rgba(244, 199, 98, 0.55),
    2px 2px 0 rgba(2, 8, 16, 0.4);
  transform: translate3d(50%, 50%, 0);
}

.pong-paddle {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 142px;
  height: 18px;
  border: 3px solid rgba(159, 216, 244, 0.95);
  background:
    linear-gradient(90deg, rgba(121, 213, 223, 0.96), rgba(244, 199, 98, 0.96));
  box-shadow:
    0 0 18px rgba(121, 213, 223, 0.24),
    4px 4px 0 rgba(2, 8, 16, 0.42);
  transform: translate3d(-50%, 0, 0);
}

.pong-message {
  position: absolute;
  inset: 44px;
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: clamp(26px, 4vw, 52px);
  border: 3px solid rgba(244, 199, 98, 0.94);
  background:
    radial-gradient(circle at 50% 20%, rgba(244, 199, 98, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(20, 36, 56, 0.97), rgba(9, 20, 33, 0.97));
  color: var(--soft);
  text-align: center;
  box-shadow:
    0 0 0 2px rgba(244, 199, 98, 0.14),
    0 0 50px rgba(244, 199, 98, 0.2),
    var(--shadow);
}

.pong-message[hidden] {
  display: none !important;
}

.pong-message h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(28px, 3.4vw, 54px);
  line-height: 1.05;
}

.pong-message p {
  max-width: 620px;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 980px) {
  .tech-pong {
    display: none;
  }

  .tech-mobile-chips {
    display: flex !important;
    justify-content: center;
    margin-top: 28px;
  }
}

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


/* ===== Pong launch state: ball starts attached to paddle ===== */

.tech-pong-field {
  cursor: none;
}

.tech-pong-field::after {
  content: "CLICK TO LAUNCH";
  position: absolute;
  left: 50%;
  bottom: 62px;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(244, 199, 98, 0.88);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.tech-pong-field.pong-ready::after {
  opacity: 1;
}

.tech-pong-field.pong-running::after,
.tech-pong-field.pong-won::after {
  opacity: 0;
}

.pong-ball {
  transition: box-shadow 160ms ease, filter 160ms ease;
}

.tech-pong-field.pong-ready .pong-ball {
  filter: drop-shadow(0 0 10px rgba(244, 199, 98, 0.36));
}


/* ===== Tech stack mobile/tablet copy ===== */

.tech-title-mobile,
.tech-intro-mobile {
  display: none;
}

@media (max-width: 980px) {
  .tech-title-desktop,
  .tech-intro-desktop {
    display: none !important;
  }

  .tech-title-mobile,
  .tech-intro-mobile {
    display: block;
  }

  .wp-tech-stack .section-heading {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .wp-tech-stack .section-intro {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ===== Website Support & Maintenance detail page ===== */
.service-detail-main{position:relative;overflow:hidden;isolation:isolate}.service-detail-main>section{position:relative;z-index:1;width:min(100% - 48px,1760px);margin:0 auto}.support-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.42fr);gap:clamp(34px,5vw,88px);min-height:min(82vh,880px);align-items:center;padding:clamp(96px,9vw,146px) 0 clamp(70px,7vw,114px)}.support-hero-copy{max-width:1080px}.support-hero h1{max-width:13ch}.support-lead{max-width:840px;margin-top:22px;color:var(--soft);font-size:clamp(18px,1.45vw,23px);line-height:1.58}.support-actions{margin-top:30px}.support-terminal{min-height:340px;padding:clamp(26px,3vw,40px);border:3px solid rgba(159,216,244,.86);background:linear-gradient(180deg,rgba(37,58,86,.92),rgba(17,31,49,.94));box-shadow:var(--shadow)}.support-terminal h2{margin:12px 0 20px;color:var(--ink);font-family:"Space Mono",monospace;font-size:clamp(29px,2.7vw,44px);line-height:1.05}.support-terminal ul{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}.support-terminal li{padding:11px 12px;border:2px solid rgba(159,216,244,.32);background:rgba(9,20,34,.36);color:var(--soft);font-size:13px;line-height:1.35}.support-terminal strong{color:var(--amber);text-transform:uppercase}.support-meter{height:10px;border:3px solid rgba(2,8,16,.62);background:rgba(5,13,22,.8);overflow:hidden}.support-meter span{display:block;height:100%;width:72%;background:linear-gradient(90deg,#7dd86c,#f4df60,#f4c762);animation:supportMeterPulse 2.6s steps(8,end) infinite}@keyframes supportMeterPulse{0%,100%{width:54%}50%{width:88%}}.support-section{padding:clamp(52px,5.8vw,90px) 0}.support-copy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}.support-copy-card,.support-number-card{position:relative;overflow:hidden;padding:clamp(24px,2.4vw,34px);border:3px solid rgba(159,216,244,.86);background:linear-gradient(180deg,rgba(30,49,73,.86),rgba(17,31,49,.94)),rgba(22,36,55,.88);box-shadow:var(--shadow)}.support-copy-card{min-height:300px}.support-copy-card:before,.support-number-card:before{content:"";position:absolute;inset:auto -40% -45%;height:70%;background:radial-gradient(closest-side,rgba(121,213,223,.16),transparent 70%),linear-gradient(90deg,transparent,rgba(121,213,223,.13),transparent);transform:translateX(-12%) rotate(2deg);animation:waterSweep 7s ease-in-out infinite;pointer-events:none}.support-copy-card span{display:inline-flex;color:var(--amber);font-family:"Space Mono",monospace;font-size:12px;font-weight:800}.support-copy-card h3,.support-number-card h3{position:relative;z-index:1;margin:14px 0;color:var(--ink);font-family:"Space Mono",monospace;font-size:clamp(21px,1.55vw,28px);line-height:1.15}.support-copy-card p,.support-rhythm-copy p{position:relative;z-index:1;color:var(--muted);line-height:1.62}.support-rhythm-card{display:grid;grid-template-columns:minmax(280px,.46fr) minmax(0,1fr);gap:clamp(28px,5vw,74px);padding:clamp(28px,4vw,58px);border:3px solid rgba(159,216,244,.86);background:linear-gradient(180deg,rgba(30,49,73,.76),rgba(17,31,49,.92));box-shadow:var(--shadow)}.support-rhythm-card h2{max-width:10ch}.support-rhythm-copy{display:grid;gap:16px}.support-number-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:30px}.support-number-card{min-height:240px}.support-number-card span{position:relative;z-index:1;display:block;margin-bottom:24px;color:rgba(244,199,98,.86);font-family:"Space Mono",monospace;font-size:clamp(42px,5vw,76px);font-weight:800;line-height:.9}.support-copy-card:hover,.support-number-card:hover{border-color:rgba(244,199,98,.9)}.support-process-board{margin-top:30px}.support-tech .section-heading,.support-faq .section-heading{text-align:center;margin-left:auto;margin-right:auto}.support-tech .section-heading:after,.support-faq .section-heading:after{margin-left:auto;margin-right:auto}.support-tech-chips{justify-content:center;margin-top:28px}.support-faq-list{width:min(100%,980px);margin-left:auto;margin-right:auto}.support-cta{padding-bottom:clamp(74px,7vw,116px)}@media(max-width:1180px){.support-hero,.support-rhythm-card{grid-template-columns:1fr}.support-hero h1{max-width:15ch}.support-copy-grid{grid-template-columns:1fr}.support-number-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){.service-detail-main>section{width:min(100% - 28px,1760px)}.support-hero{min-height:auto;padding-top:96px}.support-number-grid{grid-template-columns:1fr}.support-number-card{min-height:180px}}


/* ===== Support page iteration: hero service details, console flow, lively cards, Pong ===== */

.support-page-main .service-detail-hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.64fr);
}

.support-service-details-panel {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: clamp(26px, 3vw, 42px);
  border: 3px solid rgba(159, 216, 244, 0.9);
  background:
    linear-gradient(180deg, rgba(37, 58, 86, 0.82), rgba(17, 31, 49, 0.92));
  box-shadow: var(--shadow);
  isolation: isolate;
  transition:
    transform 220ms steps(5, end),
    border-color 220ms steps(5, end),
    box-shadow 220ms ease;
}

.support-service-details-panel::before {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -38%;
  height: 76%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(121, 213, 223, 0.18), transparent 70%),
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.14), transparent);
  transform: translateX(-12%) rotate(2deg);
  animation: supportPanelWater 7s ease-in-out infinite;
  pointer-events: none;
}

.support-service-details-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(244, 199, 98, 0.09), transparent);
  opacity: 0;
  transform: translateX(-80%);
  transition: opacity 220ms ease;
}

.support-service-details-panel:hover,
.support-service-details-panel:focus-within {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.95);
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.36),
    0 0 34px rgba(121, 213, 223, 0.18);
}

.support-service-details-panel:hover::after,
.support-service-details-panel:focus-within::after {
  opacity: 1;
  animation: supportPanelScan 1050ms steps(8, end) 1;
}

@keyframes supportPanelWater {
  0%, 100% { transform: translateX(-14%) translateY(0) rotate(2deg); opacity: 0.46; }
  50% { transform: translateX(18%) translateY(-10px) rotate(-2deg); opacity: 0.74; }
}

@keyframes supportPanelScan {
  from { transform: translateX(-80%); }
  to { transform: translateX(80%); }
}

.service-detail-panel-head h2 {
  max-width: 11ch;
  margin: 12px 0 18px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.08;
}

.service-detail-panel-copy {
  display: grid;
  gap: 14px;
  color: var(--muted);
  line-height: 1.58;
}

.support-water-window {
  position: relative;
  height: 12px;
  margin: 22px 0;
  border: 3px solid rgba(2, 8, 16, 0.54);
  background: rgba(5, 13, 22, 0.75);
  overflow: hidden;
}

.support-water-window span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  background: linear-gradient(90deg, rgba(125, 216, 108, 0.9), rgba(244, 223, 96, 0.92));
  animation: supportWaterSlug 2.4s steps(9, end) infinite;
}

.support-water-window span:nth-child(2) {
  animation-delay: 0.7s;
  opacity: 0.72;
}
.support-water-window span:nth-child(3) {
  animation-delay: 1.4s;
  opacity: 0.5;
}

@keyframes supportWaterSlug {
  0% { left: -36%; }
  100% { left: 104%; }
}

.service-detail-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.service-detail-panel-tags span {
  padding: 8px 10px;
  border: 2px solid rgba(159, 216, 244, 0.38);
  background: rgba(8, 18, 31, 0.46);
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

/* Replace three heavy cards with one support console */
.support-practical-console {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1760px);
  margin: 0 auto;
  padding: clamp(52px, 5.8vw, 90px) 0;
}

.support-console-card {
  display: grid;
  grid-template-columns: minmax(300px, 0.58fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 78px);
  padding: clamp(28px, 4vw, 58px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(30, 49, 73, 0.76), rgba(17, 31, 49, 0.92));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.support-console-card::before {
  content: "";
  position: absolute;
  inset: auto -20% 0;
  height: 45%;
  background: linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.12), transparent);
  animation: supportConsoleFlow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes supportConsoleFlow {
  0%, 100% { transform: translateX(-18%); opacity: 0.35; }
  50% { transform: translateX(18%); opacity: 0.7; }
}

.support-console-copy,
.support-console-flow {
  position: relative;
  z-index: 1;
}

.support-console-copy h2 {
  max-width: 13ch;
}

.support-console-copy p {
  color: var(--muted);
  line-height: 1.62;
}

.support-console-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.support-console-flow article {
  min-height: 210px;
  padding: 22px;
  border: 3px solid rgba(159, 216, 244, 0.64);
  background: rgba(9, 20, 34, 0.36);
  box-shadow: 5px 5px 0 rgba(2, 8, 16, 0.28);
  transition:
    transform 180ms steps(4, end),
    border-color 180ms steps(4, end),
    background 180ms steps(4, end);
}

.support-console-flow article:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.88);
  background: rgba(21, 41, 62, 0.72);
}

.support-console-flow span {
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 800;
}

.support-console-flow strong {
  display: block;
  margin: 16px 0 10px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(21px, 1.8vw, 30px);
}

.support-console-flow small {
  color: var(--muted);
  line-height: 1.45;
}

/* Livelier five-card support belt */
.support-belt-section {
  width: min(100% - 48px, 1760px);
  margin: 0 auto;
}

.support-belt {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.support-belt-card {
  position: relative;
  min-height: 270px;
  padding: clamp(22px, 2.3vw, 30px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(30, 49, 73, 0.84), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 190ms steps(4, end),
    border-color 190ms steps(4, end),
    box-shadow 190ms ease;
}

.support-belt-card::before {
  content: "";
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -46%;
  height: 74%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(121, 213, 223, 0.16), transparent 70%),
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.13), transparent);
  animation: waterSweep 7s ease-in-out infinite;
}

.support-belt-card:nth-child(2)::before { animation-delay: -1s; }
.support-belt-card:nth-child(3)::before { animation-delay: -2s; }
.support-belt-card:nth-child(4)::before { animation-delay: -3s; }
.support-belt-card:nth-child(5)::before { animation-delay: -4s; }

.support-belt-card::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  height: 3px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.95), rgba(244, 199, 98, 0.95), transparent 70%);
  transform: scaleX(0.18);
  transform-origin: left center;
  opacity: 0.65;
  transition: transform 180ms steps(6, end), opacity 160ms ease;
}

.support-belt-card:hover,
.support-belt-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(244, 199, 98, 0.9);
  box-shadow:
    8px 8px 0 rgba(2, 8, 16, 0.34),
    0 0 30px rgba(121, 213, 223, 0.14);
}

.support-belt-card:hover::after,
.support-belt-card:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

.support-belt-card span {
  display: block;
  color: rgba(244, 199, 98, 0.86);
  font-family: "Space Mono", monospace;
  font-size: clamp(38px, 4vw, 66px);
  font-weight: 800;
  line-height: 0.9;
}

.support-belt-card h3 {
  margin: 28px 0 12px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(19px, 1.4vw, 25px);
  line-height: 1.12;
}

.support-belt-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Tech Pong copied to support detail page */
.tech-title-mobile,
.tech-intro-mobile {
  display: none;
}

.tech-pong {
  display: block;
  margin-top: 34px;
}

.tech-pong-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
}

.tech-pong-hud button {
  min-height: 38px;
  padding: 8px 14px;
  border: 2px solid rgba(159, 216, 244, 0.82);
  background: rgba(13, 27, 44, 0.72);
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(2, 8, 16, 0.42);
}

.tech-pong-hud button:hover,
.tech-pong-hud button:focus-visible {
  border-color: rgba(244, 199, 98, 0.96);
  color: var(--amber);
  outline: none;
}

.tech-pong-field {
  position: relative;
  height: 430px;
  overflow: hidden;
  border: 3px solid rgba(159, 216, 244, 0.76);
  background:
    linear-gradient(rgba(121, 213, 223, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 213, 223, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(121, 213, 223, 0.07), transparent 56%),
    linear-gradient(180deg, rgba(22, 39, 60, 0.58), rgba(9, 20, 33, 0.5));
  background-size: 22px 22px, 22px 22px, auto, auto;
  box-shadow: var(--shadow);
  cursor: none;
}

.tech-pong-field::after {
  content: "CLICK TO LAUNCH";
  position: absolute;
  left: 50%;
  bottom: 62px;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(244, 199, 98, 0.88);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.tech-pong-field.pong-ready::after {
  opacity: 1;
}

.tech-pong-field.pong-running::after,
.tech-pong-field.pong-won::after {
  opacity: 0;
}

.pong-bricks {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
}

.pong-brick {
  min-height: 44px;
  padding: 8px 10px;
  border: 3px solid rgba(159, 216, 244, 0.78);
  background: linear-gradient(180deg, rgba(53, 91, 124, 0.9), rgba(18, 48, 74, 0.9));
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: inset 0 -6px 10px rgba(2, 8, 16, 0.18), 3px 3px 0 rgba(2, 8, 16, 0.35);
  transition: opacity 160ms steps(4, end), transform 160ms steps(4, end), filter 160ms ease;
}

.pong-brick.is-hit {
  opacity: 0;
  transform: scale(0.78);
  filter: drop-shadow(0 0 18px rgba(244, 199, 98, 0.35));
  pointer-events: none;
}

.pong-ball {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(159, 216, 244, 0.95);
  background: var(--amber);
  box-shadow: 0 0 12px rgba(244, 199, 98, 0.55), 2px 2px 0 rgba(2, 8, 16, 0.4);
  transform: translate3d(50%, 50%, 0);
}

.tech-pong-field.pong-ready .pong-ball {
  filter: drop-shadow(0 0 10px rgba(244, 199, 98, 0.36));
}

.pong-paddle {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 142px;
  height: 18px;
  border: 3px solid rgba(159, 216, 244, 0.95);
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.96), rgba(244, 199, 98, 0.96));
  box-shadow: 0 0 18px rgba(121, 213, 223, 0.24), 4px 4px 0 rgba(2, 8, 16, 0.42);
  transform: translate3d(-50%, 0, 0);
}

.pong-message {
  position: absolute;
  inset: 44px;
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: clamp(26px, 4vw, 52px);
  border: 3px solid rgba(244, 199, 98, 0.94);
  background:
    radial-gradient(circle at 50% 20%, rgba(244, 199, 98, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(20, 36, 56, 0.97), rgba(9, 20, 33, 0.97));
  color: var(--soft);
  text-align: center;
  box-shadow: 0 0 0 2px rgba(244, 199, 98, 0.14), 0 0 50px rgba(244, 199, 98, 0.2), var(--shadow);
}

.pong-message[hidden] {
  display: none !important;
}

.pong-message h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(28px, 3.4vw, 54px);
  line-height: 1.05;
}

.pong-message p {
  max-width: 620px;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .support-page-main .service-detail-hero,
  .support-console-card {
    grid-template-columns: 1fr;
  }

  .support-console-flow {
    grid-template-columns: 1fr;
  }

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

  .support-service-details-panel {
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .tech-pong {
    display: none;
  }

  .tech-mobile-chips {
    display: flex !important;
    justify-content: center;
    margin-top: 28px;
  }

  .tech-title-desktop,
  .tech-intro-desktop {
    display: none !important;
  }

  .tech-title-mobile,
  .tech-intro-mobile {
    display: block;
  }
}

@media (max-width: 820px) {
  .support-practical-console,
  .support-belt-section {
    width: min(100% - 28px, 1760px);
  }

  .support-belt {
    grid-template-columns: 1fr;
  }
}


/* ===== SUPPORT PAGE V3 VISIBLE PATCH ===== */
.support-page-main .support-hero{grid-template-columns:minmax(0,.92fr) minmax(420px,.64fr)!important}.support-service-details-panel{position:relative;overflow:hidden;min-height:430px;padding:clamp(26px,3vw,42px);border:3px solid rgba(159,216,244,.9);background:linear-gradient(180deg,rgba(37,58,86,.82),rgba(17,31,49,.92));box-shadow:var(--shadow);isolation:isolate;transition:transform .22s steps(5,end),border-color .22s steps(5,end),box-shadow .22s ease}.support-service-details-panel:before{content:"";position:absolute;left:-30%;right:-30%;bottom:-38%;height:76%;z-index:-1;background:radial-gradient(closest-side,rgba(121,213,223,.18),transparent 70%),linear-gradient(90deg,transparent,rgba(121,213,223,.14),transparent);animation:supportPanelWater 7s ease-in-out infinite}.support-service-details-panel:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent,rgba(244,199,98,.09),transparent);opacity:0;transform:translateX(-80%)}.support-service-details-panel:hover{transform:translateY(-4px);border-color:rgba(244,199,98,.95);box-shadow:10px 10px 0 rgba(2,8,16,.36),0 0 34px rgba(121,213,223,.18)}.support-service-details-panel:hover:after{opacity:1;animation:supportPanelScan 1050ms steps(8,end) 1}@keyframes supportPanelWater{0%,100%{transform:translateX(-14%) translateY(0) rotate(2deg);opacity:.46}50%{transform:translateX(18%) translateY(-10px) rotate(-2deg);opacity:.74}}@keyframes supportPanelScan{from{transform:translateX(-80%)}to{transform:translateX(80%)}}.service-detail-panel-head h2{max-width:11ch;margin:12px 0 18px;color:var(--ink);font-family:"Space Mono",monospace;font-size:clamp(30px,3vw,48px);line-height:1.08}.service-detail-panel-copy{display:grid;gap:14px;color:var(--muted);line-height:1.58}.support-water-window{position:relative;height:12px;margin:22px 0;border:3px solid rgba(2,8,16,.54);background:rgba(5,13,22,.75);overflow:hidden}.support-water-window span{position:absolute;top:0;bottom:0;width:32%;background:linear-gradient(90deg,rgba(125,216,108,.9),rgba(244,223,96,.92));animation:supportWaterSlug 2.4s steps(9,end) infinite}.support-water-window span:nth-child(2){animation-delay:.7s;opacity:.72}.support-water-window span:nth-child(3){animation-delay:1.4s;opacity:.5}@keyframes supportWaterSlug{0%{left:-36%}100%{left:104%}}.service-detail-panel-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.service-detail-panel-tags span{padding:8px 10px;border:2px solid rgba(159,216,244,.38);background:rgba(8,18,31,.46);color:var(--soft);font-family:"Space Mono",monospace;font-size:11px;font-weight:800;text-transform:uppercase}.support-practical-console{position:relative;z-index:1;width:min(100% - 48px,1760px);margin:0 auto;padding:clamp(52px,5.8vw,90px) 0}.support-console-card{position:relative;display:grid;grid-template-columns:minmax(300px,.58fr) minmax(0,1fr);gap:clamp(28px,5vw,78px);padding:clamp(28px,4vw,58px);border:3px solid rgba(159,216,244,.86);background:linear-gradient(180deg,rgba(30,49,73,.76),rgba(17,31,49,.92));box-shadow:var(--shadow);overflow:hidden}.support-console-card:before{content:"";position:absolute;inset:auto -20% 0;height:45%;background:linear-gradient(90deg,transparent,rgba(121,213,223,.12),transparent);animation:supportConsoleFlow 6s ease-in-out infinite}@keyframes supportConsoleFlow{0%,100%{transform:translateX(-18%);opacity:.35}50%{transform:translateX(18%);opacity:.7}}.support-console-copy,.support-console-flow{position:relative;z-index:1}.support-console-copy h2{max-width:13ch}.support-console-copy p{color:var(--muted);line-height:1.62}.support-console-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.support-console-flow article{min-height:210px;padding:22px;border:3px solid rgba(159,216,244,.64);background:rgba(9,20,34,.36);box-shadow:5px 5px 0 rgba(2,8,16,.28);transition:transform .18s steps(4,end),border-color .18s steps(4,end),background .18s steps(4,end)}.support-console-flow article:hover{transform:translateY(-4px);border-color:rgba(244,199,98,.88);background:rgba(21,41,62,.72)}.support-console-flow span{color:var(--amber);font-family:"Space Mono",monospace;font-size:13px;font-weight:800}.support-console-flow strong{display:block;margin:16px 0 10px;color:var(--ink);font-family:"Space Mono",monospace;font-size:clamp(21px,1.8vw,30px)}.support-console-flow small{color:var(--muted);line-height:1.45}.support-belt{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:30px}.support-belt-card{position:relative;min-height:270px;padding:clamp(22px,2.3vw,30px);border:3px solid rgba(159,216,244,.86);background:linear-gradient(180deg,rgba(30,49,73,.84),rgba(17,31,49,.94));box-shadow:var(--shadow);overflow:hidden;isolation:isolate;transition:transform .19s steps(4,end),border-color .19s steps(4,end),box-shadow .19s ease}.support-belt-card:before{content:"";position:absolute;left:-50%;right:-50%;bottom:-46%;height:74%;z-index:-1;background:radial-gradient(closest-side,rgba(121,213,223,.16),transparent 70%),linear-gradient(90deg,transparent,rgba(121,213,223,.13),transparent);animation:waterSweep 7s ease-in-out infinite}.support-belt-card:nth-child(2):before{animation-delay:-1s}.support-belt-card:nth-child(3):before{animation-delay:-2s}.support-belt-card:nth-child(4):before{animation-delay:-3s}.support-belt-card:nth-child(5):before{animation-delay:-4s}.support-belt-card:after{content:"";position:absolute;left:22px;right:22px;bottom:22px;height:3px;background:linear-gradient(90deg,rgba(121,213,223,.95),rgba(244,199,98,.95),transparent 70%);transform:scaleX(.18);transform-origin:left center;opacity:.65;transition:transform .18s steps(6,end),opacity .16s ease}.support-belt-card:hover{transform:translateY(-6px);border-color:rgba(244,199,98,.9);box-shadow:8px 8px 0 rgba(2,8,16,.34),0 0 30px rgba(121,213,223,.14)}.support-belt-card:hover:after{transform:scaleX(1);opacity:1}.support-belt-card span{display:block;color:rgba(244,199,98,.86);font-family:"Space Mono",monospace;font-size:clamp(38px,4vw,66px);font-weight:800;line-height:.9}.support-belt-card h3{margin:28px 0 12px;color:var(--ink);font-family:"Space Mono",monospace;font-size:clamp(19px,1.4vw,25px);line-height:1.12}.support-belt-card p{color:var(--muted);font-size:14px;line-height:1.45}.tech-title-mobile,.tech-intro-mobile{display:none}.tech-pong{display:block;margin-top:34px}.tech-pong-hud{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;color:var(--muted);font-family:"Space Mono",monospace;font-size:12px;text-transform:uppercase}.tech-pong-hud button{min-height:38px;padding:8px 14px;border:2px solid rgba(159,216,244,.82);background:rgba(13,27,44,.72);color:var(--ink);font-family:"Space Mono",monospace;font-size:11px;font-weight:800;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 rgba(2,8,16,.42)}.tech-pong-field{position:relative;height:430px;overflow:hidden;border:3px solid rgba(159,216,244,.76);background:linear-gradient(rgba(121,213,223,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(121,213,223,.035) 1px,transparent 1px),radial-gradient(circle at 50% 50%,rgba(121,213,223,.07),transparent 56%),linear-gradient(180deg,rgba(22,39,60,.58),rgba(9,20,33,.5));background-size:22px 22px,22px 22px,auto,auto;box-shadow:var(--shadow);cursor:none}.tech-pong-field:after{content:"CLICK TO LAUNCH";position:absolute;left:50%;bottom:62px;z-index:2;transform:translateX(-50%);color:rgba(244,199,98,.88);font-family:"Space Mono",monospace;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;opacity:0;transition:opacity .16s ease}.tech-pong-field.pong-ready:after{opacity:1}.tech-pong-field.pong-running:after,.tech-pong-field.pong-won:after{opacity:0}.pong-bricks{position:absolute;left:24px;right:24px;top:24px;display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px}.pong-brick{min-height:44px;padding:8px 10px;border:3px solid rgba(159,216,244,.78);background:linear-gradient(180deg,rgba(53,91,124,.9),rgba(18,48,74,.9));color:var(--ink);font-family:"Space Mono",monospace;font-size:12px;font-weight:800;text-transform:uppercase;box-shadow:inset 0 -6px 10px rgba(2,8,16,.18),3px 3px 0 rgba(2,8,16,.35);transition:opacity .16s steps(4,end),transform .16s steps(4,end),filter .16s ease}.pong-brick.is-hit{opacity:0;transform:scale(.78);filter:drop-shadow(0 0 18px rgba(244,199,98,.35));pointer-events:none}.pong-ball{position:absolute;width:18px;height:18px;border:3px solid rgba(159,216,244,.95);background:var(--amber);box-shadow:0 0 12px rgba(244,199,98,.55),2px 2px 0 rgba(2,8,16,.4);transform:translate3d(50%,50%,0)}.tech-pong-field.pong-ready .pong-ball{filter:drop-shadow(0 0 10px rgba(244,199,98,.36))}.pong-paddle{position:absolute;left:50%;bottom:28px;width:142px;height:18px;border:3px solid rgba(159,216,244,.95);background:linear-gradient(90deg,rgba(121,213,223,.96),rgba(244,199,98,.96));box-shadow:0 0 18px rgba(121,213,223,.24),4px 4px 0 rgba(2,8,16,.42);transform:translate3d(-50%,0,0)}.pong-message{position:absolute;inset:44px;z-index:5;display:grid;place-items:center;align-content:center;gap:16px;padding:clamp(26px,4vw,52px);border:3px solid rgba(244,199,98,.94);background:radial-gradient(circle at 50% 20%,rgba(244,199,98,.13),transparent 42%),linear-gradient(180deg,rgba(20,36,56,.97),rgba(9,20,33,.97));color:var(--soft);text-align:center;box-shadow:0 0 0 2px rgba(244,199,98,.14),0 0 50px rgba(244,199,98,.2),var(--shadow)}.pong-message[hidden]{display:none!important}.pong-message h3{margin:0;color:var(--ink);font-family:"Space Mono",monospace;font-size:clamp(28px,3.4vw,54px);line-height:1.05}.pong-message p{max-width:620px;color:var(--muted);line-height:1.55}@media(max-width:1180px){.support-page-main .support-hero,.support-console-card{grid-template-columns:1fr!important}.support-console-flow{grid-template-columns:1fr}.support-belt{grid-template-columns:repeat(2,minmax(0,1fr))}.support-service-details-panel{min-height:0}}@media(max-width:980px){.tech-pong{display:none}.tech-mobile-chips{display:flex!important;justify-content:center;margin-top:28px}.tech-title-desktop,.tech-intro-desktop{display:none!important}.tech-title-mobile,.tech-intro-mobile{display:block}}@media(max-width:820px){.support-practical-console,.support-belt-section{width:min(100% - 28px,1760px)}.support-belt{grid-template-columns:1fr}}


/* ===== SUPPORT PAGE V4 — centered hero, practical cards, manhole reveal ===== */

/* Hero centered + wide detail panel below */
.support-hero-v4 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: clamp(34px, 4vw, 58px) !important;
  min-height: auto !important;
  padding-top: clamp(96px, 9vw, 136px) !important;
  padding-bottom: clamp(58px, 6vw, 94px) !important;
  text-align: center;
}

.support-hero-centered {
  width: min(100%, 1060px);
  margin-inline: auto;
}

.support-hero-centered h1 {
  max-width: 13ch;
  margin-inline: auto;
}

.support-hero-lead {
  max-width: 880px;
  margin: 22px auto 0;
  color: var(--soft);
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.58;
}

.support-hero-actions {
  justify-content: center;
  margin-top: 30px;
}

.support-service-details-wide {
  width: min(100%, 1120px);
  min-height: 0 !important;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  transform-origin: center;
  transition:
    transform 520ms cubic-bezier(.2,.9,.2,1),
    border-color 420ms ease,
    box-shadow 420ms ease,
    filter 420ms ease;
}

.support-service-details-wide:hover,
.support-service-details-wide:focus-within {
  transform: translateY(-10px) scale(1.025) !important;
  border-color: rgba(244, 199, 98, 0.95) !important;
  filter: drop-shadow(0 0 18px rgba(244, 199, 98, 0.16));
  box-shadow:
    12px 12px 0 rgba(2, 8, 16, 0.38),
    0 0 42px rgba(121, 213, 223, 0.18) !important;
}

.support-service-details-wide .service-detail-panel-head {
  align-self: start;
}

.support-service-details-wide .service-detail-panel-head h2 {
  max-width: 11ch;
}

.support-service-details-wide .service-detail-panel-copy {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.support-service-details-wide .support-water-window {
  grid-column: 1;
  grid-row: 2;
}

.support-service-details-wide .service-detail-panel-tags {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.support-service-details-wide .support-water-window {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.support-service-details-wide:hover .support-water-window,
.support-service-details-wide:focus-within .support-water-window {
  opacity: 1;
  transform: translateY(0);
}

.support-service-details-wide .support-water-window span {
  animation-play-state: paused;
}

.support-service-details-wide:hover .support-water-window span,
.support-service-details-wide:focus-within .support-water-window span {
  animation-play-state: running;
}

/* Practical cards restored, no numbers */
.support-practical-cards {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1760px);
  margin: 0 auto;
  padding: clamp(52px, 5.8vw, 90px) 0;
}

.support-practical-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.support-practical-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  min-height: 330px;
  padding: clamp(26px, 2.6vw, 38px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(260px circle at var(--mx) var(--my), rgba(121, 213, 223, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(30, 49, 73, 0.86), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 420ms cubic-bezier(.2,.9,.2,1),
    border-color 320ms ease,
    box-shadow 320ms ease,
    filter 320ms ease;
}

.support-practical-card::before {
  content: "";
  position: absolute;
  left: -45%;
  right: -45%;
  bottom: -46%;
  height: 76%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(121, 213, 223, 0.18), transparent 70%),
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.14), transparent);
  transform: translateX(-14%) rotate(2deg);
  animation: waterSweep 7s ease-in-out infinite;
  pointer-events: none;
}

.support-practical-card:nth-child(2)::before { animation-delay: -1.5s; }
.support-practical-card:nth-child(3)::before { animation-delay: -3s; }

.support-practical-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(244, 199, 98, 0.14), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.support-practical-card:hover,
.support-practical-card:focus-visible {
  transform: translateY(-10px) scale(1.045);
  border-color: rgba(244, 199, 98, 0.92);
  filter: drop-shadow(0 0 18px rgba(244, 199, 98, 0.12));
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 32px rgba(121, 213, 223, 0.15);
}

.support-practical-card:hover::after,
.support-practical-card:focus-visible::after {
  opacity: 1;
}

.support-practical-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(22px, 1.65vw, 30px);
  line-height: 1.16;
}

.support-practical-card p {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.65;
}

.support-practical-card:hover p,
.support-practical-card:focus-visible p {
  color: var(--soft);
}

/* Manhole leak reveal cards */
.support-manhole-section {
  width: min(100% - 48px, 1760px);
  margin: 0 auto;
}

.support-manhole-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
  perspective: 1200px;
}

.support-manhole-card {
  position: relative;
  display: block;
  min-height: 300px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
}

.support-manhole-card::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 28px;
  height: 54px;
  background:
    radial-gradient(closest-side, rgba(121, 213, 223, 0.35), transparent 70%),
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.22), transparent);
  filter: blur(2px);
  opacity: 0.95;
  transform: scaleX(0.75);
  animation: leakPulse 1.4s steps(5, end) infinite;
  pointer-events: none;
}

.support-manhole-card.is-open::before {
  opacity: 0;
  animation: none;
}

@keyframes leakPulse {
  0%, 100% { transform: scaleX(0.55) translateY(0); opacity: 0.55; }
  50% { transform: scaleX(1.05) translateY(-6px); opacity: 0.95; }
}

.manhole-hatch,
.manhole-content {
  position: absolute;
  inset: 0;
  display: block;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(30, 49, 73, 0.9), rgba(17, 31, 49, 0.98));
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition:
    transform 620ms cubic-bezier(.2,.9,.2,1),
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.manhole-hatch {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.manhole-hatch::before {
  content: "";
  width: 118px;
  height: 118px;
  border: 8px solid rgba(159, 216, 244, 0.7);
  border-radius: 50%;
  background:
    repeating-linear-gradient(45deg, rgba(159, 216, 244, 0.22) 0 8px, transparent 8px 18px),
    radial-gradient(circle at 50% 45%, rgba(2, 8, 16, 0.44), rgba(2, 8, 16, 0.78));
  box-shadow:
    inset 0 0 0 8px rgba(2, 8, 16, 0.32),
    0 0 24px rgba(121, 213, 223, 0.16);
}

.manhole-hatch::after {
  content: "LEAK";
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.manhole-hatch i {
  position: absolute;
  width: 7px;
  height: 42px;
  left: 50%;
  bottom: 20px;
  background: linear-gradient(180deg, rgba(121, 213, 223, 0.9), transparent);
  box-shadow:
    -18px -12px 0 rgba(121, 213, 223, 0.42),
    21px -6px 0 rgba(121, 213, 223, 0.36);
  animation: leakDrop 900ms steps(4, end) infinite;
}

@keyframes leakDrop {
  0% { transform: translateY(-16px); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: translateY(32px); opacity: 0; }
}

.manhole-content {
  transform: rotateY(180deg);
  padding: clamp(22px, 2.3vw, 30px);
  overflow: hidden;
  isolation: isolate;
}

.manhole-content::before {
  content: "";
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -46%;
  height: 74%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(121, 213, 223, 0.16), transparent 70%),
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.13), transparent);
  animation: waterSweep 7s ease-in-out infinite;
}

.manhole-content strong {
  display: block;
  color: rgba(244, 199, 98, 0.86);
  font-family: "Space Mono", monospace;
  font-size: clamp(38px, 4vw, 66px);
  font-weight: 800;
  line-height: 0.9;
}

.manhole-content h3 {
  margin: 28px 0 12px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(19px, 1.4vw, 25px);
  line-height: 1.12;
}

.manhole-content p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.support-manhole-card.is-open .manhole-hatch {
  transform: rotateY(180deg) translateY(-10px);
}

.support-manhole-card.is-open .manhole-content {
  transform: rotateY(360deg);
  border-color: rgba(244, 199, 98, 0.88);
  box-shadow:
    8px 8px 0 rgba(2, 8, 16, 0.34),
    0 0 30px rgba(121, 213, 223, 0.14);
}

.support-manhole-card.is-open.is-bumped .manhole-content {
  animation: manholeBump 420ms steps(5, end) 1;
}

@keyframes manholeBump {
  0%, 100% { transform: rotateY(360deg) translateY(0); }
  35% { transform: rotateY(360deg) translateY(-10px); }
  70% { transform: rotateY(360deg) translateY(4px); }
}

@media (max-width: 1180px) {
  .support-service-details-wide {
    grid-template-columns: 1fr;
  }

  .support-service-details-wide .service-detail-panel-copy,
  .support-service-details-wide .support-water-window,
  .support-service-details-wide .service-detail-panel-tags {
    grid-column: 1;
    grid-row: auto;
  }

  .support-practical-grid {
    grid-template-columns: 1fr;
  }

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

  .support-manhole-card {
    min-height: 260px;
  }
}

@media (max-width: 820px) {
  .support-practical-cards,
  .support-manhole-section {
    width: min(100% - 28px, 1760px);
  }

  .support-manhole-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== SUPPORT HERO STACKED FIX ===== */

/* Force hero into vertical layout: centered intro first, details rectangle below */
.support-page-main .support-hero,
.support-page-main .support-hero-v4,
.support-page-main .support-hero-stacked {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: none !important;
  gap: clamp(34px, 4vw, 58px) !important;
  width: min(100% - 48px, 1760px) !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding-top: clamp(96px, 9vw, 138px) !important;
  padding-bottom: clamp(58px, 6vw, 96px) !important;
  text-align: center !important;
}

.support-page-main .support-hero-centered {
  width: min(100%, 1080px) !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.support-page-main .support-hero-centered h1 {
  max-width: 13ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.support-page-main .support-hero-lead {
  max-width: 920px !important;
  margin: 22px auto 0 !important;
  color: var(--soft);
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.58;
  text-align: center !important;
}

.support-page-main .support-hero-actions {
  justify-content: center !important;
  margin-top: 30px !important;
}

/* Rectangle below hero copy */
.support-page-main .support-details-rectangle {
  width: min(100%, 1180px) !important;
  min-height: 0 !important;
  display: block !important;
  text-align: left !important;
  padding: clamp(28px, 4vw, 48px) !important;
  transform-origin: center !important;
  transition:
    transform 520ms cubic-bezier(.2,.9,.2,1),
    border-color 420ms ease,
    box-shadow 420ms ease,
    filter 420ms ease !important;
}

.support-page-main .support-details-rectangle:hover,
.support-page-main .support-details-rectangle:focus-within {
  transform: translateY(-10px) scale(1.025) !important;
  border-color: rgba(244, 199, 98, 0.95) !important;
  filter: drop-shadow(0 0 18px rgba(244, 199, 98, 0.16));
  box-shadow:
    12px 12px 0 rgba(2, 8, 16, 0.38),
    0 0 42px rgba(121, 213, 223, 0.18) !important;
}

/* Content distribution inside the rectangle */
.support-page-main .support-details-top {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr) !important;
  gap: clamp(26px, 5vw, 78px) !important;
  align-items: start !important;
}

.support-page-main .support-details-title h2 {
  max-width: 10ch !important;
  margin: 12px 0 0 !important;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.08;
}

.support-page-main .support-details-copy {
  display: grid !important;
  gap: 16px !important;
  color: var(--muted);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.62;
}

.support-page-main .support-details-copy p {
  margin: 0 !important;
}

/* Loading strip appears only on hover */
.support-page-main .support-details-rectangle .support-water-window {
  width: 100% !important;
  height: 12px !important;
  margin: 26px 0 22px !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity 260ms ease, transform 260ms ease !important;
}

.support-page-main .support-details-rectangle:hover .support-water-window,
.support-page-main .support-details-rectangle:focus-within .support-water-window {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.support-page-main .support-details-rectangle .support-water-window span {
  animation-play-state: paused !important;
}

.support-page-main .support-details-rectangle:hover .support-water-window span,
.support-page-main .support-details-rectangle:focus-within .support-water-window span {
  animation-play-state: running !important;
}

/* Tags stay at the bottom of the rectangle */
.support-page-main .support-details-rectangle .service-detail-panel-tags {
  justify-content: flex-start !important;
  margin-top: 0 !important;
}

@media (max-width: 980px) {
  .support-page-main .support-hero,
  .support-page-main .support-hero-v4,
  .support-page-main .support-hero-stacked {
    width: min(100% - 28px, 1760px) !important;
    padding-top: 94px !important;
  }

  .support-page-main .support-details-top {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .support-page-main .support-details-title h2 {
    max-width: 12ch !important;
  }
}


/* ===== SUPPORT PAGE V6 — cleaner details panel + metal plate reveal ===== */

/* Cleaner rectangle details block */
.support-page-main .support-details-clean {
  width: min(100%, 1180px) !important;
  min-height: 0 !important;
  padding: clamp(30px, 4vw, 54px) !important;
  text-align: left !important;
  display: block !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(37, 58, 86, 0.78), rgba(17, 31, 49, 0.92)) !important;
}

.support-page-main .support-details-clean .support-details-layout {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr) !important;
  gap: clamp(34px, 6vw, 92px) !important;
  align-items: start !important;
}

.support-page-main .support-details-clean .support-details-title h2 {
  max-width: 10ch !important;
  margin: 12px 0 0 !important;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.08;
}

.support-page-main .support-details-clean .support-details-copy {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(22px, 3vw, 44px) !important;
  color: var(--muted);
  font-size: clamp(15px, 1.04vw, 18px);
  line-height: 1.66;
}

.support-page-main .support-details-clean .support-details-copy p {
  margin: 0 !important;
}

.support-page-main .support-details-clean:hover .support-details-copy,
.support-page-main .support-details-clean:focus-within .support-details-copy {
  color: var(--soft);
}

.support-hover-loader {
  position: relative;
  width: 100%;
  height: 9px;
  margin-top: clamp(26px, 3.5vw, 42px);
  border: 2px solid rgba(2, 8, 16, 0.56);
  background: rgba(5, 13, 22, 0.72);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.support-hover-loader span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 28%;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.1), rgba(125, 216, 108, 0.9), rgba(244, 223, 96, 0.94), rgba(121, 213, 223, 0.12));
  box-shadow: 0 0 18px rgba(244, 199, 98, 0.2);
  transform: translateX(-120%);
}

.support-details-clean:hover .support-hover-loader,
.support-details-clean:focus-within .support-hover-loader {
  opacity: 1;
  transform: translateY(0);
}

.support-details-clean:hover .support-hover-loader span,
.support-details-clean:focus-within .support-hover-loader span {
  animation: smoothLoaderSlide 1.85s linear infinite;
}

@keyframes smoothLoaderSlide {
  from { transform: translateX(-120%); }
  to { transform: translateX(430%); }
}

/* Remove previous tag / manhole visuals if old css is still present */
.support-details-clean .service-detail-panel-tags,
.support-details-clean .support-water-window,
.support-manhole-grid,
.support-manhole-card {
  display: none !important;
}

/* Metal plate reveal cards */
.support-plate-section {
  width: min(100% - 48px, 1760px);
  margin: 0 auto;
}

.support-plate-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
  perspective: 1200px;
}

.support-plate-card {
  position: relative;
  min-height: 300px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.2,.9,.2,1), filter 360ms ease;
}

.support-plate-card:hover,
.support-plate-card:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 16px rgba(121, 213, 223, 0.15));
}

.plate-cover,
.plate-content {
  position: absolute;
  inset: 0;
  display: block;
  border: 3px solid rgba(159, 216, 244, 0.86);
  box-shadow: var(--shadow);
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition:
    transform 760ms cubic-bezier(.2,.9,.2,1),
    opacity 520ms ease,
    border-color 360ms ease,
    box-shadow 360ms ease;
}

.plate-cover {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 18%),
    linear-gradient(180deg, rgba(50, 73, 96, 0.94), rgba(17, 31, 49, 0.98)),
    repeating-linear-gradient(90deg, rgba(159,216,244,0.07) 0 2px, transparent 2px 12px);
  isolation: isolate;
}

.plate-cover::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(159, 216, 244, 0.32);
  background:
    linear-gradient(120deg, transparent, rgba(159, 216, 244, 0.06), transparent),
    repeating-linear-gradient(135deg, rgba(159,216,244,0.10) 0 5px, transparent 5px 16px);
  box-shadow:
    inset 0 0 0 2px rgba(2,8,16,0.24),
    inset 0 0 22px rgba(2,8,16,0.26);
}

.plate-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(244,199,98,0.08), transparent);
  transform: translateX(-100%);
  animation: plateScan 3.4s steps(8, end) infinite;
}

@keyframes plateScan {
  0%, 55% { transform: translateX(-120%); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.plate-label {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: rgba(244, 199, 98, 0.95);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(244,199,98,0.18);
}

.plate-screw {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(159, 216, 244, 0.84);
  border-radius: 50%;
  background: rgba(4, 13, 23, 0.86);
  box-shadow:
    inset 0 0 0 2px rgba(244, 199, 98, 0.16),
    0 0 10px rgba(121, 213, 223, 0.10);
  transform: rotate(46deg);
  transition: transform 760ms cubic-bezier(.2,.9,.2,1), border-color 360ms ease, box-shadow 360ms ease;
}

.plate-screw::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  background: rgba(244, 199, 98, 0.9);
  transform: translateY(-50%);
}

.plate-screw.s1 { left: 18px; top: 18px; }
.plate-screw.s2 { right: 18px; top: 18px; transform: rotate(-31deg); }
.plate-screw.s3 { left: 18px; bottom: 18px; transform: rotate(76deg); }
.plate-screw.s4 { right: 18px; bottom: 18px; transform: rotate(18deg); }

.plate-leak {
  position: absolute;
  z-index: 1;
  width: 9px;
  height: 92px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(121, 213, 223, 0.9), rgba(121, 213, 223, 0.28), transparent);
  box-shadow:
    0 0 12px rgba(121, 213, 223, 0.35),
    0 0 24px rgba(121, 213, 223, 0.16);
  transform-origin: top center;
  animation: plateLeakBlast 920ms steps(5, end) infinite;
}

.plate-leak::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 38px;
  width: 20px;
  height: 20px;
  background:
    radial-gradient(circle, rgba(121,213,223,0.85) 0 20%, transparent 22%),
    radial-gradient(circle at 75% 25%, rgba(121,213,223,0.56) 0 18%, transparent 20%),
    radial-gradient(circle at 25% 75%, rgba(121,213,223,0.44) 0 16%, transparent 18%);
  filter: blur(0.2px);
  animation: plateSpray 920ms steps(4, end) infinite;
}

@keyframes plateLeakBlast {
  0% { opacity: 0.2; height: 28px; }
  35% { opacity: 0.95; height: 98px; }
  100% { opacity: 0.25; height: 56px; }
}

@keyframes plateSpray {
  0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.25; }
  50% { transform: translateY(18px) scale(1.1); opacity: 0.85; }
}

/* Randomized leak points and directions */
.leak-a .l1 { left: 22%; top: 14%; transform: rotate(36deg); }
.leak-a .l2 { right: 18%; top: 36%; transform: rotate(-58deg); animation-delay: -0.24s; }
.leak-a .l3 { left: 48%; bottom: 12%; transform: rotate(178deg); animation-delay: -0.5s; }

.leak-b .l1 { right: 24%; top: 16%; transform: rotate(-36deg); }
.leak-b .l2 { left: 17%; top: 48%; transform: rotate(76deg); animation-delay: -0.2s; }
.leak-b .l3 { right: 42%; bottom: 13%; transform: rotate(154deg); animation-delay: -0.46s; }

.leak-c .l1 { left: 20%; top: 24%; transform: rotate(56deg); }
.leak-c .l2 { right: 18%; top: 18%; transform: rotate(-42deg); animation-delay: -0.18s; }
.leak-c .l3 { left: 54%; bottom: 16%; transform: rotate(188deg); animation-delay: -0.43s; }

.leak-d .l1 { left: 34%; top: 14%; transform: rotate(18deg); }
.leak-d .l2 { right: 17%; top: 50%; transform: rotate(-76deg); animation-delay: -0.25s; }
.leak-d .l3 { left: 18%; bottom: 18%; transform: rotate(139deg); animation-delay: -0.52s; }

.leak-e .l1 { right: 30%; top: 18%; transform: rotate(-23deg); }
.leak-e .l2 { left: 19%; top: 38%; transform: rotate(66deg); animation-delay: -0.22s; }
.leak-e .l3 { right: 18%; bottom: 18%; transform: rotate(210deg); animation-delay: -0.55s; }

.plate-content {
  display: grid;
  align-content: start;
  padding: clamp(22px, 2.3vw, 30px);
  background:
    linear-gradient(180deg, rgba(30, 49, 73, 0.88), rgba(17, 31, 49, 0.96));
  opacity: 0;
  transform: scale(1.04);
  border-color: rgba(159, 216, 244, 0.86);
}

.plate-content::before {
  content: "";
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -48%;
  height: 76%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(121, 213, 223, 0.16), transparent 70%),
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.13), transparent);
  animation: waterSweep 7s ease-in-out infinite;
}

.plate-content strong {
  display: block;
  color: rgba(244, 199, 98, 0.86);
  font-family: "Space Mono", monospace;
  font-size: clamp(38px, 4vw, 66px);
  font-weight: 800;
  line-height: 0.9;
}

.plate-content h3 {
  margin: 28px 0 12px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(19px, 1.4vw, 25px);
  line-height: 1.12;
}

.plate-content p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 520ms ease 260ms, transform 520ms ease 260ms;
}

.support-plate-card.is-sealed {
  transform: scale(0.965);
}

.support-plate-card.is-sealed .plate-cover {
  opacity: 0;
  transform: scale(0.92) rotateX(8deg);
  pointer-events: none;
}

.support-plate-card.is-sealed .plate-content {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(244, 199, 98, 0.88);
  box-shadow:
    8px 8px 0 rgba(2, 8, 16, 0.34),
    0 0 30px rgba(121, 213, 223, 0.14);
}

.support-plate-card.is-sealed .plate-content p {
  opacity: 1;
  transform: translateY(0);
}

.support-plate-card.is-sealed .plate-screw {
  transform: rotate(360deg);
  border-color: rgba(244, 199, 98, 0.9);
  box-shadow:
    inset 0 0 0 2px rgba(244, 199, 98, 0.22),
    0 0 14px rgba(244, 199, 98, 0.18);
}

.support-plate-card.is-bumped .plate-content {
  animation: plateBump 420ms steps(5, end) 1;
}

@keyframes plateBump {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(0.94) translateY(3px); }
  70% { transform: scale(0.98) translateY(-2px); }
}

@media (max-width: 1180px) {
  .support-page-main .support-details-clean .support-details-layout,
  .support-page-main .support-details-clean .support-details-copy {
    grid-template-columns: 1fr !important;
  }

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

  .support-plate-card {
    min-height: 280px;
  }
}

@media (max-width: 820px) {
  .support-plate-section {
    width: min(100% - 28px, 1760px);
  }

  .support-plate-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== SUPPORT PAGE V7 — clean service panel + full-cover leaking lids ===== */

/* Service details: title above, two columns below */
.support-page-main .support-details-v7 {
  width: min(100%, 1180px) !important;
  min-height: 0 !important;
  display: block !important;
  padding: clamp(32px, 4.2vw, 58px) !important;
  text-align: left !important;
  border-color: rgba(159, 216, 244, 0.86) !important;
  background:
    linear-gradient(180deg, rgba(37, 58, 86, 0.74), rgba(17, 31, 49, 0.92)) !important;
}

.support-page-main .support-details-v7:hover,
.support-page-main .support-details-v7:focus-within {
  border-color: rgba(244, 199, 98, 0.94) !important;
}

.support-page-main .support-details-v7-head {
  width: min(100%, 760px);
  margin: 0 auto clamp(26px, 3vw, 38px);
  text-align: center;
}

.support-page-main .support-details-v7-head h2 {
  max-width: none !important;
  margin: 12px auto 0 !important;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(30px, 3.3vw, 52px);
  line-height: 1.08;
  text-align: center;
}

.support-page-main .support-details-v7-copy {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(28px, 5vw, 84px) !important;
  width: min(100%, 960px);
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.66;
}

.support-page-main .support-details-v7-copy p {
  margin: 0 !important;
}

.support-page-main .support-details-v7:hover .support-details-v7-copy,
.support-page-main .support-details-v7:focus-within .support-details-v7-copy {
  color: var(--soft);
}

/* Smooth loader only on hover */
.support-page-main .support-details-v7 .support-hover-loader {
  width: min(100%, 960px) !important;
  height: 8px !important;
  margin: clamp(28px, 3.6vw, 44px) auto 0 !important;
  border: 2px solid rgba(2, 8, 16, 0.62);
  background: rgba(5, 13, 22, 0.78);
  overflow: hidden;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity 300ms ease, transform 300ms ease !important;
}

.support-page-main .support-details-v7 .support-hover-loader span {
  display: block;
  width: 24%;
  height: 100%;
  background: linear-gradient(90deg, rgba(121,213,223,0.0), rgba(121,213,223,0.85), rgba(244,223,96,0.94), rgba(121,213,223,0.0));
  box-shadow: 0 0 18px rgba(244,199,98,0.22);
  transform: translateX(-130%);
}

.support-page-main .support-details-v7:hover .support-hover-loader,
.support-page-main .support-details-v7:focus-within .support-hover-loader {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.support-page-main .support-details-v7:hover .support-hover-loader span,
.support-page-main .support-details-v7:focus-within .support-hover-loader span {
  animation: supportLoaderV7 2.25s linear infinite !important;
}

@keyframes supportLoaderV7 {
  from { transform: translateX(-130%); }
  to { transform: translateX(520%); }
}

/* Hide old metal/plate/manhole systems if previous css remains */
.support-plate-grid,
.support-plate-card,
.support-manhole-grid,
.support-manhole-card,
.plate-cover,
.plate-content,
.manhole-hatch,
.manhole-content {
  display: none !important;
}

/* Full-card lid system */
.support-lid-section {
  width: min(100% - 48px, 1760px);
  margin: 0 auto;
}

.support-lid-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.support-lid-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  min-height: 310px;
  padding: clamp(22px, 2.3vw, 30px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(260px circle at var(--mx) var(--my), rgba(121,213,223,0.08), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 18%),
    linear-gradient(180deg, rgba(52, 72, 93, 0.94), rgba(18, 31, 49, 0.98));
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: visible;
  box-shadow: var(--shadow);
  transform: translateY(-8px) rotateX(1deg);
  transition:
    transform 620ms cubic-bezier(.2,.9,.2,1),
    border-color 360ms ease,
    box-shadow 360ms ease,
    filter 360ms ease,
    background 360ms ease;
  isolation: isolate;
}

.support-lid-card::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 0;
  border: 2px solid rgba(159, 216, 244, 0.28);
  background:
    linear-gradient(115deg, transparent, rgba(159,216,244,0.07), transparent),
    repeating-linear-gradient(135deg, rgba(159,216,244,0.10) 0 5px, transparent 5px 16px);
  box-shadow:
    inset 0 0 0 2px rgba(2,8,16,0.26),
    inset 0 0 22px rgba(2,8,16,0.22);
  pointer-events: none;
}

.support-lid-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(244,199,98,0.08), transparent);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
  animation: lidScanV7 3.8s steps(8, end) infinite;
}

@keyframes lidScanV7 {
  0%, 55% { transform: translateX(-120%); opacity: 0; }
  72% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* Open gap under lifted lid */
.lid-shadow-gap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -12px;
  z-index: -1;
  height: 26px;
  background:
    linear-gradient(180deg, rgba(1, 6, 12, 0.96), rgba(1, 6, 12, 0.08));
  box-shadow: 0 0 24px rgba(2, 8, 16, 0.8);
  opacity: 1;
  transition: opacity 420ms ease, transform 620ms cubic-bezier(.2,.9,.2,1);
}

/* Bolts are on the card corners */
.lid-bolt {
  position: absolute;
  z-index: 5;
  width: 19px;
  height: 19px;
  border: 3px solid rgba(159, 216, 244, 0.84);
  border-radius: 50%;
  background: rgba(4, 13, 23, 0.9);
  box-shadow:
    inset 0 0 0 2px rgba(244, 199, 98, 0.14),
    0 0 10px rgba(121, 213, 223, 0.12);
  transform: rotate(42deg);
  transition:
    transform 760ms cubic-bezier(.2,.9,.2,1),
    border-color 360ms ease,
    box-shadow 360ms ease;
}

.lid-bolt::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  background: rgba(244, 199, 98, 0.92);
  transform: translateY(-50%);
}

.lid-bolt.b1 { left: 16px; top: 16px; }
.lid-bolt.b2 { right: 16px; top: 16px; transform: rotate(-28deg); }
.lid-bolt.b3 { left: 16px; bottom: 16px; transform: rotate(76deg); }
.lid-bolt.b4 { right: 16px; bottom: 16px; transform: rotate(18deg); }

/* Pipe-like water jets from card edges */
.lid-water {
  position: absolute;
  z-index: 4;
  width: 11px;
  height: 108px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(121, 213, 223, 0.92), rgba(121, 213, 223, 0.35), transparent);
  box-shadow:
    0 0 10px rgba(121, 213, 223, 0.5),
    0 0 24px rgba(121, 213, 223, 0.22);
  transform-origin: top center;
  animation: lidJetV7 860ms steps(5, end) infinite;
  pointer-events: none;
}

.lid-water::before {
  content: "0\A1\A0\A1\A0\A0\A1";
  white-space: pre;
  position: absolute;
  left: -13px;
  top: 18px;
  color: rgba(121, 213, 223, 0.55);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  line-height: 0.88;
  text-shadow: 0 0 8px rgba(121, 213, 223, 0.45);
  animation: lidBitsV7 900ms steps(5, end) infinite;
}

.lid-water::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 42px;
  width: 30px;
  height: 30px;
  background:
    radial-gradient(circle, rgba(121,213,223,0.92) 0 14%, transparent 16%),
    radial-gradient(circle at 78% 25%, rgba(121,213,223,0.62) 0 14%, transparent 16%),
    radial-gradient(circle at 25% 78%, rgba(121,213,223,0.48) 0 13%, transparent 15%);
  filter: blur(0.25px);
  animation: lidSprayV7 860ms steps(4, end) infinite;
}

@keyframes lidJetV7 {
  0% { opacity: 0.22; height: 32px; }
  35% { opacity: 1; height: 112px; }
  100% { opacity: 0.35; height: 62px; }
}

@keyframes lidSprayV7 {
  0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.22; }
  50% { transform: translateY(20px) scale(1.12); opacity: 0.85; }
}

@keyframes lidBitsV7 {
  0% { transform: translateY(-8px); opacity: 0.2; }
  45% { opacity: 0.78; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* Randomized jets from edges */
.lid-leak-a .w1 { left: 20%; top: -8px; transform: rotate(18deg); }
.lid-leak-a .w2 { right: -4px; top: 40%; transform: rotate(-74deg); animation-delay: -0.2s; }
.lid-leak-a .w3 { left: 52%; bottom: -10px; transform: rotate(178deg); animation-delay: -0.45s; }

.lid-leak-b .w1 { right: 25%; top: -8px; transform: rotate(-18deg); }
.lid-leak-b .w2 { left: -4px; top: 45%; transform: rotate(72deg); animation-delay: -0.22s; }
.lid-leak-b .w3 { right: 42%; bottom: -10px; transform: rotate(160deg); animation-delay: -0.48s; }

.lid-leak-c .w1 { left: 28%; top: -8px; transform: rotate(12deg); }
.lid-leak-c .w2 { right: -4px; top: 28%; transform: rotate(-60deg); animation-delay: -0.18s; }
.lid-leak-c .w3 { left: -4px; bottom: 22%; transform: rotate(85deg); animation-delay: -0.5s; }

.lid-leak-d .w1 { left: 46%; top: -8px; transform: rotate(-8deg); }
.lid-leak-d .w2 { right: -4px; top: 52%; transform: rotate(-82deg); animation-delay: -0.2s; }
.lid-leak-d .w3 { left: 18%; bottom: -10px; transform: rotate(144deg); animation-delay: -0.55s; }

.lid-leak-e .w1 { right: 32%; top: -8px; transform: rotate(-20deg); }
.lid-leak-e .w2 { left: -4px; top: 35%; transform: rotate(68deg); animation-delay: -0.2s; }
.lid-leak-e .w3 { right: -4px; bottom: 24%; transform: rotate(-112deg); animation-delay: -0.52s; }

.lid-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  pointer-events: none;
  transition: opacity 480ms ease, transform 620ms cubic-bezier(.2,.9,.2,1);
}

.lid-face-label {
  color: rgba(244, 199, 98, 0.94);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lid-face-hint {
  color: rgba(210, 229, 239, 0.72);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.lid-content {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: start;
  min-height: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 640ms ease 250ms, transform 640ms ease 250ms;
  pointer-events: none;
}

.lid-content strong {
  display: block;
  color: rgba(244, 199, 98, 0.86);
  font-family: "Space Mono", monospace;
  font-size: clamp(38px, 4vw, 66px);
  font-weight: 800;
  line-height: 0.9;
}

.lid-content h3 {
  margin: 28px 0 12px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(19px, 1.4vw, 25px);
  line-height: 1.12;
}

.lid-content p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Sealed state: lid lowers, gap disappears, bolts tighten, leaks stop, text fades in */
.support-lid-card.is-sealed {
  transform: translateY(0) scale(0.965);
  border-color: rgba(244, 199, 98, 0.88);
  background:
    radial-gradient(260px circle at var(--mx) var(--my), rgba(244,199,98,0.08), transparent 62%),
    linear-gradient(180deg, rgba(31, 51, 75, 0.94), rgba(17, 31, 49, 0.98));
  box-shadow:
    8px 8px 0 rgba(2, 8, 16, 0.34),
    0 0 30px rgba(121, 213, 223, 0.14);
}

.support-lid-card.is-sealed .lid-shadow-gap {
  opacity: 0;
  transform: translateY(-14px) scaleY(0.2);
}

.support-lid-card.is-sealed .lid-water {
  opacity: 0;
  animation: none;
}

.support-lid-card.is-sealed .lid-face {
  opacity: 0;
  transform: translateY(-8px);
}

.support-lid-card.is-sealed .lid-content {
  opacity: 1;
  transform: translateY(0);
}

.support-lid-card.is-sealed .lid-bolt {
  transform: rotate(360deg);
  border-color: rgba(244, 199, 98, 0.92);
  box-shadow:
    inset 0 0 0 2px rgba(244, 199, 98, 0.22),
    0 0 14px rgba(244, 199, 98, 0.18);
}

.support-lid-card.is-bumped {
  animation: sealedBumpV7 420ms steps(5, end) 1;
}

@keyframes sealedBumpV7 {
  0%, 100% { transform: translateY(0) scale(0.965); }
  35% { transform: translateY(2px) scale(0.94); }
  70% { transform: translateY(-2px) scale(0.955); }
}

@media (max-width: 1180px) {
  .support-page-main .support-details-v7-copy {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

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

  .support-lid-card {
    min-height: 280px;
  }
}

@media (max-width: 820px) {
  .support-lid-section {
    width: min(100% - 28px, 1760px);
  }

  .support-lid-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== SUPPORT PAGE V8 — canvas water matching pipe background ===== */

/* Turn off old CSS-only water jets; canvas draws the water now */
.support-lid-card .lid-water,
.support-lid-card .lid-water::before,
.support-lid-card .lid-water::after {
  display: none !important;
  animation: none !important;
}

.lid-leak-canvas {
  position: absolute;
  inset: -36px;
  z-index: 4;
  width: calc(100% + 72px);
  height: calc(100% + 72px);
  pointer-events: none;
  image-rendering: pixelated;
}

/* Keep content and bolts above the leak canvas where needed */
.support-lid-card .lid-bolt {
  z-index: 7;
}

.support-lid-card .lid-face {
  z-index: 6;
}

.support-lid-card .lid-content {
  z-index: 8;
}

.support-lid-card.is-sealed .lid-leak-canvas {
  opacity: 0;
  transition: opacity 360ms ease;
}

/* Make the "unsealed" cover read more like one full loose panel */
.support-lid-card:not(.is-sealed) {
  transform: translateY(-10px) rotateX(1deg);
}

.support-lid-card:not(.is-sealed) .lid-shadow-gap {
  opacity: 1;
}


/* ===== SUPPORT PAGE V9 — tablet spacing + cleaner leaking panel labels ===== */

/* On tablet, remove the huge empty vertical areas in these cards */
@media (max-width: 1180px) {
  .support-practical-card {
    min-height: 0 !important;
    padding: clamp(22px, 3.4vw, 34px) !important;
  }

  .support-practical-grid {
    gap: 14px !important;
  }

  .support-practical-card h3 {
    margin-bottom: 12px !important;
  }

  .support-practical-card p {
    line-height: 1.55 !important;
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .support-practical-grid {
    grid-template-columns: 1fr !important;
  }

  .support-practical-card {
    min-height: 180px !important;
  }
}

@media (max-width: 820px) {
  .support-practical-card {
    min-height: 0 !important;
  }
}

/* Remove the text on the closed lids completely */
.lid-face,
.lid-face-label,
.lid-face-hint {
  display: none !important;
}

/* Give the canvas more room so fan-shaped leaks can shoot outside the card */
.lid-leak-canvas {
  inset: -86px !important;
  width: calc(100% + 172px) !important;
  height: calc(100% + 172px) !important;
  z-index: 6 !important;
}

/* Keep bolts and revealed text above the canvas */
.support-lid-card .lid-bolt {
  z-index: 8 !important;
}

.support-lid-card .lid-content {
  z-index: 9 !important;
}

/* Make the closed cover feel like a slightly lifted metal panel without inner label noise */
.support-lid-card:not(.is-sealed) {
  overflow: visible !important;
}

.support-lid-card:not(.is-sealed)::before {
  opacity: 0.85;
}

/* When sealed, make sure all leak canvas visuals disappear */
.support-lid-card.is-sealed .lid-leak-canvas {
  opacity: 0 !important;
  transition: opacity 360ms ease;
}


/* ===== SUPPORT PAGE V10 — exact edge-origin outward leaks ===== */

.lid-leak-canvas {
  inset: -86px !important;
  width: calc(100% + 172px) !important;
  height: calc(100% + 172px) !important;
  z-index: 6 !important;
  pointer-events: none !important;
  image-rendering: pixelated;
}

/* keep the card visible, but allow leak canvas to shoot outside */
.support-lid-card {
  overflow: visible !important;
}

/* the canvas itself draws only from the real card edge outward */
.support-lid-card .lid-water,
.support-lid-card .lid-water::before,
.support-lid-card .lid-water::after {
  display: none !important;
  animation: none !important;
}

.support-lid-card.is-sealed .lid-leak-canvas {
  opacity: 0 !important;
  transition: opacity 280ms ease;
}


/* ===== SUPPORT PAGE V11 — smooth leak shortening on seal ===== */

/* Keep the canvas visible while JS smoothly shortens the streams */
.support-lid-card.is-sealed .lid-leak-canvas {
  opacity: 1 !important;
}

.support-lid-card .lid-leak-canvas {
  will-change: transform, opacity;
}


/* ===== SUPPORT PAGE V12 — numeric spray only ===== */

.lid-leak-canvas {
  opacity: 1 !important;
}


/* ===== V13: softer lid underside + service page lid cards ===== */

/* Replace the black rectangle under lifted covers with a subtle recessed glow */
.lid-shadow-gap {
  left: 18px !important;
  right: 18px !important;
  bottom: -8px !important;
  height: 16px !important;
  background:
    radial-gradient(ellipse at center, rgba(2, 8, 16, 0.62), rgba(2, 8, 16, 0.10) 68%, transparent 72%) !important;
  box-shadow:
    0 8px 18px rgba(2, 8, 16, 0.45),
    0 0 16px rgba(121, 213, 223, 0.08) !important;
  opacity: 0.72 !important;
  border-radius: 50% !important;
}

.support-lid-card.is-sealed .lid-shadow-gap {
  opacity: 0 !important;
  transform: translateY(-8px) scaleY(0.1) !important;
}

/* Service page: apply the same leaking/locking panel mechanic to the 4 Why Choose cards */
.service-lid-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.service-lid-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  min-height: 260px;
  padding: clamp(22px, 2.3vw, 30px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(260px circle at var(--mx) var(--my), rgba(121,213,223,0.08), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 18%),
    linear-gradient(180deg, rgba(52, 72, 93, 0.94), rgba(18, 31, 49, 0.98));
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: visible;
  box-shadow: var(--shadow);
  transform: translateY(-8px) rotateX(1deg);
  transition:
    transform 620ms cubic-bezier(.2,.9,.2,1),
    border-color 360ms ease,
    box-shadow 360ms ease,
    filter 360ms ease,
    background 360ms ease;
  isolation: isolate;
}

.service-lid-card::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 0;
  border: 2px solid rgba(159, 216, 244, 0.28);
  background:
    linear-gradient(115deg, transparent, rgba(159,216,244,0.07), transparent),
    repeating-linear-gradient(135deg, rgba(159,216,244,0.10) 0 5px, transparent 5px 16px);
  box-shadow:
    inset 0 0 0 2px rgba(2,8,16,0.26),
    inset 0 0 22px rgba(2,8,16,0.22);
  pointer-events: none;
}

.service-lid-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(244,199,98,0.08), transparent);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
  animation: lidScanV7 3.8s steps(8, end) infinite;
}

.service-lid-card:hover,
.service-lid-card:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 16px rgba(121, 213, 223, 0.15));
}

.service-lid-card.is-sealed {
  transform: translateY(0) scale(0.965);
  border-color: rgba(244, 199, 98, 0.88);
  background:
    radial-gradient(260px circle at var(--mx) var(--my), rgba(244,199,98,0.08), transparent 62%),
    linear-gradient(180deg, rgba(31, 51, 75, 0.94), rgba(17, 31, 49, 0.98));
  box-shadow:
    8px 8px 0 rgba(2, 8, 16, 0.34),
    0 0 30px rgba(121, 213, 223, 0.14);
}

/* The services page cards share the same internal lid elements */
.service-lid-card .lid-bolt {
  z-index: 8;
}

.service-lid-card .lid-content {
  z-index: 9;
}

.service-lid-card .lid-leak-canvas {
  inset: -86px;
  width: calc(100% + 172px);
  height: calc(100% + 172px);
  z-index: 6;
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 1;
  will-change: transform, opacity;
}

.service-lid-card.is-sealed .lid-leak-canvas {
  opacity: 1 !important;
}

.service-lid-card .lid-content strong {
  display: block;
  color: rgba(244, 199, 98, 0.86);
  font-family: "Space Mono", monospace;
  font-size: clamp(36px, 3.2vw, 58px);
  font-weight: 800;
  line-height: 0.9;
}

.service-lid-card .lid-content h3 {
  margin: 24px 0 12px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(19px, 1.4vw, 25px);
  line-height: 1.12;
}

.service-lid-card .lid-content p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .service-lid-grid {
    grid-template-columns: 1fr;
  }

  .service-lid-card {
    min-height: 240px;
  }
}



/* ===== Page background dimming: services + support ===== */

/*
  Balanced, but close to subtle:
  - Services: lighter overlay so the overview page stays lively.
  - Support: slightly deeper overlay because the page has more text and interactive elements.
*/

.wp-services-main::after,
.service-detail-main::after,
.support-page-main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(3, 8, 14, 0.02), rgba(3, 8, 14, 0.08) 58%, rgba(3, 8, 14, 0.10));
}

/* Support page gets a tiny bit more depth */
.support-page-main::after,
.service-detail-main.support-page-main::after {
  background:
    radial-gradient(circle at 50% 18%, rgba(3, 8, 14, 0.03), rgba(3, 8, 14, 0.11) 58%, rgba(3, 8, 14, 0.13));
}

/* Keep page content and interactive elements above the overlay */
.wp-services-main > section,
.service-detail-main > section,
.support-page-main > section,
.wp-services-main .site-footer,
.service-detail-main .site-footer,
.support-page-main .site-footer {
  position: relative;
  z-index: 1;
}

/* Keep the pipe canvas behind the dimming layer */
#pipes-bg,
.pipes-bg-canvas {
  z-index: 0;
}


/* ===== V15: mobile fix for lid cards (prevent number overlapping bolt) ===== */

@media (max-width: 767px) {
  .support-lid-card,
  .service-lid-card {
    padding-top: 30px !important;
  }

  .support-lid-card::before,
  .service-lid-card::before {
    inset: 18px !important;
  }

  .support-lid-card .lid-bolt.b1,
  .service-lid-card .lid-bolt.b1 {
    top: 12px !important;
    left: 12px !important;
  }

  .support-lid-card .lid-bolt.b2,
  .service-lid-card .lid-bolt.b2 {
    top: 12px !important;
    right: 12px !important;
  }

  .support-lid-card .lid-bolt.b3,
  .service-lid-card .lid-bolt.b3 {
    bottom: 12px !important;
    left: 12px !important;
  }

  .support-lid-card .lid-bolt.b4,
  .service-lid-card .lid-bolt.b4 {
    bottom: 12px !important;
    right: 12px !important;
  }

  .support-lid-card .lid-content,
  .service-lid-card .lid-content {
    position: relative;
    z-index: 9;
    padding-top: 8px;
  }

  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    font-size: clamp(30px, 9.5vw, 42px) !important;
    line-height: 0.86 !important;
    margin: 6px 0 0 !important;
    padding-left: 10px !important;
    max-width: calc(100% - 48px);
  }

  .support-lid-card .lid-content h3,
  .service-lid-card .lid-content h3 {
    margin-top: 18px !important;
  }
}

@media (max-width: 479px) {
  .support-lid-card,
  .service-lid-card {
    padding: 24px 18px 18px !important;
    min-height: auto !important;
  }

  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    font-size: clamp(28px, 9vw, 36px) !important;
    padding-left: 12px !important;
  }

  .support-lid-card .lid-content h3,
  .service-lid-card .lid-content h3 {
    font-size: 17px !important;
    line-height: 1.12 !important;
  }

  .support-lid-card .lid-content p,
  .service-lid-card .lid-content p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}


/* ===== V16: separate tablet/mobile tuning for lid cards ===== */

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .support-lid-card,
  .service-lid-card {
    padding: 26px 20px 20px !important;
    min-height: 250px !important;
  }

  .support-lid-card::before,
  .service-lid-card::before {
    inset: 14px !important;
  }

  .support-lid-card .lid-bolt,
  .service-lid-card .lid-bolt {
    width: 17px !important;
    height: 17px !important;
    border-width: 2px !important;
  }

  .support-lid-card .lid-bolt::after,
  .service-lid-card .lid-bolt::after {
    left: 3px !important;
    right: 3px !important;
    height: 2px !important;
  }

  .support-lid-card .lid-bolt.b1,
  .service-lid-card .lid-bolt.b1 { top: 10px !important; left: 10px !important; }
  .support-lid-card .lid-bolt.b2,
  .service-lid-card .lid-bolt.b2 { top: 10px !important; right: 10px !important; }
  .support-lid-card .lid-bolt.b3,
  .service-lid-card .lid-bolt.b3 { bottom: 10px !important; left: 10px !important; }
  .support-lid-card .lid-bolt.b4,
  .service-lid-card .lid-bolt.b4 { bottom: 10px !important; right: 10px !important; }

  .support-lid-card .lid-content,
  .service-lid-card .lid-content {
    position: relative;
    z-index: 9;
    padding-top: 6px !important;
  }

  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    font-size: clamp(28px, 4.8vw, 40px) !important;
    line-height: 0.9 !important;
    margin: 8px 0 0 !important;
    padding-left: 20px !important;
    max-width: calc(100% - 64px) !important;
  }

  .support-lid-card .lid-content h3,
  .service-lid-card .lid-content h3 {
    margin: 18px 0 10px !important;
    font-size: clamp(17px, 2.2vw, 22px) !important;
    line-height: 1.12 !important;
  }

  .support-lid-card .lid-content p,
  .service-lid-card .lid-content p {
    font-size: 15px !important;
    line-height: 1.48 !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .support-lid-card,
  .service-lid-card {
    padding: 24px 18px 18px !important;
    min-height: auto !important;
  }

  .support-lid-card::before,
  .service-lid-card::before {
    inset: 16px !important;
  }

  .support-lid-card .lid-bolt,
  .service-lid-card .lid-bolt {
    width: 15px !important;
    height: 15px !important;
    border-width: 2px !important;
  }

  .support-lid-card .lid-bolt::after,
  .service-lid-card .lid-bolt::after {
    left: 3px !important;
    right: 3px !important;
    height: 2px !important;
  }

  .support-lid-card .lid-bolt.b1,
  .service-lid-card .lid-bolt.b1 { top: 10px !important; left: 10px !important; }
  .support-lid-card .lid-bolt.b2,
  .service-lid-card .lid-bolt.b2 { top: 10px !important; right: 10px !important; }
  .support-lid-card .lid-bolt.b3,
  .service-lid-card .lid-bolt.b3 { bottom: 10px !important; left: 10px !important; }
  .support-lid-card .lid-bolt.b4,
  .service-lid-card .lid-bolt.b4 { bottom: 10px !important; right: 10px !important; }

  .support-lid-card .lid-content,
  .service-lid-card .lid-content {
    position: relative;
    z-index: 9;
    padding-top: 6px !important;
  }

  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    font-size: clamp(26px, 8.5vw, 34px) !important;
    line-height: 0.88 !important;
    margin: 6px 0 0 !important;
    padding-left: 18px !important;
    max-width: calc(100% - 58px) !important;
  }

  .support-lid-card .lid-content h3,
  .service-lid-card .lid-content h3 {
    margin-top: 16px !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .support-lid-card .lid-content p,
  .service-lid-card .lid-content p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

/* Small phones */
@media (max-width: 479px) {
  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    font-size: clamp(24px, 8.5vw, 32px) !important;
    padding-left: 16px !important;
    max-width: calc(100% - 54px) !important;
  }

  .support-lid-card .lid-content h3,
  .service-lid-card .lid-content h3 {
    font-size: 17px !important;
  }
}


/* ===== V17: better inner spacing for lid cards on tablet/mobile ===== */

@media (min-width: 768px) and (max-width: 1024px) {
  .support-lid-card,
  .service-lid-card {
    padding: 28px 22px 24px !important;
    min-height: 270px !important;
  }

  .support-lid-card::before,
  .service-lid-card::before {
    inset: 15px !important;
  }

  .support-lid-card .lid-content,
  .service-lid-card .lid-content {
    padding: 8px 10px 16px 10px !important;
  }

  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    padding-left: 18px !important;
    max-width: calc(100% - 68px) !important;
  }

  .support-lid-card .lid-content h3,
  .service-lid-card .lid-content h3 {
    margin: 16px 0 12px !important;
    max-width: calc(100% - 8px) !important;
  }

  .support-lid-card .lid-content p,
  .service-lid-card .lid-content p {
    margin: 0 0 10px !important;
    max-width: calc(100% - 8px) !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 767px) {
  .support-lid-card,
  .service-lid-card {
    padding: 24px 18px 20px !important;
    min-height: 220px !important;
  }

  .support-lid-card::before,
  .service-lid-card::before {
    inset: 15px !important;
  }

  .support-lid-card .lid-content,
  .service-lid-card .lid-content {
    padding: 8px 10px 14px 10px !important;
  }

  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    padding-left: 16px !important;
    max-width: calc(100% - 62px) !important;
  }

  .support-lid-card .lid-content h3,
  .service-lid-card .lid-content h3 {
    margin: 14px 0 10px !important;
    max-width: calc(100% - 6px) !important;
  }

  .support-lid-card .lid-content p,
  .service-lid-card .lid-content p {
    margin: 0 0 8px !important;
    max-width: calc(100% - 6px) !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 479px) {
  .support-lid-card,
  .service-lid-card {
    padding: 22px 16px 18px !important;
    min-height: 210px !important;
  }

  .support-lid-card .lid-content,
  .service-lid-card .lid-content {
    padding: 8px 8px 12px 8px !important;
  }

  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    padding-left: 14px !important;
    max-width: calc(100% - 56px) !important;
  }

  .support-lid-card .lid-content h3,
  .service-lid-card .lid-content h3 {
    margin: 12px 0 8px !important;
    font-size: 16px !important;
  }

  .support-lid-card .lid-content p,
  .service-lid-card .lid-content p {
    font-size: 13px !important;
    line-height: 1.48 !important;
  }
}



/* ===== WEB DEVELOPMENT V25 — clean page styles, no conflicting patches ===== */

.web-development-clean-main {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
  background: #071421;
}

.web-development-clean-main > section {
  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: none;
  box-sizing: border-box;
}

.web-development-clean-main .wp-services-hero,
.web-development-clean-main .webdev-clean-story,
.web-development-clean-main .webdev-clean-capabilities,
.web-development-clean-main .webdev-clean-practical,
.web-development-clean-main .tech-strip,
.web-development-clean-main .wp-faq,
.web-development-clean-main .services-cta {
  padding-left: clamp(24px, 4vw, 72px);
  padding-right: clamp(24px, 4vw, 72px);
}

.web-development-clean-main .wp-services-hero-copy,
.web-development-clean-main .webdev-clean-story-card,
.web-development-clean-main .section-heading,
.web-development-clean-main .support-lid-grid,
.web-development-clean-main .support-practical-grid,
.web-development-clean-main .tech-heading,
.web-development-clean-main .tech-grid,
.web-development-clean-main .faq-list,
.web-development-clean-main .services-cta-card {
  width: min(100%, 1480px);
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero: same visual system as Services/Support */
.web-development-clean-main .webdev-clean-hero {
  min-height: min(82vh, 880px);
  display: grid;
  grid-template-columns: 1fr !important;
  place-items: center;
  text-align: center;
  padding-top: clamp(92px, 10vw, 150px);
  padding-bottom: clamp(64px, 8vw, 116px);
}

.web-development-clean-main .webdev-clean-hero .wp-services-hero-copy {
  max-width: 1120px;
  text-align: center;
}

.web-development-clean-main .webdev-clean-hero h1 {
  width: min(100%, 980px);
  max-width: 980px;
  margin: 0 auto 24px;
}

.web-development-clean-main .webdev-clean-hero .wp-services-lead {
  width: min(100%, 920px);
  max-width: 920px;
  margin: 0 auto;
}

/* Hero buttons: standard site buttons. Let the global .cta-btn animation work. */
.web-development-clean-main .webdev-clean-hero .hero-actions,
.web-development-clean-main .webdev-clean-hero .wp-services-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 34px auto 0;
}

.web-development-clean-main .webdev-clean-hero .primary-action,
.web-development-clean-main .webdev-clean-hero .secondary-action,
.web-development-clean-main .webdev-compact-cta-card .primary-action {
  min-width: 220px;
  min-height: 60px;
  padding: 16px 24px;
  font-size: 13px;
}

.web-development-clean-main .webdev-clean-hero .cta-btn,
.web-development-clean-main .webdev-compact-cta-card .cta-btn {
  padding-right: 48px;
}

/* Service details narrative panel: compact + support-like glow, no loader bar and no size jump */
.webdev-clean-story {
  padding-top: clamp(48px, 5.5vw, 82px);
  padding-bottom: clamp(48px, 5.5vw, 82px);
}

.web-development-clean-main .webdev-narrative-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 1320px);
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
  padding: clamp(32px, 3.6vw, 50px) clamp(28px, 4vw, 58px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(520px circle at var(--mx, 46%) var(--my, 44%), rgba(121, 213, 223, 0.075), transparent 62%),
    linear-gradient(180deg, rgba(37, 58, 86, 0.78), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
  transition:
    transform 360ms cubic-bezier(.2,.9,.2,1),
    border-color 320ms ease,
    box-shadow 320ms ease;
}

/* moving water glow above the panel background */
.web-development-clean-main .webdev-narrative-panel::before {
  content: "";
  position: absolute;
  left: -24%;
  right: -24%;
  bottom: -46%;
  height: 80%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(121, 213, 223, 0.16), transparent 70%),
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.12), transparent);
  transform: translateX(-14%) rotate(2deg);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: webdevServiceWaterClean 7s ease-in-out infinite;
}

.web-development-clean-main .webdev-narrative-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244, 199, 98, 0.08), transparent);
  opacity: 0;
  transform: translateX(-80%);
  mix-blend-mode: screen;
}

.web-development-clean-main .webdev-narrative-panel > * {
  position: relative;
  z-index: 1;
}

.web-development-clean-main .webdev-narrative-panel:hover,
.web-development-clean-main .webdev-narrative-panel:focus-within {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.95);
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 34px rgba(121, 213, 223, 0.18);
}

.web-development-clean-main .webdev-narrative-panel:hover::after,
.web-development-clean-main .webdev-narrative-panel:focus-within::after {
  opacity: 1;
  animation: webdevServiceScanClean 1.05s steps(10, end) forwards;
}

@keyframes webdevServiceWaterClean {
  0%, 100% {
    transform: translateX(-16%) translateY(0) rotate(2deg);
    opacity: 0.38;
  }
  50% {
    transform: translateX(18%) translateY(-10px) rotate(-2deg);
    opacity: 0.72;
  }
}

@keyframes webdevServiceScanClean {
  from { transform: translateX(-80%); }
  to { transform: translateX(84%); }
}

.web-development-clean-main .webdev-narrative-intro .eyebrow {
  margin: 0 0 16px;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.web-development-clean-main .webdev-narrative-intro h2 {
  max-width: 440px;
  margin: 0;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(28px, 2.55vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.web-development-clean-main .webdev-narrative-intro .panel-accent-line {
  display: block;
  width: 92px;
  height: 3px;
  margin: 22px 0 0;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.92), rgba(244, 199, 98, 0.58), transparent);
}

.web-development-clean-main .webdev-narrative-copy {
  max-width: 820px;
  display: grid;
  gap: 16px;
}

.web-development-clean-main .webdev-narrative-copy p {
  margin: 0;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.64;
}

/* Other WebDev sections */
.webdev-clean-capabilities,
.webdev-clean-practical,
.webdev-clean-tech,
.webdev-clean-faq,
.webdev-clean-cta {
  padding-top: clamp(56px, 7vw, 108px);
  padding-bottom: clamp(56px, 7vw, 108px);
}

.webdev-clean-lid-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.webdev-clean-practical-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.webdev-clean-faq .faq-list {
  width: min(100%, 1120px);
}

/* Compact final CTA */
.web-development-clean-main .webdev-clean-cta {
  padding-top: clamp(46px, 5.5vw, 82px);
  padding-bottom: clamp(56px, 6.5vw, 96px);
}

.web-development-clean-main .webdev-compact-cta-card {
  width: min(100%, 1320px);
  max-width: 1320px;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(26px, 4vw, 64px);
  padding: clamp(30px, 3.4vw, 46px) clamp(28px, 4vw, 58px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(460px circle at var(--mx, 52%) var(--my, 45%), rgba(121, 213, 223, 0.075), transparent 62%),
    linear-gradient(180deg, rgba(37, 58, 86, 0.78), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
  text-align: left;
  overflow: hidden;
}

.web-development-clean-main .webdev-compact-cta-copy {
  max-width: 800px;
}

.web-development-clean-main .webdev-compact-cta-copy .eyebrow {
  margin: 0 0 14px;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.web-development-clean-main .webdev-compact-cta-copy h2 {
  margin: 0;
  max-width: 760px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(28px, 3.05vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.web-development-clean-main .webdev-compact-cta-copy p:not(.eyebrow) {
  margin: 16px 0 0;
  max-width: 780px;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.62;
}

.web-development-clean-main .webdev-compact-cta-button {
  justify-self: end;
}

/* Hide accidental leftovers */
.web-development-clean-main .webdev-service-details-loader,
.web-development-clean-main .webdev-final-cta-actions,
.web-development-clean-main .webdev-clean-cta .secondary-action,
.web-development-clean-main .webdev-clean-cta .secondary-btn,
.web-development-clean-main .webdev-clean-cta a[href^="mailto"] {
  display: none !important;
}

/* Responsive */
@media (max-width: 1180px) {
  .web-development-clean-main .webdev-narrative-panel,
  .web-development-clean-main .webdev-compact-cta-card {
    grid-template-columns: 1fr;
  }

  .web-development-clean-main .webdev-narrative-intro h2,
  .web-development-clean-main .webdev-narrative-copy,
  .web-development-clean-main .webdev-compact-cta-copy,
  .web-development-clean-main .webdev-compact-cta-copy h2 {
    max-width: 900px;
  }

  .web-development-clean-main .webdev-compact-cta-button {
    justify-self: start;
  }

  .webdev-clean-lid-grid,
  .webdev-clean-practical-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .web-development-clean-main,
  main.web-development-clean-main.wp-services-main {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .web-development-clean-main > section {
    width: 100%;
  }

  .web-development-clean-main .wp-services-hero,
  .web-development-clean-main .webdev-clean-story,
  .web-development-clean-main .webdev-clean-capabilities,
  .web-development-clean-main .webdev-clean-practical,
  .web-development-clean-main .tech-strip,
  .web-development-clean-main .wp-faq,
  .web-development-clean-main .services-cta {
    padding-left: 16px;
    padding-right: 16px;
  }

  .web-development-clean-main .webdev-clean-hero {
    min-height: auto;
    text-align: left;
    place-items: start;
    padding-top: 92px;
    padding-bottom: 58px;
  }

  .web-development-clean-main .webdev-clean-hero .wp-services-hero-copy,
  .web-development-clean-main .webdev-clean-hero .eyebrow,
  .web-development-clean-main .webdev-clean-hero h1,
  .web-development-clean-main .webdev-clean-hero .wp-services-lead {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .web-development-clean-main .webdev-clean-hero h1 {
    font-size: clamp(52px, 17vw, 78px);
    line-height: 0.92;
  }

  .web-development-clean-main .webdev-clean-hero .wp-services-lead {
    font-size: 16px;
    line-height: 1.58;
  }

  .web-development-clean-main .webdev-clean-hero .hero-actions,
  .web-development-clean-main .webdev-clean-hero .wp-services-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: 340px;
    margin-left: 0;
  }

  .web-development-clean-main .webdev-clean-hero .primary-action,
  .web-development-clean-main .webdev-clean-hero .secondary-action,
  .web-development-clean-main .webdev-compact-cta-button {
    width: 100%;
    max-width: 340px;
    min-width: 0;
    min-height: 58px;
  }

  .web-development-clean-main .webdev-narrative-panel,
  .web-development-clean-main .webdev-compact-cta-card {
    padding: 28px 18px;
  }

  .web-development-clean-main .webdev-narrative-intro h2,
  .web-development-clean-main .webdev-compact-cta-copy h2 {
    font-size: clamp(28px, 8vw, 40px);
  }
}






/* ===== V31 — single clean compact CTA system, no duplicate blocks ===== */

body .compact-page-cta {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(46px, 5.5vw, 82px) clamp(24px, 4vw, 72px) clamp(56px, 6.5vw, 96px);
  box-sizing: border-box;
}

body .compact-page-cta .compact-page-cta-card {
  width: min(100%, 1320px);
  max-width: 1320px;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(26px, 4vw, 64px);
  margin: 0 auto;
  padding: clamp(30px, 3.4vw, 46px) clamp(28px, 4vw, 58px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(460px circle at var(--mx, 52%) var(--my, 45%), rgba(121, 213, 223, 0.075), transparent 62%),
    linear-gradient(180deg, rgba(37, 58, 86, 0.78), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
  text-align: left;
  overflow: hidden;
  position: relative;
}

body .compact-page-cta .compact-page-cta-copy {
  max-width: 800px;
  min-width: 0;
}

body .compact-page-cta .compact-page-cta-copy .eyebrow {
  margin: 0 0 14px;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: left;
}

body .compact-page-cta .compact-page-cta-copy h2 {
  margin: 0;
  max-width: 780px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(28px, 3.05vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-align: left;
  text-wrap: balance;
}

body .compact-page-cta .compact-page-cta-copy p:not(.eyebrow) {
  margin: 16px 0 0;
  max-width: 820px;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.62;
  text-align: left;
}

body .compact-page-cta .compact-page-cta-button {
  justify-self: end;
  align-self: center;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  height: 60px;
  min-height: 60px;
  padding: 16px 48px 16px 24px;
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
}

body .compact-page-cta .cta-btn::after {
  content: none !important;
  display: none !important;
}

body .compact-page-cta a[href^="mailto"],
body .compact-page-cta .secondary-action,
body .compact-page-cta .secondary-btn,
body .compact-page-cta .email-us-directly,
body .compact-page-cta .email-direct-action {
  display: none !important;
}

body .compact-page-cta .compact-page-cta-card:hover,
body .compact-page-cta .compact-page-cta-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(244, 199, 98, 0.82);
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 32px rgba(121, 213, 223, 0.14);
}

@media (max-width: 1180px) {
  body .compact-page-cta .compact-page-cta-card {
    grid-template-columns: 1fr;
  }

  body .compact-page-cta .compact-page-cta-button {
    justify-self: start;
  }
}

@media (max-width: 820px) {
  body .compact-page-cta {
    padding-left: 16px;
    padding-right: 16px;
  }

  body .compact-page-cta .compact-page-cta-card {
    padding: 28px 18px;
  }

  body .compact-page-cta .compact-page-cta-copy h2 {
    font-size: clamp(28px, 8vw, 40px);
  }

  body .compact-page-cta .compact-page-cta-button {
    width: 100%;
    max-width: 340px;
    min-width: 0;
  }
}


/* ===== V33 Pong guard ===== */
.pong-brick.is-hit {
  pointer-events: none;
}


/* ===== V34 Pong guard ===== */
.pong-brick.is-hit {
  pointer-events: none;
}


/* ===== V35 Pong guard ===== */
.pong-brick.is-hit {
  pointer-events: none;
}


/* ===== V36 Pong status guard ===== */
[data-tech-pong].pong-running [data-pong-status] {
  opacity: 1;
}


/* ===== V37 Pong guard ===== */
.pong-brick.is-hit {
  pointer-events: none;
}


/* ===== V38 — White-label Services page ===== */

.white-label-main {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
  background: #071421;
}

.white-label-main > section {
  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: none;
  box-sizing: border-box;
}

.white-label-main .wp-services-hero,
.white-label-main .webdev-clean-story,
.white-label-main .support-section,
.white-label-main .tech-strip,
.white-label-main .wp-faq,
.white-label-main .compact-page-cta {
  padding-left: clamp(24px, 4vw, 72px);
  padding-right: clamp(24px, 4vw, 72px);
}

.white-label-main .wp-services-hero {
  min-height: min(82vh, 880px);
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  text-align: center;
  padding-top: clamp(92px, 10vw, 150px);
  padding-bottom: clamp(64px, 8vw, 116px);
}

.white-label-main .wp-services-hero-copy {
  width: min(100%, 1120px);
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

.white-label-main .wp-services-hero h1 {
  width: min(100%, 980px);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.white-label-main .wp-services-lead {
  width: min(100%, 920px);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.white-label-main .wp-services-actions {
  justify-content: center;
}

.white-label-details-section {
  padding-top: clamp(48px, 5.5vw, 82px);
  padding-bottom: clamp(48px, 5.5vw, 82px);
}

.white-label-main .webdev-narrative-panel {
  width: min(100%, 1320px);
  max-width: 1320px;
  margin: 0 auto;
}

.white-label-lids {
  padding-top: clamp(56px, 7vw, 108px);
  padding-bottom: clamp(56px, 7vw, 108px);
}

.white-label-main .section-heading {
  width: min(100%, 1120px);
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.white-label-main .section-heading p:not(.eyebrow) {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.white-label-lid-grid {
  width: min(100%, 1480px);
  max-width: 1480px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.white-label-collab {
  padding-top: clamp(56px, 7vw, 108px);
  padding-bottom: clamp(56px, 7vw, 108px);
}

.white-card-grid {
  width: min(100%, 1480px);
  max-width: 1480px;
  margin: clamp(30px, 4vw, 54px) auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}

.white-card {
  position: relative;
  min-height: 245px;
  padding: 24px 18px;
  border: 3px solid rgba(159, 216, 244, 0.72);
  background:
    radial-gradient(260px circle at var(--mx, 52%) var(--my, 48%), rgba(121, 213, 223, 0.08), transparent 66%),
    linear-gradient(180deg, rgba(37, 58, 86, 0.76), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.white-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(159, 216, 244, 0.22);
  pointer-events: none;
}

.white-card:hover {
  border-color: rgba(244, 199, 98, 0.86);
  transform: translateY(-4px);
}

.white-card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 34px;
  margin-bottom: 20px;
  border: 2px solid rgba(244, 199, 98, 0.7);
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-weight: 800;
  font-size: 13px;
  background: rgba(6, 15, 25, 0.56);
}

.white-card h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.18;
}

.white-card p {
  margin: 0;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: 14px;
  line-height: 1.55;
}

.white-label-tech {
  padding-top: clamp(56px, 7vw, 108px);
  padding-bottom: clamp(56px, 7vw, 108px);
}

.white-label-main .tech-heading,
.white-label-main .tech-grid {
  margin-left: auto;
  margin-right: auto;
}

.white-label-faq {
  padding-top: clamp(56px, 7vw, 108px);
  padding-bottom: clamp(56px, 7vw, 108px);
}

.white-label-faq .faq-list {
  width: min(100%, 1120px);
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.compact-page-cta-white-label .compact-page-cta-copy {
  max-width: 860px;
}

.compact-page-cta-white-label .compact-page-cta-copy h2 {
  max-width: 820px;
}

@media (max-width: 1180px) {
  .white-label-lid-grid,
  .white-card-grid {
    grid-template-columns: 1fr;
  }

  .white-card {
    min-height: auto;
  }
}

@media (max-width: 820px) {
  .white-label-main {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .white-label-main > section {
    width: 100%;
  }

  .white-label-main .wp-services-hero,
  .white-label-main .webdev-clean-story,
  .white-label-main .support-section,
  .white-label-main .tech-strip,
  .white-label-main .wp-faq,
  .white-label-main .compact-page-cta {
    padding-left: 16px;
    padding-right: 16px;
  }

  .white-label-main .wp-services-hero {
    min-height: auto;
    place-items: start;
    text-align: left;
    padding-top: 92px;
    padding-bottom: 58px;
  }

  .white-label-main .wp-services-hero-copy,
  .white-label-main .wp-services-hero .eyebrow,
  .white-label-main .wp-services-hero h1,
  .white-label-main .wp-services-lead {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .white-label-main .wp-services-hero h1 {
    font-size: clamp(52px, 17vw, 78px);
    line-height: 0.92;
  }

  .white-label-main .wp-services-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: 340px;
    margin-left: 0;
  }

  .white-label-main .wp-services-actions .primary-action,
  .white-label-main .wp-services-actions .secondary-action {
    width: 100%;
  }
}


/* ===== V39 — White-label background + standardized panels ===== */

/* The old WP label "Agency partner mode" felt a little mechanical.
   The page now uses "Behind-the-scenes delivery" in the hero. */

/* Full-page white-label atmosphere: different from the main grid, but still WebPlumbers. */
.white-label-main {
  background:
    radial-gradient(1100px circle at 74% 16%, rgba(121, 213, 223, 0.095), transparent 42%),
    radial-gradient(820px circle at 18% 42%, rgba(244, 199, 98, 0.055), transparent 38%),
    linear-gradient(180deg, #071421 0%, #08131f 58%, #06101b 100%) !important;
}

.white-label-main::before,
.white-label-main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.white-label-main::before {
  background-image:
    linear-gradient(90deg, rgba(159,216,244,0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(159,216,244,0.045) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 46px, rgba(244,199,98,0.042) 46px 47px, transparent 47px 94px),
    radial-gradient(circle, rgba(121,213,223,0.16) 0 1px, transparent 1.6px);
  background-size: 72px 72px, 72px 72px, 188px 188px, 144px 144px;
  background-position: 0 0, 0 0, 18px 32px, 11px 19px;
  opacity: 0.72;
  mask-image: linear-gradient(180deg, black 0%, rgba(0,0,0,0.82) 64%, rgba(0,0,0,0.42) 100%);
}

.white-label-main::after {
  background:
    linear-gradient(90deg, transparent, rgba(121,213,223,0.035), transparent),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(159,216,244,0.03) 118px 120px, transparent 120px 240px);
  opacity: 0.5;
  mix-blend-mode: screen;
}

/* Unique section background: agency/blueprint routing lines. */
.white-blueprint-section {
  isolation: isolate;
  overflow: hidden;
}

.white-blueprint-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

.white-blueprint-bg::before,
.white-blueprint-bg::after,
.white-blueprint-bg span {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.white-blueprint-bg::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(35, 177, 105, 0.14) 22% 22.45%, transparent 22.45% 100%),
    linear-gradient(90deg, transparent 0 61%, rgba(35, 177, 105, 0.11) 61% 61.35%, transparent 61.35% 100%),
    linear-gradient(0deg, transparent 0 38%, rgba(35, 177, 105, 0.12) 38% 38.35%, transparent 38.35% 100%);
  filter: blur(0.2px);
}

.white-blueprint-bg::after {
  left: -8%;
  right: -8%;
  top: 24%;
  height: 6px;
  background:
    linear-gradient(90deg, transparent, rgba(102,191,117,0.10), rgba(102,191,117,0.24), rgba(102,191,117,0.08), transparent);
  box-shadow:
    0 0 18px rgba(102,191,117,0.18),
    0 80px 0 rgba(102,191,117,0.055),
    0 164px 0 rgba(102,191,117,0.05);
  opacity: 0.7;
}

.white-blueprint-bg span:nth-child(1) {
  width: 220px;
  height: 220px;
  right: 10%;
  top: 12%;
  border: 3px solid rgba(159,216,244,0.08);
  border-left-color: rgba(244,199,98,0.08);
  transform: rotate(12deg);
}

.white-blueprint-bg span:nth-child(2) {
  width: 320px;
  height: 3px;
  left: 8%;
  bottom: 18%;
  background: linear-gradient(90deg, rgba(121,213,223,0.28), rgba(244,199,98,0.14), transparent);
  box-shadow: 0 0 14px rgba(121,213,223,0.12);
}

.white-blueprint-bg span:nth-child(3) {
  width: 160px;
  height: 160px;
  left: 58%;
  bottom: 8%;
  border: 2px dashed rgba(121,213,223,0.07);
  transform: rotate(-8deg);
}

.white-blueprint-section > :not(.white-blueprint-bg) {
  position: relative;
  z-index: 1;
}

/* Pipes used by the white-label hero. These classes existed in the markup but had no CSS. */
.pipe-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pipe-background-dim {
  opacity: 0.72;
}

.pipe {
  position: absolute;
  display: block;
  background:
    linear-gradient(90deg,
      rgba(9, 52, 38, 0.78),
      rgba(34, 139, 65, 0.9) 28%,
      rgba(102, 191, 117, 0.58) 48%,
      rgba(26, 117, 56, 0.86) 72%,
      rgba(5, 35, 30, 0.82));
  border: 3px solid rgba(25, 125, 58, 0.68);
  box-shadow:
    inset 0 0 12px rgba(129, 255, 151, 0.22),
    0 0 18px rgba(50, 202, 86, 0.22),
    0 0 3px rgba(102, 191, 117, 0.7);
  image-rendering: pixelated;
}

.pipe::before,
.pipe::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  background:
    radial-gradient(circle at 50% 50%, rgba(129,255,151,0.42), rgba(25,125,58,0.9) 46%, rgba(5,35,30,0.92) 64%, transparent 68%);
  filter: drop-shadow(0 0 8px rgba(102,191,117,0.42));
}

.pipe-one {
  left: -10%;
  top: 26%;
  width: 62%;
  height: 30px;
}

.pipe-one::before { left: 18%; top: -12px; }
.pipe-one::after { right: -16px; top: -12px; }

.pipe-two {
  right: -8%;
  top: 44%;
  width: 58%;
  height: 30px;
}

.pipe-two::before { left: -16px; top: -12px; }
.pipe-two::after { right: 22%; top: -12px; }

.pipe-three {
  left: 18%;
  bottom: 18%;
  width: 70%;
  height: 30px;
}

.pipe-three::before { left: -16px; top: -12px; }
.pipe-three::after { right: -16px; top: -12px; }

.pipe-four {
  left: 64%;
  top: -12%;
  width: 30px;
  height: 74%;
  background:
    linear-gradient(180deg,
      rgba(9, 52, 38, 0.78),
      rgba(34, 139, 65, 0.9) 28%,
      rgba(102, 191, 117, 0.58) 48%,
      rgba(26, 117, 56, 0.86) 72%,
      rgba(5, 35, 30, 0.82));
}

.pipe-four::before { left: -14px; top: 18%; }
.pipe-four::after { left: -14px; bottom: -16px; }

.pipe-drip,
.pipe-burst {
  position: absolute;
  display: block;
  color: rgba(121,213,223,0.72);
  font-family: "Space Mono", monospace;
  font-size: 14px;
  line-height: 0.82;
  text-shadow: 0 0 10px rgba(121,213,223,0.45);
  opacity: 0.62;
}

.pipe-drip::before,
.pipe-burst::before {
  content: "1010\A0101\A110\A001\A1010\A010";
  white-space: pre;
}

.drip-one { left: 17%; top: 30%; animation: whitePipeDrop 4.6s steps(8, end) infinite; }
.drip-two { right: 17%; top: 47%; animation: whitePipeDrop 5.2s steps(8, end) infinite reverse; }
.drip-three { left: 63%; bottom: 12%; animation: whitePipeDrop 5.6s steps(8, end) infinite; }
.burst-one { right: 8%; top: 18%; transform: rotate(8deg); animation: whitePipePulse 3.4s steps(6, end) infinite; }
.burst-two { left: 6%; bottom: 20%; transform: rotate(-6deg); animation: whitePipePulse 4.1s steps(6, end) infinite; }

@keyframes whitePipeDrop {
  0% { transform: translateY(-8px); opacity: 0.18; }
  28% { opacity: 0.72; }
  100% { transform: translateY(42px); opacity: 0.08; }
}

@keyframes whitePipePulse {
  0%, 100% { opacity: 0.18; filter: blur(0); }
  45% { opacity: 0.76; filter: blur(0.2px); }
}

/* Service Details panel on White-label:
   use the same compact animated treatment as Web Development, but scoped correctly. */
.white-label-main .webdev-narrative-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 1320px);
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
  padding: clamp(32px, 3.6vw, 50px) clamp(28px, 4vw, 58px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(520px circle at var(--mx, 46%) var(--my, 44%), rgba(121, 213, 223, 0.075), transparent 62%),
    linear-gradient(180deg, rgba(37, 58, 86, 0.78), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
  transition:
    transform 360ms cubic-bezier(.2,.9,.2,1),
    border-color 320ms ease,
    box-shadow 320ms ease;
}

.white-label-main .webdev-narrative-panel::before {
  content: "";
  position: absolute;
  left: -24%;
  right: -24%;
  bottom: -46%;
  height: 80%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(121, 213, 223, 0.16), transparent 70%),
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.12), transparent);
  transform: translateX(-14%) rotate(2deg);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: webdevServiceWaterClean 7s ease-in-out infinite;
}

.white-label-main .webdev-narrative-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244, 199, 98, 0.08), transparent);
  opacity: 0;
  transform: translateX(-80%);
  mix-blend-mode: screen;
}

.white-label-main .webdev-narrative-panel > * {
  position: relative;
  z-index: 1;
}

.white-label-main .webdev-narrative-panel:hover,
.white-label-main .webdev-narrative-panel:focus-within {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.95);
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 34px rgba(121, 213, 223, 0.18);
}

.white-label-main .webdev-narrative-panel:hover::after,
.white-label-main .webdev-narrative-panel:focus-within::after {
  opacity: 1;
  animation: webdevServiceScanClean 1.05s steps(10, end) forwards;
}

.white-label-main .webdev-narrative-intro .eyebrow,
.white-label-main .section-heading .eyebrow,
.white-label-main .tech-heading .eyebrow,
.white-label-main .compact-page-cta-copy .eyebrow {
  color: var(--amber) !important;
}

.white-label-main .webdev-narrative-intro h2 {
  margin: 0;
  max-width: 11ch;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(36px, 4.4vw, 62px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.white-label-main .webdev-narrative-copy {
  display: grid;
  gap: 18px;
  align-self: center;
}

.white-label-main .webdev-narrative-copy p {
  margin: 0;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.68;
}

.white-label-main .panel-accent-line {
  display: block;
  width: 112px;
  height: 3px;
  margin-top: 26px;
  background: linear-gradient(90deg, var(--cyan), rgba(244,199,98,0.52), transparent);
}

/* Make the collaboration section less bullet-like and more editorial. */
.white-label-collab .section-heading {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: end;
  text-align: left;
}

.white-label-collab .section-heading .eyebrow,
.white-label-collab .section-heading h2,
.white-label-collab .section-heading p {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.white-label-collab .section-heading h2 {
  margin-bottom: 0;
}

.white-label-collab .section-heading p:not(.eyebrow) {
  max-width: 760px;
}

/* Tools section: turn plain text chips into proper console chips. */
.white-label-tech .tech-heading {
  width: min(100%, 1120px);
  max-width: 1120px;
  text-align: center;
}

.white-label-tech .tech-grid {
  width: min(100%, 1280px);
  max-width: 1280px;
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.white-label-tech .tech-grid span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 2px solid rgba(159, 216, 244, 0.58);
  background:
    radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(121,213,223,0.08), transparent 60%),
    rgba(17, 31, 49, 0.78);
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: transform 220ms ease, border-color 220ms ease, color 220ms ease;
}

.white-label-tech .tech-grid span:hover {
  transform: translateY(-3px);
  border-color: rgba(244,199,98,0.88);
  color: var(--amber);
}

/* FAQ and cards should sit above the new background layer. */
.white-label-main .faq-item,
.white-label-main .white-card,
.white-label-main .support-lid-card,
.white-label-main .compact-page-cta-card {
  backdrop-filter: blur(2px);
}

/* Keep hero/CTA buttons standardized. */
.white-label-main .primary-action,
.white-label-main .secondary-action,
.white-label-main .compact-page-cta-button {
  min-width: 220px;
  min-height: 60px;
  padding: 16px 24px;
  font-size: 13px;
}

/* White-label hero uses the same centred rhythm as Services/Support. */
.white-label-main .wp-services-hero h1 {
  font-family: "Jersey 15", "Space Mono", monospace;
  font-size: clamp(86px, 8vw, 138px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: balance;
}

.white-label-main .wp-services-lead {
  font-size: clamp(19px, 1.45vw, 24px);
  line-height: 1.56;
}

@media (max-width: 1180px) {
  .white-label-main .webdev-narrative-panel,
  .white-label-collab .section-heading {
    grid-template-columns: 1fr;
  }

  .white-label-main .webdev-narrative-intro h2 {
    max-width: none;
  }

  .white-label-collab .section-heading {
    text-align: center;
  }

  .white-label-collab .section-heading .eyebrow,
  .white-label-collab .section-heading h2,
  .white-label-collab .section-heading p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 820px) {
  .pipe-background {
    opacity: 0.44;
  }

  .pipe-one,
  .pipe-two,
  .pipe-three {
    height: 24px;
  }

  .pipe-four {
    width: 24px;
  }

  .white-label-main .webdev-narrative-panel {
    padding: 28px 18px;
  }

  .white-label-main .webdev-narrative-intro h2 {
    font-size: clamp(36px, 12vw, 52px);
  }

  .white-label-main .primary-action,
  .white-label-main .secondary-action,
  .white-label-main .compact-page-cta-button {
    width: 100%;
    min-width: 0;
  }
}


/* ===== V40 — White-label cleanup: standard pipes, one-column details, scan cards, FAQ fix ===== */

/* Use the same canvas pipe system as Services / Web Development / Support */
.white-label-main.wp-services-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.white-label-main.wp-services-main #pipes-bg,
.white-label-main.wp-services-main .pipes-bg-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.86 !important;
}

.white-label-main.wp-services-main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(121, 213, 223, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 213, 223, 0.032) 1px, transparent 1px),
    repeating-linear-gradient(135deg, transparent 0 86px, rgba(244,199,98,0.022) 86px 87px, transparent 87px 172px);
  background-size: 24px 24px, 24px 24px, 172px 172px;
  opacity: 0.58;
}

.white-label-main.wp-services-main > section {
  position: relative;
  z-index: 1;
}

/* Hide the custom experimental pipes from v39 if old markup is cached somewhere */
.white-label-main .pipe-background,
.white-label-main .pipe,
.white-label-main .pipe-drip,
.white-label-main .pipe-burst {
  display: none !important;
}

/* Service details: requested single-column layout */
.white-label-details-section {
  padding-top: clamp(48px, 5.5vw, 82px) !important;
  padding-bottom: clamp(48px, 5.5vw, 82px) !important;
}

.white-service-details-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 1320px);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(32px, 3.6vw, 54px) clamp(28px, 4vw, 64px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(520px circle at var(--mx, 46%) var(--my, 44%), rgba(121, 213, 223, 0.075), transparent 62%),
    linear-gradient(180deg, rgba(37, 58, 86, 0.78), rgba(17, 31, 49, 0.94));
  box-shadow: var(--shadow);
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), border-color 320ms ease, box-shadow 320ms ease;
}

.white-service-details-card::before {
  content: "";
  position: absolute;
  left: -24%;
  right: -24%;
  bottom: -46%;
  height: 80%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(121, 213, 223, 0.16), transparent 70%),
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.12), transparent);
  transform: translateX(-14%) rotate(2deg);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: webdevServiceWaterClean 7s ease-in-out infinite;
}

.white-service-details-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244, 199, 98, 0.08), transparent);
  opacity: 0;
  transform: translateX(-80%);
  mix-blend-mode: screen;
}

.white-service-details-card:hover,
.white-service-details-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.95);
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 34px rgba(121, 213, 223, 0.18);
}

.white-service-details-card:hover::after,
.white-service-details-card:focus-within::after {
  opacity: 1;
  animation: webdevServiceScanClean 1.05s steps(10, end) forwards;
}

.white-service-details-card > * {
  position: relative;
  z-index: 1;
}

.white-service-details-card .eyebrow {
  margin: 0 0 18px;
  color: var(--amber) !important;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.white-service-details-card h2 {
  max-width: 980px;
  margin: 0 0 26px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(30px, 3.1vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.white-service-details-card p:not(.eyebrow) {
  max-width: 1120px;
  margin: 0 0 18px;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: clamp(15px, 1.08vw, 17px);
  line-height: 1.7;
}

.white-service-details-card p:last-child {
  margin-bottom: 0;
}

/* Replace leak/lid interaction on this page with scan reveal cards */
.white-label-lids .support-lid-grid,
.white-label-lids .support-lid-card,
.white-label-lids .lid-leak-canvas,
.white-label-lids .lid-water,
.white-label-lids .lid-shadow-gap,
.white-label-lids .lid-bolt {
  display: none !important;
}

.white-scan-grid {
  width: min(100%, 1480px);
  max-width: 1480px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  perspective: 900px;
}

.white-scan-card {
  --scan-delay: 0ms;
  position: relative;
  min-height: 265px;
  padding: clamp(24px, 2.2vw, 32px);
  border: 3px solid rgba(159, 216, 244, 0.72);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), transparent 18%),
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(121,213,223,0.08), transparent 62%),
    linear-gradient(180deg, rgba(37, 58, 86, 0.78), rgba(17, 31, 49, 0.96));
  box-shadow: var(--shadow);
  overflow: hidden;
  opacity: 0.28;
  filter: saturate(0.55) brightness(0.78);
  transform: translateY(28px) rotateX(8deg);
  transition:
    transform 620ms cubic-bezier(.2,.9,.2,1),
    opacity 560ms ease,
    filter 560ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.white-scan-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 0;
  border: 1px dashed rgba(159,216,244,0.20);
  background:
    repeating-linear-gradient(135deg, rgba(159,216,244,0.08) 0 5px, transparent 5px 16px);
  opacity: 0.75;
  pointer-events: none;
}

.white-scan-card::after {
  content: "";
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: -38%;
  z-index: 2;
  width: 42%;
  border-radius: 999px;
  background:
    radial-gradient(closest-side, rgba(244, 255, 255, 0.24), rgba(121, 213, 223, 0.10) 48%, transparent 74%),
    linear-gradient(90deg, transparent, rgba(244,199,98,0.20), rgba(121,213,223,0.22), transparent);
  opacity: 0;
  transform: translateX(-40%) rotate(12deg);
  filter: blur(0.2px);
  pointer-events: none;
}

.white-scan-card.is-scanned {
  opacity: 1;
  filter: saturate(1) brightness(1);
  transform: translateY(0) rotateX(0deg);
}

.white-scan-card.is-scanned::after {
  opacity: 1;
  animation: whiteMagnifierScan 1.15s steps(12, end) both;
  animation-delay: var(--scan-delay);
}

.white-scan-card:hover {
  border-color: rgba(244,199,98,0.88);
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 28px rgba(121,213,223,0.13);
  transform: translateY(-5px);
}

.white-scan-card > * {
  position: relative;
  z-index: 1;
}

.white-scan-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 34px;
  margin-bottom: 22px;
  border: 2px solid rgba(244,199,98,0.72);
  background: rgba(6, 15, 25, 0.58);
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 800;
}

.white-scan-card h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(20px, 1.45vw, 26px);
  line-height: 1.12;
}

.white-scan-card p {
  margin: 0;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: 14px;
  line-height: 1.58;
}

@keyframes whiteMagnifierScan {
  0% { transform: translateX(-55%) rotate(12deg); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 0.9; }
  100% { transform: translateX(370%) rotate(12deg); opacity: 0; }
}

/* Collaboration section: return to readable, balanced layout */
.white-label-collab .section-heading,
.white-label-collab .white-collab-heading {
  display: block !important;
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.white-label-collab .section-heading .eyebrow,
.white-label-collab .section-heading h2,
.white-label-collab .section-heading p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.white-label-collab .section-heading h2 {
  max-width: 980px !important;
}

.white-label-collab .section-heading p:not(.eyebrow) {
  max-width: 900px !important;
  font-size: clamp(15px, 1.08vw, 17px);
  line-height: 1.68;
}

/* FAQ answer must stay inside the card */
.white-label-faq .faq-list,
.white-label-faq-list {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.white-label-faq .faq-item {
  overflow: hidden !important;
  border: 3px solid rgba(159, 216, 244, 0.78) !important;
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(121,213,223,0.07), transparent 64%),
    rgba(17,31,49,0.86) !important;
}

.white-label-faq .faq-item summary {
  padding: 24px 28px !important;
  list-style: none !important;
}

.white-label-faq .faq-item p {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 28px 28px !important;
  color: var(--muted) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.68 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.white-label-faq .faq-item[open] summary {
  border-bottom: 0 !important;
}

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

@media (max-width: 820px) {
  .white-scan-grid {
    grid-template-columns: 1fr;
  }

  .white-service-details-card,
  .white-label-faq .faq-item summary,
  .white-label-faq .faq-item p {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}


/* ===== V41 — White-label lids restored + cleaner background + aligned accents ===== */

/* 1) Align the small accent line under white-label section headings */
.white-label-main .section-heading::after,
.white-label-main .tech-heading::after {
  margin: 22px auto 0 !important;
  transform: none !important;
}

/* 2) Remove the experimental blueprint squares/diagonal stripes; keep base pipes + a subtle grid only */
.white-label-main.wp-services-main::before {
  background:
    linear-gradient(rgba(121, 213, 223, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 213, 223, 0.026) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  opacity: 0.42 !important;
}

.white-label-main::before {
  background-image:
    linear-gradient(90deg, rgba(159,216,244,0.028) 1px, transparent 1px),
    linear-gradient(0deg, rgba(159,216,244,0.026) 1px, transparent 1px) !important;
  background-size: 72px 72px, 72px 72px !important;
  opacity: 0.36 !important;
}

.white-label-main::after {
  background: radial-gradient(900px circle at 70% 22%, rgba(121,213,223,0.045), transparent 48%) !important;
  opacity: 0.42 !important;
}

.white-label-main .white-blueprint-bg span,
.white-label-main .white-blueprint-bg::after {
  display: none !important;
}

.white-label-main .white-blueprint-bg::before {
  inset: 0 !important;
  background:
    radial-gradient(720px circle at 18% 34%, rgba(121,213,223,0.035), transparent 58%),
    radial-gradient(640px circle at 82% 28%, rgba(244,199,98,0.026), transparent 56%) !important;
  opacity: 0.58 !important;
  filter: none !important;
}

/* 3) White-label benefits use the standard leaking lid cards again. */
.white-label-lids .white-scan-grid,
.white-label-lids .white-scan-card {
  display: none !important;
}

.white-label-lids .support-lid-grid.white-label-lid-grid {
  display: grid !important;
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin: clamp(28px, 4vw, 48px) auto 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.8vw, 24px) !important;
}

.white-label-lids .support-lid-card {
  display: block !important;
  width: 100% !important;
  min-height: 300px !important;
}

.white-label-lids .lid-leak-canvas {
  display: block !important;
}

.white-label-lids .lid-water,
.white-label-lids .lid-water::before,
.white-label-lids .lid-water::after {
  display: none !important;
}

/* Auto-opened lids get a slightly softer glow so they feel intentional, not broken */
.support-lid-card.is-auto-sealed {
  border-color: rgba(244,199,98,0.86);
}

.support-lid-card.is-auto-sealed .lid-content::before {
  opacity: 0.18;
}

/* When a card stays closed, keep it visibly interactive */
.support-lid-card:not(.is-sealed)::after {
  opacity: 0.68;
}

/* The heading above lid cards should stay readable over pipes */
.white-label-lids .section-heading {
  max-width: 1180px !important;
}

.white-label-lids .section-heading h2 {
  text-wrap: balance;
}

@media (max-width: 1180px) {
  .white-label-lids .support-lid-grid.white-label-lid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .white-label-lids .support-lid-grid.white-label-lid-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== V42 — Restore lid bolts on White-label cards ===== */

/* V40 hid bolts for the scan-card experiment. Bring them back for lid cards. */
.white-label-lids .support-lid-card .lid-bolt {
  display: block !important;
  position: absolute !important;
  z-index: 7 !important;
  width: 22px !important;
  height: 22px !important;
  border: 3px solid rgba(244, 199, 98, 0.92) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(244,199,98,0.22), transparent 42%),
    linear-gradient(180deg, rgba(13, 29, 48, 0.96), rgba(4, 12, 21, 0.98)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(2, 8, 16, 0.68),
    0 0 12px rgba(244, 199, 98, 0.22),
    3px 3px 0 rgba(2, 8, 16, 0.44) !important;
  opacity: 1 !important;
  transition:
    transform 620ms steps(8, end),
    border-color 320ms ease,
    box-shadow 320ms ease,
    background 320ms ease !important;
}

.white-label-lids .support-lid-card .lid-bolt::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 12px !important;
  height: 3px !important;
  background: rgba(244, 199, 98, 0.9) !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  box-shadow: 0 0 8px rgba(244, 199, 98, 0.24) !important;
}

.white-label-lids .support-lid-card .lid-bolt.b1 {
  left: 16px !important;
  top: 16px !important;
}

.white-label-lids .support-lid-card .lid-bolt.b2 {
  right: 16px !important;
  top: 16px !important;
}

.white-label-lids .support-lid-card .lid-bolt.b3 {
  left: 16px !important;
  bottom: 16px !important;
}

.white-label-lids .support-lid-card .lid-bolt.b4 {
  right: 16px !important;
  bottom: 16px !important;
}

/* Closed/unsealed state: bolts look slightly loosened. */
.white-label-lids .support-lid-card:not(.is-sealed) .lid-bolt.b1 {
  transform: translate(-3px, -3px) rotate(-38deg) !important;
}

.white-label-lids .support-lid-card:not(.is-sealed) .lid-bolt.b2 {
  transform: translate(3px, -3px) rotate(42deg) !important;
}

.white-label-lids .support-lid-card:not(.is-sealed) .lid-bolt.b3 {
  transform: translate(-3px, 3px) rotate(32deg) !important;
}

.white-label-lids .support-lid-card:not(.is-sealed) .lid-bolt.b4 {
  transform: translate(3px, 3px) rotate(-34deg) !important;
}

/* Sealed state: bolts screw in and glow. */
.white-label-lids .support-lid-card.is-sealed .lid-bolt {
  transform: translate(0, 0) rotate(360deg) !important;
  border-color: rgba(244, 199, 98, 1) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(244,199,98,0.34), transparent 44%),
    linear-gradient(180deg, rgba(18, 36, 54, 0.98), rgba(5, 14, 23, 0.98)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(244, 199, 98, 0.18),
    0 0 16px rgba(244, 199, 98, 0.28),
    3px 3px 0 rgba(2, 8, 16, 0.34) !important;
}

.white-label-lids .support-lid-card.is-bumped .lid-bolt {
  animation: lidBoltTightenV42 460ms steps(5, end) 1 !important;
}

@keyframes lidBoltTightenV42 {
  0% {
    filter: brightness(1);
  }
  34% {
    filter: brightness(1.45);
    transform: scale(0.92) rotate(420deg);
  }
  68% {
    filter: brightness(1.14);
    transform: scale(1.08) rotate(360deg);
  }
  100% {
    filter: brightness(1);
  }
}

/* Keep the mobile/tablet spacing that prevented numbers from overlapping bolts. */
@media (max-width: 1180px) {
  .white-label-lids .support-lid-card .lid-content {
    padding-top: 42px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .white-label-lids .support-lid-card .lid-content strong {
    margin-top: 0 !important;
  }
}

@media (max-width: 640px) {
  .white-label-lids .support-lid-card .lid-bolt {
    width: 18px !important;
    height: 18px !important;
    border-width: 2px !important;
  }

  .white-label-lids .support-lid-card .lid-bolt.b1 {
    left: 12px !important;
    top: 12px !important;
  }

  .white-label-lids .support-lid-card .lid-bolt.b2 {
    right: 12px !important;
    top: 12px !important;
  }

  .white-label-lids .support-lid-card .lid-bolt.b3 {
    left: 12px !important;
    bottom: 12px !important;
  }

  .white-label-lids .support-lid-card .lid-bolt.b4 {
    right: 12px !important;
    bottom: 12px !important;
  }

  .white-label-lids .support-lid-card .lid-content {
    padding-top: 46px !important;
  }
}


/* ===== V44 Random lid auto-open note =====
   Random 30–70% auto-opening is handled in script.js.
   Existing lid bolt/leak styles are preserved. */


/* ===== V45 White-label collaboration X-ray character ===== */
.white-label-collab {
  padding-top: clamp(64px, 8vw, 116px);
  padding-bottom: clamp(64px, 8vw, 116px);
}

.white-collab-spotlight {
  position: relative;
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(300px, 0.97fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  border: 3px solid rgba(159, 216, 244, 0.82);
  background:
    radial-gradient(500px circle at 18% 20%, rgba(94, 173, 245, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(35, 56, 84, 0.74), rgba(11, 24, 38, 0.94));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.white-collab-spotlight::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(159, 216, 244, 0.18);
  pointer-events: none;
}

.white-collab-copy {
  position: relative;
  z-index: 1;
}

.white-collab-copy .eyebrow,
.white-collab-copy h2,
.white-collab-copy p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.white-collab-copy .eyebrow {
  margin-bottom: 14px;
}

.white-collab-copy h2 {
  max-width: 680px;
  margin: 0 0 18px;
  font-size: clamp(40px, 4.7vw, 76px) !important;
  line-height: 0.98;
}

.white-collab-copy p:not(.eyebrow) {
  max-width: 680px;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: clamp(15px, 1.08vw, 17px) !important;
  line-height: 1.72 !important;
}

.white-collab-copy .panel-accent-line {
  margin-top: 24px;
}

.white-collab-visual {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.employee-scan-card {
  position: relative;
  width: min(100%, 500px);
  min-height: 540px;
  border: 3px solid rgba(159, 216, 244, 0.72);
  background:
    radial-gradient(240px circle at 50% 12%, rgba(113, 221, 236, 0.11), transparent 65%),
    linear-gradient(180deg, rgba(18, 35, 57, 0.88), rgba(8, 16, 27, 0.95));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.employee-scan-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(159, 216, 244, 0.16);
  pointer-events: none;
}

.employee-stage-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(136, 204, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(136, 204, 234, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.4;
}

.scan-hint {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 8px 10px;
  border: 1px solid rgba(244, 199, 98, 0.45);
  background: rgba(7, 15, 24, 0.74);
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scan-line {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 110px;
  top: -28%;
  background:
    linear-gradient(180deg, rgba(90, 232, 255, 0), rgba(90, 232, 255, 0.08) 18%, rgba(90, 232, 255, 0.22) 45%, rgba(90, 232, 255, 0.08) 80%, rgba(90, 232, 255, 0));
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.employee-scan-card:hover .scan-line,
.employee-scan-card:focus-within .scan-line,
.employee-scan-card:focus .scan-line {
  opacity: 1;
  animation: xraySweepV45 1.15s ease-in-out infinite;
}

.employee-figure {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 240px;
  height: 410px;
  transform: translate(-50%, -50%);
}

.employee-figure * {
  box-sizing: border-box;
}

.employee-head {
  position: absolute;
  top: 0;
  left: 50%;
  width: 142px;
  height: 126px;
  transform: translateX(-50%);
  border-radius: 48% 48% 44% 44%;
}

.employee-normal .employee-head {
  background: radial-gradient(circle at 40% 35%, #ffdec0 0 46%, #eab79a 72%, #cf977a 100%);
  border: 3px solid rgba(9, 19, 31, 0.72);
  box-shadow: 0 16px 22px rgba(0,0,0,0.18);
}

.employee-normal .eye {
  position: absolute;
  top: 42px;
  width: 16px;
  height: 22px;
  background: #101622;
  border-radius: 50%;
}
.employee-normal .eye-left { left: 37px; }
.employee-normal .eye-right { right: 37px; }
.employee-normal .nose {
  position: absolute;
  left: 50%;
  top: 55px;
  width: 10px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(191, 118, 96, 0.55);
}
.employee-normal .smile {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 48px;
  height: 20px;
  transform: translateX(-50%);
  border-bottom: 4px solid #101622;
  border-radius: 0 0 24px 24px;
}

.employee-body {
  position: absolute;
  top: 122px;
  left: 50%;
  width: 148px;
  height: 164px;
  transform: translateX(-50%);
}

.employee-normal .employee-body {
  border-radius: 26px 26px 30px 30px;
  background: linear-gradient(180deg, #4eb9f0, #1f93d5);
  border: 3px solid rgba(9, 19, 31, 0.72);
  box-shadow: 0 14px 18px rgba(0,0,0,0.18);
}

.chest-label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.employee-figure .arm,
.employee-figure .leg,
.employee-figure .forearm,
.employee-figure .shin,
.employee-figure .shoe {
  position: absolute;
  display: block;
}

.employee-normal .arm {
  top: 156px;
  width: 92px;
  height: 22px;
  border-radius: 999px;
  background: #ffdec0;
  border: 3px solid rgba(9, 19, 31, 0.72);
}
.employee-normal .arm-left { right: 50%; margin-right: 74px; }
.employee-normal .arm-right { left: 50%; margin-left: 74px; }

.employee-normal .leg {
  top: 272px;
  width: 26px;
  height: 108px;
  border-radius: 999px;
  background: #3a4963;
  border: 3px solid rgba(9, 19, 31, 0.72);
}
.employee-normal .leg-left { left: 86px; }
.employee-normal .leg-right { right: 86px; }
.employee-normal .shoe {
  top: 374px;
  width: 48px;
  height: 20px;
  border-radius: 999px;
  background: #0f1723;
}
.employee-normal .shoe-left { left: 68px; }
.employee-normal .shoe-right { right: 68px; }

.employee-xray {
  opacity: 0;
  transition: opacity 180ms ease;
  filter: drop-shadow(0 0 16px rgba(92, 240, 255, 0.28));
}
.employee-scan-card:hover .employee-xray,
.employee-scan-card:focus-within .employee-xray,
.employee-scan-card:focus .employee-xray {
  opacity: 1;
}
.employee-scan-card:hover .employee-normal,
.employee-scan-card:focus-within .employee-normal,
.employee-scan-card:focus .employee-normal {
  opacity: 0.16;
}

.employee-xray .employee-head {
  border: 3px solid rgba(116, 239, 255, 0.92);
  background: radial-gradient(circle at 50% 35%, rgba(9, 17, 28, 0.52), rgba(8, 18, 30, 0.04));
  box-shadow: 0 0 18px rgba(116, 239, 255, 0.18);
}
.employee-xray .skull-eye {
  position: absolute;
  top: 43px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(116, 239, 255, 0.92);
  box-shadow: 0 0 10px rgba(116, 239, 255, 0.42);
}
.employee-xray .skull-left { left: 34px; }
.employee-xray .skull-right { right: 34px; }
.employee-xray .skull-nose {
  position: absolute;
  left: 50%;
  top: 59px;
  width: 14px;
  height: 16px;
  transform: translateX(-50%);
  background: rgba(116, 239, 255, 0.8);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.employee-xray .jaw {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 62px;
  height: 26px;
  transform: translateX(-50%);
  border: 3px solid rgba(116, 239, 255, 0.92);
  border-top: none;
  border-radius: 0 0 18px 18px;
}

.employee-xray .employee-body {
  border: 3px solid rgba(116, 239, 255, 0.88);
  border-radius: 26px 26px 30px 30px;
  background: linear-gradient(180deg, rgba(10, 18, 28, 0.2), rgba(10, 18, 28, 0.02));
}
.employee-xray .spine {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 8px;
  height: 94px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(116,239,255,0.85), rgba(116,239,255,0.55));
  border-radius: 999px;
}
.employee-xray .rib {
  position: absolute;
  left: 50%;
  width: 104px;
  height: 28px;
  transform: translateX(-50%);
  border-top: 3px solid rgba(116, 239, 255, 0.88);
  border-left: 3px solid rgba(116, 239, 255, 0.88);
  border-right: 3px solid rgba(116, 239, 255, 0.88);
  border-radius: 50% 50% 18px 18px;
}
.employee-xray .rib-1 { top: 24px; }
.employee-xray .rib-2 { top: 48px; width: 98px; }
.employee-xray .rib-3 { top: 72px; width: 88px; }
.employee-xray .pelvis {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 86px;
  height: 26px;
  transform: translateX(-50%);
  border: 3px solid rgba(116,239,255,0.88);
  border-top: none;
  border-radius: 0 0 26px 26px;
}
.employee-xray .xray-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(116, 239, 255, 0.95);
  font-family: "Press Start 2P", "Jersey 15", monospace;
  font-size: 11px;
  text-align: center;
  line-height: 1.35;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(116,239,255,0.3);
}

.employee-xray .arm {
  top: 160px;
  width: 92px;
  height: 4px;
  background: rgba(116, 239, 255, 0.92);
  transform-origin: center;
}
.employee-xray .arm-left { right: 50%; margin-right: 74px; }
.employee-xray .arm-right { left: 50%; margin-left: 74px; }
.employee-xray .forearm {
  top: 160px;
  width: 46px;
  height: 4px;
  background: rgba(116, 239, 255, 0.78);
}
.employee-xray .forearm-left { left: 0; }
.employee-xray .forearm-right { right: 0; }
.employee-xray .leg {
  top: 286px;
  width: 4px;
  height: 58px;
  background: rgba(116,239,255,0.92);
}
.employee-xray .leg-left { left: 102px; }
.employee-xray .leg-right { right: 102px; }
.employee-xray .shin {
  top: 340px;
  width: 4px;
  height: 54px;
  background: rgba(116,239,255,0.75);
}
.employee-xray .shin-left { left: 94px; transform: rotate(10deg); transform-origin: top center; }
.employee-xray .shin-right { right: 94px; transform: rotate(-10deg); transform-origin: top center; }

@keyframes xraySweepV45 {
  0% { top: -28%; }
  100% { top: 100%; }
}

@media (max-width: 1100px) {
  .white-collab-spotlight {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .white-collab-copy .eyebrow,
  .white-collab-copy h2,
  .white-collab-copy p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  .white-collab-copy .panel-accent-line { margin-left: auto; margin-right: auto; }
  .white-collab-copy h2 { max-width: 900px; }
}

@media (max-width: 700px) {
  .employee-scan-card {
    min-height: 460px;
  }
  .employee-figure {
    width: 210px;
    height: 360px;
    top: 55%;
  }
  .employee-head {
    width: 126px;
    height: 112px;
  }
  .employee-body {
    top: 108px;
    width: 134px;
    height: 148px;
  }
  .employee-normal .arm { top: 143px; width: 84px; }
  .employee-normal .arm-left, .employee-xray .arm-left { margin-right: 66px; }
  .employee-normal .arm-right, .employee-xray .arm-right { margin-left: 66px; }
  .employee-normal .leg { top: 248px; height: 92px; }
  .employee-normal .leg-left { left: 76px; }
  .employee-normal .leg-right { right: 76px; }
  .employee-normal .shoe { top: 333px; }
  .employee-normal .shoe-left { left: 58px; }
  .employee-normal .shoe-right { right: 58px; }
  .employee-xray .leg { top: 258px; }
  .employee-xray .leg-left { left: 88px; }
  .employee-xray .leg-right { right: 88px; }
  .employee-xray .shin { top: 312px; }
  .employee-xray .shin-left { left: 82px; }
  .employee-xray .shin-right { right: 82px; }
}


/* ===== V46 White-label mascot polish + hammer perk game ===== */
.employee-normal .hair,
.employee-normal .mustache {
  position: absolute;
  display: block;
}
.employee-normal .hair {
  top: 10px;
  width: 8px;
  height: 22px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #6f4d35, #2b1c11);
  border: 2px solid rgba(9, 19, 31, 0.65);
  border-bottom: none;
}
.employee-normal .hair-a { left: 42px; transform: rotate(-10deg); }
.employee-normal .hair-b { left: 64px; height: 28px; transform: rotate(2deg); }
.employee-normal .hair-c { right: 44px; height: 24px; transform: rotate(12deg); }
.employee-normal .mustache {
  top: 74px;
  width: 26px;
  height: 14px;
  background: linear-gradient(180deg, #4a2e1b, #1f140c);
  border-radius: 0 0 18px 18px;
  border: 2px solid rgba(9, 19, 31, 0.68);
  border-top: none;
}
.employee-normal .mustache-left { left: 42px; transform: rotate(14deg); }
.employee-normal .mustache-right { right: 42px; transform: rotate(-14deg); }
.employee-normal .smile {
  bottom: 18px;
}
.employee-xray .xray-label {
  padding: 7px 9px;
  border: 2px solid rgba(116, 239, 255, 0.86);
  background: rgba(6, 18, 29, 0.9);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(116,239,255,0.25);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.04em;
}
.employee-scan-card:hover .employee-normal,
.employee-scan-card:focus-within .employee-normal,
.employee-scan-card:focus .employee-normal {
  opacity: 0.08;
}

.white-label-perk-lab {
  position: relative;
  padding: clamp(60px, 7vw, 104px) 0;
}
.perk-lab-heading {
  margin-bottom: 28px;
}
.perk-lab-shell {
  width: min(100%, 1380px);
  margin: 0 auto;
  position: relative;
}
.perk-winner-banner {
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
  pointer-events: none;
  margin: 0 auto 20px;
  width: fit-content;
  max-width: min(100%, 780px);
  padding: 16px 20px;
  border: 2px solid rgba(244, 199, 98, 0.9);
  background: linear-gradient(180deg, rgba(70, 52, 11, 0.92), rgba(26, 20, 7, 0.94));
  color: #fff6d2;
  font-family: "Press Start 2P", "Jersey 15", monospace;
  font-size: clamp(12px, 1.1vw, 15px);
  line-height: 1.55;
  text-align: center;
  box-shadow: 0 0 28px rgba(244, 199, 98, 0.22);
  transition: opacity .35s ease, transform .35s ease;
}
.perk-lab-shell.is-won .perk-winner-banner {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.perk-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}
.perk-hammer-card {
  position: relative;
  min-height: 296px;
  padding: 84px 18px 24px;
  border: 3px solid rgba(159, 216, 244, 0.82);
  background:
    radial-gradient(220px circle at 50% 20%, rgba(74, 147, 220, 0.12), transparent 68%),
    linear-gradient(180deg, rgba(34, 53, 79, 0.82), rgba(12, 24, 39, 0.94));
  box-shadow: var(--shadow);
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.perk-hammer-card:hover,
.perk-hammer-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(195, 233, 250, 0.94);
  outline: none;
}
.perk-hammer-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(159, 216, 244, 0.14);
  pointer-events: none;
}
.perk-card-index {
  position: absolute;
  top: 20px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 34px;
  padding: 0 10px;
  border: 2px solid rgba(244, 199, 98, 0.88);
  color: var(--amber);
  font-family: "Press Start 2P", "Jersey 15", monospace;
  font-size: 11px;
  background: rgba(17, 26, 38, 0.6);
}
.perk-card-tag {
  position: absolute;
  top: 26px;
  right: 18px;
  color: rgba(188, 208, 223, 0.72);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.perk-card-face {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.perk-card-title {
  display: block;
  font-family: "Jersey 15", "Press Start 2P", monospace;
  font-size: clamp(34px, 2vw, 46px);
  line-height: 0.94;
  color: var(--paper);
}
.perk-card-copy {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}
.perk-card-nail {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  background: radial-gradient(circle at 35% 35%, #f0fbff 0 18%, #9ed8f4 24%, #4f7d96 64%, #23465c 100%);
  box-shadow: 0 0 0 2px rgba(10, 19, 29, 0.7), 0 4px 12px rgba(0,0,0,0.25);
}
.perk-hammer-card.is-nailed .perk-card-nail,
.perk-hammer-card.is-striking .perk-card-nail {
  animation: perkNailPop 1s ease forwards;
}
.perk-card-hammer {
  position: absolute;
  top: -8px;
  right: 14px;
  width: 92px;
  height: 92px;
  transform-origin: 70% 18%;
  pointer-events: none;
}
.perk-card-hammer .hammer-head,
.perk-card-hammer .hammer-handle,
.perk-card-hammer .impact {
  position: absolute;
  display: block;
}
.perk-card-hammer .hammer-head {
  top: 18px;
  left: 14px;
  width: 42px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, #dbe8ef, #7291a5);
  border: 2px solid rgba(8, 16, 24, 0.64);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
.perk-card-hammer .hammer-head::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 4px;
  width: 16px;
  height: 12px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #c2d2db, #688499);
  border: 2px solid rgba(8,16,24,0.64);
  border-left: none;
}
.perk-card-hammer .hammer-handle {
  top: 30px;
  left: 45px;
  width: 12px;
  height: 54px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9f6b3f, #624122);
  border: 2px solid rgba(8, 16, 24, 0.64);
  transform: rotate(28deg);
  transform-origin: top center;
}
.perk-card-hammer .impact {
  left: 18px;
  top: 56px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  opacity: 0;
  border: 2px solid rgba(244,199,98,0.85);
}
.perk-card-hammer .impact-2 { width: 56px; height: 56px; left: 10px; top: 48px; }
.perk-card-hammer .impact-3 { width: 18px; height: 18px; left: 30px; top: 68px; background: rgba(244,199,98,0.86); }
.perk-hammer-card.is-striking .perk-card-hammer {
  animation: perkHammerSwing 1.05s cubic-bezier(.2,.85,.15,1) forwards;
}
.perk-hammer-card.is-striking .perk-card-hammer .impact {
  animation: perkImpactBurst 0.46s ease .48s forwards;
}
.perk-hammer-card.is-striking {
  animation: perkCardSpin 1.05s cubic-bezier(.18,.82,.22,1) forwards;
}
.perk-hammer-card.is-revealed .perk-card-tag,
.perk-hammer-card.is-nailed .perk-card-tag {
  color: var(--amber);
}
.perk-hammer-card.is-winning {
  border-color: rgba(244, 199, 98, 0.98);
  box-shadow: 0 0 0 2px rgba(244,199,98,0.18), 0 0 28px rgba(244,199,98,0.28), var(--shadow);
  background:
    radial-gradient(240px circle at 50% 18%, rgba(244, 199, 98, 0.2), transparent 66%),
    linear-gradient(180deg, rgba(54, 41, 16, 0.92), rgba(16, 21, 29, 0.94));
}
.perk-hammer-card.is-winning .perk-card-title,
.perk-hammer-card.is-winning .perk-card-tag {
  color: #fff0ba;
}
.perk-hammer-card.is-winning .perk-card-copy {
  color: rgba(255, 248, 225, 0.82);
}
.perk-hammer-card.is-winning::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(244,199,98,0.16), transparent 55%);
  animation: perkGoldenPulse 1.9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes perkHammerSwing {
  0% { transform: rotate(0deg) translateY(0); }
  35% { transform: rotate(-30deg) translateY(-4px); }
  62% { transform: rotate(42deg) translateY(18px); }
  76% { transform: rotate(6deg) translateY(6px); }
  100% { transform: rotate(0deg) translateY(0); }
}
@keyframes perkImpactBurst {
  0% { opacity: 0; transform: scale(0.2); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3); }
}
@keyframes perkCardSpin {
  0% { transform: perspective(900px) rotateY(0deg) scale(1); }
  32% { transform: perspective(900px) rotateY(170deg) scale(1.02); }
  58% { transform: perspective(900px) rotateY(410deg) scale(1.03); }
  82% { transform: perspective(900px) rotateY(660deg) scale(0.99); }
  100% { transform: perspective(900px) rotateY(720deg) scale(1); }
}
@keyframes perkNailPop {
  0% { transform: translateX(-50%) scale(0); }
  45% { transform: translateX(-50%) scale(1.35); }
  100% { transform: translateX(-50%) scale(1); }
}
@keyframes perkGoldenPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.94); }
  50% { opacity: 0.5; transform: scale(1.05); }
}

@media (max-width: 1280px) {
  .perk-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .perk-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .perk-card-grid {
    grid-template-columns: 1fr;
  }
  .perk-hammer-card {
    min-height: 252px;
    padding-top: 78px;
  }
}


/* ===== V47 Clean perk cards — closer to All Services / Home cards ===== */

.white-label-perk-lab {
  padding-top: clamp(64px, 7vw, 108px) !important;
  padding-bottom: clamp(64px, 7vw, 108px) !important;
}

.perk-lab-heading {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.perk-lab-heading .eyebrow,
.perk-lab-heading h2,
.perk-lab-heading p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.perk-lab-heading h2 {
  max-width: 980px !important;
}

.perk-lab-heading p {
  max-width: 820px !important;
}

.perk-card-grid {
  width: min(100%, 1480px);
  max-width: 1480px;
  margin: clamp(30px, 4vw, 54px) auto 0;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.65vw, 22px) !important;
}

.perk-hammer-card {
  position: relative !important;
  min-height: 300px !important;
  padding: 36px 22px 26px !important;
  border: 3px solid rgba(159, 216, 244, 0.82) !important;
  background:
    radial-gradient(280px circle at var(--mx, 50%) var(--my, 46%), rgba(121, 213, 223, 0.075), transparent 64%),
    linear-gradient(180deg, rgba(37, 58, 86, 0.78), rgba(17, 31, 49, 0.96)) !important;
  box-shadow: var(--shadow) !important;
  color: var(--paper) !important;
  text-align: left !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transform: none;
  transition:
    transform 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    background 240ms ease !important;
}

.perk-hammer-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  border: 1px solid rgba(159, 216, 244, 0.20) !important;
  background:
    repeating-linear-gradient(135deg, rgba(159,216,244,0.065) 0 5px, transparent 5px 16px) !important;
  opacity: 0.52 !important;
  pointer-events: none !important;
}

.perk-hammer-card::after {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 24px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--cyan), rgba(244,199,98,0.54), transparent) !important;
  opacity: 0.64 !important;
  pointer-events: none !important;
}

.perk-hammer-card:hover,
.perk-hammer-card:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(244, 199, 98, 0.9) !important;
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 28px rgba(121, 213, 223, 0.14) !important;
  outline: none !important;
}

/* Old visible hammer parts were too noisy — keep the "hit" feeling through the card animation itself. */
.perk-card-hammer,
.perk-card-hammer *,
.perk-card-nail {
  display: none !important;
}

.perk-card-index {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  height: 34px !important;
  margin: 0 0 24px !important;
  padding: 0 10px !important;
  border: 2px solid rgba(244, 199, 98, 0.88) !important;
  color: var(--amber) !important;
  background: rgba(7, 15, 24, 0.62) !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.perk-card-tag {
  position: absolute !important;
  right: 22px !important;
  top: 42px !important;
  max-width: 120px !important;
  color: rgba(244, 199, 98, 0.68) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-align: right !important;
  text-transform: uppercase !important;
}

.perk-card-face {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-height: 160px !important;
}

.perk-card-title {
  display: block !important;
  color: var(--paper) !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 800 !important;
  font-size: clamp(21px, 1.4vw, 27px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
}

.perk-card-copy {
  display: block !important;
  color: var(--muted) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

/* Click animation: a tight flip/spin, then the card slows down and "locks" back into place. */
.perk-hammer-card.is-flipping {
  animation: perkCleanFlipV47 720ms cubic-bezier(.18,.84,.22,1) both !important;
  border-color: rgba(244, 199, 98, 0.92) !important;
}

.perk-hammer-card.is-hit {
  box-shadow:
    12px 12px 0 rgba(2, 8, 16, 0.34),
    0 0 34px rgba(244, 199, 98, 0.18) !important;
}

.perk-hammer-card.is-hit::after {
  animation: perkAccentShockV47 720ms steps(8, end) both !important;
}

.perk-hammer-card.is-revealed .perk-card-tag {
  color: var(--amber) !important;
}

.perk-hammer-card.is-winning {
  border-color: rgba(244, 199, 98, 1) !important;
  background:
    radial-gradient(320px circle at 50% 20%, rgba(244, 199, 98, 0.20), transparent 66%),
    linear-gradient(180deg, rgba(58, 43, 15, 0.94), rgba(17, 24, 31, 0.96)) !important;
  box-shadow:
    0 0 0 2px rgba(244,199,98,0.20),
    0 0 34px rgba(244,199,98,0.30),
    var(--shadow) !important;
  animation: perkGoldGlowV47 1.85s ease-in-out infinite !important;
}

.perk-hammer-card.is-winning .perk-card-index,
.perk-hammer-card.is-winning .perk-card-title,
.perk-hammer-card.is-winning .perk-card-tag {
  color: #fff2bd !important;
}

.perk-hammer-card.is-winning .perk-card-copy {
  color: rgba(255, 248, 225, 0.84) !important;
}

.perk-winner-banner {
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
  pointer-events: none;
  margin: 0 auto 22px;
  width: fit-content;
  max-width: min(100%, 820px);
  padding: 16px 20px;
  border: 2px solid rgba(244, 199, 98, 0.95);
  background:
    radial-gradient(300px circle at 50% 50%, rgba(244,199,98,0.18), transparent 68%),
    linear-gradient(180deg, rgba(70, 52, 11, 0.94), rgba(26, 20, 7, 0.96));
  color: #fff6d2;
  font-family: "Press Start 2P", "Jersey 15", monospace;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.55;
  text-align: center;
  box-shadow: 0 0 32px rgba(244, 199, 98, 0.24);
  transition: opacity .35s ease, transform .35s ease;
}

.perk-lab-shell.is-won .perk-winner-banner {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes perkCleanFlipV47 {
  0% {
    transform: perspective(900px) rotateY(0deg) scale(1);
  }
  28% {
    transform: perspective(900px) rotateY(168deg) scale(1.025);
  }
  54% {
    transform: perspective(900px) rotateY(382deg) scale(1.01);
  }
  76% {
    transform: perspective(900px) rotateY(526deg) scale(0.992);
  }
  91% {
    transform: perspective(900px) rotateY(548deg) scale(1.006);
  }
  100% {
    transform: perspective(900px) rotateY(540deg) scale(1);
  }
}

@keyframes perkAccentShockV47 {
  0% {
    opacity: 0.64;
    transform: scaleX(1);
  }
  35% {
    opacity: 1;
    transform: scaleX(0.72);
  }
  100% {
    opacity: 0.72;
    transform: scaleX(1);
  }
}

@keyframes perkGoldGlowV47 {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.16);
  }
}

@media (max-width: 1280px) {
  .perk-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .perk-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .perk-card-grid {
    grid-template-columns: 1fr !important;
  }

  .perk-hammer-card {
    min-height: 252px !important;
    padding: 28px 18px 24px !important;
  }

  .perk-card-tag {
    top: 36px !important;
    right: 18px !important;
  }
}


/* ===== V48 Perk game rebuilt from index mini-card / hammer pattern ===== */

.perk-card-grid.perk-mini-grid {
  width: min(100%, 1480px);
  max-width: 1480px;
  margin: clamp(30px, 4vw, 54px) auto 0;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.65vw, 22px) !important;
}

.perk-mini-card {
  min-height: 292px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  text-align: left !important;
  cursor: none !important;
  perspective: 800px !important;
}

.perk-mini-card .mini-card-inner {
  position: relative !important;
  display: block !important;
  min-height: 292px !important;
  transform-style: preserve-3d !important;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.perk-mini-card.is-flipped .mini-card-inner {
  transform: rotateY(180deg) !important;
}

.perk-mini-card.is-striking .mini-card-inner {
  animation: perkMiniHitV48 760ms cubic-bezier(.18,.84,.22,1) both !important;
}

.perk-mini-card .mini-card-face {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 32px 22px 28px !important;
  border: 3px solid rgba(159, 216, 244, 0.86) !important;
  background:
    radial-gradient(280px circle at var(--mx, 50%) var(--my, 46%), rgba(121, 213, 223, 0.075), transparent 64%),
    linear-gradient(180deg, rgba(37, 58, 86, 0.78), rgba(17, 31, 49, 0.96)) !important;
  box-shadow: var(--shadow) !important;
  backface-visibility: hidden !important;
  overflow: hidden !important;
}

.perk-mini-card .mini-card-face::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  border: 1px solid rgba(159, 216, 244, 0.20) !important;
  background:
    repeating-linear-gradient(135deg, rgba(159,216,244,0.065) 0 5px, transparent 5px 16px) !important;
  opacity: 0.52 !important;
  pointer-events: none !important;
}

.perk-mini-card .mini-card-face::after {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 24px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--cyan), rgba(244,199,98,0.54), transparent) !important;
  opacity: 0.64 !important;
  pointer-events: none !important;
}

.perk-mini-card:hover .mini-card-face,
.perk-mini-card:focus-visible .mini-card-face {
  border-color: rgba(244, 199, 98, 0.92) !important;
  background:
    radial-gradient(300px circle at var(--mx, 50%) var(--my, 46%), rgba(121, 213, 223, 0.095), transparent 64%),
    linear-gradient(180deg, rgba(42, 64, 92, 0.88), rgba(17, 31, 49, 0.97)) !important;
}

.perk-mini-card .mini-card-back {
  transform: rotateY(180deg) !important;
}

.perk-mini-card .mini-card-front strong,
.perk-mini-card .mini-card-back strong {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  width: fit-content !important;
  min-width: 48px !important;
  height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  margin: 0 0 24px !important;
  border: 2px solid rgba(244, 199, 98, 0.88) !important;
  color: var(--amber) !important;
  background: rgba(7, 15, 24, 0.62) !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.perk-mini-card .mini-card-back strong {
  width: auto !important;
  height: auto !important;
  min-height: 34px !important;
  justify-content: flex-start !important;
  line-height: 1.22 !important;
}

.perk-mini-card .mini-card-front > span:not(.mini-card-face),
.perk-mini-card .mini-card-back > span:not(.mini-card-face) {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

.perk-mini-card .mini-card-front > span:not(.mini-card-face) {
  color: var(--paper) !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 1.65vw, 32px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
}

.perk-mini-card .mini-card-front > small {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  margin-top: 12px !important;
  color: rgba(244, 199, 98, 0.68) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.perk-mini-card .mini-card-back > span:not(.mini-card-face) {
  color: var(--muted) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

/* Neutralize previous hammer-card visual leftovers */
.perk-hammer-card,
.perk-hammer-card * {
  animation-name: none;
}

.perk-card-hammer,
.perk-card-hammer *,
.perk-card-nail,
.perk-card-tag,
.perk-card-face,
.perk-card-title,
.perk-card-copy,
.perk-card-index {
  display: none !important;
}

.perk-mini-card.is-winning .mini-card-face {
  border-color: rgba(244, 199, 98, 1) !important;
  background:
    radial-gradient(320px circle at 50% 20%, rgba(244, 199, 98, 0.20), transparent 66%),
    linear-gradient(180deg, rgba(58, 43, 15, 0.94), rgba(17, 24, 31, 0.96)) !important;
  box-shadow:
    0 0 0 2px rgba(244,199,98,0.20),
    0 0 34px rgba(244,199,98,0.30),
    var(--shadow) !important;
  animation: perkGoldGlowV48 1.85s ease-in-out infinite !important;
}

.perk-mini-card.is-winning .mini-card-front strong,
.perk-mini-card.is-winning .mini-card-back strong,
.perk-mini-card.is-winning .mini-card-front > span:not(.mini-card-face) {
  color: #fff2bd !important;
}

.perk-mini-card.is-winning .mini-card-back > span:not(.mini-card-face) {
  color: rgba(255, 248, 225, 0.84) !important;
}

.perk-winner-banner {
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
  pointer-events: none;
  margin: 0 auto 22px;
  width: fit-content;
  max-width: min(100%, 820px);
  padding: 16px 20px;
  border: 2px solid rgba(244, 199, 98, 0.95);
  background:
    radial-gradient(300px circle at 50% 50%, rgba(244,199,98,0.18), transparent 68%),
    linear-gradient(180deg, rgba(70, 52, 11, 0.94), rgba(26, 20, 7, 0.96));
  color: #fff6d2;
  font-family: "Press Start 2P", "Jersey 15", monospace;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.55;
  text-align: center;
  box-shadow: 0 0 32px rgba(244, 199, 98, 0.24);
  transition: opacity .35s ease, transform .35s ease;
}

.perk-lab-shell.is-won .perk-winner-banner {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes perkMiniHitV48 {
  0% { transform: translateY(0) rotateZ(0deg); }
  42% { transform: translateY(4px) rotateZ(-1deg); }
  68% { transform: translateY(-2px) rotateZ(0.65deg); }
  100% { transform: translateY(0) rotateZ(0deg); }
}

@keyframes perkGoldGlowV48 {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}

@media (max-width: 1280px) {
  .perk-card-grid.perk-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .perk-card-grid.perk-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .perk-card-grid.perk-mini-grid {
    grid-template-columns: 1fr !important;
  }

  .perk-mini-card,
  .perk-mini-card .mini-card-inner {
    min-height: 242px !important;
  }

  .perk-mini-card .mini-card-face {
    padding: 28px 18px 24px !important;
  }
}


/* ===== V49 Perk card polish ===== */

.perk-card-grid.perk-mini-grid {
  align-items: stretch;
}

.perk-mini-card .mini-card-face {
  border-width: 3px !important;
  background:
    radial-gradient(360px circle at var(--mx, 52%) var(--my, 44%), rgba(121, 213, 223, 0.11), transparent 62%),
    linear-gradient(180deg, rgba(41, 64, 92, 0.82), rgba(16, 31, 50, 0.98)) !important;
}

.perk-mini-card .mini-card-face::before {
  inset: 11px !important;
  border-color: rgba(159, 216, 244, 0.24) !important;
  background:
    repeating-linear-gradient(135deg, rgba(159,216,244,0.07) 0 5px, transparent 5px 17px),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 32%) !important;
  opacity: 0.62 !important;
}

.perk-mini-card .mini-card-face::after {
  height: 4px !important;
  opacity: 0.8 !important;
  background:
    linear-gradient(90deg, var(--cyan), rgba(244,199,98,0.68), transparent) !important;
  box-shadow: 0 0 12px rgba(121, 213, 223, 0.12);
}

.perk-mini-card .mini-card-front strong,
.perk-mini-card .mini-card-back strong {
  box-shadow:
    inset 0 0 0 1px rgba(244,199,98,0.18),
    0 0 12px rgba(244,199,98,0.12);
}

.perk-mini-card .mini-card-front > span:not(.mini-card-face) {
  max-width: 92%;
  color: var(--paper) !important;
  text-shadow: 4px 4px 0 rgba(2, 8, 16, 0.28);
  font-size: clamp(25px, 1.78vw, 35px) !important;
}

.perk-mini-card .mini-card-front > small {
  width: fit-content;
  margin-top: 16px !important;
  padding: 6px 9px;
  border: 1px solid rgba(244,199,98,0.34);
  background: rgba(7, 15, 24, 0.48);
  color: rgba(244, 199, 98, 0.82) !important;
}

.perk-mini-card .mini-card-back strong {
  margin-bottom: 18px !important;
  color: #ffe08b !important;
}

.perk-mini-card .mini-card-back > span:not(.mini-card-face) {
  max-width: 95%;
  color: rgba(203, 221, 234, 0.88) !important;
  font-size: 14.5px !important;
  line-height: 1.62 !important;
}

.perk-mini-card.is-striking .mini-card-inner {
  animation: perkMiniHitV49 720ms cubic-bezier(.16,.84,.22,1) both !important;
}

.perk-mini-card.is-striking .mini-card-face {
  border-color: rgba(244, 199, 98, 0.96) !important;
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 34px rgba(244,199,98,0.20) !important;
}

.perk-mini-card.is-revealed .mini-card-front > small {
  color: rgba(121, 213, 223, 0.92) !important;
  border-color: rgba(121, 213, 223, 0.34);
}

.hammer-spark {
  z-index: 14 !important;
}

@keyframes perkMiniHitV49 {
  0% {
    transform: rotateY(0deg) translateY(0) scale(1);
  }
  38% {
    transform: rotateY(58deg) translateY(4px) scale(1.01);
  }
  72% {
    transform: rotateY(172deg) translateY(-2px) scale(1.006);
  }
  100% {
    transform: rotateY(180deg) translateY(0) scale(1);
  }
}


/* ===== V50 Clean partnership perk cards + visible real flip ===== */

.perk-lab-heading .eyebrow {
  color: var(--amber) !important;
}

.perk-lab-heading h2 {
  max-width: 1040px !important;
}

.perk-lab-heading p {
  max-width: 840px !important;
}

.perk-card-grid.perk-mini-grid {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin: clamp(30px, 4vw, 54px) auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.65vw, 22px) !important;
  align-items: stretch !important;
}

.perk-mini-card {
  min-height: 318px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  text-align: left !important;
  cursor: none !important;
  perspective: 1050px !important;
  transform-style: preserve-3d !important;
}

.perk-mini-card .mini-card-inner {
  position: relative !important;
  display: block !important;
  min-height: 318px !important;
  transform-style: preserve-3d !important;
  transform: rotateY(0deg) !important;
  transition: transform 760ms cubic-bezier(.18,.82,.22,1) !important;
  will-change: transform !important;
}

.perk-mini-card.is-flipped .mini-card-inner {
  transform: rotateY(180deg) !important;
}

.perk-mini-card.is-striking .mini-card-inner {
  animation: none !important;
  transition: transform 760ms cubic-bezier(.18,.82,.22,1) !important;
}

.perk-mini-card.is-striking {
  animation: perkCardImpactV50 760ms cubic-bezier(.18,.82,.22,1) both !important;
}

.perk-mini-card .mini-card-face {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 30px 22px 28px !important;
  border: 3px solid rgba(159, 216, 244, 0.86) !important;
  background:
    radial-gradient(360px circle at var(--mx, 52%) var(--my, 44%), rgba(121, 213, 223, 0.11), transparent 62%),
    linear-gradient(180deg, rgba(41, 64, 92, 0.82), rgba(16, 31, 50, 0.98)) !important;
  box-shadow: var(--shadow) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  overflow: hidden !important;
}

.perk-mini-card .mini-card-back {
  transform: rotateY(180deg) !important;
}

.perk-mini-card .mini-card-face::before {
  content: "" !important;
  position: absolute !important;
  inset: 11px !important;
  border: 1px solid rgba(159, 216, 244, 0.24) !important;
  background:
    repeating-linear-gradient(135deg, rgba(159,216,244,0.07) 0 5px, transparent 5px 17px),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 32%) !important;
  opacity: 0.62 !important;
  pointer-events: none !important;
}

.perk-mini-card .mini-card-face::after {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 24px !important;
  height: 4px !important;
  background:
    linear-gradient(90deg, var(--cyan), rgba(244,199,98,0.68), transparent) !important;
  box-shadow: 0 0 12px rgba(121, 213, 223, 0.12) !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
}

.perk-mini-card:hover .mini-card-face,
.perk-mini-card:focus-visible .mini-card-face {
  border-color: rgba(244, 199, 98, 0.92) !important;
  background:
    radial-gradient(390px circle at var(--mx, 52%) var(--my, 44%), rgba(121, 213, 223, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(47, 72, 101, 0.9), rgba(16, 31, 50, 0.98)) !important;
}

.perk-mini-card.is-striking .mini-card-face {
  border-color: rgba(244, 199, 98, 0.98) !important;
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 34px rgba(244,199,98,0.20) !important;
}

.perk-mini-card .mini-card-front strong,
.perk-mini-card .mini-card-back strong {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  width: fit-content !important;
  min-width: 48px !important;
  height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  margin: 0 0 24px !important;
  border: 2px solid rgba(244, 199, 98, 0.88) !important;
  color: var(--amber) !important;
  background: rgba(7, 15, 24, 0.62) !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(244,199,98,0.18),
    0 0 12px rgba(244,199,98,0.12) !important;
}

.perk-mini-card .mini-card-front > span:not(.mini-card-face),
.perk-mini-card .mini-card-back > span:not(.mini-card-face) {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  max-width: 94% !important;
  color: #ffd16b !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 1.45vw, 29px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 4px 4px 0 rgba(2, 8, 16, 0.28) !important;
}

.perk-mini-card .mini-card-front > small,
.perk-mini-card .mini-card-back > small {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  max-width: 96% !important;
  margin-top: 18px !important;
  color: rgba(203, 221, 234, 0.88) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

.perk-mini-card.is-winning .mini-card-face {
  border-color: rgba(244, 199, 98, 1) !important;
  background:
    radial-gradient(320px circle at 50% 20%, rgba(244, 199, 98, 0.20), transparent 66%),
    linear-gradient(180deg, rgba(58, 43, 15, 0.94), rgba(17, 24, 31, 0.96)) !important;
  box-shadow:
    0 0 0 2px rgba(244,199,98,0.20),
    0 0 34px rgba(244,199,98,0.30),
    var(--shadow) !important;
  animation: perkGoldGlowV50 1.85s ease-in-out infinite !important;
}

.perk-mini-card.is-winning .mini-card-front strong,
.perk-mini-card.is-winning .mini-card-back strong,
.perk-mini-card.is-winning .mini-card-front > span:not(.mini-card-face),
.perk-mini-card.is-winning .mini-card-back > span:not(.mini-card-face) {
  color: #fff2bd !important;
}

.perk-mini-card.is-winning .mini-card-front > small,
.perk-mini-card.is-winning .mini-card-back > small {
  color: rgba(255, 248, 225, 0.84) !important;
}

@keyframes perkCardImpactV50 {
  0% { transform: translateY(0) rotateZ(0deg); }
  28% { transform: translateY(4px) rotateZ(-0.8deg); }
  64% { transform: translateY(-2px) rotateZ(0.5deg); }
  100% { transform: translateY(0) rotateZ(0deg); }
}

@keyframes perkGoldGlowV50 {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}

@media (max-width: 1280px) {
  .perk-card-grid.perk-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .perk-card-grid.perk-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .perk-card-grid.perk-mini-grid {
    grid-template-columns: 1fr !important;
  }

  .perk-mini-card,
  .perk-mini-card .mini-card-inner {
    min-height: 260px !important;
  }

  .perk-mini-card .mini-card-face {
    padding: 28px 18px 24px !important;
  }
}


/* ===== V51 — Fix perk card consistency and text overflow =====
   The visual issue came from older V48/V49 selectors still affecting different
   faces/cards. This block force-normalizes both sides of every perk card. */

.perk-card-grid.perk-mini-grid {
  grid-auto-rows: 1fr !important;
}

.perk-mini-card,
.perk-mini-card.perk-hammer-card {
  width: 100% !important;
  min-width: 0 !important;
  height: 330px !important;
  min-height: 330px !important;
  max-height: 330px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  perspective: 1100px !important;
}

.perk-mini-card .mini-card-inner {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  position: relative !important;
  display: block !important;
  transform-style: preserve-3d !important;
  transition: transform 760ms cubic-bezier(.18,.82,.22,1) !important;
}

.perk-mini-card.is-flipped .mini-card-inner {
  transform: rotateY(180deg) !important;
}

.perk-mini-card .mini-card-face {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 30px 22px 30px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;
  align-content: start !important;
  gap: 0 !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  border: 3px solid rgba(159, 216, 244, 0.86) !important;
  background:
    radial-gradient(360px circle at var(--mx, 52%) var(--my, 44%), rgba(121, 213, 223, 0.11), transparent 62%),
    linear-gradient(180deg, rgba(41, 64, 92, 0.82), rgba(16, 31, 50, 0.98)) !important;
  box-shadow: var(--shadow) !important;
}

.perk-mini-card .mini-card-back {
  transform: rotateY(180deg) !important;
}

.perk-mini-card .mini-card-face::before {
  content: "" !important;
  position: absolute !important;
  inset: 11px !important;
  z-index: 0 !important;
  border: 1px solid rgba(159, 216, 244, 0.24) !important;
  background:
    repeating-linear-gradient(135deg, rgba(159,216,244,0.07) 0 5px, transparent 5px 17px),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 32%) !important;
  opacity: 0.62 !important;
  pointer-events: none !important;
}

.perk-mini-card .mini-card-face::after {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 24px !important;
  z-index: 1 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--cyan), rgba(244,199,98,0.68), transparent) !important;
  box-shadow: 0 0 12px rgba(121, 213, 223, 0.12) !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
}

.perk-mini-card .mini-card-front strong,
.perk-mini-card .mini-card-back strong {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  grid-row: 1 !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 48px !important;
  height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  margin: 0 0 24px !important;
  border: 2px solid rgba(244, 199, 98, 0.88) !important;
  color: var(--amber) !important;
  background: rgba(7, 15, 24, 0.62) !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(244,199,98,0.18),
    0 0 12px rgba(244,199,98,0.12) !important;
}

.perk-mini-card .mini-card-front > span:not(.mini-card-face),
.perk-mini-card .mini-card-back > span:not(.mini-card-face) {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  grid-row: 2 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffd16b !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 800 !important;
  font-size: clamp(21px, 1.35vw, 27px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 4px 4px 0 rgba(2, 8, 16, 0.28) !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.perk-mini-card .mini-card-front > small,
.perk-mini-card .mini-card-back > small {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  grid-row: 3 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(203, 221, 234, 0.88) !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 400 !important;
  font-size: 13.5px !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 6 !important;
}

/* Old V49 made the revealed front small look like a tag. Disable that. */
.perk-mini-card.is-revealed .mini-card-front > small,
.perk-mini-card.is-revealed .mini-card-back > small {
  color: rgba(203, 221, 234, 0.88) !important;
  border: 0 !important;
  background: transparent !important;
}

/* Keep every revealed state visually identical, regardless of current face. */
.perk-mini-card.is-flipped .mini-card-front,
.perk-mini-card:not(.is-flipped) .mini-card-back {
  pointer-events: none !important;
}

.perk-mini-card:hover .mini-card-face,
.perk-mini-card:focus-visible .mini-card-face {
  border-color: rgba(244, 199, 98, 0.92) !important;
}

.perk-mini-card.is-striking .mini-card-face {
  border-color: rgba(244, 199, 98, 0.98) !important;
}

.perk-mini-card.is-winning .mini-card-face {
  border-color: rgba(244, 199, 98, 1) !important;
  background:
    radial-gradient(320px circle at 50% 20%, rgba(244, 199, 98, 0.20), transparent 66%),
    linear-gradient(180deg, rgba(58, 43, 15, 0.94), rgba(17, 24, 31, 0.96)) !important;
}

.perk-mini-card.is-winning .mini-card-front strong,
.perk-mini-card.is-winning .mini-card-back strong,
.perk-mini-card.is-winning .mini-card-front > span:not(.mini-card-face),
.perk-mini-card.is-winning .mini-card-back > span:not(.mini-card-face) {
  color: #fff2bd !important;
}

.perk-mini-card.is-winning .mini-card-front > small,
.perk-mini-card.is-winning .mini-card-back > small {
  color: rgba(255, 248, 225, 0.84) !important;
}

@media (max-width: 1280px) {
  .perk-mini-card,
  .perk-mini-card.perk-hammer-card {
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
  }
}

@media (max-width: 900px) {
  .perk-mini-card,
  .perk-mini-card.perk-hammer-card {
    height: 292px !important;
    min-height: 292px !important;
    max-height: 292px !important;
  }

  .perk-mini-card .mini-card-front > small,
  .perk-mini-card .mini-card-back > small {
    -webkit-line-clamp: 5 !important;
  }
}

@media (max-width: 640px) {
  .perk-mini-card,
  .perk-mini-card.perk-hammer-card {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
  }

  .perk-mini-card .mini-card-face {
    padding: 28px 18px 26px !important;
  }

  .perk-mini-card .mini-card-front > span:not(.mini-card-face),
  .perk-mini-card .mini-card-back > span:not(.mini-card-face) {
    font-size: 23px !important;
  }
}


/* ===== V52 — White-label typography/rhythm standardized to Services/Support =====
   Purpose: bring White-label section headings, intros, accent lines, and tech heading
   back to the same visual system used on Services / Support / Web Development. */

.white-label-main .section-heading,
.white-label-main .tech-heading,
.white-label-main .perk-lab-heading {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

.white-label-main .section-heading .eyebrow,
.white-label-main .tech-heading .eyebrow,
.white-label-main .perk-lab-heading .eyebrow {
  display: block !important;
  margin: 0 0 18px !important;
  color: var(--amber) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.white-label-main .section-heading h2,
.white-label-main .tech-heading h2,
.white-label-main .perk-lab-heading h2 {
  width: auto !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  color: var(--ink) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(30px, 3.2vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-wrap: balance !important;
}

.white-label-main .section-heading p:not(.eyebrow),
.white-label-main .tech-heading p,
.white-label-main .perk-lab-heading p {
  width: auto !important;
  max-width: 920px !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(16px, 1.15vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: none !important;
}

/* The accent line should sit centered under the heading block, like the settled pages. */
.white-label-main .section-heading::after,
.white-label-main .tech-heading::after,
.white-label-main .perk-lab-heading::after {
  content: "" !important;
  display: block !important;
  width: 92px !important;
  height: 3px !important;
  margin: 22px auto 0 !important;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.9), rgba(244, 199, 98, 0.42), transparent) !important;
  box-shadow: 0 0 10px rgba(121, 213, 223, 0.13) !important;
  transform: none !important;
}

/* Match Services page section spacing. */
.white-label-lids,
.white-label-perk-lab,
.white-label-tech,
.white-label-faq {
  padding-top: clamp(52px, 5.8vw, 86px) !important;
  padding-bottom: clamp(52px, 5.8vw, 86px) !important;
}

/* Prevent older editorial/collaboration overrides from leaking into current white-label headings. */
.white-label-collab .section-heading,
.white-label-collab .section-heading .eyebrow,
.white-label-collab .section-heading h2,
.white-label-collab .section-heading p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The Tools block was using its own smaller heading. Force it into the same system. */
.white-label-tech .tech-heading {
  margin-bottom: 28px !important;
}

.white-label-tech .tech-grid {
  margin: 28px auto 0 !important;
}

/* Keep CTA / FAQ headings from becoming oversized due to late overrides. */
.white-label-faq .section-heading h2 {
  font-size: clamp(30px, 3.2vw, 48px) !important;
}

/* Slightly dim pipe interference behind heading-only sections without changing the shared pipe engine. */
.white-label-lids::before,
.white-label-perk-lab::before,
.white-label-tech::before,
.white-label-faq::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(760px circle at 50% 16%, rgba(7, 20, 33, 0.42), transparent 58%) !important;
}

.white-label-lids > :not(.white-blueprint-bg),
.white-label-perk-lab > :not(.white-blueprint-bg),
.white-label-tech > :not(.white-blueprint-bg),
.white-label-faq > :not(.white-blueprint-bg) {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 820px) {
  .white-label-main .section-heading,
  .white-label-main .tech-heading,
  .white-label-main .perk-lab-heading {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
  }

  .white-label-main .section-heading h2,
  .white-label-main .tech-heading h2,
  .white-label-main .perk-lab-heading h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.14 !important;
  }

  .white-label-main .section-heading p:not(.eyebrow),
  .white-label-main .tech-heading p,
  .white-label-main .perk-lab-heading p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}


/* ===== V53 White-label mascot/frame refinements ===== */
.white-collab-spotlight {
  transform: none !important;
}

.white-collab-visual {
  align-self: stretch;
}

.employee-scan-card.hover-card {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}

.employee-normal .hair,
.employee-normal .blush {
  position: absolute;
  display: block;
}

.employee-normal .hair {
  top: -4px;
  width: 10px;
  height: 30px;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, #7b573b, #382218);
  border: 2px solid rgba(9, 19, 31, 0.66);
  border-bottom: none;
  box-shadow: 0 3px 0 rgba(255,255,255,0.08) inset;
}
.employee-normal .hair-a { left: 49px; transform: rotate(-18deg); }
.employee-normal .hair-b { left: 66px; height: 34px; top: -8px; transform: rotate(-2deg); }
.employee-normal .hair-c { right: 49px; transform: rotate(18deg); }

.employee-normal .blush {
  top: 66px;
  width: 16px;
  height: 10px;
  border-radius: 999px;
  background: rgba(244, 154, 156, 0.44);
  filter: blur(0.2px);
}
.employee-normal .blush-left { left: 24px; }
.employee-normal .blush-right { right: 24px; }

.employee-normal .smile {
  bottom: 20px;
  width: 50px;
  height: 18px;
  border-bottom-width: 5px;
}

.employee-normal .employee-head {
  box-shadow: 0 16px 22px rgba(0,0,0,0.18), 0 0 0 6px rgba(255,255,255,0.04) inset;
}

.employee-normal .eye {
  width: 15px;
  height: 21px;
}

@media (max-width: 700px) {
  .employee-normal .hair { top: -3px; height: 26px; }
  .employee-normal .hair-a { left: 42px; }
  .employee-normal .hair-b { left: 58px; top: -6px; height: 30px; }
  .employee-normal .hair-c { right: 42px; }
  .employee-normal .blush { top: 58px; }
}


/* ===== V54 White-label X-ray hint + skeleton smile cleanup ===== */
.white-collab-spotlight::before {
  display: none !important;
}

.scan-hint {
  padding: 8px 12px !important;
  min-width: 94px;
  text-align: center;
  font-size: 12px !important;
  letter-spacing: 0.1em;
}

.employee-xray .jaw {
  overflow: hidden;
  height: 30px;
  border-radius: 0 0 20px 20px;
  background: rgba(8, 18, 30, 0.22);
}

.employee-xray .jaw::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 4px;
  height: 10px;
  border-bottom: 3px solid rgba(116, 239, 255, 0.95);
  border-radius: 0 0 12px 12px;
}

.employee-xray .jaw::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  bottom: 5px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(116, 239, 255, 0.98) 0 3px,
      transparent 3px 11px
    );
  border-top: 2px solid rgba(116, 239, 255, 0.82);
  border-radius: 0 0 12px 12px;
  opacity: 0.95;
}

.employee-scan-card::before {
  border-color: rgba(159, 216, 244, 0.22);
}

/* ===== V56 — White-label lid cards aligned with standard site lids + simpler x-ray smile ===== */

/* White-label leaking cards should match the standard card treatment used on the other pages. */
.white-label-lids .support-lid-card {
  min-height: 310px !important;
}

.white-label-lids .lid-water,
.white-label-lids .lid-water::before,
.white-label-lids .lid-water::after {
  display: block !important;
}

.white-label-lids .support-lid-card .lid-bolt {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  border: 3px solid rgba(159, 216, 244, 0.84) !important;
  border-radius: 50% !important;
  background: rgba(4, 13, 23, 0.9) !important;
  box-shadow:
    inset 0 0 0 2px rgba(244, 199, 98, 0.14),
    0 0 10px rgba(121, 213, 223, 0.12) !important;
  transition:
    transform 760ms cubic-bezier(.2,.9,.2,1),
    border-color 360ms ease,
    box-shadow 360ms ease !important;
}

.white-label-lids .support-lid-card .lid-bolt::before {
  content: none !important;
  display: none !important;
}

.white-label-lids .support-lid-card .lid-bolt::after {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  top: 50% !important;
  height: 2px !important;
  background: rgba(244, 199, 98, 0.92) !important;
  transform: translateY(-50%) !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

.white-label-lids .support-lid-card .lid-bolt.b1 { left: 16px !important; top: 16px !important; transform: rotate(42deg) !important; }
.white-label-lids .support-lid-card .lid-bolt.b2 { right: 16px !important; top: 16px !important; transform: rotate(-28deg) !important; }
.white-label-lids .support-lid-card .lid-bolt.b3 { left: 16px !important; bottom: 16px !important; transform: rotate(76deg) !important; }
.white-label-lids .support-lid-card .lid-bolt.b4 { right: 16px !important; bottom: 16px !important; transform: rotate(18deg) !important; }

.white-label-lids .support-lid-card:not(.is-sealed) .lid-bolt.b1 { transform: rotate(42deg) !important; }
.white-label-lids .support-lid-card:not(.is-sealed) .lid-bolt.b2 { transform: rotate(-28deg) !important; }
.white-label-lids .support-lid-card:not(.is-sealed) .lid-bolt.b3 { transform: rotate(76deg) !important; }
.white-label-lids .support-lid-card:not(.is-sealed) .lid-bolt.b4 { transform: rotate(18deg) !important; }

.white-label-lids .support-lid-card.is-sealed .lid-bolt {
  transform: rotate(360deg) !important;
  border-color: rgba(244, 199, 98, 0.92) !important;
  box-shadow:
    inset 0 0 0 2px rgba(244, 199, 98, 0.22),
    0 0 14px rgba(244, 199, 98, 0.18) !important;
}

.white-label-lids .support-lid-card.is-bumped .lid-bolt {
  animation: none !important;
}

@media (max-width: 640px) {
  .white-label-lids .support-lid-card .lid-bolt {
    width: 18px !important;
    height: 18px !important;
    border-width: 2px !important;
  }

  .white-label-lids .support-lid-card .lid-bolt.b1 { top: 10px !important; left: 10px !important; }
  .white-label-lids .support-lid-card .lid-bolt.b2 { top: 10px !important; right: 10px !important; }
  .white-label-lids .support-lid-card .lid-bolt.b3 { bottom: 10px !important; left: 10px !important; }
  .white-label-lids .support-lid-card .lid-bolt.b4 { bottom: 10px !important; right: 10px !important; }
}

/* Simpler x-ray smile: keep a normal friendly jaw line without the toothy grin. */
.employee-xray .jaw {
  overflow: visible !important;
  height: 24px !important;
  background: transparent !important;
}

.employee-xray .jaw::before {
  content: "" !important;
  position: absolute !important;
  left: 13px !important;
  right: 13px !important;
  top: 6px !important;
  height: 10px !important;
  border-bottom: 3px solid rgba(116, 239, 255, 0.95) !important;
  border-radius: 0 0 14px 14px !important;
  opacity: 1 !important;
}

.employee-xray .jaw::after {
  content: none !important;
  display: none !important;
}


/* ===== V57 — Hero responsive fixes only, desktop restored =====
   Desktop hero styles are intentionally untouched.
   These rules apply only below 980px. */

/* Tablet / small laptop */
@media (max-width: 980px) {
  .wp-services-main .wp-services-hero,
  .service-detail-main .wp-services-hero,
  .web-development-clean-main .webdev-clean-hero,
  .white-label-main .white-label-hero {
    min-height: auto !important;
    padding: 74px 28px 62px !important;
    text-align: center !important;
  }

  .wp-services-main .wp-services-hero-copy,
  .service-detail-main .wp-services-hero-copy,
  .web-development-clean-main .wp-services-hero-copy,
  .white-label-main .wp-services-hero-copy {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .wp-services-main .wp-services-hero .eyebrow,
  .service-detail-main .wp-services-hero .eyebrow,
  .web-development-clean-main .webdev-clean-hero .eyebrow,
  .white-label-main .white-label-hero .eyebrow {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .wp-services-main .wp-services-hero h1,
  .service-detail-main .wp-services-hero h1,
  .web-development-clean-main .webdev-clean-hero h1,
  .white-label-main .white-label-hero h1 {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(54px, 9.5vw, 86px) !important;
    line-height: 0.94 !important;
    text-align: center !important;
  }

  .wp-services-main .wp-services-lead,
  .service-detail-main .wp-services-lead,
  .web-development-clean-main .wp-services-lead,
  .white-label-main .wp-services-lead {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 18px !important;
    line-height: 1.58 !important;
    text-align: center !important;
  }

  .wp-services-main .wp-services-actions,
  .service-detail-main .wp-services-actions,
  .web-development-clean-main .wp-services-actions,
  .white-label-main .wp-services-actions,
  .wp-services-main .hero-actions,
  .service-detail-main .hero-actions {
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .white-collab-spotlight,
  .white-service-details-card,
  .webdev-narrative-panel,
  .web-development-clean-main .webdev-narrative-panel {
    width: min(100%, 900px) !important;
  }

  .white-collab-spotlight {
    grid-template-columns: 1fr !important;
    padding: 34px 28px !important;
  }

  .white-collab-copy .eyebrow,
  .white-collab-copy h2,
  .white-collab-copy p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .white-collab-copy .panel-accent-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .employee-scan-card {
    width: min(100%, 480px) !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .wp-services-main .wp-services-hero,
  .service-detail-main .wp-services-hero,
  .web-development-clean-main .webdev-clean-hero,
  .white-label-main .white-label-hero {
    min-height: auto !important;
    padding: 50px 20px 44px !important;
    text-align: center !important;
  }

  .wp-services-main .wp-services-hero-copy,
  .service-detail-main .wp-services-hero-copy,
  .web-development-clean-main .wp-services-hero-copy,
  .white-label-main .wp-services-hero-copy {
    width: min(100%, 390px) !important;
    max-width: 390px !important;
  }

  .wp-services-main .wp-services-hero .eyebrow,
  .service-detail-main .wp-services-hero .eyebrow,
  .web-development-clean-main .webdev-clean-hero .eyebrow,
  .white-label-main .white-label-hero .eyebrow {
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin-bottom: 14px !important;
  }

  .wp-services-main .wp-services-hero h1,
  .service-detail-main .wp-services-hero h1,
  .web-development-clean-main .webdev-clean-hero h1,
  .white-label-main .white-label-hero h1 {
    max-width: 390px !important;
    font-size: clamp(48px, 14.5vw, 64px) !important;
    line-height: 0.98 !important;
    margin-bottom: 18px !important;
    text-shadow: 3px 3px 0 rgba(2, 8, 16, 0.45) !important;
  }

  .wp-services-main .wp-services-lead,
  .service-detail-main .wp-services-lead,
  .web-development-clean-main .wp-services-lead,
  .white-label-main .wp-services-lead {
    max-width: 390px !important;
    font-size: 15.5px !important;
    line-height: 1.58 !important;
  }

  .wp-services-main .wp-services-actions,
  .service-detail-main .wp-services-actions,
  .web-development-clean-main .wp-services-actions,
  .white-label-main .wp-services-actions,
  .wp-services-main .hero-actions,
  .service-detail-main .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100%, 360px) !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  .wp-services-main .wp-services-actions a,
  .service-detail-main .wp-services-actions a,
  .web-development-clean-main .wp-services-actions a,
  .white-label-main .wp-services-actions a,
  .wp-services-main .hero-actions a,
  .service-detail-main .hero-actions a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 16px 18px !important;
    font-size: 12px !important;
  }

  .white-service-details-card,
  .webdev-narrative-panel,
  .web-development-clean-main .webdev-narrative-panel,
  .white-collab-spotlight,
  .compact-page-cta-card {
    width: calc(100% - 28px) !important;
    padding: 26px 20px !important;
  }

  .white-service-details-card h2,
  .webdev-narrative-panel h2,
  .white-collab-copy h2 {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 1.02 !important;
  }

  .white-service-details-card p,
  .webdev-narrative-panel p,
  .white-collab-copy p:not(.eyebrow) {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }

  .employee-scan-card {
    min-height: 430px !important;
    width: min(100%, 340px) !important;
  }

  .scan-hint {
    top: 14px !important;
    right: 14px !important;
    min-width: 72px !important;
    padding: 7px 9px !important;
    font-size: 10px !important;
  }

  .white-label-lids .support-lid-grid.white-label-lid-grid,
  .support-lid-grid,
  .perk-card-grid.perk-mini-grid {
    width: calc(100% - 28px) !important;
  }
}

@media (max-width: 390px) {
  .wp-services-main .wp-services-hero h1,
  .service-detail-main .wp-services-hero h1,
  .web-development-clean-main .webdev-clean-hero h1,
  .white-label-main .white-label-hero h1 {
    font-size: clamp(42px, 14vw, 54px) !important;
  }

  .wp-services-main .wp-services-lead,
  .service-detail-main .wp-services-lead,
  .web-development-clean-main .wp-services-lead,
  .white-label-main .wp-services-lead {
    font-size: 14.5px !important;
  }
}


/* ===== V58 — Remove extra white-label lid-water jets =====
   Keep only the canvas/binary leak effect, same visual direction as the settled pages.
   The thick .lid-water streams were re-enabled in V56 and looked like foreign elements. */
.white-label-lids .lid-water,
.white-label-lids .lid-water::before,
.white-label-lids .lid-water::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

.white-label-lids .support-lid-card.is-sealed .lid-water {
  display: none !important;
  opacity: 0 !important;
}


/* ===== V59 — Dedicated Developers page ===== */
.dedicated-main {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.dedicated-main > section {
  position: relative;
  z-index: 1;
}

.dedicated-hero .wp-services-hero-copy {
  max-width: 1080px;
}

.dedicated-service-panel {
  width: min(100% - 48px, 1560px);
  margin-left: auto;
  margin-right: auto;
}

.dedicated-workflow,
.dedicated-expertise,
.dedicated-tools,
.dedicated-faq {
  width: min(100% - 48px, 1760px);
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(52px, 5.8vw, 90px);
  padding-bottom: clamp(52px, 5.8vw, 90px);
}

.dedicated-lid-grid {
  margin-top: 30px;
}

.dedicated-lid-card .lid-content h3 {
  max-width: 14ch;
}

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

.dedicated-expertise-card {
  min-height: 270px;
}

.dedicated-card-num {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dedicated-tools .tech-grid,
.dedicated-tools-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(100%, 1180px);
  margin: 30px auto 0;
}

.dedicated-tools .tech-grid span,
.dedicated-tools-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 16px;
  border: 2px solid rgba(159, 216, 244, 0.72);
  background: rgba(11, 24, 38, 0.72);
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 rgba(2, 8, 16, 0.3);
  transition: transform 160ms steps(4, end), border-color 160ms steps(4, end), color 160ms steps(4, end);
}

.dedicated-tools .tech-grid span:hover,
.dedicated-tools-grid span:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.9);
  color: var(--ink);
}

.dedicated-faq .section-heading,
.dedicated-faq .section-heading h2,
.dedicated-faq .eyebrow {
  text-align: center;
}

.dedicated-faq .section-heading::after {
  margin-left: auto;
  margin-right: auto;
}

.dedicated-faq-list {
  width: min(100%, 980px);
  margin-left: auto;
  margin-right: auto;
}

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

@media (max-width: 820px) {
  .dedicated-workflow,
  .dedicated-expertise,
  .dedicated-tools,
  .dedicated-faq {
    width: min(100% - 28px, 1760px);
  }

  .dedicated-service-panel {
    width: min(100% - 28px, 1560px);
  }

  .dedicated-expertise-grid {
    grid-template-columns: 1fr;
  }

  .dedicated-tools .tech-grid span,
  .dedicated-tools-grid span {
    font-size: 12px;
    min-height: 42px;
    padding: 10px 12px;
  }
}


/* ===== V61 — Dedicated Developers final style + random lid fix =====
   Dedicated page only. Restores frames, typography, section standards,
   and relies on V44 random auto-open only after removing old V41 duplicate JS. */

.dedicated-main {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: "Space Mono", monospace !important;
}

.dedicated-main > section {
  position: relative !important;
  z-index: 1 !important;
}

/* Dedicated hero: keep current desktop, normalize only obvious type/colors. */
.dedicated-main .dedicated-hero .eyebrow {
  color: var(--amber) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.dedicated-main .dedicated-hero h1 {
  color: var(--ink) !important;
  font-family: "Jersey 15", "Space Mono", monospace !important;
  font-weight: 400 !important;
  line-height: 0.92 !important;
  text-shadow: 4px 4px 0 rgba(2, 8, 16, 0.42) !important;
}

.dedicated-main .dedicated-hero .wp-services-lead {
  color: var(--soft) !important;
  font-family: "Space Mono", monospace !important;
  font-weight: 400 !important;
}

/* Service details frame — this is the missing frame from the screenshot. */
.dedicated-main .dedicated-details-section {
  width: min(100% - 48px, 1760px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(52px, 5.8vw, 90px) !important;
  padding-bottom: clamp(52px, 5.8vw, 90px) !important;
}

.dedicated-main .dedicated-service-panel,
.dedicated-main .webdev-clean-story-card.dedicated-service-panel,
.dedicated-main .webdev-narrative-panel.dedicated-service-panel {
  position: relative !important;
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: clamp(42px, 5vw, 70px) clamp(38px, 5.2vw, 86px) !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr) !important;
  gap: clamp(30px, 5vw, 74px) !important;
  align-items: start !important;
  border: 3px solid rgba(159, 216, 244, 0.86) !important;
  background:
    radial-gradient(780px circle at 22% 18%, rgba(121, 213, 223, 0.09), transparent 62%),
    linear-gradient(180deg, rgba(35, 57, 82, 0.76), rgba(15, 31, 51, 0.93)) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
  transform: none !important;
}

.dedicated-main .dedicated-service-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  z-index: 0 !important;
  border: 1px solid rgba(159, 216, 244, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), transparent 38%),
    radial-gradient(540px circle at 68% 48%, rgba(121, 213, 223, 0.055), transparent 68%) !important;
  pointer-events: none !important;
}

.dedicated-main .dedicated-service-panel > * {
  position: relative !important;
  z-index: 1 !important;
}

.dedicated-main .webdev-narrative-intro .eyebrow,
.dedicated-main .section-heading .eyebrow,
.dedicated-main .tech-heading .eyebrow,
.dedicated-main .compact-page-cta-copy .eyebrow {
  color: var(--amber) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.dedicated-main .webdev-narrative-intro h2 {
  max-width: 12ch !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(38px, 4.25vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em !important;
  text-align: left !important;
}

.dedicated-main .panel-accent-line {
  display: block !important;
  width: 112px !important;
  height: 3px !important;
  margin-top: 28px !important;
  background: linear-gradient(90deg, var(--cyan), rgba(244,199,98,0.52), transparent) !important;
  box-shadow: 0 0 12px rgba(121, 213, 223, 0.12) !important;
}

.dedicated-main .webdev-narrative-copy {
  display: grid !important;
  gap: 18px !important;
  align-self: center !important;
}

.dedicated-main .webdev-narrative-copy p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(15px, 1.06vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

/* Section headings standardization */
.dedicated-main .dedicated-workflow,
.dedicated-main .dedicated-expertise,
.dedicated-main .dedicated-tools,
.dedicated-main .dedicated-faq {
  width: min(100% - 48px, 1760px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(52px, 5.8vw, 90px) !important;
  padding-bottom: clamp(52px, 5.8vw, 90px) !important;
}

.dedicated-main .section-heading,
.dedicated-main .tech-heading {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin: 0 auto clamp(28px, 4vw, 52px) !important;
  text-align: center !important;
}

.dedicated-main .section-heading h2,
.dedicated-main .tech-heading h2 {
  max-width: 980px !important;
  margin: 0 auto !important;
  color: var(--ink) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(30px, 3.2vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
  text-transform: none !important;
  text-wrap: balance !important;
}

.dedicated-main .section-heading p:not(.eyebrow),
.dedicated-main .tech-heading p {
  max-width: 880px !important;
  margin: 16px auto 0 !important;
  color: var(--muted) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(16px, 1.12vw, 19px) !important;
  line-height: 1.65 !important;
  text-align: center !important;
}

.dedicated-main .section-heading::after,
.dedicated-main .tech-heading::after {
  content: "" !important;
  display: block !important;
  width: 92px !important;
  height: 3px !important;
  margin: 22px auto 0 !important;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.9), rgba(244, 199, 98, 0.42), transparent) !important;
  box-shadow: 0 0 10px rgba(121, 213, 223, 0.13) !important;
}

/* Lid cards — standard support/services style, 3x2 dedicated grid. */
.dedicated-main .dedicated-lid-grid {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin: clamp(30px, 4vw, 54px) auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.dedicated-main .dedicated-lid-card {
  min-height: 300px !important;
}

.dedicated-main .dedicated-lid-card .lid-content strong {
  color: var(--amber) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(36px, 3.4vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 0.9 !important;
}

.dedicated-main .dedicated-lid-card .lid-content h3 {
  max-width: 15ch !important;
  margin: 28px 0 12px !important;
  color: var(--ink) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(19px, 1.4vw, 25px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

.dedicated-main .dedicated-lid-card .lid-content p {
  color: var(--muted) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Expertise cards */
.dedicated-main .dedicated-expertise-grid {
  width: min(100%, 1320px) !important;
  margin: clamp(30px, 4vw, 54px) auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.dedicated-main .dedicated-expertise-card {
  min-height: 250px !important;
  padding: 30px 26px !important;
  border: 3px solid rgba(159, 216, 244, 0.78) !important;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(121,213,223,0.08), transparent 62%),
    linear-gradient(180deg, rgba(35, 57, 82, 0.74), rgba(15, 31, 51, 0.92)) !important;
  box-shadow: var(--shadow) !important;
}

.dedicated-main .dedicated-card-num {
  display: inline-flex !important;
  margin: 0 0 18px !important;
  color: var(--amber) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

.dedicated-main .dedicated-expertise-card h3 {
  margin: 0 0 12px !important;
  color: var(--ink) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(21px, 1.7vw, 28px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

.dedicated-main .dedicated-expertise-card p {
  color: var(--muted) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Tools chips */
.dedicated-main .dedicated-tools-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  width: min(100%, 1180px) !important;
  margin: 30px auto 0 !important;
}

.dedicated-main .dedicated-tools-grid span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 12px 16px !important;
  border: 2px solid rgba(159, 216, 244, 0.72) !important;
  background: rgba(11, 24, 38, 0.72) !important;
  color: var(--soft) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  box-shadow: 4px 4px 0 rgba(2, 8, 16, 0.3) !important;
}

.dedicated-main .dedicated-tools-grid span:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(244, 199, 98, 0.9) !important;
  color: var(--ink) !important;
}

/* FAQ + CTA widths */
.dedicated-main .dedicated-faq-list {
  width: min(100%, 980px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.dedicated-main .compact-page-cta-card {
  width: min(100% - 72px, 1480px) !important;
}

/* Mobile/tablet dedicated only */
@media (max-width: 1180px) {
  .dedicated-main .dedicated-lid-grid,
  .dedicated-main .dedicated-expertise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .dedicated-main .dedicated-service-panel {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center !important;
  }

  .dedicated-main .webdev-narrative-intro h2,
  .dedicated-main .webdev-narrative-copy p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dedicated-main .panel-accent-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 820px) {
  .dedicated-main .dedicated-details-section,
  .dedicated-main .dedicated-workflow,
  .dedicated-main .dedicated-expertise,
  .dedicated-main .dedicated-tools,
  .dedicated-main .dedicated-faq {
    width: min(100% - 28px, 1760px) !important;
  }

  .dedicated-main .dedicated-lid-grid,
  .dedicated-main .dedicated-expertise-grid {
    grid-template-columns: 1fr !important;
  }

  .dedicated-main .dedicated-service-panel {
    padding: 26px 20px !important;
  }

  .dedicated-main .webdev-narrative-intro h2 {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 1.02 !important;
  }

  .dedicated-main .webdev-narrative-copy p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }

  .dedicated-main .dedicated-tools-grid span {
    font-size: 12px !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
  }
}


/* ===== V62 — Dedicated service details vertical layout, like White-label service details ===== */

.dedicated-main .dedicated-service-panel-vertical,
.dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
.dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
  position: relative !important;
  display: block !important;
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: clamp(44px, 5.2vw, 78px) clamp(34px, 5.4vw, 96px) !important;
  border: 3px solid rgba(159, 216, 244, 0.86) !important;
  background:
    radial-gradient(900px circle at 24% 18%, rgba(121, 213, 223, 0.105), transparent 64%),
    radial-gradient(720px circle at 78% 72%, rgba(244, 199, 98, 0.045), transparent 68%),
    linear-gradient(180deg, rgba(35, 57, 82, 0.78), rgba(15, 31, 51, 0.94)) !important;
  box-shadow:
    12px 12px 0 rgba(2, 8, 16, 0.34),
    0 0 30px rgba(121, 213, 223, 0.08) !important;
  overflow: hidden !important;
  transform: none !important;
  text-align: left !important;
}

.dedicated-main .dedicated-service-panel-vertical::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  z-index: 0 !important;
  border: 1px solid rgba(159, 216, 244, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 38%),
    repeating-linear-gradient(135deg, rgba(159,216,244,0.025) 0 3px, transparent 3px 22px) !important;
  pointer-events: none !important;
}

.dedicated-main .dedicated-service-panel-vertical::after {
  content: "" !important;
  position: absolute !important;
  left: -18% !important;
  right: -18% !important;
  top: 42% !important;
  height: 72px !important;
  z-index: 0 !important;
  opacity: 0.36 !important;
  background:
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.12), rgba(244, 199, 98, 0.055), transparent) !important;
  transform: rotate(-1deg) !important;
  animation: dedicatedPanelScanV62 7.5s steps(12, end) infinite !important;
  pointer-events: none !important;
}

.dedicated-service-panel-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.dedicated-service-panel-bg span {
  position: absolute !important;
  display: block !important;
  width: 3px !important;
  height: 100% !important;
  top: 0 !important;
  background: linear-gradient(180deg, transparent, rgba(121, 213, 223, 0.18), transparent) !important;
  opacity: 0.42 !important;
  filter: blur(0.3px) !important;
}

.dedicated-service-panel-bg span:nth-child(1) { left: 28%; }
.dedicated-service-panel-bg span:nth-child(2) { left: 58%; opacity: 0.28 !important; }
.dedicated-service-panel-bg span:nth-child(3) { right: 18%; opacity: 0.22 !important; }

.dedicated-main .dedicated-service-panel-vertical > .webdev-narrative-intro,
.dedicated-main .dedicated-service-panel-vertical > .webdev-narrative-copy {
  position: relative !important;
  z-index: 1 !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro {
  max-width: 980px !important;
  margin: 0 0 clamp(30px, 3.8vw, 52px) !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro .eyebrow {
  margin: 0 0 20px !important;
  color: var(--amber) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro h2 {
  max-width: 900px !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(38px, 4.25vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em !important;
  text-align: left !important;
  text-wrap: balance !important;
}

.dedicated-main .dedicated-service-panel-vertical .panel-accent-line {
  display: block !important;
  width: 112px !important;
  height: 3px !important;
  margin-top: 28px !important;
  background: linear-gradient(90deg, var(--cyan), rgba(244,199,98,0.52), transparent) !important;
  box-shadow: 0 0 12px rgba(121, 213, 223, 0.12) !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy {
  display: grid !important;
  gap: 22px !important;
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin: 0 !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(15px, 1.08vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover {
  border-color: rgba(180, 229, 250, 0.94) !important;
  box-shadow:
    12px 12px 0 rgba(2, 8, 16, 0.34),
    0 0 34px rgba(121, 213, 223, 0.12) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover::after {
  opacity: 0.58 !important;
}

@keyframes dedicatedPanelScanV62 {
  0%, 46% {
    transform: translateX(-26%) rotate(-1deg);
    opacity: 0.10;
  }
  62% {
    opacity: 0.44;
  }
  100% {
    transform: translateX(26%) rotate(-1deg);
    opacity: 0.10;
  }
}

@media (max-width: 980px) {
  .dedicated-main .dedicated-service-panel-vertical,
  .dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
  .dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
    padding: 34px 28px !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro,
  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro .eyebrow,
  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro h2,
  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy p {
    text-align: center !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .panel-accent-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {
  .dedicated-main .dedicated-service-panel-vertical,
  .dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
  .dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
    width: calc(100% - 28px) !important;
    padding: 28px 20px !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro h2 {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 1.02 !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
}


/* ===== V63 — Dedicated buttons, service-details polish, subtle background dim ===== */

/* Subtle page dimming so pipes do not overpower text, without changing the pipe canvas itself. */
.dedicated-main::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(820px circle at 50% 28%, rgba(5, 13, 22, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(3, 9, 16, 0.14), rgba(3, 9, 16, 0.24)) !important;
}

.dedicated-main > section,
.dedicated-main > canvas,
.dedicated-main > .pipes-bg-canvas {
  position: relative !important;
}

.dedicated-main > section {
  z-index: 2 !important;
}

.dedicated-main > .pipes-bg-canvas {
  z-index: 1 !important;
}

/* Hero buttons: match the already standardized buttons on Web Development / Support. */
.dedicated-main .dedicated-hero .wp-services-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 34px auto 0 !important;
}

.dedicated-main .dedicated-hero .primary-action,
.dedicated-main .dedicated-hero .secondary-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 220px !important;
  min-height: 60px !important;
  padding: 16px 24px !important;
  font-family: "Space Mono", monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

.dedicated-main .dedicated-hero .cta-btn {
  padding-right: 48px !important;
}

.dedicated-main .dedicated-hero .secondary-action {
  border: 3px solid rgba(159, 216, 244, 0.86) !important;
  background: rgba(7, 16, 28, 0.62) !important;
  color: var(--ink) !important;
  box-shadow: 8px 8px 0 rgba(2, 8, 16, 0.34) !important;
  transition:
    transform 160ms steps(4, end),
    border-color 160ms steps(4, end),
    background 160ms steps(4, end),
    color 160ms steps(4, end) !important;
}

.dedicated-main .dedicated-hero .secondary-action:hover,
.dedicated-main .dedicated-hero .secondary-action:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(244, 199, 98, 0.94) !important;
  background: rgba(13, 29, 47, 0.78) !important;
  color: #ffffff !important;
}

/* Service details: keep vertical layout, add more WebPlumbers panel character. */
.dedicated-main .dedicated-service-panel-vertical,
.dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
.dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
  border-color: rgba(159, 216, 244, 0.92) !important;
  background:
    radial-gradient(900px circle at 18% 14%, rgba(121, 213, 223, 0.12), transparent 62%),
    radial-gradient(760px circle at 92% 80%, rgba(244, 199, 98, 0.055), transparent 68%),
    linear-gradient(180deg, rgba(36, 58, 84, 0.82), rgba(14, 30, 49, 0.95)) !important;
  box-shadow:
    12px 12px 0 rgba(2, 8, 16, 0.36),
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 0 36px rgba(121, 213, 223, 0.08) !important;
}

.dedicated-main .dedicated-service-panel-vertical::before {
  inset: 16px !important;
  border: 2px solid rgba(159, 216, 244, 0.17) !important;
  background:
    linear-gradient(115deg, transparent, rgba(159,216,244,0.055), transparent),
    repeating-linear-gradient(135deg, rgba(159,216,244,0.052) 0 4px, transparent 4px 20px),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 38%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(2,8,16,0.22),
    inset 0 0 28px rgba(2,8,16,0.18) !important;
}

.dedicated-main .dedicated-service-panel-vertical::after {
  height: 84px !important;
  opacity: 0.30 !important;
  background:
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.15), rgba(244, 199, 98, 0.065), transparent) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover {
  border-color: rgba(190, 233, 251, 0.98) !important;
  box-shadow:
    12px 12px 0 rgba(2, 8, 16, 0.36),
    inset 0 0 0 1px rgba(255,255,255,0.035),
    0 0 42px rgba(121, 213, 223, 0.14) !important;
}

.dedicated-main .dedicated-service-panel-vertical .panel-accent-line {
  width: 124px !important;
  height: 3px !important;
  margin-top: 30px !important;
  background: linear-gradient(90deg, var(--cyan), rgba(244,199,98,0.6), transparent) !important;
  box-shadow:
    0 0 12px rgba(121, 213, 223, 0.16),
    0 0 20px rgba(244, 199, 98, 0.06) !important;
}

/* Small corner pixels, similar to mechanical UI panels, but subtle. */
.dedicated-main .dedicated-service-panel-bg::before,
.dedicated-main .dedicated-service-panel-bg::after {
  content: "" !important;
  position: absolute !important;
  width: 72px !important;
  height: 72px !important;
  z-index: 1 !important;
  opacity: 0.48 !important;
  pointer-events: none !important;
}

.dedicated-main .dedicated-service-panel-bg::before {
  left: 18px !important;
  top: 18px !important;
  border-left: 3px solid rgba(244,199,98,0.62) !important;
  border-top: 3px solid rgba(244,199,98,0.62) !important;
}

.dedicated-main .dedicated-service-panel-bg::after {
  right: 18px !important;
  bottom: 18px !important;
  border-right: 3px solid rgba(121,213,223,0.54) !important;
  border-bottom: 3px solid rgba(121,213,223,0.54) !important;
}

/* Slightly stronger text readability in the framed block. */
.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy p {
  color: rgba(195, 214, 229, 0.92) !important;
}

@media (max-width: 640px) {
  .dedicated-main .dedicated-hero .wp-services-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100%, 360px) !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  .dedicated-main .dedicated-hero .primary-action,
  .dedicated-main .dedicated-hero .secondary-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 16px 18px !important;
    font-size: 12px !important;
  }

  .dedicated-main .dedicated-hero .cta-btn {
    padding-right: 44px !important;
  }
}


/* ===== V64 — Dedicated canvas flow fix =====
   V63 accidentally matched the direct canvas child and changed #pipes-bg from fixed
   into relative, so the background canvas occupied a full viewport in the document
   flow and pushed the hero down. Keep the pipes fixed behind the page. */

.dedicated-main > canvas,
.dedicated-main > #pipes-bg,
.dedicated-main > .pipes-bg-canvas,
.dedicated-main #pipes-bg,
.dedicated-main .pipes-bg-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.95 !important;
  image-rendering: pixelated !important;
}

.dedicated-main > section {
  position: relative !important;
  z-index: 2 !important;
}

/* The dimming layer stays above pipes but below content. */
.dedicated-main::before {
  z-index: 1 !important;
}

/* Keep footer/content above background layers too. */
.dedicated-main .site-footer {
  position: relative !important;
  z-index: 2 !important;
}


/* ===== V65 — Dedicated Service Details polish, no hover grid ===== */

/* Stop the generic hover-card treatment from affecting this panel. */
.dedicated-main .dedicated-service-panel-vertical {
  transform: none !important;
  will-change: auto !important;
}

/* More compact, cleaner service-details block, closer to the White Label panel. */
.dedicated-main .dedicated-service-panel-vertical,
.dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
.dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  min-height: auto !important;
  padding: clamp(38px, 4.5vw, 64px) clamp(36px, 5vw, 78px) !important;
  border: 3px solid rgba(159, 216, 244, 0.9) !important;
  background:
    radial-gradient(720px circle at 18% 18%, rgba(121, 213, 223, 0.105), transparent 62%),
    radial-gradient(560px circle at 86% 78%, rgba(244, 199, 98, 0.045), transparent 68%),
    linear-gradient(180deg, rgba(34, 56, 82, 0.80), rgba(13, 28, 46, 0.95)) !important;
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.026),
    0 0 34px rgba(121, 213, 223, 0.08) !important;
}

/* Remove the diagonal/grid hover feeling inside the panel. */
.dedicated-main .dedicated-service-panel-vertical::before {
  inset: 14px !important;
  border: 2px solid rgba(159, 216, 244, 0.15) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), transparent 36%),
    radial-gradient(620px circle at 70% 46%, rgba(121, 213, 223, 0.052), transparent 70%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(2, 8, 16, 0.20),
    inset 0 0 28px rgba(2, 8, 16, 0.16) !important;
}

.dedicated-main .dedicated-service-panel-vertical::after {
  top: auto !important;
  bottom: 20% !important;
  left: -12% !important;
  right: -12% !important;
  height: 56px !important;
  opacity: 0.22 !important;
  background:
    linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.13), rgba(244, 199, 98, 0.055), transparent) !important;
  animation: dedicatedPanelScanV65 8.5s steps(12, end) infinite !important;
}

/* Replace heavy vertical strips with subtler panel light leaks. */
.dedicated-service-panel-bg span {
  width: 2px !important;
  background: linear-gradient(180deg, transparent, rgba(121, 213, 223, 0.13), transparent) !important;
  opacity: 0.24 !important;
}

.dedicated-service-panel-bg span:nth-child(1) { left: 34% !important; }
.dedicated-service-panel-bg span:nth-child(2) { left: 68% !important; opacity: 0.18 !important; }
.dedicated-service-panel-bg span:nth-child(3) { right: 12% !important; opacity: 0.14 !important; }

/* Better readable composition: title block no longer dominates the whole panel. */
.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro {
  max-width: 860px !important;
  margin: 0 0 clamp(26px, 3.2vw, 42px) !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro .eyebrow {
  margin-bottom: 18px !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro h2 {
  max-width: 820px !important;
  font-size: clamp(36px, 3.55vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

.dedicated-main .dedicated-service-panel-vertical .panel-accent-line {
  width: 118px !important;
  margin-top: 26px !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy {
  width: min(100%, 1080px) !important;
  max-width: 1080px !important;
  gap: 20px !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy p {
  color: rgba(195, 214, 229, 0.92) !important;
  font-size: clamp(15px, 1.02vw, 17px) !important;
  line-height: 1.7 !important;
}

/* Subtle corner UI, less loud than the previous version. */
.dedicated-main .dedicated-service-panel-bg::before,
.dedicated-main .dedicated-service-panel-bg::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  width: 54px !important;
  height: 54px !important;
  opacity: 0.38 !important;
  pointer-events: none !important;
}

.dedicated-main .dedicated-service-panel-bg::before {
  left: 18px !important;
  top: 18px !important;
  border-left: 3px solid rgba(244,199,98,0.50) !important;
  border-top: 3px solid rgba(244,199,98,0.50) !important;
}

.dedicated-main .dedicated-service-panel-bg::after {
  right: 18px !important;
  bottom: 18px !important;
  border-right: 3px solid rgba(121,213,223,0.44) !important;
  border-bottom: 3px solid rgba(121,213,223,0.44) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover {
  transform: none !important;
  border-color: rgba(188, 231, 250, 0.96) !important;
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 38px rgba(121, 213, 223, 0.12) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), transparent 36%),
    radial-gradient(620px circle at 70% 46%, rgba(121, 213, 223, 0.052), transparent 70%) !important;
}

@keyframes dedicatedPanelScanV65 {
  0%, 52% {
    transform: translateX(-18%) rotate(-0.5deg);
    opacity: 0.08;
  }
  66% {
    opacity: 0.28;
  }
  100% {
    transform: translateX(18%) rotate(-0.5deg);
    opacity: 0.08;
  }
}

@media (max-width: 980px) {
  .dedicated-main .dedicated-service-panel-vertical,
  .dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
  .dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
    padding: 34px 28px !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro {
    max-width: 760px !important;
  }
}

@media (max-width: 640px) {
  .dedicated-main .dedicated-service-panel-vertical,
  .dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
  .dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
    width: calc(100% - 28px) !important;
    padding: 28px 20px !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro h2 {
    font-size: clamp(32px, 10.5vw, 46px) !important;
  }
}


/* ===== V66 — Dedicated Service Details subtle hover dynamics =====
   Adds motion like other top panels, but without the hover grid / mouse tracking effect. */

.dedicated-main .dedicated-service-panel-vertical {
  transition:
    transform 220ms steps(5, end),
    border-color 220ms steps(5, end),
    box-shadow 220ms steps(5, end),
    background 220ms steps(5, end) !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro,
.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy,
.dedicated-main .dedicated-service-panel-vertical .panel-accent-line {
  transition:
    transform 220ms steps(5, end),
    opacity 220ms steps(5, end),
    filter 220ms steps(5, end) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover,
.dedicated-main .dedicated-service-panel-vertical:focus-within {
  transform: translateY(-5px) !important;
  border-color: rgba(244, 199, 98, 0.84) !important;
  background:
    radial-gradient(720px circle at 18% 18%, rgba(121, 213, 223, 0.13), transparent 62%),
    radial-gradient(560px circle at 86% 78%, rgba(244, 199, 98, 0.07), transparent 68%),
    linear-gradient(180deg, rgba(39, 63, 91, 0.84), rgba(13, 28, 46, 0.96)) !important;
  box-shadow:
    12px 12px 0 rgba(2, 8, 16, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 42px rgba(121, 213, 223, 0.14),
    0 0 22px rgba(244, 199, 98, 0.055) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover .dedicated-vertical-intro,
.dedicated-main .dedicated-service-panel-vertical:focus-within .dedicated-vertical-intro {
  transform: translateY(-2px) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover .dedicated-vertical-copy,
.dedicated-main .dedicated-service-panel-vertical:focus-within .dedicated-vertical-copy {
  transform: translateY(2px) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover .panel-accent-line,
.dedicated-main .dedicated-service-panel-vertical:focus-within .panel-accent-line {
  transform: scaleX(1.22) !important;
  transform-origin: left center !important;
  filter: drop-shadow(0 0 10px rgba(121, 213, 223, 0.22)) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover::after,
.dedicated-main .dedicated-service-panel-vertical:focus-within::after {
  opacity: 0.42 !important;
  animation-duration: 4.8s !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover .dedicated-service-panel-bg::before,
.dedicated-main .dedicated-service-panel-vertical:focus-within .dedicated-service-panel-bg::before {
  opacity: 0.62 !important;
  border-color: rgba(244, 199, 98, 0.72) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover .dedicated-service-panel-bg::after,
.dedicated-main .dedicated-service-panel-vertical:focus-within .dedicated-service-panel-bg::after {
  opacity: 0.56 !important;
  border-color: rgba(121, 213, 223, 0.66) !important;
}

/* Tiny pixel blink in corners on hover, similar in feeling to the button pips. */
.dedicated-main .dedicated-service-panel-vertical .dedicated-service-panel-bg span {
  transition: opacity 220ms steps(5, end), filter 220ms steps(5, end) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover .dedicated-service-panel-bg span,
.dedicated-main .dedicated-service-panel-vertical:focus-within .dedicated-service-panel-bg span {
  opacity: 0.34 !important;
  filter: blur(0.2px) drop-shadow(0 0 8px rgba(121, 213, 223, 0.16)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .dedicated-main .dedicated-service-panel-vertical,
  .dedicated-main .dedicated-service-panel-vertical * {
    transition: none !important;
    animation: none !important;
  }

  .dedicated-main .dedicated-service-panel-vertical:hover,
  .dedicated-main .dedicated-service-panel-vertical:focus-within {
    transform: none !important;
  }
}


/* ===== V67 — Smooth hover-out line inside Dedicated Service Details =====
   The jitter came from step-based transitions + changing the scan animation duration
   on hover. Keep the scan stable and make the accent line return smoothly. */

.dedicated-main .dedicated-service-panel-vertical .panel-accent-line {
  transform: scaleX(1) !important;
  transform-origin: left center !important;
  transition:
    transform 260ms ease,
    filter 260ms ease,
    opacity 260ms ease !important;
  will-change: transform, filter !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover .panel-accent-line,
.dedicated-main .dedicated-service-panel-vertical:focus-within .panel-accent-line {
  transform: scaleX(1.16) !important;
  filter: drop-shadow(0 0 10px rgba(121, 213, 223, 0.22)) !important;
}

/* Do not change animation speed on hover — it caused the inner scan stripe to jump when hover ended. */
.dedicated-main .dedicated-service-panel-vertical::after {
  animation-duration: 8.5s !important;
  transition: opacity 260ms ease !important;
  will-change: transform, opacity !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover::after,
.dedicated-main .dedicated-service-panel-vertical:focus-within::after {
  opacity: 0.36 !important;
  animation-duration: 8.5s !important;
}

/* Use smooth movement for the panel itself too, not steps, so hover-out feels cleaner. */
.dedicated-main .dedicated-service-panel-vertical {
  transition:
    transform 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    background 240ms ease !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro,
.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy {
  transition:
    transform 240ms ease,
    opacity 240ms ease,
    filter 240ms ease !important;
}

/* Smooth out the subtle vertical light strips as well. */
.dedicated-main .dedicated-service-panel-vertical .dedicated-service-panel-bg span {
  transition:
    opacity 260ms ease,
    filter 260ms ease !important;
}


/* ===== V68 — Dedicated Service Details wide-screen composition =====
   On wide monitors the vertical panel had a large empty right side.
   This keeps the same panel style, but lets the copy occupy the available width better. */

@media (min-width: 1180px) {
  .dedicated-main .dedicated-service-panel-vertical,
  .dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
  .dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
    display: grid !important;
    grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr) !important;
    column-gap: clamp(54px, 6vw, 110px) !important;
    row-gap: 0 !important;
    align-items: start !important;
    padding-left: clamp(46px, 5.4vw, 92px) !important;
    padding-right: clamp(46px, 5.4vw, 92px) !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro h2 {
    max-width: 620px !important;
    font-size: clamp(42px, 3.25vw, 58px) !important;
    line-height: 1.07 !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy {
    width: 100% !important;
    max-width: 880px !important;
    margin: 0 !important;
    padding-top: clamp(34px, 3.2vw, 56px) !important;
    gap: 20px !important;
    align-self: start !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy p {
    max-width: 100% !important;
  }
}

@media (min-width: 1560px) {
  .dedicated-main .dedicated-service-panel-vertical,
  .dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
  .dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
    grid-template-columns: minmax(420px, 0.78fr) minmax(0, 1.22fr) !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy {
    max-width: 980px !important;
  }
}

/* Tablet/mobile keeps the previous top-to-bottom centered layout. */
@media (max-width: 1179px) {
  .dedicated-main .dedicated-service-panel-vertical,
  .dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
  .dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
    display: block !important;
  }
}


/* ===== V69 — Dedicated Service Details rebuilt like White Label card =====
   Final override: no wide two-column experiment. Same clean composition as
   .white-service-details-card: one readable top-to-bottom block, compact and balanced. */

.dedicated-main .dedicated-service-panel-vertical,
.dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
.dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
  display: block !important;
  width: min(100% - 72px, 1460px) !important;
  max-width: 1460px !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: clamp(38px, 4.6vw, 64px) clamp(34px, 5vw, 78px) !important;
  border: 3px solid rgba(159, 216, 244, 0.86) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), transparent 18%),
    radial-gradient(620px circle at 18% 18%, rgba(121,213,223,0.10), transparent 62%),
    linear-gradient(180deg, rgba(37, 58, 86, 0.78), rgba(17, 31, 49, 0.96)) !important;
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 30px rgba(121, 213, 223, 0.08) !important;
  overflow: hidden !important;
  transform: none !important;
  text-align: left !important;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease !important;
}

/* Same inner scan/panel feel as White Label, but without the messy extra grid. */
.dedicated-main .dedicated-service-panel-vertical::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  z-index: 0 !important;
  border: 1px solid rgba(159,216,244,0.20) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), transparent 36%),
    radial-gradient(560px circle at 74% 48%, rgba(121,213,223,0.055), transparent 70%) !important;
  box-shadow: inset 0 0 0 2px rgba(2, 8, 16, 0.20) !important;
  pointer-events: none !important;
}

.dedicated-main .dedicated-service-panel-vertical::after {
  content: "" !important;
  position: absolute !important;
  left: -18% !important;
  right: -18% !important;
  top: auto !important;
  bottom: 22% !important;
  height: 56px !important;
  z-index: 0 !important;
  opacity: 0 !important;
  background:
    linear-gradient(90deg, transparent, rgba(121,213,223,0.18), rgba(244,199,98,0.07), transparent) !important;
  transform: translateX(-18%) rotate(-0.5deg) !important;
  animation: none !important;
  pointer-events: none !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover,
.dedicated-main .dedicated-service-panel-vertical:focus-within {
  transform: translateY(-4px) !important;
  border-color: rgba(244, 199, 98, 0.95) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 18%),
    radial-gradient(640px circle at 18% 18%, rgba(121,213,223,0.13), transparent 62%),
    linear-gradient(180deg, rgba(40, 64, 92, 0.84), rgba(17, 31, 49, 0.97)) !important;
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 34px rgba(121, 213, 223, 0.18) !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover::after,
.dedicated-main .dedicated-service-panel-vertical:focus-within::after {
  opacity: 1 !important;
  animation: dedicatedDetailsScanV69 1.05s steps(10, end) forwards !important;
}

/* Hide old vertical light strips/corner accents from previous attempts. */
.dedicated-main .dedicated-service-panel-bg span,
.dedicated-main .dedicated-service-panel-bg::before,
.dedicated-main .dedicated-service-panel-bg::after {
  display: none !important;
}

/* Content layout copied in spirit from White Label service details. */
.dedicated-main .dedicated-service-panel-vertical > .webdev-narrative-intro,
.dedicated-main .dedicated-service-panel-vertical > .webdev-narrative-copy {
  position: relative !important;
  z-index: 1 !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  text-align: left !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro .eyebrow {
  margin: 0 0 18px !important;
  color: var(--amber) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro h2 {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 0 26px !important;
  color: var(--ink) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(30px, 3.1vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
  text-align: left !important;
  text-wrap: balance !important;
}

.dedicated-main .dedicated-service-panel-vertical .panel-accent-line {
  display: block !important;
  width: 112px !important;
  height: 3px !important;
  margin: 0 0 0 !important;
  background: linear-gradient(90deg, var(--cyan), rgba(244,199,98,0.52), transparent) !important;
  box-shadow: 0 0 12px rgba(121, 213, 223, 0.12) !important;
  transform: none !important;
  transition: filter 220ms ease, width 220ms ease !important;
}

.dedicated-main .dedicated-service-panel-vertical:hover .panel-accent-line,
.dedicated-main .dedicated-service-panel-vertical:focus-within .panel-accent-line {
  width: 132px !important;
  filter: drop-shadow(0 0 10px rgba(121, 213, 223, 0.22)) !important;
  transform: none !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy {
  display: block !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 34px 0 0 !important;
  padding: 0 !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy p {
  max-width: 1120px !important;
  margin: 0 0 18px !important;
  color: var(--muted) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(15px, 1.08vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy p:last-child {
  margin-bottom: 0 !important;
}

@keyframes dedicatedDetailsScanV69 {
  0% {
    transform: translateX(-24%) rotate(-0.5deg);
    opacity: 0;
  }
  26% {
    opacity: 0.65;
  }
  100% {
    transform: translateX(24%) rotate(-0.5deg);
    opacity: 0;
  }
}

@media (max-width: 980px) {
  .dedicated-main .dedicated-service-panel-vertical,
  .dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
  .dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
    width: min(100% - 48px, 900px) !important;
    padding: 34px 28px !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro,
  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro .eyebrow,
  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro h2,
  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy p {
    text-align: center !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .panel-accent-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {
  .dedicated-main .dedicated-service-panel-vertical,
  .dedicated-main .webdev-clean-story-card.dedicated-service-panel-vertical,
  .dedicated-main .webdev-narrative-panel.dedicated-service-panel-vertical {
    width: calc(100% - 28px) !important;
    padding: 26px 20px !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-intro h2 {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 1.02 !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy {
    margin-top: 28px !important;
  }

  .dedicated-main .dedicated-service-panel-vertical .dedicated-vertical-copy p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
}


/* ===== V73 — White-label X-ray mascot switched to provided SVG sprites =====
   Uses employee_sprite_text_clean.svg + skeleton_webplumber.svg as assets.
   Dedicated Developers and the rest of the site are untouched from the v72/v69 base. */

.employee-svg-scan-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.employee-mascot-svg-stack {
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  width: min(76%, 310px) !important;
  aspect-ratio: 80 / 93 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  image-rendering: pixelated !important;
}

.employee-svg-mascot {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  transform: translateZ(0) !important;
  transition:
    opacity 180ms steps(4, end),
    filter 180ms steps(4, end),
    transform 180ms steps(4, end) !important;
}

.employee-svg-normal {
  opacity: 1 !important;
  filter:
    drop-shadow(8px 8px 0 rgba(2, 8, 16, 0.34))
    drop-shadow(0 0 12px rgba(121, 213, 223, 0.08)) !important;
}

.employee-svg-xray {
  opacity: 0 !important;
  filter:
    drop-shadow(8px 8px 0 rgba(2, 8, 16, 0.28))
    drop-shadow(0 0 18px rgba(116, 239, 255, 0.36)) !important;
}

.employee-svg-scan-card:hover .employee-svg-normal,
.employee-svg-scan-card:focus-within .employee-svg-normal,
.employee-svg-scan-card:focus .employee-svg-normal {
  opacity: 0.12 !important;
  transform: translateZ(0) scale(1.012) !important;
}

.employee-svg-scan-card:hover .employee-svg-xray,
.employee-svg-scan-card:focus-within .employee-svg-xray,
.employee-svg-scan-card:focus .employee-svg-xray {
  opacity: 1 !important;
  transform: translateZ(0) scale(1.012) !important;
}

.employee-svg-scan-card .scan-line {
  z-index: 4 !important;
}

.employee-svg-scan-card .scan-hint {
  z-index: 5 !important;
}

.employee-svg-scan-card .employee-stage-grid {
  z-index: 0 !important;
}

/* Hide any old CSS-drawn mascot pieces if cached markup/classes somehow remain. */
.employee-svg-scan-card .employee-figure,
.employee-svg-scan-card .employee-head,
.employee-svg-scan-card .employee-body,
.employee-svg-scan-card .arm,
.employee-svg-scan-card .leg,
.employee-svg-scan-card .forearm,
.employee-svg-scan-card .shin,
.employee-svg-scan-card .shoe {
  display: none !important;
}

@media (max-width: 700px) {
  .employee-mascot-svg-stack {
    width: min(78%, 250px) !important;
    top: 53% !important;
  }
}

@media (max-width: 420px) {
  .employee-mascot-svg-stack {
    width: min(84%, 230px) !important;
  }
}


/* ===== V74 — White-label X-ray SVG mascot polished ===== */
.employee-scan-card.employee-svg-scan-card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.employee-svg-scan-card::before {
  inset: 12px;
}

.employee-svg-scan-card .employee-stage-grid {
  opacity: 0.34;
}

.employee-svg-scan-card .scan-hint {
  z-index: 7;
  background: rgba(7, 15, 24, 0.82);
  box-shadow: 0 0 0 1px rgba(244,199,98,0.08), 0 0 14px rgba(244,199,98,0.08);
}

.employee-svg-scan-card .scan-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(200px circle at 50% 35%, rgba(96, 228, 255, 0.07), transparent 68%),
    radial-gradient(150px circle at 50% 66%, rgba(96, 228, 255, 0.05), transparent 72%);
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
}

.employee-mascot-svg-stack {
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  width: min(78%, 314px) !important;
  aspect-ratio: 80 / 93 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  isolation: isolate;
}

.employee-mascot-svg-stack .svg-glow-backdrop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  height: 82%;
  transform: translate(-50%, -48%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(90,232,255,0.12) 0, rgba(90,232,255,0.06) 42%, transparent 72%);
  opacity: 0.5;
  filter: blur(8px);
}

.employee-svg-mascot {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center center;
  transition:
    opacity 220ms ease,
    filter 220ms ease,
    transform 220ms ease !important;
}

.employee-svg-normal {
  opacity: 1 !important;
  filter:
    drop-shadow(8px 8px 0 rgba(2, 8, 16, 0.34))
    drop-shadow(0 0 10px rgba(121, 213, 223, 0.06));
}

.employee-svg-xray {
  opacity: 0 !important;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 3px rgba(160, 255, 255, 0.9))
    drop-shadow(0 0 8px rgba(100, 235, 255, 0.85))
    drop-shadow(0 0 16px rgba(73, 215, 255, 0.65))
    drop-shadow(8px 8px 0 rgba(2, 8, 16, 0.18));
}

.employee-svg-scan-card .scan-line {
  z-index: 6 !important;
}

.employee-svg-scan-card:hover .scan-line,
.employee-svg-scan-card:focus-within .scan-line,
.employee-svg-scan-card:focus .scan-line {
  opacity: 1;
  animation: xraySweepV45 1.1s ease-in-out infinite;
}

.employee-svg-scan-card:hover .svg-glow-backdrop,
.employee-svg-scan-card:focus-within .svg-glow-backdrop,
.employee-svg-scan-card:focus .svg-glow-backdrop {
  opacity: 1;
  filter: blur(10px);
}

.employee-svg-scan-card:hover .employee-svg-normal,
.employee-svg-scan-card:focus-within .employee-svg-normal,
.employee-svg-scan-card:focus .employee-svg-normal {
  opacity: 0.08 !important;
  filter:
    drop-shadow(8px 8px 0 rgba(2, 8, 16, 0.18))
    drop-shadow(0 0 12px rgba(96, 228, 255, 0.14));
}

.employee-svg-scan-card:hover .employee-svg-xray,
.employee-svg-scan-card:focus-within .employee-svg-xray,
.employee-svg-scan-card:focus .employee-svg-xray {
  opacity: 1 !important;
  transform: translateZ(0) scale(1.012) !important;
}

/* Hide legacy CSS mascot only inside the upgraded White Label scan card */
.employee-svg-scan-card .employee-figure,
.employee-svg-scan-card .employee-head,
.employee-svg-scan-card .employee-body,
.employee-svg-scan-card .arm,
.employee-svg-scan-card .leg,
.employee-svg-scan-card .forearm,
.employee-svg-scan-card .shin,
.employee-svg-scan-card .shoe,
.employee-svg-scan-card .chest-label,
.employee-svg-scan-card .skull-label {
  display: none !important;
}

@media (max-width: 700px) {
  .employee-mascot-svg-stack {
    width: min(80%, 252px) !important;
    top: 53% !important;
  }
}

@media (max-width: 420px) {
  .employee-mascot-svg-stack {
    width: min(84%, 228px) !important;
  }
}


/* V75: fully neon skeleton */
.employee-svg-xray {
  opacity: 0 !important;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 4px rgba(170,255,255,0.95))
    drop-shadow(0 0 10px rgba(110,245,255,0.98))
    drop-shadow(0 0 18px rgba(50,225,255,0.92))
    drop-shadow(0 0 30px rgba(10,150,255,0.82))
    drop-shadow(8px 8px 0 rgba(2, 8, 16, 0.12)) !important;
}

.employee-svg-scan-card:hover .employee-svg-xray,
.employee-svg-scan-card:focus-within .employee-svg-xray,
.employee-svg-scan-card:focus .employee-svg-xray {
  opacity: 1 !important;
  transform: translateZ(0) scale(1.016) !important;
}

.employee-svg-scan-card:hover .employee-svg-normal,
.employee-svg-scan-card:focus-within .employee-svg-normal,
.employee-svg-scan-card:focus .employee-svg-normal {
  opacity: 0.04 !important;
}






/* ===== V78 — Fixed embedded SVG X-ray skeleton asset =====
   The previous SVG referenced an external PNG from inside the SVG.
   Some browsers do not render nested external images when the SVG is itself used as an <img>.
   This version uses an embedded data image, so the skeleton reliably appears. */

.employee-svg-generated-xray {
  opacity: 0 !important;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 2px rgba(166, 248, 255, 0.24))
    drop-shadow(0 0 6px rgba(70, 220, 255, 0.18)) !important;
}

.employee-svg-scan-card:hover .employee-svg-generated-xray,
.employee-svg-scan-card:focus-within .employee-svg-generated-xray,
.employee-svg-scan-card:focus .employee-svg-generated-xray {
  opacity: 0.98 !important;
  transform: translateZ(0) scale(1.012) !important;
}

.employee-svg-scan-card:hover .employee-svg-normal,
.employee-svg-scan-card:focus-within .employee-svg-normal,
.employee-svg-scan-card:focus .employee-svg-normal {
  opacity: 0.07 !important;
}

.employee-mascot-svg-stack {
  width: min(82%, 336px) !important;
}

/* Make sure the x-ray sprite is not hidden behind legacy layers. */
.employee-svg-scan-card .employee-svg-xray {
  z-index: 3 !important;
}

.employee-svg-scan-card .employee-svg-normal {
  z-index: 2 !important;
}

.employee-svg-scan-card .scan-line {
  z-index: 6 !important;
}

.employee-svg-scan-card .scan-hint {
  z-index: 7 !important;
}


/* ===== V79 — Clean X-ray overlay (no heavy glow, transparent overlay feel) ===== */
.employee-mascot-svg-stack {
  width: min(78%, 314px) !important;
  top: 52% !important;
}

.employee-mascot-svg-stack .svg-glow-backdrop {
  opacity: 0 !important;
  filter: none !important;
}

.employee-svg-generated-xray,
.employee-svg-xray {
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  transform: translateZ(0) scale(1) !important;
}

.employee-svg-normal {
  opacity: 1 !important;
  filter: none !important;
}

.employee-svg-scan-card:hover .employee-svg-normal,
.employee-svg-scan-card:focus-within .employee-svg-normal,
.employee-svg-scan-card:focus .employee-svg-normal {
  opacity: 0.16 !important;
  filter: none !important;
}

.employee-svg-scan-card:hover .employee-svg-generated-xray,
.employee-svg-scan-card:focus-within .employee-svg-generated-xray,
.employee-svg-scan-card:focus .employee-svg-generated-xray,
.employee-svg-scan-card:hover .employee-svg-xray,
.employee-svg-scan-card:focus-within .employee-svg-xray,
.employee-svg-scan-card:focus .employee-svg-xray {
  opacity: 0.86 !important;
  filter: none !important;
  transform: translateZ(0) scale(1) !important;
}

/* Keep the scan line readable, but not overbearing. */
.employee-svg-scan-card .scan-line {
  opacity: 0 !important;
}
.employee-svg-scan-card:hover .scan-line,
.employee-svg-scan-card:focus-within .scan-line,
.employee-svg-scan-card:focus .scan-line {
  opacity: 0.72 !important;
}


/* ===== V80 — Dedicated Developers: Choose Your Crew configurator ===== */

.dedicated-crew-builder {
  position: relative;
}

.dedicated-crew-heading {
  position: relative;
  z-index: 1;
}

.dedicated-crew-grid {
  align-items: stretch;
}

.dedicated-crew-card,
.dedicated-expertise-grid .dedicated-crew-card {
  appearance: none;
  border-radius: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 260px;
  isolation: isolate;
  overflow: hidden;
}

.dedicated-crew-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, transparent, rgba(244, 199, 98, 0.08), rgba(121, 213, 223, 0.10), transparent);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.dedicated-crew-card:hover::after,
.dedicated-crew-card:focus-visible::after {
  opacity: 1;
  animation: dedicatedCrewScanV80 950ms steps(8, end) forwards;
}

.dedicated-crew-card > * {
  position: relative;
  z-index: 2;
}

.dedicated-crew-card h3 {
  transition: color 180ms ease, transform 180ms ease;
}

.dedicated-crew-card:hover h3,
.dedicated-crew-card:focus-visible h3 {
  color: var(--amber);
  transform: translateY(-2px);
}

.crew-selected-badge {
  position: absolute;
  top: 28px;
  right: 26px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 5px 8px;
  border: 1px solid rgba(244, 199, 98, 0.72);
  background: rgba(7, 16, 28, 0.74);
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.dedicated-crew-card.is-selected,
.dedicated-crew-card[aria-pressed="true"] {
  border-color: rgba(244, 199, 98, 0.96) !important;
  background:
    radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(244,199,98,0.11), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,0.07), transparent 18%),
    linear-gradient(180deg, rgba(44, 65, 88, 0.92), rgba(18, 31, 49, 0.98)) !important;
  box-shadow:
    var(--shadow),
    0 0 22px rgba(244, 199, 98, 0.10),
    inset 0 0 0 1px rgba(244, 199, 98, 0.12) !important;
}

.dedicated-crew-card.is-selected .crew-selected-badge,
.dedicated-crew-card[aria-pressed="true"] .crew-selected-badge {
  opacity: 1;
  transform: translateY(0);
}

.dedicated-crew-card.is-selected .dedicated-card-num,
.dedicated-crew-card[aria-pressed="true"] .dedicated-card-num {
  color: var(--amber);
}

.crew-best {
  display: block;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(121, 213, 223, 0.28);
  background: rgba(5, 14, 24, 0.42);
  color: rgba(205, 225, 238, 0.96);
  font-family: "Space Mono", monospace;
  font-size: clamp(12px, 0.82vw, 14px);
  line-height: 1.48;
  opacity: 0;
  transform: translateY(10px);
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    max-height 260ms ease,
    margin-top 220ms ease,
    border-color 220ms ease;
}

.crew-best strong {
  color: var(--cyan);
  font-weight: 800;
}

.dedicated-crew-card:hover .crew-best,
.dedicated-crew-card:focus-visible .crew-best,
.dedicated-crew-card.is-selected .crew-best,
.dedicated-crew-card[aria-pressed="true"] .crew-best {
  opacity: 1;
  transform: translateY(0);
  max-height: 130px;
  border-color: rgba(121, 213, 223, 0.44);
}

.dedicated-crew-console {
  position: relative;
  width: min(100%, 1480px);
  max-width: 1480px;
  margin: clamp(22px, 3vw, 34px) auto 0;
  padding: clamp(22px, 2.5vw, 34px);
  border: 3px solid rgba(159, 216, 244, 0.84);
  background:
    radial-gradient(520px circle at 18% 18%, rgba(121, 213, 223, 0.10), transparent 62%),
    radial-gradient(520px circle at 82% 72%, rgba(244, 199, 98, 0.06), transparent 64%),
    linear-gradient(180deg, rgba(35, 57, 82, 0.82), rgba(13, 28, 46, 0.96));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dedicated-crew-console::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 0;
  border: 1px solid rgba(159, 216, 244, 0.18);
  pointer-events: none;
}

.dedicated-crew-console::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 0;
  height: 72px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.10), rgba(244,199,98,0.055), transparent);
  opacity: 0.58;
  transform: translateX(-18%);
  animation: dedicatedCrewConsoleSweepV80 7s steps(12, end) infinite;
  pointer-events: none;
}

.dedicated-crew-console > * {
  position: relative;
  z-index: 1;
}

.crew-console-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.crew-console-top .eyebrow {
  margin: 0 0 10px;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.crew-console-top h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.crew-clear-btn {
  min-height: 38px;
  padding: 9px 13px;
  border: 2px solid rgba(159, 216, 244, 0.66);
  background: rgba(5, 14, 24, 0.52);
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(2, 8, 16, 0.30);
}

.crew-clear-btn:hover,
.crew-clear-btn:focus-visible {
  border-color: rgba(244, 199, 98, 0.88);
  color: var(--amber);
}

.crew-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
}

.crew-chip,
.crew-empty-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(121, 213, 223, 0.42);
  background: rgba(6, 17, 30, 0.58);
  color: rgba(215, 232, 242, 0.94);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

.crew-chip::before {
  content: "+";
  margin-right: 8px;
  color: var(--amber);
}

.crew-empty-chip {
  opacity: 0.72;
}

.crew-suggestion {
  max-width: 980px;
  margin: 18px 0 0;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.66;
}

.crew-console-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.crew-console-note {
  max-width: 560px;
  color: rgba(173, 194, 209, 0.84);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}

.crew-contact-link {
  min-width: 220px;
}

@keyframes dedicatedCrewScanV80 {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  18% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes dedicatedCrewConsoleSweepV80 {
  0%, 48% {
    transform: translateX(-22%);
    opacity: 0.18;
  }
  64% {
    opacity: 0.55;
  }
  100% {
    transform: translateX(22%);
    opacity: 0.18;
  }
}

@media (max-width: 980px) {
  .crew-console-top {
    flex-direction: column;
  }

  .crew-clear-btn {
    align-self: flex-start;
  }

  .crew-console-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .crew-contact-link {
    width: min(100%, 360px);
  }
}

@media (max-width: 640px) {
  .dedicated-crew-card,
  .dedicated-expertise-grid .dedicated-crew-card {
    min-height: 230px;
  }

  .crew-selected-badge {
    top: 22px;
    right: 20px;
  }

  .dedicated-crew-console {
    padding: 24px 18px;
  }

  .crew-contact-link {
    width: 100%;
  }
}


/* ===== V84 — Full crew selected state ===== */
.dedicated-crew-console.is-full-crew {
  border-color: rgba(244, 199, 98, 0.96);
  box-shadow:
    var(--shadow),
    0 0 28px rgba(244, 199, 98, 0.12),
    inset 0 0 0 1px rgba(244, 199, 98, 0.12);
}

.dedicated-crew-console.is-full-crew .crew-suggestion {
  color: rgba(255, 226, 152, 0.96);
}

.dedicated-crew-console.is-full-crew .crew-console-top h3 {
  color: var(--amber);
}


/* ===== V85 — Case Studies + standardized case pages ===== */
.case-studies-main,
.case-detail-main {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px circle at 70% 8%, rgba(95, 66, 120, 0.18), transparent 58%),
    radial-gradient(760px circle at 12% 36%, rgba(121, 213, 223, 0.08), transparent 62%);
}

.case-studies-main > section,
.case-detail-main > section {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1760px);
  margin: 0 auto;
}

.case-hero,
.case-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.46fr);
  gap: clamp(34px, 5vw, 88px);
  align-items: center;
  min-height: min(82vh, 880px);
  padding: clamp(104px, 9vw, 150px) 0 clamp(70px, 7vw, 116px);
}

.case-detail-hero {
  display: block;
  max-width: 1320px;
  text-align: left;
}

.case-hero h1,
.case-detail-hero h1 {
  max-width: 13ch;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(50px, 7vw, 106px);
  line-height: 0.98;
  letter-spacing: -0.07em;
  text-transform: none;
}

.case-detail-hero h1 {
  max-width: 15ch;
}

.case-hero-lead,
.case-detail-lead {
  max-width: 940px;
  margin-top: 24px;
  color: var(--soft);
  font-size: clamp(18px, 1.35vw, 23px);
  line-height: 1.58;
}

.case-hero-terminal {
  position: relative;
  min-height: 330px;
  padding: clamp(26px, 3vw, 42px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(37, 58, 86, 0.74), rgba(17, 31, 49, 0.94)),
    rgba(11, 24, 39, 0.78);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.case-hero-terminal::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(159, 216, 244, 0.2);
}

.case-hero-terminal::after {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: 44%;
  height: 80px;
  background: linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.13), rgba(244, 199, 98, 0.055), transparent);
  transform: translateX(-12%);
  animation: caseTerminalSweep 6s steps(12, end) infinite;
}

.case-terminal-label,
.case-terminal-lines,
.case-terminal-meter {
  position: relative;
  z-index: 1;
}

.case-terminal-label {
  display: inline-flex;
  padding: 8px 10px;
  border: 2px solid rgba(244, 199, 98, 0.82);
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.case-terminal-lines {
  display: grid;
  gap: 14px;
  margin-top: 42px;
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: 14px;
  line-height: 1.5;
}

.case-terminal-lines span {
  padding: 12px;
  border: 2px solid rgba(159, 216, 244, 0.24);
  background: rgba(5, 14, 24, 0.32);
}

.case-terminal-meter {
  height: 10px;
  margin-top: 28px;
  border: 3px solid rgba(2, 8, 16, 0.6);
  background: rgba(5, 13, 22, 0.78);
  overflow: hidden;
}
.case-terminal-meter span {
  display: block;
  width: 68%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--amber), transparent);
  animation: caseMeter 2.8s steps(9, end) infinite;
}

.case-library,
.case-system-note,
.case-detail-layout {
  padding: clamp(54px, 6vw, 92px) 0;
}

.case-library-heading {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.case-library-heading::after { margin-left: auto; margin-right: auto; }

.case-filter-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 32px auto 38px;
}

.case-filter {
  min-height: 44px;
  padding: 10px 15px;
  border: 2px solid rgba(159, 216, 244, 0.72);
  background: rgba(8, 18, 31, 0.68);
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(2, 8, 16, 0.32);
  transition: transform 160ms steps(4,end), border-color 160ms ease, color 160ms ease;
}
.case-filter:hover,
.case-filter:focus-visible,
.case-filter.is-active {
  color: var(--amber);
  border-color: rgba(244, 199, 98, 0.95);
  transform: translateY(-2px);
}

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

.case-card {
  position: relative;
  min-height: 360px;
  padding: clamp(24px, 2.4vw, 34px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(30,49,73,.82), rgba(17,31,49,.94)),
    rgba(22,36,55,.88);
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
  transition: opacity 220ms ease, transform 220ms steps(5,end), border-color 180ms ease;
}
.case-card::before {
  content:"";
  position:absolute;
  left:-48%; right:-48%; bottom:-44%;
  height:72%;
  z-index:-1;
  background: radial-gradient(closest-side,rgba(121,213,223,.16),transparent 70%), linear-gradient(90deg,transparent,rgba(121,213,223,.12),transparent);
  animation: waterSweep 7s ease-in-out infinite;
}
.case-card:nth-child(2n)::before{animation-delay:-1.3s}.case-card:nth-child(3n)::before{animation-delay:-2.2s}
.case-card::after {
  content:"";
  position:absolute;
  left:26px; right:26px; bottom:24px;
  height:3px;
  background:linear-gradient(90deg,rgba(121,213,223,.95),rgba(244,199,98,.95),transparent 70%);
  transform:scaleX(.18);
  transform-origin:left center;
  opacity:.65;
  transition:transform .18s steps(6,end), opacity .16s ease;
}
.case-card:hover,
.case-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(244,199,98,.92);
}
.case-card:hover::after,
.case-card:focus-within::after { transform: scaleX(1); opacity: 1; }
.case-card.is-hidden { display: none; }

.case-card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:30px;
}
.case-number,
.case-platform {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border:2px solid rgba(244,199,98,.78);
  color:var(--amber);
  font-family:"Space Mono", monospace;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  line-height:1;
}
.case-platform { border-color: rgba(159,216,244,.5); color: var(--cyan); }
.case-card h3 {
  margin:0 0 14px;
  color:var(--ink);
  font-family:"Space Mono", monospace;
  font-size:clamp(22px,1.7vw,31px);
  line-height:1.12;
}
.case-card p {
  color:var(--muted);
  line-height:1.58;
  font-size:15px;
}
.case-tag-row,
.case-sidebar-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.case-tag-row span,
.case-sidebar-tags span {
  padding:7px 9px;
  border:1px solid rgba(159,216,244,.34);
  background:rgba(5,14,24,.4);
  color:rgba(215,232,242,.92);
  font-family:"Space Mono", monospace;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.case-card-link {
  position:absolute;
  left:clamp(24px,2.4vw,34px);
  bottom:42px;
  color:var(--amber);
  font-family:"Space Mono", monospace;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  text-decoration:none;
}
.case-card-link::after { content:" →"; }

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 420ms ease, transform 420ms steps(8,end);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.case-system-card,
.case-detail-sidebar,
.case-detail-block {
  position:relative;
  border:3px solid rgba(159,216,244,.86);
  background:linear-gradient(180deg,rgba(30,49,73,.78),rgba(17,31,49,.94));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.case-system-card { padding: clamp(30px,4vw,56px); }
.case-system-card h2,
.case-detail-sidebar h2,
.case-detail-block h2 {
  color:var(--ink);
  font-family:"Space Mono", monospace;
  line-height:1.12;
}
.case-system-card p,
.case-detail-sidebar p,
.case-detail-block p {
  color:var(--muted);
  line-height:1.68;
}
.case-system-card code {
  color: var(--amber);
  font-family:"Space Mono", monospace;
}

.case-back-link {
  display:inline-flex;
  margin-bottom:22px;
  color:var(--cyan);
  font-family:"Space Mono", monospace;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  text-decoration:none;
}
.case-back-link:hover { color: var(--amber); }
.case-meta-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:1180px;
  margin-top:32px;
}
.case-meta-grid div {
  padding:18px;
  border:2px solid rgba(159,216,244,.42);
  background:rgba(5,14,24,.36);
}
.case-meta-grid span {
  display:block;
  margin-bottom:8px;
  color:var(--amber);
  font-family:"Space Mono", monospace;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.case-meta-grid strong {
  color:var(--ink);
  font-family:"Space Mono", monospace;
  font-size:15px;
}
.case-detail-tags { margin-top:24px; }
.case-detail-layout {
  display:grid;
  grid-template-columns:minmax(260px,.32fr) minmax(0,1fr);
  gap:clamp(22px,4vw,54px);
  align-items:start;
}
.case-detail-sidebar {
  position:sticky;
  top:96px;
  padding:clamp(24px,2.8vw,38px);
}
.case-detail-content {
  display:grid;
  gap:18px;
}
.case-detail-block {
  padding:clamp(26px,3vw,44px);
}
.case-detail-step {
  display:inline-flex;
  padding:8px 10px;
  border:2px solid rgba(244,199,98,.78);
  color:var(--amber);
  font-family:"Space Mono", monospace;
  font-size:12px;
  font-weight:800;
}

@keyframes caseTerminalSweep { 0%,100%{transform:translateX(-14%);opacity:.38} 50%{transform:translateX(14%);opacity:.72} }
@keyframes caseMeter { 0%,100%{width:48%} 50%{width:88%} }

@media (max-width: 1180px) {
  .case-hero { grid-template-columns:1fr; }
  .case-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .case-detail-layout { grid-template-columns:1fr; }
  .case-detail-sidebar { position:relative; top:auto; }
}
@media (max-width: 820px) {
  .case-studies-main > section,
  .case-detail-main > section { width:min(100% - 28px,1760px); }
  .case-hero,.case-detail-hero { min-height:auto; padding-top:96px; }
  .case-grid,.case-meta-grid { grid-template-columns:1fr; }
  .case-card { min-height:330px; }
}


/* ===== V86 — Case Studies cleanup and standardization ===== */
.case-studies-main {
  background:
    radial-gradient(860px circle at 50% 8%, rgba(84, 52, 116, 0.11), transparent 60%),
    radial-gradient(760px circle at 12% 36%, rgba(121, 213, 223, 0.075), transparent 62%),
    radial-gradient(620px circle at 86% 72%, rgba(244, 199, 98, 0.045), transparent 64%);
}

.case-studies-main .pipes-bg-canvas {
  opacity: 0.86;
}

.case-hero {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: min(76vh, 780px);
  padding: clamp(112px, 10vw, 160px) 0 clamp(64px, 7vw, 106px);
}

.case-hero-copy {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.case-hero h1 {
  max-width: 12.5ch;
  margin: 0 auto;
  font-size: clamp(54px, 6.4vw, 102px);
  line-height: 0.98;
  letter-spacing: -0.07em;
}

.case-hero-lead {
  max-width: 920px;
  margin: clamp(20px, 2vw, 28px) auto 0;
  color: var(--soft);
  font-size: clamp(17px, 1.22vw, 22px);
  line-height: 1.58;
}

.case-hero .wp-services-actions {
  justify-content: center;
  margin-top: clamp(28px, 3vw, 42px);
}

.case-hero-terminal {
  display: none !important;
}

.case-library {
  padding-top: clamp(46px, 5vw, 78px);
}

.case-library-heading {
  width: min(100%, 1120px);
  max-width: 1120px;
}

.case-library-heading h2 {
  max-width: 15ch;
  margin-left: auto;
  margin-right: auto;
  font-family: "Space Mono", monospace;
  font-size: clamp(42px, 5vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.06em;
  text-transform: none;
}

.case-library-heading p:not(.eyebrow) {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  color: var(--soft);
  font-size: clamp(16px, 1.16vw, 20px);
  line-height: 1.62;
}

.case-grid-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  border: 3px solid rgba(159, 216, 244, 0.72);
  background: rgba(8, 18, 31, 0.72);
  color: var(--muted);
  font-family: "Space Mono", monospace;
  text-align: center;
}

.case-card-top {
  justify-content: flex-start;
  margin-bottom: 26px;
}

.case-number {
  display: none !important;
}

.case-card {
  min-height: 350px;
}

.case-card-link {
  bottom: 34px;
}

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

@media (max-width: 820px) {
  .case-hero {
    padding-top: 104px;
    padding-bottom: 58px;
  }

  .case-hero h1 {
    font-size: clamp(44px, 13vw, 68px);
    max-width: 11.5ch;
  }

  .case-hero-lead {
    font-size: 16px;
  }

  .case-library-heading h2 {
    font-size: clamp(36px, 11vw, 56px);
  }

  .case-filter-panel {
    justify-content: flex-start;
  }

  .case-filter {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  .case-studies-main > section {
    width: min(100% - 24px, 1760px);
  }

  .case-hero .wp-services-actions {
    align-items: stretch;
  }

  .case-hero .cta-btn {
    width: 100%;
    justify-content: center;
  }

  .case-card {
    min-height: 360px;
  }
}


/* ===== V88 — Case Studies polish and standardization ===== */

.case-studies-main {
  background:
    radial-gradient(920px circle at 50% 10%, rgba(56, 91, 124, 0.15), transparent 62%),
    radial-gradient(740px circle at 13% 34%, rgba(121, 213, 223, 0.075), transparent 64%),
    radial-gradient(660px circle at 84% 74%, rgba(244, 199, 98, 0.04), transparent 66%);
}

.case-studies-main .pipes-bg-canvas {
  opacity: 0.78;
}

.case-studies-main .eyebrow {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.035em;
  color: var(--amber);
}

.case-hero {
  min-height: min(78vh, 820px);
  padding: clamp(116px, 10vw, 166px) 0 clamp(70px, 7vw, 112px);
}

.case-hero-copy {
  width: min(100%, 1160px);
}

.case-hero h1 {
  max-width: 12ch;
  margin: 0 auto;
  color: var(--ink);
  font-family: "Jersey 15", "Space Mono", monospace !important;
  font-size: clamp(86px, 9.6vw, 148px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-shadow: 5px 5px 0 rgba(2, 8, 16, 0.42);
  text-wrap: balance;
}

.case-hero-lead {
  max-width: 1060px;
  margin-top: clamp(28px, 2.8vw, 42px);
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: clamp(17px, 1.28vw, 22px);
  line-height: 1.62;
  text-wrap: balance;
}

.case-hero .wp-services-actions {
  justify-content: center;
  gap: 14px;
}

.case-hero .cta-btn {
  min-width: 220px;
  min-height: 58px;
  padding: 16px 52px 16px 24px;
  font-size: 13px;
}

.case-library {
  padding-top: clamp(48px, 5.5vw, 86px);
}

.case-library-heading h2 {
  max-width: 14ch;
  color: var(--ink);
  font-family: "Jersey 15", "Space Mono", monospace !important;
  font-size: clamp(74px, 7.8vw, 116px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-shadow: 4px 4px 0 rgba(2, 8, 16, 0.38);
}

.case-library-heading p:not(.eyebrow) {
  max-width: 980px;
  font-family: "Space Mono", monospace;
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.66;
}

.case-filter-panel {
  gap: 12px;
  margin-top: clamp(28px, 3vw, 42px);
  margin-bottom: clamp(30px, 3.2vw, 48px);
}

.case-filter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 48px;
  padding: 12px 17px;
  border: 3px solid rgba(159, 216, 244, 0.76);
  background:
    linear-gradient(180deg, rgba(28, 45, 67, 0.82), rgba(12, 27, 45, 0.94));
  box-shadow: var(--shadow);
}

.case-filter::before {
  content: "";
  position: absolute;
  inset: 5px auto 5px 5px;
  z-index: -1;
  width: 0;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.14), rgba(244, 199, 98, 0.16));
  transition: width 220ms steps(5, end);
}

.case-filter:hover::before,
.case-filter:focus-visible::before,
.case-filter.is-active::before {
  width: calc(100% - 10px);
}

.case-filter.is-active {
  background:
    linear-gradient(180deg, rgba(35, 58, 84, 0.92), rgba(13, 31, 50, 0.98));
}

.case-grid {
  align-items: stretch;
  gap: clamp(16px, 1.55vw, 24px);
}

.case-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: clamp(24px, 2.2vw, 32px);
  border-color: rgba(159, 216, 244, 0.82);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045), transparent 20%),
    linear-gradient(180deg, rgba(33, 53, 78, 0.84), rgba(14, 29, 47, 0.96));
}

.case-card::before {
  z-index: 0;
  opacity: 0.72;
}

.case-card > * {
  position: relative;
  z-index: 1;
}

.case-card-top {
  margin-bottom: 24px;
}

.case-card-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 7px 10px;
  border: 1px solid rgba(159,216,244,.32);
  color: rgba(173, 194, 209, 0.82);
  background: rgba(5,14,24,.28);
  font-family: "Space Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}

.case-card-body {
  flex: 1 1 auto;
}

.case-card h3 {
  margin-bottom: 16px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(23px, 1.55vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.case-card p {
  max-width: 62ch;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: 14px;
  line-height: 1.62;
}

.case-card-bottom {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}

.case-tag-row {
  margin-top: 0;
}

.case-tag-row span {
  background: rgba(5, 14, 24, 0.44);
  color: rgba(215, 232, 242, 0.9);
}

.case-card-link {
  position: relative;
  left: auto;
  bottom: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 40px;
  padding: 10px 13px;
  border: 2px solid rgba(244, 199, 98, 0.66);
  background: rgba(5, 14, 24, 0.38);
  color: var(--amber);
  box-shadow: 4px 4px 0 rgba(2, 8, 16, 0.26);
  transition: transform 160ms steps(4, end), border-color 160ms ease, background 160ms ease;
}

.case-card-link:hover,
.case-card-link:focus-visible {
  transform: translate(1px, 1px);
  border-color: rgba(244, 199, 98, 0.96);
  background: rgba(244, 199, 98, 0.08);
}

.case-card-link::after {
  content: " →";
  margin-left: 3px;
}

.case-card.is-hidden {
  display: none !important;
}

.case-card.is-filtering-out {
  opacity: 0 !important;
  transform: translateY(18px) scale(0.985) !important;
  pointer-events: none;
}

.case-card.is-filtering-in {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
}

.case-card.reveal-on-scroll,
.case-card {
  transition:
    opacity 320ms ease,
    transform 360ms cubic-bezier(.2,.8,.2,1),
    border-color 180ms ease,
    background 180ms ease;
}

.case-grid.has-no-results::after {
  content: "No case studies for this filter yet.";
  grid-column: 1 / -1;
  padding: 28px;
  border: 3px solid rgba(159, 216, 244, 0.72);
  background: rgba(8, 18, 31, 0.72);
  color: var(--muted);
  font-family: "Space Mono", monospace;
  text-align: center;
}

/* Case Studies bottom CTA: match the compact CTA standard used on other pages. */
.compact-page-cta-cases {
  padding-bottom: clamp(74px, 7vw, 116px);
}

.compact-page-cta-cases .compact-page-cta-card {
  border-color: rgba(159, 216, 244, 0.88);
}

@media (max-width: 1180px) {
  .case-hero h1 {
    font-size: clamp(76px, 12vw, 122px);
  }

  .case-library-heading h2 {
    font-size: clamp(64px, 9vw, 96px);
  }
}

@media (max-width: 820px) {
  .case-hero {
    padding-top: 104px;
    padding-bottom: 62px;
  }

  .case-hero h1 {
    max-width: 10.5ch;
    font-size: clamp(58px, 18vw, 86px);
    line-height: 0.88;
  }

  .case-hero-lead {
    font-size: 15px;
    line-height: 1.62;
  }

  .case-hero .wp-services-actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 360px);
    margin-left: auto;
    margin-right: auto;
  }

  .case-hero .cta-btn {
    width: 100%;
  }

  .case-library-heading h2 {
    max-width: 11ch;
    font-size: clamp(52px, 16vw, 76px);
  }

  .case-filter-panel {
    justify-content: stretch;
  }

  .case-filter {
    flex: 1 1 calc(50% - 8px);
  }

  .case-card {
    min-height: 340px;
  }
}

@media (max-width: 520px) {
  .case-filter {
    flex-basis: 100%;
  }

  .case-card h3 {
    font-size: 24px;
  }

  .case-card-link {
    width: 100%;
  }
}


/* ===== V89 — Case Studies clean section + stable filters ===== */
.case-hero .case-browse-link {
  min-width: 220px;
  min-height: 58px;
  padding: 16px 24px;
  font-size: 13px;
}

.case-hero .case-browse-link::before,
.case-hero .case-browse-link::after {
  content: none !important;
  display: none !important;
}

.case-hero .case-browse-link:hover,
.case-hero .case-browse-link:focus-visible {
  transform: translate(1px, 1px);
  color: var(--amber);
}

.case-library {
  padding-top: clamp(54px, 6vw, 92px);
}

.case-library .section-heading,
.case-library-heading {
  text-align: left;
}

.case-library .section-heading::after,
.case-library-heading::after {
  margin-left: 0;
  margin-right: 0;
}

.case-library-console {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(380px, 0.62fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
  width: min(100%, 1480px);
  margin: 0 auto clamp(30px, 4vw, 56px);
  padding: clamp(28px, 4vw, 58px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(620px circle at 14% 16%, rgba(121, 213, 223, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(33, 53, 78, 0.78), rgba(13, 28, 46, 0.96));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.case-library-console::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(159, 216, 244, 0.16);
  pointer-events: none;
}

.case-library-console::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 0;
  height: 78px;
  background: linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.11), rgba(244, 199, 98, 0.055), transparent);
  opacity: 0.55;
  animation: caseConsoleSweepV89 8s steps(12, end) infinite;
  pointer-events: none;
}

.case-library-console > * {
  position: relative;
  z-index: 1;
}

.case-library-copy h2,
.case-library-heading h2 {
  max-width: 16ch;
  margin: 0;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(34px, 3.7vw, 62px) !important;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-shadow: 3px 3px 0 rgba(2, 8, 16, 0.34);
}

.case-library-copy p:not(.eyebrow),
.case-library-heading p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 18px;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.66;
  text-align: left;
}

.case-filter-terminal {
  border: 2px solid rgba(159, 216, 244, 0.42);
  background: rgba(5, 14, 24, 0.40);
  box-shadow: inset 0 0 0 1px rgba(159, 216, 244, 0.08);
  padding: clamp(18px, 2vw, 24px);
}

.case-filter-terminal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.case-filter-terminal-top small {
  color: rgba(173, 194, 209, 0.74);
  font-size: 10px;
  font-weight: 800;
}

.case-filter-panel {
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
}

.case-grid {
  transition: opacity 160ms ease, transform 160ms ease;
}

.case-grid.is-case-switching {
  opacity: 0.18;
  transform: translateY(6px);
  pointer-events: none;
}

.case-card {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

.case-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.case-card:hover,
.case-card:focus-within {
  transform: translateY(-5px) !important;
}

.case-card:not(.is-visible):hover,
.case-card:not(.is-visible):focus-within {
  transform: translateY(24px) !important;
}

.case-card.is-hidden,
.case-card.is-filtering-out,
.case-card.is-filtering-in {
  display: none !important;
}

.case-card::after {
  bottom: 22px;
}

.case-card h3 {
  letter-spacing: -0.045em;
}

@keyframes caseConsoleSweepV89 {
  0%, 52% { transform: translateX(-18%); opacity: 0.26; }
  66% { opacity: 0.55; }
  100% { transform: translateX(18%); opacity: 0.26; }
}

@media (max-width: 980px) {
  .case-library-console {
    grid-template-columns: 1fr;
  }

  .case-filter-terminal {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .case-library-console {
    width: min(100%, calc(100vw - 28px));
    padding: 24px 18px;
  }

  .case-library-copy h2,
  .case-library-heading h2 {
    font-size: clamp(30px, 10vw, 44px) !important;
    letter-spacing: -0.045em;
  }

  .case-filter-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .case-filter {
    width: 100%;
  }
}


/* ===== V97 — Case cards: no Project Snapshot reveal ===== */

.case-card::after,
.case-card:hover::after,
.case-card:focus-within::after {
  display: none !important;
  content: none !important;
}

.case-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  overflow: hidden;
  transition:
    opacity 260ms ease,
    transform 220ms steps(5, end),
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease !important;
}

.case-card:hover,
.case-card:focus-within {
  transform: translateY(-5px) !important;
  border-color: rgba(244, 199, 98, 0.96) !important;
  background:
    radial-gradient(360px circle at 22% 0%, rgba(244, 199, 98, 0.075), transparent 64%),
    linear-gradient(135deg, rgba(255,255,255,0.055), transparent 20%),
    linear-gradient(180deg, rgba(35, 57, 82, 0.90), rgba(14, 29, 47, 0.98)) !important;
  box-shadow:
    var(--shadow),
    0 0 24px rgba(244, 199, 98, 0.10),
    inset 0 0 0 1px rgba(244, 199, 98, 0.08) !important;
}

.case-card-status {
  display: none !important;
}

.case-card:hover .case-platform,
.case-card:focus-within .case-platform {
  color: var(--amber) !important;
  border-color: rgba(244, 199, 98, 0.76) !important;
}

.case-card-body,
.case-card-bottom,
.case-tag-row,
.case-card-link {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  max-height: none !important;
}

.case-card-link:hover,
.case-card-link:focus-visible {
  transform: translate(1px, 1px) !important;
}


/* ===== V98 — Case Studies filter label cleanup ===== */
.case-filter-terminal-top {
  justify-content: flex-start !important;
}

.case-filter-terminal-top small {
  display: none !important;
}

.case-filter-terminal-top span {
  color: var(--amber) !important;
}


/* ===== V101 — Mobile/tablet case list load more ===== */
.case-load-more-wrap {
  display: none;
  justify-content: center;
  margin-top: clamp(22px, 4vw, 34px);
}

.case-load-more-wrap:not([hidden]) {
  display: flex;
}

.case-load-more-btn {
  min-width: 220px;
  min-height: 52px;
  padding: 14px 22px;
  border: 3px solid rgba(159, 216, 244, 0.82);
  background: rgba(8, 18, 31, 0.72);
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 160ms steps(4, end), border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.case-load-more-btn:hover,
.case-load-more-btn:focus-visible {
  transform: translateY(-2px);
  color: var(--amber);
  border-color: rgba(244, 199, 98, 0.96);
  background: rgba(244, 199, 98, 0.06);
}

@media (min-width: 1025px) {
  .case-load-more-wrap:not([hidden]) {
    display: none;
  }
}

@media (max-width: 640px) {
  .case-load-more-btn {
    width: min(100%, 340px);
  }
}


/* ===== V102 — Case load more on desktop + cleaner card text ===== */

/* Show the load-more button on desktop too when JS says there are more cases. */
@media (min-width: 1025px) {
  .case-load-more-wrap:not([hidden]) {
    display: flex !important;
  }
}

.case-load-more-btn .btn-label {
  display: inline-block;
}

/* Make case titles sit better in 3-column desktop cards without changing the card concept. */
.case-card h3 {
  max-width: 14.5ch !important;
  font-size: clamp(24px, 1.75vw, 32px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  overflow-wrap: normal;
  text-wrap: balance;
}

.case-card p {
  max-width: 38ch !important;
  font-size: clamp(13px, 0.88vw, 15px) !important;
  line-height: 1.68 !important;
  color: rgba(205, 223, 235, 0.84) !important;
}

.case-card {
  min-height: 350px !important;
}

.case-card-body {
  flex: 1 1 auto;
}

.case-card-bottom {
  margin-top: auto !important;
}

/* Slightly tighter tags so the cards feel cleaner. */
.case-tag-row {
  gap: 8px !important;
}

.case-tag-row span {
  font-size: 10px !important;
  padding: 7px 9px !important;
}

@media (max-width: 1180px) {
  .case-card h3 {
    max-width: 16ch !important;
    font-size: clamp(24px, 2.6vw, 31px) !important;
  }
}

@media (max-width: 820px) {
  .case-card h3 {
    max-width: none !important;
    font-size: clamp(25px, 6.6vw, 34px) !important;
    line-height: 1.06 !important;
  }

  .case-card p {
    max-width: none !important;
  }
}


/* ===== V104 — Reworked case detail page, original content preserved ===== */

.case-detail-template-v104 {
  background:
    radial-gradient(900px circle at 70% 8%, rgba(95, 66, 120, 0.10), transparent 58%),
    radial-gradient(760px circle at 12% 36%, rgba(121, 213, 223, 0.07), transparent 62%);
}

.case-detail-template-v104 > section {
  width: min(100% - 48px, 1480px);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* Hero */
.case-detail-hero-v104 {
  display: block !important;
  max-width: none !important;
  text-align: left !important;
  min-height: auto !important;
  padding: clamp(110px, 9vw, 150px) 0 clamp(48px, 5vw, 80px) !important;
}

.case-detail-hero-shell {
  max-width: 1280px;
  margin-inline: auto;
}

.case-detail-hero-v104 .case-back-link {
  margin-bottom: 18px;
  color: var(--cyan);
}

.case-detail-hero-v104 .eyebrow {
  margin-bottom: 16px;
}

.case-detail-hero-v104 h1 {
  max-width: 12.5ch !important;
  margin: 0 !important;
  color: var(--ink);
  font-family: "Jersey 15", "Space Mono", monospace !important;
  font-size: clamp(78px, 8.2vw, 132px) !important;
  font-weight: 400 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.035em !important;
  text-shadow: 5px 5px 0 rgba(2, 8, 16, 0.42);
  text-wrap: balance;
}

.case-detail-hero-v104 .case-detail-lead {
  max-width: 920px;
  margin-top: clamp(22px, 2.2vw, 32px);
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: clamp(16px, 1.08vw, 19px);
  line-height: 1.7;
}

.case-detail-meta-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1120px;
  margin-top: clamp(28px, 3vw, 40px);
}

.case-detail-meta-strip div {
  min-height: 96px;
  padding: 18px 20px;
  border: 2px solid rgba(159, 216, 244, 0.42);
  background:
    linear-gradient(180deg, rgba(10, 25, 42, 0.66), rgba(5, 14, 24, 0.48));
  box-shadow: inset 0 0 0 1px rgba(159, 216, 244, 0.05);
}

.case-detail-meta-strip span {
  display: block;
  margin-bottom: 10px;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.case-detail-meta-strip strong {
  display: block;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(14px, 0.96vw, 16px);
  line-height: 1.45;
}

.case-detail-hero-v104 .case-detail-tags {
  margin-top: 22px;
}

/* Story layout */
.case-story-v104 {
  padding: clamp(18px, 2.5vw, 34px) 0 clamp(62px, 6vw, 96px);
}

.case-story-panel,
.case-story-card {
  position: relative;
  border: 3px solid rgba(159, 216, 244, 0.84);
  background:
    radial-gradient(520px circle at 16% 0%, rgba(121, 213, 223, 0.065), transparent 64%),
    linear-gradient(180deg, rgba(30, 49, 73, 0.78), rgba(13, 28, 46, 0.96));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.case-story-panel::before,
.case-story-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(159, 216, 244, 0.12);
  pointer-events: none;
}

.case-story-panel::after,
.case-story-card::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 22px;
  height: 3px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.92), rgba(244, 199, 98, 0.82), transparent 78%);
  opacity: 0.72;
}

.case-story-panel {
  display: grid;
  grid-template-columns: minmax(170px, 0.26fr) minmax(0, 1fr);
  gap: clamp(22px, 3.8vw, 60px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 52px);
  margin-bottom: clamp(18px, 2vw, 26px);
}

.case-story-panel > *,
.case-story-card > * {
  position: relative;
  z-index: 1;
}

.case-story-panel-kicker .eyebrow,
.case-story-card .eyebrow {
  margin: 0;
}

.case-story-panel-copy h2,
.case-story-card h2 {
  margin: 0;
  max-width: 24ch;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(25px, 2.15vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.case-story-panel-copy p,
.case-story-card p {
  margin: 18px 0 0;
  max-width: 76ch;
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: clamp(14px, 0.98vw, 16px);
  line-height: 1.72;
}

.case-story-panel-intro {
  background:
    radial-gradient(600px circle at 16% 0%, rgba(244, 199, 98, 0.08), transparent 64%),
    linear-gradient(180deg, rgba(35, 56, 82, 0.82), rgba(13, 28, 46, 0.96));
}

.case-story-panel-overview {
  grid-template-columns: minmax(170px, 0.33fr) minmax(0, 1fr);
}

.case-story-grid-v104 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  margin-bottom: clamp(18px, 2vw, 26px);
}

.case-story-card {
  min-height: 420px;
  padding: clamp(26px, 2.7vw, 40px);
  display: flex;
  flex-direction: column;
}

.case-story-card h2 {
  margin-top: 16px;
  max-width: 18ch;
  font-size: clamp(23px, 1.7vw, 31px);
}

.case-story-card p {
  max-width: 58ch;
}

.case-story-card:hover,
.case-story-panel:hover {
  border-color: rgba(244, 199, 98, 0.82);
}

.case-story-panel-result {
  background:
    radial-gradient(620px circle at 82% 0%, rgba(121, 213, 223, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(32, 52, 78, 0.82), rgba(13, 28, 46, 0.96));
}

/* CTA */
.case-detail-page-cta-v104 {
  padding-top: 0 !important;
  padding-bottom: clamp(72px, 7vw, 112px) !important;
}

.case-detail-page-cta-v104 .compact-page-cta-card {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
}

/* Hide old case-detail artifacts on this template if any legacy markup/styles leak in */
.case-detail-template-v104 .case-detail-sidebar,
.case-detail-template-v104 .case-detail-step,
.case-detail-template-v104 .case-meta-grid {
  display: none !important;
}

@media (max-width: 1180px) {
  .case-detail-meta-strip {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  .case-story-grid-v104 {
    grid-template-columns: 1fr;
  }

  .case-story-card {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .case-detail-template-v104 > section {
    width: min(100% - 28px, 1480px);
  }

  .case-detail-hero-v104 {
    padding-top: 98px !important;
    padding-bottom: 42px !important;
  }

  .case-detail-hero-v104 h1 {
    max-width: 10.8ch !important;
    font-size: clamp(56px, 17vw, 86px) !important;
    line-height: 0.88 !important;
  }

  .case-detail-hero-v104 .case-detail-lead {
    font-size: 15px;
    line-height: 1.68;
  }

  .case-story-panel {
    grid-template-columns: 1fr;
    padding: 26px 20px;
  }

  .case-story-card {
    padding: 26px 20px;
  }

  .case-story-panel-copy h2,
  .case-story-card h2 {
    max-width: none;
    font-size: clamp(24px, 7.2vw, 34px);
  }

  .case-story-panel::after,
  .case-story-card::after {
    left: 20px;
    right: 20px;
  }
}


/* ===== V105 — Case detail metadata, tags and admin implementation polish ===== */

/* More dynamic metadata tiles */
.case-detail-template-v104 .case-detail-meta-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  max-width: 1120px !important;
}

.case-detail-template-v104 .case-meta-tile,
.case-detail-template-v104 .case-detail-meta-strip div {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 112px;
  padding: 20px 20px 18px;
  border: 2px solid rgba(159, 216, 244, 0.46);
  background:
    radial-gradient(260px circle at var(--mx, 18%) var(--my, 18%), rgba(121, 213, 223, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(10, 25, 42, 0.70), rgba(5, 14, 24, 0.52));
  box-shadow:
    5px 5px 0 rgba(2, 8, 16, 0.22),
    inset 0 0 0 1px rgba(159, 216, 244, 0.055);
  transition:
    transform 180ms steps(4, end),
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.case-detail-template-v104 .case-meta-tile::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 3px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.9), rgba(244, 199, 98, 0.78), transparent 82%);
  transform: scaleX(0.28);
  transform-origin: left center;
  opacity: 0.7;
  transition: transform 220ms steps(6, end), opacity 160ms ease;
}

.case-detail-template-v104 .case-meta-tile::after {
  content: "";
  position: absolute;
  inset: -40% -22% auto;
  height: 72px;
  background: linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.13), rgba(244, 199, 98, 0.06), transparent);
  transform: translateX(-34%);
  opacity: 0;
  pointer-events: none;
}

.case-detail-template-v104 .case-meta-tile:hover,
.case-detail-template-v104 .case-meta-tile:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.88);
  box-shadow:
    7px 7px 0 rgba(2, 8, 16, 0.28),
    0 0 24px rgba(244, 199, 98, 0.08),
    inset 0 0 0 1px rgba(244, 199, 98, 0.08);
  outline: none;
}

.case-detail-template-v104 .case-meta-tile:hover::before,
.case-detail-template-v104 .case-meta-tile:focus-visible::before {
  transform: scaleX(1);
  opacity: 1;
}

.case-detail-template-v104 .case-meta-tile:hover::after,
.case-detail-template-v104 .case-meta-tile:focus-visible::after {
  opacity: 0.8;
  animation: caseMetaSweepV105 760ms steps(8, end) 1;
}

@keyframes caseMetaSweepV105 {
  from { transform: translateX(-34%); }
  to { transform: translateX(34%); }
}

.case-detail-template-v104 .case-meta-tile i {
  position: absolute;
  top: 16px;
  right: 18px;
  color: rgba(121, 213, 223, 0.34);
  font-style: normal;
  font-family: "Space Mono", monospace;
  font-size: 18px;
  line-height: 1;
}

.case-detail-template-v104 .case-meta-tile:hover i,
.case-detail-template-v104 .case-meta-tile:focus-visible i {
  color: rgba(244, 199, 98, 0.72);
}

.case-detail-template-v104 .case-meta-tile span {
  position: relative;
  z-index: 1;
}

.case-detail-template-v104 .case-meta-tile strong {
  position: relative;
  z-index: 1;
  max-width: 24ch;
}

/* Center and energize the case tags under the hero */
.case-detail-template-v104 .case-detail-tags {
  justify-content: center;
  width: fit-content;
  max-width: min(100%, 820px);
  margin: 24px auto 0 !important;
  padding: 10px;
  border: 1px solid rgba(159, 216, 244, 0.18);
  background: rgba(5, 14, 24, 0.16);
}

.case-detail-template-v104 .case-detail-tags span {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(159, 216, 244, 0.48);
  background: rgba(5, 14, 24, 0.42);
  color: rgba(215, 232, 242, 0.92);
  transition:
    transform 160ms steps(4, end),
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.case-detail-template-v104 .case-detail-tags span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.15), rgba(244, 199, 98, 0.11));
  z-index: -1;
  transition: width 180ms steps(5, end);
}

.case-detail-template-v104 .case-detail-tags span:hover {
  transform: translateY(-3px);
  color: var(--amber);
  border-color: rgba(244, 199, 98, 0.74);
  background: rgba(15, 30, 48, 0.68);
}

.case-detail-template-v104 .case-detail-tags span:hover::before {
  width: 100%;
}

/* Admin tools is an implementation block now, not a conclusion/review style panel */
.case-detail-template-v104 .case-story-card--implementation {
  grid-column: 1 / -1;
  min-height: 0;
  padding: clamp(28px, 3.4vw, 52px);
  background:
    radial-gradient(500px circle at 12% 0%, rgba(121, 213, 223, 0.075), transparent 64%),
    linear-gradient(180deg, rgba(30, 49, 73, 0.80), rgba(13, 28, 46, 0.96));
}

.case-detail-template-v104 .case-story-card--implementation h2 {
  max-width: 26ch;
  font-size: clamp(26px, 2.35vw, 42px);
}

.case-detail-template-v104 .case-story-card--implementation p {
  max-width: 92ch;
}

/* Slightly calmer story typography after the uploaded original-content check */
.case-detail-template-v104 .case-story-panel-copy h2,
.case-detail-template-v104 .case-story-card h2 {
  letter-spacing: -0.038em;
}

.case-detail-template-v104 .case-story-panel-copy p,
.case-detail-template-v104 .case-story-card p {
  color: rgba(205, 223, 235, 0.88);
}

@media (max-width: 1180px) {
  .case-detail-template-v104 .case-detail-meta-strip {
    grid-template-columns: 1fr !important;
    max-width: 820px !important;
  }

  .case-detail-template-v104 .case-meta-tile strong {
    max-width: none;
  }
}

@media (max-width: 820px) {
  .case-detail-template-v104 .case-detail-tags {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .case-detail-template-v104 .case-meta-tile,
  .case-detail-template-v104 .case-detail-meta-strip div {
    min-height: 96px;
  }

  .case-detail-template-v104 .case-story-card--implementation {
    padding: 26px 20px;
  }
}


/* ===== V106 — Remove decorative metadata icons ===== */
.case-detail-template-v104 .case-meta-tile i {
  display: none !important;
  content: none !important;
}


/* ===== V107 — Unique Client / Overview / Conclusion blocks + cleaner story cards ===== */

/* Remove the bottom line from regular content cards */
.case-detail-template-v104 .case-story-card::after,
.case-detail-template-v104 .case-story-panel::after {
  content: none !important;
  display: none !important;
}

/* Keep extra breathing room between Admin Tools and Conclusion */
.case-detail-template-v104 .case-story-card--implementation {
  margin-bottom: clamp(22px, 2.6vw, 38px) !important;
}

/* Shared styling for the three main narrative blocks */
.case-detail-template-v104 .case-story-panel-intro,
.case-detail-template-v104 .case-story-panel-overview,
.case-detail-template-v104 .case-story-panel-result {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(42px, 4vw, 64px);
}

/* Make Client / Project Overview / Conclusion labels feel intentional and centered on desktop */
@media (min-width: 821px) {
  .case-detail-template-v104 .case-story-panel-intro,
  .case-detail-template-v104 .case-story-panel-overview,
  .case-detail-template-v104 .case-story-panel-result {
    grid-template-columns: minmax(170px, 0.24fr) minmax(0, 1fr);
  }

  .case-detail-template-v104 .case-story-panel-intro .case-story-panel-kicker,
  .case-detail-template-v104 .case-story-panel-overview .case-story-panel-kicker,
  .case-detail-template-v104 .case-story-panel-result .case-story-panel-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    text-align: center;
  }

  .case-detail-template-v104 .case-story-panel-intro .case-story-panel-kicker .eyebrow,
  .case-detail-template-v104 .case-story-panel-overview .case-story-panel-kicker .eyebrow,
  .case-detail-template-v104 .case-story-panel-result .case-story-panel-kicker .eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    min-height: 42px;
    padding: 10px 13px;
    border: 2px solid rgba(244, 199, 98, 0.66);
    background: rgba(5, 14, 24, 0.30);
    box-shadow: 4px 4px 0 rgba(2, 8, 16, 0.28);
  }
}

/* Different visual character for each large narrative block */
.case-detail-template-v104 .case-story-panel-intro {
  background:
    radial-gradient(560px circle at 16% 0%, rgba(244, 199, 98, 0.075), transparent 64%),
    linear-gradient(180deg, rgba(35, 56, 82, 0.82), rgba(13, 28, 46, 0.96)) !important;
}

.case-detail-template-v104 .case-story-panel-overview {
  background:
    radial-gradient(580px circle at 78% 0%, rgba(121, 213, 223, 0.075), transparent 64%),
    linear-gradient(180deg, rgba(31, 53, 77, 0.82), rgba(11, 25, 42, 0.96)) !important;
}

.case-detail-template-v104 .case-story-panel-result {
  background:
    radial-gradient(640px circle at 50% 0%, rgba(244, 199, 98, 0.06), transparent 62%),
    radial-gradient(520px circle at 86% 24%, rgba(121, 213, 223, 0.075), transparent 62%),
    linear-gradient(180deg, rgba(32, 52, 78, 0.84), rgba(13, 28, 46, 0.96)) !important;
}

/* Dynamic bottom lines only for Client, Project Overview and Conclusion */
.case-detail-template-v104 .case-story-panel-intro::after,
.case-detail-template-v104 .case-story-panel-overview::after,
.case-detail-template-v104 .case-story-panel-result::after {
  content: "";
  display: block !important;
  position: absolute;
  left: clamp(28px, 4vw, 58px);
  right: clamp(28px, 4vw, 58px);
  bottom: 22px;
  height: 3px;
  background:
    linear-gradient(90deg,
      rgba(121, 213, 223, 0.96),
      rgba(244, 199, 98, 0.92),
      rgba(121, 213, 223, 0.55),
      transparent 86%);
  transform: scaleX(0.24);
  transform-origin: left center;
  opacity: 0.72;
  transition:
    transform 520ms cubic-bezier(.2,.8,.2,1),
    opacity 220ms ease,
    filter 220ms ease;
}

.case-detail-template-v104 .case-story-panel-intro:hover::after,
.case-detail-template-v104 .case-story-panel-overview:hover::after,
.case-detail-template-v104 .case-story-panel-result:hover::after,
.case-detail-template-v104 .case-story-panel-intro:focus-within::after,
.case-detail-template-v104 .case-story-panel-overview:focus-within::after,
.case-detail-template-v104 .case-story-panel-result:focus-within::after {
  transform: scaleX(1);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(121, 213, 223, 0.20));
}

/* A soft moving scan layer for those main blocks only */
.case-detail-template-v104 .case-story-panel-intro .case-story-panel-copy::after,
.case-detail-template-v104 .case-story-panel-overview .case-story-panel-copy::after,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -18px;
  height: 54px;
  background: linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.075), rgba(244, 199, 98, 0.035), transparent);
  opacity: 0;
  transform: translateX(-24%);
  pointer-events: none;
}

.case-detail-template-v104 .case-story-panel-intro:hover .case-story-panel-copy::after,
.case-detail-template-v104 .case-story-panel-overview:hover .case-story-panel-copy::after,
.case-detail-template-v104 .case-story-panel-result:hover .case-story-panel-copy::after {
  opacity: 0.8;
  animation: caseStorySweepV107 900ms steps(9, end) 1;
}

@keyframes caseStorySweepV107 {
  from { transform: translateX(-24%); }
  to { transform: translateX(24%); }
}

/* Regular implementation cards remain clean: no bottom meter, just hover border */
.case-detail-template-v104 .case-story-card:not(.case-story-card--implementation)::before,
.case-detail-template-v104 .case-story-card--implementation::before {
  opacity: 0.82;
}

.case-detail-template-v104 .case-story-card:hover,
.case-detail-template-v104 .case-story-card:focus-within {
  border-color: rgba(244, 199, 98, 0.72);
}

/* Make sure mobile remains simple and readable */
@media (max-width: 820px) {
  .case-detail-template-v104 .case-story-panel-intro,
  .case-detail-template-v104 .case-story-panel-overview,
  .case-detail-template-v104 .case-story-panel-result {
    padding-bottom: 48px;
  }

  .case-detail-template-v104 .case-story-panel-intro .case-story-panel-kicker,
  .case-detail-template-v104 .case-story-panel-overview .case-story-panel-kicker,
  .case-detail-template-v104 .case-story-panel-result .case-story-panel-kicker {
    text-align: left;
  }

  .case-detail-template-v104 .case-story-panel-intro::after,
  .case-detail-template-v104 .case-story-panel-overview::after,
  .case-detail-template-v104 .case-story-panel-result::after {
    left: 20px;
    right: 20px;
    bottom: 20px;
    transform: scaleX(0.34);
  }
}


/* ===== V108 — Move Client / Project Overview / Conclusion labels to the top ===== */

.case-detail-template-v104 .case-story-panel-intro,
.case-detail-template-v104 .case-story-panel-overview,
.case-detail-template-v104 .case-story-panel-result {
  display: block !important;
}

.case-detail-template-v104 .case-story-panel-intro .case-story-panel-kicker,
.case-detail-template-v104 .case-story-panel-overview .case-story-panel-kicker,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-kicker {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  min-height: 0 !important;
  margin-bottom: clamp(18px, 2vw, 26px);
  text-align: left !important;
}

.case-detail-template-v104 .case-story-panel-intro .case-story-panel-kicker .eyebrow,
.case-detail-template-v104 .case-story-panel-overview .case-story-panel-kicker .eyebrow,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-kicker .eyebrow {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  min-height: 0 !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  border: 2px solid rgba(244, 199, 98, 0.68);
  background: rgba(5, 14, 24, 0.32);
  box-shadow: 4px 4px 0 rgba(2, 8, 16, 0.26);
  line-height: 1.1;
  white-space: nowrap;
}

.case-detail-template-v104 .case-story-panel-intro .case-story-panel-copy,
.case-detail-template-v104 .case-story-panel-overview .case-story-panel-copy,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy {
  max-width: 980px;
}

.case-detail-template-v104 .case-story-panel-intro .case-story-panel-copy h2,
.case-detail-template-v104 .case-story-panel-overview .case-story-panel-copy h2,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2 {
  max-width: 24ch;
}

.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy {
  margin-left: auto;
  margin-right: auto;
}

.case-detail-template-v104 .case-story-panel-result .case-story-panel-kicker {
  justify-content: center !important;
}

.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy p {
  margin-left: auto;
  margin-right: auto;
}

.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2 {
  text-align: center;
}

.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy p {
  text-align: left;
}

@media (max-width: 820px) {
  .case-detail-template-v104 .case-story-panel-result .case-story-panel-kicker {
    justify-content: flex-start !important;
  }

  .case-detail-template-v104 .case-story-panel-result .case-story-panel-copy {
    margin-left: 0;
    margin-right: 0;
  }

  .case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2 {
    text-align: left;
  }

  .case-detail-template-v104 .case-story-panel-intro .case-story-panel-kicker .eyebrow,
  .case-detail-template-v104 .case-story-panel-overview .case-story-panel-kicker .eyebrow,
  .case-detail-template-v104 .case-story-panel-result .case-story-panel-kicker .eyebrow {
    white-space: normal;
  }
}


/* ===== V109 — Conclusion aligned like Client and Project Overview ===== */
.case-detail-template-v104 .case-story-panel-result .case-story-panel-kicker {
  justify-content: flex-start !important;
  text-align: left !important;
}

.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2 {
  max-width: 24ch !important;
}


/* ===== V110 — Compact editorial width for Client / Project Overview / Conclusion ===== */

.case-detail-template-v104 .case-story-panel-intro,
.case-detail-template-v104 .case-story-panel-overview,
.case-detail-template-v104 .case-story-panel-result {
  width: min(100%, 1080px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(28px, 3vw, 44px) clamp(30px, 3.4vw, 52px) clamp(46px, 4vw, 62px) !important;
}

.case-detail-template-v104 .case-story-panel-intro .case-story-panel-copy,
.case-detail-template-v104 .case-story-panel-overview .case-story-panel-copy,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy {
  max-width: 860px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.case-detail-template-v104 .case-story-panel-intro .case-story-panel-copy h2,
.case-detail-template-v104 .case-story-panel-overview .case-story-panel-copy h2,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2 {
  max-width: 18ch !important;
  font-size: clamp(28px, 2.45vw, 42px) !important;
}

.case-detail-template-v104 .case-story-panel-intro .case-story-panel-copy p,
.case-detail-template-v104 .case-story-panel-overview .case-story-panel-copy p,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy p {
  max-width: 76ch !important;
}

.case-detail-template-v104 .case-story-v104 {
  width: min(100% - 48px, 1480px);
}

.case-detail-template-v104 .case-story-grid-v104 {
  width: min(100%, 1320px);
  margin-left: auto;
  margin-right: auto;
}

.case-detail-template-v104 .case-story-card--implementation {
  width: min(100%, 1320px);
  margin-left: auto;
  margin-right: auto;
}

.case-detail-template-v104 .case-story-panel-intro::after,
.case-detail-template-v104 .case-story-panel-overview::after,
.case-detail-template-v104 .case-story-panel-result::after {
  left: clamp(30px, 3.4vw, 52px) !important;
  right: clamp(30px, 3.4vw, 52px) !important;
}

.case-detail-template-v104 .case-story-panel-intro::before,
.case-detail-template-v104 .case-story-panel-overview::before,
.case-detail-template-v104 .case-story-panel-result::before {
  inset: 12px !important;
}

@media (max-width: 1180px) {
  .case-detail-template-v104 .case-story-panel-intro,
  .case-detail-template-v104 .case-story-panel-overview,
  .case-detail-template-v104 .case-story-panel-result,
  .case-detail-template-v104 .case-story-card--implementation,
  .case-detail-template-v104 .case-story-grid-v104 {
    width: 100% !important;
  }
}

@media (max-width: 820px) {
  .case-detail-template-v104 .case-story-v104 {
    width: min(100% - 28px, 1480px);
  }

  .case-detail-template-v104 .case-story-panel-intro,
  .case-detail-template-v104 .case-story-panel-overview,
  .case-detail-template-v104 .case-story-panel-result {
    padding: 26px 20px 48px !important;
  }

  .case-detail-template-v104 .case-story-panel-intro::after,
  .case-detail-template-v104 .case-story-panel-overview::after,
  .case-detail-template-v104 .case-story-panel-result::after {
    left: 20px !important;
    right: 20px !important;
  }
}


/* ===== V111 — Case page block composition polish, no extra content ===== */

/* Different editorial widths so the page feels less repetitive */
.case-detail-template-v104 .case-story-panel-intro {
  width: min(100%, 980px) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.case-detail-template-v104 .case-story-panel-overview {
  width: min(100%, 1120px) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.case-detail-template-v104 .case-story-panel-result {
  width: min(100%, 1040px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Unique visual rhythm for Client / Overview / Conclusion without adding text */
.case-detail-template-v104 .case-story-panel-intro {
  background:
    linear-gradient(90deg, rgba(244, 199, 98, 0.055), transparent 34%),
    radial-gradient(540px circle at 0% 8%, rgba(244, 199, 98, 0.075), transparent 64%),
    linear-gradient(180deg, rgba(35, 56, 82, 0.82), rgba(13, 28, 46, 0.96)) !important;
}

.case-detail-template-v104 .case-story-panel-overview {
  background:
    linear-gradient(270deg, rgba(121, 213, 223, 0.055), transparent 36%),
    radial-gradient(580px circle at 100% 8%, rgba(121, 213, 223, 0.075), transparent 64%),
    linear-gradient(180deg, rgba(31, 53, 77, 0.82), rgba(11, 25, 42, 0.96)) !important;
}

.case-detail-template-v104 .case-story-panel-result {
  border-color: rgba(244, 199, 98, 0.72) !important;
  background:
    radial-gradient(680px circle at 48% 0%, rgba(244, 199, 98, 0.075), transparent 62%),
    radial-gradient(520px circle at 86% 24%, rgba(121, 213, 223, 0.07), transparent 62%),
    linear-gradient(180deg, rgba(34, 53, 78, 0.86), rgba(13, 28, 46, 0.97)) !important;
}

/* Small layout differences, still using the original text only */
.case-detail-template-v104 .case-story-panel-intro .case-story-panel-copy h2 {
  max-width: 15.5ch !important;
}

.case-detail-template-v104 .case-story-panel-overview .case-story-panel-copy {
  max-width: 900px !important;
}

.case-detail-template-v104 .case-story-panel-overview .case-story-panel-copy h2 {
  max-width: 19ch !important;
}

.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy {
  max-width: 920px !important;
}

.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2 {
  max-width: 20ch !important;
  font-size: clamp(30px, 2.65vw, 46px) !important;
}

/* Dynamic line remains only on the three editorial blocks, with stronger final-block feel */
.case-detail-template-v104 .case-story-panel-result::after {
  height: 4px !important;
  background:
    linear-gradient(90deg,
      rgba(244, 199, 98, 0.98),
      rgba(121, 213, 223, 0.92),
      rgba(244, 199, 98, 0.62),
      transparent 88%) !important;
  opacity: 0.9 !important;
}

/* Make implementation cards more compact */
.case-detail-template-v104 .case-story-grid-v104 {
  gap: clamp(14px, 1.55vw, 22px) !important;
  margin-top: clamp(8px, 1vw, 14px);
  margin-bottom: clamp(18px, 2vw, 30px);
}

.case-detail-template-v104 .case-story-card:not(.case-story-card--implementation) {
  min-height: 0 !important;
  padding: clamp(22px, 2vw, 32px) !important;
}

.case-detail-template-v104 .case-story-card:not(.case-story-card--implementation) h2 {
  margin-top: 12px !important;
  max-width: 20ch !important;
  font-size: clamp(22px, 1.55vw, 29px) !important;
  line-height: 1.1 !important;
}

.case-detail-template-v104 .case-story-card:not(.case-story-card--implementation) p {
  margin-top: 14px !important;
  font-size: clamp(13px, 0.92vw, 15px) !important;
  line-height: 1.66 !important;
}

/* Admin tools stays implementation-like, but less massive */
.case-detail-template-v104 .case-story-card--implementation {
  padding: clamp(26px, 2.8vw, 42px) !important;
  margin-bottom: clamp(24px, 2.8vw, 42px) !important;
}

.case-detail-template-v104 .case-story-card--implementation h2 {
  max-width: 27ch !important;
  font-size: clamp(25px, 2.1vw, 38px) !important;
}

.case-detail-template-v104 .case-story-card--implementation p {
  max-width: 88ch !important;
}

/* Use spacing as the separator instead of adding another text label */
.case-detail-template-v104 .case-story-panel-overview {
  margin-bottom: clamp(26px, 3.4vw, 54px) !important;
}

.case-detail-template-v104 .case-story-card--implementation {
  margin-top: clamp(16px, 2.4vw, 36px) !important;
}

.case-detail-template-v104 .case-story-panel-result {
  margin-top: clamp(18px, 2.6vw, 42px) !important;
}

/* Hover feels a little different on the main editorial blocks */
.case-detail-template-v104 .case-story-panel-intro:hover,
.case-detail-template-v104 .case-story-panel-overview:hover,
.case-detail-template-v104 .case-story-panel-result:hover {
  transform: translateY(-3px);
  box-shadow:
    var(--shadow),
    0 0 28px rgba(121, 213, 223, 0.10);
}

.case-detail-template-v104 .case-story-panel-result:hover {
  box-shadow:
    var(--shadow),
    0 0 34px rgba(244, 199, 98, 0.12);
}

@media (max-width: 1180px) {
  .case-detail-template-v104 .case-story-panel-intro,
  .case-detail-template-v104 .case-story-panel-overview,
  .case-detail-template-v104 .case-story-panel-result {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 820px) {
  .case-detail-template-v104 .case-story-panel-intro .case-story-panel-copy h2,
  .case-detail-template-v104 .case-story-panel-overview .case-story-panel-copy h2,
  .case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2 {
    max-width: none !important;
  }

  .case-detail-template-v104 .case-story-card:not(.case-story-card--implementation) {
    padding: 24px 20px !important;
  }

  .case-detail-template-v104 .case-story-panel-intro:hover,
  .case-detail-template-v104 .case-story-panel-overview:hover,
  .case-detail-template-v104 .case-story-panel-result:hover {
    transform: none;
  }
}


/* ===== V112 — Overlapping Client / Project Overview interaction ===== */

@media (min-width: 1181px) {
  .case-detail-template-v104 .case-story-v104 {
    isolation: isolate;
  }

  .case-detail-template-v104 .case-story-panel-intro,
  .case-detail-template-v104 .case-story-panel-overview {
    transition:
      transform 420ms cubic-bezier(.2,.85,.2,1),
      opacity 260ms ease,
      filter 260ms ease,
      border-color 220ms ease,
      box-shadow 260ms ease;
    will-change: transform, opacity, filter;
  }

  /* Client sits slightly forward-left */
  .case-detail-template-v104 .case-story-panel-intro {
    position: relative;
    z-index: 3;
    margin-left: max(0px, calc((100% - 1320px) / 2)) !important;
    margin-right: auto !important;
    transform: translateX(0) translateY(0) scale(1);
  }

  /* Project Overview overlaps Client from the right/top */
  .case-detail-template-v104 .case-story-panel-overview {
    position: relative;
    z-index: 2;
    margin-top: clamp(-104px, -5.6vw, -72px) !important;
    margin-left: auto !important;
    margin-right: max(0px, calc((100% - 1320px) / 2)) !important;
    transform: translateX(0) translateY(0) scale(0.985);
    opacity: 0.94;
  }

  /* When Client is active, it comes forward and Project Overview goes back */
  .case-detail-template-v104 .case-story-v104:has(.case-story-panel-intro:hover) .case-story-panel-intro,
  .case-detail-template-v104 .case-story-v104:has(.case-story-panel-intro:focus-within) .case-story-panel-intro {
    z-index: 8;
    transform: translateX(0) translateY(-6px) scale(1.018);
    border-color: rgba(244, 199, 98, 0.90);
    box-shadow:
      12px 12px 0 rgba(2, 8, 16, 0.34),
      0 0 34px rgba(244, 199, 98, 0.12);
  }

  .case-detail-template-v104 .case-story-v104:has(.case-story-panel-intro:hover) .case-story-panel-overview,
  .case-detail-template-v104 .case-story-v104:has(.case-story-panel-intro:focus-within) .case-story-panel-overview {
    z-index: 1;
    transform: translateX(34px) translateY(16px) scale(0.955);
    opacity: 0.70;
    filter: saturate(0.78) brightness(0.86);
  }

  /* When Project Overview is active, it comes forward and Client goes back */
  .case-detail-template-v104 .case-story-v104:has(.case-story-panel-overview:hover) .case-story-panel-overview,
  .case-detail-template-v104 .case-story-v104:has(.case-story-panel-overview:focus-within) .case-story-panel-overview {
    z-index: 9;
    transform: translateX(0) translateY(-10px) scale(1.018);
    opacity: 1;
    border-color: rgba(244, 199, 98, 0.90);
    box-shadow:
      12px 12px 0 rgba(2, 8, 16, 0.34),
      0 0 34px rgba(121, 213, 223, 0.12);
  }

  .case-detail-template-v104 .case-story-v104:has(.case-story-panel-overview:hover) .case-story-panel-intro,
  .case-detail-template-v104 .case-story-v104:has(.case-story-panel-overview:focus-within) .case-story-panel-intro {
    z-index: 1;
    transform: translateX(-34px) translateY(18px) scale(0.955);
    opacity: 0.70;
    filter: saturate(0.78) brightness(0.86);
  }

  /* Give the next implementation section enough breathing room after the overlap */
  .case-detail-template-v104 .case-story-grid-v104 {
    margin-top: clamp(34px, 4vw, 66px) !important;
  }
}

/* On tablet/mobile keep the blocks simple and stacked */
@media (max-width: 1180px) {
  .case-detail-template-v104 .case-story-panel-intro,
  .case-detail-template-v104 .case-story-panel-overview {
    margin-top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}


/* ===== V115 — Desktop hover polish for Conclusion block ===== */
@media (min-width: 1181px) {
  .case-detail-template-v104 .case-story-panel-result {
    transition:
      transform 420ms cubic-bezier(.2,.85,.2,1),
      border-color 240ms ease,
      box-shadow 280ms ease,
      filter 240ms ease;
    transform-origin: center center;
    will-change: transform;
  }

  .case-detail-template-v104 .case-story-panel-result:hover,
  .case-detail-template-v104 .case-story-panel-result:focus-within {
    transform: translateY(-8px) scale(1.016);
    border-color: rgba(244, 199, 98, 0.90) !important;
    box-shadow:
      12px 12px 0 rgba(2, 8, 16, 0.34),
      0 0 34px rgba(244, 199, 98, 0.12);
    filter: saturate(1.04) brightness(1.02);
  }

  .case-detail-template-v104 .case-story-panel-result:hover .case-story-panel-copy h2,
  .case-detail-template-v104 .case-story-panel-result:focus-within .case-story-panel-copy h2 {
    transform: translateY(-2px);
  }

  .case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2 {
    transition: transform 420ms cubic-bezier(.2,.85,.2,1);
  }
}

@media (max-width: 1180px) {
  .case-detail-template-v104 .case-story-panel-result,
  .case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2 {
    transform: none !important;
  }
}


/* ===== V117 — Case cards: fill odd grid holes + restore meaningful section labels ===== */
.case-detail-template-v104 .case-story-grid-v104.case-story-grid--side-feature {
  align-items: stretch;
}

@media (min-width: 1181px) {
  .case-detail-template-v104 .case-story-grid-v104.case-story-grid--side-feature .case-story-card--implementation {
    grid-column: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: clamp(22px, 2vw, 32px) !important;
  }

  .case-detail-template-v104 .case-story-grid-v104.case-story-grid--side-feature .case-story-card--implementation h2 {
    max-width: 20ch !important;
    font-size: clamp(22px, 1.55vw, 29px) !important;
    line-height: 1.1 !important;
  }

  .case-detail-template-v104 .case-story-grid-v104.case-story-grid--side-feature .case-story-card--implementation p {
    max-width: 58ch !important;
    font-size: clamp(13px, 0.92vw, 15px) !important;
    line-height: 1.66 !important;
  }
}

/* Longer original section names look better when the eyebrow has a little more room. */
.case-detail-template-v104 .case-story-card .eyebrow {
  max-width: 100%;
  line-height: 1.28;
}

@media (max-width: 1180px) {
  .case-detail-template-v104 .case-story-grid-v104.case-story-grid--side-feature .case-story-card--implementation {
    width: 100% !important;
  }
}


/* ===== V118 — Long case heading control ===== */
.case-detail-template-v104 .case-story-panel-copy h2,
.case-detail-template-v104 .case-story-card h2 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.case-detail-template-v104 .case-story-panel-copy h2.is-long-heading,
.case-detail-template-v104 .case-story-card h2.is-long-heading {
  max-width: min(100%, 22ch) !important;
  font-size: clamp(26px, 2.05vw, 36px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
}

.case-detail-template-v104 .case-story-panel-intro .case-story-panel-copy h2.is-long-heading,
.case-detail-template-v104 .case-story-panel-overview .case-story-panel-copy h2.is-long-heading,
.case-detail-template-v104 .case-story-panel-result .case-story-panel-copy h2.is-long-heading {
  max-width: min(100%, 26ch) !important;
}

.case-detail-template-v104 .case-story-panel-copy h2.is-extra-long-heading,
.case-detail-template-v104 .case-story-card h2.is-extra-long-heading {
  max-width: min(100%, 30ch) !important;
  font-size: clamp(24px, 1.78vw, 32px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.026em !important;
}

.case-detail-template-v104 .case-story-panel-intro:has(h2.is-extra-long-heading) {
  width: min(100%, 1120px) !important;
}

.case-detail-template-v104 .case-story-panel-intro:has(h2.is-extra-long-heading) .case-story-panel-copy {
  max-width: 980px !important;
}

@media (min-width: 1181px) {
  .case-detail-template-v104 .case-story-panel-intro:has(h2.is-extra-long-heading) {
    margin-left: max(0px, calc((100% - 1360px) / 2)) !important;
  }

  .case-detail-template-v104 .case-story-panel-overview:has(h2.is-long-heading),
  .case-detail-template-v104 .case-story-panel-overview:has(h2.is-extra-long-heading) {
    width: min(100%, 1160px) !important;
    margin-right: max(0px, calc((100% - 1360px) / 2)) !important;
  }
}

.case-detail-template-v104 .case-story-card h2.is-long-heading {
  max-width: min(100%, 23ch) !important;
}

.case-detail-template-v104 .case-story-card h2.is-extra-long-heading {
  max-width: min(100%, 27ch) !important;
}

@media (max-width: 1180px) {
  .case-detail-template-v104 .case-story-panel-copy h2.is-long-heading,
  .case-detail-template-v104 .case-story-card h2.is-long-heading,
  .case-detail-template-v104 .case-story-panel-copy h2.is-extra-long-heading,
  .case-detail-template-v104 .case-story-card h2.is-extra-long-heading {
    max-width: none !important;
    font-size: clamp(24px, 5.2vw, 34px) !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 640px) {
  .case-detail-template-v104 .case-story-panel-copy h2.is-long-heading,
  .case-detail-template-v104 .case-story-card h2.is-long-heading,
  .case-detail-template-v104 .case-story-panel-copy h2.is-extra-long-heading,
  .case-detail-template-v104 .case-story-card h2.is-extra-long-heading {
    font-size: clamp(23px, 7.3vw, 30px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.02em !important;
  }
}


/* ===== V119 — Metadata / Work type wrapping fix ===== */

/* Let metadata values use the tile width instead of becoming a narrow column. */
.case-detail-template-v104 .case-meta-tile strong,
.case-detail-template-v104 .case-detail-meta-strip div strong {
  max-width: none !important;
  width: 100%;
  display: block;
  font-size: clamp(13px, 0.92vw, 16px) !important;
  line-height: 1.42 !important;
  letter-spacing: -0.015em;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

/* Long metadata values, especially Work type, get a slightly smaller, cleaner rhythm. */
.case-detail-template-v104 .case-meta-tile strong.is-long-meta,
.case-detail-template-v104 .case-detail-meta-strip div strong.is-long-meta {
  font-size: clamp(12px, 0.82vw, 14px) !important;
  line-height: 1.36 !important;
  letter-spacing: -0.01em;
  max-width: 34ch !important;
}

/* Work type is often the longest item, so give the value a little more breathing room. */
.case-detail-template-v104 .case-meta-tile:nth-child(3),
.case-detail-template-v104 .case-detail-meta-strip div:nth-child(3) {
  min-width: 0;
}

.case-detail-template-v104 .case-meta-tile:nth-child(3) strong,
.case-detail-template-v104 .case-detail-meta-strip div:nth-child(3) strong {
  max-width: 36ch !important;
}

/* On wide desktop, make metadata tiles less awkward when one value is longer. */
@media (min-width: 1181px) {
  .case-detail-template-v104 .case-detail-meta-strip {
    grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1fr) minmax(320px, 1.2fr) !important;
    align-items: stretch;
  }
}

/* On tablet/mobile, use full width and keep text readable. */
@media (max-width: 1180px) {
  .case-detail-template-v104 .case-meta-tile strong,
  .case-detail-template-v104 .case-detail-meta-strip div strong,
  .case-detail-template-v104 .case-meta-tile strong.is-long-meta,
  .case-detail-template-v104 .case-detail-meta-strip div strong.is-long-meta {
    max-width: none !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 520px) {
  .case-detail-template-v104 .case-meta-tile,
  .case-detail-template-v104 .case-detail-meta-strip div {
    min-height: 88px !important;
    padding: 16px 16px 18px !important;
  }

  .case-detail-template-v104 .case-meta-tile strong,
  .case-detail-template-v104 .case-detail-meta-strip div strong {
    font-size: 13px !important;
  }
}


/* ===== V120 — Case content cleanup support ===== */
.case-detail-template-v104 .case-story-panel-copy h2,
.case-detail-template-v104 .case-story-card h2 {
  text-wrap: balance;
}

.case-detail-template-v104 .case-story-panel-copy p,
.case-detail-template-v104 .case-story-card p {
  overflow-wrap: normal;
  word-break: normal;
}

.case-detail-template-v104 .case-story-card:has(p) h2 {
  margin-bottom: 0;
}


/* ===== V122 — Clickable service and case cards on index ===== */
.index-linked-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.service-grid > .service-card.index-linked-card,
.case-grid > .case-snapshot-card.index-linked-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 3px solid rgba(159, 216, 244, 0.86);
  border-radius: 0;
  background: rgba(22, 36, 55, 0.88);
  box-shadow: var(--shadow);
}

.service-grid > .service-card.index-linked-card {
  padding: clamp(22px, 2.4vw, 30px);
}

.case-grid > .case-snapshot-card.index-linked-card {
  min-height: 230px;
  padding: clamp(22px, 2.4vw, 30px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(31, 50, 74, 0.82), rgba(18, 33, 52, 0.90)),
    rgba(22, 36, 55, 0.88);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.case-grid > .case-snapshot-card.index-linked-card::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 18px;
  height: 18px;
  border-top: 3px solid rgba(121, 213, 223, 0.64);
  border-right: 3px solid rgba(121, 213, 223, 0.64);
  opacity: 0.78;
  transition:
    transform 180ms steps(4, end),
    border-color 180ms ease,
    opacity 180ms ease;
}

.case-grid > .case-snapshot-card.index-linked-card::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.72), transparent);
  opacity: 0.5;
  transition: opacity 180ms ease, background 180ms ease;
}

.service-grid > .service-card.index-linked-card:hover,
.service-grid > .service-card.index-linked-card:focus-visible,
.case-grid > .case-snapshot-card.index-linked-card:hover,
.case-grid > .case-snapshot-card.index-linked-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.95);
  outline: none;
  box-shadow:
    var(--shadow),
    0 0 26px rgba(244, 199, 98, 0.08);
}

.case-grid > .case-snapshot-card.index-linked-card:hover,
.case-grid > .case-snapshot-card.index-linked-card:focus-visible {
  background:
    linear-gradient(180deg, rgba(35, 58, 83, 0.94), rgba(21, 39, 60, 0.96)),
    rgba(28, 48, 72, 0.92);
}

.case-grid > .case-snapshot-card.index-linked-card:hover::before,
.case-grid > .case-snapshot-card.index-linked-card:focus-visible::before {
  transform: translate(3px, -3px);
  border-color: rgba(244, 199, 98, 0.95);
  opacity: 1;
}

.case-grid > .case-snapshot-card.index-linked-card:hover::after,
.case-grid > .case-snapshot-card.index-linked-card:focus-visible::after {
  opacity: 0.95;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.88), rgba(244, 199, 98, 0.82), transparent);
}

.case-grid > .case-snapshot-card.index-linked-card h3,
.service-grid > .service-card.index-linked-card h3 {
  transition: color 180ms ease, transform 180ms steps(4, end);
}

.case-grid > .case-snapshot-card.index-linked-card:hover h3,
.case-grid > .case-snapshot-card.index-linked-card:focus-visible h3,
.service-grid > .service-card.index-linked-card:hover h3,
.service-grid > .service-card.index-linked-card:focus-visible h3 {
  color: var(--ink);
  transform: translateY(-2px);
}

.case-snapshots-page-cta {
  margin-top: clamp(18px, 2.2vw, 28px);
}

.case-snapshots-page-cta .terminal-mini-link {
  min-width: 188px;
  justify-content: center;
}

@media (max-width: 820px) {
  .case-grid > .case-snapshot-card.index-linked-card,
  .service-grid > .service-card.index-linked-card {
    min-height: 0;
  }

  .case-snapshots-page-cta {
    display: flex;
  }

  .case-snapshots-page-cta .terminal-mini-link {
    width: min(100%, 280px);
  }
}


/* ===== V123 — Restore original index case-card visual after making cards clickable ===== */

/*
  V122 changed the case cards from <article> to clickable <a> cards.
  This override makes those anchors behave visually like the original article cards.
*/
.case-grid > a.case-snapshot-card.index-linked-card {
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) 58px !important;
  overflow: hidden !important;
  border: 3px solid rgba(159, 216, 244, 0.86) !important;
  border-radius: 0 !important;
  background: rgba(22, 36, 55, 0.88) !important;
  box-shadow: var(--shadow) !important;
  color: inherit !important;
  text-decoration: none !important;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease !important;
}

/* Original top-right corner accent, not a full top bar. */
.case-grid > a.case-snapshot-card.index-linked-card::before {
  content: "" !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 18px !important;
  height: 18px !important;
  border-top: 3px solid rgba(121, 213, 223, 0.7) !important;
  border-right: 3px solid rgba(121, 213, 223, 0.7) !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  opacity: 0.52 !important;
  background: transparent !important;
  transition: transform 140ms steps(3, end), opacity 140ms steps(3, end), border-color 140ms ease !important;
}

/* Original hidden hover label, not the bottom strip from V122. */
.case-grid > a.case-snapshot-card.index-linked-card::after {
  content: "Project snapshot" !important;
  position: absolute !important;
  left: 26px !important;
  right: auto !important;
  bottom: 22px !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(121, 213, 223, 0.88) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity 140ms steps(2, end), transform 140ms steps(3, end) !important;
}

.case-grid > a.case-snapshot-card.index-linked-card:hover,
.case-grid > a.case-snapshot-card.index-linked-card:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(190, 233, 250, 0.98) !important;
  box-shadow:
    8px 8px 0 rgba(2, 8, 16, 0.34),
    0 0 0 2px rgba(121, 213, 223, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(31, 53, 78, 0.94), rgba(18, 34, 55, 0.96)) !important;
  outline: none !important;
}

.case-grid > a.case-snapshot-card.index-linked-card:hover::before,
.case-grid > a.case-snapshot-card.index-linked-card:focus-visible::before {
  opacity: 0.9 !important;
  transform: translate(2px, -2px) !important;
  border-color: rgba(121, 213, 223, 0.9) !important;
}

.case-grid > a.case-snapshot-card.index-linked-card:hover::after,
.case-grid > a.case-snapshot-card.index-linked-card:focus-visible::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Keep the tag compact like it was in the article version. */
.case-grid > a.case-snapshot-card.index-linked-card .case-tag {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 5px 10px !important;
  border: 2px solid rgba(159, 216, 244, 0.2) !important;
  background: rgba(10, 20, 32, 0.28) !important;
  margin-bottom: 18px !important;
}

.case-grid > a.case-snapshot-card.index-linked-card:hover .case-tag,
.case-grid > a.case-snapshot-card.index-linked-card:focus-visible .case-tag {
  color: #ffe09a !important;
  border-color: rgba(244, 199, 98, 0.36) !important;
  background: rgba(244, 199, 98, 0.08) !important;
}

.case-grid > a.case-snapshot-card.index-linked-card h3 {
  max-width: 14ch !important;
  color: var(--ink) !important;
  transform: none !important;
}

.case-grid > a.case-snapshot-card.index-linked-card:hover h3,
.case-grid > a.case-snapshot-card.index-linked-card:focus-visible h3 {
  color: var(--ink) !important;
  transform: none !important;
}

.case-grid > a.case-snapshot-card.index-linked-card p:not(.case-tag) {
  max-width: 50em !important;
}

@media (max-width: 640px) {
  .case-grid > a.case-snapshot-card.index-linked-card:hover,
  .case-grid > a.case-snapshot-card.index-linked-card:focus-visible {
    transform: none !important;
  }

  .case-grid > a.case-snapshot-card.index-linked-card::after {
    position: static !important;
    display: block !important;
    margin-top: 14px !important;
    transform: none !important;
    opacity: 0.72 !important;
  }
}


/* ===== V124 — Keep index case snapshot corner accent on the right ===== */

/*
  Case snapshot cards are now links and also inherit generic hover-card styling.
  This forces their decorative corner back to the original top-right position.
*/
.case-grid > a.case-snapshot-card.index-linked-card.hover-card::before,
.case-grid > a.case-snapshot-card.index-linked-card::before {
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  width: 18px !important;
  height: 18px !important;
  border-top: 3px solid rgba(121, 213, 223, 0.7) !important;
  border-right: 3px solid rgba(121, 213, 223, 0.7) !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  opacity: 0.52 !important;
  transform: none !important;
}

.case-grid > a.case-snapshot-card.index-linked-card.hover-card:hover::before,
.case-grid > a.case-snapshot-card.index-linked-card.hover-card:focus-visible::before,
.case-grid > a.case-snapshot-card.index-linked-card:hover::before,
.case-grid > a.case-snapshot-card.index-linked-card:focus-visible::before {
  right: 16px !important;
  left: auto !important;
  opacity: 0.9 !important;
  transform: translate(2px, -2px) !important;
}


/* ===== V125 — About Us page ===== */

.nav a.nav-active {
  color: var(--amber);
}

.about-main {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding-top: 1px;
}

.about-hero,
.about-overlap-zone,
.about-contact-strip,
.about-difference-section,
.about-cta-band {
  position: relative;
  z-index: 1;
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.78fr);
  align-items: center;
  gap: clamp(28px, 5vw, 78px);
  min-height: clamp(560px, 78vh, 760px);
  padding: clamp(92px, 10vw, 150px) var(--page-pad) clamp(64px, 8vw, 110px);
}

.about-hero-copy {
  max-width: 860px;
}

.about-hero h1 {
  max-width: 10.6ch;
  margin: 0;
  font-family: "Jersey 15", "Space Mono", monospace;
  font-size: clamp(64px, 8.6vw, 124px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: none;
  text-shadow: 5px 5px 0 rgba(2, 8, 16, 0.44);
}

.about-hero-lead {
  margin: 26px 0 0;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 700;
}

.about-hero-text {
  max-width: 66ch;
  margin: 18px 0 0;
  color: var(--soft);
  font-size: clamp(16px, 1.22vw, 20px);
  line-height: 1.62;
}

.about-actions {
  margin-top: 34px;
}

.about-hero-console {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 38px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(460px circle at 30% 0%, rgba(121, 213, 223, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(31, 52, 76, 0.82), rgba(11, 25, 42, 0.94));
  box-shadow: var(--shadow);
}

.about-hero-console::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(159, 216, 244, 0.22);
  pointer-events: none;
}

.about-console-grid {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.about-console-grid div {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  min-height: 72px;
  padding: 14px;
  border: 2px solid rgba(159, 216, 244, 0.28);
  background: rgba(5, 14, 24, 0.34);
}

.about-console-grid span,
.about-card-number {
  color: var(--amber);
  font-family: "Press Start 2P", "Space Mono", monospace;
  font-size: 11px;
}

.about-console-grid strong {
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(14px, 1vw, 16px);
}

.about-overlap-zone {
  width: min(100% - 48px, 1440px);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 42px) 0 clamp(56px, 7vw, 100px);
  isolation: isolate;
}

.about-story-card {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 3.5vw, 54px);
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    linear-gradient(180deg, rgba(35, 56, 82, 0.86), rgba(12, 27, 45, 0.96));
  box-shadow: var(--shadow);
  transition:
    transform 420ms cubic-bezier(.2,.85,.2,1),
    opacity 260ms ease,
    filter 260ms ease,
    border-color 220ms ease,
    box-shadow 260ms ease;
}

.about-story-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(159, 216, 244, 0.18);
  pointer-events: none;
}

.about-story-card::after {
  content: "";
  position: absolute;
  left: clamp(28px, 3.5vw, 54px);
  right: clamp(28px, 3.5vw, 54px);
  bottom: 24px;
  height: 3px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.88), rgba(244, 199, 98, 0.78), transparent);
  opacity: 0.66;
  transform: scaleX(0.34);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.2,.85,.2,1), opacity 220ms ease;
}

.about-story-card:hover::after,
.about-story-card:focus-within::after {
  transform: scaleX(1);
  opacity: 1;
}

.about-story-card h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--ink);
  font-family: "Jersey 15", "Space Mono", monospace;
  font-size: clamp(39px, 4vw, 66px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: none;
  text-shadow: 4px 4px 0 rgba(2, 8, 16, 0.36);
}

.about-copy-stack {
  display: grid;
  gap: 18px;
  max-width: 82ch;
  margin-top: 24px;
  padding-bottom: 34px;
}

.about-copy-stack p {
  margin: 0;
  color: rgba(217, 231, 242, 0.88);
  font-family: "Space Mono", monospace;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.74;
}

@media (min-width: 1181px) {
  .about-story-card-who {
    z-index: 3;
    width: min(100%, 1050px);
    margin-left: 0;
    margin-right: auto;
  }

  .about-story-card-origin {
    z-index: 2;
    width: min(100%, 1050px);
    margin-top: clamp(-96px, -5vw, -70px);
    margin-left: auto;
    margin-right: 0;
    opacity: 0.94;
    transform: scale(0.985);
  }

  .about-overlap-zone:has(.about-story-card-who:hover) .about-story-card-who,
  .about-overlap-zone:has(.about-story-card-who:focus-within) .about-story-card-who {
    z-index: 8;
    transform: translateY(-8px) scale(1.014);
    border-color: rgba(244, 199, 98, 0.9);
    box-shadow: 12px 12px 0 rgba(2, 8, 16, 0.34), 0 0 34px rgba(244, 199, 98, 0.12);
  }

  .about-overlap-zone:has(.about-story-card-who:hover) .about-story-card-origin,
  .about-overlap-zone:has(.about-story-card-who:focus-within) .about-story-card-origin {
    z-index: 1;
    transform: translateX(34px) translateY(18px) scale(0.955);
    opacity: 0.72;
    filter: saturate(0.78) brightness(0.86);
  }

  .about-overlap-zone:has(.about-story-card-origin:hover) .about-story-card-origin,
  .about-overlap-zone:has(.about-story-card-origin:focus-within) .about-story-card-origin {
    z-index: 9;
    transform: translateY(-10px) scale(1.014);
    opacity: 1;
    border-color: rgba(244, 199, 98, 0.9);
    box-shadow: 12px 12px 0 rgba(2, 8, 16, 0.34), 0 0 34px rgba(121, 213, 223, 0.12);
  }

  .about-overlap-zone:has(.about-story-card-origin:hover) .about-story-card-who,
  .about-overlap-zone:has(.about-story-card-origin:focus-within) .about-story-card-who {
    z-index: 1;
    transform: translateX(-34px) translateY(18px) scale(0.955);
    opacity: 0.72;
    filter: saturate(0.78) brightness(0.86);
  }
}

.about-contact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  width: min(100% - 48px, 1420px);
  margin: 0 auto clamp(58px, 7vw, 98px);
}

.about-contact-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 150px;
  padding: 24px;
  border: 3px solid rgba(159, 216, 244, 0.78);
  background: rgba(22, 36, 55, 0.88);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.about-contact-card:hover,
.about-contact-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.86);
  outline: none;
}

.about-contact-card span:not(.about-contact-icon) {
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.about-contact-card strong {
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.about-contact-icon {
  position: relative;
  width: 26px;
  height: 26px;
  color: rgba(121, 213, 223, 0.95);
}

.about-icon-mail::before {
  content: "";
  position: absolute;
  inset: 4px 2px;
  border: 3px solid currentColor;
}
.about-icon-mail::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 14px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(-45deg);
}

.about-icon-phone::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 2px;
  width: 10px;
  height: 22px;
  border: 3px solid currentColor;
}
.about-icon-phone::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 5px;
  width: 2px;
  height: 2px;
  background: var(--amber);
  box-shadow: 0 -14px 0 rgba(121, 213, 223, 0.65);
}

.about-icon-clock::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 3px solid currentColor;
  border-radius: 50%;
}
.about-icon-clock::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-left: 3px solid var(--amber);
  border-bottom: 3px solid var(--amber);
}

.about-icon-map::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 16px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 12px 12px 12px 0;
  transform: rotate(-45deg);
}
.about-icon-map::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--amber);
}

.about-difference-section {
  width: min(100% - 48px, 1420px);
  margin: 0 auto clamp(52px, 7vw, 98px);
}

.about-difference-heading {
  max-width: 960px;
  margin-bottom: clamp(28px, 4vw, 54px);
}

.about-difference-heading h2 {
  max-width: 14ch;
  font-family: "Jersey 15", "Space Mono", monospace;
  font-size: clamp(52px, 5.6vw, 90px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: none;
  text-shadow: 4px 4px 0 rgba(2, 8, 16, 0.36);
}

.about-difference-heading p:not(.eyebrow) {
  max-width: 70ch;
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.65;
}

.about-difference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

.about-principle-card {
  position: relative;
  min-height: 270px;
  padding: clamp(22px, 2.3vw, 32px);
  border: 3px solid rgba(159, 216, 244, 0.78);
  background:
    linear-gradient(180deg, rgba(31, 50, 74, 0.82), rgba(18, 33, 52, 0.92));
  box-shadow: var(--shadow);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.about-principle-card:hover,
.about-principle-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.9);
  box-shadow: var(--shadow), 0 0 28px rgba(244, 199, 98, 0.08);
}

.about-principle-card h3 {
  margin: 34px 0 0;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(19px, 1.35vw, 25px);
  line-height: 1.16;
  text-transform: none;
}

.about-principle-card p {
  margin: 18px 0 0;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: 14px;
  line-height: 1.62;
}

.about-card-number {
  position: absolute;
  top: 24px;
  left: 24px;
}

.about-cta-band {
  align-items: center;
}

.about-cta-band p:not(.eyebrow) {
  max-width: 84ch;
}

@media (max-width: 1180px) {
  .about-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 96px;
  }

  .about-hero h1 {
    max-width: 11.8ch;
  }

  .about-hero-console {
    max-width: 760px;
  }

  .about-story-card,
  .about-story-card-origin,
  .about-story-card-who {
    width: 100%;
    margin: 0 0 22px !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .about-contact-strip,
  .about-difference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-principle-card {
    min-height: 230px;
  }
}

@media (max-width: 820px) {
  .about-hero,
  .about-overlap-zone,
  .about-contact-strip,
  .about-difference-section {
    width: min(100% - 28px, 1420px);
  }

  .about-hero {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 52px;
  }

  .about-hero h1 {
    font-size: clamp(54px, 17vw, 82px);
    max-width: 10.5ch;
  }

  .about-hero-text {
    font-size: 15px;
  }

  .about-story-card {
    padding: 26px 20px 54px;
  }

  .about-story-card h2 {
    max-width: none;
    font-size: clamp(36px, 11vw, 54px);
  }

  .about-copy-stack p {
    font-size: 14px;
    line-height: 1.68;
  }

  .about-contact-strip,
  .about-difference-grid {
    grid-template-columns: 1fr;
  }

  .about-difference-heading h2 {
    max-width: 12ch;
    font-size: clamp(46px, 14vw, 68px);
  }

  .about-cta-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .about-console-grid div {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .about-contact-card,
  .about-principle-card {
    min-height: 0;
  }
}


/* ===== V127 — About Us clean polish using existing project effects ===== */

/* Hero: standard centered intro, no right-side console. */
.about-hero {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: clamp(520px, 72vh, 700px) !important;
  padding: clamp(96px, 10vw, 142px) var(--page-pad) clamp(62px, 7vw, 96px) !important;
  text-align: center !important;
}

.about-hero-copy {
  max-width: min(100%, 980px) !important;
  margin: 0 auto !important;
}

.about-hero .eyebrow {
  justify-content: center;
}

.about-hero h1 {
  max-width: 11.6ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(64px, 7.2vw, 112px) !important;
  line-height: 0.88 !important;
}

.about-hero-lead {
  margin-top: 24px !important;
  font-size: clamp(16px, 1.2vw, 20px) !important;
}

.about-hero-text {
  max-width: 72ch !important;
  margin: 18px auto 0 !important;
  font-size: clamp(15px, 1.08vw, 18px) !important;
}

.about-actions,
.about-hero .wp-services-actions {
  justify-content: center !important;
  margin-top: 34px !important;
}

.about-hero .primary-action,
.about-hero .secondary-action {
  min-height: 52px;
}

/* Centered flip card. Hammer cursor/sparks come from existing .flow-step-card JS. */
.about-flip-zone {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1120px);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 42px) 0 clamp(58px, 7vw, 104px);
  perspective: 1800px;
}

.about-flip-hint {
  margin: 0 0 18px;
}

.about-flip-card {
  position: relative;
  min-height: clamp(455px, 42vw, 560px);
  width: 100%;
  cursor: none;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.about-flip-inner {
  position: relative;
  width: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.2,.85,.2,1);
}

.about-flip-card.is-flipped .about-flip-inner {
  transform: rotateY(180deg);
}

.about-flip-face {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  min-height: inherit;
  margin: 0 !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.about-flip-back {
  transform: rotateY(180deg);
}

.about-flip-face h2 {
  max-width: 17.5ch !important;
}

.about-flip-face .about-copy-stack {
  max-width: 86ch !important;
}

/* Use the existing lift idea for contact cards, without extra custom decorations. */
.about-contact-card {
  transform: translateY(0) scale(1);
  transition:
    transform 260ms cubic-bezier(.2,.85,.2,1),
    border-color 180ms ease,
    box-shadow 220ms ease,
    background 220ms ease !important;
}

.about-contact-card:hover,
.about-contact-card:focus-visible {
  transform: translateY(-10px) scale(1.025) !important;
  border-color: rgba(244, 199, 98, 0.96) !important;
  background:
    linear-gradient(180deg, rgba(35, 58, 83, 0.94), rgba(21, 39, 60, 0.96)) !important;
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.36),
    0 0 30px rgba(244, 199, 98, 0.10) !important;
}

/* Lower CTA: bring it back to the same framed-band standard. */
.about-cta-band {
  width: min(100% - 48px, 1420px) !important;
  margin: 0 auto clamp(48px, 6vw, 92px) !important;
  padding: clamp(28px, 3.4vw, 50px) !important;
  border: 3px solid rgba(159, 216, 244, 0.86) !important;
  background:
    radial-gradient(520px circle at 8% 0%, rgba(121, 213, 223, 0.11), transparent 64%),
    linear-gradient(180deg, rgba(31, 52, 76, 0.82), rgba(11, 25, 42, 0.96)) !important;
  box-shadow: var(--shadow) !important;
}

.about-cta-band h2 {
  font-family: "Space Mono", monospace !important;
  font-size: clamp(25px, 2vw, 36px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
}

.about-cta-band p:not(.eyebrow) {
  color: var(--soft) !important;
  font-family: "Space Mono", monospace !important;
  line-height: 1.6 !important;
}

/* Why We're Different: reuse All Services lid-card mechanics instead of custom fake bolts/leaks. */
.about-difference-grid {
  align-items: stretch;
}

.about-lid-card.service-lid-card {
  width: 100%;
  min-height: 290px;
}

.about-lid-card .lid-content h3 {
  text-transform: none;
}

.about-lid-card .lid-content p {
  max-width: 36em;
}

@media (max-width: 1180px) {
  .about-hero {
    min-height: 0 !important;
  }

  .about-flip-card,
  .about-flip-inner,
  .about-flip-face {
    min-height: 0 !important;
  }

  .about-flip-inner {
    transform: none !important;
    display: grid;
    gap: 22px;
  }

  .about-flip-card.is-flipped .about-flip-inner {
    transform: none !important;
  }

  .about-flip-face {
    position: relative !important;
    transform: none !important;
    backface-visibility: visible;
  }

  .about-flip-card {
    cursor: default;
  }

  .about-flip-hint {
    display: none;
  }
}

@media (max-width: 820px) {
  .about-hero {
    width: min(100% - 28px, 980px);
    margin: 0 auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .about-hero h1 {
    font-size: clamp(52px, 15vw, 78px) !important;
    max-width: 10.8ch !important;
  }

  .about-hero .wp-services-actions {
    align-items: stretch;
  }

  .about-hero .primary-action,
  .about-hero .secondary-action {
    width: 100%;
    justify-content: center;
  }

  .about-flip-zone,
  .about-cta-band {
    width: min(100% - 28px, 1220px) !important;
  }

  .about-contact-card:hover,
  .about-contact-card:focus-visible {
    transform: translateY(-4px) scale(1.01) !important;
  }
}


/* ===== V128 — About flip cleanup: no hint, no jitter, standard buttons ===== */

/* Buttons should use the same sizing as the rest of the site. */
.about-hero .primary-action,
.about-hero .secondary-action {
  min-height: 44px !important;
  padding: 11px 15px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

/* The flip card uses the existing index hammer cursor via .flow-step-card.
   Keep the moving part stable and prevent child hover effects from fighting the flip. */
.about-flip-card {
  cursor: none;
  transform: none !important;
  transition: none !important;
}

.about-flip-card:hover,
.about-flip-card:focus-visible,
.about-flip-card:focus-within {
  transform: none !important;
  outline: none;
}

.about-flip-face {
  pointer-events: none;
  transform-style: flat !important;
  transition: none !important;
}

.about-flip-back {
  transform: rotateY(180deg) !important;
}

.about-flip-face::before {
  opacity: 0 !important;
}

.about-flip-inner {
  will-change: transform;
  transition: transform 620ms cubic-bezier(.2,.85,.2,1) !important;
}

.about-flip-card.is-flipped .about-flip-inner {
  transform: rotateY(180deg) !important;
}

@media (max-width: 820px) {
  .about-hero .primary-action,
  .about-hero .secondary-action {
    min-height: 44px !important;
    padding: 11px 15px !important;
  }
}


/* ===== V129 — About buttons and flip-card spacing fix ===== */

/* Match the standard action button size used across the site. */
.about-hero .wp-services-actions {
  gap: 12px !important;
}

.about-hero .wp-services-actions .primary-action,
.about-hero .wp-services-actions .secondary-action,
.about-hero .wp-services-actions .cta-btn {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

/* Keep the flip animation stable: only the inner plane rotates. */
.about-flip-card.flow-step-card {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  overflow: visible !important;
}

.about-flip-card.flow-step-card:hover,
.about-flip-card.flow-step-card:focus,
.about-flip-card.flow-step-card:focus-visible,
.about-flip-card.flow-step-card:focus-within {
  transform: none !important;
  animation: none !important;
  outline: none !important;
}

/* The original Who we are text is longer, so the flip panel needs more room. */
.about-flip-card {
  min-height: clamp(660px, 54vw, 760px) !important;
}

.about-flip-face {
  overflow: hidden !important;
}

/* Add enough internal bottom space so the decorative line never crosses the text. */
.about-flip-face .about-copy-stack {
  padding-bottom: 74px !important;
}

.about-flip-face::after {
  bottom: 30px !important;
}

/* Keep the decorative line subtle inside the flip card. */
.about-flip-zone .about-story-card::after {
  pointer-events: none !important;
}

@media (max-width: 1180px) {
  .about-flip-card {
    min-height: 0 !important;
  }

  .about-flip-face {
    overflow: visible !important;
  }

  .about-flip-face .about-copy-stack {
    padding-bottom: 44px !important;
  }
}

@media (max-width: 820px) {
  .about-hero .wp-services-actions .primary-action,
  .about-hero .wp-services-actions .secondary-action,
  .about-hero .wp-services-actions .cta-btn {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 15px !important;
  }
}


/* ===== V130 — About lid cards use existing All Services auto-open behavior ===== */

/* Keep About grid layout, but allow the existing .wp-why-grid / .support-lid-grid JS to find it. */
.about-difference-grid.wp-why-grid.support-lid-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

/* Do not let any old principle-card rules interfere with the real lid-card states. */
.about-difference-grid .about-lid-card.service-lid-card.support-lid-card {
  position: relative;
  width: 100%;
  min-height: 290px;
}

/* Use the same revealed/open states as service/support pages; no separate about animation. */
.about-difference-grid .about-lid-card.is-sealed .lid-content {
  transform: translateY(-2px);
}

@media (max-width: 1180px) {
  .about-difference-grid.wp-why-grid.support-lid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .about-difference-grid.wp-why-grid.support-lid-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== V131 — About hero buttons match All Services hero buttons ===== */

/*
  All Services uses hero-actions + wp-services-actions together.
  About now uses the same sizing, overriding the previous compact 44px rule.
*/
.about-hero .hero-actions.wp-services-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 34px !important;
}

.about-hero .hero-actions.wp-services-actions a,
.about-hero .hero-actions.wp-services-actions .primary-action,
.about-hero .hero-actions.wp-services-actions .secondary-action,
.about-hero .hero-actions.wp-services-actions .cta-btn {
  min-width: 220px !important;
  width: auto !important;
  height: auto !important;
  min-height: 58px !important;
  padding: 15px 22px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.about-hero .hero-actions.wp-services-actions .cta-btn {
  padding-right: 48px !important;
}

@media (max-width: 820px) {
  .about-hero .hero-actions.wp-services-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .about-hero .hero-actions.wp-services-actions a,
  .about-hero .hero-actions.wp-services-actions .primary-action,
  .about-hero .hero-actions.wp-services-actions .secondary-action,
  .about-hero .hero-actions.wp-services-actions .cta-btn {
    width: 100% !important;
    max-width: 340px !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 15px 22px !important;
    font-size: 13px !important;
  }

  .about-hero .hero-actions.wp-services-actions .cta-btn {
    padding-right: 48px !important;
  }
}

/* ===== V133 — Contact Us page ===== */
.contact-page-main {
  position: relative;
  overflow: hidden;
}

.contact-hero {
  position: relative;
  width: min(100% - 48px, 1220px);
  margin: 0 auto;
  padding: clamp(76px, 9vw, 132px) 0 clamp(28px, 4vw, 42px);
  display: grid;
  justify-items: center;
  text-align: center;
}

.contact-hero-copy {
  display: grid;
  gap: 18px;
  max-width: 920px;
}

.contact-hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-shadow: 5px 5px 0 rgba(2, 8, 16, 0.48);
}

.contact-hero-lead {
  margin: 0;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.35;
}

.contact-hero-text {
  max-width: 820px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(16px, 1.32vw, 21px);
  line-height: 1.72;
}

.contact-hero .hero-actions.wp-services-actions {
  justify-content: center;
  margin-top: 8px;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  width: min(100% - 48px, 1280px);
  margin: 0 auto clamp(42px, 6vw, 72px);
}

.contact-info-grid .about-contact-card {
  min-height: 168px;
  background: linear-gradient(180deg, rgba(31, 51, 77, 0.92), rgba(13, 25, 40, 0.96));
}

.contact-info-grid .about-contact-card strong {
  font-size: clamp(16px, 1.05vw, 18px);
}

.contact-workbench {
  width: min(100% - 48px, 1280px);
  margin: 0 auto clamp(52px, 6vw, 86px);
}

.contact-workbench-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.88fr);
  gap: clamp(26px, 4vw, 56px);
  padding: clamp(28px, 4vw, 54px);
  border: 3px solid rgba(159, 216, 244, 0.82);
  background: linear-gradient(180deg, rgba(30, 49, 73, 0.82), rgba(12, 24, 39, 0.96));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.contact-workbench-card::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -22%;
  height: 48%;
  background: linear-gradient(90deg, transparent, rgba(121, 213, 223, 0.12), transparent);
  animation: contactWorkbenchFlow 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes contactWorkbenchFlow {
  0%, 100% {
    transform: translateX(-12%);
    opacity: 0.32;
  }
  50% {
    transform: translateX(12%);
    opacity: 0.68;
  }
}

.contact-workbench-copy,
.contact-form-panel {
  position: relative;
  z-index: 1;
}

.contact-workbench-copy {
  display: grid;
  align-content: start;
  gap: 16px;
}

.contact-workbench-copy h2 {
  margin: 0;
  max-width: 12ch;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(30px, 3.2vw, 54px);
  line-height: 1.04;
}

.contact-workbench-copy p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.68;
}

.contact-mini-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.contact-mini-flow article {
  min-height: 192px;
  padding: 20px;
  border: 3px solid rgba(159, 216, 244, 0.68);
  background: rgba(9, 20, 33, 0.52);
  box-shadow: 5px 5px 0 rgba(2, 8, 16, 0.26);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.contact-mini-flow article:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.86);
  background: rgba(17, 34, 54, 0.84);
}

.contact-mini-flow span {
  display: block;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 14px;
  font-weight: 700;
}

.contact-mini-flow h3 {
  margin: 16px 0 10px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.16;
}

.contact-mini-flow p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.52;
}

.contact-form-panel {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(22px, 2.6vw, 30px);
  border: 3px solid rgba(159, 216, 244, 0.78);
  background: rgba(8, 18, 30, 0.76);
  box-shadow: 6px 6px 0 rgba(2, 8, 16, 0.28);
}

.contact-form-eyebrow {
  margin: 0 0 4px;
  color: var(--amber);
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-form-panel label {
  display: grid;
  gap: 8px;
}

.contact-form-panel label > span {
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.contact-form-panel input,
.contact-form-panel textarea {
  width: 100%;
  border: 2px solid rgba(159, 216, 244, 0.64);
  background: rgba(17, 31, 49, 0.9);
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: 15px;
  line-height: 1.45;
  padding: 14px 14px;
  resize: vertical;
  box-shadow: inset 0 0 0 1px rgba(2, 8, 16, 0.18);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.contact-form-panel input:focus,
.contact-form-panel textarea:focus {
  outline: none;
  border-color: rgba(244, 199, 98, 0.88);
  box-shadow: 0 0 0 3px rgba(244, 199, 98, 0.12);
  background: rgba(22, 39, 60, 0.96);
}

.contact-form-actions {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.contact-form-panel .cta-btn {
  justify-self: start;
}

.contact-form-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.contact-form-note a {
  color: var(--ink);
  text-decoration: none;
}

.contact-form-note a:hover,
.contact-form-note a:focus-visible {
  color: var(--amber);
}

.contact-signal-strip {
  width: min(100% - 48px, 1280px);
  margin: 0 auto clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

.contact-signal-copy {
  display: grid;
  gap: 14px;
}

.contact-signal-copy h2 {
  margin: 0;
  max-width: 12ch;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(30px, 3vw, 50px);
  line-height: 1.04;
}

.contact-signal-copy p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.contact-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.contact-signal-grid article {
  min-height: 188px;
  padding: 22px;
  border: 3px solid rgba(159, 216, 244, 0.76);
  background: linear-gradient(180deg, rgba(31, 51, 77, 0.84), rgba(12, 24, 39, 0.94));
  box-shadow: var(--shadow);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.contact-signal-grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 199, 98, 0.86);
}

.contact-signal-grid strong {
  display: block;
  margin-bottom: 14px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.15;
}

.contact-signal-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.56;
}

.compact-page-cta-contact {
  margin-bottom: clamp(54px, 8vw, 96px);
}

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

  .contact-workbench-card,
  .contact-signal-strip {
    grid-template-columns: 1fr;
  }

  .contact-mini-flow,
  .contact-signal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .contact-hero,
  .contact-info-grid,
  .contact-workbench,
  .contact-signal-strip {
    width: min(100% - 28px, 1280px);
  }

  .contact-hero h1 {
    font-size: clamp(40px, 13vw, 74px);
  }

  .contact-workbench-card {
    padding: 24px;
  }

  .contact-mini-flow,
  .contact-signal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .contact-hero {
    padding-top: 62px;
    padding-bottom: 24px;
  }

  .contact-hero-copy {
    gap: 14px;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 34px;
  }

  .contact-workbench {
    margin-bottom: 40px;
  }

  .contact-workbench-card {
    gap: 20px;
    padding: 18px;
  }

  .contact-form-panel {
    padding: 18px;
  }

  .contact-signal-strip {
    margin-bottom: 44px;
  }
}


/* ===== V134 — Contact Us cleanup: closer to original WordPress structure ===== */

/* Contact page should be: title, contact cards, intro + form. */
.contact-hero {
  padding: clamp(76px, 9vw, 126px) 0 clamp(34px, 4vw, 54px) !important;
}

.contact-hero-copy {
  max-width: 820px !important;
}

.contact-hero h1 {
  font-size: clamp(58px, 8.5vw, 118px) !important;
  line-height: 0.9 !important;
}

.contact-hero-lead {
  max-width: 780px !important;
  margin: 0 auto !important;
}

.contact-hero-text {
  max-width: 850px !important;
}

/* Three WP-like contact cards plus optional availability card,
   kept compact and not too dominant. */
.contact-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1180px !important;
  margin-bottom: clamp(42px, 5vw, 66px) !important;
}

.contact-info-grid .about-contact-card:nth-child(4) {
  display: none !important;
}

.contact-info-grid .about-contact-card {
  min-height: 150px !important;
  padding: 22px !important;
}

.contact-info-grid .about-contact-card:hover,
.contact-info-grid .about-contact-card:focus-visible {
  transform: translateY(-5px) scale(1.01) !important;
}

/* Main content: left text + right form, without extra mini cards. */
.contact-workbench {
  max-width: 1180px !important;
  margin-bottom: clamp(64px, 8vw, 104px) !important;
}

.contact-workbench-card {
  grid-template-columns: minmax(0, 0.85fr) minmax(390px, 1fr) !important;
  gap: clamp(28px, 4vw, 64px) !important;
  padding: clamp(30px, 4vw, 58px) !important;
}

.contact-workbench-copy {
  align-content: center !important;
}

.contact-workbench-copy h2 {
  max-width: 13.5ch !important;
  font-size: clamp(36px, 4vw, 68px) !important;
  line-height: 0.95 !important;
  text-transform: none !important;
}

.contact-workbench-copy p:not(.eyebrow) {
  max-width: 62ch !important;
}

.contact-form-panel {
  gap: 15px !important;
  padding: clamp(22px, 2.6vw, 32px) !important;
}

.contact-form-panel input,
.contact-form-panel textarea {
  padding: 13px 14px !important;
}

.contact-form-panel textarea[name="Message"] {
  min-height: 190px !important;
}

.contact-form-panel .cta-btn {
  min-width: 180px !important;
  justify-self: start !important;
}

/* Defensive cleanup in case old blocks are cached in HTML. */
.contact-mini-flow,
.contact-signal-strip,
.compact-page-cta-contact,
.contact-hero .hero-actions {
  display: none !important;
}

@media (max-width: 1180px) {
  .contact-info-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-workbench-card {
    grid-template-columns: 1fr !important;
  }

  .contact-workbench-copy {
    align-content: start !important;
  }

  .contact-workbench-copy h2 {
    max-width: 16ch !important;
  }
}

@media (max-width: 720px) {
  .contact-hero h1 {
    font-size: clamp(52px, 18vw, 82px) !important;
  }

  .contact-workbench-card {
    padding: 18px !important;
  }

  .contact-workbench-copy h2 {
    font-size: clamp(34px, 12vw, 52px) !important;
  }

  .contact-form-panel .cta-btn {
    width: 100% !important;
  }
}


/* ===== V135 — Longer call / Telegram / WhatsApp labels ===== */
.about-contact-card span:not(.about-contact-icon) {
  line-height: 1.35;
}


/* ===== V136 — Contact form cleanup and page standardization ===== */

/* Keep Contact Us hero aligned with other pages, but not oversized. */
.contact-hero {
  padding: clamp(72px, 8vw, 118px) 0 clamp(34px, 4vw, 54px) !important;
}

.contact-hero h1 {
  font-family: "Space Mono", monospace !important;
  font-size: clamp(58px, 7.8vw, 108px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.035em !important;
}

.contact-hero-lead {
  font-size: clamp(18px, 1.9vw, 25px) !important;
  line-height: 1.35 !important;
}

.contact-hero-text {
  max-width: 850px !important;
  font-size: clamp(16px, 1.24vw, 20px) !important;
  line-height: 1.68 !important;
}

/* Main form block: prevent left text from visually entering the form area. */
.contact-workbench-card {
  grid-template-columns: minmax(0, 0.78fr) minmax(440px, 0.92fr) !important;
  gap: clamp(48px, 6vw, 86px) !important;
  align-items: start !important;
  overflow: hidden !important;
}

.contact-workbench-copy {
  min-width: 0 !important;
  max-width: 540px !important;
  align-content: start !important;
}

.contact-workbench-copy h2 {
  max-width: 10.5ch !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(42px, 4.7vw, 72px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.contact-workbench-copy p:not(.eyebrow) {
  max-width: 52ch !important;
  font-size: clamp(15px, 1.05vw, 17px) !important;
  line-height: 1.72 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.contact-form-panel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 590px !important;
  justify-self: end !important;
  gap: 14px !important;
  padding: clamp(22px, 2.4vw, 30px) !important;
}

.contact-form-eyebrow {
  color: var(--amber) !important;
  font-family: "Press Start 2P", "Space Mono", monospace !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.04em !important;
}

.contact-form-panel label {
  gap: 9px !important;
}

.contact-form-panel label > span {
  color: rgba(233, 244, 250, 0.92) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.contact-form-panel input,
.contact-form-panel textarea {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border: 2px solid rgba(159, 216, 244, 0.74) !important;
  background: rgba(13, 29, 48, 0.92) !important;
  color: var(--soft) !important;
  font-family: "Space Mono", monospace !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  padding: 13px 14px !important;
}

.contact-form-panel textarea[name="Message"] {
  min-height: 178px !important;
}

.contact-form-note {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.contact-form-note a {
  font-weight: 700 !important;
}

/* Defensive removal of old overfilled sections. */
.contact-mini-flow,
.contact-signal-strip,
.compact-page-cta-contact,
.contact-hero .hero-actions {
  display: none !important;
}

@media (max-width: 1180px) {
  .contact-workbench-card {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .contact-workbench-copy,
  .contact-form-panel {
    max-width: none !important;
    justify-self: stretch !important;
  }

  .contact-workbench-copy h2 {
    max-width: 13ch !important;
  }

  .contact-workbench-copy p:not(.eyebrow) {
    max-width: 72ch !important;
  }
}

@media (max-width: 720px) {
  .contact-hero h1 {
    font-size: clamp(52px, 16vw, 78px) !important;
  }

  .contact-workbench-card {
    padding: 18px !important;
  }

  .contact-workbench-copy h2 {
    font-size: clamp(38px, 11vw, 54px) !important;
    max-width: 11ch !important;
  }

  .contact-form-panel {
    padding: 18px !important;
  }
}


/* ===== V137 — Contact Us typography standardization ===== */

/* Contact hero now follows the same large pixel headline standard as About / service pages. */
.contact-page-main .contact-hero {
  width: min(100% - 48px, 1180px) !important;
  padding: clamp(86px, 9vw, 132px) 0 clamp(46px, 5vw, 72px) !important;
  text-align: center !important;
}

.contact-page-main .contact-hero-copy {
  max-width: 980px !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 18px !important;
  justify-items: center !important;
}

.contact-page-main .contact-hero .eyebrow {
  margin: 0 !important;
  justify-content: center !important;
}

.contact-page-main .contact-hero h1,
.contact-page-main #contact-hero-title {
  max-width: 10.8ch !important;
  margin: 0 auto !important;
  color: var(--ink) !important;
  font-family: "Jersey 15", "Space Mono", monospace !important;
  font-size: clamp(70px, 9.2vw, 132px) !important;
  font-weight: 400 !important;
  line-height: 0.84 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
  text-shadow: 5px 5px 0 rgba(2, 8, 16, 0.44) !important;
}

.contact-page-main .contact-hero-lead {
  max-width: 880px !important;
  margin: 12px auto 0 !important;
  color: var(--amber) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(18px, 1.55vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.contact-page-main .contact-hero-text {
  max-width: 900px !important;
  margin: 0 auto !important;
  color: var(--soft) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(16px, 1.14vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
  text-align: center !important;
}

/* Remove any leftover CTA buttons from the hero, per final layout. */
.contact-page-main .contact-hero .hero-actions,
.contact-page-main .contact-hero .wp-services-actions {
  display: none !important;
}

/* Contact cards: keep them compact and consistent under the standardized hero. */
.contact-page-main .contact-info-grid {
  width: min(100% - 48px, 1180px) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.6vw, 22px) !important;
  margin-bottom: clamp(44px, 5.4vw, 74px) !important;
}

.contact-page-main .contact-info-grid .about-contact-card {
  min-height: 148px !important;
}

/* Form section headline should not fight the hero or overlap the form. */
.contact-page-main .contact-workbench {
  width: min(100% - 48px, 1180px) !important;
}

.contact-page-main .contact-workbench-card {
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 0.92fr) !important;
  gap: clamp(42px, 5.4vw, 76px) !important;
  align-items: start !important;
}

.contact-page-main .contact-workbench-copy {
  max-width: 560px !important;
}

.contact-page-main .contact-workbench-copy h2,
.contact-page-main #contact-workbench-title {
  max-width: 11.5ch !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: "Jersey 15", "Space Mono", monospace !important;
  font-size: clamp(50px, 5.2vw, 82px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
  text-shadow: 4px 4px 0 rgba(2, 8, 16, 0.34) !important;
}

.contact-page-main .contact-workbench-copy p:not(.eyebrow) {
  max-width: 56ch !important;
  color: var(--soft) !important;
  font-family: "Space Mono", monospace !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.72 !important;
}

.contact-page-main .contact-form-panel {
  max-width: 590px !important;
  justify-self: end !important;
}

/* Defensive cleanup of previous experimental sections. */
.contact-page-main .contact-mini-flow,
.contact-page-main .contact-signal-strip,
.contact-page-main .compact-page-cta-contact {
  display: none !important;
}

@media (max-width: 1180px) {
  .contact-page-main .contact-workbench-card {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .contact-page-main .contact-workbench-copy,
  .contact-page-main .contact-form-panel {
    max-width: none !important;
    justify-self: stretch !important;
  }

  .contact-page-main .contact-workbench-copy h2,
  .contact-page-main #contact-workbench-title {
    max-width: 13ch !important;
  }
}

@media (max-width: 900px) {
  .contact-page-main .contact-hero,
  .contact-page-main .contact-info-grid,
  .contact-page-main .contact-workbench {
    width: min(100% - 28px, 1180px) !important;
  }

  .contact-page-main .contact-info-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .contact-page-main .contact-hero {
    padding-top: 62px !important;
  }

  .contact-page-main .contact-hero h1,
  .contact-page-main #contact-hero-title {
    font-size: clamp(58px, 18vw, 88px) !important;
    max-width: 9.5ch !important;
  }

  .contact-page-main .contact-hero-lead {
    font-size: 17px !important;
  }

  .contact-page-main .contact-hero-text {
    font-size: 15px !important;
  }

  .contact-page-main .contact-workbench-card {
    padding: 18px !important;
  }

  .contact-page-main .contact-workbench-copy h2,
  .contact-page-main #contact-workbench-title {
    font-size: clamp(42px, 13vw, 62px) !important;
  }
}


/* ===== V138 — About Us flip fix for tablet/mobile ===== */

/*
  On desktop the Who we are / Our story block stays as a 3D flip card.
  On tablet/mobile we must not keep rotateY/backface rules, otherwise the second
  side appears mirrored under the first one.
*/
@media (max-width: 1180px) {
  .about-flip-zone {
    perspective: none !important;
  }

  .about-flip-card,
  .about-flip-card.flow-step-card {
    min-height: 0 !important;
    cursor: pointer !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    overflow: visible !important;
  }

  .about-flip-inner,
  .about-flip-card.is-flipped .about-flip-inner {
    display: block !important;
    min-height: 0 !important;
    transform: none !important;
    transform-style: flat !important;
    transition: none !important;
    will-change: auto !important;
  }

  .about-flip-face,
  .about-flip-front,
  .about-flip-back {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  /* Default tablet/mobile state: show Who we are only. */
  .about-flip-back {
    display: none !important;
  }

  /* After hammer/card click or Read our story: show Our story only. */
  .about-flip-card.is-flipped .about-flip-front {
    display: none !important;
  }

  .about-flip-card.is-flipped .about-flip-back {
    display: block !important;
  }

  .about-flip-face .about-copy-stack {
    padding-bottom: 56px !important;
  }

  .about-flip-face::after {
    bottom: 26px !important;
  }
}

/* On small touch screens the hammer cursor is not useful; keep the block clean. */
@media (max-width: 820px) {
  .flow-hammer-cursor {
    display: none !important;
  }

  .about-flip-card,
  .about-flip-card.flow-step-card {
    cursor: pointer !important;
  }
}


/* ===== V139 — About Us: People Behind the Plumb ===== */
.about-crew-section {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1280px);
  margin: 0 auto clamp(46px, 6vw, 84px);
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

.about-crew-heading {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.about-crew-heading .eyebrow {
  justify-content: center;
}

.about-crew-heading h2 {
  max-width: 12ch;
  margin-left: auto;
  margin-right: auto;
}

.about-crew-heading p:not(.eyebrow) {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

.about-crew-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 24px);
}

.about-crew-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  min-height: 100%;
  padding: clamp(18px, 2vw, 24px);
  border: 3px solid rgba(159, 216, 244, 0.78);
  background:
    linear-gradient(180deg, rgba(31, 51, 77, 0.86), rgba(11, 24, 40, 0.96));
  box-shadow: 7px 7px 0 rgba(2, 8, 16, 0.28);
  overflow: hidden;
  transform: translateY(0) scale(1);
  transition:
    transform 240ms cubic-bezier(.2,.85,.2,1),
    border-color 180ms ease,
    box-shadow 240ms ease,
    background 220ms ease;
}

.about-crew-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(159, 216, 244, 0.18);
  pointer-events: none;
}

.about-crew-card::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 36%;
  bottom: 18px;
  height: 3px;
  background: linear-gradient(90deg, rgba(121, 213, 223, 0.92), rgba(244, 199, 98, 0.78), transparent);
  transform: scaleX(0.72);
  transform-origin: left;
  opacity: 0.7;
  transition: transform 240ms ease, opacity 180ms ease;
  pointer-events: none;
}

.about-crew-card:hover,
.about-crew-card:focus-visible,
.about-crew-card:focus-within {
  transform: translateY(-10px) scale(1.035);
  border-color: rgba(244, 199, 98, 0.96);
  background:
    linear-gradient(180deg, rgba(35, 58, 83, 0.94), rgba(15, 30, 48, 0.98));
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 30px rgba(244, 199, 98, 0.10);
  outline: none;
}

.about-crew-card:hover::after,
.about-crew-card:focus-visible::after,
.about-crew-card:focus-within::after {
  transform: scaleX(1);
  opacity: 1;
}

.about-crew-screen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
  border: 2px solid rgba(159, 216, 244, 0.45);
  background:
    radial-gradient(circle at 50% 42%, rgba(121, 213, 223, 0.12), transparent 56%),
    linear-gradient(180deg, rgba(6, 17, 30, 0.95), rgba(4, 13, 24, 0.98));
  box-shadow: inset 0 0 0 1px rgba(2, 8, 16, 0.42);
  overflow: hidden;
}

.about-crew-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 5px
    );
  opacity: 0.35;
  pointer-events: none;
}

.about-crew-sprite {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(138px, 11vw, 178px);
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 600% 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 0 rgba(0, 0, 0, 0.18));
}

.about-crew-raman { background-image: url("./assets/raman-sprite.png"); }
.about-crew-serge { background-image: url("./assets/serge-sprite.png"); }
.about-crew-yagor { background-image: url("./assets/yagor-sprite.png"); }

.about-crew-card:hover .about-crew-sprite,
.about-crew-card:focus-visible .about-crew-sprite,
.about-crew-card:focus-within .about-crew-sprite {
  animation: aboutCrewSprite6 720ms steps(5, end) infinite;
}

@keyframes aboutCrewSprite6 {
  to { background-position: 100% 0; }
}

.about-crew-copy {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-bottom: 18px;
}

.about-crew-status,
.about-crew-role {
  margin: 0;
  font-family: "Press Start 2P", "Space Mono", monospace;
  font-size: 9px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.about-crew-status {
  color: var(--amber);
}

.about-crew-role {
  color: rgba(121, 213, 223, 0.96);
}

.about-crew-copy h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-shadow: 3px 3px 0 rgba(2, 8, 16, 0.35);
}

.about-crew-copy p:not(.about-crew-status):not(.about-crew-role) {
  margin: 0;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.62;
}

.about-crew-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.about-crew-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(159, 216, 244, 0.5);
  color: rgba(233, 244, 250, 0.84);
  background: rgba(7, 18, 30, 0.44);
  font-family: "Press Start 2P", "Space Mono", monospace;
  font-size: 8px;
  line-height: 1.35;
  text-transform: uppercase;
}

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

@media (max-width: 820px) {
  .about-crew-section {
    width: min(100% - 28px, 1280px);
    margin-bottom: 42px;
  }

  .about-crew-heading {
    text-align: left;
  }

  .about-crew-heading .eyebrow {
    justify-content: flex-start;
  }

  .about-crew-heading h2,
  .about-crew-heading p:not(.eyebrow) {
    margin-left: 0;
    margin-right: 0;
  }

  .about-crew-grid {
    grid-template-columns: 1fr;
  }

  .about-crew-card:hover,
  .about-crew-card:focus-visible,
  .about-crew-card:focus-within {
    transform: translateY(-4px) scale(1.01);
  }

  .about-crew-screen {
    min-height: 184px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-crew-card:hover .about-crew-sprite,
  .about-crew-card:focus-visible .about-crew-sprite,
  .about-crew-card:focus-within .about-crew-sprite {
    animation: none;
  }
}


/* ===== V140 — People Behind the Plumb: random frozen frame on hover ===== */

/* Old continuous sprite animation is disabled. JS now selects one random frame per hover. */
.people-card .people-portrait,
.team-card .team-portrait,
.crew-card .crew-portrait,
.about-people-card .about-people-portrait,
.people-behind-card .people-behind-portrait,
.plumb-person-card .plumb-person-portrait {
  animation: none !important;
}

/* These generic selectors cover the current portrait implementation in the About page. */
[class*="portrait-sprite"],
[class*="team-portrait"],
[class*="crew-portrait"],
[class*="people-portrait"],
[class*="plumb-portrait"] {
  animation: none !important;
  background-position: calc(var(--portrait-frame, 0) * -100%) 0 !important;
  image-rendering: pixelated;
}

/* Card still gets the hover emphasis, but face animation no longer loops through all frames. */
.people-card:hover,
.team-card:hover,
.crew-card:hover,
.about-people-card:hover,
.people-behind-card:hover,
.plumb-person-card:hover {
  transform: translateY(-8px) scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  [class*="portrait-sprite"],
  [class*="team-portrait"],
  [class*="crew-portrait"],
  [class*="people-portrait"],
  [class*="plumb-portrait"] {
    transition: none !important;
    animation: none !important;
  }
}


/* ===== V141 — Real random frozen frame for About crew portraits ===== */

/*
  Previous fix missed the actual selectors:
  .about-crew-card / .about-crew-sprite.
  This overrides the old V139 hover keyframe animation directly.
*/
.about-crew-card:hover .about-crew-sprite,
.about-crew-card:focus-visible .about-crew-sprite,
.about-crew-card:focus-within .about-crew-sprite,
.about-crew-sprite {
  animation: none !important;
  animation-name: none !important;
}

/*
  Sprite sheet has 6 frames and background-size: 600% 100%.
  Correct static positions are:
  frame 0 = 0%, frame 1 = 20%, frame 2 = 40%, frame 3 = 60%, frame 4 = 80%, frame 5 = 100%.
*/
.about-crew-sprite {
  --crew-frame: 0;
  background-position: calc(var(--crew-frame) * 20%) 0 !important;
  background-size: 600% 100% !important;
  image-rendering: pixelated !important;
}

.about-crew-card:hover,
.about-crew-card:focus-visible,
.about-crew-card:focus-within {
  transform: translateY(-8px) scale(1.035) !important;
}


/* ===== V142 — About crew cards: remove skill tags spacing ===== */
.about-crew-tags {
  display: none !important;
}

.about-crew-copy {
  padding-bottom: 28px !important;
}


/* ===== V143 — About crew cards: no sticky mouse-click focus ===== */

/*
  Clicking a card gives it focus, and older rules used :focus-within,
  so the card could stay visually active after mouse interaction.
  Hover stays active, keyboard focus-visible stays accessible, but mouse click
  focus no longer leaves the card highlighted.
*/
.about-crew-card:focus-within:not(:hover):not(:focus-visible) {
  transform: translateY(0) scale(1) !important;
  border-color: rgba(159, 216, 244, 0.78) !important;
  box-shadow: 7px 7px 0 rgba(2, 8, 16, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(31, 51, 77, 0.86), rgba(11, 24, 40, 0.96)) !important;
}

.about-crew-card:focus-within:not(:hover):not(:focus-visible) .about-crew-sprite {
  animation: none !important;
  background-position: 0 0 !important;
}

/* Keep intentional states explicit. */
.about-crew-card:hover,
.about-crew-card:focus-visible {
  transform: translateY(-8px) scale(1.035) !important;
}


/* ===== V144 — Contact Us desktop mini game ===== */
.contact-game-section {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  width: min(100% - 48px, 1180px);
  margin: 0 auto clamp(64px, 8vw, 110px);
}

.contact-game-intro {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  display: grid;
  gap: 14px;
}

.contact-game-intro .eyebrow {
  justify-content: center;
}

.contact-game-intro h2 {
  max-width: 12ch;
  margin: 0 auto;
  color: var(--ink);
  font-family: "Jersey 15", "Space Mono", monospace;
  font-size: clamp(54px, 6.4vw, 96px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-shadow: 5px 5px 0 rgba(2, 8, 16, 0.42);
}

.contact-game-intro p:not(.eyebrow) {
  margin: 0 auto;
  max-width: 78ch;
  color: var(--soft);
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.72;
}

.contact-game-shell {
  display: flex;
  justify-content: center;
}

.contact-game-panel {
  width: 720px;
  max-width: 100%;
  padding: 22px;
  border: 3px solid rgba(159, 216, 244, 0.88);
  background:
    radial-gradient(760px circle at 20% 12%, rgba(121, 213, 223, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(30, 49, 73, 0.86), rgba(8, 18, 31, 0.96));
  box-shadow: 10px 10px 0 rgba(2, 8, 16, 0.32);
}

.contact-game-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.contact-game-stat,
.contact-game-lives {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 2px solid rgba(159, 216, 244, 0.64);
  background: rgba(7, 16, 27, 0.66);
  box-shadow: 4px 4px 0 rgba(2, 8, 16, 0.24);
}

.contact-game-mode {
  justify-self: end;
}

.contact-game-stat span,
.contact-game-stat em {
  color: var(--muted);
  font-family: "Press Start 2P", "Space Mono", monospace;
  font-size: 8px;
  line-height: 1;
  font-style: normal;
  text-transform: uppercase;
}

.contact-game-stat strong {
  color: var(--amber);
  font-family: "Press Start 2P", "Space Mono", monospace;
  font-size: 14px;
  line-height: 1;
}

.contact-game-heart {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  transition: opacity 120ms steps(3, end), filter 120ms steps(3, end), transform 120ms steps(3, end);
}

.contact-game-heart.is-empty {
  opacity: 0.28;
  filter: grayscale(1) contrast(0.8);
  transform: translateY(2px);
}

.contact-game-stage {
  position: relative;
  width: 640px;
  height: 420px;
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid rgba(159, 216, 244, 0.74);
  background:
    radial-gradient(560px circle at 50% 42%, rgba(121, 213, 223, 0.08), transparent 66%),
    linear-gradient(180deg, rgba(8, 19, 32, 0.92), rgba(4, 11, 20, 0.98));
  box-shadow:
    inset 0 0 0 2px rgba(2, 8, 16, 0.32),
    8px 8px 0 rgba(2, 8, 16, 0.28);
  outline: none;
  image-rendering: pixelated;
}

.contact-game-stage:focus-visible {
  border-color: rgba(244, 199, 98, 0.94);
}

.contact-game-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(159,216,244,0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(159,216,244,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.38;
  pointer-events: none;
}

.contact-game-pipes-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.contact-game-player {
  position: absolute;
  z-index: 4;
  left: 248px;
  top: 225px;
  width: 144px;
  height: 144px;
  background-image: url("./assets/game/webplumber-sprite-clean.png");
  background-repeat: no-repeat;
  background-size: 400% 100%;
  background-position: 0 0;
  image-rendering: pixelated;
  filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.28));
  transform-origin: 50% 80%;
  transition: left 90ms steps(4, end), top 90ms steps(4, end), transform 90ms steps(4, end);
}

.contact-game-player.is-high { background-position: 33.333% 0; top: 126px; }
.contact-game-player.is-win { background-position: 66.666% 0; top: 210px; transform: scaleX(1); }
.contact-game-player.is-lose { background-position: 100% 0; top: 218px; transform: scaleX(1); }
.contact-game-player.is-facing-right { transform: scaleX(1); }
.contact-game-player.is-facing-left { transform: scaleX(-1); }
.contact-game-player.is-high.is-facing-left { transform: scaleX(-1); }
.contact-game-player.is-low.is-facing-left { transform: scaleX(-1); }

.contact-game-object {
  position: absolute;
  z-index: 3;
  image-rendering: pixelated;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.24));
}

.contact-game-object.type-email { width: 54px; }
.contact-game-object.type-bug { width: 46px; }
.contact-game-object.type-critical { width: 72px; }
.contact-game-object.type-bomb { width: 46px; }

.contact-game-message {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: min(420px, calc(100% - 48px));
  transform: translate(-50%, -50%);
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 18px 20px;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background: rgba(8, 18, 30, 0.88);
  box-shadow: 7px 7px 0 rgba(2, 8, 16, 0.32);
  text-align: center;
}

.contact-game-message.is-hidden {
  display: none;
}

.contact-game-message strong {
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: 24px;
  line-height: 1.1;
}

.contact-game-message span {
  color: var(--soft);
  font-size: 14px;
  line-height: 1.45;
}

.contact-game-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.contact-game-actions p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}

.contact-game-start {
  flex: 0 0 auto;
}

@media (max-width: 1024px) {
  .contact-game-section {
    display: none !important;
  }
}


/* ===== V145 — Contact mini-game: fixed player, sprite-sheet items, slower spawns, feedback ===== */
.contact-game-intro h2 {
  max-width: 13ch !important;
}

.contact-game-object,
.contact-game-heart {
  background-image: url("./assets/game/game-items-sprite-clean.png") !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated !important;
}

.contact-game-object {
  transform: translate(-50%, -50%) rotate(var(--item-rot, 0deg));
  transform-origin: 50% 50%;
  will-change: left, top, transform;
}

.contact-game-heart {
  display: inline-block;
  flex: 0 0 auto;
  object-fit: initial !important;
}

.contact-game-object.type-email { width: 54px !important; height: 38px !important; background-size: 402px 100px !important; background-position: -13px -39px !important; }
.contact-game-object.type-bug { width: 58px !important; height: 45px !important; background-size: 383px 96px !important; background-position: -82px -32px !important; }
.contact-game-object.type-critical { width: 92px !important; height: 53px !important; background-size: 363px 91px !important; background-position: -148px -22px !important; }
.contact-game-object.type-bomb { width: 44px !important; height: 57px !important; background-size: 525px 131px !important; background-position: -366px -44px !important; }
.contact-game-heart { width: 28px !important; height: 22px !important; background-size: 298px 74px !important; background-position: -256px -33px !important; }

.contact-game-player {
  left: 248px !important;
  top: 210px !important;
  width: 144px !important;
  height: 144px !important;
  --player-face: 1;
  --player-scale: 1;
  background-image: url("./assets/game/webplumber-sprite-clean.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 100% !important;
  background-position: 0 0;
  transform: scaleX(var(--player-face)) scale(var(--player-scale)) !important;
  transition: transform 120ms steps(4, end), filter 120ms steps(4, end) !important;
}

.contact-game-player.is-low { background-position: 0 0 !important; }
.contact-game-player.is-high { background-position: 33.333% 0 !important; top: 210px !important; }
.contact-game-player.is-win { background-position: 66.666% 0 !important; top: 210px !important; --player-face: 1; }
.contact-game-player.is-lose { background-position: 100% 0 !important; top: 210px !important; --player-face: 1; }
.contact-game-player.is-facing-right { --player-face: 1; }
.contact-game-player.is-facing-left { --player-face: -1; }
.contact-game-player.is-pop { --player-scale: 1.075; }
.contact-game-player.is-good-flash {
  filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.28)) drop-shadow(0 0 12px rgba(126, 255, 128, 0.72)) saturate(1.35) !important;
}
.contact-game-player.is-bad-flash {
  animation: contactPlayerBadFlash 420ms steps(2, end) 1;
}

@keyframes contactPlayerBadFlash {
  0%, 100% { filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.28)); }
  15%, 45%, 75% { filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.28)) drop-shadow(0 0 14px rgba(255, 54, 54, 0.92)) saturate(1.7); opacity: 0.78; }
  30%, 60%, 90% { filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.28)); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-game-player.is-bad-flash { animation: none !important; }
}


/* ===== V146 — Contact game UI tuning + 30 point target ===== */

/* Controls label should not shout louder than the rest of the topbar. */
.contact-game-mode {
  justify-content: flex-start !important;
  gap: 8px !important;
}

.contact-game-mode strong {
  color: var(--soft) !important;
  font-family: "Press Start 2P", "Space Mono", monospace !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

/* Keep score compact and visually balanced. */
.contact-game-stat strong[data-game-score],
.contact-game-stat [data-game-score] {
  min-width: 18px;
  text-align: right;
}

/* Game start/restart button should be a clean action, without the loading pips. */
.contact-game-start .btn-pips {
  display: none !important;
}

.contact-game-start {
  min-width: 136px !important;
  justify-content: center !important;
}

.contact-game-actions {
  align-items: center !important;
}

.contact-game-actions p {
  max-width: 470px !important;
}

/* Slightly calmer control panel at desktop size. */
.contact-game-topbar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
}

@media (max-width: 1180px) {
  .contact-game-mode strong {
    font-size: 8px !important;
  }
}


/* ===== V148 — Contact game: bomb warning pulse ===== */

.contact-game-object.type-bomb {
  animation: contactBombPulse 520ms steps(4, end) infinite !important;
  filter:
    drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.24))
    drop-shadow(0 0 6px rgba(255, 44, 44, 0.55)) !important;
}

@keyframes contactBombPulse {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(var(--item-rot, 0deg)) scale(1);
    filter:
      drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.24))
      drop-shadow(0 0 4px rgba(255, 44, 44, 0.35))
      saturate(1);
  }

  50% {
    transform: translate(-50%, -50%) rotate(var(--item-rot, 0deg)) scale(1.14);
    filter:
      drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.24))
      drop-shadow(0 0 13px rgba(255, 44, 44, 0.95))
      saturate(1.65)
      brightness(1.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-game-object.type-bomb {
    animation: none !important;
  }
}


/* ===== V151 — Contact game: reliable successful catch flash ===== */

/*
  Good flash sometimes looked like it did not fire because the class was removed
  too quickly or overwritten by pose changes. This animation makes the feedback
  visible and self-contained every time the class is applied.
*/
.contact-game-player.is-good-flash {
  animation: contactPlayerGoodFlash 260ms steps(4, end) 1 !important;
  filter:
    drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 14px rgba(126, 255, 128, 0.92))
    saturate(1.45)
    brightness(1.08) !important;
}

.contact-game-player.is-good-flash.is-pop {
  --player-scale: 1.105;
}

@keyframes contactPlayerGoodFlash {
  0% {
    filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.28));
  }
  35%, 70% {
    filter:
      drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.28))
      drop-shadow(0 0 16px rgba(126, 255, 128, 1))
      saturate(1.55)
      brightness(1.12);
  }
  100% {
    filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.28));
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-game-player.is-good-flash {
    animation: none !important;
  }
}


/* ===== V152 — Index dynamic task review, plunger chip break, random case polish ===== */

.flow-card-large {
  overflow: hidden;
}

.flow-card-large.is-task-changing h2,
.flow-card-large.is-task-changing p {
  animation: indexTaskTextPop 360ms steps(5, end);
}

@keyframes indexTaskTextPop {
  0% { opacity: 0; transform: translateY(8px); filter: blur(1px); }
  38% { opacity: 1; transform: translateY(-2px); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.flow-meter span {
  width: 0;
  animation: indexTaskMeterFill 5.4s linear infinite !important;
}

.flow-meter span.is-resetting {
  animation: none !important;
  width: 0 !important;
}

@keyframes indexTaskMeterFill {
  from { width: 0%; }
  to { width: 100%; }
}

.proof-chips span.is-chip-breaking,
.proof-floating-chip.is-chip-breaking {
  animation: proofChipBreak 360ms steps(6, end) forwards !important;
  pointer-events: none !important;
}

.proof-chips span.is-new-chip {
  animation: proofChipNew 380ms steps(6, end) both;
}

.proof-chip-fragment {
  position: absolute;
  left: var(--frag-x, 0px);
  top: var(--frag-y, 0px);
  width: 7px;
  height: 7px;
  background: rgba(244, 199, 98, 0.92);
  border: 1px solid rgba(7, 17, 28, 0.72);
  z-index: 20;
  pointer-events: none;
  animation: proofChipFragment 430ms ease-out forwards;
  transform: translate(-50%, -50%);
}

.proof-chip-fragment:nth-child(odd) {
  background: rgba(121, 213, 223, 0.92);
}

@keyframes proofChipBreak {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  35% {
    opacity: 1;
    transform: translateY(-2px) scale(1.06) rotate(-1deg);
    filter: brightness(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.72) rotate(4deg);
    filter: brightness(0.65);
  }
}

@keyframes proofChipNew {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.78);
    border-color: rgba(244, 199, 98, 0.9);
  }
  65% {
    opacity: 1;
    transform: translateY(2px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes proofChipFragment {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(var(--frag-dx, 20px), var(--frag-dy, -22px))
      rotate(var(--frag-rot, 90deg))
      scale(0.2);
  }
}

.case-grid[data-random-case-grid] > .case-snapshot-card {
  transition:
    opacity 220ms ease,
    transform 220ms steps(4, end),
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.case-grid[data-random-case-grid].is-randomizing > .case-snapshot-card {
  opacity: 0;
  transform: translateY(8px);
}

.case-grid[data-random-case-grid] > .case-snapshot-card.is-random-case-in {
  animation: randomCaseIn 420ms steps(6, end) both;
}

@keyframes randomCaseIn {
  0% { opacity: 0; transform: translateY(12px); }
  60% { opacity: 1; transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-meter span,
  .flow-card-large.is-task-changing h2,
  .flow-card-large.is-task-changing p,
  .proof-chips span.is-chip-breaking,
  .proof-floating-chip.is-chip-breaking,
  .proof-chips span.is-new-chip,
  .proof-chip-fragment,
  .case-grid[data-random-case-grid] > .case-snapshot-card.is-random-case-in {
    animation: none !important;
  }
}


/* ===== V153 — Plunger chips: destroy only when dragged outside, stable rows, random chips ===== */

.proof-chips {
  width: 100%;
  max-width: 100%;
  contain: layout paint;
  overflow: visible;
}

.proof-stack {
  overflow: visible;
}

.proof-chip-fragment {
  z-index: 40 !important;
  box-shadow: 0 0 8px rgba(244, 199, 98, 0.34);
}

/* Prevent the narrow Platforms row from stretching/jumping when a chip breaks. */
.proof-chips span.is-chip-breaking {
  position: relative;
  max-width: max-content;
}

.proof-chips span.is-new-chip {
  flex: 0 1 auto;
}

/* Keep the floating chip on top while suctioned, then let it break at the plunger cursor point. */
.proof-chips > .proof-floating-chip.is-chip-breaking {
  animation: proofChipBreak 320ms steps(6, end) forwards !important;
}

/* Restore the original feeling: the plunger visually engages when it is holding a chip. */
.proof-plunger.is-engaged .proof-plunger-shaft {
  height: 27px;
  top: 10px;
}

.proof-plunger.is-engaged .proof-plunger-cup {
  transform: translateY(2px) scaleX(1.08);
  filter: saturate(1.08);
}


/* ===== V154 — Plunger above cards/frames, no chip explosion ===== */

/* Keep the plunger and dragged chip above proof rows, cards, borders and nearby sections. */
.proof-stack,
.proof-stack p,
.proof-chips {
  position: relative;
  z-index: 20;
  overflow: visible !important;
}

.proof-plunger {
  z-index: 999 !important;
}

.proof-chips > .proof-floating-chip {
  z-index: 998 !important;
}

/* Explosion fragments are no longer needed. */
.proof-chip-fragment {
  display: none !important;
}


/* ===== V155 — Plunger full visibility fix ===== */

/*
  V153 used contain: layout paint on .proof-chips to stabilize the row,
  but paint containment clips anything that visually leaves the chip row.
  That is why only the plunger cup was visible above the chip.
*/
.proof-chips {
  contain: none !important;
  overflow: visible !important;
  isolation: isolate;
}

.proof-stack,
.proof-stack p,
.proof-chips,
.hero-dynamic,
.flow-card,
.flow-card-large {
  overflow: visible !important;
}

/* Keep the chip rows stable without paint containment. */
.proof-stack p {
  max-width: 100%;
}

.proof-chips {
  min-width: 0;
  max-width: 100%;
}

/* Put the plunger and floating chip clearly above row borders and surrounding panels. */
.proof-plunger {
  z-index: 9999 !important;
  overflow: visible !important;
}

.proof-chips > .proof-floating-chip {
  z-index: 9998 !important;
}

/* Make sure the plunger itself is not visually cropped by its own box. */
.proof-plunger,
.proof-plunger * {
  overflow: visible !important;
}


/* ===== V158 — Index reviewing card: clipped shine + hover lift ===== */

/*
  The animated shine/progress effect around the Now Reviewing card could visually
  escape the card borders. Keep all internal effects clipped inside the frame.
*/
.hero-dynamic .flow-card-large,
.hero-dynamic .flow-card-large.active {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform-origin: center center !important;
  transition:
    transform 180ms steps(4, end),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease !important;
}

/* Make sure any pseudo glow/shimmer from older rules cannot leave the card. */
.hero-dynamic .flow-card-large::before,
.hero-dynamic .flow-card-large::after {
  max-width: 100% !important;
  pointer-events: none !important;
}

/* The meter is also clipped, including the filling bar. */
.hero-dynamic .flow-card-large .flow-meter {
  position: relative !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

.hero-dynamic .flow-card-large .flow-meter span {
  display: block !important;
  max-width: 100% !important;
  transform-origin: left center !important;
}

/* Hover effect: subtle, like the rest of the site cards. */
.hero-dynamic .flow-card-large:hover,
.hero-dynamic .flow-card-large:focus-within {
  transform: translateY(-4px) scale(1.012) !important;
  border-color: rgba(244, 199, 98, 0.92) !important;
  box-shadow:
    10px 10px 0 rgba(2, 8, 16, 0.34),
    0 0 26px rgba(244, 199, 98, 0.08) !important;
}

.hero-dynamic .flow-card-large:hover .flow-meter,
.hero-dynamic .flow-card-large:focus-within .flow-meter {
  border-color: rgba(244, 199, 98, 0.54) !important;
}

/* Keep the card's text readable during hover. */
.hero-dynamic .flow-card-large:hover h2,
.hero-dynamic .flow-card-large:focus-within h2 {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-dynamic .flow-card-large,
  .hero-dynamic .flow-card-large:hover,
  .hero-dynamic .flow-card-large:focus-within {
    transition: none !important;
    transform: none !important;
  }
}


/* ===== V160 — Tablet header compact fix, without changing layout ===== */

/*
  V159 tried to rebuild the header with grid areas and broke the logo/nav order.
  This version keeps the original header structure and only compacts it on tablet.
*/
@media (min-width: 981px) and (max-width: 1240px) {
  .site-header {
    min-height: 88px !important;
    overflow: visible !important;
  }

  .header-shell {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: clamp(10px, 1.4vw, 18px) !important;
    min-height: 88px !important;
    padding-inline: clamp(16px, 2.2vw, 28px) !important;
  }

  .brand {
    width: clamp(122px, 13vw, 150px) !important;
  }

  .nav {
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(5px, 0.7vw, 8px) !important;
    min-width: 0 !important;
  }

  .nav > a,
  .nav-dropdown-toggle {
    min-height: 40px !important;
    padding: 9px clamp(9px, 1vw, 13px) !important;
    font-size: clamp(10px, 0.78vw, 11px) !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
  }

  .header-meta {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .header-phone {
    min-width: clamp(170px, 17vw, 210px) !important;
    min-height: 40px !important;
    padding: 9px clamp(10px, 1.1vw, 14px) !important;
    font-size: clamp(10px, 0.78vw, 11px) !important;
    white-space: nowrap !important;
  }
}

/* At narrow tablets, switch to burger a bit earlier before the desktop nav collides. */
@media (min-width: 821px) and (max-width: 980px) {
  :root {
    --header-height: 84px;
  }

  .site-header {
    min-height: var(--header-height) !important;
  }

  .header-shell {
    min-height: var(--header-height) !important;
  }

  .brand {
    width: 150px !important;
  }
}


/* ===== V161 — Dropdown typography hierarchy ===== */

/*
  Main nav stays the primary level.
  Dropdown items are slightly quieter but keep the same pixel/terminal language.
*/
.dropdown-panel a {
  font-family: "Space Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  padding: 11px 14px !important;
}

/* Keep the desktop nav one level stronger than dropdown links. */
.nav > a,
.nav-dropdown-toggle {
  font-size: 12px;
}

/* On compact tablet widths, dropdown follows the already-smaller nav scale. */
@media (min-width: 981px) and (max-width: 1240px) {
  .dropdown-panel a {
    font-size: 10px !important;
    line-height: 1.25 !important;
    padding: 10px 12px !important;
  }
}


/* ===== V162 — Dropdown compact polish ===== */

.dropdown-panel {
  min-width: 270px !important;
  padding: 10px !important;
  background: rgba(18, 33, 52, 0.98) !important;
  box-shadow: 6px 6px 0 rgba(2, 8, 16, 0.36) !important;
}

.dropdown-panel a {
  padding: 9px 12px !important;
  min-height: 38px !important;
}

/* Keep dropdown compact on tablet too. */
@media (min-width: 981px) and (max-width: 1240px) {
  .dropdown-panel {
    min-width: 250px !important;
    padding: 9px !important;
  }

  .dropdown-panel a {
    padding: 8px 10px !important;
    min-height: 36px !important;
  }
}


/* ===== V163 — Privacy Policy page ===== */

.privacy-page-main {
  position: relative;
  z-index: 1;
}

.privacy-hero {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: clamp(82px, 8vw, 124px) 0 clamp(34px, 4vw, 54px);
  text-align: center;
}

.privacy-hero .eyebrow {
  justify-content: center;
  margin-bottom: 16px;
}

.privacy-hero h1 {
  max-width: 10ch;
  margin: 0 auto;
  color: var(--ink);
  font-family: "Jersey 15", "Space Mono", monospace;
  font-size: clamp(70px, 9vw, 132px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-shadow: 5px 5px 0 rgba(2, 8, 16, 0.44);
}

.privacy-hero-lead {
  max-width: 760px;
  margin: 24px auto 0;
  color: var(--soft);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
}

.privacy-policy-section {
  width: min(100% - 48px, 1060px);
  margin: 0 auto clamp(70px, 8vw, 118px);
}

.privacy-policy-card {
  border: 3px solid rgba(159, 216, 244, 0.86);
  background:
    radial-gradient(680px circle at 20% 0%, rgba(121, 213, 223, 0.10), transparent 58%),
    linear-gradient(180deg, rgba(30, 49, 73, 0.90), rgba(9, 20, 34, 0.97));
  box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 54px);
}

.privacy-policy-content {
  max-width: 880px;
  color: var(--soft);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.76;
}

.privacy-policy-content > *:first-child {
  margin-top: 0;
}

.privacy-policy-content h2 {
  margin: clamp(28px, 4vw, 44px) 0 12px;
  color: var(--ink);
  font-family: "Space Mono", monospace;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.privacy-policy-content p {
  margin: 0 0 16px;
}

.privacy-policy-content ul,
.privacy-policy-content ol {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding-left: 1.25rem;
}

.privacy-policy-content li {
  padding-left: 4px;
}

.privacy-policy-content strong {
  color: var(--ink);
}

.privacy-policy-content a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 2px solid rgba(244, 199, 98, 0.28);
}

.privacy-policy-content a:hover,
.privacy-policy-content a:focus-visible {
  border-bottom-color: rgba(244, 199, 98, 0.86);
  outline: none;
}

.footer-bottom {
  gap: 14px;
}

.footer-bottom a[href*="privacy-policy"] {
  color: var(--soft);
}

.footer-bottom a[href*="privacy-policy"]:hover,
.footer-bottom a[href*="privacy-policy"]:focus-visible {
  color: var(--amber);
}

@media (max-width: 820px) {
  .privacy-hero,
  .privacy-policy-section {
    width: min(100% - 28px, 1060px);
  }

  .privacy-hero {
    padding-top: 62px;
  }

  .privacy-hero h1 {
    font-size: clamp(58px, 18vw, 88px);
  }

  .privacy-policy-card {
    padding: 18px;
  }

  .privacy-policy-content h2 {
    font-size: clamp(22px, 7vw, 30px);
  }

  .footer-bottom {
    flex-direction: column;
  }
}


/* ===== V164 — Privacy Policy: softer reading frame ===== */

/*
  The global .hover-card effect is too strong for a long legal text page.
  Keep a small interactive polish, but remove the heavy moving frame effect.
*/
.privacy-policy-card.hover-card,
.privacy-policy-card.hover-card:hover,
.privacy-policy-card.hover-card:focus-within {
  transform: none !important;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease !important;
}

.privacy-policy-card.hover-card::before,
.privacy-policy-card.hover-card::after {
  opacity: 0.22 !important;
  transform: none !important;
  animation: none !important;
}

.privacy-policy-card.hover-card:hover,
.privacy-policy-card.hover-card:focus-within {
  border-color: rgba(159, 216, 244, 0.92) !important;
  box-shadow:
    8px 8px 0 rgba(2, 8, 16, 0.28),
    0 0 18px rgba(121, 213, 223, 0.045) !important;
}

.privacy-policy-card .privacy-policy-content {
  position: relative;
  z-index: 2;
}


/* ===== V174 — Language switcher ===== */

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.language-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 7px 9px;
  border: 2px solid rgba(159, 216, 244, 0.42);
  background: rgba(7, 17, 28, 0.74);
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(2, 8, 16, 0.3);
}

.language-switcher a:hover,
.language-switcher a:focus-visible,
.language-switcher a.is-active {
  color: var(--ink);
  border-color: rgba(244, 199, 98, 0.86);
  background: rgba(244, 199, 98, 0.12);
  outline: none;
}

@media (max-width: 980px) {
  .language-switcher {
    justify-content: center;
    margin: 8px 0 0;
    width: 100%;
  }
}


/* ===== V180 — Header language dropdown QA fix ===== */

.header-shell {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.header-meta {
  position: relative;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.language-switcher {
  display: none !important;
}

.language-menu {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  z-index: 50;
}

.language-toggle {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 48px;
  min-height: 44px;
  overflow: hidden;
  border: 3px solid rgba(159, 216, 244, 0.78);
  border-radius: 0;
  background: rgba(18, 34, 52, 0.9);
  color: var(--soft);
  box-shadow: var(--shadow);
  padding: 9px 11px;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.language-toggle:hover,
.language-toggle:focus-visible,
.language-menu.is-open .language-toggle {
  color: var(--amber);
  border-color: rgba(244, 199, 98, 0.9);
  outline: none;
}

.language-toggle i {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 160ms ease;
}

.language-menu.is-open .language-toggle i {
  transform: rotate(-135deg) translateY(-1px);
}

.language-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  gap: 7px;
  min-width: 86px;
  border: 3px solid rgba(159, 216, 244, 0.86);
  background: rgba(9, 20, 34, 0.98);
  box-shadow: 6px 6px 0 rgba(2, 8, 16, 0.48);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.language-menu.is-open .language-panel,
.language-menu:focus-within .language-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-panel a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 2px solid rgba(159, 216, 244, 0.28);
  background: rgba(27, 45, 67, 0.74);
  color: var(--soft);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.language-panel a:hover,
.language-panel a:focus-visible,
.language-panel a.is-active {
  color: var(--amber);
  border-color: rgba(244, 199, 98, 0.85);
  outline: none;
}

@media (max-width: 1180px) {
  .header-shell {
    gap: 14px;
    padding-inline: clamp(14px, 3vw, 28px);
  }

  .nav > a,
  .nav-dropdown-toggle,
  .header-phone {
    padding-inline: 12px;
    font-size: 11px;
  }

  .header-phone {
    min-width: 174px;
  }
}

@media (max-width: 980px) {
  .header-meta {
    gap: 10px;
  }

  .language-menu {
    order: 2;
  }

  .menu-toggle {
    order: 3;
  }

  .header-phone {
    order: 1;
  }
}

@media (max-width: 720px) {
  .header-phone {
    display: none;
  }

  .language-toggle {
    min-width: 44px;
    min-height: 42px;
  }
}


/* ===== V181 — German Web Development service-details layout fix ===== */

/*
  German headings are longer than English and were overflowing from the left
  narrative column into the copy column. Keep the two-column composition, but
  give the title column more room and allow proper wrapping.
*/
.web-development-clean-main .webdev-narrative-panel {
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr) !important;
  align-items: start;
}

.web-development-clean-main .webdev-narrative-intro {
  min-width: 0;
}

.web-development-clean-main .webdev-narrative-intro h2 {
  max-width: none !important;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  letter-spacing: -0.045em;
}

.web-development-clean-main .webdev-narrative-copy {
  min-width: 0;
  max-width: 760px;
}

html[lang="de"] .web-development-clean-main .webdev-narrative-intro h2 {
  font-size: clamp(26px, 2.25vw, 38px);
  line-height: 1.12;
}

html[lang="de"] .web-development-clean-main .webdev-narrative-copy p {
  font-size: clamp(13px, 0.92vw, 15px);
  line-height: 1.62;
}

@media (max-width: 1180px) {
  .web-development-clean-main .webdev-narrative-panel {
    grid-template-columns: 1fr !important;
  }

  .web-development-clean-main .webdev-narrative-intro h2 {
    max-width: 760px !important;
  }

  .web-development-clean-main .webdev-narrative-copy {
    max-width: 920px;
  }
}


/* ===== V183 — Live contact form / Turnstile ===== */

.contact-hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-turnstile-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

.contact-form-privacy {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}


/* ===== V186 — Home CTA button spacing polish ===== */

/*
  The index page action buttons were sitting too close to the card grids.
  Keep the pixel/terminal look, but give the actions their own breathing room.
*/
.service-section-actions,
.case-snapshots-page-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(30px, 3.4vw, 48px) !important;
}

.service-section-actions {
  margin-left: 0;
}

.service-section-actions .terminal-mini-link,
.case-snapshots-page-cta .terminal-mini-link {
  min-width: 210px;
  min-height: 54px;
  justify-content: center;
}

@media (max-width: 820px) {
  .service-section-actions,
  .case-snapshots-page-cta {
    margin-top: 24px !important;
  }

  .service-section-actions .terminal-mini-link,
  .case-snapshots-page-cta .terminal-mini-link {
    width: min(100%, 300px);
  }
}


/* ===== V187 — Contact game score popups ===== */

.contact-game-score-popup {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 248px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  pointer-events: none;
  color: #9cff9d;
  font-family: "Press Start 2P", "Space Mono", monospace;
  font-size: 14px;
  line-height: 1;
  text-shadow:
    2px 0 0 rgba(4, 20, 12, 0.92),
    -2px 0 0 rgba(4, 20, 12, 0.92),
    0 2px 0 rgba(4, 20, 12, 0.92),
    0 -2px 0 rgba(4, 20, 12, 0.92),
    0 0 10px rgba(126, 255, 128, 0.62);
  image-rendering: pixelated;
  transform: translateX(calc(-50% + var(--score-popup-x, 0px))) translateY(0) scale(0.86);
  opacity: 0;
  animation: contactScorePopup 620ms steps(7, end) var(--score-popup-delay, 0ms) forwards;
}

@keyframes contactScorePopup {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--score-popup-x, 0px))) translateY(8px) scale(0.82);
  }
  12% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--score-popup-x, 0px))) translateY(0) scale(1.18);
  }
  36% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--score-popup-x, 0px))) translateY(-14px) scale(1);
  }
  74% {
    opacity: 0.92;
    transform: translateX(calc(-50% + var(--score-popup-x, 0px))) translateY(-34px) scale(0.94);
  }
  100% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--score-popup-x, 0px))) translateY(-48px) scale(0.86);
  }
}

.contact-game-player.is-high ~ .contact-game-score-popup {
  top: 162px;
}

@media (prefers-reduced-motion: reduce) {
  .contact-game-score-popup {
    animation-duration: 1ms !important;
  }
}


/* ===== V189 — Mobile header controls to the right ===== */

/*
  On mobile the language dropdown and menu button should sit on the right side,
  away from the logo, so the header feels balanced and less cramped.
*/
@media (max-width: 980px) {
  .header-shell {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .site-logo {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
  }

  .header-meta {
    grid-column: 3;
    justify-self: end !important;
    margin-left: auto !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    gap: 10px !important;
  }

  .language-menu,
  .menu-toggle {
    flex: 0 0 auto;
  }

  .language-menu {
    order: 1;
  }

  .menu-toggle {
    order: 2;
  }

  .nav {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .header-shell {
    gap: 8px !important;
    padding-inline: 18px !important;
  }

  .site-logo img {
    width: auto;
    max-width: 150px;
  }

  .language-toggle {
    min-width: 54px;
    min-height: 44px;
    padding-inline: 10px;
  }

  .menu-toggle {
    width: 50px;
    min-width: 50px;
    height: 44px;
  }
}

@media (max-width: 390px) {
  .site-logo img {
    max-width: 132px;
  }

  .header-meta {
    gap: 7px !important;
  }

  .language-toggle {
    min-width: 48px;
    font-size: 11px;
  }

  .menu-toggle {
    width: 46px;
    min-width: 46px;
  }
}


/* ===== V190 — About crew faces hover-only polish ===== */

/*
  Crew portraits should change only on hover.
  Click/tap/focus should not leave a random expression stuck on the card.
*/
.about-crew-card:focus:not(:hover) .about-crew-sprite,
.about-crew-card:focus-visible:not(:hover) .about-crew-sprite,
.about-crew-card:active:not(:hover) .about-crew-sprite {
  --crew-frame: 0 !important;
  background-position: 0 0 !important;
  animation: none !important;
}


/* ===== V191 — Mobile proof-chip plunger touch fix ===== */

/*
  On touch devices the plunger should appear only while the finger/stylus is
  holding a chip. A tap should not leave a sticky plunger, and only one group
  can keep an active plunger at a time.
*/
.proof-chips > span {
  touch-action: none;
}

.proof-chips.is-touch-dragging {
  cursor: grabbing;
}

.proof-chips.is-touch-dragging .proof-plunger {
  z-index: 1002;
}


/* ===== V192 — Services pricing hover overflow fix ===== */

/*
  On medium desktop screens the pricing cards were too close to the viewport
  edges, so the hover scale could get clipped. Give the orbit a safe gutter and
  reduce the hover expansion before the layout switches to two columns.
*/
.wp-prices,
.pricing-orbit {
  overflow: visible;
}

.pricing-orbit {
  padding-inline: clamp(18px, 2.8vw, 42px);
  margin-inline: calc(clamp(18px, 2.8vw, 42px) * -1);
}

@media (max-width: 1500px) and (min-width: 1181px) {
  .wp-prices {
    width: min(100% - 72px, 1320px);
    max-width: 1320px;
  }

  .pricing-orbit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    padding-inline: 44px;
    margin-inline: -44px;
  }

  .pricing-float-card {
    min-height: 350px;
  }

  .pricing-float-card:hover,
  .pricing-float-card:focus-visible,
  .pricing-float-card.is-expanded {
    transform: translate3d(0, -22px, 70px) scale(1.045) rotateZ(0deg) !important;
  }
}

@media (max-width: 1320px) and (min-width: 1181px) {
  .wp-prices {
    width: min(100% - 56px, 1160px);
    max-width: 1160px;
  }

  .pricing-orbit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 36px;
    margin-inline: -36px;
  }

  .pricing-float-card:hover,
  .pricing-float-card:focus-visible,
  .pricing-float-card.is-expanded {
    transform: translate3d(0, -18px, 56px) scale(1.035) rotateZ(0deg) !important;
  }
}

@media (max-width: 1180px) {
  .pricing-orbit {
    padding-inline: 22px;
    margin-inline: -22px;
  }
}

@media (max-width: 820px) {
  .pricing-orbit {
    padding-inline: 0;
    margin-inline: 0;
  }
}


/* ===== V193 — Lid card number / bolt spacing fix ===== */

/*
  Several service/about pages reuse the leaking lid cards. On narrower desktop
  and tablet widths the large 01/02/03/04 number could collide with the top-left
  bolt. White-label already looked fine, so this is a conservative global lid
  spacing patch that keeps the same visual style while moving the number into
  the safe inner area of the metal plate.
*/
@media (max-width: 1460px) {
  .support-lid-card,
  .service-lid-card {
    padding: clamp(28px, 2.4vw, 36px) clamp(24px, 2.2vw, 32px) clamp(22px, 2vw, 30px) !important;
  }

  .support-lid-card .lid-content,
  .service-lid-card .lid-content {
    padding: clamp(18px, 1.8vw, 26px) 12px 0 clamp(16px, 1.7vw, 24px) !important;
  }

  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    display: block !important;
    margin: 10px 0 0 12px !important;
    padding-left: 0 !important;
    max-width: calc(100% - 88px) !important;
    font-size: clamp(34px, 3.4vw, 56px) !important;
    line-height: 0.9 !important;
  }

  .support-lid-card .lid-content h3,
  .service-lid-card .lid-content h3 {
    margin-top: clamp(22px, 2.1vw, 30px) !important;
  }
}

@media (max-width: 1180px) {
  .support-lid-card .lid-content,
  .service-lid-card .lid-content {
    padding: 20px 10px 0 20px !important;
  }

  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    margin-top: 12px !important;
    margin-left: 10px !important;
    max-width: calc(100% - 76px) !important;
    font-size: clamp(32px, 5vw, 48px) !important;
  }

  .support-lid-card .lid-content h3,
  .service-lid-card .lid-content h3 {
    margin-top: 20px !important;
  }
}

@media (max-width: 767px) {
  .support-lid-card .lid-content,
  .service-lid-card .lid-content {
    padding: 18px 8px 0 18px !important;
  }

  .support-lid-card .lid-content strong,
  .service-lid-card .lid-content strong {
    margin-top: 10px !important;
    margin-left: 8px !important;
    max-width: calc(100% - 64px) !important;
    font-size: clamp(26px, 8vw, 34px) !important;
  }
}


/* ===== V195 — Dedicated crew mobile/tablet selection fix ===== */

/*
  On touch/tablet layouts the selected crew card expanded because `.crew-best`
  opened inside the card. When two neighboring cards were selected, their heights
  fought each other visually. Keep the selected state, badge and console output,
  but stop the card body from expanding on tablet/mobile.
*/
@media (max-width: 1180px), (hover: none) {
  .dedicated-crew-card,
  .dedicated-expertise-grid .dedicated-crew-card {
    min-height: 260px;
  }

  .dedicated-crew-card .crew-best {
    display: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .dedicated-crew-card:hover h3,
  .dedicated-crew-card:focus-visible h3,
  .dedicated-crew-card.is-selected h3,
  .dedicated-crew-card[aria-pressed="true"] h3 {
    transform: none !important;
  }

  .dedicated-crew-card.is-selected,
  .dedicated-crew-card[aria-pressed="true"] {
    transform: none !important;
  }
}

@media (max-width: 820px) {
  .dedicated-crew-grid {
    align-items: stretch;
  }

  .dedicated-crew-card,
  .dedicated-expertise-grid .dedicated-crew-card {
    min-height: 240px;
  }
}


/* ===== V196 — Services/support tech-stack proof chips fix ===== */

/*
  Services and Website Support mobile tech-stack chips use the same proof-chip
  mechanic as the home page, but must always use the platforms pool and must not
  leave a sticky plunger after a tap on touch devices.
*/
.tech-mobile-chips[data-proof-pool="platforms"],
.support-tech-chips[data-proof-pool="platforms"] {
  justify-content: center;
}

@media (max-width: 1180px), (hover: none) {
  .tech-mobile-chips .proof-plunger,
  .support-tech-chips .proof-plunger {
    pointer-events: none;
  }

  .tech-mobile-chips > span,
  .support-tech-chips > span {
    touch-action: none;
  }
}


/* ===== V197 — Mobile/tablet hammer cursor stuck fix ===== */

/*
  Touch devices do not always fire pointerleave after tapping flip cards.
  Keep the hammer hit animation, but prevent the cursor from staying visible
  during later scrolls.
*/
@media (hover: none), (pointer: coarse) {
  .flow-hammer-cursor:not(.is-hitting) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* ===== V198 — Mobile menu/language/plunger final polish ===== */

/*
  Mobile header: logo on the left, language + hamburger pinned to the right.
  The dropdown menu should stay inside the viewport, and the Services submenu
  must expand inside the menu rather than overflowing beyond it.
*/
@media (max-width: 980px) {
  .site-header {
    padding: 0 !important;
  }

  .header-shell {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(118px, auto) minmax(0, 1fr) auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: var(--header-height) !important;
    padding-inline: clamp(14px, 4vw, 24px) !important;
    gap: 10px !important;
  }

  .brand,
  .site-logo {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .header-meta {
    grid-column: 3 !important;
    justify-self: end !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
  }

  .header-phone {
    display: none !important;
  }

  .language-menu {
    z-index: 1004 !important;
  }

  .language-panel {
    right: 0 !important;
    left: auto !important;
    z-index: 1005 !important;
  }

  .site-header.menu-open .nav {
    position: absolute !important;
    top: calc(100% + 3px) !important;
    left: clamp(14px, 4vw, 24px) !important;
    right: auto !important;
    display: grid !important;
    width: min(330px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 10px !important;
    border: 3px solid rgba(159, 216, 244, 0.92) !important;
    background: rgba(9, 20, 34, 0.98) !important;
    box-shadow: 7px 7px 0 rgba(2, 8, 16, 0.48) !important;
    padding: 14px !important;
    z-index: 1001 !important;
  }

  .site-header.menu-open .nav > a,
  .site-header.menu-open .nav .nav-dropdown-toggle {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .site-header.menu-open .nav-item,
  .site-header.menu-open .nav-dropdown {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .site-header.menu-open .dropdown-panel {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-width: 2px !important;
    box-shadow: none !important;
    padding: 8px !important;
  }

  .site-header.menu-open .nav-dropdown.is-open .dropdown-panel {
    display: grid !important;
  }

  .site-header.menu-open .dropdown-panel a {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 42px !important;
    padding: 11px 12px !important;
    white-space: normal !important;
  }

  .nav-dropdown:hover .dropdown-panel,
  .nav-dropdown:focus-within .dropdown-panel {
    transform: none;
  }
}

/* Language dropdown should be controlled by `.is-open`, not sticky focus. */
.language-menu:not(.is-open) .language-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(7px) !important;
}

.language-menu.is-open .language-panel {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/*
  Touch proof-chip destruction: while holding a tag, pulling it outside the group
  and releasing now destroys/replaces it. Give touch users a bit of room.
*/
@media (max-width: 1180px), (hover: none) {
  .proof-chips.is-touch-dragging {
    overflow: visible !important;
  }

  .proof-chips.is-touch-dragging .proof-floating-chip {
    z-index: 1003 !important;
  }
}

@media (max-width: 390px) {
  .site-header.menu-open .nav {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    padding: 12px !important;
  }

  .brand {
    width: 132px !important;
  }
}


/* ===== V199 — Real mobile header right alignment fix ===== */

/*
  The previous mobile rules moved header-meta to the right inside .header-shell,
  but .site-header was still using an older two-column grid. That made the
  entire .header-shell shrink to the left column, so language + burger stayed
  near the logo. On mobile/tablet, make the header itself a block wrapper and
  let .header-shell own the full viewport width.
*/
@media (max-width: 980px) {
  .site-header {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .header-shell {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-inline: clamp(14px, 4vw, 24px) !important;
  }

  .brand {
    grid-column: 1 !important;
    justify-self: start !important;
    width: clamp(136px, 34vw, 160px) !important;
    min-width: 0 !important;
  }

  .header-meta {
    grid-column: 3 !important;
    justify-self: end !important;
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .language-menu,
  .menu-toggle {
    flex: 0 0 auto !important;
  }

  .language-menu {
    order: 1 !important;
  }

  .menu-toggle {
    order: 2 !important;
  }

  .language-toggle {
    min-width: 58px !important;
  }

  .menu-toggle {
    width: 52px !important;
    min-width: 52px !important;
  }

  .site-header.menu-open .nav {
    top: calc(100% + 3px) !important;
  }
}

@media (max-width: 430px) {
  .header-shell {
    padding-inline: 14px !important;
    gap: 8px !important;
  }

  .brand {
    width: 146px !important;
  }

  .language-toggle {
    min-width: 56px !important;
    padding-inline: 9px !important;
  }

  .menu-toggle {
    width: 50px !important;
    min-width: 50px !important;
  }
}

@media (max-width: 370px) {
  .brand {
    width: 132px !important;
  }

  .header-meta {
    gap: 6px !important;
  }

  .language-toggle {
    min-width: 50px !important;
    font-size: 11px !important;
  }

  .menu-toggle {
    width: 46px !important;
    min-width: 46px !important;
  }
}


/* ===== V200 — Mobile menu aligned with right-side controls ===== */

/*
  Now that the language button and hamburger are correctly pinned to the right,
  the opened mobile nav should visually belong to that same control cluster.
  Keep the menu inside the viewport, but anchor it to the right edge instead of
  opening under the logo/left side.
*/
@media (max-width: 980px) {
  .site-header.menu-open .nav {
    left: auto !important;
    right: clamp(14px, 4vw, 24px) !important;
    width: min(330px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    transform: none !important;
  }

  .site-header.menu-open .nav > a,
  .site-header.menu-open .nav .nav-dropdown-toggle,
  .site-header.menu-open .dropdown-panel a {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .language-panel {
    right: 0 !important;
    left: auto !important;
    min-width: 118px !important;
    transform-origin: top right !important;
  }
}

@media (max-width: 430px) {
  .site-header.menu-open .nav {
    right: 14px !important;
    left: auto !important;
    width: min(330px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
  }
}

@media (max-width: 370px) {
  .site-header.menu-open .nav {
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}


/* ===== V203 — Wide desktop pricing hover edge fix ===== */

/*
  On wide screens the first pricing card could still be clipped because the
  whole page/main clips horizontal overflow and the hover scale pushes the
  leftmost card beyond the viewport. Keep the hover, but give the pricing grid
  a proper safe gutter and shift edge cards inward while hovered.
*/
@media (min-width: 1501px) {
  .wp-prices {
    width: min(100% - 140px, 1600px) !important;
    max-width: 1600px !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .pricing-orbit {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(22px, 2vw, 34px) !important;
    padding-inline: 72px !important;
    margin-inline: -72px !important;
    overflow: visible !important;
  }

  .pricing-float-card {
    min-height: 360px;
  }

  .pricing-float-card:hover,
  .pricing-float-card:focus-visible,
  .pricing-float-card.is-expanded {
    transform: translate3d(0, -24px, 84px) scale(1.045) rotateZ(0deg) !important;
  }

  .pricing-float-card:first-child:hover,
  .pricing-float-card:first-child:focus-visible,
  .pricing-float-card:first-child.is-expanded {
    transform: translate3d(52px, -24px, 84px) scale(1.045) rotateZ(0deg) !important;
  }

  .pricing-float-card:last-child:hover,
  .pricing-float-card:last-child:focus-visible,
  .pricing-float-card:last-child.is-expanded {
    transform: translate3d(-52px, -24px, 84px) scale(1.045) rotateZ(0deg) !important;
  }
}

@media (min-width: 1501px) and (max-width: 1700px) {
  .wp-prices {
    width: min(100% - 104px, 1450px) !important;
  }

  .pricing-orbit {
    padding-inline: 56px !important;
    margin-inline: -56px !important;
  }

  .pricing-float-card:first-child:hover,
  .pricing-float-card:first-child:focus-visible,
  .pricing-float-card:first-child.is-expanded {
    transform: translate3d(42px, -22px, 72px) scale(1.035) rotateZ(0deg) !important;
  }

  .pricing-float-card:last-child:hover,
  .pricing-float-card:last-child:focus-visible,
  .pricing-float-card:last-child.is-expanded {
    transform: translate3d(-42px, -22px, 72px) scale(1.035) rotateZ(0deg) !important;
  }
}


/* ===== V206 — German homepage process card text fit ===== */

/*
  German process-card copy is longer than the English version.
  Keep the same layout and hammer/flip behavior, but give the cards a little
  more vertical space and slightly tighten text on the front side.
*/
html[lang="de"] .process-board {
  align-items: stretch;
}

html[lang="de"] .process-flip-card {
  min-height: clamp(320px, 23vw, 390px) !important;
}

html[lang="de"] .process-flip-inner {
  min-height: inherit !important;
}

html[lang="de"] .process-flip-face {
  justify-content: flex-start !important;
  padding: clamp(24px, 2.4vw, 34px) !important;
}

html[lang="de"] .process-flip-front h3 {
  max-width: 15ch;
  font-size: clamp(22px, 1.55vw, 30px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

html[lang="de"] .process-flip-front p {
  max-width: 36ch;
  font-size: clamp(14px, 0.92vw, 16px) !important;
  line-height: 1.52 !important;
}

html[lang="de"] .process-step-number {
  margin-bottom: clamp(18px, 1.8vw, 28px) !important;
}

/* Medium desktop / tablet: switch earlier to 1 column so German copy never clips. */
@media (max-width: 1280px) and (min-width: 821px) {
  html[lang="de"] .process-board {
    grid-template-columns: 1fr !important;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  html[lang="de"] .process-flip-card {
    min-height: 280px !important;
  }

  html[lang="de"] .process-flip-front h3 {
    max-width: 22ch;
  }

  html[lang="de"] .process-flip-front p {
    max-width: 58ch;
  }
}

@media (max-width: 820px) {
  html[lang="de"] .process-flip-card {
    min-height: 300px !important;
  }
}