/* ==========================================================================
   SECTION LAYOUTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--s-8));
  padding-bottom: var(--s-7);
  overflow: hidden;
  background: var(--c-void);
  border-top: 0;
}

/* Layered hero canvas: point cloud + contour fallback + vignette */
.hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero__cloud.is-ready { opacity: 1; }

.hero__contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: opacity 1.2s var(--ease-out);
}
/* Once the live cloud is up the contours drop back to a supporting layer. */
.hero.is-cloud-ready .hero__contours { opacity: 0.22; }

/* Readability scrim.
   Weighted to the lower-left, where the headline sits: the text keeps full
   contrast while the upper right stays clear enough to read the point cloud
   as the subject of the composition rather than a texture. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--c-void) 1%, rgba(5, 6, 7, 0.82) 22%, rgba(5, 6, 7, 0.12) 62%, rgba(5, 6, 7, 0.1) 100%),
    radial-gradient(ellipse 75% 62% at 12% 78%, rgba(5, 6, 7, 0.88), transparent 68%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

/* Phones load no WebGL backdrop (see initAmbientClouds): the headline block fills
   the screen, and points behind the copy cost more legibility than they add. The
   contour art carries the hero instead.

   Tablets and landscape phones do load the cloud, and there the copy covers most
   of the frame, so the scrim is heavier than on a desktop where the headline has
   empty ground to itself. */
@media (max-width: 1023px) {
  .hero__scrim {
    background:
      linear-gradient(to top, var(--c-void) 1%, rgba(5, 6, 7, 0.9) 28%, rgba(5, 6, 7, 0.62) 52%, rgba(5, 6, 7, 0.2) 76%, rgba(5, 6, 7, 0.08) 100%),
      linear-gradient(to right, rgba(5, 6, 7, 0.7) 0, rgba(5, 6, 7, 0.4) 50%, transparent 90%);
  }
}

.hero__eyebrow { margin-bottom: var(--s-5); }

.hero__title {
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  max-width: 18ch;
  margin-bottom: var(--s-5);
}
.hero__title em {
  font-style: normal;
  color: var(--c-text-dim);
}

.hero__lead {
  font-size: var(--t-lead);
  color: var(--c-text-muted);
  max-width: 52ch;
  line-height: 1.55;
  margin-bottom: var(--s-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}

/* Bottom strip: sensor tag + 3-step summary + scroll cue */
.hero__foot {
  display: grid;
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}

.hero__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
}

.hero__step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.hero__step i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}
.hero__step + .hero__step::before {
  content: '→';
  margin-right: var(--s-3);
  color: var(--c-text-faint);
}
/* Once the strip wraps, a leading arrow reads as a stray glyph. The sensor tag
   gets its own line so it never sits half-way along a row of steps. */
@media (max-width: 640px) {
  .hero__step + .hero__step::before { content: none; }
  .hero__steps { gap: var(--s-3) var(--s-5); }
  .hero__steps::after { content: ''; order: 1; flex-basis: 100%; height: 0; }
  .hero__steps .badge { order: 2; }
}

