/* ============================================================
   ARCTIC AIR TECH INNOVATIONS - main stylesheet
   Concept mock built by Prizmek.
   ============================================================ */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  background: var(--ground);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--ice); color: var(--ground); }

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }

/* Hairline rules are the structural grammar of this site. They
   separate real content; they are never drawn for decoration. */
.rule-top { border-top: 1px solid var(--line); }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lead {
  font-size: var(--t-lead);
  color: var(--fg-2);
  max-width: var(--measure);
}

.body-2 { color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ice);
  display: block;
  margin-bottom: var(--s-4);
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.ice-word { color: var(--ice); }

/* ---------- Ambient layers ---------- */
/* The page opens warm and cools as you scroll: the heat haze over
   the hero dissipates once the reader is into the content. Pure
   CSS scroll timeline, no scroll listeners. */
.heat-haze {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  background:
    radial-gradient(90% 55% at 72% -8%, var(--ember-wash), transparent 70%),
    radial-gradient(70% 45% at 8% 0%, rgba(245, 130, 31, 0.06), transparent 72%);
}

@keyframes heatDissipate { from { opacity: 0.8; } to { opacity: 0; } }

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---------- Scroll rail ---------- */
.scroll-rail {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
  background: transparent;
}

/* Hot at the top of the page, cold at the bottom: the rail is the
   same thermal scale as the dial, read as the reader descends. */
.scroll-rail__fill {
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg,
    var(--t-90), var(--t-84) 24%, var(--t-78) 44%,
    var(--t-72) 64%, var(--t-66) 82%, var(--t-60));
}

/* ---------- Thermal scale band ----------
   States the colour system once, in the open, and carries a marker
   showing where the reader left the hero dial. */
.thermo-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-6);
  background: color-mix(in srgb, var(--ground-2) 55%, transparent);
  position: relative;
  z-index: 1;
}
.thermo-band__row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.thermo-band__cap { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.thermo-band__cap--cold { color: var(--t-66); }
.thermo-band__cap--hot { color: var(--t-84); }

/* display:block matters here: these are spans, and height is ignored
   on an inline box. */
.thermo-band__track { flex: 1; position: relative; display: block; }
.thermo-band__bar {
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--thermal-bar);
}
.thermo-band__marker {
  position: absolute;
  top: -5px;
  left: var(--setpoint-pct, 60%);
  width: 2px;
  height: 16px;
  background: var(--fg);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: left var(--d-base) var(--ease-out);
  box-shadow: 0 0 0 3px var(--ground-2);
}
.thermo-band__marker::after {
  content: attr(data-label);
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--fg);
  white-space: nowrap;
}
.thermo-band__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}

@keyframes railGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-rail__fill {
      animation: railGrow linear both;
      animation-timeline: scroll(root block);
    }
    .heat-haze {
      animation: heatDissipate linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 60vh;
    }
  }
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: 72px;
  display: flex;
  align-items: center;
  transition: background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              backdrop-filter var(--d-base);
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.575rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 4px;
}

.nav__links { display: flex; align-items: center; gap: var(--s-5); list-style: none; padding: 0; }

.nav__links a {
  font-size: 0.925rem;
  color: var(--fg-2);
  position: relative;
  padding-block: 4px;
  transition: color var(--d-fast) var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ice);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--d-base) var(--ease-out);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--fg); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }

.theme-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font-size: 1.05rem;
  transition: border-color var(--d-fast), color var(--d-fast);
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--fg); }
.theme-toggle .ti-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ti-sun { display: block; }
:root[data-theme="light"] .theme-toggle .ti-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .ti-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .ti-moon { display: none; }
}

.nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 1.2rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  white-space: nowrap;
  min-height: 48px;
  padding: 0 1.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  transition: transform var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn i { font-size: 1.05rem; }

.btn--primary {
  background: var(--ember);
  color: var(--on-ember);
  box-shadow: 0 10px 30px -12px var(--ember-wash);
}
.btn--primary:hover {
  box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--ember) 55%, transparent);
}

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--fg);
  background: color-mix(in srgb, var(--surface) 40%, transparent);
}
.btn--ghost:hover { border-color: var(--ice); color: var(--ice); }

.btn--wide { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ice);
  font-weight: 500;
  font-size: 0.94rem;
}
.link-arrow i { transition: transform var(--d-base) var(--ease-out); }
.link-arrow:hover i { transform: translateX(4px); }

