:root {
  /* ================================
     GODEXWEB BRAND PALETTE
     ================================ */

  /* Page surfaces */
  --bg: #F6F8FA;
  --bg-raised: #FFFFFF;

  /* Logo charcoal */
  --text: #202A33;
  --text-dim: #4B5966;
  --text-faint: #71808D;

  /* Borders */
  --line: rgba(32, 42, 51, 0.12);
  --line-strong: rgba(32, 42, 51, 0.25);

  /* Brand blue */
  --accent: #0088E8;

  /* Dark brand / trust color */
  --trust: #202A33;
  --trust-accent: #0068F5;

  /* Logo teal / green */
  --positive: #10CFA5;

  /* Typography */
  --display: 'Archivo Expanded', 'Archivo', sans-serif;
  --display-alt: 'Archivo', sans-serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}


/* =========================================
   GLOBAL
   ========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  width: 100%;
  min-width: 0;
}


/* =========================================
   NAVIGATION
   ========================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(244, 245, 247, 0.9);
  backdrop-filter: blur(8px);

  border-bottom: 1px solid var(--line);

  transition:
    box-shadow .25s ease,
    background .25s ease;
}

.nav.nav-scrolled {
  box-shadow: 0 2px 14px rgba(20, 20, 20, 0.06);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: clamp(60px, 10vw, 72px);
  width: 100%;

  min-width: 0;
}

.brand {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(16px, 3vw, 19px);

  display: flex;
  align-items: baseline;
  gap: 0.5rem;

  flex-shrink: 0;
}

.brand small {
  font-family: var(--mono);
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 400;
  color: var(--text-faint);
}


/* Desktop navigation */

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(0.85rem, 1.6vw, 2rem);

  flex: 1;
  flex-wrap: nowrap;

  min-width: 0;
}

