:root {
  --bg: #d9ddde;
  --paper: #f3f5f5;
  --panel: rgba(255, 255, 255, 0.74);
  --panel-strong: rgba(255, 255, 255, 0.9);
  --ink: #132232;
  --muted: #4f6070;
  --soft: #72808b;
  --teal: #21cfd4;
  --teal-strong: #178da3;
  --label-blue: #2f8fac;
  --label-blue-strong: #176f91;
  --green: #247b86;
  --line: rgba(24, 47, 62, 0.16);
  color-scheme: light;
}

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

html,
body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body {
  font-family: Manrope, system-ui, sans-serif;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0 1px, rgba(199, 206, 208, 0.2) 1px 3px),
    linear-gradient(135deg, #f6f7f6 0%, #d8ddde 42%, #eef0ef 100%);
  -webkit-font-smoothing: antialiased;
}

body.modalOpen {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

::selection {
  background: rgba(33, 207, 212, 0.28);
  color: #132232;
}

.canvas {
  min-height: 100vh;
  width: 100%;
  background:
    radial-gradient(860px 620px at 50% 18%, rgba(255, 255, 255, 0.72), transparent 68%),
    radial-gradient(720px 520px at 76% 18%, rgba(33, 207, 212, 0.16), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 1px, rgba(142, 153, 158, 0.055) 1px 2px, transparent 2px 6px),
    linear-gradient(135deg, #f7f8f7 0%, #d7dcdd 46%, #eef0ef 100%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 14px 48px;
  overflow-x: hidden;
}

.board {
  position: relative;
  width: min(1160px, 100%);
  max-width: 100%;
  min-width: 0;
  min-height: calc(100vh - 48px);
  background:
    radial-gradient(720px 460px at 72% 22%, rgba(33, 207, 212, 0.12), transparent 66%),
    radial-gradient(780px 520px at 32% 18%, rgba(255, 255, 255, 0.72), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.12));
  color: var(--ink);
  padding: 98px 64px 38px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 24px 70px rgba(47, 60, 66, 0.16);
}

.board::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 34%),
    repeating-linear-gradient(135deg, rgba(16, 36, 48, 0.014) 0 1px, transparent 1px 8px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.58), transparent 80%);
  pointer-events: none;
}

.nav {
  position: absolute;
  top: 24px;
  left: 40px;
  right: 40px;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  z-index: 3;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  min-width: 0;
}

.brandMark {
  width: 36px;
  height: 48px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 8px 12px rgba(37, 55, 62, 0.2));
  flex: 0 0 auto;
}

.brandMark img {
  width: 100%;
}

.brandText,
.heroTitle {
  font-family: Montserrat, Manrope, system-ui, sans-serif;
  font-weight: 800;
}

.brandText {
  font-size: 22px;
  line-height: 1;
}

.wordDone {
  color: var(--label-blue);
}

.wordGrip {
  color: var(--ink);
}

.navLinks {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.navLink,
.navCta,
.primaryButton,
.secondaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 8px;
  font-weight: 800;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.navLink {
  padding: 8px 12px;
  color: #263948;
  font-size: 14px;
  border: 1px solid transparent;
}

.navLink:hover,
.navLinkActive {
  color: var(--ink);
  border-color: rgba(33, 207, 212, 0.36);
  background: rgba(255, 255, 255, 0.56);
}

.navCta {
  justify-self: end;
  padding: 9px 13px;
  color: #fff;
  background: #172838;
  border: 1px solid rgba(19, 34, 50, 0.2);
  box-shadow: 0 10px 22px rgba(23, 40, 56, 0.18);
}

.navCta:hover,
.primaryButton:hover,
.secondaryButton:hover {
  transform: translateY(-1px);
}

.primaryButton:disabled,
.secondaryButton:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  align-items: center;
  gap: 40px;
  min-height: 560px;
  min-width: 0;
}

.heroCopy {
  max-width: 690px;
  min-width: 0;
}

.eyebrow,
.sectionKicker,
.cardEyebrow {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--label-blue-strong);
}

.heroTitle {
  margin: 12px 0 14px;
  font-size: 76px;
  line-height: 0.95;
  letter-spacing: 0;
}

