/* Home page — styles specific to index.html.
   Shared nav/footer/section chrome lives in components.css.
   This page is a heavily scroll-driven experience (parallax, canvas frame
   scrubbing, pinned sections); classes below cover every static value.
   Continuous per-frame values (scroll-linked transform/opacity/filter) stay
   as direct element.style writes in the component script — see the comments
   there for why they can't be expressed as a finite set of CSS classes. */

/* This page's scroll height comes from spacers that JS sizes after mount, so
   the document grows by tens of thousands of pixels during load. Chrome's
   scroll anchoring reacts to that by shifting the scroll position to keep the
   anchored content still — which, on a reload at a restored offset, threw the
   reader thousands of pixels down the page. Nothing here relies on anchoring
   (every scroll-linked value is computed from scrollY each frame), so turn it
   off for the whole document. */
body {
  overflow-anchor: none;
}

/* ---- Hero ---- */
.hero-spacer {
  width: 100%;
}
.hero-scroll-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}
/* While the full-screen mobile nav is open, freeze the Lenis-driven
   scroll transform (see scrollRef writes in the component script below)
   so .nav-mobile-panel — a fixed descendant that inherits this layer as
   its containing block — stays pinned to the real viewport instead of
   drifting by whatever scroll offset was last applied. */
.hero-scroll-layer.is-open {
  transform: none !important;
}
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
  background: var(--white-pure);
  font-family: 'Inter', sans-serif;
}
.hero-texture {
  position: absolute;
  inset: 150px;
  z-index: 0;
  background-image: url('../../images/graphics/texture-3.png');
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
}
.hero-title-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}
.hero-title-word {
  position: absolute;
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(40px,7.5vw,130px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #163F37;
  white-space: nowrap;
}
.hero-title-word--solar {
  top: 30%;
  left: 24%;
}
.hero-title-row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  padding: 0 var(--gutter-x);
}
.hero-title-row--engineering {
  top: 38%;
  justify-content: flex-end;
}
.hero-title-row--simplified {
  bottom: 26%;
  justify-content: flex-start;
}
.hero-tagline {
  position: absolute;
  bottom: clamp(20px,4vw,40px);
  right: var(--gutter-x);
  max-width: 300px;
  padding: 14px 16px 14px 20px;
  border-left: 1px solid rgba(30,31,28,0.35);
  z-index: 3;
  pointer-events: auto;
}
.hero-tagline-text {
  margin: 0;
  font-size: clamp(14px,1.3vw,17px);
  line-height: 1.4;
  color: var(--text-charcoal);
  font-weight: 400;
}
.hero-visual {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 66%;
  min-width: 400px;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

/* ---- Precision intro ---- */
.precision-section {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: clamp(64px,10vw,128px) var(--gutter-x) 0;
  background: var(--white-pure);
  font-family: 'Inter', sans-serif;
}
.precision-intro-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px,340px) 1fr;
  gap: clamp(32px,6vw,64px);
}
.precision-eyebrow {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  font-family: 'Inter', sans-serif;
}
.precision-lead {
  margin: 0 0 28px;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: 32px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}
.precision-discover-row {
  display: flex;
  align-items: center;
}
.precision-subhead {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.6;
  color: var(--text-secondary, #565A52);
  max-width: 340px;
}
.precision-placeholder {
  grid-column: 2;
  aspect-ratio: 16/9;
  border-radius: 16px;
  visibility: hidden;
}
.scrub-spacer {
  width: 100%;
}

/* ---- One Platform (pinned green section) ---- */
.op-fixed-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  will-change: transform;
}
.op-section {
  position: relative;
  width: 100%;
  background: var(--green-forest);
  font-family: 'Inter', sans-serif;
}
.op-header-grid {
  padding: clamp(64px,10vw,128px) var(--gutter-x) clamp(48px,6vw,72px);
  display: grid;
  grid-template-columns: minmax(220px,420px) 1fr;
  gap: clamp(32px,6vw,64px);
  max-width: 1440px;
  margin: 0 auto;
}
.op-header-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(32px,4.2vw,52px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}
.op-header-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(16px,1.6vw,20px);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 560px;
}
.op-row-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr 1.3fr;
  min-height: 640px;
}
.op-media {
  overflow: hidden;
}
.op-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.op-panel {
  background: rgba(0,0,0,0.16);
  border-left: 1px solid rgba(255,255,255,0.12);
  padding: clamp(28px,3vw,44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.op-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green-leaf);
  font-family: 'Inter', sans-serif;
}
.op-panel-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-leaf);
  flex-shrink: 0;
}
.op-panel-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(24px,2.4vw,32px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
}
.op-panel-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px,1.1vw,16px);
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
}
.op-capabilities {
  margin-top: 4px;
}
.op-capabilities-label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  font-family: 'Inter', sans-serif;
}
.op-capabilities-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.op-capability {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-family: 'Inter', sans-serif;
}
.op-capability-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-leaf);
  flex-shrink: 0;
}
.op-panel-cta-row {
  margin-top: auto;
  padding-top: 14px;
}