.nav-links a {
  font-size: clamp(11.5px, 1.3vw, 14px);
  color: var(--text-dim);

  transition: color 0.15s ease;

  position: relative;
  white-space: nowrap;

  min-height: 3rem;

  display: flex;
  align-items: center;

  padding: 0 0.25rem;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a.current {
  color: var(--text);
}

.nav-links a.current::after {
  content: '';

  position: absolute;

  left: 0;
  right: 0;
  bottom: -26px;

  height: 2px;

  background: var(--accent);
}


/* Navigation right */

.nav-right {
  display: flex;
  align-items: center;

  gap: clamp(1rem, 2vw, 1.5rem);

  flex-shrink: 0;
}

.lang-toggle {
  display: flex;

  border: 1px solid var(--line-strong);

  font-family: var(--mono);
  font-size: clamp(10px, 1.5vw, 12px);
}

.lang-toggle button {
  background: none;
  border: none;

  color: var(--text-dim);

  padding:
    clamp(4px, 1vw, 6px)
    clamp(8px, 1.5vw, 10px);

  min-width: 2.5rem;
  min-height: 2.5rem;

  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-toggle button.active {
  background: var(--text);
  color: var(--bg);
}

.nav-cta {
  font-family: var(--mono);
  font-size: clamp(11px, 1.8vw, 13px);

  border: 1px solid var(--text);

  padding:
    clamp(8px, 1.5vw, 9px)
    clamp(12px, 2vw, 16px);

  white-space: nowrap;

  transition:
    background 0.15s ease,
    color 0.15s ease;

  min-height: 2.5rem;

  display: flex;
  align-items: center;
}

.nav-cta:hover {
  background: var(--text);
  color: var(--bg);
}


/* =========================================
   HAMBURGER
   ========================================= */

.hamburger {
  display: none;

  width: 44px;
  height: 44px;

  padding: 10px;

  border: 0;
  background: transparent;

  cursor: pointer;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 5px;

  position: relative;
  z-index: 1001;

  flex-shrink: 0;
}

.hamburger span {
  display: block;

  width: 22px;
  height: 2px;

  background: currentColor;

  border-radius: 2px;

  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* =========================================
   MOBILE NAVIGATION
   ========================================= */

/*
   IMPORTANT FIX

   The menu is fixed to the viewport rather than
   absolutely positioned inside .wrap.

   This means the menu works correctly even when
   the user is far down the page.
*/

@media (max-width: 1040px) {

  .nav {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .nav .wrap {
    position: relative;
    min-width: 0;
  }

  .nav-links {
    position: fixed;

    /*
      Header height.

      60px on smaller screens,
      up to 72px on larger mobile/tablet screens.
    */
    top: clamp(60px, 10vw, 72px);

    left: 0;
    right: 0;

    width: 100%;
    max-width: 100vw;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 0;

    padding: 10px 0;

    background: rgba(244, 245, 247, 0.98);

    backdrop-filter: blur(10px);

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    box-shadow:
      0 12px 30px rgba(15, 23, 42, 0.08);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease;

    /*
      Must be below the hamburger button,
      but above the page content.
    */
    z-index: 999;
  }

  .nav-links.open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
  }

  .nav-links a {
    display: block;

    width: 100%;

    min-height: auto;

    padding: 14px 20px;

    font-size: 14px;
  }

  .nav-links a.current::after {
    display: none;
  }

  .nav-links a.current {
    background: var(--bg);
    color: var(--accent);
  }

  .nav-cta {
    display: none !important;
  }

  .hamburger {
    display: flex;

    position: relative;
    z-index: 1001;
  }

  /*
    DO NOT use:

      overflow: hidden;

    here.

    That was causing the page scrolling behavior
    to become problematic when the menu was opened
    while already scrolled down.
  */
  body.menu-open {
    overflow: auto;
  }
}


/* =========================================
   MOBILE NAV SMALL SCREENS
   ========================================= */

@media (max-width: 600px) {

  .brand {
    font-size: 1rem;
  }

  .brand small {
    font-size: 0.65em;
  }

  .lang-toggle {
    transform: scale(0.92);
    transform-origin: right center;
  }

  .hamburger {
    width: 40px;
    height: 40px;
  }

  .nav-links {
    top: 60px;
  }
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  .hamburger span,
  .nav-links {
    transition: none;
  }
}


/* =========================================
   PAGE HERO
   ========================================= */

.page-hero {
  padding:
    clamp(3rem, 8vw, 4.5rem) 0
    clamp(2rem, 5vw, 3.25rem);

  border-bottom: 1px solid var(--line);
}

.page-hero .eyebrow {
  font-family: var(--mono);
  font-size: clamp(11px, 1.5vw, 13px);

  color: var(--accent);

  margin-bottom: clamp(1rem, 2vw, 1.25rem);

  display: flex;
  align-items: center;

  gap: 0.625rem;
}

.page-hero h1 {
  font-family: var(--display);
  font-weight: 900;

  font-size: clamp(28px, 5vw, 52px);

  line-height: 1.04;

  max-width: 18ch;

  letter-spacing: -0.01em;
}

.page-hero p {
  color: var(--text-dim);

  font-size: clamp(14px, 2.5vw, 17px);

  max-width: 56ch;

  margin-top: clamp(1rem, 2vw, 1.375rem);

  line-height: 1.6;
}

.page-hero .hero-actions {
  display: flex;
  align-items: center;

  gap: clamp(1.5rem, 3vw, 2rem);

  margin-top: clamp(2rem, 3vw, 2.25rem);

  flex-wrap: wrap;
}


/* =========================================
   MAIN HERO
   ========================================= */

.hero {
  border-bottom: 1px solid var(--line);
}

.hero-grid {
  display: grid;

  grid-template-columns: 1.4fr 1fr;

  gap: clamp(2rem, 4vw, 3rem);

  min-height: auto;

  align-items: center;

  min-width: 0;
}

.hero-left {
  padding:
    clamp(3rem, 6vw, 6rem)
    clamp(1rem, 2vw, 2rem)
    clamp(2.5rem, 5vw, 5rem)
    0;

  border-right: 1px solid var(--line);

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
}

.hero-kicker {
  font-family: var(--mono);

  font-size: clamp(11px, 1.5vw, 13px);

  color: var(--accent);

  margin-bottom: clamp(1.5rem, 2.5vw, 1.75rem);

  display: flex;
  align-items: center;

  gap: 0.625rem;
}

.hero-kicker .dot {
  width: 0.4rem;
  height: 0.4rem;

  background: var(--accent);

  border-radius: 50%;

  animation: pulse 2s ease-in-out infinite;

  flex-shrink: 0;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-kicker .dot {
    animation: none;
  }
}

.hero-headline {
  font-family: var(--display);

  font-weight: 900;

  font-size: clamp(32px, 5vw, 68px);

  line-height: 1.03;

  letter-spacing: -0.01em;

  max-width: 15ch;
}

.hero-sub {
  font-size: clamp(16px, 2.2vw, 18px);

  color: var(--text-dim);

  max-width: 46ch;

  margin-top: clamp(1.5rem, 2.5vw, 1.75rem);

  line-height: 1.6;
}

.hero-actions {
  display: flex;
  align-items: center;

  gap: clamp(1.5rem, 3vw, 1.75rem);

  margin-top: clamp(2rem, 3vw, 2.75rem);

  flex-wrap: wrap;
}

.btn-primary {
  background: var(--accent);

  color: var(--bg);

  font-family: var(--display-alt);

  font-weight: 700;

  font-size: clamp(13px, 1.8vw, 15px);

  padding:
    clamp(0.75rem, 1.5vw, 1rem)
    clamp(1rem, 2vw, 1.625rem);

  border: 1px solid var(--accent);

  transition:
    background 0.15s ease,
    color 0.15s ease;

  min-height: 3rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;
}

.btn-primary:hover {
  background: transparent;
  color: var(--text);
}

.btn-secondary {
  font-family: var(--mono);

  font-size: clamp(11px, 1.6vw, 13px);

  border: 1px solid var(--line-strong);

  padding:
    clamp(0.75rem, 1.5vw, 0.9375rem)
    clamp(1rem, 1.5vw, 1.5rem);

  color: var(--text-dim);

  transition:
    border-color 0.15s ease,
    color 0.15s ease;

  min-height: 3rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  border-color: var(--text);
  color: var(--text);
}

.hero-note {
  font-family: var(--mono);

  font-size: clamp(10px, 1.5vw, 12.5px);

  color: var(--text-faint);
}

.hero-right {
  padding:
    clamp(3rem, 6vw, 6rem)
    0
    clamp(2.5rem, 5vw, 5rem)
    clamp(1rem, 2vw, 2rem);

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: clamp(1rem, 1.5vw, 1.125rem);

  min-width: 0;
}

.panel-label {
  font-family: var(--mono);

  font-size: clamp(10px, 1.3vw, 12px);

  color: var(--text-faint);

  display: flex;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: 0.5rem;
}

.dash {
  border: 1px solid var(--line-strong);

  background: var(--bg-raised);

  border-radius: 0.5rem;

  overflow: hidden;
}

.dash-head {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:
    clamp(1rem, 1.5vw, 1.125rem)
    clamp(1rem, 1.5vw, 1.125rem);

  border-bottom: 1px solid var(--line);

  font-family: var(--mono);

  font-size: clamp(9px, 1.3vw, 11.5px);

  color: var(--text-faint);

  flex-wrap: wrap;

  gap: 0.5rem;
}

.dash-head .live {
  color: var(--positive);

  display: flex;

  gap: 0.375rem;

  align-items: center;
}

.dash-head .live::before {
  content: '';

  width: 0.375rem;
  height: 0.375rem;

  background: var(--positive);

  border-radius: 50%;

  flex-shrink: 0;
}

.dash-body {
  padding:
    clamp(1.25rem, 2vw, 1.5rem)
    clamp(1rem, 1.5vw, 1.125rem);
}

.dash-metric {
  font-family: var(--mono);

  font-size: clamp(32px, 6vw, 44px);

  font-weight: 500;

  color: var(--positive);

  line-height: 1;
}

.dash-metric-label {
  font-size: clamp(12px, 1.5vw, 13px);

  color: var(--text-dim);

  margin-top: 0.625rem;
}

.spark {
  display: flex;

  align-items: flex-end;

  gap: 0.25rem;

  height: 3.5rem;

  margin-top: clamp(1rem, 2vw, 1.375rem);
}

.spark i {
  flex: 1;

  background: var(--line-strong);

  transform-origin: bottom;

  transform: scaleY(0);

  transition:
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);

  min-width: 2px;
}

.spark i:last-child {
  background: var(--positive);
}

.dash-rows {
  border-top: 1px solid var(--line);
}

.dash-row {
  display: flex;

  justify-content: space-between;

  padding:
    clamp(0.75rem, 1vw, 0.75rem)
    clamp(1rem, 1.5vw, 1.125rem);

  border-bottom: 1px solid var(--line);

  font-family: var(--mono);

  font-size: clamp(11px, 1.3vw, 12.5px);

  flex-wrap: wrap;

  gap: 0.5rem;
}

.dash-row span:first-child {
  color: var(--text-dim);
}


/* =========================================
   MOBILE HERO
   ========================================= */

@media (max-width: 860px) {

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

  .hero-left {
    border-right: none;

    border-bottom: 1px solid var(--line);

    padding:
      clamp(2rem, 4vw, 3.5rem)
      0;
  }

  .hero-right {
    padding:
      clamp(2rem, 4vw, 3.5rem)
      0;

    border-right: none;
  }
}


/* =========================================
   SECTIONS
   ========================================= */

.section {
  border-bottom: 1px solid var(--line);
}

.section-head {
  padding-top: clamp(3rem, 6vw, 4rem);

  padding-bottom: clamp(2rem, 4vw, 2.5rem);

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(2rem, 3vw, 2.5rem);

  border-bottom: 1px solid var(--line);

  min-width: 0;
}

.section-head h2 {
  font-family: var(--display);

  font-weight: 900;

  font-size: clamp(24px, 4vw, 40px);

  line-height: 1.08;
}

.section-head p {
  color: var(--text-dim);

  font-size: clamp(14px, 1.8vw, 16px);

  align-self: end;

  max-width: 42ch;
}

@media (max-width: 860px) {

  .section-head {
    grid-template-columns: 1fr;

    gap: clamp(1rem, 2vw, 1rem);
  }
}


/* =========================================
   LEDGER
   ========================================= */

.ledger {
  padding-bottom: 0.5rem;
}

.ledger-row {
  display: grid;

  grid-template-columns: 1.2fr 1fr 1fr;

  border-bottom: 1px solid var(--line);

  min-width: 0;
}

.ledger-row.head {
  font-family: var(--mono);

  font-size: clamp(10px, 1.3vw, 12px);

  color: var(--text-faint);
}

.ledger-row.head .lbl {
  padding: clamp(1rem, 1.5vw, 1.125rem) 0;
}

.ledger-row.head .bad {
  color: var(--accent);
}

.ledger-row.head .good {
  color: var(--positive);
}

.ledger-row > div {
  padding:
    clamp(1.25rem, 2vw, 1.375rem)
    clamp(1rem, 1.5vw, 1.5rem);

  border-left: 1px solid var(--line);

  min-width: 0;
}

.ledger-row > div:first-child {
  border-left: none;

  padding-left: 0;

  font-size: clamp(13px, 1.8vw, 15px);

  color: var(--text);
}

.ledger-row .val {
  font-family: var(--mono);

  font-size: clamp(13px, 1.6vw, 14.5px);
}

.ledger-row .bad-val {
  color: var(--accent);
}

.ledger-row .good-val {
  color: var(--positive);
}

@media (max-width: 700px) {

  .ledger-row {
    grid-template-columns: 1fr;
  }

  .ledger-row > div {
    border-left: none;

    border-top: 1px solid var(--line);

    padding:
      clamp(0.875rem, 1.5vw, 0.875rem)
      0;
  }

  .ledger-row > div:first-child {
    border-top: none;

    font-weight: 600;
  }

  .ledger-row.head {
    display: none;
  }
}


/* =========================================
   SERVICES ACCORDION
   ========================================= */

.service-row {
  border-bottom: 1px solid var(--line);

  cursor: pointer;
}

.service-top {
  display: grid;

  grid-template-columns:
    clamp(38px, 6vw, 48px)
    clamp(50px, 8vw, 70px)
    1fr
    clamp(40px, 8vw, 120px);

  align-items: center;

  padding:
    clamp(1.5rem, 3vw, 2.125rem)
    0;

  gap: clamp(1rem, 2vw, 1.5rem);

  min-width: 0;
}

.service-num {
  font-family: var(--mono);

  font-size: clamp(12px, 1.5vw, 14px);

  color: var(--text-faint);
}

.service-title {
  font-family: var(--display-alt);

  font-weight: 700;

  font-size: clamp(18px, 4vw, 30px);
}

.service-toggle {
  justify-self: end;

  font-family: var(--mono);

  font-size: 1.5rem;

  color: var(--text-dim);

  width: 2rem;
  height: 2rem;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid var(--line-strong);

  border-radius: 0.25rem;

  transition: all 0.2s ease;

  min-height: 3rem;
  min-width: 3rem;
}

.service-row.open .service-toggle {
  transform: rotate(45deg);

  color: var(--accent);

  border-color: var(--accent);
}

.service-body {
  max-height: 0;

  overflow: hidden;

  transition:
    max-height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-row.open .service-body {
  max-height: 600px;
}

.service-inner {
  display: grid;

  grid-template-columns:
    clamp(50px, 8vw, 70px)
    1fr;

  padding-bottom:
    clamp(1.5rem, 3vw, 2.125rem);

  gap: clamp(1rem, 2vw, 1.5rem);

  min-width: 0;
}

.service-desc {
  color: var(--text-dim);

  font-size: clamp(13px, 1.8vw, 15.5px);

  max-width: 56ch;

  margin-bottom: 1rem;
}

.service-tags {
  display: flex;

  flex-wrap: wrap;

  gap: clamp(0.5rem, 1vw, 0.625rem);

  margin-bottom:
    clamp(1rem, 1.5vw, 1.125rem);
}

.service-tags span {
  font-family: var(--mono);

  font-size: clamp(10px, 1.3vw, 12px);

  color: var(--text-dim);

  border: 1px solid var(--line-strong);

  padding:
    clamp(0.375rem, 0.8vw, 0.375rem)
    clamp(0.625rem, 1vw, 0.625rem);
}

.service-link {
  font-family: var(--mono);

  font-size: clamp(11px, 1.5vw, 13px);

  border-bottom: 1px solid var(--accent);

  color: var(--accent);

  padding-bottom: 0.125rem;

  display: inline-block;
}

@media (max-width: 700px) {

  .service-top {
    grid-template-columns:
      clamp(28px, 7vw, 32px)
      clamp(28px, 6vw, 32px)
      1fr
      clamp(36px, 6vw, 40px);

    gap: clamp(0.5rem, 2vw, 0.75rem);
  }

  .service-inner {
    grid-template-columns:
      clamp(40px, 6vw, 40px)
      1fr;
  }

  .service-title {
    font-size: clamp(16px, 4vw, 20px);
  }
}


/* =========================================
   PRICING
   ========================================= */

.pricing-grid {
  display: grid;

  border-top: 1px solid var(--line);

  min-width: 0;
}

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

.pricing-grid.cols-2 {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(clamp(280px, 45vw, 500px), 1fr)
    );
}

.pricing-col {
  border-left: 1px solid var(--line);

  padding:
    clamp(1.5rem, 3vw, 2rem)
    clamp(1.5rem, 2vw, 1.75rem);

  display: flex;
  flex-direction: column;

  min-width: 0;
}

.pricing-col:first-child {
  border-left: none;
}

.pricing-col.feature {
  background: var(--bg-raised);
}

.pricing-tag {
  font-family: var(--mono);

  font-size: clamp(9px, 1.2vw, 11px);

  color: var(--accent);

  margin-bottom: 0.625rem;
}

.pricing-tier {
  font-family: var(--display-alt);

  font-weight: 700;

  font-size: clamp(16px, 2.5vw, 18px);

  margin-bottom: 1rem;
}

.pricing-price {
  font-family: var(--display);

  font-weight: 900;

  font-size: clamp(28px, 5vw, 32px);

  line-height: 1;
}

.pricing-price span {
  font-family: var(--mono);

  font-size: clamp(11px, 1.5vw, 13px);

  color: var(--text-dim);

  font-weight: 400;

  margin-left: 0.375rem;
}

.pricing-note {
  font-size: clamp(12px, 1.6vw, 13px);

  color: var(--text-dim);

  margin:
    0.625rem 0
    clamp(1rem, 2vw, 1.375rem);
}

.pricing-list {
  margin-bottom: 1.625rem;

  flex: 1;
}

.pricing-list li {
  font-size: clamp(12px, 1.6vw, 14px);

  color: var(--text-dim);

  padding:
    clamp(0.625rem, 1vw, 0.625rem)
    0;

  border-top: 1px solid var(--line);
}

.pricing-list li:first-child {
  border-top: none;
}

.pricing-cta {
  font-family: var(--mono);

  font-size: clamp(11px, 1.5vw, 13px);

  border: 1px solid var(--line-strong);

  padding:
    clamp(0.8rem, 1.5vw, 0.8125rem)
    1rem;

  text-align: center;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;

  min-height: 3rem;

  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-cta:hover {
  background: var(--text);

  color: var(--bg);

  border-color: var(--text);
}

@media (max-width: 800px) {

  .pricing-grid.cols-3,
  .pricing-grid.cols-2 {
    grid-template-columns: 1fr;
  }

  .pricing-col {
    border-left: none;

    border-top: 1px solid var(--line);
  }

  .pricing-col:first-child {
    border-top: none;
  }
}


/* =========================================
   PROCESS LIST
   ========================================= */

.process-list {
  border-top: 1px solid var(--line);
}

.process-row {
  display: grid;

  grid-template-columns:
    clamp(50px, 8vw, 60px)
    1fr;

  padding:
    clamp(1.5rem, 2.5vw, 1.625rem)
    0;

  border-bottom: 1px solid var(--line);

  gap: clamp(1rem, 2vw, 1.25rem);

  min-width: 0;
}

.process-num {
  font-family: var(--mono);

  color: var(--text-faint);

  font-size: clamp(11px, 1.5vw, 13px);

  display: flex;

  align-items: flex-start;

  min-height: 3rem;

  padding-top: 0.25rem;
}

.process-row h3 {
  font-family: var(--display-alt);

  font-weight: 700;

  font-size: clamp(16px, 2.5vw, 18px);

  margin-bottom: 0.375rem;
}

.process-row p {
  color: var(--text-dim);

  font-size: clamp(13px, 1.8vw, 14.5px);

  max-width: 62ch;

  line-height: 1.5;
}


/* =========================================
   STAT ROW
   ========================================= */

.stat-row {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(clamp(150px, 25vw, 300px), 1fr)
    );

  border-top: 1px solid var(--line);

  min-width: 0;
}

.stat-col {
  border-left: 1px solid var(--line);

  padding:
    clamp(1.5rem, 2vw, 1.75rem)
    clamp(1rem, 1.5vw, 1.5rem);

  min-width: 0;
}

.stat-col:first-child {
  border-left: none;

  padding-left: 0;
}

.stat-num {
  font-family: var(--mono);

  font-size: clamp(24px, 5vw, 30px);

  color: var(--positive);
}

.stat-label {
  font-size: clamp(12px, 1.5vw, 13px);

  color: var(--text-dim);

  margin-top: 0.5rem;

  line-height: 1.4;
}

@media (max-width: 700px) {

  .stat-row {
    grid-template-columns: 1fr;
  }

  .stat-col {
    border-left: none;

    border-top: 1px solid var(--line);

    padding:
      clamp(1.25rem, 2vw, 1.25rem)
      0;
  }

  .stat-col:first-child {
    border-top: none;
  }
}


/* =========================================
   RELATED SERVICES
   ========================================= */

.related {
  padding:
    clamp(3rem, 5vw, 3.5rem)
    0;
}

.related-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(clamp(250px, 40vw, 500px), 1fr)
    );

  border-top: 1px solid var(--line);

  min-width: 0;
}