.hero__scroll {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.hero__scroll svg { width: 14px; height: 14px; animation: nudge 2.2s var(--ease-in-out) infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll svg { animation: none; }
}

@media (min-width: 900px) {
  .hero__foot {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .hero__scroll { display: flex; }
}

/* Hero HUD — floating technical annotation over the cloud */
.hero__hud {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  top: calc(var(--nav-h) + var(--s-6));
  display: none;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: rgba(8, 9, 11, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (min-width: 1100px) {
  .hero__hud { display: flex; }
}

.hero__hud-item { display: grid; gap: 2px; }
.hero__hud-item dt {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  color: var(--c-text-faint);
}
.hero__hud-item dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   POINT-CLOUD SECTION
   -------------------------------------------------------------------------- */

.cloud-section__meta {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-5);
}

.cloud-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.cloud-stat {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding: var(--s-4) var(--s-5);
  background: var(--c-bg);
}
.cloud-stat dt {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.cloud-stat dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-h4);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Two cells per row on a phone leave ~125px of text: a survey name like
   "ZONA URBANA 1" must not strand its last character on a second line. */
@media (max-width: 600px) {
  .cloud-stat { padding: var(--s-4); }
  .cloud-stat dd { font-size: 1rem; }
}

.cloud-note {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  line-height: 1.6;
  max-width: 72ch;
}
.cloud-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--c-text-faint); }

/* --------------------------------------------------------------------------
   PIPELINE (capture → process → model → deliver)
   -------------------------------------------------------------------------- */

.pipeline {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
}

@media (min-width: 900px) {
  .pipeline { grid-template-columns: repeat(4, 1fr); }
}

.pipeline__step {
  position: relative;
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-6) var(--s-5) var(--s-8);
  background: var(--c-bg);
  transition: background-color var(--d-base) var(--ease-out);
}
.pipeline__step:hover { background: var(--c-surface); }

/* Progress line that draws across the row */
.pipeline__step::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--ease-tech);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.pipeline.is-revealed .pipeline__step::after { transform: scaleX(1); }

.pipeline__label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  color: var(--c-text-faint);
}
.pipeline__label b { color: var(--c-accent); font-weight: 500; }

.pipeline__icon {
  width: 40px; height: 40px;
  color: var(--c-text-muted);
  transition: color var(--d-base) var(--ease-out);
}
.pipeline__step:hover .pipeline__icon { color: var(--c-accent); }

.pipeline__title {
  font-size: var(--t-h4);
  line-height: 1.3;
}

.pipeline__body {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   SERVICES
   -------------------------------------------------------------------------- */

.services {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 700px)  { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services { grid-template-columns: repeat(3, 1fr); } }

/* Column flex: the trigger takes whatever height the row leaves over, so the
   open panel stays inside its card. (min-height: 100% on the trigger resolved
   against the already-grown row and pushed the panel into the next row.) */
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  transition: background-color var(--d-base) var(--ease-out);
}
.service:hover { background: var(--c-surface); }
.service.is-open { background: var(--c-surface); }

@media (min-width: 1100px) {
  .service--featured { grid-column: span 2; }
}

.service__trigger {
  display: grid;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-6);
  text-align: left;
  align-content: start;
  flex: 1 0 auto;
}
/* Open: the detail follows the title directly; spare row height goes below. */
.service.is-open .service__trigger { flex-grow: 0; }

.service__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.service__icon {
  width: 32px; height: 32px;
  color: var(--c-accent);
  flex-shrink: 0;
  transition: transform var(--d-base) var(--ease-tech);
}
.service:hover .service__icon { transform: translateY(-2px); }

.service__index {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  color: var(--c-text-faint);
}

.service__title {
  font-size: var(--t-h4);
  line-height: 1.25;
}

.service__short {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: 1.6;
}

.service__more {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-dim);
  transition: color var(--d-fast);
}
.service:hover .service__more { color: var(--c-accent); }

.service__more i {
  position: relative;
  width: 10px; height: 10px;
  flex-shrink: 0;
}
.service__more i::before,
.service__more i::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transition: transform var(--d-base) var(--ease-tech), opacity var(--d-base);
}
.service__more i::before { width: 9px; height: 1px; transform: translate(-50%, -50%); }
.service__more i::after  { width: 1px; height: 9px; transform: translate(-50%, -50%); }
.service__trigger[aria-expanded='true'] .service__more i::after { opacity: 0; }

.service__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-base) var(--ease-tech);
}
.service__panel.is-open { grid-template-rows: 1fr; }
.service__panel > div { overflow: hidden; }

.service__detail {
  display: grid;
  gap: var(--s-5);
  padding: 0 var(--s-6) var(--s-6);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-5);
  margin-top: var(--s-2);
}

.service__desc { font-size: var(--t-sm); color: var(--c-text-muted); line-height: 1.7; }