/* ---------- Reveal ----------
   Progressive enhancement only. Content is visible by default and
   is hidden for the reveal *only* once main.js has confirmed it can
   observe and un-hide it. Without this gate, any situation where the
   observer never runs (JS blocked, script error, a document the
   browser never renders because it loaded in a background tab)
   leaves the whole page at opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--d-slow) var(--ease-out),
                transform var(--d-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ============================================================
   HERO - asymmetric split
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100dvh - 72px);
  display: flex;
  align-items: center;
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-bottom: var(--s-8);
  overflow: hidden;
}

.hero__flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* The hero takes its ambient colour from the dial. Set cold and the
   room goes blue; push it hot and the whole frame warms. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(64% 58% at 74% 44%, var(--now, var(--ice)), transparent 68%);
  opacity: 0.12;
  transition: background var(--d-base) linear;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  width: 100%;
}

/* No max-width here: the grid column is the measure. A ch-based cap
   resolves against the body font and strangles the display type. */
.hero__h1 { margin-bottom: var(--s-5); }
.hero__h1 span { display: block; }

.hero__sub {
  font-size: var(--t-lead);
  color: var(--fg-2);
  max-width: 40ch;
  margin-bottom: var(--s-6);
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Hero visual: the setpoint dial ----------
   A real control, not an illustration. Drag it, click the arc, or
   use the arrow keys. Everything else in the hero takes its colour
   from where the needle sits. */
.hero__visual { position: relative; display: grid; justify-items: center; gap: var(--s-5); }

.dial-stage {
  --dial: clamp(248px, 25vw, 360px);
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  width: 100%;
}

.dial {
  position: relative;
  width: var(--dial);
  height: var(--dial);
  touch-action: none;
  cursor: grab;
  border-radius: 50%;
}
.dial:active { cursor: grabbing; }
.dial:focus-visible { outline: 2px solid var(--ice); outline-offset: 10px; }

/* Ambient bloom behind the ring, tinted by the current setpoint. */
.dial__halo {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--now, var(--ice)) 0%, transparent 62%);
  opacity: 0.16;
  transition: background var(--d-base) linear, opacity var(--d-base) var(--ease-out);
}

.dial__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--thermal-sweep);
  transform: rotate(-140deg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* The full scale, dimmed: you can always see the whole range. */
.dial__ring--track {
  -webkit-mask-image: var(--dial-donut);
          mask-image: var(--dial-donut);
  opacity: var(--dial-track-opacity, 0.28);
}

/* The travelled portion, at full strength. Two masks intersected:
   the ring band, and a wedge from the cold end to the setpoint. */
.dial__ring--active {
  -webkit-mask-image: var(--dial-donut), conic-gradient(#000 0 var(--sweep, 0deg), transparent var(--sweep, 0deg));
  -webkit-mask-composite: source-in;
          mask-image: var(--dial-donut), conic-gradient(#000 0 var(--sweep, 0deg), transparent var(--sweep, 0deg));
          mask-composite: intersect;
  filter: saturate(1.05);
}

.dial__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial__tick { stroke: var(--fg-3); stroke-width: 1; }
.dial__tick--major { stroke: var(--fg-2); stroke-width: 1.6; }
.dial__needle-line {
  stroke: var(--fg);
  stroke-width: 2.2;
  stroke-linecap: round;
}
/* A bead riding the scale. Outlined rather than filled with the live
   colour so it stays visible against the arc it sits on. */
.dial__needle-dot {
  fill: var(--ground);
  stroke: var(--fg);
  stroke-width: 2.4;
}

.dial__hub {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}
.dial__temp {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.dial__temp sup { font-size: 0.34em; top: -1.1em; color: var(--fg-3); }
/* Deliberately NOT tinted with --now. The cold end of the ramp drops
   to 3.8:1 against the ground, which fails AA at this size. The live
   colour is carried by the ring, the bead and the halo instead. */
.dial__mode {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.dial__end {
  position: absolute;
  bottom: 6%;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}
.dial__end--cold { left: 4%; }
.dial__end--hot { right: 4%; }

/* Readout strip: the numbers that make the dial mean something
   for a Nassau house rather than being a pretty circle. */
.dial-read {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  overflow: hidden;
}
.dial-read > div {
  padding: var(--s-4) var(--s-3);
  text-align: center;
  border-left: 1px solid var(--line);
}
.dial-read > div:first-child { border-left: 0; }
.dial-read__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--s-2);
}
.dial-read__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1;
  color: var(--fg);
}
.dial-read__v sup { font-size: 0.5em; top: -0.7em; color: var(--fg-3); }
.dial-read__v--delta { color: var(--ice); }

.dial-hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.dial-hint i { font-size: 0.95rem; color: var(--ice); }
.dial.is-touched ~ .dial-hint,
.dial-stage:has(.dial.is-touched) .dial-hint { opacity: 0; transition: opacity var(--d-base); }

/* ============================================================
   COVERAGE BAND - hairline-divided facts, no cards
   ============================================================ */
.band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground-2) 70%, transparent);
  position: relative;
  z-index: 1;
}
.band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.band__item {
  padding: var(--s-6) var(--s-5);
  border-left: 1px solid var(--line);
}
.band__item:first-child { border-left: 0; padding-left: 0; }
.band__item:last-child { padding-right: 0; }
.band__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--s-2);
}
.band__v {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

/* ============================================================
   SERVICES - asymmetric bento, exactly three cells
   ============================================================ */
.svc__head {
  max-width: 46ch;
  margin-bottom: var(--s-8);
}

.svc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--s-4);
}
.svc__cell--lead { grid-row: span 2; }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.svc:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow-lift); }