.related-item {
  border-left: 1px solid var(--line);

  padding:
    clamp(1.5rem, 2.5vw, 1.75rem);

  transition:
    background 0.15s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;

  min-height: 8rem;

  display: flex;
  flex-direction: column;

  justify-content: center;

  min-width: 0;
}

.related-item:first-child {
  border-left: none;
}

.related-item:hover {
  background: var(--bg-raised);

  transform: translateY(-3px);

  box-shadow:
    0 10px 24px rgba(20, 20, 20, 0.08);
}

.related-item .tag {
  font-family: var(--mono);

  font-size: clamp(9px, 1.2vw, 11px);

  color: var(--text-faint);

  margin-bottom: 0.5rem;
}

.related-item h4 {
  font-family: var(--display-alt);

  font-weight: 700;

  font-size: clamp(16px, 2.5vw, 19px);

  line-height: 1.3;
}

@media (max-width: 700px) {

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

  .related-item {
    border-left: none;

    border-top: 1px solid var(--line);
  }

  .related-item:first-child {
    border-top: none;
  }
}


/* =========================================
   AUDIT / CONTACT FORM
   ========================================= */

.audit {
  padding:
    clamp(3rem, 6vw, 5.5rem)
    0
    clamp(3rem, 6vw, 5.5rem);
}