.service__lists { display: grid; gap: var(--s-5); }
@media (min-width: 520px) {
  .service__lists { grid-template-columns: 1fr 1fr; }
}

.service__list-title {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: var(--s-3);
}

.service__list { display: grid; gap: 0.5rem; }
.service__list li {
  display: flex;
  gap: 0.625rem;
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  line-height: 1.5;
}
.service__list li::before {
  content: '';
  flex-shrink: 0;
  width: 5px; height: 1px;
  background: var(--c-accent);
  margin-top: 0.62em;
}

.service__formats {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  line-height: 1.6;
}
.service__formats .service__list-title { margin-bottom: 0; }

.service__note {
  padding-left: var(--s-4);
  border-left: 1px solid var(--c-accent);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   INDUSTRIES
   -------------------------------------------------------------------------- */

.industries {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 900px) {
  .industries {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
}

.industries__nav {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
  scroll-snap-type: x proximity;
}
.industries__nav::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
  .industries__nav {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
    border-left: 1px solid var(--c-line);
  }
}

.industry-tab {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.75rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  white-space: nowrap;
  text-align: left;
  transition: color var(--d-fast), background-color var(--d-fast), border-color var(--d-fast);
}
.industry-tab:hover { color: var(--c-text); background: var(--c-surface); }
.industry-tab[aria-selected='true'] {
  color: var(--c-text);
  background: var(--c-surface-2);
  border-color: var(--c-line-strong);
}

.industry-tab__num {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--c-text-faint);
}
.industry-tab[aria-selected='true'] .industry-tab__num { color: var(--c-accent); }

@media (min-width: 900px) {
  .industry-tab {
    width: 100%;
    border: 0;
    border-radius: 0;
    border-left: 2px solid transparent;
    margin-left: -1px;
    padding: 0.8125rem 1.25rem;
  }
  .industry-tab:hover { background: transparent; }
  .industry-tab[aria-selected='true'] {
    background: transparent;
    border-left-color: var(--c-accent);
  }
}

.industry-panel {
  display: grid;
  gap: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
}
.industry-panel[hidden] { display: none; }

.industry-panel__visual {
  position: relative;
  aspect-ratio: 21 / 9;
  background: var(--c-void);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.industry-panel__visual svg { width: 100%; height: 100%; }

.industry-panel__tag {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 2;
}

.industry-panel__body {
  display: grid;
  gap: var(--s-5);
  padding: 0 var(--s-6) var(--s-6);
}

.industry-panel__title { font-size: var(--t-h3); max-width: 24ch; }
.industry-panel__desc { color: var(--c-text-muted); max-width: 62ch; line-height: 1.7; }

.industry-panel__grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) {
  .industry-panel__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}

.industry-panel__block-title {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}

.industry-panel__text { font-size: var(--t-sm); color: var(--c-text-muted); line-height: 1.65; }

.industry-panel__list { display: grid; gap: 0.5rem; }
.industry-panel__list li {
  display: flex;
  gap: 0.625rem;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}
.industry-panel__list li::before {
  content: '';
  flex-shrink: 0;
  width: 5px; height: 1px;
  background: var(--c-accent);
  margin-top: 0.72em;
}

/* --------------------------------------------------------------------------
   WHY LIDAR — comparison
   -------------------------------------------------------------------------- */

.compare {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 800px) { .compare { grid-template-columns: 1fr 1fr; } }

.compare__col { padding: var(--s-6); background: var(--c-bg); }
.compare__col--lidar { background: var(--c-surface); }

.compare__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}
.compare__title {
  font-family: var(--f-display);
  font-size: var(--t-h4);
  letter-spacing: -0.02em;
}
.compare__col--base .compare__title { color: var(--c-text-dim); }

.compare__list { display: grid; gap: var(--s-4); }
.compare__list li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.compare__col--base li { color: var(--c-text-dim); }
.compare__col--lidar li { color: var(--c-text); }

