/* ===================================================================
   Tri-State Comfort Solutions — design system v2 "Thermal Atmosphere"
   Deep ink · ember + steel (semantic heat/cool) · isotherm contours
   Archivo (variable width) / Inter / Space Mono
   =================================================================== */

:root {
  /* color */
  --ink:        #10151D;
  --ink-2:      #151E2A;
  --ink-3:      #0B1017;
  --paper:      #F2F1EB;
  --paper-2:    #E9E8E0;
  --surface:    #FFFFFF;
  --amber:      #E8722A;
  --amber-hot:  #FF8B3D;
  --amber-deep: #BC5716;
  --amber-tint: #FBEDE1;
  --steel:      #4E97BF;
  --steel-deep: #2D6E92;
  --steel-tint: #E4EEF4;
  --stone:      #5D636D;
  --mist:       #97A6B8;
  --line:       #DEDCD3;
  --line-dark:  #2A3648;
  --good:       #2F9E6B;
  --good-tint:  #E2F3EA;
  --warn:       #C99A2E;
  --bad:        #C4553B;
  --bad-tint:   #F8E7E2;

  /* type */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* geometry */
  --wrap: 1180px;
  --radius: 14px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 30px 60px -30px rgba(16, 21, 29, .4);

  /* recurring artwork (isotherm contours + film grain) */
  --grain: 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.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='560' viewBox='0 0 1400 560' fill='none'%3E%3Cpath d='M0 84C240 24 480 148 700 88C920 28 1160 132 1400 84' stroke='%234E97BF' stroke-opacity='.34' stroke-width='1.5'/%3E%3Cpath d='M0 168C230 116 500 236 700 176C900 116 1170 224 1400 168' stroke='%234E97BF' stroke-opacity='.2' stroke-width='1.5'/%3E%3Cpath d='M0 268C250 212 470 324 700 272C930 220 1150 316 1400 268' stroke='%23FF8B3D' stroke-opacity='.3' stroke-width='1.5'/%3E%3Cpath d='M0 372C240 320 490 428 700 376C910 324 1160 420 1400 372' stroke='%234E97BF' stroke-opacity='.14' stroke-width='1.5'/%3E%3Cpath d='M0 472C230 424 500 524 700 476C900 428 1170 516 1400 472' stroke='%234E97BF' stroke-opacity='.09' stroke-width='1.5'/%3E%3C/svg%3E");
  --contour-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='560' viewBox='0 0 1400 560' fill='none'%3E%3Cpath d='M0 84C240 24 480 148 700 88C920 28 1160 132 1400 84' stroke='%2316100A' stroke-opacity='.28' stroke-width='1.5'/%3E%3Cpath d='M0 188C230 136 500 256 700 196C900 136 1170 244 1400 188' stroke='%2316100A' stroke-opacity='.18' stroke-width='1.5'/%3E%3Cpath d='M0 308C250 252 470 364 700 312C930 260 1150 356 1400 308' stroke='%2316100A' stroke-opacity='.12' stroke-width='1.5'/%3E%3Cpath d='M0 432C240 380 490 488 700 436C910 384 1160 480 1400 432' stroke='%2316100A' stroke-opacity='.08' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ── reset ─────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--amber); color: #16100A; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.06;
  letter-spacing: -0.012em;
  font-variation-settings: 'wdth' 110;
  font-weight: 800;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ── eyebrow ───────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--steel-deep);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--steel), var(--amber));
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }
.on-dark .eyebrow, .hero .eyebrow { color: var(--amber-hot); }

/* ── buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 17px 28px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; }
.btn:active:not(:disabled) { transform: scale(.97); }

.btn-primary {
  background: linear-gradient(140deg, var(--amber-hot), var(--amber) 60%);
  color: #16100A;
  box-shadow: 0 10px 26px -12px rgba(232, 114, 42, .7);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(232, 114, 42, .85);
}

.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover:not(:disabled) { background: var(--ink-2); transform: translateY(-2px); }

.btn-ghost {
  border-color: rgba(151, 166, 184, .5);
  color: #E9EEF4;
  background: rgba(16, 21, 29, .2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--steel); color: var(--steel); }

/* ghost buttons sitting on light surfaces */
.card .btn-ghost,
.auth-body .btn-ghost,
.signed-in-box .btn-ghost,
.settings-form .btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card .btn-ghost:hover:not(:disabled),
.auth-body .btn-ghost:hover:not(:disabled),
.signed-in-box .btn-ghost:hover:not(:disabled),
.settings-form .btn-ghost:hover:not(:disabled) {
  border-color: var(--amber-deep);
  color: var(--amber-deep);
}

.btn-block { width: 100%; }
.btn-lg { padding: 20px 34px; font-size: 13px; }