.heroLead,
.panelLead,
.pageHero p,
.cta p,
.contactPanel p,
.detailPanel p,
.packageCard p,
.serviceCard p,
.pipelineItem p {
  color: var(--muted);
  line-height: 1.65;
}

.heroLead {
  margin: 0;
  max-width: 58ch;
  font-size: 18px;
  overflow-wrap: break-word;
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  min-width: 0;
}

.primaryButton,
.secondaryButton {
  padding: 11px 16px;
  font-size: 14px;
  border: 0;
  cursor: pointer;
}

.primaryButton {
  color: #fff;
  background: linear-gradient(135deg, #162838, #285166);
  border: 1px solid rgba(18, 34, 48, 0.22);
  box-shadow: 0 14px 30px rgba(34, 54, 66, 0.18);
}

.secondaryButton {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(24, 47, 62, 0.18);
}

.secondaryButton:hover {
  border-color: rgba(33, 207, 212, 0.52);
  background: rgba(255, 255, 255, 0.78);
}

.icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.heroArt {
  justify-self: end;
  width: min(100%, 420px);
  min-width: 0;
  filter:
    drop-shadow(0 0 18px rgba(33, 207, 212, 0.22))
    drop-shadow(0 20px 32px rgba(38, 54, 61, 0.28));
}

.heroArt img {
  width: 100%;
  height: auto;
  animation: logoFloat 7s ease-in-out infinite;
  transform-origin: 50% 58%;
}

.serviceBand,
.processSection,
.packageBand {
  padding: 58px 0 0;
}

.processPageSection {
  padding-top: 34px;
}

.sectionIntro {
  display: grid;
  gap: 10px;
  max-width: 760px;
  min-width: 0;
}

.sectionTitle {
  margin: 0;
  font-family: Sora, Manrope, system-ui, sans-serif;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.serviceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  min-width: 0;
}

.packageGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  min-width: 0;
}

.serviceCard,
.packageCard,
.pipelineItem,
.detailPanel,
.contactPanel,
.cta,
.qaPanel {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 248, 248, 0.62)),
    var(--panel);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 16px 38px rgba(48, 62, 70, 0.13);
}

.serviceCard,
.packageCard {
  min-height: 282px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.serviceCard:hover,
.packageCard:hover,
.pipelineItem:hover,
.detailPanel:hover {
  transform: translateY(-3px);
  border-color: rgba(33, 207, 212, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 20px 48px rgba(48, 62, 70, 0.17);
}

.serviceCard::before,
.packageCard::before,
.pipelineItem::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--teal);
}

.serviceCard:nth-child(2)::before,
.packageCard:nth-child(2)::before {
  background: var(--teal-strong);
}

.serviceCard:nth-child(3)::before,
.packageCard:nth-child(3)::before {
  background: var(--green);
}

.serviceCard:nth-child(4)::before,
.packageCard:nth-child(4)::before {
  background: #6fa7b7;
}

.serviceCard h3,
.packageCard h3,
.pipelineItem h3,
.detailPanel h2,
.contactPanel h2,
.intakeBox h3,
.cta h2,
.pageHero h1,
.privacyHeader h2 {
  margin: 0;
  font-family: Sora, Manrope, system-ui, sans-serif;
  letter-spacing: 0;
}

.serviceCard h3 {
  margin-top: 10px;
  font-size: 24px;
}

.serviceCard p {
  margin: 12px 0 0;
}

.serviceCard ul,
.detailPanel ul,
.signalList,
.intakeBox ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.serviceCard li,
.detailPanel li,
.signalList li,
.intakeBox li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  color: #304555;
  line-height: 1.45;
}

.checkIcon {
  width: 20px;
  height: 20px;
  fill: var(--teal-strong);
  flex: 0 0 auto;
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  min-width: 0;
}

.pipelineItem {
  position: relative;
  min-height: 210px;
  padding: 22px;
  min-width: 0;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.pipelineItem span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 32px;
  margin-bottom: 18px;
  color: #fff;
  background: var(--teal-strong);
  border-radius: 6px;
  font-weight: 900;
}

.pipelineItem h3 {
  font-size: 22px;
}

.pipelineItem p,
.packageCard p {
  margin: 10px 0 0;
}

.qaPanel {
  margin-top: 58px;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 28px;
  align-items: start;
}