.compare__marker {
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 0.15em;
}
.compare__col--base .compare__marker { color: var(--c-text-faint); }
.compare__col--lidar .compare__marker { color: var(--c-accent); }

.compare__note {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: 1.7;
  max-width: 78ch;
}

/* Canopy penetration diagram */
.penetration {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
  align-items: center;
}
@media (min-width: 900px) {
  .penetration { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-9); }
}

.penetration__figure {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-void);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.penetration__figure svg { width: 100%; height: 100%; }

.penetration__title { font-size: var(--t-h3); margin-bottom: var(--s-4); max-width: 18ch; }
.penetration__body { color: var(--c-text-muted); line-height: 1.7; max-width: 52ch; }

/* Inline colour key */
.key-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-5);
}
.key-list__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.key-list__item i {
  width: 10px; height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   TECHNOLOGY CHAIN
   -------------------------------------------------------------------------- */

.tech {
  display: grid;
  gap: var(--s-8);
}
@media (min-width: 1000px) {
  .tech { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: var(--s-9); align-items: start; }
}

.chain { display: grid; gap: 0; }

.chain__node {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  padding-bottom: var(--s-6);
}
.chain__node:last-child { padding-bottom: 0; }

.chain__marker {
  position: relative;
  display: grid;
  place-items: start center;
  width: 34px;
}

.chain__dot {
  position: relative;
  z-index: 2;
  width: 12px; height: 12px;
  margin-top: 5px;
  border: 1px solid var(--c-accent-line);
  border-radius: 50%;
  background: var(--c-bg);
  transition: background-color var(--d-base), box-shadow var(--d-base);
}
.chain__node.is-active .chain__dot {
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-accent-soft), 0 0 18px var(--c-accent-glow);
}

/* Connecting line, drawn on reveal */
.chain__node:not(:last-child) .chain__marker::after {
  content: '';
  position: absolute;
  top: 22px; bottom: -6px;
  left: 50%;
  width: 1px;
  background: var(--c-line-strong);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform var(--d-slow) var(--ease-tech);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.chain.is-revealed .chain__node:not(:last-child) .chain__marker::after { transform: translateX(-50%) scaleY(1); }

.chain__content { display: grid; gap: 0.375rem; padding-top: 1px; }

.chain__label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  color: var(--c-accent);
}
.chain__title { font-size: var(--t-h4); }
.chain__body { font-size: var(--t-sm); color: var(--c-text-muted); line-height: 1.6; max-width: 54ch; }

/* Spec sheet */
.spec {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}

.spec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
.spec__head svg { width: 18px; height: 18px; color: var(--c-text-faint); }

.spec__title {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.spec__list { display: grid; }

/* The label keeps its natural width and the value wraps; with the columns the
   other way round a long value overran its label on narrow screens. */
.spec__row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: 0.8125rem var(--s-5);
  border-bottom: 1px solid var(--c-line-soft);
}
.spec__row:last-child { border-bottom: 0; }

.spec__key {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
}
.spec__val {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text);
  text-align: right;
}
@media (max-width: 519px) {
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .spec__val { text-align: left; }
}

.spec__note {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-micro);
  color: var(--c-text-faint);
  line-height: 1.6;
  background: var(--c-bg);
}

/* --------------------------------------------------------------------------
   DELIVERABLES
   -------------------------------------------------------------------------- */

.deliverables {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.deliverable {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-5);
  background: var(--c-bg);
  transition: background-color var(--d-base) var(--ease-out);
}
.deliverable:hover { background: var(--c-surface); }

.deliverable__icon { width: 26px; height: 26px; color: var(--c-accent); }
.deliverable__title { font-size: var(--t-body); font-weight: 500; font-family: var(--f-display); }
.deliverable__formats {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
}
.deliverable__note { font-size: var(--t-xs); color: var(--c-text-dim); line-height: 1.5; }

/* --------------------------------------------------------------------------
   PROJECTS
   -------------------------------------------------------------------------- */

.projects { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .projects { grid-template-columns: repeat(3, 1fr); } }