.audit-head {
  font-family: var(--display);

  font-weight: 900;

  font-size: clamp(22px, 4vw, 38px);

  max-width: 20ch;

  margin-bottom: 0.75rem;

  line-height: 1.1;
}

.audit-sub {
  color: var(--text-dim);

  max-width: 52ch;

  margin-bottom:
    clamp(2rem, 3vw, 2.5rem);

  font-size: clamp(14px, 1.8vw, 15.5px);
}

.audit-bar {
  display: flex;

  border: 1px solid var(--line-strong);

  border-radius: 0.5rem;

  overflow: hidden;
}

.audit-bar input {
  flex: 1;

  background: none;

  border: none;

  color: var(--text);

  font-family: var(--mono);

  font-size: clamp(13px, 1.8vw, 14.5px);

  padding:
    clamp(1rem, 2vw, 1.25rem)
    clamp(1rem, 2vw, 1.25rem);

  border-right: 1px solid var(--line);

  min-height: 3rem;
}

.audit-bar input::placeholder {
  color: var(--text-faint);
}

.audit-bar input:focus {
  outline: none;

  background: var(--bg-raised);
}

.audit-bar input:last-of-type {
  border-right: none;
}

.audit-bar button {
  background: var(--accent);

  color: var(--bg);

  border: none;

  font-family: var(--display-alt);

  font-weight: 700;

  font-size: clamp(12px, 1.8vw, 14.5px);

  padding: 0 clamp(1rem, 2vw, 1.875rem);

  white-space: nowrap;

  transition: background 0.15s ease;

  min-height: 3rem;

  display: flex;

  align-items: center;

  justify-content: center;
}