.panelLead {
  margin: 14px 0 0;
}

.signalList {
  margin-top: 0;
}

.cta {
  margin-top: 58px;
  padding: 28px;
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.cta h2 {
  font-size: 32px;
}

.cta p {
  margin: 0;
}

.footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid rgba(24, 47, 62, 0.14);
  color: var(--soft);
  font-size: 14px;
}

.footer p {
  margin: 0;
}

.footerLinks {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer a {
  color: var(--teal-strong);
  font-weight: 800;
}

.pageHero {
  max-width: 780px;
  padding: 42px 0 18px;
  min-width: 0;
}

.pageHero .eyebrow {
  color: var(--label-blue-strong);
}

.pageHero h1 {
  margin-top: 12px;
  font-size: 56px;
  line-height: 1.02;
  color: var(--ink);
  overflow-wrap: break-word;
}

.pageHero p:not(.eyebrow) {
  margin: 16px 0 0;
  max-width: 64ch;
  font-size: 18px;
}

.detailStack {
  display: grid;
  gap: 16px;
  margin-top: 22px;
  min-width: 0;
}

.detailPanel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1fr);
  gap: 28px;
  padding: 24px;
  min-width: 0;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.detailPanel h2 {
  margin-top: 9px;
  font-size: 30px;
}

.detailPanel p {
  margin: 12px 0 0;
}

.packageCard {
  min-height: 170px;
}

.packageCard h3 {
  font-size: 22px;
}

.contactPanel {
  margin-top: 22px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1fr);
  gap: 30px;
  align-items: start;
  min-width: 0;
}

.contactPanel h2 {
  margin-top: 10px;
  font-size: 34px;
  overflow-wrap: anywhere;
}

.contactPanel p {
  margin: 12px 0 20px;
}

.intakeBox {
  border-left: 1px solid rgba(24, 47, 62, 0.14);
  padding-left: 24px;
}

.compactIntake {
  margin-top: 26px;
}

.intakeBox h3 {
  font-size: 22px;
}

.contactFormPanel {
  align-items: stretch;
}