.project {
  display: grid;
  align-content: start;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.project:hover { border-color: var(--c-line-strong); transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .project:hover { transform: none; }
}

.project__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-void);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.project__visual svg { width: 100%; height: 100%; }

.project__ref {
  position: absolute;
  left: var(--s-4); top: var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  color: var(--c-accent);
}

.project__body { display: grid; gap: var(--s-4); padding: var(--s-5); }

.project__type {
  font-family: var(--f-display);
  font-size: var(--t-h4);
  letter-spacing: -0.02em;
}

.project__desc { font-size: var(--t-sm); color: var(--c-text-muted); line-height: 1.6; }

.project__meta { display: grid; gap: 0; border-top: 1px solid var(--c-line); }

.project__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s-3);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.project__row:last-child { border-bottom: 0; }

.project__row dt {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.project__row dd {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  line-height: 1.45;
}

.project__disclaimer {
  padding: 0.75rem var(--s-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--c-text-faint);
}

/* --------------------------------------------------------------------------
   METRICS
   -------------------------------------------------------------------------- */

.metrics {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.metric {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-5);
  background: var(--c-bg);
}

/* Source order stays dt → dd for a valid description list; the value is lifted
   above its label visually. */
.metric__value {
  order: -1;
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-text);
}
.metric__value .placeholder { font-size: 0.6em; }

.metric__label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* --------------------------------------------------------------------------
   PROCESS TIMELINE
   -------------------------------------------------------------------------- */

.timeline { display: grid; gap: 0; }

@media (min-width: 1000px) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--c-line);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
  }
}

.timeline__item {
  position: relative;
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-5) 0 var(--s-6) var(--s-7);
  border-left: 1px solid var(--c-line);
  background: var(--c-bg);
}

@media (min-width: 1000px) {
  .timeline__item {
    padding: var(--s-6) var(--s-5) var(--s-7);
    border-left: 0;
  }
}

.timeline__step {
  position: absolute;
  left: 0;
  top: var(--s-5);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background: var(--c-bg);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--c-text-dim);
  transition: color var(--d-base), border-color var(--d-base), background-color var(--d-base);
}
.timeline__item:hover .timeline__step {
  color: var(--c-accent-ink);
  background: var(--c-accent);
  border-color: var(--c-accent);
}

@media (min-width: 1000px) {
  .timeline__step { position: static; transform: none; }
}

.timeline__title { font-size: var(--t-h4); line-height: 1.3; }
.timeline__body { font-size: var(--t-sm); color: var(--c-text-muted); line-height: 1.6; }
.timeline__meta {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   TRUST
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.pillar { display: grid; gap: var(--s-3); align-content: start; }
.pillar__icon { width: 28px; height: 28px; color: var(--c-accent); }
.pillar__title { font-size: var(--t-h4); }
.pillar__body { font-size: var(--t-sm); color: var(--c-text-muted); line-height: 1.65; }

.credentials {
  margin-top: var(--s-9);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.credentials__head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
}

.credentials__grid {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.credential {
  display: grid;
  gap: 0.5rem;
  padding: var(--s-5);
  background: var(--c-bg);
}
.credential dt {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.credential dd { margin: 0; }

.credentials__note {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-micro);
  color: var(--c-text-faint);
  line-height: 1.6;
  background: var(--c-surface);
}

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.quote {
  display: grid;
  gap: var(--s-5);
  align-content: space-between;
  padding: var(--s-6);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.quote__mark { width: 24px; height: 24px; color: var(--c-text-faint); }

.quote__text {
  font-family: var(--f-display);
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text-dim);
}

.quote__author { display: grid; gap: 2px; }
.quote__name { font-size: var(--t-sm); color: var(--c-text-muted); }
.quote__role {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.quotes__note {
  margin-top: var(--s-5);
  font-size: var(--t-xs);
  color: var(--c-text-faint);
  max-width: 72ch;
  line-height: 1.6;
}

/* Card padding: 32px a side leaves ~285px of measure on a 390px phone. */
@media (max-width: 600px) {
  .service__trigger { padding: var(--s-5); }
  .service__detail { padding: var(--s-5) var(--s-5) var(--s-5); }
  .compare__col { padding: var(--s-5); }
  .industry-panel__body { padding: 0 var(--s-5) var(--s-5); }
}

/* --------------------------------------------------------------------------
   FINAL CTA
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--c-void);
  border-top: 1px solid var(--c-line);
}

.cta__cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
.cta__cloud.is-ready { opacity: 0.55; }

.cta__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(5,6,7,0.55) 20%, rgba(5,6,7,0.9) 75%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s-6);
  justify-items: center;
  text-align: center;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
}

@media (max-width: 600px) {
  .cta__inner { padding-block: 2.5rem; }
}

.cta__title {
  font-size: var(--t-h2);
  max-width: 18ch;
}

.cta__lead {
  font-size: var(--t-lead);
  color: var(--c-text-muted);
  max-width: 54ch;
  line-height: 1.6;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  width: 100%;
}

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */

.contact { display: grid; gap: var(--s-8); }

@media (min-width: 1000px) {
  .contact {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: var(--s-9);
    align-items: start;
  }
}

.form { display: grid; gap: var(--s-5); }

.form__grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__grid--2 { grid-template-columns: 1fr 1fr; } }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-2);
}