/* Cursor spotlight: confirms which panel the pointer owns. */
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), var(--ice-wash), transparent 68%);
}
.svc:hover::before { opacity: 1; }

.svc__media { position: relative; overflow: hidden; background: var(--surface-2); }
.svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
  transition: transform 900ms var(--ease-out);
}
.svc:hover .svc__media img { transform: scale(1.045); }

.svc__cell--lead .svc__media { aspect-ratio: 16 / 11; }
.svc__cell:not(.svc__cell--lead) .svc__media { aspect-ratio: 16 / 6; }

.svc__body { padding: var(--s-5) var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; z-index: 2; }
.svc__body p { color: var(--fg-2); font-size: 0.955rem; }
.svc__body .link-arrow { margin-top: auto; padding-top: var(--s-2); }

.svc__no {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ============================================================
   SPEC - full-bleed editorial, photo left, measured claim right
   ============================================================ */
.spec {
  position: relative;
  background: var(--ground-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.spec__photo {
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 5 / 4;
}
.spec__photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }

.spec__copy p { color: var(--fg-2); margin-top: var(--s-4); max-width: 52ch; }

.spec__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-8);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.spec__stat-v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--fg);
}
.spec__stat-v sup { font-size: 0.5em; color: var(--ice); top: -0.7em; }
.spec__stat-k {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-small);
  color: var(--fg-3);
  max-width: 16ch;
}

/* ============================================================
   PROCESS - vertical path
   ============================================================ */
.proc__head { max-width: 44ch; margin-bottom: var(--s-8); }

.proc__list { display: grid; gap: 0; counter-reset: step; }

.proc__step {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s-5);
  align-items: start;
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
  position: relative;
  transition: background var(--d-base) var(--ease-out);
}
.proc__step:last-child { border-bottom: 1px solid var(--line); }
.proc__step:hover { background: var(--ice-wash); }

.proc__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--ice);
  padding-top: 0.25rem;
}
.proc__step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.015em; }
.proc__step p { color: var(--fg-2); font-size: 0.955rem; }

/* ============================================================
   CAPABILITIES MARQUEE - the one marquee on the page
   ============================================================ */
.mq {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-5);
  background: color-mix(in srgb, var(--ground-2) 60%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq__track {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  width: max-content;
  animation: mqScroll 46s linear infinite;
}
.mq:hover .mq__track { animation-play-state: paused; }
.mq__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}
.mq__item i { color: var(--ice); font-size: 0.95rem; }
.mq__sep { color: var(--line-strong); }

@keyframes mqScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   REVIEWS - honest empty state
   ============================================================ */
