/* ==========================================================================
   Elite Air Solutions — modern site
   Brand palette: red/orange "feeling the heat" + deep navy
   Mobile-first, conversion-optimized. Native CSS, progressive enhancement.
   Design pass: refined type rhythm, depth, motivated motion, SVG icon system.
   ========================================================================== */

:root{
  /* Brand — deep navy */
  --c-ink: #0a1020;          /* deep navy / near-black */
  --c-ink-2: #111a30;
  --c-ink-3: #1b2742;
  --c-paper: #ffffff;
  --c-paper-2: #f6f7fb;
  --c-paper-3: #eceef5;
  --c-line: #e4e7f0;
  --c-line-2: #d7dbe8;

  --c-text: #131829;
  --c-mute: #565d73;
  --c-mute-2: #868ca1;

  /* Heat accent (matches existing logo red/orange) — locked accent family */
  --c-red: #e21f26;
  --c-red-2: #ff4d2e;
  --c-red-3: #b31419;
  --c-orange: #ff8a1f;
  --c-amber: #ffb14d;

  /* States */
  --c-ok: #15a06b;
  --c-warn: #f1b234;

  /* Type */
  --f-display: "Archivo Black", "Bebas Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius-xs: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  /* Shadows tinted to the navy ink, never pure black */
  --shadow-sm: 0 1px 2px rgba(10,16,32,.06), 0 2px 8px rgba(10,16,32,.05);
  --shadow-md: 0 10px 30px rgba(10,16,32,.10), 0 2px 8px rgba(10,16,32,.05);
  --shadow-lg: 0 30px 70px rgba(10,16,32,.20), 0 8px 22px rgba(10,16,32,.10);
  --shadow-red: 0 10px 28px rgba(226,31,38,.34), inset 0 1px 0 rgba(255,255,255,.22);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--f-body);
  color: var(--c-text);
  background: var(--c-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--c-red); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }
svg{ display:block; }

.wrap{ width:100%; max-width: var(--maxw); margin:0 auto; padding: 0 var(--gutter); }

/* Honeypot */
.hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1,h2,h3,h4{ font-family: var(--f-display); font-weight: 400; letter-spacing:-.015em; line-height:1.04; margin:0 0 .4em; color: var(--c-ink); text-wrap: balance; }
h1{ font-size: clamp(2.2rem, 6.2vw, 4.5rem); letter-spacing:-.025em; }
h2{ font-size: clamp(1.7rem, 3.8vw, 2.7rem); }
h3{ font-size: clamp(1.18rem, 1.8vw, 1.4rem); font-family: var(--f-body); font-weight: 800; letter-spacing:-.01em; }
h4{ font-size: .95rem; font-family: var(--f-body); font-weight: 700; letter-spacing:.04em; text-transform: uppercase; color: var(--c-ink); }
p{ margin:0 0 1em; color: var(--c-text); text-wrap: pretty; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: .7rem;
}
.eyebrow::before{
  content:""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c-red), var(--c-orange));
}

.section-head{ max-width: 720px; margin: 0 auto 44px; text-align:center; }
.section-head .eyebrow{ justify-content:center; }
.section-head p{ color: var(--c-mute); font-size:1.08rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position: relative; isolation: isolate; overflow: hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family: var(--f-body); font-weight:700; letter-spacing:.01em;
  padding: 14px 24px; border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer; user-select:none;
  text-decoration:none !important;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
  min-height: 50px; /* tap target */
  font-size: 1rem;
  white-space: nowrap;
}
.btn--lg{ padding: 16px 28px; font-size: 1.06rem; min-height: 58px; }
.btn--block{ width:100%; }
.btn svg{ width: 1.2em; height: 1.2em; }

.btn--primary{
  background: linear-gradient(180deg, var(--c-red-2), var(--c-red));
  color: #fff;
  box-shadow: var(--shadow-red);
}
/* directional sheen sweep on hover */
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.30) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(226,31,38,.46), inset 0 1px 0 rgba(255,255,255,.28); }
.btn--primary:hover::after{ transform: translateX(120%); }
.btn--primary:active{ transform: translateY(0) scale(.985); }