/* ── announcement bar ──────────────────────────────────────────── */
.announce {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 20px;
  background: var(--amber);
  color: #16100A;
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: center;
}
.announce.show { display: flex; }
.announce b {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: #16100A;
  color: var(--amber-hot);
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ── header ────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(11, 16, 23, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(151, 166, 184, .14);
  transition: box-shadow .3s var(--ease), background .3s;
}
.site-header.scrolled {
  background: rgba(11, 16, 23, .94);
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .7);
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 76px;
}

.brand { display: flex; align-items: center; gap: 12px; color: #fff; margin-right: auto; }
.brand .mark { width: 42px; height: 42px; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(232,114,42,.35)); }
.brand-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 112;
  font-weight: 800;
  font-size: 16.5px;
  line-height: 1.15;
  letter-spacing: .01em;
}
.brand small, .brand-text small {
  font-family: var(--font-mono);
  font-variation-settings: normal;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mist);
  margin-top: 3px;
}

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links .link {
  position: relative;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #D8E0EA;
  padding: 6px 0;
  transition: color .2s;
}
.nav-links .link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--steel), var(--amber-hot));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links .link:hover { color: #fff; }
.nav-links .link:hover::after { transform: scaleX(1); }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.nav-phone svg { width: 16px; height: 16px; stroke: var(--amber-hot); }

.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #D8E0EA;
}
.nav-account:hover { color: #fff; }
.nav-account .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--amber-hot), var(--amber));
  color: #16100A;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}

/* hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid rgba(151, 166, 184, .35);
  border-radius: 11px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 2px;
  background: #E9EEF4;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 10px 28px 26px;
  background: rgba(11, 16, 23, .97);
  border-bottom: 1px solid var(--line-dark);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 15px 2px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #D8E0EA;
  border-bottom: 1px solid rgba(151, 166, 184, .12);
}
.mobile-menu .btn { margin-top: 18px; border: none; }

/* ── hero ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: clamp(84px, 10vw, 150px) 0 clamp(90px, 11vw, 160px);
  background:
    radial-gradient(900px 640px at 88% -10%, rgba(78, 151, 191, .22), transparent 62%),
    radial-gradient(1000px 720px at -8% 108%, rgba(232, 114, 42, .26), transparent 60%),
    var(--ink);
}
/* drifting isotherm contours */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--contour);
  background-size: 1400px 560px;
  background-repeat: repeat;
  animation: contour-drift 60s linear infinite;
  pointer-events: none;
}
/* film grain */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  pointer-events: none;
}
@keyframes contour-drift {
  from { background-position: 0 0; }
  to   { background-position: -1400px 0; }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.7rem, 5.8vw, 4.6rem);
  font-variation-settings: 'wdth' 116;
  font-weight: 850;
  color: #F5F7F9;
  text-wrap: balance;
}
.hero h1 .warm {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--amber-hot);
  text-shadow: 0 0 34px rgba(255, 139, 61, .5);
  white-space: nowrap;
  padding: 0 .08em;
}
/* hand-drawn ellipse annotation around the temperature */
.hero h1 .warm::after {
  content: "";
  position: absolute;
  inset: -18% -14%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 78' fill='none'%3E%3Cpath d='M14 42C11 18 52 7 86 7c38 0 72 9 70 29-2 22-45 34-82 34C38 70 17 60 14 42Z' stroke='%23FF8B3D' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0;
  transform: scale(.85) rotate(-3deg);
  animation: ellipse-in .7s var(--ease) 1s forwards;
  pointer-events: none;
}
@keyframes ellipse-in {
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.hero-sub {
  margin-top: 24px;
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--mist);
}

.hero-cta { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }

.hero-trust {
  margin-top: 42px;
  display: flex;
  gap: 12px 30px;
  flex-wrap: wrap;
}
.hero-trust div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
}
.hero-trust svg { width: 17px; height: 17px; stroke: var(--amber-hot); flex-shrink: 0; }

/* ── comfort gauge — instrument styling ────────────────────────── */
.gauge-card {
  position: relative;
  border-radius: 30px;
  padding: 30px 32px 26px;
  background:
    radial-gradient(140% 120% at 50% 0%, #1C2A3B 0%, #121C29 55%, #0D141E 100%);
  border: 1px solid rgba(78, 151, 191, .28);
  box-shadow:
    0 44px 90px -36px rgba(0, 0, 0, .85),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* ember exhaust glow beneath the instrument */
.gauge-card::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -34px;
  height: 70px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(232, 114, 42, .4), transparent 75%);
  filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}

.gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.gauge-head span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mist);
}
.gauge-wrap { position: relative; }
.gauge-svg { width: 100%; height: auto; display: block; }

