:root {
  color-scheme: dark;
  --bg: #090b0d;
  --panel: #111417;
  --panel-strong: #161a1e;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(33, 195, 243, 0.38);
  --text: #f5f7f8;
  --muted: #aeb8bf;
  --quiet: #737f87;
  --cyan: #21c3f3;
  --cyan-deep: #08a8da;
  --warm: #f0c77c;
  --shadow: rgba(0, 0, 0, 0.42);
  --max: 1180px;

  /* Fonts — swap these two lines to restyle the whole site.
     Display = headings/labels, Body = paragraphs/UI text. */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  min-height: 100%;
  overflow-y: auto;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(9, 11, 13, 0.7), var(--bg) 46rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

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

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

button,
input,
select,
textarea {
  font: inherit;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 30;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: var(--cyan);
  color: #031014;
  font-weight: 800;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  background: rgba(9, 11, 13, 0.18);
  backdrop-filter: blur(14px);
  transition: background 180ms ease, border-color 180ms ease;
}

.site-header.is-scrolled {
  border-color: var(--line);
  background: rgba(9, 11, 13, 0.86);
}

.nav-shell {
  width: 100%;
  min-height: 5.25rem;
  margin: 0;
  padding-inline: clamp(1.25rem, 3.5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  width: 15.25rem;
  max-width: 56vw;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 0.65rem 1.4rem rgba(0, 0, 0, 0.34));
}

.brand-mark img {
  width: 100%;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  color: #d9e3e8;
  font-size: 0.95rem;
}

.nav-links a {
  position: relative;
}

.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  min-height: 2.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(33, 195, 243, 0.6);
  border-radius: 8px;
  color: #e9fbff;
  background: rgba(33, 195, 243, 0.08);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: rgba(33, 195, 243, 0.16);
  box-shadow: 0 0 1.4rem rgba(33, 195, 243, 0.32);
}

.menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
}

.menu-toggle span:not(.sr-only) {
  display: block;
  width: 1.1rem;
  height: 2px;
  margin: 0.22rem auto;
  background: currentColor;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  padding: 8rem 1rem 2rem;
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media {
  /* Shows the full video at native proportions. */
  background-image: url("assets/rain-frame.webp");
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}

.hero-overlay {
  z-index: -1;
  /* Page-colored gradients dissolve the video's edges into the background.
     The fade is gentler on the left (where the building sits) and deeper on the
     right (mostly empty sky), so the seam disappears without dimming the building.
     Top fades across ~30%; bottom grounds the text. */
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(9, 11, 13, 0.65) 10%, rgba(9, 11, 13, 0) 26%, rgba(9, 11, 13, 0) 55%, rgba(9, 11, 13, 0.7) 85%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(9, 11, 13, 0.6) 12%, rgba(9, 11, 13, 0) 32%, rgba(9, 11, 13, 0) 50%, rgba(9, 11, 13, 0.85) 80%, var(--bg) 100%);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(33, 195, 243, 0.7), transparent);
}

.hero-content {
  position: relative;
  width: min(calc(100% - 1rem), var(--max));
  margin: 0 auto;
  padding-bottom: 3rem;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.05;
  text-wrap: balance;
  letter-spacing: -0.015em;
}

p {
  letter-spacing: 0;
}

h1 {
  max-width: 49rem;
  font-size: 3.65rem;
  font-weight: 800;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

h2 {
  max-width: 48rem;
  font-size: 3rem;
  font-weight: 800;
}

h3 {
  font-size: 1.35rem;
  font-weight: 700;
}

.hero-copy {
  max-width: 42rem;
  margin: 1.35rem 0 0;
  color: #d8e0e4;
  font-size: 1.18rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

.button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--cyan);
  color: #031014;
  box-shadow: 0 0.7rem 1.6rem rgba(33, 195, 243, 0.26), 0 0 0 1px rgba(33, 195, 243, 0.2);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: #34cdf8;
  box-shadow: 0 0.9rem 2.4rem rgba(33, 195, 243, 0.42), 0 0 1.6rem rgba(33, 195, 243, 0.3);
}

.button-secondary {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.07);
  color: #f4f8fa;
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: rgba(33, 195, 243, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.signal-section {
  width: min(calc(100% - 2rem), var(--max));
  margin: -2rem auto 0;
  position: relative;
  z-index: 3;
}

.hero-panel {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 16, 18, 0.8);
  box-shadow: 0 1.4rem 4rem var(--shadow);
  backdrop-filter: blur(18px);
}

.hero-panel p {
  margin: 0;
  color: #dfe7ea;
  font-weight: 600;
}

.signal-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.signal-list span {
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: #cbd5da;
  font-size: 0.9rem;
  text-align: center;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.signal-list span:hover {
  border-color: var(--line-strong);
  background: rgba(33, 195, 243, 0.06);
  color: #e9fbff;
}

.section {
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
  padding: 6rem 0;
}

.section-intro {
  max-width: 58rem;
  margin-bottom: 2.5rem;
}

.section-intro p:not(.eyebrow),
.approach-content > p,
.contact-copy > p {
  color: var(--muted);
  font-size: 1.08rem;
}

.custom-note {
  margin-bottom: 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(33, 195, 243, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.03);
}

.custom-note-lead {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #e9fbff;
}

.custom-note-body {
  margin: 0 0 1rem;
  max-width: 60rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.custom-note-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.custom-note-points span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #dbe4e8;
  font-size: 0.88rem;
}

.custom-note-points span::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 0.6rem rgba(33, 195, 243, 0.6);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.service-card,
.fit-card,
.contact-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.16);
}