.btn--ghost{
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line-2);
}
.btn--ghost:hover{ background: var(--c-ink); color: #fff; border-color: var(--c-ink); transform: translateY(-2px); }
.btn--ghost:active{ transform: translateY(0) scale(.985); }
.btn__icon{ font-size:1.05em; }

.btn:focus-visible{ outline: 3px solid rgba(226,31,38,.5); outline-offset: 2px; }

/* ==========================================================================
   Top utility bar
   ========================================================================== */
.util-bar{
  background: var(--c-ink);
  color: #c2c8da;
  font-size: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.util-bar__row{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  min-height: 38px; padding-top:6px; padding-bottom:6px;
}
.util-bar strong{ color:#fff; }
.util-bar__sep{ color:#3b4467; }
.util-bar__phone{ color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:.45em; }
.util-bar__phone svg{ width:1em; height:1em; }
.util-bar__phone:hover{ color: var(--c-red-2); text-decoration:none; }
@media (max-width: 600px){
  .util-bar__sep{ display:none; }
  .util-bar__hours{ display:none; }
  .util-bar__row{ justify-content:center; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-stuck{ box-shadow: var(--shadow-md); background: rgba(255,255,255,.92); }
.site-header__row{
  display:flex; align-items:center; justify-content:space-between;
  min-height: 70px;
}
.brand img{ height: 44px; width:auto; }
.nav{ display:flex; align-items:center; gap: 6px; }
.nav a{
  position: relative;
  color: var(--c-ink); font-weight:600; font-size:.95rem;
  padding: 9px 12px; border-radius: 999px;
  transition: color .18s ease, background .18s ease;
}
.nav a:not(.nav__cta)::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background: var(--c-red); border-radius:2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
.nav a:not(.nav__cta):hover{ color: var(--c-red); text-decoration:none; }
.nav a:not(.nav__cta):hover::after{ transform: scaleX(1); }
.nav__cta{
  background: var(--c-ink); color:#fff !important;
  padding: 10px 20px !important; border-radius: 999px;
  margin-left: 8px;
  box-shadow: 0 6px 16px rgba(10,16,32,.18);
  transition: background .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.nav__cta:hover{ background: var(--c-red); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(226,31,38,.34); }

.nav-toggle{
  display:none;
  background:transparent; border:0; cursor:pointer;
  width: 46px; height: 46px; padding: 9px;
}
.nav-toggle span{
  display:block; height:2px; background: var(--c-ink); margin: 5px 0; border-radius: 2px;
  transition: transform .25s var(--ease), opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:flex; flex-direction:column; gap: 4px;
  padding: 8px var(--gutter) 18px;
  border-top: 1px solid var(--c-line);
  background: #fff;
  animation: menuDrop .28s var(--ease) both;
}
@keyframes menuDrop{ from{ opacity:0; transform: translateY(-8px);} to{ opacity:1; transform:none; } }
.mobile-menu a{
  color: var(--c-ink); font-weight: 600; padding: 14px 4px;
  border-bottom: 1px solid var(--c-line);
}
.mobile-menu__call{
  margin-top: 10px;
  background: var(--c-paper-2); color: var(--c-ink) !important;
  text-align:center; border-radius: 12px; border-bottom: 0 !important;
  padding: 15px !important; font-weight: 800;
}
.mobile-menu__cta{
  background: var(--c-red); color:#fff !important;
  text-align:center; border-radius: 12px; border-bottom: 0 !important;
  padding: 15px !important; font-weight: 800;
  box-shadow: var(--shadow-red);
}

@media (max-width: 920px){
  .nav{ display:none; }
  .nav-toggle{ display:block; }
}
@media (min-width: 921px){
  .mobile-menu{ display:none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative; isolation: isolate;
  padding: clamp(40px, 7vw, 92px) 0 clamp(52px, 8vw, 104px);
  background: var(--c-ink);
  color: #f3f4fb;
  overflow: hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(255,138,31,.34), transparent 60%),
    radial-gradient(760px 520px at -8% 112%, rgba(226,31,38,.32), transparent 60%),
    linear-gradient(102deg, rgba(8,12,24,.96) 0%, rgba(10,16,32,.90) 42%, rgba(12,18,40,.74) 78%, rgba(14,22,46,.66) 100%),
    url("/assets/media/hero-rooftop.jpg") center 30%/cover no-repeat;
}
/* slow-drifting aurora blobs add life without distraction */
.hero__bg::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(420px 320px at 20% 30%, rgba(255,77,46,.20), transparent 60%),
    radial-gradient(380px 300px at 80% 70%, rgba(255,177,77,.16), transparent 60%);
  filter: blur(8px);
  animation: auroraDrift 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(-3%, 2%, 0) scale(1.08); }
}
/* fine technical grid, masked to the center */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 38%, #000 32%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000 32%, transparent 76%);
}

.hero__grid{
  display:grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 920px){
  .hero__grid{ grid-template-columns: 1fr; }
}

.hero__copy h1{ color:#fff; }
.hero__copy .eyebrow{ color: var(--c-amber); }
.hero__copy .eyebrow::before{ background: linear-gradient(90deg, var(--c-orange), var(--c-amber)); }
.hero__accent{
  background: linear-gradient(95deg, var(--c-red-2), var(--c-orange) 70%, var(--c-amber));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display:inline-block;
}
.hero__lede{
  color: #ccd1e4; font-size: clamp(1.06rem, 1.4vw, 1.22rem);
  max-width: 560px; margin-top: 10px;
}

.hero__ctas{
  display:flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 20px;
}
.hero__ctas .btn--ghost{ color:#fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.04); }
.hero__ctas .btn--ghost:hover{ background:#fff; color: var(--c-ink); border-color:#fff; }

.trust-strip{
  list-style:none; padding:0; margin: 16px 0 0;
  display:flex; flex-wrap:wrap; gap: 12px 22px;
  color: #ccd1e4; font-size: .92rem; font-weight: 600;
}
.trust-strip li{ display:inline-flex; align-items:center; gap:7px; }
.trust-strip li svg{ width: 1.1em; height: 1.1em; color: var(--c-ok); flex:none; }

/* Lead card (hero & contact) */
.lead-card{
  position: relative;
  background:#fff; color: var(--c-text);
  border-radius: var(--radius-xl);
  padding: clamp(20px, 2.6vw, 26px);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.7);
}
.lead-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(160deg, rgba(255,138,31,.5), rgba(226,31,38,.18) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.lead-card__head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; margin-bottom: 16px;
}
.lead-card__head strong{
  font-family: var(--f-display); font-size: 1.4rem; color: var(--c-ink);
  font-weight: 400; letter-spacing:-.02em;
}
.lead-card__badge{
  font-size:.7rem; font-weight: 700; letter-spacing:.06em; text-transform: uppercase;
  background: rgba(21,160,107,.12); color: var(--c-ok);
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  display:inline-flex; align-items:center; gap:.4em;
}
.lead-card__badge::before{
  content:""; width:7px; height:7px; border-radius:50%; background: var(--c-ok);
  box-shadow: 0 0 0 0 rgba(21,160,107,.5); animation: pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(21,160,107,.45);} 70%{ box-shadow:0 0 0 7px rgba(21,160,107,0);} 100%{ box-shadow:0 0 0 0 rgba(21,160,107,0);} }
.lead-card--alt{ box-shadow: var(--shadow-md); }

/* ==========================================================================
   Lead form
   ========================================================================== */
.lead-form{ display:block; }
.step{ display:none; }
.step.is-active{ display:block; animation: fade .3s var(--ease) both; }
@keyframes fade{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } }

.field{ display:block; margin-bottom: 13px; }
.field > span{
  display:block; font-size:.82rem; font-weight: 700;
  color: var(--c-ink); margin-bottom: 6px; letter-spacing:.01em;
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea{
  width:100%;
  font: inherit; font-size:1rem;
  padding: 13px 14px;
  background: var(--c-paper-2);
  border: 1.5px solid var(--c-line-2);
  border-radius: 12px;
  color: var(--c-text);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  min-height: 50px;
}
.field textarea{ min-height: 86px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder{ color: var(--c-mute-2); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0; border-color: var(--c-red); background:#fff;
  box-shadow: 0 0 0 4px rgba(226,31,38,.13);
}

/* Segmented control for property type / urgency */
.seg{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg--3{ grid-template-columns: 1fr 1fr 1fr; }
.seg label{ position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; inset:0; }
.seg span{
  display:flex; align-items:center; justify-content:center;
  padding: 12px 8px; border: 1.5px solid var(--c-line-2);
  border-radius: 12px; font-weight: 600; font-size: .95rem;
  background: var(--c-paper-2); color: var(--c-ink);
  transition: all .18s var(--ease);
}
.seg label:hover span{ border-color: var(--c-mute-2); }
.seg input:checked + span{
  background: var(--c-ink); color:#fff; border-color: var(--c-ink);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.seg input:focus-visible + span{ box-shadow: 0 0 0 4px rgba(226,31,38,.2); }

.consent{ display:flex; gap: 10px; align-items: flex-start; margin: 8px 0 14px; font-size: .82rem; color: var(--c-mute); line-height:1.45; }
.consent input{ margin-top: 3px; width:18px; height:18px; accent-color: var(--c-red); flex:none; }

.lead-form__actions{ display:flex; gap: 10px; }
.lead-form__actions .btn{ flex:1; }
.lead-form__legal{ font-size:.78rem; color: var(--c-mute-2); margin: 10px 0 0; text-align:center; }
.lead-form__success{ text-align:center; padding: 22px 4px; animation: fade .35s var(--ease) both; }
.lead-form__success h3{ color: var(--c-ok); margin-bottom: 8px; font-size:1.3rem; }

/* ==========================================================================
   Metrics strip
   ========================================================================== */
.metrics{ background: var(--c-paper-2); border-bottom: 1px solid var(--c-line); }
.metrics__row{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 36px 0;
  text-align:center;
}
.metric{ display:flex; flex-direction:column; gap: 6px; padding: 4px 12px; position: relative; }
.metric + .metric::before{
  content:""; position:absolute; left:0; top:50%; transform: translateY(-50%);
  width:1px; height:48px; background: var(--c-line-2);
}
.metric strong{
  font-family: var(--f-display); font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  color: var(--c-ink); font-weight: 400; letter-spacing:-.02em; line-height:1;
}
.metric span{ color: var(--c-mute); font-size:.92rem; font-weight: 500; }
@media (max-width: 720px){
  .metrics__row{ grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .metric:nth-child(odd)::before{ display:none; }
  .metric:nth-child(3)::before, .metric:nth-child(4)::before{ display:block; }
}

/* ==========================================================================
   Section icon system (replaces emoji)
   ========================================================================== */
.card__icon, .icon-tile{
  width: 52px; height: 52px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, var(--c-paper-2), var(--c-paper-3));
  border: 1px solid var(--c-line);
  color: var(--c-red);
  margin-bottom: 10px;
  transition: transform .25s var(--ease), background .25s ease, color .25s ease;
}
.card__icon svg{ width: 26px; height: 26px; }

/* ==========================================================================
   Services
   ========================================================================== */
.services{ padding: clamp(60px, 8vw, 100px) 0; }
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 920px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .cards{ grid-template-columns: 1fr; } }

.card{
  position: relative; isolation: isolate; overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 26px;
  display:flex; flex-direction:column; gap: 8px;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s ease;
}
/* top sheen that reveals on hover */
.card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--c-red), var(--c-orange));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.card:hover::before{ transform: scaleX(1); }
.card:hover .card__icon{ transform: translateY(-2px); background: linear-gradient(160deg, var(--c-red), var(--c-red-2)); color:#fff; }
.card h3{ margin: 4px 0; }
.card p{ color: var(--c-mute); font-size: .97rem; flex:1; }
.card__link{
  align-self: flex-start;
  font-weight: 700; color: var(--c-red);
  display:inline-flex; align-items:center; gap:.4em;
}
.card__link svg{ width: 1em; height: 1em; transition: transform .2s var(--ease); }
.card__link:hover{ text-decoration:none; }
.card__link:hover svg{ transform: translateX(4px); }

.card--accent{
  background: linear-gradient(155deg, var(--c-ink) 0%, var(--c-ink-2) 100%);
  border-color: var(--c-ink);
  color: #fff;
}
.card--accent::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(420px 200px at 80% 0%, rgba(255,77,46,.30), transparent 60%);
}
.card--accent h3{ color:#fff; }
.card--accent .card__link{ color: var(--c-amber); }
.card--accent p{ color: #c8cde0; }
.card--accent .card__icon{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: var(--c-amber); }
.card--accent:hover .card__icon{ background: rgba(255,255,255,.16); color:#fff; }
.card--accent:hover{ box-shadow: 0 30px 70px rgba(226,31,38,.28); }

/* ==========================================================================
   Why us
   ========================================================================== */
.why{ background: var(--c-paper-2); padding: clamp(60px, 8vw, 100px) 0; }
.why__grid{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 60px); align-items:center;
}
@media (max-width: 920px){ .why__grid{ grid-template-columns: 1fr; } }

.why__list{ list-style:none; padding:0; margin: 0 0 24px; }
.why__list li{
  position: relative;
  padding: 15px 0 15px 34px; border-top: 1px solid var(--c-line);
  color: var(--c-mute); font-size: 1rem;
}
.why__list li::before{
  content:""; position:absolute; left:0; top:18px;
  width:20px; height:20px; border-radius:50%;
  background: var(--c-red) 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='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.why__list li:last-child{ border-bottom: 1px solid var(--c-line); }
.why__list strong{ color: var(--c-ink); }

.why__badges{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.badge{
  background:#fff; border:1px solid var(--c-line);
  border-radius: var(--radius); padding: 22px;
  display:flex; flex-direction:column; gap: 5px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.badge:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.badge strong{
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.4rem; color: var(--c-ink); letter-spacing:-.02em;
}
.badge span{ color: var(--c-mute); font-size: .88rem; }

/* ==========================================================================
   Areas
   ========================================================================== */
.areas{ padding: clamp(60px, 8vw, 100px) 0; }
.areas__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  max-width: 980px; margin: 0 auto;
}
.area-chip{
  position: relative;
  display:flex; align-items:center; justify-content:center; gap:.4em;
  padding: 18px 16px;
  background: #fff; border:1.5px solid var(--c-line);
  border-radius: 14px;
  color: var(--c-ink); font-weight: 700; font-size: .98rem;
  text-align:center;
  transition: transform .2s var(--ease), background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.area-chip::after{
  content:"→"; opacity:0; transform: translateX(-6px); transition: all .2s var(--ease); font-weight:700;
}
.area-chip:hover{
  background: var(--c-ink); color:#fff;
  border-color: var(--c-ink); text-decoration:none;
  transform: translateY(-3px); box-shadow: var(--shadow-md);
}
.area-chip:hover::after{ opacity:1; transform: translateX(0); }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{ position: relative; isolation:isolate; background: var(--c-ink); color:#fff; padding: clamp(60px, 8vw, 100px) 0; overflow:hidden; }
.reviews::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(700px 380px at 85% -10%, rgba(255,138,31,.18), transparent 60%),
    radial-gradient(640px 360px at 0% 110%, rgba(226,31,38,.18), transparent 60%);
}
.reviews .section-head h2{ color:#fff; }
.reviews .eyebrow{ color: var(--c-amber); }
.reviews .eyebrow::before{ background: linear-gradient(90deg, var(--c-orange), var(--c-amber)); }

.reviews__grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (max-width: 720px){ .reviews__grid{ grid-template-columns: 1fr; } }

.review{
  position: relative;
  margin: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 26px 24px 22px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .24s var(--ease), background .24s ease, border-color .24s ease;
}
.review:hover{ transform: translateY(-4px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.review .stars{ color: var(--c-amber); letter-spacing:.12em; font-size:1.08rem; margin-bottom: 12px; }
.review blockquote{
  margin: 0 0 16px; color:#eceefa; font-size: 1.04rem; line-height: 1.6;
}
.review figcaption{ color: #aab1cc; font-size: .9rem; font-weight: 600; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding: clamp(60px, 8vw, 100px) 0; }
.faq__list{ max-width: 820px; margin: 0 auto; }
.faq details{
  background:#fff; border:1px solid var(--c-line);
  border-radius: var(--radius); padding: 2px 20px;
  margin-bottom: 12px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq details[open]{ box-shadow: var(--shadow-md); border-color: transparent; }
.faq summary{
  list-style:none; cursor: pointer;
  padding: 18px 0; font-weight: 700; color: var(--c-ink); font-size:1.04rem;
  display:flex; justify-content:space-between; align-items:center; gap: 14px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; width:24px; height:24px; border-radius:50%;
  background: var(--c-paper-2) 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='%23e21f26' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: transform .25s var(--ease), background-color .2s ease;
}
.faq details[open] summary::after{ transform: rotate(135deg); background-color: rgba(226,31,38,.1); }
.faq details p{ color: var(--c-mute); margin: 0 0 16px; }

/* ==========================================================================
   Contact section
   ========================================================================== */
.contact{ background: var(--c-paper-2); padding: clamp(60px, 8vw, 100px) 0; }
.contact__grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (max-width: 920px){ .contact__grid{ grid-template-columns: 1fr; } }

.contact__list{ list-style:none; padding:0; margin: 20px 0 0; display:grid; gap: 0; }
.contact__list li{
  display:grid; grid-template-columns: 96px 1fr; gap: 14px; align-items:center;
  padding: 14px 0; border-bottom: 1px solid var(--c-line);
}
.contact__list strong{ color: var(--c-mute); font-size: .76rem; letter-spacing:.08em; text-transform: uppercase; font-weight: 700; }
.contact__list a{ color: var(--c-ink); font-weight: 700; }
.contact__list a:hover{ color: var(--c-red); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--c-ink); color: #b3bacf;
  padding: 60px 0 26px;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--c-red), var(--c-orange)) 1;
}
.site-footer__grid{
  display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 760px){ .site-footer__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .site-footer__grid{ grid-template-columns: 1fr; } }

.site-footer h4{ color:#fff; margin-bottom: 14px; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap: 9px; }
.site-footer a{ color: #b3bacf; transition: color .15s ease; }
.site-footer a:hover{ color:#fff; text-decoration:none; }
.site-footer__logo{
  background: rgba(255,255,255,.06); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 14px;
}
.site-footer__legal{
  display:flex; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin-top: 36px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .85rem; color: #818799;
}

/* ==========================================================================
   Sticky mobile bar
   ========================================================================== */
.sticky-bar{
  display:none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--c-line);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
  box-shadow: 0 -12px 34px rgba(10,16,32,.14);
}
.sticky-bar__btn{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding: 13px 8px; border-radius: 12px;
  font-weight: 800; font-size: .95rem;
  min-height: 50px;
  text-decoration: none !important;
  transition: transform .15s var(--ease), filter .15s ease;
}
.sticky-bar__btn svg{ width: 1.15em; height: 1.15em; }
.sticky-bar__btn:active{ transform: scale(.96); }
.sticky-bar__btn--call{ background: var(--c-red); color:#fff; box-shadow: var(--shadow-red); }
.sticky-bar__btn--sms{ background: var(--c-paper-2); color: var(--c-ink); border:1px solid var(--c-line); }
.sticky-bar__btn--quote{ background: var(--c-ink); color:#fff; }

@media (max-width: 920px){
  .sticky-bar{ display:flex; }
  body{ padding-bottom: 78px; } /* room for bar */
}

/* ==========================================================================
   Scroll reveal (progressive enhancement — only active when JS adds the
   .reveal-ready flag on <html>, and never under reduced-motion)
   ========================================================================== */
.reveal-ready .reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-ready .reveal.in-view{ opacity: 1; transform: none; }

/* ==========================================================================
   Reduced motion — disable all non-essential motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   Authorized-dealer brand strip
   ========================================================================== */
.brands{ background:#fff; border-bottom:1px solid var(--c-line); padding: clamp(30px,4.5vw,48px) 0; }
.brands__row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: clamp(24px,5vw,60px); }
.brands__label{ font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-mute); max-width:210px; line-height:1.55; }
.brands__label strong{ color:var(--c-ink); }
.brands__logos{ display:flex; align-items:center; gap: clamp(26px,5vw,52px); flex-wrap:wrap; justify-content:center; }
.brands__logos img{ width:auto; opacity:.72; filter:grayscale(1); transition:opacity .25s ease, filter .25s ease, transform .25s var(--ease); }
.brands__logos img:hover{ opacity:1; filter:none; transform:translateY(-2px); }
.brands__logos .logo-mark{ height:48px; }
.brands__logos .logo-word{ height:26px; }
@media(max-width:600px){ .brands__logos .logo-mark{ height:40px; } .brands__logos .logo-word{ height:22px; } }

/* ==========================================================================
   Equipment / authorized installs (image-led bento)
   ========================================================================== */
.equip{ padding: clamp(60px,8vw,100px) 0; }
.equip__grid{ display:grid; grid-template-columns:1.25fr 1fr; grid-auto-rows:1fr; gap:16px; }
@media(max-width:820px){ .equip__grid{ grid-template-columns:1fr; } }

.tile{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--radius-xl); color:#fff; display:flex; align-items:flex-end; min-height:248px; border:1px solid var(--c-line); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--ease); }
.tile:hover img{ transform:scale(1.05); }
.tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(8,12,24,.92) 0%, rgba(8,12,24,.30) 58%, rgba(8,12,24,.05) 100%); }
.tile__body{ padding: clamp(20px,2.6vw,30px); width:100%; }
.tile__body h3{ color:#fff; margin:0 0 6px; }
.tile__body p{ color:#cdd2e6; font-size:.95rem; margin:0; }
.tile__cap{ font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-amber); }

.equip__feature{ grid-row:1 / span 2; min-height:440px; }
.equip__feature .eyebrow{ color:var(--c-amber); }
.equip__feature .eyebrow::before{ background:linear-gradient(90deg,var(--c-orange),var(--c-amber)); }
.equip__dealer{ display:flex; align-items:center; gap:14px; margin:16px 0 18px; }
.equip__dealer img{ height:42px; width:auto; }
.equip__dealer span{ font-size:.82rem; color:#cdd2e6; font-weight:600; line-height:1.4; }
@media(max-width:820px){ .equip__feature{ grid-row:auto; min-height:360px; } }

/* ==========================================================================
   Why-us photo
   ========================================================================== */
.why__media{ display:grid; gap:16px; }
.why__photo{ position:relative; margin:0; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3; }
.why__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.why__photo:hover img{ transform:scale(1.04); }
.why__photo figcaption{
  position:absolute; left:16px; bottom:16px;
  display:flex; flex-direction:column; gap:2px;
  background:rgba(10,16,32,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:12px 16px; color:#fff;
}
.why__photo figcaption strong{ font-family:var(--f-display); font-weight:400; font-size:1.5rem; letter-spacing:-.02em; }
.why__photo figcaption span{ font-size:.82rem; color:#cdd2e6; }

/* ==========================================================================
   Tiny utilities
   ========================================================================== */
[hidden]{ display:none !important; }
::selection{ background: var(--c-red); color: #fff; }