.contactForm {
  display: grid;
  gap: 15px;
  padding: 22px;
  border: 1px solid rgba(24, 47, 62, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}

.formField {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 800;
}

.formField input,
.formField select,
.formField textarea {
  width: 100%;
  border: 1px solid rgba(24, 47, 62, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font: inherit;
  padding: 12px 13px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.formField textarea {
  resize: vertical;
  min-height: 150px;
}

.formField input:focus,
.formField select:focus,
.formField textarea:focus {
  border-color: rgba(23, 111, 145, 0.7);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(33, 207, 212, 0.14);
}

.formField small,
.fieldError {
  color: #9a2f3d;
  font-weight: 800;
}

.fieldError[hidden],
.clientNotice[hidden] {
  display: none;
}

.fieldMeta {
  justify-self: end;
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
}

.formField.fieldInvalid > span,
.checkboxField.fieldInvalid span {
  color: #8d2335;
}

.formField.fieldInvalid input,
.formField.fieldInvalid select,
.formField.fieldInvalid textarea {
  border-color: rgba(180, 48, 68, 0.62);
  background: rgba(255, 247, 248, 0.94);
  box-shadow: 0 0 0 4px rgba(180, 48, 68, 0.09);
}

.checkboxField.fieldInvalid {
  color: #8d2335;
}

.checkboxField.fieldInvalid input {
  outline: 3px solid rgba(180, 48, 68, 0.16);
  outline-offset: 2px;
}

.checkboxField {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--muted);
  line-height: 1.45;
}

.checkboxField input {
  margin-top: 4px;
}

.formNotice {
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 800;
}

.formNotice p {
  margin: 0;
}

.formNotice ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.formNotice li + li {
  margin-top: 4px;
}

.formNotice.success {
  color: #0f5d65;
  background: rgba(33, 207, 212, 0.13);
  border: 1px solid rgba(23, 111, 145, 0.24);
}

.formNotice.error {
  color: #8d2335;
  background: rgba(180, 48, 68, 0.09);
  border: 1px solid rgba(180, 48, 68, 0.18);
}

.contactForm.isSubmitting {
  opacity: 0.82;
}

.submitButton {
  justify-self: start;
}

.turnstileWrap {
  min-height: 65px;
}

.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.privacyOverlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(13, 24, 34, 0.42);
  backdrop-filter: blur(8px);
}

.privacyOverlay[hidden] {
  display: none;
}

.privacyDialog {
  width: min(760px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0 1px, rgba(142, 153, 158, 0.055) 1px 2px, transparent 2px 6px),
    linear-gradient(135deg, #f9fbfa, #e4e9e9);
  box-shadow: 0 28px 90px rgba(13, 24, 34, 0.28);
}

.privacyHeader {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  padding: 24px 24px 0;
}

.privacyHeader h2 {
  margin-top: 8px;
  font-size: 30px;
}

.iconButton {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #172838;
  flex: 0 0 auto;
}

.iconButton svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.privacyBody {
  display: grid;
  gap: 14px;
  padding: 22px 24px 26px;
}

.privacyBody p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.privacyBody a {
  color: var(--label-blue-strong);
  font-weight: 900;
}

.board {
  animation: boardEnter 520ms ease both;
}

.jsReveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms ease var(--reveal-delay, 0ms),
    transform 520ms ease var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.jsReveal.isVisible {
  opacity: 1;
  transform: translateY(0);
}

.jsReveal.isVisible.serviceCard:hover,
.jsReveal.isVisible.packageCard:hover,
.jsReveal.isVisible.pipelineItem:hover,
.jsReveal.isVisible.detailPanel:hover {
  transform: translateY(-3px);
}

@keyframes boardEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(-1.2deg);
  }
}

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

  .jsReveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 980px) {
  .board {
    padding: 94px 36px 34px;
  }

  .nav {
    left: 28px;
    right: 28px;
    grid-template-columns: 1fr auto;
  }

  .navLinks {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    justify-content: flex-start;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: auto;
    padding-top: 42px;
  }

  .heroArt {
    justify-self: center;
    max-width: 310px;
    margin-inline: auto;
  }

  .serviceGrid,
  .packageGrid,
  .pipeline {
    grid-template-columns: 1fr;
  }

  .qaPanel,
  .detailPanel,
  .contactPanel {
    grid-template-columns: 1fr;
  }

  .intakeBox {
    border-left: 0;
    border-top: 1px solid rgba(24, 47, 62, 0.14);
    padding-left: 0;
    padding-top: 22px;
  }
}

@media (max-width: 640px) {
  .canvas {
    padding: 0;
  }

  .board {
    width: 100%;
    min-height: 100vh;
    padding: 154px 18px 30px;
    border-left: 0;
    border-right: 0;
  }

  .nav {
    top: 18px;
    left: 18px;
    right: 18px;
    display: block;
    min-height: 106px;
  }

  .brand {
    max-width: calc(100% - 88px);
  }

  .brandText {
    font-size: 20px;
  }

  .navCta {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 38px;
  }

  .navLinks {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    margin-top: 14px;
  }

  .navLink {
    white-space: nowrap;
    min-height: 38px;
    padding: 7px 10px;
  }

  .hero {
    gap: 22px;
    padding-top: 0;
    align-items: start;
  }

  .heroCopy {
    max-width: none;
  }

  .heroTitle {
    font-size: 44px;
    line-height: 1;
  }

  .heroActions {
    gap: 10px;
    margin-top: 22px;
  }

  .heroActions .primaryButton,
  .heroActions .secondaryButton {
    width: 100%;
    justify-content: space-between;
  }

  .heroArt {
    justify-self: center;
    width: 100%;
    max-width: 210px;
    margin-top: 0;
  }

  .sectionTitle {
    font-size: 30px;
  }

  .pageHero h1 {
    font-size: 40px;
  }

  .heroLead,
  .pageHero p:not(.eyebrow) {
    font-size: 16px;
  }

  .serviceCard,
  .packageCard,
  .pipelineItem,
  .detailPanel,
  .contactPanel,
  .qaPanel,
  .cta,
  .contactForm {
    padding: 18px;
  }

  .footer {
    flex-direction: column;
  }
}

@media (max-width: 380px) {
  .board {
    padding-inline: 14px;
  }

  .heroTitle {
    font-size: 40px;
  }

  .heroArt {
    max-width: 180px;
  }
}