/* ==========================================================================
   Controlled Climate Heating & Air
   Design direction: "galvanized" — cool steel greys, torch-ember warm accent,
   frost accent for cooling. Utility type is monospaced, borrowed from the
   equipment data plates the trade actually reads off of.
   No web fonts by design: zero render-blocking network requests.
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------------ */
  --ink:        #12161a;   /* deep steel, near-black but blue-shifted */
  --ink-2:      #1c242b;
  --ink-3:      #2b353e;
  --steel:      #5c6b78;   /* galvanized grey-blue, secondary text */
  --steel-2:    #8a97a2;
  --line:       #d5dbe1;
  --line-dark:  rgba(255,255,255,.14);
  --haze:       #eceff2;   /* cool page tint */
  --haze-2:     #f6f8f9;
  --paper:      #ffffff;

  --ember:      #de4a15;   /* heat */
  --ember-dk:   #b0380d;
  --ember-tint: #fdf0eb;
  --frost:      #1d7f99;   /* cool */
  --frost-dk:   #14606f;
  --frost-tint: #ecf5f8;

  /* --- type -------------------------------------------------------------- */
  /* System faces only: fast first paint, no third-party font requests. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo,
          Consolas, monospace;

  /* --- metrics ----------------------------------------------------------- */
  --wrap: 1180px;
  --narrow: 720px;
  --r: 3px;              /* deliberately tight radius — sheet metal, not pills */
  --gut: clamp(20px, 5vw, 48px);
  --sec: clamp(64px, 9vw, 116px);
  --bar-h: 66px;         /* mobile sticky call bar */
  --shadow: 0 1px 2px rgba(18,22,26,.06), 0 8px 26px -12px rgba(18,22,26,.22);
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.66;
  font-synthesis: none;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.02;
  margin: 0 0 .5em;
  font-weight: 700;
  font-stretch: 96%;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 4.9rem); letter-spacing: 0; }
h2 { font-size: clamp(1.85rem, 3.9vw, 3.05rem); }
h3 { font-size: clamp(1.12rem, 1.75vw, 1.32rem); letter-spacing: 0; line-height: 1.22; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: var(--narrow); }
.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(44px, 6vw, 72px); }
.section--haze { background: var(--haze); }
.section--ink { background: var(--ink); color: #cdd6dd; }
.section--ink h2, .section--ink h3 { color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }

/* --- the signature: spec plate -------------------------------------------
   A hairline-bordered mono label with four corner rivets, lifted from the
   rating plate riveted to every piece of HVAC equipment. Used for eyebrows,
   the stat strip, and the sticky call bar. This is the one loud idea.
   ------------------------------------------------------------------------ */
.plate {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 7px 15px;
  border-radius: 2px;
}
.plate::before, .plate::after {
  content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--line); top: 4px;
}
.plate::before { left: 4px; }
.plate::after  { right: 4px; }
.plate .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ember);
  flex: none;
}
.plate--cold .dot { background: var(--frost); }
.section--ink .plate { background: transparent; border-color: var(--line-dark); color: var(--steel-2); }
.section--ink .plate::before, .section--ink .plate::after { background: var(--line-dark); }

/* eyebrow without the box */
.eyebrow {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--ember), var(--frost));
}
.section--ink .eyebrow { color: var(--steel-2); }