.gauge-needle {
  transform-origin: 150px 150px;
  transform: rotate(-118deg);
  filter: drop-shadow(0 0 10px rgba(232, 114, 42, .55));
}
.gauge-svg.animate .gauge-needle {
  transition: transform 2.6s cubic-bezier(.3, 1.35, .35, 1);
  transform: rotate(5deg);
}

.gauge-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 26%;
  pointer-events: none;
}
.gauge-temp {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(3rem, 5vw, 3.8rem);
  line-height: 1;
  color: #F5F7F9;
  text-shadow: 0 0 30px rgba(78, 151, 191, .4);
}
.gauge-temp sup {
  font-size: .45em;
  color: var(--amber-hot);
  vertical-align: .85em;
}
.gauge-status {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--steel);
}

.gauge-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mist);
}
.gauge-foot .cool { color: var(--steel); }
.gauge-foot .warm { color: var(--amber-hot); }

/* drifting warm-air particles */
.air {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber-hot);
  opacity: 0;
  pointer-events: none;
  animation: air-rise 7s ease-in infinite;
}
.air.a1 { left: 14%; bottom: 18%; animation-delay: 0s; }
.air.a2 { left: 84%; bottom: 22%; width: 4px; height: 4px; background: var(--steel); animation-delay: 2.3s; animation-duration: 8.5s; }
.air.a3 { left: 50%; bottom: 8%; width: 3px; height: 3px; animation-delay: 4.6s; }
@keyframes air-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: .8; }
  100% { transform: translateY(-130px) translateX(14px); opacity: 0; }
}

/* ── ticker ────────────────────────────────────────────────────── */
.ticker {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--amber), var(--amber-hot));
  border-top: 1px solid rgba(22, 16, 10, .3);
  border-bottom: 1px solid rgba(22, 16, 10, .3);
  padding: 13px 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-run 34s linear infinite;
}
.ticker-track span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #16100A;
  white-space: nowrap;
  padding-right: 3.2em;
}
@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── stats ─────────────────────────────────────────────────────── */
.stats {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: clamp(52px, 6vw, 76px) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}
.stat { padding-left: 26px; border-left: 1px solid var(--line); position: relative; }
.stat:first-child { border-left: none; padding-left: 0; }
.stat::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--amber-hot), var(--steel));
}
.stat-num {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 122;
  font-weight: 900;
  font-size: clamp(2.5rem, 4.4vw, 3.6rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ── sections ──────────────────────────────────────────────────── */
.section { position: relative; padding: clamp(90px, 10vw, 148px) 0; }

.section-head { max-width: 680px; margin-bottom: clamp(44px, 5vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-title {
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-variation-settings: 'wdth' 112;
  font-weight: 850;
  color: var(--ink);
  text-wrap: balance;
}
.section-lead {
  margin-top: 16px;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--stone);
  max-width: 58ch;
}
.on-dark .section-title { color: #F5F7F9; }
.on-dark .section-lead { color: var(--mist); }

/* ── services ──────────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 30px 30px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
/* thermal edge that sweeps in on hover */
.service::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--steel), var(--amber-hot));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.service:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
  border-color: #D0CEC4;
}
.service:hover::before { transform: scaleX(1); }

.service-ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  background: var(--steel-tint);
  color: var(--steel-deep);
}
.service:nth-child(3n+1) .service-ico {
  background: var(--amber-tint);
  color: var(--amber-deep);
}
.service-ico svg { width: 26px; height: 26px; }

.service h3 {
  font-size: 1.28rem;
  font-variation-settings: 'wdth' 108;
  margin-bottom: 10px;
}
.service p { font-size: 14.8px; color: var(--stone); }

.svc-brands {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: center;
  line-height: 2.1;
}

/* ── process (dark timeline) ───────────────────────────────────── */
.process {
  background:
    radial-gradient(800px 500px at 100% 0%, rgba(78, 151, 191, .14), transparent 60%),
    var(--ink-2);
  color: #fff;
  overflow: hidden;
}
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  pointer-events: none;
}
.process .wrap { position: relative; }

.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  padding-top: 10px;
}
/* the route from first call to comfort */
.process-grid::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 6px;
  right: 6px;
  height: 2px;
  background: linear-gradient(90deg, var(--steel) 0%, var(--amber-hot) 100%);
  opacity: .65;
}
.step { position: relative; padding-top: 42px; }
.step::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 3px solid var(--amber-hot);
  box-shadow: 0 0 0 5px rgba(232, 114, 42, .16);
}
.step:first-child::before { border-color: var(--steel); box-shadow: 0 0 0 5px rgba(78, 151, 191, .16); }