/* ---- Trust stats (track record) ---- */
.trackrecord-section {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: var(--white-pure);
  font-family: 'Inter', sans-serif;
  padding: clamp(88px,12vw,168px) var(--gutter-x);
}
.trackrecord-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(64px,9vw,120px);
}
.trackrecord-header {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px,6vw,88px);
  align-items: end;
}
.trackrecord-title {
  margin: 0;
  max-width: 15ch;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(32px,4.4vw,60px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #163F37;
  text-wrap: pretty;
}
.trackrecord-header-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.trackrecord-header-text {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(15px,1.3vw,17px);
  line-height: 1.65;
  color: var(--text-secondary, #565A52);
}
/* Second line under the intro: closer to it than to the button (the side
   column's own 24px gap would read as a separate paragraph). */
.trackrecord-header-text + .trackrecord-header-text {
  margin-top: -12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(20px,3vw,48px);
  row-gap: clamp(48px,6vw,72px);
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.22,0.61,0.36,1), transform 600ms cubic-bezier(0.22,0.61,0.36,1);
}
.stat-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.stat-item--bordered {
  padding-left: clamp(20px,3vw,48px);
  border-left: 1px solid var(--surface-border, #E7E7E2);
}
.stat-item-value {
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(34px,3.8vw,56px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}
.stat-item-value-suffix {
  font-size: 0.42em;
  letter-spacing: 0;
  margin-left: 0.12em;
  color: var(--color-accent);
}
.stat-item-value-suffix--pct {
  font-size: 0.5em;
  letter-spacing: 0;
  margin-left: 0;
  color: var(--color-accent);
}
.stat-value-compact {
  display: none;
}
.stat-item-label {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-charcoal);
  max-width: 24ch;
}
.stat-item-desc {
  margin-top: -4px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text-secondary, #565A52);
  max-width: 26ch;
}

/* ---- Vertical-scroll QA section ---- */
.vs-scroll-section {
  position: relative;
  z-index: 60;
  width: 100%;
  height: 600vh;
  background: var(--surface-section-alt);
  font-family: 'Inter', sans-serif;
}
.vs-right-col {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
/* Panels are stacked; each later slide is parked off-screen right and JS
   slides it in over the one before, which stays put underneath. */
.vs-track {
  position: relative;
  height: 100%;
}
.vs-intro-panel,
.vs-panel-row {
  position: absolute;
  inset: 0;
  background: var(--surface-section-alt);
}
.vs-intro-panel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 clamp(24px,6vw,64px);
}
.vs-intro-content {
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vs-intro-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  font-family: 'Inter', sans-serif;
}
.vs-intro-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(44px,6.5vw,84px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #D3D8D2;
  text-wrap: pretty;
}
.vs-intro-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px,2vw,24px);
  line-height: 1.65;
  color: #D3D8D2;
  max-width: 52ch;
}
.vs-char-span {
  color: #D3D8D2;
}
.vs-intro-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(28px,4vw,56px);
  opacity: 0.25;
}
.vs-intro-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  border-left: 2px solid var(--color-accent);
}
.vs-intro-stat-value {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(24px,2.4vw,32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}
.vs-intro-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.vs-scroll-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  transition: opacity 200ms ease;
}
.vs-scroll-prompt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  color: var(--color-primary);
  font-size: 15px;
  flex-shrink: 0;
  animation: vsScrollNudge 1.6s ease-in-out infinite;
}
.vs-scroll-prompt-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-charcoal);
  font-family: 'Inter', sans-serif;
}
.vs-panel-row {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px,5vw,64px);
  padding: 0 clamp(24px,6vw,80px);
  box-sizing: border-box;
  transform: translate3d(100%,0,0);
  visibility: hidden;
  box-shadow: -32px 0 64px -24px rgba(22,63,55,0.22);
  will-change: transform;
}
.vs-panel-media {
  flex: 0 0 44%;
  max-width: 44%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vs-panel-img-wrap {
  width: 100%;
  max-height: 420px;
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--surface-card-border);
  box-shadow: none;
  opacity: 0;
  will-change: opacity, transform, box-shadow;
}
.vs-panel-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vs-panel-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}
.vs-panel-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--color-primary);
}
.vs-panel-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(28px,3.4vw,46px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #163F37;
}
.vs-panel-title--tight {
  font-size: clamp(28px,3.2vw,44px);
}
.vs-panel-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px,1.4vw,19px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 46ch;
}
.vs-panel-text--tight {
  max-width: 44ch;
}
.vs-progress-track {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--surface-border);
  z-index: 3;
}
.vs-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  transition: width 80ms linear;
}

