:root {
  --red: #e53e3e;
  --red-dark: #c9372c;
  --navy: #222b38;
  --slate: #5d6673;
  --text: #1b212b;
  --text-muted: #5d6673;
  --border: #dcdedc;
  --bg: #ffffff;
  --bg-soft: #fdf4f4;
  --header-h: 84px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

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

main { padding-top: var(--header-h); }

section[id] { scroll-margin-top: var(--header-h); }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3 { margin: 0; font-weight: 700; }

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

/* buttons */
.btn {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--outline {
  border-color: var(--red);
  color: var(--red);
  background: transparent;
}
.btn--outline:hover { background: var(--bg-soft); }
.btn--solid {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn--solid:hover { background: var(--red-dark); }

/* header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.brand__mark { border-radius: 6px; }
.brand__name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
}
.site-nav {
  display: flex;
  gap: 1.8rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.site-nav a:hover { color: var(--text); }

/* hero — mesh gradient
   Each --mesh-n*-{x,y,color} is one Figma-style "mesh point". Tweak position
   (% of the hero box) and color per node to reshape the gradient; nothing
   else needs to change. --mesh-base fills any gaps the nodes don't reach. */
.hero {
  --mesh-base: #ffffff;
  --mesh-n1-x: 6%;   --mesh-n1-y: 8%;    --mesh-n1-color: #ffffff;
  --mesh-n2-x: 65%;  --mesh-n2-y: 2%;    --mesh-n2-color: #ffe4da;
  --mesh-n3-x: 18%;  --mesh-n3-y: 52%;   --mesh-n3-color: #fff4f2;
  --mesh-n4-x: 93%;  --mesh-n4-y: 32%;   --mesh-n4-color: #ff8266;
  --mesh-n5-x: 52%;  --mesh-n5-y: 66%;   --mesh-n5-color: #ee5a4a;
  --mesh-n6-x: 14%;  --mesh-n6-y: 100%;  --mesh-n6-color: #d94438;
  --mesh-n7-x: 88%;  --mesh-n7-y: 98%;   --mesh-n7-color: #c9372c;

  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--mesh-base);
  background-image:
    radial-gradient(circle at var(--mesh-n1-x) var(--mesh-n1-y), var(--mesh-n1-color) 0%, transparent 38%),
    radial-gradient(circle at var(--mesh-n2-x) var(--mesh-n2-y), var(--mesh-n2-color) 0%, transparent 40%),
    radial-gradient(circle at var(--mesh-n3-x) var(--mesh-n3-y), var(--mesh-n3-color) 0%, transparent 42%),
    radial-gradient(circle at var(--mesh-n4-x) var(--mesh-n4-y), var(--mesh-n4-color) 0%, transparent 45%),
    radial-gradient(circle at var(--mesh-n5-x) var(--mesh-n5-y), var(--mesh-n5-color) 0%, transparent 48%),
    radial-gradient(circle at var(--mesh-n6-x) var(--mesh-n6-y), var(--mesh-n6-color) 0%, transparent 50%),
    radial-gradient(circle at var(--mesh-n7-x) var(--mesh-n7-y), var(--mesh-n7-color) 0%, transparent 55%);
}
.hero__wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
.hero__copy {
  grid-column: 1 / span 2;
  max-width: 46ch;
}
.hero__copy h1 {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.hero__tagline {
  color: var(--red);
  font-size: 1.05rem;
  margin: 0.6rem 0 0;
}
.hero__graphic {
  position: absolute;
  top: 8%;
  right: 4%;
  height: 76%;
  z-index: 0;
  pointer-events: none;
}
.hero-graphic-svg {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
  animation: hero-float 6s ease-in-out infinite;
}
.hero-graphic-svg .nodes circle {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 3.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.hero-graphic-svg .links path {
  stroke: #fff;
  stroke-width: 5;
  animation: link-breathe 3.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes node-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.55; }
}
@keyframes link-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-graphic-svg,
  .hero-graphic-svg .nodes circle,
  .hero-graphic-svg .links path {
    animation: none;
  }
}
.hero__banner {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.9rem 1.5rem 1.1rem;
}

/* services */
.services {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0 4rem;
}
.section-heading {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  line-height: 1.4;
  position: relative;
  padding-bottom: 1.1rem;
}
.section-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--red);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.5rem;
}

/* the outer slot is a fixed-size grid item — it never resizes, so the grid
   row, the heading above, and everything below never move. the inner box is
   absolutely positioned to that slot and is what visually grows on hover,
   overlapping whatever is beneath it instead of pushing it down. */
.service-card {
  position: relative;
  height: 160px;
}
.service-card__box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.55rem;
  background: #fff;
  border: 1.5px solid var(--red);
  border-radius: 10px;
  padding: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  transition: height 0.35s ease, gap 0.35s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.service-card:hover .service-card__box,
.service-card:focus-visible .service-card__box {
  height: 300px;
  gap: 1.1rem;
  z-index: 5;
  background: var(--red);
  box-shadow: 0 18px 34px rgba(229,62,62,0.3);
  transform: translateY(-4px);
}
.service-card:focus-visible .service-card__box { outline: 2px solid var(--navy); outline-offset: 3px; }