.step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--amber-hot);
  margin-bottom: 12px;
}
.step h3 { font-size: 1.3rem; color: #F5F7F9; margin-bottom: 10px; }
.step p { font-size: 14.5px; color: var(--mist); }

/* ── why ───────────────────────────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.why {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 34px 30px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.why-ico {
  width: 30px;
  height: 30px;
  color: var(--amber-deep);
  margin-bottom: 20px;
}
.why:nth-child(2) .why-ico { color: var(--steel-deep); }
.why h3 { font-size: 1.22rem; margin-bottom: 16px; }
.why ul { list-style: none; }
.why li {
  position: relative;
  padding: 11px 0 11px 26px;
  font-size: 14.5px;
  color: var(--stone);
  border-top: 1px solid var(--line);
}
.why li:first-child { border-top: none; }
.why li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 14px;
  height: 2px;
  background: var(--amber);
}

/* ── coverage — typographic moment ─────────────────────────────── */
.coverage {
  background:
    radial-gradient(900px 600px at 0% 100%, rgba(232, 114, 42, .16), transparent 58%),
    var(--ink);
  color: #fff;
  overflow: hidden;
}
.coverage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain), var(--contour);
  background-size: 160px 160px, 1400px 560px;
  background-repeat: repeat;
  opacity: .9;
  pointer-events: none;
}
.coverage-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.coverage .eyebrow { color: var(--amber-hot); }
.coverage .section-title { color: #F5F7F9; }
.coverage-lead { color: var(--mist); }

.coverage-states { line-height: 1; }
.coverage-state {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 125;
  font-weight: 900;
  font-size: clamp(2.9rem, 6.5vw, 5rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(151, 166, 184, .55);
  padding: 8px 0;
  transition: -webkit-text-stroke-color .3s, filter .3s;
  cursor: default;
}
.coverage-state span {
  color: var(--amber-hot);
  -webkit-text-stroke-width: 0;
  text-shadow: 0 0 40px rgba(255, 139, 61, .35);
}
.coverage-state:hover { -webkit-text-stroke-color: var(--steel); }
.coverage-states:nth-child(2) .coverage-state span { color: #F5F7F9; text-shadow: 0 0 40px rgba(245, 247, 249, .25); }
.coverage-states:nth-child(3) .coverage-state span { color: var(--steel); text-shadow: 0 0 40px rgba(78, 151, 191, .35); }

.coverage-note {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--mist);
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
}

/* ── testimonials ──────────────────────────────────────────────── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 60px 30px 28px;
  overflow: hidden;
}
.testi::before {
  content: "“";
  position: absolute;
  top: -12px;
  left: 18px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 125;
  font-weight: 900;
  font-size: 7rem;
  line-height: 1;
  color: var(--amber);
  opacity: .18;
  pointer-events: none;
}
.testi-stars {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--amber-deep);
  margin-bottom: 14px;
}
.testi p { font-size: 15px; color: var(--ink); }
.testi cite {
  display: block;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ── estimator (instrument panel) ──────────────────────────────── */
.estimator {
  background:
    radial-gradient(760px 520px at 90% 10%, rgba(78, 151, 191, .16), transparent 60%),
    var(--ink-2);
  color: #fff;
  overflow: hidden;
}
.estimator::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain), var(--contour);
  background-size: 160px 160px, 1400px 560px;
  background-repeat: repeat;
  opacity: .55;
  pointer-events: none;
}
.estimator .wrap { position: relative; }

.est-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.est-panel {
  background: rgba(13, 20, 30, .82);
  border: 1px solid rgba(78, 151, 191, .28);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.est-panel h3 { font-size: 1.3rem; color: #F5F7F9; margin-bottom: 24px; }

.est-panel .field label { color: var(--mist); }
.est-panel .field input,
.est-panel .field select {
  background-color: rgba(16, 21, 29, .7);
  border-color: rgba(151, 166, 184, .3);
  color: #EDF2F7;
}
.est-panel .field input:focus,
.est-panel .field select:focus {
  border-color: var(--steel);
  box-shadow: 0 0 0 4px rgba(78, 151, 191, .18);
}
.est-panel .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2397A6B8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* readout dial */
.est-result {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(78, 151, 191, .45);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(28, 42, 59, .9), rgba(13, 20, 30, .92)),
    var(--ink-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 36px;
}
.est-result .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 14px;
}
.est-range {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  color: var(--amber-hot);
  text-shadow: 0 0 34px rgba(255, 139, 61, .45);
  font-variant-numeric: tabular-nums;
}
.est-note {
  margin: 18px auto 14px;
  max-width: 40ch;
  font-size: 13.5px;
  color: var(--mist);
}
.est-empty {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--mist);
  max-width: 30ch;
}