.rev__panel {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-panel);
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.rev__panel p { color: var(--fg-2); margin-top: var(--s-4); max-width: 52ch; }
.rev__note {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: var(--s-4);
  display: block;
}
.rev__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.rev__aside {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}
.rev__aside h3 { margin-bottom: var(--s-3); }
.rev__aside ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.rev__aside li { display: flex; gap: 0.7rem; color: var(--fg-2); font-size: 0.94rem; align-items: start; }
.rev__aside i { color: var(--ice); font-size: 1.1rem; flex: none; margin-top: 2px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.faq__aside p { color: var(--fg-2); margin-top: var(--s-4); max-width: 34ch; }
.faq__aside .btn { margin-top: var(--s-6); }

.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  text-align: left;
  padding-block: var(--s-5);
  min-height: 60px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.06rem;
  letter-spacing: -0.012em;
  color: var(--fg);
  transition: color var(--d-fast);
}
.faq__q:hover { color: var(--ice); }
.faq__q i {
  flex: none;
  color: var(--ice);
  font-size: 1.15rem;
  transition: transform var(--d-base) var(--ease-out);
}
.faq__q[aria-expanded="true"] i { transform: rotate(180deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-base) var(--ease-inout);
}
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--fg-2); font-size: 0.96rem; padding-bottom: var(--s-5); max-width: 62ch; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { border-top: 1px solid var(--line); background: var(--ground-2); }
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.contact__aside p { color: var(--fg-2); margin-top: var(--s-4); max-width: 40ch; }

.contact__methods { display: grid; gap: 0; margin-top: var(--s-7); }
.cm {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
  transition: color var(--d-fast);
}
.cm:last-child { border-bottom: 1px solid var(--line); }
a.cm:hover { color: var(--ice); }
.cm i { font-size: 1.3rem; color: var(--ice); flex: none; }
.cm__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 3px;
}
.cm__v { font-size: 1rem; font-weight: 500; }

/* Form */
.form {
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  box-shadow: var(--shadow-panel);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
/* align-content:start stops a field without hint text from stretching
   its input to match the height of a sibling field that has one. */
.field { display: grid; align-content: start; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: var(--t-small); font-weight: 500; color: var(--fg); }
.field .hint { font-size: 0.79rem; color: var(--fg-3); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-input);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 0.96rem;
  transition: border-color var(--d-fast), background var(--d-fast);
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ice);
  background: var(--surface);
  outline: 2px solid color-mix(in srgb, var(--ice) 34%, transparent);
  outline-offset: 1px;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f8ca3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.4rem;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--ember); }
.field__err {
  display: none;
  font-size: 0.8rem;
  color: var(--ember);
  font-weight: 500;
}
.field.has-error .field__err { display: block; }

.form__note {
  font-size: 0.8rem;
  color: var(--fg-3);
  margin-top: var(--s-4);
  text-align: center;
}

.form__ok {
  display: none;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-input);
  border: 1px solid var(--ice);
  background: var(--ice-wash);
  font-size: 0.94rem;
}
.form__ok.is-shown { display: flex; }
.form__ok i { color: var(--ice); font-size: 1.2rem; flex: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { border-top: 1px solid var(--line); padding-top: var(--s-8); }
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  padding-bottom: var(--s-8);
}
.foot__tag { color: var(--fg-2); font-size: 0.93rem; max-width: 34ch; margin-top: var(--s-4); }
.foot__ct { display: block; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s-4); }
.foot__col ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.foot__col a, .foot__col li { color: var(--fg-2); font-size: 0.92rem; }
.foot__col a:hover { color: var(--ice); }

.foot__bottom {
  border-top: 1px solid var(--line);
  padding-block: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--fg-3);
}
.foot__bottom a { color: var(--fg-2); }
.foot__bottom a:hover { color: var(--ice); }

/* ---------- Sticky mobile call bar ---------- */
.callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-nav);
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.callbar a {
  flex: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.93rem;
  font-weight: 500;
  background: var(--ground-2);
}
.callbar a.is-primary { background: var(--ember); color: var(--on-ember); }

/* ============================================================
   INTERIOR PAGE FURNITURE
   ============================================================ */