.service-card {
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 1.6rem 3.4rem rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(33, 195, 243, 0.12);
}

.card-kicker {
  width: 2.7rem;
  height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(33, 195, 243, 0.08);
  font-family: var(--font-display);
  font-weight: 700;
}

.service-card p,
.fit-card p {
  color: var(--muted);
}

.service-card ul {
  display: grid;
  gap: 0.6rem;
  margin: auto 0 0;
  padding: 1.2rem 0 0;
  list-style: none;
  color: #dbe4e8;
}

.service-card li {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.service-card li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--warm);
  box-shadow: 0 0 1rem rgba(240, 199, 124, 0.48);
}

.split-section {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(0, 34rem) minmax(0, 40rem) minmax(1rem, 1fr);
  gap: 3rem;
  align-items: stretch;
  padding: 5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #0b0e10;
}

.image-band {
  grid-column: 2;
  align-self: stretch;
  min-height: 38rem;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0a0d10;
}

.image-band picture {
  display: block;
  width: 100%;
  height: 100%;
}

.image-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% center;
  opacity: 0.92;
}

.approach-content {
  grid-column: 3;
  align-self: center;
  padding-right: 1rem;
}

.process-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 2rem;
}

.process-list div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.process-list div:last-child {
  border-bottom: 1px solid var(--line);
}

.process-list span {
  color: var(--warm);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.process-list p {
  margin: 0;
  color: var(--muted);
}

.fit-section {
  padding-top: 6.5rem;
}

.compact {
  margin-bottom: 2rem;
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.fit-card {
  min-height: 15rem;
  padding: 1.25rem;
  background:
    linear-gradient(180deg, rgba(33, 195, 243, 0.06), transparent 42%),
    rgba(255, 255, 255, 0.035);
  transition: transform 200ms ease, border-color 200ms ease;
}

.fit-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}

.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 0.8fr);
  gap: 3rem;
  align-items: start;
  padding-top: 5rem;
}

.contact-copy {
  position: sticky;
  top: 7rem;
}

.contact-direct {
  display: grid;
  gap: 0.5rem;
  margin-top: 2rem;
  color: #dfe7ea;
}

.contact-direct a {
  color: var(--cyan);
  font-weight: 700;
}

.contact-form {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.contact-form label {
  display: grid;
  gap: 0.45rem;
  color: #dce5e9;
  font-weight: 600;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(4, 6, 7, 0.68);
  color: var(--text);
  padding: 0.85rem 0.9rem;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-form textarea {
  resize: vertical;
  min-height: 9rem;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(33, 195, 243, 0.14);
}

.form-button {
  width: 100%;
  cursor: pointer;
}

.form-note {
  margin: 0;
  color: var(--quiet);
  font-size: 0.9rem;
}

.site-footer {
  width: min(calc(100% - 2rem), var(--max));
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  color: var(--quiet);
}

.site-footer p {
  margin: 0;
}

.social-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--quiet);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.social-row a:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(33, 195, 243, 0.35);
}

/* ---- Scroll reveal ----
   Hidden only when JS is active (html.js); without JS everything stays visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms ease;
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger cards within a grid for a sequenced feel */
.service-grid .reveal.is-visible:nth-child(2) { transition-delay: 90ms; }
.service-grid .reveal.is-visible:nth-child(3) { transition-delay: 180ms; }
.fit-grid .reveal.is-visible:nth-child(2) { transition-delay: 90ms; }
.fit-grid .reveal.is-visible:nth-child(3) { transition-delay: 180ms; }

@media (max-width: 940px) {
  .menu-toggle {
    display: inline-block;
  }

  .nav-links {
    position: fixed;
    top: 5.25rem;
    left: 1rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0b0e10;
    box-shadow: 0 1.4rem 3rem var(--shadow);
  }

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

  .nav-links a {
    padding: 0.95rem;
  }

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

  .nav-cta {
    margin-top: 0.3rem;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.4rem;
  }

  .hero {
    min-height: 86svh;
  }

  .hero-panel,
  .service-grid,
  .fit-grid,
  .contact-section {
    grid-template-columns: 1fr;
  }

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

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

  .split-section {
    grid-template-columns: 1rem minmax(0, 1fr) 1rem;
    gap: 2rem;
  }

  .image-band,
  .approach-content {
    grid-column: 2;
  }

  .image-band {
    min-height: 18rem;
  }

  .approach-content {
    padding-right: 0;
  }

  .contact-copy {
    position: static;
  }
}

@media (max-width: 620px) {
  .nav-shell {
    min-height: 4.65rem;
  }

  .brand-mark {
    width: 12.25rem;
  }

  .nav-links {
    top: 4.65rem;
  }

  .hero {
    padding-top: 6.75rem;
  }

  .hero-media {
    background-position: 32% center;
  }

  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(9, 11, 13, 0.94), rgba(9, 11, 13, 0.62)),
      linear-gradient(180deg, rgba(9, 11, 13, 0.18), var(--bg) 92%);
  }

  h1 {
    font-size: 2.22rem;
  }

  h2 {
    font-size: 2rem;
  }

  .hero-copy,
  .section-intro p:not(.eyebrow),
  .approach-content > p,
  .contact-copy > p {
    font-size: 1rem;
  }

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

  .signal-list {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 4.5rem 0;
  }

  .process-list div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .image-band {
    min-height: 18rem;
  }

  .site-footer {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  /* Never leave reveal content stuck invisible when motion is off */
  .js .reveal {
    opacity: 1;
    transform: none;
  }

  /* Show the static poster instead of the moving video */
  .hero-video {
    display: none;
  }
}

.service-area {
  margin-top: 1.25rem;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}