/* ── fields (shared) ───────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 9px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 15px 17px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235D636D' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--steel);
  box-shadow: 0 0 0 4px rgba(78, 151, 191, .15);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-msg {
  display: none;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 500;
}
.form-msg.show { display: block; }
.form-msg.ok { background: var(--good-tint); color: #19603F; border: 1px solid #BCE3CE; }
.form-msg.err { background: var(--bad-tint); color: #8E1F0F; border: 1px solid #EBC7BC; }

/* ── contact ───────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: start;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
}
.info-stack { display: flex; flex-direction: column; gap: 14px; }
.info-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.info-card:hover { transform: translateX(5px); box-shadow: var(--shadow); }
.info-card svg {
  width: 24px;
  height: 24px;
  color: var(--amber-deep);
  flex-shrink: 0;
}
.info-card:nth-child(2) svg { color: var(--steel-deep); }
.info-card h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 4px;
}
.info-card a, .info-card p {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}
.info-card a:hover { color: var(--amber-deep); }

/* ── emergency CTA band ────────────────────────────────────────── */
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--amber) 0%, var(--amber-hot) 100%);
  color: #16100A;
  padding: clamp(60px, 7vw, 90px) 0;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain), var(--contour-ink);
  background-size: 160px 160px, 1400px 560px;
  background-repeat: repeat;
  pointer-events: none;
}
.cta-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
}
.cta h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-variation-settings: 'wdth' 114;
  margin-bottom: 8px;
}
.cta p { font-size: 15.5px; opacity: .82; font-weight: 500; }
.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: #16100A;
  padding: 18px 30px;
  border: 2px solid #16100A;
  border-radius: 18px;
  transition: background .25s, color .25s, transform .25s var(--ease), box-shadow .25s;
  background: rgba(255, 255, 255, .14);
}
.cta-phone:hover {
  background: #16100A;
  color: var(--amber-hot);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -16px rgba(22, 16, 10, .6);
}
.cta-phone svg { width: 26px; height: 26px; }

/* ── footer ────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink-3);
  color: var(--mist);
  padding: clamp(64px, 7vw, 88px) 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.footer-about { margin-top: 18px; font-size: 14px; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #E9EEF4;
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--mist);
  transition: color .2s, transform .2s var(--ease);
}
.footer-col a:hover { color: var(--amber-hot); transform: translateX(4px); }
.footer-bottom {
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
}

/* ── reveal ────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* stagger siblings slightly */
.services-grid .reveal:nth-child(2), .why-grid .reveal:nth-child(2),
.testi-grid .reveal:nth-child(2), .process-grid .reveal:nth-child(2) { transition-delay: .08s; }
.services-grid .reveal:nth-child(3), .why-grid .reveal:nth-child(3),
.testi-grid .reveal:nth-child(3), .process-grid .reveal:nth-child(3) { transition-delay: .16s; }
.services-grid .reveal:nth-child(4), .process-grid .reveal:nth-child(4) { transition-delay: .24s; }
.services-grid .reveal:nth-child(5) { transition-delay: .08s; }
.services-grid .reveal:nth-child(6) { transition-delay: .16s; }

/* ===================================================================
   ACCOUNT / AUTH
   =================================================================== */
.auth-main {
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 80px) 0;
  background:
    radial-gradient(700px 480px at 100% 0%, rgba(78, 151, 191, .1), transparent 60%),
    var(--paper);
}
.auth-card {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.auth-aside {
  position: relative;
  overflow: hidden;
  padding: 52px 46px;
  color: #fff;
  background:
    radial-gradient(680px 480px at 0% 110%, rgba(232, 114, 42, .3), transparent 60%),
    radial-gradient(560px 420px at 100% -10%, rgba(78, 151, 191, .24), transparent 60%),
    var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain), var(--contour);
  background-size: 160px 160px, 1400px 560px;
  background-repeat: repeat;
  pointer-events: none;
}
.auth-aside > svg { position: relative; z-index: 1; margin-bottom: 22px; }
.auth-aside h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-variation-settings: 'wdth' 114;
  color: #F5F7F9;
  margin-bottom: 14px;
  text-wrap: balance;
}
.auth-aside p { position: relative; z-index: 1; color: var(--mist); font-size: 15px; }
.auth-benefits {
  position: relative;
  z-index: 1;
  list-style: none;
  margin-top: 30px;
}
.auth-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  font-size: 14.5px;
  color: #DCE4EC;
  border-top: 1px solid rgba(151, 166, 184, .16);
}
.auth-benefits li:first-child { border-top: none; }
.auth-benefits svg {
  width: 18px;
  height: 18px;
  stroke: var(--amber-hot);
  flex-shrink: 0;
  margin-top: 3px;
}

.auth-body { padding: 52px 48px; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: var(--paper-2);
  border-radius: 14px;
  margin-bottom: 30px;
}
.auth-tab {
  border: none;
  background: transparent;
  padding: 13px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.auth-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 6px 16px -8px rgba(16, 21, 29, .3);
}

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.passkey-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--amber-hot), var(--amber) 60%);
  color: #16100A;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(232, 114, 42, .7);
  transition: transform .2s var(--ease), box-shadow .25s;
}
.passkey-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(232, 114, 42, .85);
}
.passkey-btn svg { width: 20px; height: 20px; }