/* ---- Trust / testimonials ---- */
.trust-section {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: var(--white-pure);
  font-family: 'Inter', sans-serif;
  padding: clamp(88px,12vw,140px) var(--gutter-x);
  /* Cards that slide out of the carousel are parked past the stage edge. */
  overflow-x: clip;
}
.trust-inner {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

/* Section header: eyebrow + Geist title, styled like the Track record
   section above it. */
.trust-head {
  margin-bottom: clamp(40px,6vw,72px);
}
.trust-head-title {
  margin: 0;
  max-width: 15ch;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(32px,4.4vw,60px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #163F37;
  text-wrap: pretty;
}

/* Carousel: all cards share one grid cell and are slid sideways by their
   signed distance from the active card (--o, set inline). */
.t-stage {
  position: relative;
  touch-action: pan-y;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.t-stage.is-revealed {
  opacity: 1;
  transform: none;
}
.t-track {
  --t-gap: clamp(12px,1.6vw,24px);
  --t-card-w: calc((100% - 2 * var(--t-gap)) / 3);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.t-card {
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: var(--t-card-w);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px,2.4vw,36px);
  background: var(--green-forest);
  border: 1px solid var(--green-forest);
  border-radius: var(--radius-xl);
  --s: 0.9;
  transform: translateX(calc(var(--o) * (100% + var(--t-gap)))) scale(var(--s));
  transition:
    transform 600ms var(--ease-standard),
    opacity 600ms var(--ease-standard),
    box-shadow 600ms var(--ease-standard);
}
/* Neighbours keep the active card's colours; they are only faded out. */
.t-card.is-active {
  --s: 1;
  z-index: 1;
  box-shadow: var(--shadow-lg);
}
.t-card.is-near {
  opacity: 0.5;
}
.t-card.is-far {
  opacity: 0;
  pointer-events: none;
}
.t-card-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(22px,2vw,28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gold-highlight);
}
.t-card-title::before { content: '\201C'; }
.t-card-title::after { content: '\201D'; }
.t-card-text {
  margin: 0;
  font: var(--text-body-sm);
  /* Grows with the cards on wide screens; 14px at phone/tablet sizes. */
  font-size: clamp(14px,1.05vw,16px);
  color: rgba(255,255,255,0.86);
}
.t-card-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
}
.t-card-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--gradient-solar);
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-on-accent);
}
.t-card-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.t-card-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-on-primary);
}
.t-card-company {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: var(--gold-highlight);
}

