:root {
  --ink: #111827;
  --muted: #526070;
  --paper: #f4f7fb;
  --paper-2: #e6ebf3;
  --line: #c8d1df;
  --forest: #1e365f;
  --copper: #526da8;
  --gold: #8fa4d3;
  --white: #ffffff;
  --shadow: 0 18px 55px rgba(17, 24, 39, 0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(18px, 4vw, 56px);
  color: var(--white);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
}

.brand-logo {
  width: 218px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
}

.brand-subtitle { display: none; }

.nav-links {
  display: flex;
  gap: 22px;
  color: var(--ink);
  font-size: 14px;
}

.nav-links a, .nav-action { transition: color 160ms ease, background 160ms ease; }
.nav-links a:hover { color: var(--forest); }

.nav-action, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid currentColor;
  font-weight: 700;
}

.nav-action { color: var(--forest); font-size: 14px; }
.nav-action:hover, .button.primary { color: var(--white); background: var(--copper); border-color: var(--copper); }

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.hero-image, .hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image {
  object-fit: cover;
  object-position: center 44%;
  filter: saturate(0.92);
  z-index: -2;
}

.hero-scrim {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(9, 14, 27, 0.9), rgba(21, 35, 62, 0.62) 44%, rgba(21, 35, 62, 0.16)),
    linear-gradient(0deg, rgba(9, 14, 27, 0.58), transparent 45%);
}

.hero-content {
  width: min(900px, calc(100% - 36px));
  margin: 0 clamp(18px, 6vw, 88px) clamp(56px, 9vh, 96px);
  color: var(--white);
}

.workflow-visual {
  position: absolute;
  right: clamp(28px, 6vw, 96px);
  bottom: clamp(70px, 12vh, 140px);
  width: min(440px, 34vw);
  min-height: 330px;
  border: 1px solid rgba(182, 198, 238, 0.32);
  background: rgba(13, 25, 47, 0.58);
  box-shadow: 0 24px 60px rgba(4, 8, 18, 0.36);
  overflow: hidden;
}

.workflow-stage {
  position: absolute;
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: center;
  inset: 28px;
  color: var(--white);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  animation: workflowStage 12s infinite;
}

.workflow-stage strong {
  font-size: 14px;
  color: #d7e2ff;
  text-align: center;
}

.stage-cloud { animation-delay: 0s; }
.stage-plan { animation-delay: 3s; }
.stage-area { animation-delay: 6s; }
.stage-model { animation-delay: 9s; }

@keyframes workflowStage {
  0%, 21%, 100% { opacity: 0; transform: translateY(14px) scale(0.98); }
  4%, 18% { opacity: 1; transform: translateY(0) scale(1); }
}

.point-cloud {
  position: relative;
  width: 260px;
  height: 190px;
}

.point-cloud span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #c8d6ff;
  box-shadow: 0 0 18px rgba(200, 214, 255, 0.88);
  animation: pointPulse 1.8s ease-in-out infinite;
}

.point-cloud span:nth-child(1) { left: 20%; top: 20%; }
.point-cloud span:nth-child(2) { left: 40%; top: 14%; animation-delay: .1s; }
.point-cloud span:nth-child(3) { left: 60%; top: 20%; animation-delay: .2s; }
.point-cloud span:nth-child(4) { left: 76%; top: 34%; animation-delay: .3s; }
.point-cloud span:nth-child(5) { left: 18%; top: 50%; animation-delay: .4s; }
.point-cloud span:nth-child(6) { left: 35%; top: 42%; animation-delay: .5s; }
.point-cloud span:nth-child(7) { left: 52%; top: 46%; animation-delay: .6s; }
.point-cloud span:nth-child(8) { left: 70%; top: 54%; animation-delay: .7s; }
.point-cloud span:nth-child(9) { left: 26%; top: 72%; animation-delay: .8s; }
.point-cloud span:nth-child(10) { left: 48%; top: 76%; animation-delay: .9s; }
.point-cloud span:nth-child(11) { left: 66%; top: 74%; animation-delay: 1s; }
.point-cloud span:nth-child(12) { left: 84%; top: 66%; animation-delay: 1.1s; }
.point-cloud span:nth-child(n+13) { width: 4px; height: 4px; opacity: .7; }
.point-cloud span:nth-child(13) { left: 10%; top: 36%; }
.point-cloud span:nth-child(14) { left: 90%; top: 42%; }
.point-cloud span:nth-child(15) { left: 58%; top: 8%; }
.point-cloud span:nth-child(16) { left: 44%; top: 90%; }
.point-cloud span:nth-child(17) { left: 30%; top: 58%; }
.point-cloud span:nth-child(18) { left: 78%; top: 82%; }