.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--stone);
  white-space: nowrap;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-msg {
  display: none;
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 500;
}
.auth-msg.show { display: block; }
.auth-msg.ok { background: var(--good-tint); color: #19603F; border: 1px solid #BCE3CE; }
.auth-msg.err { background: var(--bad-tint); color: #8E1F0F; border: 1px solid #EBC7BC; }

.auth-note {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--stone);
  text-align: center;
}

.signed-in-box { text-align: center; padding: 12px 0; }
.signed-in-box .avatar-lg {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--amber-hot), var(--amber));
  color: #16100A;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 30px;
  box-shadow: 0 14px 30px -12px rgba(232, 114, 42, .6);
}
.signed-in-box h3 { font-size: 1.5rem; margin-bottom: 6px; }
.signed-in-box .muted { color: var(--stone); font-size: 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 14px 4px 0;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--amber-tint);
  color: var(--amber-deep);
  border: 1px solid #F0D4BC;
}
.chip.steel { background: var(--steel-tint); color: var(--steel-deep); border-color: #C6DCE9; }

/* ===================================================================
   BOOKING
   =================================================================== */
.booking-main {
  padding: clamp(52px, 6vw, 84px) 0 clamp(80px, 9vw, 120px);
  background:
    radial-gradient(700px 480px at 0% 0%, rgba(232, 114, 42, .07), transparent 60%),
    var(--paper);
}
.booking-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
  align-items: start;
}
.booking-aside {
  position: sticky;
  top: 104px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  color: #fff;
  background:
    radial-gradient(560px 400px at 100% 0%, rgba(78, 151, 191, .22), transparent 60%),
    radial-gradient(560px 420px at 0% 110%, rgba(232, 114, 42, .26), transparent 60%),
    var(--ink);
}
.booking-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain), var(--contour);
  background-size: 160px 160px, 1400px 560px;
  background-repeat: repeat;
  pointer-events: none;
}
.booking-aside h3 {
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  color: #F5F7F9;
  margin-bottom: 10px;
}
.booking-aside p { position: relative; z-index: 1; color: var(--mist); font-size: 14.5px; }
.booking-aside .aside-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(151, 166, 184, .16);
  font-size: 14px;
  color: #DCE4EC;
  margin-top: 0;
}
.booking-aside .aside-row:first-of-type { border-top: none; margin-top: 20px; }
.booking-aside svg {
  width: 19px;
  height: 19px;
  stroke: var(--amber-hot);
  flex-shrink: 0;
  margin-top: 2px;
}

.booking-success {
  display: none;
  text-align: center;
  padding: 56px 30px;
}
.booking-success.show { display: block; }
.booking-success .check {
  width: 82px;
  height: 82px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--good-tint);
  border: 1px solid #BCE3CE;
}
.booking-success .check svg { width: 38px; height: 38px; stroke: var(--good); }
.booking-success .ref {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .1em;
  background: var(--steel-tint);
  color: var(--steel-deep);
  border: 1px solid #C6DCE9;
}

/* ===================================================================
   ADMIN
   =================================================================== */
.admin-body { background: var(--paper-2); }

.admin-top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
}
.admin-top-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.admin-top .brand { color: #fff; margin-right: 0; }
.admin-top .brand small { color: var(--mist); }
.admin-top-actions { display: flex; align-items: center; gap: 22px; }
.admin-top-actions a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  transition: color .2s;
}
.admin-top-actions a:hover { color: var(--amber-hot); }

.admin-wrap { max-width: 1160px; margin: 0 auto; padding: clamp(36px, 4vw, 56px) 28px 90px; }

.admin-h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-variation-settings: 'wdth' 114;
}
.admin-sub { margin-top: 8px; color: var(--stone); font-size: 15px; }

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 30px 0 34px;
}
.stat-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 24px 22px;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--line);
}
.stat-card.accent::before { background: linear-gradient(90deg, var(--steel), var(--amber-hot)); }
.stat-card .n {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 120;
  font-weight: 900;
  font-size: 2.3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-card.accent .n { color: var(--amber-deep); }
.stat-card .l {
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone);
}

.admin-tabs {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 6px;
  padding: 6px;
  background: #DFDED5;
  border-radius: 14px;
  margin-bottom: 22px;
}
.admin-tab {
  border: none;
  background: transparent;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.admin-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 6px 16px -8px rgba(16, 21, 29, .3);
}

.admin-panel { display: none; }
.admin-panel.active { display: block; }

.panel-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow-x: auto;
}

.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th {
  text-align: left;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 1px solid var(--line);
  background: #FBFAF6;
  white-space: nowrap;
}
.table td {
  padding: 17px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table tr:last-child td { border-bottom: none; }
.table .mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; }
.table .sub { display: block; font-size: 12.5px; color: var(--stone); margin-top: 3px; }