.pagehead {
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding-bottom: var(--section-y);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.pagehead p {
  color: var(--fg-2);
  font-size: var(--t-lead);
  max-width: 56ch;
  margin-top: var(--s-5);
}

.crumb {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--s-5);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.crumb a:hover { color: var(--ice); }

/* Service detail rows */
.sd { border-top: 1px solid var(--line); }
.sd__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.sd--flip .sd__media { order: 2; }
.sd__media { border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.sd__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
.sd__copy p { color: var(--fg-2); margin-top: var(--s-4); max-width: 54ch; }

/* Wide variant: banner image over a two-column body. Breaks the
   image-beside-text rhythm so three services do not read as a
   zigzag template. */
.sd--wide .sd__inner { display: block; }
.sd--wide .sd__media {
  aspect-ratio: 21 / 8;
  margin-bottom: var(--s-7);
}
.sd--wide .sd__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.sd--wide .sd__body p { color: var(--fg-2); max-width: 54ch; margin-top: var(--s-4); }
.sd--wide .checklist { margin-top: 0; }

.checklist { list-style: none; padding: 0; display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.checklist li { display: flex; gap: 0.7rem; align-items: start; color: var(--fg-2); font-size: 0.95rem; }
.checklist i { color: var(--ice); font-size: 1.05rem; flex: none; margin-top: 3px; }

/* Two-column prose (about) */
.prose-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
.prose-2 p { color: var(--fg-2); }
.prose-2 p + p { margin-top: var(--s-4); }

/* Value list (about) */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: var(--s-8); }
.values > div { padding: var(--s-6) var(--s-5) var(--s-6) 0; border-top: 1px solid var(--line); }
.values > div:nth-child(even) { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.values h3 { margin-bottom: var(--s-3); }
.values p { color: var(--fg-2); font-size: 0.95rem; }
.values i { color: var(--ice); font-size: 1.35rem; display: block; margin-bottom: var(--s-3); }

/* Demo ribbon */
.demo-flag {
  position: relative;
  z-index: 2;
  background: var(--ember-wash);
  border-bottom: 1px solid color-mix(in srgb, var(--ember) 36%, transparent);
  color: var(--fg);
  font-size: 0.8rem;
  text-align: center;
  padding: 0.55rem var(--gutter);
}
.demo-flag strong { color: var(--ember); font-weight: 600; }
body.no-demo .demo-flag { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .hero__sub { max-width: 46ch; }
  .hero { min-height: auto; padding-bottom: var(--s-7); }
  .dial-stage { --dial: min(320px, 74vw); }

  .svc__grid { grid-template-columns: minmax(0, 1fr); }
  .svc__cell--lead { grid-row: auto; }
  .svc__cell:not(.svc__cell--lead) .svc__media { aspect-ratio: 16 / 7; }

  .spec__inner,
  .faq__inner,
  .contact__inner,
  .rev__panel,
  .sd__inner,
  .pagehead__inner,
  .prose-2 { grid-template-columns: minmax(0, 1fr); }

  .sd--flip .sd__media { order: 0; }
  .sd--wide .sd__body { grid-template-columns: minmax(0, 1fr); }
  .sd--wide .sd__media { aspect-ratio: 16 / 9; }
  .rev__aside { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--s-6); }

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

@media (max-width: 860px) {
  .nav__links {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--gutter) var(--s-6);
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-panel);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d-base) var(--ease-out),
                transform var(--d-base) var(--ease-out),
                visibility var(--d-base);
  }
  .nav__links.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav__links a { display: block; padding-block: var(--s-4); border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav__links a::after { display: none; }

  .nav__burger { display: grid; }
  .nav__actions .btn { display: none; }
  .nav.is-menu-open { background: var(--ground); border-bottom-color: transparent; }

  .band__grid { grid-template-columns: repeat(2, 1fr); }
  .band__item { border-left: 0; padding-inline: 0; }
  .band__item:nth-child(even) { border-left: 1px solid var(--line); padding-left: var(--s-5); }
  .band__item:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .proc__step { grid-template-columns: 44px minmax(0, 1fr); }
  .proc__step p { grid-column: 2; }

  .values { grid-template-columns: minmax(0, 1fr); }
  .values > div:nth-child(even) { padding-left: 0; border-left: 0; }

  .callbar { display: flex; }
  body { padding-bottom: 57px; }
  .foot { padding-bottom: 0; }
}

@media (max-width: 600px) {
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .band__grid { grid-template-columns: minmax(0, 1fr); }
  .band__item { border-left: 0 !important; padding-left: 0 !important; }
  .band__item + .band__item { border-top: 1px solid var(--line); }
  .spec__stats { gap: var(--s-5); }
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .dial-stage { --dial: min(280px, 78vw); }
  .dial-read__k { font-size: 0.53rem; letter-spacing: 0.1em; }
  .dial-read__v { font-size: 1.05rem; }
  .dial-read > div { padding: var(--s-3) var(--s-2); }
  .hero__ctas .btn { width: 100%; }

  .thermo-band__row { flex-wrap: wrap; gap: var(--s-3); }
  .thermo-band__track { flex: 1 0 100%; order: 3; margin-top: var(--s-2); }
  .thermo-band__cap { font-size: 0.6rem; }
  .thermo-band__scale span:nth-child(even) { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mq__track { animation: none; transform: none; }
  .hero__flow { display: none; }
  .heat-haze { opacity: 0.35; }
}