.t-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(28px,3.5vw,44px);
}
.t-nav-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
  color: var(--text-on-primary);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.t-nav-btn:hover {
  border-color: var(--cta-hover);
  background: var(--cta-hover);
}
.t-nav-btn:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* Three cards would be ~280px wide here; show one with neighbours peeking. */
  .t-track { --t-card-w: min(56%, 520px); }
}
@media (max-width: 767px) {
  /* One card with a sliver of each neighbour. Capped so large phones and
     small tablets don't stretch it into a flat banner. */
  .t-track {
    --t-gap: 12px;
    --t-card-w: min(calc(100% - 56px), 460px);
  }
}
@media (max-width: 400px) {
  .t-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .t-stage,
  .t-card {
    transition: none;
  }
}

.trust-videos {
  margin-top: clamp(40px,5vw,64px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px,2vw,24px);
}
.trust-video {
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}
.trust-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 767px) {
  .trust-videos { grid-template-columns: 1fr; }
}

/* ---- Certifications ---- */
.certs-section {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: var(--white-pure);
  font-family: 'Inter', sans-serif;
  padding: clamp(24px,3vw,40px) var(--gutter-x) clamp(4px,0.6vw,8px);
}
.certs-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px,3vw,36px);
  text-align: center;
}
.certs-text {
  margin: 0;
  max-width: 52ch;
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px,1.4vw,19px);
  line-height: 1.5;
  color: var(--text-secondary, #565A52);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.22,0.61,0.36,1), transform 700ms cubic-bezier(0.22,0.61,0.36,1);
}
.certs-text.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.certs-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px,2.4vw,56px);
  flex-wrap: nowrap;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.22,0.61,0.36,1) 120ms, transform 700ms cubic-bezier(0.22,0.61,0.36,1) 120ms;
}
.certs-logos.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.certs-logo {
  height: clamp(24px,2.6vw,42px);
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.certs-logo--tall {
  height: clamp(44px,5vw,80px);
}

/* ---- Marquee ---- */
.dtm-section {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background: var(--white-pure);
  font-family: 'Inter', sans-serif;
  padding: clamp(24px,4vw,56px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px,0.8vw,14px);
}
.dtm-fade-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--white-pure), transparent 12%, transparent 88%, var(--white-pure));
}
.dtm-line {
  width: 100%;
  overflow: hidden;
}
.dtm-track-el {
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: clamp(34px,4.6vw,66px);
  letter-spacing: -0.015em;
  white-space: nowrap;
  will-change: transform;
}
.dtm-track {
  display: flex;
  width: max-content;
}
.dtm-word-group {
  display: flex;
  flex-shrink: 0;
}
.dtm-word {
  display: inline-block;
  padding: 0 0.4em;
  color: #E8E7E1;
  transition: color 250ms ease;
}