.form__note { font-size: var(--t-xs); color: var(--c-text-dim); flex: 1 1 220px; line-height: 1.5; }

@media (max-width: 480px) {
  .form__actions { flex-direction: column; align-items: stretch; }
  .form__note { flex: 0 0 auto; }
}

.form__fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.form__legend {
  padding: 0;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.contact__aside { display: grid; gap: var(--s-6); align-content: start; }

.contact__block {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.contact__block-title {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.contact__list { display: grid; gap: var(--s-4); }

.contact__item { display: grid; gap: 2px; }
.contact__item dt {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.contact__item dd { margin: 0; font-size: var(--t-sm); }
.contact__item a { color: var(--c-text); border-bottom: 1px solid var(--c-line-strong); transition: color var(--d-fast), border-color var(--d-fast); }
.contact__item a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.contact__steps { display: grid; gap: var(--s-4); counter-reset: step; }
.contact__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: 1.55;
}
.contact__step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--c-accent);
  padding-top: 0.28em;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--c-line);
  background: var(--c-void);
  padding-block: var(--s-9) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
}

.footer__top {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 800px) {
  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}

.footer__brand { display: grid; gap: var(--s-4); align-content: start; max-width: 42ch; }

.footer__logo { display: inline-flex; align-items: center; }
.brand-plate--full { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); }
.brand-plate--full img { width: clamp(120px, 12vw, 148px); }

.footer__about { font-size: var(--t-sm); color: var(--c-text-dim); line-height: 1.65; }

.footer__col { display: grid; gap: var(--s-4); align-content: start; }

.footer__title {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.footer__links { display: grid; gap: 0.625rem; }
.footer__links a {
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  transition: color var(--d-fast);
}
.footer__links a:hover { color: var(--c-accent); }

/* Link rows were ~18px tall: fine for a cursor, hard for a thumb. */
@media (max-width: 799px), (pointer: coarse) {
  .footer__links { gap: 0; }
  .footer__links a { display: block; padding-block: 0.5625rem; }
  .footer__legal { gap: 0 var(--s-5); }
  .footer__legal a { display: inline-block; padding-block: 0.625rem; }
}

.footer__social { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-text-dim);
  transition: color var(--d-fast), border-color var(--d-fast);
}
.footer__social a:hover { color: var(--c-accent); border-color: var(--c-accent-line); }
.footer__social svg { width: 16px; height: 16px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-6);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--c-text-faint);
}
.footer__legal a { transition: color var(--d-fast); }
.footer__legal a:hover { color: var(--c-text-muted); }

.footer__copy {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--c-text-faint);
}