@keyframes pointPulse {
  0%, 100% { transform: scale(0.8); opacity: .42; }
  50% { transform: scale(1.35); opacity: 1; }
}

.plan-sheet {
  position: relative;
  width: 270px;
  height: 190px;
  border: 2px solid #d7e2ff;
  background:
    linear-gradient(90deg, transparent 49%, rgba(215, 226, 255, .18) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(215, 226, 255, .18) 50%, transparent 51%);
}

.wall,
.cut {
  position: absolute;
  background: #d7e2ff;
}

.wall-a { left: 18%; top: 18%; width: 62%; height: 4px; }
.wall-b { left: 18%; top: 18%; width: 4px; height: 58%; }
.wall-c { left: 46%; top: 18%; width: 4px; height: 58%; }
.wall-d { left: 18%; top: 76%; width: 62%; height: 4px; }
.cut-a { right: 12%; top: 20%; width: 2px; height: 58%; opacity: .65; }
.cut-b { right: 8%; top: 34%; width: 42px; height: 2px; opacity: .65; }

.area-sheet {
  width: 240px;
  padding: 28px;
  border: 1px solid rgba(215, 226, 255, .55);
  background: rgba(82, 109, 168, .22);
  display: grid;
  gap: 4px;
  text-align: center;
}

.area-sheet span,
.area-sheet em {
  color: #d7e2ff;
  font-style: normal;
  font-size: 13px;
}

.area-sheet b {
  font-size: 48px;
  line-height: 1;
}

.model-cube {
  width: 150px;
  height: 150px;
  position: relative;
  transform: rotateX(58deg) rotateZ(43deg);
  transform-style: preserve-3d;
  animation: cubeTurn 4s linear infinite;
}

.model-cube,
.model-cube span,
.model-cube::before,
.model-cube::after {
  border: 2px solid #d7e2ff;
  background: rgba(82, 109, 168, .22);
}

.model-cube span,
.model-cube::before,
.model-cube::after {
  content: "";
  position: absolute;
  inset: 0;
}

.model-cube span { transform: translateZ(70px); }
.model-cube::before { transform: rotateX(90deg) translateZ(70px); }
.model-cube::after { transform: rotateY(90deg) translateZ(70px); }

@keyframes cubeTurn {
  from { transform: rotateX(58deg) rotateZ(43deg); }
  to { transform: rotateX(58deg) rotateZ(403deg); }
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--copper);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
}

.hero .eyebrow { color: #b6c6ee; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 820px; margin-bottom: 18px; font-size: clamp(43px, 7vw, 82px); line-height: 1; letter-spacing: 0; }
h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.08; letter-spacing: 0; margin-bottom: 18px; }
h3 { font-size: 20px; line-height: 1.2; margin-bottom: 10px; }

.hero-text {
  max-width: 660px;
  color: rgba(255, 253, 248, 0.86);
  font-size: clamp(18px, 2vw, 22px);
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.button.secondary { color: var(--white); background: rgba(255, 253, 248, 0.08); border-color: rgba(255, 253, 248, 0.68); }
.button.secondary:hover { background: rgba(255, 253, 248, 0.18); }

.section, .band { padding: clamp(70px, 9vw, 112px) 0; }
.band { background: var(--paper-2); }
.dark { background: var(--paper-2); color: var(--ink); }
.section-inner { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }

.split, .media-row, .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  gap: clamp(32px, 7vw, 92px);
  align-items: center;
}

.intro p, .media-copy p, .contact-grid p { color: var(--muted); font-size: 18px; }
.dark .media-copy p { color: var(--muted); }
.section-heading { max-width: 760px; margin-bottom: 34px; }

.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-card, .reference-list article, .location-grid article, .contact-card {
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
}