/* ---- Precision overlay (canvas frame scrub + item cards) ---- */
.precision-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 40;
}
.precision-box {
  position: absolute;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--surface-card-border);
}
.precision-box-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.precision-box-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,63,55,0.15), rgba(22,63,55,0.55));
}
.precision-box-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 40px;
}
.precision-box-text-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.precision-box-text-bg {
  position: absolute;
  opacity: 0;
  transform: scale(0.9);
  border-radius: 24px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.25));
  pointer-events: none;
}
.precision-box-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(28px,4.5vw,56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  position: relative;
}
.precision-box-subtext {
  margin: 0;
  max-width: 520px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(15px,1.6vw,19px);
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
  position: relative;
}
.precision-word-span {
  display: inline-block;
  white-space: nowrap;
}
.precision-char-span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(4px);
  will-change: opacity, filter, transform;
}
.precision-frame-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
}
.precision-frame-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background: linear-gradient(180deg, rgba(22,63,55,0.15), rgba(22,63,55,0.55));
  pointer-events: none;
}
.precision-item-card {
  position: absolute;
  transform: translate(-50%,-50%) scale(0.9);
  opacity: 0;
  padding: 24px 32px;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.precision-item-title {
  margin: 0 0 8px;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(22px,3vw,36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.precision-item-title--lg {
  font-size: clamp(24px,3.2vw,40px);
}
.precision-item-subtext {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px,1.2vw,16px);
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
}
.precision-item-subtext--lg {
  font-size: clamp(14px,1.3vw,17px);
}
.precision-item-cta-row {
  margin-top: 18px;
}
.precision-item-cta-row .cta-primary {
  pointer-events: auto;
}

/* Each card's fixed target position (transform/opacity are scroll-driven, set in JS) */
.precision-item-card--0 { left: 50%; top: 18%; max-width: 460px; text-align: center; }
.precision-item-card--1 { left: 12%; top: 50%; transform: translate(0,-50%) scale(0.9); max-width: 380px; text-align: left; }
.precision-item-card--2 { right: 12%; top: 60%; transform: translate(0,-50%) scale(0.9); max-width: 380px; text-align: right; }
.precision-item-card--3 { left: 38%; bottom: 20%; transform: translate(-50%,50%) scale(0.9); max-width: 460px; text-align: center; }
.precision-item-card--4 { left: 14%; top: 22%; transform: translate(0,-50%) scale(0.9); max-width: 340px; text-align: left; }
.precision-item-card--5 { right: 12%; top: 24%; transform: translate(0,-50%) scale(0.9); max-width: 380px; text-align: right; }
.precision-item-card--6 { right: 10%; bottom: 24%; transform: translate(0,50%) scale(0.9); max-width: 380px; text-align: right; }

/* ---- Page shell (moved from the inline <style> block in index.html) ---- */
body { margin: 0; background: var(--surface-bg); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
@keyframes vsScrollNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.dtm-word:hover { color: var(--color-primary) !important; }

@media (max-width: 767px) {
  /* Hero: texture bg narrowed to 70% of the screen width, the three
     separately-positioned title words regrouped into a two-line flex
     stack ("Solar Engineering" / "Simplified") with the caption
     flowing below as the flex-wrap's forced third line, and the
     center visual enlarged (bottom stays pinned at 0 from the base
     rule, height:50% puts its top edge exactly at the section's
     vertical center). */
  .hero-texture {
    left: 15% !important;
    right: 15% !important;
  }

  .hero-title-layer {
    top: 28% !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    align-content: flex-start !important;
    row-gap: 10px !important;
    column-gap: 0.32em !important;
    padding: 0 24px !important;
  }
  .hero-title-layer .hero-title-word {
    position: static !important;
    top: auto !important;
    left: auto !important;
    font-size: clamp(34px, 11vw, 46px) !important;
  }
  .hero-title-row--engineering,
  .hero-title-row--simplified {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }
  .hero-title-row--simplified {
    flex-basis: 100% !important;
  }
  .hero-tagline {
    position: static !important;
    flex-basis: 100% !important;
    max-width: none !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: 24px !important;
  }

  .hero-visual {
    width: auto !important;
    min-width: 0 !important;
    height: 50% !important;
  }

  /* Intro grid under the hero: two content columns -> one stacked column */
  .precision-intro-grid { grid-template-columns: 1fr !important; text-align: center !important; }
  .precision-placeholder { grid-column: 1 !important; }
  .precision-eyebrow { font-size: 14px !important; }
  .precision-eyebrow + div { margin-top: -18px !important; }
  .precision-lead { font-size: 20px !important; }
  .precision-discover-row { justify-content: center !important; }
  .precision-subhead { font-size: 19px !important; max-width: 100% !important; }

  /* Precision box overlay title: center the title itself in the box,
     independent of the subtext (which starts invisible/character-revealed
     and would otherwise push the title above center while the box is
     still small, pre-scroll). The subtext is unpinned from the flex group
     and anchored to sit right below the title instead. */
  .precision-box-text-inner {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 40px !important;
    right: 40px !important;
    transform: translateY(-50%) !important;
  }
  .precision-box-subtext {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-width: none !important;
    margin: 16px 0 0 !important;
  }

  /* Full-screen zoom/scrub cards: always centered so they can never run
     off a narrow viewport (JS re-centers their transform to match, see
     MOBILE flag in the component script). Fixed width + height (instead of
     max-width/auto-height) so every card is the same size regardless of its
     text length — up to 3 cards can be visible at once during the crossfade,
     and mismatched sizes made the overlap between them visible. */
  .precision-item-card {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: min(320px, 86vw) !important;
    height: 280px !important;
    box-sizing: border-box !important;
    padding: 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  /* "One Platform" green section */
  .op-header-grid { grid-template-columns: 1fr !important; }
  .op-row-grid { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .op-media { height: 220px !important; }

  /* Stats + cert logos */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-value-full { display: none !important; }
  .stat-value-compact { display: inline !important; }
  .stat-item-value { font-size: 36px !important; }
  .stat-item-label { font-size: 12px !important; }
  .stat-item-desc { font-size: 11px !important; }
  /* The --bordered class's border-left + padding-left trick was built for
     desktop's 3-column layout (divider flush against the item's own edge,
     content pushed away from it) — on 2 columns that made the two items in
     a row unequal width. Reset it and instead draw the divider as a line
     centered in the column gap (via ::before on the row's 2nd item), so
     both items keep the full, equal 1fr column width and the gap splits
     evenly on either side of the line. */
  .stat-item {
    border-left: none !important;
    padding: 24px 20px !important;
    text-align: center !important;
    position: relative;
  }
  .stat-item:nth-child(2n)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(clamp(24px,4vw,64px) / -2);
    width: 1px;
    background: var(--surface-border, #E7E7E2);
  }
  .certs-logos { flex-wrap: wrap !important; }

  /* Horizontal-scroll QA panels: image + copy side-by-side -> stacked.
     vs-scroll-section's height drives the JS-computed pin/scrub distance
     (see _updateVerticalScrollSection) so shortening it here shortens
     the scroll needed to get through all 5 panels on a phone. */
  .vs-scroll-section { height: 480vh !important; }
  /* .vs-right-col's sticky box uses 100vh (static viewport, address-bar
     collapsed), which is taller than what's actually visible on mobile
     while the address bar is showing — content centered inside it then
     reads as pinned near the top of the real, shorter visible area.
     100dvh tracks the actual visible viewport instead. */
  .vs-right-col { height: 100dvh !important; }
  .vs-panel-row { flex-direction: column !important; justify-content: center !important; gap: 16px !important; padding: 0 24px !important; }
  .vs-panel-media { flex: 0 0 auto !important; width: 78vw !important; max-width: 320px !important; height: auto !important; }
  .vs-panel-img-wrap { aspect-ratio: 4/3 !important; max-height: 240px !important; }
  .vs-panel-copy { flex: 0 0 auto !important; max-width: 100% !important; }
}

/* ==========================================================================
   Tablet band (768px–1024px) — desktop rules apply above, the max-width:767
   rules above apply below; this only fills the gap in between.
   ========================================================================== */

/* Hero, portrait tablets. The desktop hero scatters the three title words
   around the centred visual at fixed percentages (Solar 30%/24%, Projects
   38%, Simplified bottom 26%) — a composition sized for a landscape canvas.
   On a portrait tablet those same percentages pull the words hundreds of
   pixels apart, and the 66%-wide visual only covers about a quarter of the
   viewport height, so the middle of the screen is left empty. Regroup the
   words into the two-line stack the mobile rules use (scaled up for the
   extra width) and size the visual off the viewport *height* the way mobile
   does, so it anchors the lower half instead of floating in it. Landscape
   tablets are handled separately below — the desktop composition still
   works there. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* inset:150px leaves the grid backdrop as a narrow box once the viewport
     is this narrow; pull it in from the sides by ratio instead. */
  .hero-texture {
    inset: 120px 6% !important;
  }

  .hero-title-layer {
    top: 13% !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    align-content: flex-start !important;
    row-gap: 8px !important;
    /* Not an em value: this element's own font-size is the 16px body size,
       not the display size of the words inside it, so an em gap here comes
       out at ~5px and the two words on line one run together. */
    column-gap: clamp(14px,2.2vw,28px) !important;
    padding: 0 clamp(32px,5vw,56px) !important;
  }
  .hero-title-layer .hero-title-word {
    position: static !important;
    top: auto !important;
    left: auto !important;
    font-size: clamp(56px,9.4vw,96px) !important;
  }
  .hero-title-row--engineering,
  .hero-title-row--simplified {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }
  /* forces "Simplified" onto its own line under "Solar Projects" */
  .hero-title-row--simplified {
    flex-basis: 100% !important;
  }
  .hero-tagline {
    position: static !important;
    flex-basis: 100% !important;
    max-width: 440px !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: clamp(20px,3vh,36px) !important;
  }
  /* Height-driven rather than width-driven (same approach as mobile): the
     visual now scales with the viewport it has to fill. JS keeps writing
     translate3d(-50%, …) for the parallax, so the left:50% centring model
     has to stay as-is. */
  .hero-visual {
    width: auto !important;
    min-width: 0 !important;
    height: 50% !important;
  }
}

/* Landscape tablets keep the desktop hero composition, but at ~1024px rather
   than ~1440px of width the 66% visual reaches far enough right to sit under
   the bottom-right tagline. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .hero-visual {
    width: 58% !important;
  }
  .hero-tagline {
    max-width: 260px !important;
  }
}

/* "For Installers & EPCs" intro grid: the desktop two-column layout
   (eyebrow/subhead in a 340px column, lead + placeholder beside it) squeezes
   the lead copy into a narrow strip at tablet widths. Reflow it the way the
   mobile rules do — one stacked, centred column — just with sizes that use
   the extra room a tablet has. */
@media (min-width: 768px) and (max-width: 1024px) {
  .precision-intro-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 32px !important;
  }
  .precision-placeholder { grid-column: 1 !important; }
  .precision-eyebrow { font-size: 16px !important; }
  .precision-eyebrow + div { margin-top: -12px !important; }
  .precision-lead {
    font-size: 26px !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .precision-discover-row { justify-content: center !important; }
  .precision-subhead {
    font-size: 22px !important;
    max-width: 100% !important;
  }
}

/* "One Platform" green section: at desktop, .op-row-grid lays its 4 direct
   children (media, panel, media, panel) out as 4 explicit columns with a
   flat 640px min-height. Squeezed into a tablet-width row that's still ~4
   narrow slivers, each photo crops to a tall sliver and each text panel
   wraps its title/capabilities list down to a couple of words per line.
   Dropping to 2 columns lets the same DOM order auto-flow into 2 stacked
   (media | panel) rows instead — no markup change needed — and each row's
   height then comes from the panel's own content (grid items stretch to
   fill the row by default), so the flat min-height is no longer needed. */
@media (min-width: 768px) and (max-width: 1024px) {
  .op-row-grid {
    grid-template-columns: 1fr 1.3fr;
    min-height: 0;
  }
}

/* Frame-scrub service cards. Desktop scatters the nine glass cards across
   the viewport at fixed percentages and keeps up to three of them on screen
   at once, which only works on a wide canvas — at tablet widths neighbouring
   cards land on top of each other and clip each other's titles. Same
   resolution the mobile rules reached: one centred card at a time, just
   sized for the room a tablet actually has. The one-at-a-time fade is the
   JS half of this (see COMPACT_CARDS in index.html); the transform is
   restated here so the cards are still centred on the first frame, before
   the scroll handler writes its own. */
@media (min-width: 768px) and (max-width: 1024px) {
  .precision-item-card {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%,-50%) scale(0.9) !important;
    width: min(560px, 74vw) !important;
    height: 320px !important;
    box-sizing: border-box !important;
    padding: 32px 36px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }
}

/* Horizontal-scroll QA panels: 600vh of pin distance is paced for a desktop
   viewport and is more than a portrait tablet needs. The JS derives its progress from
   this section's own height (see _updateVerticalScrollSection), so shortening
   it here is all it takes to speed the sequence up. */
@media (min-width: 768px) and (max-width: 1024px) {
  .vs-scroll-section { height: 520vh !important; }
  /* Tablet browser chrome moves the same way a phone's does. */
  .vs-right-col { height: 100dvh !important; }
}

/* Desktop only: "Projects" (replacing "Engineering") is short enough that
   right-aligning it under the base rule leaves it floating past the hero
   visual's edge instead of over it. Pull it down and in so its leading edge
   sits over the solar-panel artwork, echoing how "Solar" and "Simplified"
   already overlap the visual. */
@media (min-width: 1025px) {
  .hero-title-row--engineering {
    top: 54%;
    padding-right: clamp(90px, 13vw, 190px);
  }
}