.audit-bar button:hover {
  background: #D94318;
}

.audit-fine {
  font-family: var(--mono);

  font-size: clamp(10px, 1.3vw, 12px);

  color: var(--text-faint);

  margin-top:
    clamp(0.75rem, 1vw, 0.875rem);
}

@media (max-width: 700px) {

  .audit-bar {
    flex-direction: column;
  }

  .audit-bar input {
    border-right: none;

    border-bottom: 1px solid var(--line);
  }

  .audit-bar input:last-of-type {
    border-bottom: none;
  }

  .audit-bar button {
    padding:
      clamp(1rem, 2vw, 1.125rem);
  }
}


/* =========================================
   CONTACT FORM
   ========================================= */

.contact-grid {
  display: grid;

  grid-template-columns: 1.3fr 1fr;

  border-top: 1px solid var(--line);

  min-width: 0;
}

.contact-form-col {
  padding:
    clamp(2rem, 3vw, 2.5rem)
    clamp(2rem, 3vw, 2.5rem)
    clamp(2rem, 3vw, 2.5rem)
    0;

  border-right: 1px solid var(--line);

  min-width: 0;
}

.contact-info-col {
  padding:
    clamp(2rem, 3vw, 2.5rem)
    0
    clamp(2rem, 3vw, 2.5rem)
    clamp(2rem, 3vw, 2.5rem);

  min-width: 0;
}