.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.pill.new       { background: var(--steel-tint); color: var(--steel-deep); border-color: #C6DCE9; }
.pill.confirmed { background: var(--amber-tint); color: var(--amber-deep); border-color: #F0D4BC; }
.pill.completed { background: var(--good-tint);  color: #19603F;           border-color: #BCE3CE; }
.pill.cancelled { background: var(--bad-tint);   color: #8E1F0F;           border-color: #EBC7BC; }

.status-select {
  padding: 9px 32px 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235D636D' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--line);
  border-radius: 10px;
  appearance: none;
  cursor: pointer;
}
.status-select:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(78, 151, 191, .16); }

.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.settings-form .card { padding: 30px 28px; border-radius: 20px; }
.settings-form h3 {
  font-size: 1.05rem;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.toggle-row:first-of-type { border-top: none; }
.toggle-row .t-label { font-weight: 600; font-size: 14.5px; }
.toggle-row .t-desc { font-size: 12.5px; color: var(--stone); margin-top: 3px; }

.switch { position: relative; display: inline-block; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }
.switch .track {
  display: block;
  width: 48px;
  height: 27px;
  border-radius: 999px;
  background: #CFCEC4;
  transition: background .25s;
}
.switch .track::before {
  content: "";
  position: absolute;
  top: 3.5px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(16, 21, 29, .3);
  transition: transform .25s var(--ease);
}
.switch input:checked + .track { background: linear-gradient(140deg, var(--amber-hot), var(--amber)); }
.switch input:checked + .track::before { transform: translateX(20px); }

.empty {
  padding: 52px 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--stone);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 80px);
  opacity: 0;
  z-index: 200;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #F5F7F9;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .5);
  transition: transform .35s var(--ease), opacity .35s;
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.err { background: var(--bad); }

/* ===================================================================
   LIVE CHAT — customer widget (dark) + dashboard pane (light)
   =================================================================== */
.chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 300;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #16100A;
  background: linear-gradient(140deg, var(--amber-hot), var(--amber) 60%);
  box-shadow: 0 16px 36px -12px rgba(232, 114, 42, .75);
  transition: transform .2s var(--ease), box-shadow .25s;
}
.chat-fab:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -14px rgba(232, 114, 42, .9); }
.chat-fab svg { width: 26px; height: 26px; }
.chat-fab.open svg { opacity: .55; }
.chat-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bad);
  border: 2.5px solid var(--paper);
}

.chat-panel {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 300;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(78, 151, 191, .3);
  background:
    radial-gradient(480px 320px at 100% 0%, rgba(78, 151, 191, .18), transparent 60%),
    var(--ink);
  color: #EDF2F7;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75);
}
/* Author display rules would otherwise defeat the hidden attribute. */
.chat-panel[hidden],
#chatConvo[hidden] { display: none !important; }

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(151, 166, 184, .18);
}
.chat-head-txt { display: flex; flex-direction: column; }
.chat-head-txt b { font-family: var(--font-display); font-variation-settings: 'wdth' 110; font-size: 15.5px; }
.chat-head-txt span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-top: 3px; }
.chat-close {
  border: none;
  background: none;
  color: var(--mist);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.chat-close:hover { color: #fff; }

.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
}
.chat-hello b { font-family: var(--font-display); font-size: 15px; display: block; margin-bottom: 6px; }
.chat-hello p { font-size: 13.5px; color: var(--mist); }
.chat-err {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #FFB3A0;
  text-align: center;
}

.msg { display: flex; flex-direction: column; max-width: 82%; }
.msg.from-me { align-self: flex-end; align-items: flex-end; }
.msg.from-them { align-self: flex-start; align-items: flex-start; }
.msg-who {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 4px;
}
.msg-bubble {
  padding: 11px 15px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.from-me .msg-bubble {
  background: linear-gradient(140deg, var(--amber-hot), var(--amber) 70%);
  color: #16100A;
  border-bottom-right-radius: 5px;
}
.msg.from-them .msg-bubble {
  background: rgba(78, 151, 191, .16);
  border: 1px solid rgba(78, 151, 191, .3);
  color: #EDF2F7;
  border-bottom-left-radius: 5px;
}
.msg-when {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--mist);
  margin-top: 4px;
}

.chat-gate { padding: 6px 20px 20px; }
.chat-gate p { font-size: 13.5px; color: var(--mist); margin-bottom: 14px; }

.chat-form {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid rgba(151, 166, 184, .18);
}
.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(151, 166, 184, .3);
  background: rgba(16, 21, 29, .7);
  color: #EDF2F7;
  font-family: var(--font-body);
  font-size: 14px;
}
.chat-form input:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(78, 151, 191, .18); }
.chat-send {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #16100A;
  background: linear-gradient(140deg, var(--amber-hot), var(--amber) 60%);
  transition: transform .15s var(--ease);
}
.chat-send:hover { transform: translateY(-2px); }
.chat-send svg { width: 18px; height: 18px; }