/* the hot→cold seam, used as a structural divider */
.seam {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--ember) 0%, var(--ember) 22%,
              var(--steel) 50%, var(--frost) 78%, var(--frost) 100%);
  opacity: .9;
}

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, background-color .14s ease, box-shadow .14s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--call { background: var(--ember); color: #fff; box-shadow: 0 6px 18px -8px rgba(222,74,21,.75); }
.btn--call:hover { background: var(--ember-dk); }
.btn--ghost { border-color: var(--line); background: var(--paper); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-3); }
.btn--onink { background: #fff; color: var(--ink); }
.btn--onink-ghost { border-color: var(--line-dark); color: #fff; }
.btn--onink-ghost:hover { border-color: #fff; }
.btn--wide { width: 100%; }
.btn .num { font-family: var(--mono); letter-spacing: 0; }

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

/* --- header --------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: 0; color: var(--ink); }
.brand__sub { font-family: var(--mono); font-size: .55rem; letter-spacing: 0; text-transform: uppercase; color: var(--steel); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  text-decoration: none; color: var(--ink-2); font-size: .93rem; font-weight: 600;
  padding: 9px 12px; border-radius: var(--r);
}
.nav a:hover { background: var(--haze); }
.nav a[aria-current="page"] { color: var(--ember); }

.hdr__cta { display: flex; align-items: center; gap: 10px; }
.hdr__phone {
  font-family: var(--mono); font-weight: 600; font-size: .95rem;
  text-decoration: none; color: var(--ink); letter-spacing: 0;
  padding: 8px 4px;
}
.hdr__phone:hover { color: var(--ember); }

.burger {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r); width: 44px; height: 44px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); }

@media (max-width: 940px) {
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 10px var(--gut) 20px;
    max-height: 74vh; overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 4px; border-bottom: 1px solid var(--haze); border-radius: 0; }
  .burger { display: flex; }
  .hdr__phone { display: none; }
  .hdr__cta .btn { display: none; }
}

/* --- hero ----------------------------------------------------------------- */
.hero { position: relative; background: var(--ink); color: #dfe6ec; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media picture { position: absolute; inset: 0; display: block; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,22,26,.72) 0%, rgba(18,22,26,.86) 55%, rgba(18,22,26,.97) 100%),
    radial-gradient(90% 70% at 12% 20%, rgba(222,74,21,.16), transparent 62%),
    radial-gradient(80% 70% at 92% 88%, rgba(29,127,153,.18), transparent 60%);
}
.hero__in { position: relative; padding-block: clamp(72px, 12vw, 132px); }
.hero__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--ember); }
.hero__lede { font-size: clamp(1.03rem, 1.5vw, 1.2rem); color: #b9c5ce; max-width: 46ch; margin-top: 22px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__plate { margin-bottom: 26px; }

/* trust strip inside hero */
.trust { display: flex; flex-wrap: wrap; gap: 26px 40px; margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--line-dark); }
.trust__i { min-width: 120px; }
.trust__k { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; color: #fff; letter-spacing: 0; display: flex; align-items: baseline; gap: 6px; }
.trust__k .stars { color: var(--ember); font-size: .85rem; letter-spacing: 0; font-family: var(--sans); }
.trust__l { font-family: var(--mono); font-size: .58rem; letter-spacing: 0; text-transform: uppercase; color: var(--steel-2); margin-top: 5px; }

/* --- hero form card ------------------------------------------------------- */
.qform {
  background: var(--paper); color: var(--ink-2);
  border-radius: var(--r); box-shadow: 0 24px 60px -24px rgba(0,0,0,.6);
  padding: 26px; border-top: 3px solid var(--ember);
}
.qform h2 { font-size: 1.35rem; margin-bottom: 4px; }
.qform__sub { font-size: .9rem; color: var(--steel); margin-bottom: 18px; }
.field { margin-bottom: 13px; }
.field label {
  display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: 0;
  text-transform: uppercase; color: var(--steel); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 13px; font: inherit; font-size: .96rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--haze-2);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: #fff; border-color: var(--ink);
}
.field textarea { min-height: 84px; resize: vertical; }
.qform__fine { font-size: .74rem; color: var(--steel); margin-top: 12px; line-height: 1.5; }
.form-note { margin-top: 12px; padding: 11px 13px; border-radius: var(--r); font-size: .86rem; display: none; }
.form-note.is-err { display: block; background: var(--ember-tint); color: var(--ember-dk); border: 1px solid #f3cfc1; }
.form-note.is-ok  { display: block; background: var(--frost-tint); color: var(--frost-dk); border: 1px solid #c6dfe7; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 100%; }
}

/* --- high-intent decision strip ------------------------------------------ */
.intent {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.intent__in {
  padding-block: clamp(30px, 5vw, 54px);
  display: grid;
  grid-template-columns: minmax(220px, .76fr) minmax(0, 1.24fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
}
.intent__head h2 {
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  max-width: 13ch;
}
.intent__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.intent__item {
  min-height: 146px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: var(--ink);
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, #fff, var(--haze-2)) padding-box,
    linear-gradient(150deg, rgba(222,74,21,.36), rgba(29,127,153,.28)) border-box;
  transition: transform .22s cubic-bezier(.16,.84,.32,1), box-shadow .22s ease, border-color .22s ease;
}
.intent__item:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 18px 34px -24px rgba(18,22,26,.55);
}
.intent__item span,
.intent__item small {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--steel);
}
.intent__item strong {
  display: block;
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  line-height: 1.08;
  color: var(--ink);
}
.intent__item:first-child,
.intent__item:nth-child(2) {
  background:
    linear-gradient(180deg, #fff, #fff7f4) padding-box,
    linear-gradient(150deg, rgba(222,74,21,.62), rgba(222,74,21,.16)) border-box;
}
.intent__item:first-child strong,
.intent__item:nth-child(2) strong { color: var(--ember-dk); }

@media (max-width: 920px) {
  .intent__in { grid-template-columns: 1fr; }
  .intent__head h2 { max-width: 100%; }
  .intent__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .intent__grid { grid-template-columns: 1fr; }
  .intent__item { min-height: 112px; }
}

/* --- cards ---------------------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px 24px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--steel); opacity: .28; transition: opacity .16s ease;
}
.card--hot::before  { background: var(--ember); }
.card--cold::before { background: var(--frost); }
.card--both::before { background: linear-gradient(180deg, var(--ember), var(--frost)); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--steel-2); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: .93rem; color: var(--steel); margin: 0; }
.card__more {
  font-family: var(--mono); font-size: .55rem; letter-spacing: 0; text-transform: uppercase;
  color: var(--ink); margin-top: 16px; display: inline-flex; align-items: center; gap: 7px;
}
.card__more::after { content: "→"; transition: transform .16s ease; }
.card:hover .card__more::after { transform: translateX(3px); }

/* --- media / gallery ------------------------------------------------------ */
.shot { border-radius: var(--r); overflow: hidden; background: var(--haze); position: relative; }
.shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.shot__cap {
  padding: 14px 16px 16px; background: var(--paper);
  border: 1px solid var(--line); border-top: 0;
}
.shot__t { font-family: var(--mono); font-size: .58rem; letter-spacing: 0; text-transform: uppercase; color: var(--ember); }
.shot__d { font-size: .89rem; color: var(--steel); margin-top: 6px; line-height: 1.5; }

.banner { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.banner img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* --- reviews -------------------------------------------------------------- */
.rev {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; display: flex; flex-direction: column;
}
.rev__stars { color: var(--ember); letter-spacing: 0; font-size: .9rem; margin-bottom: 14px; }
.rev__q { font-size: 1.02rem; color: var(--ink-2); margin: 0 0 18px; }
.rev__m { margin-top: auto; font-family: var(--mono); font-size: .55rem; letter-spacing: 0; text-transform: uppercase; color: var(--steel); }

.proof {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px;
  overflow: hidden;
}
.proof::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--ember), var(--frost));
}
.proof__k {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 14px;
}
.proof h3 { margin-bottom: 10px; }
.proof p { color: var(--steel); font-size: .96rem; margin: 0; }

.placeholder-flag {
  background: #fff4d6; border: 1px solid #e6c766; color: #6b4e00;
  font-family: var(--mono); font-size: .72rem; letter-spacing: 0;
  padding: 10px 14px; border-radius: var(--r); margin-bottom: 22px;
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-weight: 700; font-size: 1.03rem; color: var(--ink); letter-spacing: 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 17px;
  font-family: var(--mono); font-size: 1.3rem; color: var(--ember); font-weight: 400;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 40px 22px 0; color: var(--steel); font-size: .97rem; }

/* --- prose blocks --------------------------------------------------------- */
.prose h2 { margin-top: 0; }
.prose__block { padding-block: 26px; border-top: 1px solid var(--line); }
.prose__block:first-child { border-top: 0; padding-top: 0; }
.prose__block h3 { margin-bottom: 10px; }
.prose__block p { color: var(--steel); margin: 0; }

.lede { font-size: clamp(1.06rem, 1.9vw, 1.32rem); color: var(--steel); max-width: 52ch; }

/* --- lists ---------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chips a, .chips span {
  display: inline-block; text-decoration: none; font-size: .86rem; font-weight: 600;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; color: var(--ink-2);
  background: var(--paper);
}
.chips a:hover { border-color: var(--ink); }
.section--ink .chips a, .section--ink .chips span { background: transparent; border-color: var(--line-dark); color: #cdd6dd; }
.section--ink .chips a:hover { border-color: #fff; color: #fff; }

/* --- steps (real sequence: what happens after you call) ------------------- */
.steps { counter-reset: s; display: grid; gap: 2px; }
.step {
  counter-increment: s; display: grid; grid-template-columns: 68px 1fr; gap: 20px;
  padding: 24px 0; border-top: 1px solid var(--line); align-items: start;
}
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: 1.2rem; color: var(--ember); font-weight: 600;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--steel); font-size: .95rem; margin: 0; }
.section--ink .step { border-color: var(--line-dark); }
.section--ink .step p { color: #a8b5bf; }

/* --- CTA band ------------------------------------------------------------- */
.band { background: var(--ink); color: #cdd6dd; }
.band__in { padding-block: clamp(52px, 7vw, 86px); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.band h2 { color: #fff; margin: 0 0 8px; max-width: 20ch; }
.band p { color: #a8b5bf; margin: 0; max-width: 46ch; }
.band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 780px) { .band__in { grid-template-columns: 1fr; } }

/* --- footer --------------------------------------------------------------- */
.ftr { background: var(--ink); color: #97a5b0; padding-block: 58px 0; font-size: .92rem; }
.ftr a { color: #cdd6dd; text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; }
.ftr h4 { color: #fff; font-size: .72rem; font-family: var(--mono); letter-spacing: 0; text-transform: uppercase; margin: 0 0 16px; font-weight: 500; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ftr__phone { font-family: var(--mono); font-size: 1.3rem; color: #fff !important; font-weight: 600; letter-spacing: 0; text-decoration: none; }
.ftr__legal { margin-top: 46px; padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; font-size: .8rem; }
@media (max-width: 820px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }

/* --- sticky mobile call bar (the highest-value element on the site) ------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: 1px;
  background: var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--ember), var(--frost)) 1;
}
.callbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; padding: 11px 6px; min-height: var(--bar-h);
  font-family: var(--mono); font-size: .55rem; letter-spacing: 0; text-transform: uppercase;
  color: #9fadb8; background: var(--ink);
}
.callbar a strong { font-size: .92rem; letter-spacing: 0; color: #fff; font-family: var(--sans); font-weight: 700; text-transform: none; }
.callbar a.is-primary { background: var(--ember); color: #fbdfd5; }
.callbar a.is-primary strong { color: #fff; }
@media (max-width: 940px) {
  .callbar { display: flex; }
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
}

/* --- breadcrumbs ---------------------------------------------------------- */
.crumbs { font-family: var(--mono); font-size: .55rem; letter-spacing: 0; text-transform: uppercase; color: var(--steel); padding-top: 26px; }
.crumbs a { text-decoration: none; color: var(--steel); }
.crumbs a:hover { color: var(--ember); }
.crumbs span { margin: 0 8px; opacity: .5; }

/* --- page head ------------------------------------------------------------ */
.phead { padding-block: clamp(34px, 5vw, 58px) clamp(32px, 4vw, 52px); }
.phead__grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .phead__grid { grid-template-columns: 1fr; } }

/* --- reveal on scroll ----------------------------------------------------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* --- utility -------------------------------------------------------------- */
.mt-s { margin-top: 14px; } .mt-m { margin-top: 26px; } .mt-l { margin-top: 42px; }
.mb-m { margin-bottom: 26px; } .mb-l { margin-bottom: 42px; }
.center { text-align: center; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hot { color: var(--ember); } .cold { color: var(--frost); }

/* ==========================================================================
   MOTION — v2 pass
   One orchestrated page-load sequence, then quiet scroll reveals. Everything
   below collapses to "already visible" under prefers-reduced-motion.
   ========================================================================== */

/* --- scroll progress: the hot→cold seam, filling as you read -------------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--ember), var(--frost));
  will-change: transform;
}

/* --- page-load sequence --------------------------------------------------- */
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes clipUp {
  from { opacity: 0; transform: translate3d(0, 105%, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes settle {
  from { transform: scale(1.11); }
  to   { transform: scale(1); }
}
@keyframes wipe {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* headline words ride up from behind a mask */
.reveal-line { display: block; overflow: hidden; padding-bottom: .06em; }
.reveal-line > span { display: block; }
.hero .reveal-line > span { animation: clipUp .95s cubic-bezier(.16,.84,.32,1) both; }
.hero .reveal-line:nth-of-type(1) > span { animation-delay: .16s; }
.hero .reveal-line:nth-of-type(2) > span { animation-delay: .26s; }
.hero .reveal-line:nth-of-type(3) > span { animation-delay: .36s; }

.intro { animation: riseIn .8s cubic-bezier(.16,.84,.32,1) both; }
.intro-1 { animation-delay: .05s; }
.intro-2 { animation-delay: .48s; }
.intro-3 { animation-delay: .58s; }
.intro-4 { animation-delay: .68s; }
.intro-5 { animation-delay: .80s; }
.intro-6 { animation-delay: .92s; }

.hero__media img { animation: settle 1.9s cubic-bezier(.16,.84,.32,1) both; }
.hero .seam-load {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, var(--ember), var(--steel), var(--frost));
  transform-origin: 0 50%;
  animation: wipe 1.15s cubic-bezier(.62,.03,.2,1) .1s both;
}

/* --- scroll reveals ------------------------------------------------------- */
.rv { opacity: 0; transform: translate3d(0, 26px, 0);
      transition: opacity .72s cubic-bezier(.16,.84,.32,1),
                  transform .72s cubic-bezier(.16,.84,.32,1); }
.rv.in { opacity: 1; transform: none; }

/* directional variants */
.rv--left  { transform: translate3d(-26px, 0, 0); }
.rv--right { transform: translate3d(26px, 0, 0); }
.rv--scale { transform: scale(.965); opacity: 0; }
.rv--scale.in { transform: none; }

/* headings wipe up behind a mask as they enter */
.rv-mask { overflow: hidden; display: block; padding-bottom: .08em; }
.rv-mask > span {
  display: block; transform: translate3d(0, 105%, 0);
  transition: transform .85s cubic-bezier(.16,.84,.32,1);
}
.rv-mask.in > span { transform: none; }

/* image frames: the photo eases out of an overscaled crop */
.reveal-img { overflow: hidden; }
.reveal-img img {
  transform: scale(1.14);
  transition: transform 1.25s cubic-bezier(.16,.84,.32,1);
  will-change: transform;
}
.reveal-img.in img { transform: scale(1); }

/* staggering is driven by --i set on each child in JS */
.rv[style*="--i"] { transition-delay: calc(var(--i) * 85ms); }
.rv-mask[style*="--i"] > span { transition-delay: calc(var(--i) * 85ms); }

/* --- parallax ------------------------------------------------------------- */
.px { will-change: transform; }

/* --- full-bleed band ------------------------------------------------------ */
.bleed { position: relative; overflow: hidden; background: var(--ink); }
.bleed__media { position: absolute; inset: -12% 0; }
.bleed__media picture { position: absolute; inset: 0; display: block; }
.bleed__media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.bleed__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,22,26,.86), rgba(18,22,26,.72) 50%, rgba(18,22,26,.9));
}
.bleed__in { position: relative; padding-block: clamp(84px, 13vw, 168px); }
.bleed h2 { color: #fff; max-width: 17ch; }
.bleed p { color: #b7c3cc; max-width: 48ch; }

/* --- detail strip: tight crops, no captions, pure texture ----------------- */
.details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.details .reveal-img { aspect-ratio: 1; background: var(--ink-2); }
.details img { width: 100%; height: 100%; object-fit: cover;
               filter: grayscale(.28) contrast(1.04); transition: filter .5s ease, transform 1.25s cubic-bezier(.16,.84,.32,1); }
.details .reveal-img:hover img { filter: none; transform: scale(1.05); }
@media (max-width: 700px) { .details { grid-template-columns: repeat(2, 1fr); } }

/* --- counters ------------------------------------------------------------- */
.trust__k .count { font-variant-numeric: tabular-nums; }

/* --- refined hovers ------------------------------------------------------- */
.card { transition: transform .3s cubic-bezier(.16,.84,.32,1),
                    box-shadow .3s ease, border-color .3s ease; }
.card:hover { transform: translateY(-4px); }
.shot { transition: transform .3s cubic-bezier(.16,.84,.32,1); }
.shot:hover { transform: translateY(-3px); }
.btn { transition: transform .22s cubic-bezier(.16,.84,.32,1),
                   background-color .22s ease, box-shadow .22s ease, border-color .22s ease; }
.btn--call:hover { box-shadow: 0 10px 26px -10px rgba(222,74,21,.9); }

/* --- reduced motion: everything resolves instantly ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
  .hero .reveal-line > span, .intro, .hero__media img, .hero .seam-load { animation: none !important; }
  .rv, .rv--left, .rv--right, .rv--scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rv-mask > span { transform: none !important; transition: none !important; }
  .reveal-img img { transform: none !important; transition: none !important; }
  .card:hover, .shot:hover, .btn:hover { transform: none; }
}

/* ==========================================================================
   v3 — surface, depth, and the thermal scrub
   ========================================================================== */

/* --- film grain: kills the flat "template" feel on large colour fields ---- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .038; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hdr, .callbar, .fab, .progress { z-index: 90; }
.hdr { z-index: 92; } .progress { z-index: 100; } .fab { z-index: 94; }

/* --- glass header --------------------------------------------------------- */
.hdr {
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(213,219,225,.7);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hdr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(222,74,21,.5), rgba(29,127,153,.5), transparent);
  opacity: 0; transition: opacity .4s ease;
}
.hdr.is-stuck {
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 34px -22px rgba(18,22,26,.55);
}
.hdr.is-stuck::after { opacity: 1; }
.hdr__in { min-height: 82px; transition: min-height .3s cubic-bezier(.16,.84,.32,1); }
.hdr.is-stuck .hdr__in { min-height: 66px; }
.brand__mark { width: 46px; height: 46px; transition: width .3s ease, height .3s ease; }
.hdr.is-stuck .brand__mark { width: 38px; height: 38px; }
.brand__name { font-size: 1.1rem; letter-spacing: 0; }
@supports not (backdrop-filter: blur(1px)) { .hdr { background: rgba(255,255,255,.97); } }

.nav a { position: relative; transition: color .22s ease; }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: linear-gradient(90deg, var(--ember), var(--frost));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s cubic-bezier(.16,.84,.32,1);
}
.nav a:hover { background: none; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* --- floating call button (desktop) --------------------------------------- */
.fab {
  position: fixed; right: 26px; bottom: 26px;
  display: none; align-items: center; gap: 12px;
  padding: 15px 22px 15px 17px; border-radius: 100px;
  background: var(--ember); color: #fff; text-decoration: none;
  font-weight: 700; letter-spacing: 0;
  box-shadow: 0 12px 34px -10px rgba(222,74,21,.72), 0 2px 8px rgba(18,22,26,.2);
  transition: transform .26s cubic-bezier(.16,.84,.32,1), box-shadow .26s ease, background .2s ease;
}
.fab:hover { background: var(--ember-dk); transform: translateY(-3px) scale(1.02);
             box-shadow: 0 18px 44px -12px rgba(222,74,21,.85); }
.fab__ring { position: relative; width: 34px; height: 34px; flex: none;
             display: grid; place-items: center; border-radius: 50%;
             background: rgba(255,255,255,.18); }
.fab__ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  animation: fabPulse 2.6s cubic-bezier(.16,.84,.32,1) infinite;
}
@keyframes fabPulse {
  0%   { transform: scale(1);   opacity: .75; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
.fab__txt { display: flex; flex-direction: column; line-height: 1.1; }
.fab__txt small { font-family: var(--mono); font-size: .5rem; letter-spacing: 0;
                  text-transform: uppercase; opacity: .82; margin-bottom: 2px; }
.fab svg { width: 16px; height: 16px; fill: #fff; }
@media (min-width: 941px) { .fab { display: flex; } }
@media (prefers-reduced-motion: reduce) { .fab__ring::before { animation: none; } .fab:hover { transform: none; } }

/* --- richer cards --------------------------------------------------------- */
.card {
  padding: 30px 28px 28px;
  background:
    linear-gradient(180deg, var(--paper), var(--paper)) padding-box,
    linear-gradient(160deg, var(--line), var(--line)) border-box;
  border: 1px solid transparent;
}
.card:hover {
  background:
    linear-gradient(180deg, var(--paper), var(--haze-2)) padding-box,
    linear-gradient(160deg, rgba(222,74,21,.55), rgba(29,127,153,.45)) border-box;
  box-shadow: 0 22px 44px -26px rgba(18,22,26,.5);
}
.card::before { width: 2px; }
.card h3 { transition: color .22s ease; }
.card:hover h3 { color: var(--ember); }
.card--cold:hover h3 { color: var(--frost); }

/* --- hero: ambient thermal field ------------------------------------------ */
.hero__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(38% 44% at 18% 28%, rgba(222,74,21,.32), transparent 68%),
    radial-gradient(40% 46% at 84% 74%, rgba(29,127,153,.34), transparent 66%);
  filter: blur(20px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { opacity: .52; }
  to   { opacity: .82; }
}
.hero__in { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero__glow { animation: none; } }

/* --- THE THERMAL SCRUB ----------------------------------------------------
   Drag the handle from frost to ember. Copy, imagery and accent colour cross
   over with it. It is the business in one control.
   ------------------------------------------------------------------------- */
.scrub {
  position: relative; overflow: hidden; color: #fff;
  background: var(--ink);
  --t: 0.5;   /* 0 = full cold, 1 = full hot */
}
.scrub__bg { position: absolute; inset: 0; }
.scrub__bg img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
                 transition: opacity .5s ease; }
.scrub__bg .is-cold { opacity: calc(1 - var(--t)); }
.scrub__bg .is-hot  { opacity: var(--t); }
.scrub__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,22,26,.78), rgba(18,22,26,.9)),
    linear-gradient(120deg,
      rgba(29,127,153, calc(.55 * (1 - var(--t)))),
      rgba(222,74,21, calc(.55 * var(--t))));
}
.scrub__in { position: relative; padding-block: clamp(72px, 10vw, 128px); }
.scrub__head { display: flex; justify-content: space-between; align-items: flex-end;
               gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.scrub__temp { font-family: var(--mono); font-size: clamp(2.4rem, 6vw, 4.2rem);
               font-weight: 500; letter-spacing: 0; line-height: 1;
               font-variant-numeric: tabular-nums; }
.scrub__mode { font-family: var(--mono); font-size: .6rem; letter-spacing: 0;
               text-transform: uppercase; margin-top: 10px; color: #b7c3cc; }
.scrub h2 { color: #fff; max-width: 15ch; margin: 0; }
.scrub__copy { color: #c4ced6; max-width: 46ch; margin-top: 16px; min-height: 4.5em; }

.scrub__track {
  position: relative; height: 62px; border-radius: 100px; margin-top: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  cursor: grab; touch-action: none; user-select: none;
}
.scrub__track:active { cursor: grabbing; }
.scrub__fill {
  position: absolute; inset: 3px; border-radius: 100px; overflow: hidden;
  background: linear-gradient(90deg, var(--frost) 0%, #4a6472 45%, var(--ember) 100%);
  clip-path: inset(0 calc((1 - var(--t)) * 100%) 0 0 round 100px);
}
.scrub__handle {
  position: absolute; top: 50%; left: calc(var(--t) * (100% - 56px) + 28px);
  width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.45);
  display: grid; place-items: center; pointer-events: none;
}
.scrub__handle::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--ember) calc(var(--t) * 100%), var(--frost));
}
.scrub__labels { display: flex; justify-content: space-between; margin-top: 14px;
                 font-family: var(--mono); font-size: .58rem; letter-spacing: 0;
                 text-transform: uppercase; color: #93a2ad; }
.scrub__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding: 0; list-style: none; }
.scrub__list a { display: inline-block; text-decoration: none; font-size: .86rem; font-weight: 600;
                 padding: 9px 16px; border-radius: 100px; color: #fff;
                 border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.06);
                 transition: background .2s ease, border-color .2s ease; }
.scrub__list a:hover { background: rgba(255,255,255,.16); border-color: #fff; }
@media (max-width: 720px) { .scrub__head { display: block; } .scrub h2 { margin-top: 20px; } }

/* --- glass panels used on interior pages ---------------------------------- */
.glass {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 6px;
  box-shadow: 0 20px 50px -30px rgba(18,22,26,.5);
}

/* --- dashboard ------------------------------------------------------------ */
.dash { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat { border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; background: var(--paper); }
.stat__k { font-family: var(--mono); font-size: 2.1rem; font-weight: 500; letter-spacing: 0;
           color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__l { font-family: var(--mono); font-size: .55rem; letter-spacing: 0; text-transform: uppercase;
           color: var(--steel); margin-top: 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th { text-align: left; font-family: var(--mono); font-size: .55rem; letter-spacing: 0;
          text-transform: uppercase; color: var(--steel); padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 500; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--haze); vertical-align: top; }
.tbl tr:hover td { background: var(--haze-2); }
.tag { font-family: var(--mono); font-size: .58rem; letter-spacing: 0; padding: 3px 8px;
       border-radius: 3px; background: var(--haze); color: var(--ink-3); display: inline-block; }
.tag--call { background: var(--ember-tint); color: var(--ember-dk); }
.tag--form { background: var(--frost-tint); color: var(--frost-dk); }
.bar { height: 8px; border-radius: 4px; background: var(--haze); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--frost)); }
.ftr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr-list a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 8px; display: block; }
.ftr-list a:hover { color: var(--ember); border-color: var(--ember); }

/* Keep every section readable even when full-page capture, browser settings,
   or reduced JS execution skip scroll-triggered reveal timing. */
/* ==========================================================================
   v4 — premium revamp
   Bigger spatial rhythm, stronger photographic moments, and motion that feels
   tied to the material language of the trade instead of generic page effects.
   ========================================================================== */

:root {
  --r: 6px;
  --shadow-sm: 0 8px 22px -18px rgba(18,22,26,.42);
  --shadow-md: 0 20px 54px -34px rgba(18,22,26,.58);
  --shadow-lg: 0 34px 90px -48px rgba(18,22,26,.72);
  --surface: rgba(255,255,255,.82);
}

body {
  background:
    linear-gradient(180deg, #f9fbfc 0, #fff 320px, #eef2f4 321px, #fff 760px);
}

.section {
  position: relative;
  isolation: isolate;
}

.section > .wrap,
.intent > .wrap,
.band > .wrap,
.ftr > .wrap {
  position: relative;
  z-index: 2;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: min(34vw, 420px);
  height: 1px;
  background: linear-gradient(90deg, rgba(222,74,21,.42), rgba(29,127,153,0));
  opacity: .75;
}

.section--haze {
  background:
    linear-gradient(180deg, #edf2f4, #f8fafb 42%, #e9eef1);
}

.section--ink {
  background:
    linear-gradient(135deg, #101418 0%, #182129 48%, #0f171c 100%);
}

.section--ink::before,
.band::before,
.bleed::before,
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 78%);
}

.hdr {
  background: rgba(250,252,253,.76);
}

.hdr__in {
  min-height: 86px;
}

.brand__name {
  font-weight: 850;
}

.nav {
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(213,219,225,.72);
  background: rgba(255,255,255,.58);
  border-radius: 8px;
}

.nav a {
  border-radius: 5px;
}

.hdr__cta .btn {
  padding-inline: 20px;
}

.btn {
  min-height: 50px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
}

.btn--call {
  background:
    linear-gradient(180deg, #ef5a21, var(--ember-dk));
  border-color: rgba(255,255,255,.12);
}

.btn--ghost {
  background: rgba(255,255,255,.78);
  border-color: rgba(138,151,162,.42);
}

.btn--onink-ghost {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
}

.hero {
  min-height: calc(100svh - 86px);
  display: grid;
  align-items: center;
}

.hero__media img {
  opacity: .44;
  filter: saturate(.9) contrast(1.06);
}

.hero__media::after {
  background:
    linear-gradient(90deg, rgba(10,14,18,.96) 0%, rgba(14,20,25,.88) 42%, rgba(16,23,28,.58) 74%, rgba(16,23,28,.78) 100%),
    linear-gradient(180deg, rgba(18,22,26,.36), rgba(18,22,26,.96)),
    radial-gradient(70% 58% at 20% 22%, rgba(222,74,21,.22), transparent 64%),
    radial-gradient(54% 48% at 84% 80%, rgba(29,127,153,.2), transparent 70%);
}

.hero__glow {
  opacity: .7;
  filter: blur(34px);
}

.hero__in {
  width: 100%;
  padding-block: clamp(58px, 7vw, 98px);
}

.hero__grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .72fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
}

.hero h1 {
  max-width: 15ch;
  font-size: clamp(3rem, 5.9vw, 6rem);
  line-height: .94;
  font-weight: 900;
}

.hero h1 em {
  color: #ff6b2d;
  text-shadow: 0 0 34px rgba(222,74,21,.32);
}

.hero__lede {
  max-width: 54ch;
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  color: #d4dde4;
}

.hero__actions {
  gap: 14px;
}

.hero__rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.hero__rail span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.055);
  color: #c8d3db;
  font-family: var(--mono);
  font-size: .58rem;
  text-transform: uppercase;
  border-radius: 4px;
}

.trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 10px;
  border-top: 0;
  padding-top: 0;
  margin-top: 28px;
  max-width: 780px;
}

.trust__i {
  min-width: 0;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.trust__k {
  font-size: clamp(1.15rem, 2vw, 1.65rem);
}

.hero__formwrap {
  position: relative;
}

.hero__formwrap::before {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(222,74,21,.12), transparent 34%),
    linear-gradient(315deg, rgba(29,127,153,.16), transparent 42%);
  transform: translate3d(14px, 14px, 0);
}

.hero__formtop {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: rgba(16,21,25,.88);
  color: #dfe8ee;
  border: 1px solid rgba(255,255,255,.14);
  border-bottom: 0;
  font-family: var(--mono);
  font-size: .64rem;
  text-transform: uppercase;
}

.hero__formtop strong {
  color: #fff;
  font-weight: 700;
}

.qform {
  position: relative;
  z-index: 2;
  padding: clamp(22px, 2.5vw, 30px);
  border: 1px solid rgba(255,255,255,.2);
  border-top: 3px solid var(--ember);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.8);
}

.qform h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}

.field input,
.field select,
.field textarea {
  min-height: 48px;
  border-color: rgba(138,151,162,.38);
  background: #f3f6f7;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: 0 0 0 4px rgba(29,127,153,.11);
}

.intent {
  background:
    linear-gradient(180deg, #fff, #f3f7f8);
  border-bottom: 0;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(213,219,225,.7);
}

.intent__in {
  padding-block: clamp(42px, 6vw, 78px);
}

.intent__grid {
  gap: 14px;
}

.intent__item {
  min-height: 172px;
  padding: 22px 20px;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}

.intent__item strong {
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
}

.grid {
  gap: clamp(16px, 2vw, 24px);
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 295px), 1fr));
}