.field {
  margin-bottom:
    clamp(1.25rem, 2vw, 1.375rem);
}

.field label {
  display: block;

  font-family: var(--mono);

  font-size: clamp(10px, 1.3vw, 12px);

  color: var(--text-faint);

  margin-bottom: 0.5rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;

  background: var(--bg-raised);

  border: 1px solid var(--line-strong);

  color: var(--text);

  font-family: var(--body);

  font-size: clamp(14px, 1.8vw, 15px);

  padding:
    clamp(0.8rem, 1.5vw, 1rem)
    1rem;

  border-radius: 0.25rem;

  min-height: 3rem;
}

.field textarea {
  resize: vertical;

  min-height: 7.5rem;

  padding: 1rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;

  border-color: var(--accent);

  background: var(--bg);
}

.info-row {
  padding:
    clamp(1rem, 1.5vw, 1.125rem)
    0;

  border-bottom: 1px solid var(--line);
}

.info-row:first-child {
  padding-top: 0;
}

.info-row .k {
  font-family: var(--mono);

  font-size: clamp(10px, 1.2vw, 11.5px);

  color: var(--text-faint);

  margin-bottom: 0.375rem;
}

.info-row .v {
  font-size: clamp(14px, 1.8vw, 15px);

  line-height: 1.5;
}