/* the service's own icon doubles as the hover affordance: it lives in the
   upper-right corner in both states so nothing has to travel across the
   card — only its size/color change. */
.service-card__icon {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.service-card__icon svg { width: 55%; height: 55%; }
.service-card:hover .service-card__icon,
.service-card:focus-visible .service-card__icon {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: #fff;
  color: var(--red);
}

/* title clears the icon vertically (padding-top) rather than dodging it
   horizontally — that way it gets the full card width to wrap in, and sits
   tight against the icon above it instead of trailing off with dead space
   to its right. */
.service-card__title {
  margin: 0;
  padding-top: 3.3rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  transition: color 0.3s ease;
}
.service-card:hover .service-card__title,
.service-card:focus-visible .service-card__title {
  color: #fff;
}

.service-card__tagline {
  display: none;
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.35;
}
.service-card__divider {
  display: none;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.4);
  margin: 0;
  width: 100%;
}
.service-card__desc {
  display: none;
  margin: 0;
  color: rgba(255,255,255,0.92);
  font-size: 0.8rem;
  line-height: 1.45;
}
.service-card:hover .service-card__tagline,
.service-card:focus-visible .service-card__tagline,
.service-card:hover .service-card__divider,
.service-card:focus-visible .service-card__divider,
.service-card:hover .service-card__desc,
.service-card:focus-visible .service-card__desc {
  display: block;
}

/* process */
.process {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  padding: 2.2rem 0;
}
.process__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}
.process__heading {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.4rem);
  line-height: 1.35;
  max-width: 64ch;
}

/* the waterfall: each step nudges further right (and shrinks to match, so
   its right edge stays flush with the section) than the last, so the list
   spans the full section width while still cascading top to bottom. the
   short tick below each marker implies the flow continuing to the next,
   staggered step. */
.steps {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 82%;
  background: var(--slate);
  border-radius: 8px;
  padding: 0.85rem 1.3rem;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 2.55rem;
  bottom: -0.9rem;
  width: 2px;
  height: 0.9rem;
  background: rgba(255, 255, 255, 0.25);
}
.step:nth-child(1) { margin-left: 0; }
.step:nth-child(2) { margin-left: 6%; }
.step:nth-child(3) { margin-left: 12%; }
.step:nth-child(4) { margin-left: 18%; }
.step__marker {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__marker svg { width: 1.3rem; height: 1.3rem; }
.step__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.2rem;
}
.step__body h3 { font-size: 0.98rem; margin-bottom: 0.2rem; }
.step__body p { margin: 0; font-size: 0.83rem; color: rgba(255,255,255,0.85); }

/* team */
.team {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.5rem 0;
}
.team__inner {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}
.team__intro { flex: 0 0 260px; }
.team__mission {
  font-size: 1.3rem;
  line-height: 1.35;
  margin-top: 1.3rem;
}
.team__people {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
}
.person__photo {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: 4px;
  background: #e2e2e2;
}
.person__photo--avatar {
  object-fit: contain;
  padding: 2.2rem;
  background: #f3f3f3;
}
.person h3 { margin-top: 1.1rem; font-size: 1.15rem; }
.person__role { color: var(--red); font-weight: 600; font-size: 0.88rem; margin: 0.25rem 0 0.6rem; }
.person__bio { color: var(--text-muted); font-size: 0.86rem; margin: 0; }

/* contact */
.contact {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}
.contact__banner {
  background: var(--red);
  color: #fff;
  padding: 1.4rem 0;
}
.contact__banner h2 { font-size: 1.3rem; }
.contact__banner p { max-width: 60ch; margin: 0.4rem 0 0; opacity: 0.95; font-size: 0.88rem; }
.contact__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1.5rem;
}
.contact__row {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}
.contact__form {
  flex: 1;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.contact__form h3 { font-size: 1.5rem; margin-bottom: 0.2rem; }
.contact__form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.contact__form input,
.contact__form textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}
.contact__form .btn { align-self: flex-start; margin-top: 0.2rem; }
.contact__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact__status {
  margin: 0;
  font-size: 0.85rem;
}
.contact__status[data-state="error"] { color: var(--red); }
.contact__status[data-state="success"] { color: var(--text-muted); }
.contact__alt {
  flex: 0 0 260px;
  padding: 0 0 1.6rem 2.2rem;
  border-left: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text-muted);
}
.contact__email {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--red);
  font-weight: 700;
  font-size: 1.05rem;
}

/* footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.2rem 0;
}
.site-footer p {
  margin: 0;
  text-align: right;
  font-size: 0.78rem;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { grid-column: 1; max-width: none; }
  .hero__graphic { top: auto; bottom: 0; right: 50%; transform: translateX(50%); height: 55%; opacity: 0.4; }
  .services-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .service-card, .service-card__box { height: 170px; }
  .team__inner { flex-direction: column; }
  .team__people { grid-template-columns: 1fr; max-width: 340px; }
  .contact__row { flex-direction: column; }
  .contact__alt { border-left: none; border-top: 1px solid var(--border); padding: 1.6rem 0 0; }
  .step { width: 100%; }
  .step:nth-child(1), .step:nth-child(2), .step:nth-child(3), .step:nth-child(4) { margin-left: 0; }
  .site-nav { display: none; }
}