.card {
  min-height: 248px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.card::after,
.intent__item::after,
.proof::after,
.rev::after,
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.42), transparent 48%);
  transition: opacity .24s ease;
}

.card:hover::after,
.intent__item:hover::after,
.proof:hover::after,
.rev:hover::after,
.btn:hover::after {
  opacity: .55;
}

.card__tag {
  width: max-content;
  margin-bottom: 26px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  background: var(--haze-2);
  color: var(--steel);
  font-family: var(--mono);
  font-size: .54rem;
  text-transform: uppercase;
}

.card--hot .card__tag { color: var(--ember-dk); background: var(--ember-tint); border-color: rgba(222,74,21,.2); }
.card--cold .card__tag { color: var(--frost-dk); background: var(--frost-tint); border-color: rgba(29,127,153,.22); }
.card--both .card__tag { color: var(--ink); background: linear-gradient(90deg, var(--ember-tint), var(--frost-tint)); }

.card h3 {
  font-size: clamp(1.22rem, 1.8vw, 1.56rem);
}

.card p {
  margin-bottom: 24px;
}

.card__more {
  margin-top: auto;
}

.details {
  margin-top: clamp(46px, 6vw, 76px);
}

.section--process {
  overflow: hidden;
  padding-bottom: clamp(48px, 6vw, 78px);
}