@media (max-width: 860px) {

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

  .contact-form-col {
    border-right: none;

    border-bottom: 1px solid var(--line);

    padding:
      clamp(1.5rem, 3vw, 2.5rem)
      0;
  }

  .contact-info-col {
    padding:
      clamp(1.5rem, 3vw, 2.5rem)
      0;
  }
}


/* =========================================
   FOOTER
   ========================================= */

footer {
  padding:
    clamp(2rem, 4vw, 3rem)
    0
    clamp(1.5rem, 3vw, 2.5rem);
}

.foot-top {
  display: grid;

  grid-template-columns:
    clamp(200px, 40vw, 300px)
    repeat(
      auto-fit,
      minmax(clamp(120px, 20vw, 200px), 1fr)
    );

  gap:
    clamp(1.5rem, 2.5vw, 1.5rem);

  border-bottom: 1px solid var(--line);

  padding-bottom:
    clamp(1.5rem, 2.5vw, 2.25rem);

  margin-bottom:
    clamp(1rem, 2vw, 1.5rem);

  min-width: 0;
}

.foot-brand {
  font-family: var(--display);

  font-weight: 900;

  font-size: clamp(14px, 2vw, 16px);

  margin-bottom:
    clamp(0.5rem, 1vw, 0.625rem);
}

.foot-tag {
  color: var(--text-dim);

  font-size: clamp(12px, 1.5vw, 13.5px);

  max-width: 32ch;

  line-height: 1.5;
}

.foot-col h5 {
  font-family: var(--mono);

  font-size: clamp(9px, 1.2vw, 11px);

  color: var(--text-faint);

  margin-bottom:
    clamp(0.75rem, 1.5vw, 0.875rem);
}

.foot-col a,
.foot-col span {
  display: flex;

  font-size: clamp(12px, 1.5vw, 13.5px);

  color: var(--text-dim);

  margin-bottom:
    clamp(0.5rem, 1vw, 0.625rem);

  line-height: 1.5;

  min-height: 2.5rem;

  align-items: center;
}

.foot-col a:hover {
  color: var(--text);
}

.foot-grid {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  flex-wrap: wrap;

  gap:
    clamp(1rem, 2vw, 1.5rem);
}

.foot-meta {
  font-family: var(--mono);

  font-size: clamp(10px, 1.3vw, 12px);

  color: var(--text-faint);

  text-align: right;
}

@media (max-width: 800px) {

  .foot-top {
    grid-template-columns: 1fr 1fr;
  }

  .foot-grid {
    justify-content: center;

    text-align: center;
  }

  .foot-meta {
    text-align: center;
  }
}

@media (max-width: 600px) {

  .foot-top {
    grid-template-columns: 1fr;
  }
}


/* =========================================
   MOBILE POLISH
   ========================================= */

@media (max-width: 600px) {

  .panel-label,
  .dash-head {
    font-size: 12px;

    color: var(--text-dim);
  }

  .pricing-cta {
    width: 100%;
  }

  body {
    font-size: 15px;
  }
}

@media (max-width: 400px) {

  .ledger-row > div {
    font-size: 14px;
  }

  .ledger-row .val {
    font-size: 13px;
  }
}


/* =========================================
   MICRO-INTERACTIONS
   ========================================= */

.btn-primary,
.btn-secondary,
.pricing-cta,
.service-link,
.related-item,
.pricing-col {
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);

  box-shadow:
    0 6px 16px rgba(242, 78, 30, 0.22);
}

.btn-secondary:hover {
  transform: translateY(-2px);
}

.pricing-col:hover {
  transform: translateY(-3px);

  box-shadow:
    0 10px 24px rgba(20, 20, 20, 0.08);
}

.pricing-cta:hover {
  transform: translateY(-1px);
}


/* =========================================
   EYEBROW DOT
   ========================================= */

.eyebrow .dot {
  display: inline-block;

  width: 0.4rem;
  height: 0.4rem;

  background: var(--accent);

  border-radius: 50%;

  margin-right: 0.5rem;

  animation: pulse 2s ease-in-out infinite;

  flex-shrink: 0;
}


/* =========================================
   PROCESS MICRO INTERACTION
   ========================================= */