/* ── Dashboard chat pane (light theme) ── */
.chat-split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}
.thread-list { display: flex; flex-direction: column; max-height: 620px; overflow-y: auto; }
.thread-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  width: 100%;
  padding: 15px 18px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .15s;
}
.thread-item:hover { background: #FBFAF6; }
.thread-item.active { background: var(--amber-tint); }
.thread-item .t-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.t-dot {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--amber);
  color: #16100A;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
}
.thread-item .t-snip {
  font-size: 12.5px;
  color: var(--stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-item .t-when { font-family: var(--font-mono); font-size: 10px; color: #9A9F93; letter-spacing: .08em; }

.chat-pane { display: flex; flex-direction: column; min-height: 480px; }
.chat-pane .pane-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.chat-pane .pane-head b { font-size: 15.5px; }
.chat-pane .chat-msgs { max-height: 430px; }
.chat-pane .msg.from-them .msg-bubble {
  background: var(--steel-tint);
  border-color: #C6DCE9;
  color: var(--ink);
}
.chat-pane .msg-who, .chat-pane .msg-when { color: var(--stone); }
.chat-pane .chat-form { border-top: 1px solid var(--line); }
.chat-pane .chat-form input {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
#chatConvo { display: flex; flex-direction: column; flex: 1; }

.tab-dot {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--amber);
  color: #16100A;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}

/* ── Dashboard editors ── */
.inline-card { margin-bottom: 18px; }
.inline-card h3 {
  font-size: 1.05rem;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.sub-note { font-size: 12.5px; color: var(--stone); margin-top: 12px; }
.field-submit { align-self: end; }

.rev-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  margin-bottom: 12px;
}
.rev-main { min-width: 0; }
.rev-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--stone);
  margin-bottom: 8px;
}
.rev-meta .testi-stars { margin-bottom: 0; font-size: 12px; }
.rev-meta b { color: var(--ink); }
.rev-quote { font-size: 14.5px; color: var(--ink); }
.rev-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.mini-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.mini-btn:hover { border-color: var(--bad); color: var(--bad); }

.assign-select { max-width: 170px; }

.est-group { margin-bottom: 20px; }
.est-group-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.est-row {
  display: grid;
  grid-template-columns: 1fr 110px 14px 110px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.est-row-label { font-size: 13.5px; color: var(--ink); }
.est-dash { text-align: center; color: var(--stone); }
.est-row .num {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
}
.est-row .num:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(78, 151, 191, .16); }

/* ── Homepage estimator discount display ── */
.est-original {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--mist);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 139, 61, .7);
  margin-bottom: 6px;
}
.est-deal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 139, 61, .5);
  background: rgba(232, 114, 42, .14);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-hot);
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .gauge-card { max-width: 460px; margin: 0 auto; width: 100%; }
  .coverage-inner { grid-template-columns: 1fr; gap: 48px; }
  .auth-card { grid-template-columns: 1fr; }
  .auth-aside { padding: 44px 40px; }
  .booking-grid { grid-template-columns: 1fr; }
  .booking-aside { position: static; }
}

@media (max-width: 880px) {
  .chat-split { grid-template-columns: 1fr; }
  .thread-list { max-height: 300px; }

  .nav-links { display: none; }
  .hamburger { display: flex; }
  .services-grid, .testi-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .process-grid::before {
    top: 8px;
    bottom: 8px;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--steel), var(--amber-hot));
  }
  .step { padding: 24px 0 24px 40px; }
  .step::before { top: 30px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .stat, .stat:nth-child(3) { border-left: none; padding-left: 0; }
  .est-grid, .contact-grid, .settings-form { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .chat-panel { right: 16px; bottom: 86px; }
  .chat-fab { right: 16px; bottom: 16px; }

  .wrap { padding: 0 20px; }
  .services-grid, .testi-grid, .stats-grid, .form-row, .footer-grid, .stat-cards { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
  .auth-body { padding: 38px 26px; }
  .auth-aside { padding: 38px 26px; }
  .coverage-state { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .brand-text { font-size: 15px; }
  .cta-phone { width: 100%; justify-content: center; }
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  .hero::before { animation: none; }
  .air { display: none; }
  .gauge-needle { transform: rotate(5deg); }
  .gauge-svg.animate .gauge-needle { transition: none; transform: rotate(5deg); }
  .hero h1 .warm::after { animation: none; opacity: 1; transform: none; }
}

.service-edit {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.service-edit:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.service-edit-header {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 12px;
}
.service-edit-header b { color: var(--ink); }