.section--process .steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
}

.section--process .step {
  display: block;
  min-height: 292px;
  padding: 28px 24px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.032));
}

.section--process .step::before {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 34px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #ff7842;
}

.section--process .step h3 {
  color: #fff;
  font-size: 1.15rem;
}

.shot {
  box-shadow: var(--shadow-sm);
}

.shot img {
  aspect-ratio: 5 / 4;
  transition: transform .9s cubic-bezier(.16,.84,.32,1), filter .35s ease;
}

.shot:hover img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.03);
}

.shot__cap {
  min-height: 112px;
}

.proof,
.rev {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  box-shadow: var(--shadow-sm);
}

.proof:hover,
.rev:hover {
  box-shadow: var(--shadow-md);
}

.bleed {
  min-height: clamp(560px, 68vh, 740px);
  display: grid;
  align-items: center;
}

.bleed__media img {
  opacity: .46;
  filter: saturate(.9) contrast(1.05);
}

.bleed__in {
  padding-block: clamp(104px, 13vw, 188px);
}

.band {
  position: relative;
  overflow: hidden;
}

.band__in {
  padding-block: clamp(68px, 8vw, 104px);
}

.ftr {
  background:
    linear-gradient(180deg, #13191e, #0f1418);
}

/* Reveal states: readable by default, animated only when JS marks the page. */
.rv,
.rv--left,
.rv--right,
.rv--scale,
.rv-mask > span,
.reveal-img img {
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}

.js .rv {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
}

.js .rv--left { transform: translate3d(-34px, 0, 0); }
.js .rv--right { transform: translate3d(34px, 0, 0); }
.js .rv--scale { transform: scale(.94); }

.js .rv.in,
.js .rv--left.in,
.js .rv--right.in,
.js .rv--scale.in {
  opacity: 1;
  transform: none;
}

.js .rv-mask > span {
  transform: translate3d(0, 110%, 0);
}

.js .rv-mask.in > span {
  transform: none;
}

.js .reveal-img img {
  transform: scale(1.12);
}

.js .reveal-img.in img {
  transform: scale(1);
}

.js .rv[style*="--i"] { transition-delay: calc(var(--i) * 95ms); }
.js .rv-mask[style*="--i"] > span { transition-delay: calc(var(--i) * 95ms); }

@media (max-width: 1080px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section--process .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero {
    min-height: 0;
  }
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__formwrap::before {
    display: none;
  }
  .nav {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .wrap {
    padding-inline: 18px;
  }
  .hero h1 {
    font-size: clamp(2.72rem, 13vw, 3.45rem);
    max-width: 12ch;
  }
  .hero__in {
    padding-block: 46px 54px;
  }
  .hero__plate {
    margin-bottom: 20px;
  }
  .hero__rail {
    margin-top: 20px;
  }
  .hero__rail span {
    min-height: 30px;
    font-size: .52rem;
  }
  .trust,
  .section--process .steps {
    grid-template-columns: 1fr;
  }
  .section--process .step {
    min-height: 0;
  }
  .intent__item {
    min-height: 128px;
  }
  .qform {
    padding: 22px 18px;
  }
}

/* ==========================================================================
   v5 — softer premium finish
   Manrope replaces the harsher utility feel, panels get more even, and the
   interface keeps the steel/ember/frost palette without reading as boxy.
   ========================================================================== */

:root {
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 8px;
  --line: #dce2e7;
  --haze: #f1f5f7;
  --haze-2: #f8fafb;
  --shadow-sm: 0 14px 34px -28px rgba(18,22,26,.42);
  --shadow-md: 0 22px 58px -38px rgba(18,22,26,.5);
  --shadow-lg: 0 34px 86px -50px rgba(18,22,26,.62);
}

body {
  font-size: 16.5px;
  line-height: 1.72;
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.06;
}

h1 {
  font-size: clamp(2.55rem, 5.7vw, 4.8rem);
}

h2 {
  font-size: clamp(1.82rem, 3.55vw, 2.85rem);
}

h3 {
  font-size: clamp(1.1rem, 1.55vw, 1.26rem);
}

.plate,
.eyebrow,
.brand__sub,
.hdr__phone,
.trust__k,
.trust__l,
.field label,
.hero__rail span,
.intent__item span,
.intent__item small,
.card__tag,
.card__more,
.shot__t,
.rev__m,
.proof__k,
.ftr h4,
.ftr__phone,
.callbar a,
.crumbs,
.fab__txt small,
.scrub__temp,
.scrub__mode,
.scrub__labels,
.scrub__list a,
.stat__k,
.stat__l,
.tbl th,
.tag {
  font-family: var(--mono);
  letter-spacing: 0;
}

.eyebrow,
.brand__sub,
.trust__l,
.field label,
.hero__rail span,
.intent__item span,
.intent__item small,
.card__tag,
.card__more,
.shot__t,
.rev__m,
.proof__k,
.ftr h4,
.callbar a,
.crumbs,
.fab__txt small,
.scrub__mode,
.scrub__labels,
.stat__l,
.tbl th,
.hero__formtop {
  text-transform: none;
  font-weight: 700;
}

.plate {
  border-radius: 8px;
  padding: 9px 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 32px -28px rgba(18,22,26,.5);
}

.plate::before,
.plate::after {
  display: none;
}

.eyebrow {
  font-size: .72rem;
  color: var(--frost-dk);
}

.eyebrow::before {
  width: 22px;
  height: 2px;
  border-radius: 2px;
}

.hdr {
  background: rgba(250,252,253,.82);
}

.nav {
  border-radius: 8px;
  box-shadow: 0 12px 34px -30px rgba(18,22,26,.32);
}

.nav a {
  font-weight: 750;
}

.brand__name {
  font-weight: 800;
}

.btn {
  border-radius: 8px;
  font-weight: 800;
}

.hero h1 {
  max-width: 16ch;
  font-size: clamp(3rem, 5.15vw, 5.25rem);
  line-height: 1;
  font-weight: 800;
}

.hero__lede {
  color: #e0e7ec;
}

.hero__rail span {
  border-radius: 8px;
  font-size: .68rem;
  background: rgba(255,255,255,.075);
}

.trust {
  gap: 12px;
}

.trust__i {
  border-radius: 8px;
  padding: 16px;
}

.trust__k {
  font-weight: 800;
}

.qform,
.hero__formtop {
  border-radius: 8px;
}

.hero__formtop {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.hero__formtop + .qform {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.field input,
.field select,
.field textarea {
  border-radius: 8px;
}

.intent__grid {
  align-items: stretch;
}

.intent__item {
  min-height: 154px;
  border-radius: 8px;
  border-color: rgba(213,219,225,.78);
}

.intent__item span,
.intent__item small {
  font-size: .68rem;
}

.intent__item strong {
  font-weight: 800;
}

.card {
  min-height: 232px;
  border-radius: 8px;
  padding: 30px 28px;
}

.card__tag {
  margin-bottom: 22px;
  border-radius: 8px;
  font-size: .66rem;
}

.card p {
  font-size: .96rem;
}

.section--process .steps {
  gap: 14px;
  background: transparent;
  border: 0;
}

.section--process .step {
  border-radius: 8px;
  min-height: 270px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.038));
}

.section--process .step::before {
  border-radius: 8px;
  margin-bottom: 28px;
}

.shot,
.shot__cap,
.banner,
.proof,
.rev,
.stat {
  border-radius: 8px;
}

.shot {
  overflow: hidden;
}

.shot__cap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.proof,
.rev {
  min-height: 238px;
}

.chips a,
.chips span,
.scrub__list a,
.fab {
  border-radius: 8px;
}

.callbar {
  gap: 0;
}

.callbar a strong {
  font-family: var(--sans);
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .hero h1 {
    font-size: clamp(2.56rem, 12vw, 3.28rem);
    max-width: 13ch;
  }

  .hero__rail {
    gap: 7px;
  }

  .hero__rail span {
    font-size: .62rem;
  }

  .trust__i {
    padding: 15px 16px;
  }

  .card,
  .intent__item,
  .section--process .step {
    min-height: 0;
  }
}

/* ==========================================================================
   v6 — complete aesthetic reset
   A lighter editorial service-site direction: less boxed, more composed,
   asymmetric photography, softer panels, and a calmer premium rhythm.
   ========================================================================== */

:root {
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --paper: #fbfcfd;
  --haze: #eef4f6;
  --haze-2: #f7fafb;
  --ink: #101820;
  --ink-2: #26323b;
  --steel: #647381;
  --line: #e1e7eb;
  --r: 8px;
  --shadow-sm: 0 18px 42px -34px rgba(16,24,32,.38);
  --shadow-md: 0 28px 72px -48px rgba(16,24,32,.48);
  --shadow-lg: 0 42px 110px -62px rgba(16,24,32,.62);
}

body {
  color: var(--ink-2);
  background:
    linear-gradient(180deg, #fbfcfd 0%, #f4f8f9 34%, #fbfcfd 68%, #eef4f6 100%);
}

body::after {
  opacity: .022;
  mix-blend-mode: multiply;
}

h1, h2, h3, h4 {
  font-weight: 760;
  line-height: 1.08;
}

.hdr {
  background: rgba(251,252,253,.9);
  border-bottom: 1px solid rgba(225,231,235,.75);
  box-shadow: 0 18px 46px -42px rgba(16,24,32,.55);
}

.hdr__in {
  min-height: 76px;
}

.brand__mark {
  width: 42px;
  height: 42px;
}

.brand__name {
  font-size: 1.04rem;
}

.brand__sub {
  font-size: .62rem;
  color: #6f7f8c;
}

.nav {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 16px;
}

.nav a {
  padding: 9px 0;
  font-size: .92rem;
  color: #202b33;
}

.nav a::after {
  left: 0;
  right: 0;
  bottom: 0;
}

.hdr__phone {
  font-weight: 760;
  font-size: .98rem;
}

.btn {
  min-height: 52px;
  border-radius: 8px;
  padding: 15px 24px;
}

.btn--call {
  background: linear-gradient(135deg, #f0642d, #c93610);
}

.btn--ghost,
.btn--onink-ghost {
  background: rgba(255,255,255,.72);
  border-color: rgba(100,115,129,.24);
  color: var(--ink);
  box-shadow: 0 16px 34px -30px rgba(16,24,32,.42);
}

.section {
  padding-block: clamp(76px, 9vw, 132px);
}

.section::before {
  display: none;
}

.phead__grid {
  align-items: end;
}

.lede {
  color: #647381;
  line-height: 1.68;
}

.plate {
  gap: 9px;
  border: 0;
  background: rgba(255,255,255,.82);
  color: #5d6f7d;
  box-shadow: 0 16px 42px -34px rgba(16,24,32,.5);
}

.eyebrow {
  color: #176a80;
  font-size: .74rem;
  margin-bottom: 16px;
}

.eyebrow::before {
  background: var(--frost);
}

.hero {
  color: var(--ink);
  background:
    linear-gradient(115deg, #fbfcfd 0%, #fbfcfd 49%, rgba(238,244,246,.68) 49%, rgba(238,244,246,.68) 100%);
  min-height: calc(100svh - 76px);
  overflow: hidden;
}

.hero::before {
  display: none;
}

.hero__media {
  inset: clamp(38px, 6vw, 80px) clamp(18px, 4vw, 54px) clamp(38px, 6vw, 80px) auto;
  width: min(44vw, 620px);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--ink);
}

.hero__media picture,
.hero__media img {
  position: absolute;
  inset: 0;
}

.hero__media img {
  opacity: .86;
  filter: saturate(.94) contrast(1.04);
}

.hero__media::after {
  background:
    linear-gradient(180deg, rgba(16,24,32,.02), rgba(16,24,32,.42)),
    linear-gradient(120deg, rgba(222,74,21,.22), transparent 46%),
    linear-gradient(300deg, rgba(29,127,153,.24), transparent 48%);
}

.hero__glow,
.hero .seam-load {
  display: none;
}

.hero__in {
  padding-block: clamp(58px, 8vw, 118px);
}

.hero__grid {
  grid-template-columns: minmax(0, .94fr) minmax(330px, .54fr);
  align-items: center;
  gap: clamp(34px, 5vw, 74px);
}

.hero__grid > div:first-child {
  max-width: 720px;
}

.hero h1 {
  color: #101820;
  font-size: clamp(3.4rem, 6.3vw, 6.55rem);
  line-height: .98;
  max-width: 10.8ch;
}

.hero h1 em {
  color: var(--ember);
  text-shadow: none;
}

.hero__lede {
  color: #52636f;
  max-width: 48ch;
}

.hero__rail span {
  color: #4c5e6a;
  background: rgba(255,255,255,.78);
  border-color: rgba(100,115,129,.18);
}

.trust {
  display: flex;
  max-width: 600px;
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid rgba(100,115,129,.22);
  border-bottom: 1px solid rgba(100,115,129,.22);
  padding-block: 18px;
}

.trust__i {
  flex: 1;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.trust__i + .trust__i {
  border-left: 1px solid rgba(100,115,129,.22);
}

.trust__k {
  color: #101820;
}

.trust__k .stars {
  color: var(--ember);
}

.trust__l {
  color: #647381;
}

.hero__formwrap {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__formwrap::before {
  display: none;
}

.hero__formtop {
  background: rgba(16,24,32,.9);
  border: 0;
  color: #e8eef2;
}

.qform {
  border: 0;
  border-top: 3px solid var(--ember);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}

.hero__formwrap {
  max-width: 410px;
  margin-left: auto;
}

.field input,
.field select,
.field textarea {
  background: #fff;
  border-color: #d4dde4;
}

.intent {
  background: #101820;
  color: #cdd8df;
  box-shadow: none;
}

.intent__in {
  grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr);
  padding-block: clamp(52px, 7vw, 92px);
}

.intent .eyebrow,
.intent h2 {
  color: #fff;
}

.intent__item {
  min-height: 0;
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.22);
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.intent__item:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.intent__item span,
.intent__item small {
  color: #98a8b3;
}

.intent__item strong,
.intent__item:first-child strong,
.intent__item:nth-child(2) strong {
  color: #fff;
  font-size: clamp(1.28rem, 2vw, 1.72rem);
}

.grid {
  gap: clamp(18px, 2.2vw, 28px);
}

.card {
  min-height: 238px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fff, #fbfcfd);
  box-shadow: 0 1px 0 rgba(16,24,32,.08), var(--shadow-sm);
}

.card::before {
  inset: auto 28px 24px 28px;
  top: auto;
  bottom: 24px;
  width: auto;
  height: 2px;
  opacity: .5;
}

.card:hover {
  background:
    linear-gradient(180deg, #fff, #f6fafb);
  box-shadow: var(--shadow-md);
}

.card h3 {
  font-size: clamp(1.35rem, 2vw, 1.72rem);
}

.card__tag {
  border: 0;
  padding: 0;
  background: transparent !important;
}

.details {
  gap: 12px;
  width: min(100% - 36px, 1240px);
  margin-inline: auto;
  padding-bottom: clamp(18px, 4vw, 44px);
}

.details .reveal-img {
  border-radius: 8px;
}

.scrub {
  margin-inline: clamp(18px, 3vw, 42px);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}

.section--process {
  background:
    linear-gradient(180deg, #f8fafb, #eaf2f5);
  color: var(--ink-2);
  padding-block: clamp(62px, 7vw, 92px) clamp(42px, 5vw, 64px);
}

.section--process::before {
  display: none;
}

.section--process .eyebrow,
.section--process h2,
.section--process .step h3 {
  color: var(--ink);
}

.section--process .steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.section--process .step {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  min-height: 0;
  padding: 28px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.section--process .step::before {
  width: auto;
  height: auto;
  margin: 0;
  place-items: start;
  border: 0;
  background: transparent;
  color: var(--ember);
}

.section--process .step p {
  color: #647381;
}

.banner {
  border: 0;
  box-shadow: var(--shadow-md);
}

.shot,
.proof,
.rev {
  border: 0;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.shot__cap {
  border: 0;
}

.section--haze {
  background:
    linear-gradient(180deg, #eef4f6, #f8fafb);
}

.bleed {
  margin-inline: clamp(18px, 3vw, 42px);
  border-radius: 8px;
  min-height: clamp(520px, 62vh, 680px);
}

.bleed::before {
  display: none;
}

.band {
  background: #101820;
}

.band::before {
  display: none;
}

.ftr {
  background: #0f171d;
}

.phead {
  background:
    linear-gradient(180deg, #fbfcfd, #eef4f6);
  padding-block: clamp(56px, 7vw, 106px);
}

.crumbs {
  background: #fbfcfd;
}

.prose__block {
  border-top-color: #e4eaee;
}

.chips a,
.chips span {
  border-color: rgba(100,115,129,.2);
  background: rgba(255,255,255,.8);
  border-radius: 8px;
}

@media (max-width: 980px) {
  .hero__media {
    inset: 82px 18px auto;
    width: auto;
    height: 280px;
    opacity: .34;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__formwrap {
    max-width: 620px;
  }

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

  .trust__i {
    padding: 12px 0;
  }

  .trust__i + .trust__i {
    border-left: 0;
  }
}

@media (max-width: 700px) {
  .hero {
    background:
      linear-gradient(180deg, #fbfcfd 0%, #eef4f6 100%);
  }

  .hero__media {
    height: 230px;
  }

  .hero h1 {
    font-size: clamp(2.9rem, 14vw, 4.1rem);
    max-width: 10ch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__rail {
    display: grid;
    grid-template-columns: 1fr;
  }

  .intent__in {
    grid-template-columns: 1fr;
  }

  .intent__grid {
    grid-template-columns: 1fr;
  }

  .section--process .step {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .scrub,
  .bleed {
    margin-inline: 0;
    border-radius: 0;
  }
}

/* ==========================================================================
   v7 — responsive fit and centering pass
   Keeps the new editorial feel, but gives every major layout a calmer center
   line and friendlier breakpoints from large desktop down to narrow phones.
   ========================================================================== */

html,
body {
  overflow-x: clip;
}

.wrap {
  max-width: min(var(--wrap), 100%);
}

.hero {
  min-height: auto;
}

.hero__media {
  inset:
    clamp(38px, 5vw, 70px)
    max(18px, calc((100vw - var(--wrap)) / 2 - clamp(24px, 3vw, 48px)))
    clamp(38px, 5vw, 70px)
    auto;
  width: clamp(420px, 34vw, 520px);
}

.hero__in {
  padding-block: clamp(58px, 7vw, 104px);
}

.hero__grid {
  width: 100%;
  max-width: 1060px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 560px) minmax(350px, 420px);
  justify-content: center;
  align-items: center;
  gap: clamp(42px, 5vw, 78px);
}

.hero__grid > * {
  min-width: 0;
}

.hero__grid > div:first-child {
  max-width: 560px;
}

.hero h1 {
  font-size: clamp(3.15rem, 5.55vw, 5.85rem);
  max-width: 10.8ch;
}

.hero__lede {
  max-width: 43ch;
}

.hero__actions,
.band__actions {
  align-items: center;
}

.trust {
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust__i {
  min-width: 0;
  text-align: left;
}

.trust__k {
  min-height: 1.45em;
  line-height: 1.05;
}

.hero__formwrap {
  width: 100%;
  max-width: 420px;
  justify-self: center;
  margin-left: 0;
}

.hero__formtop,
.qform {
  width: 100%;
}

.qform {
  padding: clamp(22px, 3vw, 28px);
}

.field input,
.field select,
.field textarea,
.btn {
  min-width: 0;
}

.phead__grid,
.intent__in,
.band__in {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.phead__grid {
  grid-template-columns: minmax(0, 620px) minmax(280px, 420px);
  justify-content: center;
}

.phead__grid > *,
.intent__in > *,
.band__in > *,
.grid > *,
.details > * {
  min-width: 0;
}

.section > .wrap > .center,
.section > .wrap > .eyebrow.center,
.section > .wrap > .rv-mask.center {
  margin-inline: auto;
}

.grid {
  justify-content: center;
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.scrub,
.bleed {
  width: min(calc(100% - clamp(36px, 6vw, 84px)), 1320px);
  margin-inline: auto;
}

.scrub__in,
.bleed__in {
  max-width: 1120px;
  margin-inline: auto;
}

.details {
  width: min(calc(100% - clamp(36px, 6vw, 84px)), 1240px);
}

.banner,
.shot,
.card,
.proof,
.rev,
.intent__item {
  min-width: 0;
}

@media (max-width: 1100px) {
  .hero {
    background:
      linear-gradient(180deg, #fbfcfd 0%, #f4f8f9 56%, #eef4f6 100%);
  }

  .hero__media {
    inset: 84px max(var(--gut), calc((100vw - 720px) / 2)) auto;
    width: auto;
    height: 300px;
    opacity: .26;
  }

  .hero__grid {
    max-width: 720px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .hero__grid > div:first-child,
  .hero h1,
  .hero__lede {
    max-width: 100%;
  }

  .hero__plate,
  .hero__lede,
  .trust {
    margin-inline: auto;
  }

  .hero__actions,
  .hero__rail {
    justify-content: center;
  }

  .hero__formwrap {
    max-width: 560px;
  }

  .phead__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }
}

@media (max-width: 760px) {
  :root {
    --gut: clamp(18px, 5vw, 24px);
  }

  body {
    font-size: 16px;
  }

  .section {
    padding-block: clamp(58px, 15vw, 86px);
  }

  .hero__in {
    padding-block: clamp(42px, 12vw, 72px);
  }

  .hero__media {
    inset: 74px var(--gut) auto;
    height: 230px;
    opacity: .2;
  }

  .hero h1 {
    font-size: clamp(2.55rem, 11.4vw, 3.7rem);
    max-width: 11.2ch;
    margin-inline: auto;
  }

  .hero__actions {
    width: 100%;
  }

  .hero__rail {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .hero__rail span {
    flex: 0 1 auto;
  }

  .hero__actions .btn,
  .band__actions .btn {
    width: 100%;
    white-space: normal;
  }

  .trust {
    max-width: 460px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 8px;
  }

  .trust__i {
    padding: 14px 10px;
    text-align: center;
  }

  .trust__i + .trust__i {
    border-left: 0;
  }

  .trust__i:nth-child(2n) {
    border-left: 1px solid rgba(100,115,129,.18);
  }

  .trust__i:nth-child(n + 3) {
    border-top: 1px solid rgba(100,115,129,.18);
  }

  .trust__k {
    justify-content: center;
    font-size: clamp(1.12rem, 5.2vw, 1.34rem);
  }

  .hero__formwrap {
    max-width: 520px;
  }

  .qform {
    padding: 20px;
  }

  .intent__grid,
  .details {
    grid-template-columns: 1fr;
  }

  .scrub,
  .bleed,
  .details {
    width: calc(100% - (var(--gut) * 2));
    border-radius: 8px;
  }

  .scrub__head {
    text-align: center;
  }

  .scrub__head > div {
    min-width: 0 !important;
  }

  .scrub__copy,
  .bleed p,
  .band p {
    margin-inline: auto;
  }

  .scrub__labels {
    gap: 10px;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .brand__name {
    font-size: .96rem;
  }

  .brand__sub {
    font-size: .54rem;
  }

  .hdr__in {
    gap: 12px;
  }

  .hero__media {
    height: 205px;
  }

  .scrub__labels {
    grid-template-columns: 1fr;
  }

  .trust {
    grid-template-columns: 1fr;
  }

  .trust__i:nth-child(2n),
  .trust__i:nth-child(n + 3) {
    border-left: 0;
    border-top: 1px solid rgba(100,115,129,.18);
  }

  .trust__i:first-child {
    border-top: 0;
  }
}

/* ==========================================================================
   v8 — screenshot fixes: real logo, intent contrast, card balance, form fit
   ========================================================================== */

img.brand__mark {
  width: 56px;
  height: 56px;
  padding: 4px;
  object-fit: contain;
  border-radius: 50%;
  background: #101820;
  box-shadow: 0 10px 24px -20px rgba(16,24,32,.8);
  transform: translateY(1px);
}

.hdr.is-stuck img.brand__mark {
  width: 50px;
  height: 50px;
}

.intent {
  background:
    linear-gradient(180deg, #101820 0%, #0f171d 100%);
}

.intent__in {
  grid-template-columns: minmax(240px, .58fr) minmax(0, 1.42fr);
  gap: clamp(30px, 5vw, 70px);
}

.intent__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.9vw, 24px);
}

.intent .intent__item,
.intent .intent__item:first-child,
.intent .intent__item:nth-child(2) {
  min-height: 148px;
  padding: 22px 20px 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: none;
}

.intent .intent__item:first-child,
.intent .intent__item:nth-child(2) {
  border-color: transparent;
  background:
    linear-gradient(135deg, #f0642d 0%, #d83c13 100%);
  box-shadow: 0 24px 54px -40px rgba(240,100,45,.9);
}

.intent .intent__item span,
.intent .intent__item small,
.intent .intent__item:first-child span,
.intent .intent__item:first-child small,
.intent .intent__item:nth-child(2) span,
.intent .intent__item:nth-child(2) small {
  color: rgba(255,255,255,.72);
}

.intent .intent__item strong,
.intent .intent__item:first-child strong,
.intent .intent__item:nth-child(2) strong {
  color: #fff;
  font-size: clamp(1.28rem, 2.05vw, 1.76rem);
  line-height: 1.06;
  overflow-wrap: normal;
}

.intent .intent__item:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.42);
}

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

.grid--3 > .card:last-child:nth-child(3n + 1),
.grid--3 > .shot:last-child:nth-child(3n + 1),
.grid--3 > .proof:last-child:nth-child(3n + 1) {
  grid-column: 2;
}

.qform {
  background: rgba(255,255,255,.985);
}

@media (min-width: 941px) {
  .fab {
    display: none;
  }
}

@media (max-width: 1080px) {
  .intent__in {
    grid-template-columns: 1fr;
    max-width: 760px;
    text-align: center;
  }

  .intent__head h2 {
    margin-inline: auto;
  }

  .intent .eyebrow {
    justify-content: center;
  }

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

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

  .grid--3 > .card:last-child:nth-child(odd),
  .grid--3 > .shot:last-child:nth-child(odd),
  .grid--3 > .proof:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: min(100%, 420px);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  img.brand__mark,
  .hdr.is-stuck img.brand__mark {
    width: 50px;
    height: 50px;
  }

  .intent__in {
    text-align: left;
  }

  .intent .eyebrow {
    justify-content: flex-start;
  }

  .intent__grid,
  .grid--3 {
    grid-template-columns: 1fr;
  }

  .grid--3 > .card:last-child:nth-child(n),
  .grid--3 > .shot:last-child:nth-child(n),
  .grid--3 > .proof:last-child:nth-child(n) {
    grid-column: auto;
    width: 100%;
  }

  .intent .intent__item,
  .intent .intent__item:first-child,
  .intent .intent__item:nth-child(2) {
    min-height: 116px;
  }

  .hero__formwrap {
    width: min(100%, 500px);
  }

  .hero__formtop {
    border-radius: 8px 8px 0 0;
  }

  .qform {
    border-radius: 0 0 8px 8px;
    box-shadow: 0 24px 72px -52px rgba(16,24,32,.72);
  }

  .field {
    margin-bottom: 11px;
  }

  .field input,
  .field select {
    min-height: 50px;
    padding-block: 10px;
  }

  .field textarea {
    min-height: 74px;
  }
}

@media (max-width: 420px) {
  img.brand__mark,
  .hdr.is-stuck img.brand__mark {
    width: 46px;
    height: 46px;
  }

  .brand {
    gap: 8px;
  }
}

/* ==========================================================================
   v9 — pricing transparency and community support
   ========================================================================== */

.pricing {
  background:
    linear-gradient(180deg, #fbfcfd 0%, #eef4f6 100%);
  border-top: 1px solid rgba(225,231,235,.72);
  border-bottom: 1px solid rgba(225,231,235,.72);
}

.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, .82fr) minmax(320px, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}

.pricecard,
.support {
  min-width: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(100,115,129,.16);
  box-shadow: 0 24px 64px -52px rgba(16,24,32,.5);
}

.intent,
.section,
.pricing {
  scroll-margin-top: 92px;
}

.pricecard {
  overflow: hidden;
}

.pricecard__top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  background: #101820;
  color: #fff;
  border-bottom: 3px solid var(--ember);
}

.pricecard--emergency .pricecard__top {
  border-bottom-color: var(--frost);
}

.pricecard__top span {
  font-weight: 760;
  line-height: 1.1;
}

.pricecard__top small {
  font-weight: 700;
  color: rgba(255,255,255,.66);
  white-space: nowrap;
}

.pricecard dl {
  margin: 0;
  padding: 8px 22px 22px;
}

.pricecard dl div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(100,115,129,.16);
}

.pricecard dl div:last-child {
  border-bottom: 0;
}

.pricecard dt {
  color: #52636f;
  font-weight: 650;
}

.pricecard dd {
  margin: 0;
  color: #101820;
  font-size: clamp(1.8rem, 3.2vw, 2.55rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.support {
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,251,.94));
}

.support__head {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(100,115,129,.16);
}

.support .eyebrow {
  margin-bottom: 12px;
}

.support h3 {
  margin-bottom: 10px;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
}

.support p {
  color: #647381;
  font-size: .96rem;
}

.support ul {
  list-style: none;
  padding: 18px 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.support li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid rgba(100,115,129,.12);
  color: #26323b;
  font-size: .93rem;
}

.support li span {
  min-width: 0;
}

.support li strong {
  flex: none;
  color: var(--ember);
}

.pricing__note {
  max-width: 920px;
  margin: 24px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(100,115,129,.18);
  color: #647381;
  font-size: .96rem;
  text-align: center;
}

@media (max-width: 1100px) {
  .pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .pricing__grid {
    grid-template-columns: 1fr;
  }

  .support {
    grid-column: auto;
  }

  .support ul {
    grid-template-columns: 1fr;
  }

  .pricing__note {
    text-align: left;
  }
}

@media (max-width: 420px) {
  .pricecard__top,
  .pricecard dl div {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricecard__top small {
    white-space: normal;
  }
}