.process-row .process-num {
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.process-row:hover .process-num {
  color: var(--accent);

  transform: translateX(2px);
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  * {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1 !important;

    transform: none !important;
  }

  .service-icon .icon-draw {
    stroke-dashoffset: 0 !important;
  }
}


/* =========================================
   SERVICE ICONS
   ========================================= */

.service-icon {
  width: 100%;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding-top: 0.25rem;
}

.service-icon svg {
  width: clamp(34px, 5vw, 44px);

  height: clamp(34px, 5vw, 44px);

  overflow: visible;
}

.service-icon .icon-frame,
.service-icon .icon-draw {
  stroke: var(--text-dim);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

  fill: none;

  transition:
    stroke 0.25s ease;
}

.service-icon .icon-draw {
  stroke-dasharray: 140;

  stroke-dashoffset: 140;

  animation:
    drawIcon 1s
    cubic-bezier(0.2, 0.8, 0.2, 1)
    forwards;
}

.service-row:nth-child(2) .icon-draw {
  animation-delay: 0.1s;
}

.service-row:nth-child(3) .icon-draw {
  animation-delay: 0.2s;
}

@keyframes drawIcon {

  to {
    stroke-dashoffset: 0;
  }
}

.service-row:hover .service-icon svg,
.service-row.open .service-icon svg {
  transform: translateY(-2px);
}

.service-row:hover .icon-draw,
.service-row.open .icon-draw,
.service-row:hover .icon-frame,
.service-row.open .icon-frame {
  stroke: var(--accent);
}

.service-icon svg {
  transition:
    transform 0.25s ease;
}

@media (max-width: 700px) {

  .service-icon {
    justify-content: flex-start;
  }

  .service-icon svg {
    width: clamp(26px, 7vw, 30px);

    height: clamp(26px, 7vw, 30px);
  }
}


/* =========================================
   SCROLL REVEAL
   ========================================= */

.reveal {
  opacity: 0;

  transform: translateY(24px);

  transition:
    opacity .7s ease,
    transform .7s ease;

  will-change:
    opacity,
    transform;
}

.reveal.in-view {
  opacity: 1;

  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  .reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }
}


/* =========================================
   HONEYPOT
   ========================================= */

.hp-wrap {
  position: absolute;

  left: -9999px;
  top: -9999px;

  width: 1px;
  height: 1px;

  overflow: hidden;
}


/* =========================================
   CLOUDFLARE TURNSTILE
   ========================================= */

.cf-turnstile {
  margin: 14px 0;
}


/* =========================================
   FORM STATUS
   ========================================= */

.form-status {
  font-size: 15px;
  margin-top: 14px;
  display: none;
  line-height: 1.5;
}

.form-status.show {
  display: block;
  padding: 12px 16px;
  border-left: 3px solid currentColor;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
}

.form-status.error {
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}

.form-status.success {
  color: #1a7f37;
  background: rgba(26, 127, 55, 0.09);
  font-weight: 500;
}


/* =========================================
   NAV LINK UNDERLINES
   ========================================= */

.nav-links a,
.foot-col a {
  position: relative;
}

.nav-links a::after,
.foot-col a::after {
  content: '';

  position: absolute;

  left: 0;

  bottom: -3px;

  width: 0;

  height: 1px;

  background: currentColor;

  transition:
    width .25s ease;
}

/*
  Only show the hover underline on desktop.

  The mobile navigation uses its own active/current
  styling and should not get an extra underline.
*/

@media (min-width: 1041px) {

  .nav-links a:hover::after,
  .foot-col a:hover::after {
    width: 100%;
  }
}


/* =========================================
   CTA GLOW
   ========================================= */

.hero-actions .btn-primary,
.audit-bar button {
  animation:
    ctaGlow 3s ease-in-out infinite;
}

@keyframes ctaGlow {

  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(242, 78, 30, 0);
  }

  50% {
    box-shadow:
      0 0 0 6px rgba(242, 78, 30, 0.08);
  }
}


/* =========================================
   STAGGERED REVEAL
   ========================================= */

.reveal-stagger {
  transition-duration: .5s;
}


/* =========================================
   BUTTON LOADING
   ========================================= */

.btn-loading {
  opacity: .7;

  cursor: default;

  pointer-events: none;
}


/* =========================================
   FINAL MOBILE OVERFLOW PROTECTION
   ========================================= */

/*
   These rules prevent horizontal dragging without
   interfering with the fixed mobile navigation.
*/

.wrap,
.hero-grid,
.hero-left,
.hero-right,
.section-head,
.pricing-grid,
.contact-grid,
.foot-top,
.service-top,
.service-inner,
.ledger-row {
  min-width: 0;
}

img,
video,
canvas {
  max-width: 100%;

  height: auto;
}


/* =========================================
   FINAL MOBILE NAV SAFETY
   ========================================= */

@media (max-width: 1040px) {

  .nav .wrap {
    position: relative;

    min-width: 0;
  }

  /*
    Fixed menu must be allowed to span the viewport.
  */

  .nav-links {
    width: 100%;

    max-width: 100vw;

    /*
      Prevent a very tall menu from extending beyond
      the screen on smaller devices.
    */
    max-height:
      calc(100vh - clamp(60px, 10vw, 72px));

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
  }

  /*
    Keep the hamburger above the dropdown.
  */

  .hamburger {
    position: relative;

    z-index: 1001;
  }
}