.service-card { min-height: 300px; padding: 24px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.service-card > * { position: relative; z-index: 1; }
.service-card h3 { overflow-wrap: anywhere; }
.service-card::after {
  content: "";
  position: absolute;
  inset: auto 20px 18px auto;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(82, 109, 168, 0.22);
  transform: rotate(15deg);
}
.service-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 40px;
  margin-top: auto;
  padding: 0 16px;
  color: var(--white);
  background: var(--copper);
  border: 1px solid var(--copper);
  font-size: 14px;
  font-weight: 800;
}

.service-cta:hover { background: var(--forest); border-color: var(--forest); }
.service-card p, .reference-list p, .location-grid p { color: var(--muted); }
.service-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 34px;
  color: var(--forest);
  border: 1px solid var(--forest);
  background: rgba(82, 109, 168, 0.08);
}

.service-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-number {
  position: absolute;
  right: 24px;
  top: 24px;
  color: var(--copper);
  font-weight: 800;
  font-size: 13px;
}

.feature-image {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.feature-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; padding: 24px; filter: none; }
.reference-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 18px; align-items: start; }
.reference-main { background: var(--white); border: 1px solid var(--line); }
.reference-main img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
.reference-main-copy { padding: 24px; }
.reference-kicker { color: var(--copper); font-weight: 800; text-transform: uppercase; font-size: 13px; margin-bottom: 8px; }
.reference-main p { color: var(--muted); margin-bottom: 0; }
.reference-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reference-item {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  padding: 16px;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.reference-item:hover,
.reference-item.is-active {
  border-color: var(--copper);
  background: #eef3ff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.08);
  transform: translateY(-1px);
}

.reference-item span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  color: var(--forest);
  border: 1px solid var(--forest);
  font-size: 12px;
  font-weight: 800;
}

.reference-item h3,
.reference-item strong {
  display: block;
  margin: 0 0 8px;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.reference-item small {
  display: block;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

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

.reference-gallery button {
  appearance: none;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
}

.reference-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.location-grid article { padding: 24px; }
.contact-section { background: var(--forest); color: var(--white); }
.contact-section .eyebrow { color: var(--gold); }
.contact-grid p { color: rgba(255, 253, 248, 0.76); }
.contact-stack { display: grid; gap: 16px; }
.contact-form,
.contact-card { padding: 26px; display: grid; gap: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--line); }
.contact-card strong { font-size: 22px; }
.contact-card a { color: var(--forest); font-weight: 800; }
.contact-card-lead { margin-bottom: 30px; }

.contact-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #f8fbff;
  color: var(--ink);
  font: inherit;
  padding: 12px 13px;
}

.contact-form textarea { resize: vertical; }
.contact-form .button { width: 100%; border-color: var(--copper); }
.form-note { color: var(--muted) !important; font-size: 14px !important; margin: 0; }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px clamp(18px, 4vw, 56px);
  color: rgba(255, 253, 248, 0.78);
  background: #0b1220;
  font-size: 14px;
}

.site-footer nav { display: flex; gap: 18px; }
.legal { width: min(820px, calc(100% - 36px)); margin: 0 auto; padding: 72px 0; }
.legal h1 { color: var(--ink); font-size: clamp(38px, 6vw, 64px); }
.legal h2 { margin-top: 34px; font-size: 26px; }
.legal p { color: var(--muted); }
.legal a { color: var(--forest); font-weight: 800; }
.legal-note {
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: #eef3ff;
  color: var(--ink) !important;
}
.back-link { display: inline-flex; margin-bottom: 34px; color: var(--forest); font-weight: 800; }

@media (max-width: 920px) {
  .site-header { position: absolute; flex-wrap: wrap; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .split, .media-row, .contact-grid, .reference-layout { grid-template-columns: 1fr; }
  .reference-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-visual { display: none; }
}

@media (max-width: 620px) {
  .site-header { padding: 12px 14px; }
  .brand { min-width: 0; }
  .brand-logo { width: 190px; }
  .nav-action { min-height: 38px; padding-inline: 12px; }
  .hero { min-height: 88svh; }
  .hero-content { margin-inline: 18px; }
  h1 { font-size: 43px; }
  .service-grid, .reference-list, .location-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 220px; }
  .site-footer { display: grid; }
}

/* Layout without unpublished project photography. */
.hero { background: #15233e; }
.media-row { grid-template-columns: minmax(0, 1fr); }
.location-grid { grid-template-columns: minmax(0, 1fr); }