/* =========================================================
   Infinity HVAC — Clean CSS (Polished)
   Order: Base · Layout · Nav · Hero · Forms · Buttons
          About · Services · Service Pages · Contact · Footer
          Utilities · Animations · Brands · Media Queries
   ========================================================= */

/* ========== Base */
:root{
  --ink:#0B0B0C;
  --muted:#6B7280;
  --line:#E5E7EB;
  --wash:#F6F8FB;
  --accent:#0A2CFF;
  --max:1200px;
  --r:16px;
}
*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:88px; /* anchor offset for sticky header */
}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--wash);
}
/* media guards & long-word wrapping */
img,video{ max-width:100%; height:auto; display:block; }
svg{ max-width:100%; height:auto; }
:where(h1,h2,h3,p,li,a,button){ overflow-wrap:anywhere; word-break:auto; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; }
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* ========== Navigation (glassy, sticky, minimal) */
.nav,
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.nav.scrolled,
.site-header.scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.06); }

.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
}
.logo{ height:clamp(36px,6vw,64px); display:block; }

.menu{
  display:flex; align-items:center; gap:28px;
  list-style:none; margin:0; padding:0;
}
.menu a{
  position:relative; padding:8px 4px;
  font-weight:500; text-decoration:none; color:#2a2a2a; opacity:.9;
}
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:#111; opacity:0; transform:scaleX(.9);
  transition:opacity .2s, transform .2s, height .2s, background .2s;
}
.menu a:hover::after,
.menu a.active::after{ opacity:1; transform:scaleX(1); }
.menu a.active{ color:#111; }
.menu a.active::after{ height:3px; background:#10069F; }

.menu a:focus-visible,
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(16,6,159,.18);
  border-radius:10px;
}

.btn--phone{ padding:10px 14px; border:1px solid #111; border-radius:9999px; }

/* Hamburger */
.hamburger{
  display:none; position:relative; width:44px; height:40px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  cursor:pointer;
}
.hamburger span{
  position:absolute; left:10px; right:10px; height:2px; background:#111; border-radius:2px;
  transition:transform .2s, opacity .2s;
}
.hamburger span:nth-child(1){ top:11px; }
.hamburger span:nth-child(2){ top:19px; }
.hamburger span:nth-child(3){ top:27px; }
.hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Mobile overlay (visual-only; never traps input) */
.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.28);
  opacity:0; pointer-events:none !important; transition:opacity .2s;
  z-index:10000; /* below menu (which will be higher on mobile) */
}
.nav-overlay.show{ opacity:1; }

/* Prevent anchors from hiding under sticky header */
section[id]{ scroll-margin-top:140px; }
#quoteFormHero{ scroll-margin-top:180px; }

/* ========== Hero */
.hero{
  position:relative; overflow:hidden; color:#fff;
  padding:86px 0 200px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(135deg, #000000 0%, #10069F 100%);
}
.hero::before{
  content:""; position:absolute; inset:-40% -20% auto -20%;
  width:200%; height:200%;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
  mix-blend-mode:soft-light;
  pointer-events:none; z-index:0;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:clamp(200px,24vh,320px);
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(246,248,251,0.15) 35%,
    rgba(246,248,251,0.60) 65%,
    var(--wash) 85%
  );
  filter:saturate(1.02);
  z-index:0;
}
.subhero::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:260px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(16,6,159,0) 0%,
    rgba(246,248,251,0.2) 40%,
    rgba(246,248,251,0.6) 70%,
    var(--wash) 90%
  );
  z-index:0;
}

.hero__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
  min-height:520px; position:relative; z-index:1;
}
.hero__copy, /* keep both to avoid breaking */
.hero_copy{ max-width:560px; }

.kicker{ text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-size:12px; opacity:.95; }

.hero h1{
  font-size:clamp(32px,5vw,48px); line-height:1.06; margin:.10em 0;
  color:transparent !important; -webkit-text-fill-color:transparent;
  background:linear-gradient(90deg, #ffffff 0%, #d6ddff 40%, #ffffff 80%);
  -webkit-background-clip:text; background-clip:text;
  display:inline-block; animation:heroGlow 4.5s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.12));
}
@keyframes heroGlow{
  0%{ filter:drop-shadow(0 0 6px rgba(255,255,255,.12)); }
  50%{ filter:drop-shadow(0 0 12px rgba(255,255,255,.28)); }
  100%{ filter:drop-shadow(0 0 6px rgba(255,255,255,.12)); }
}

.sub{ color:rgba(255,255,255,.85); max-width:52ch; margin:0 0 30px; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.hero__visual{ border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:0 12px 36px rgba(0,0,0,.08); }
.hero__visual img{ width:100%; height:auto; display:block; }

/* ========== Forms */
.form input,
.form textarea{
  width:100%; padding:12px 14px; margin-bottom:10px; font:inherit;
  border:1px solid var(--line); border-radius:12px;
}
.form--hero{
  max-width:420px; margin-top:0; padding:18px;
  backdrop-filter:blur(6px);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.18);
  color:#fff; box-shadow:0 16px 36px rgba(0, 0, 0, .28);
}
.form__title{ margin:0 0 6px; font-size:20px; color:#fff; text-align:center; }
.form__sub{ margin:0 0 20px; color:rgba(255,255,255,.8); font-size:14px; text-align:center; }
.form--hero:hover{ transform:translateY(-1px); }
.form--hero input{
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06); color:#fff;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.form--hero input::placeholder{ color:rgba(255,255,255,.75); }
.form--hero input:focus{
  border-color:#8fb0ff; background:rgba(255,255,255,0.12);
  box-shadow:0 0 0 4px rgba(143,176,255,0.25); outline:none;
}
.form--hero textarea{
  padding:12px 14px; border-radius:12px; margin-bottom:10px; resize:vertical; min-height:130px; outline:none;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06); color:#fff;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.form--hero textarea::placeholder{ color:rgba(255,255,255,0.75); }
.form--hero textarea:focus{
  border-color:#8fb0ff; background:rgba(255,255,255,0.12);
  box-shadow:0 0 0 4px rgba(143,176,255,0.25);
}
.btn--block{ width:100%; }
.msg{ font-size:14px; margin-top:8px; }

/* ========== Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:9999px; border:0; cursor:pointer;
  min-height:44px; text-decoration:none; transition:transform .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--solid{
  background:#fff; color:#10069F;
  padding:14px 18px; border-radius:999px; line-height:1.1;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 600; font-size: 16px;
}
.btn--ghost{
  background:#fff; color:#10069F; border:2px; border-color: #10069F;
  padding:12px 32px; min-width:170px; font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn--ghost:hover{
  transform: translate(-2px) scale(1.03);
  box-shadow:0 6px 22px rgba(16,6,159,.32);
  background: #fff; color:#10069F; border: 2px; border-color: #10069F;
}

/* ========== About */
.about{ padding:132px 0; background:var(--wash); }
.about__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.about__media{ overflow:hidden; border-radius:var(--r); box-shadow:0 12px 36px rgba(0,0,0,.08); }
.about__media img{ width:100%; height:auto; border-radius:var(--r); display:block; }
.about__eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.about__copy h2{ font-size:clamp(28px,3.2vw,40px); line-height:1.15; margin:8px 0 12px; color:var(--ink); }
.about__copy p{ color:#2C2D30; margin:0 0 14px; }
.about__list{ list-style:none; padding:0; margin:8px 0 22px; }
.about__list li{ position:relative; padding-left:24px; margin:10px 0; color:#2C2D30; }
.about__list li::before{ content:"✓"; position:absolute; left:0; top:0; line-height:1.2; color:#18B97A; font-weight:700; }

/* ========== Services (cards) */
.services{ padding:96px 0; background:var(--wash); text-align:center; }
.services__title{ font-size:clamp(30px,3.2vw,44px); letter-spacing:-0.02em; margin:0 0 8px; }
.services__sub{ color:#677085; margin:0 0 48px; }
.services__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:28px; }
.service-card{
  display:flex; flex-direction:column; min-height:100%;
  background:#fff; border-radius:24px; border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change:transform;
}
.service-card img{
  width:100%; height:220px; object-fit:cover;
  filter:grayscale(20%) contrast(1.02) saturate(.9);
  transition:filter .25s ease, transform .25s ease;
}
.service-card h3{
  position:relative; padding-right:22px;
  font-size:clamp(18px,1.5vw,22px); letter-spacing:-0.01em;
  margin:18px 20px 8px; color:#0B0B0C;
}
.service-card p{ margin:0 20px 22px; color:#586074; font-size:16px; line-height:1.5; }
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 44px rgba(0,0,0,0.12);
  border-color:rgba(0,0,0,0.10);
}
.service-card:hover img{ filter:grayscale(0%) contrast(1.06) saturate(1.05); transform:scale(1.02); }
.service-card:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(16,6,159,.18), 0 16px 44px rgba(0,0,0,0.12);
  border-color:#C9D0FF;
}
.service-card h3::after{
  content:"→"; position:absolute; right:0; top:0; transform:translateY(2px);
  font-weight:600; color:#9AA3B2; transition:transform .22s ease, color .22s ease;
}
.service-card:hover h3::after{ transform:translate(4px,2px); color:#10069F; }

/* Testimonials */
.testimonials { padding: 56px 0; }
.testimonials__title { text-align:center; font-size:clamp(22px,3.4vw,28px); margin:0 0 6px; }
.testimonials__sub { text-align:center; color:#6B7280; margin:0 0 24px; }

.t-grid {
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width: 720px){ .t-grid { grid-template-columns: repeat(3, 1fr); } }

.t-card {
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}
.t-stars { display:flex; gap:4px; }
.t-stars svg { width:20x; height:20px; fill:#FBBF24; } /* warm star yellow */
.t-card blockquote {
  margin:0;
  color:#0B0B0C;
  line-height:1.5;
}
.t-name { font-weight:600; }
.t-meta { color:#6B7280; }
.t-card figcaption { color:#111; }

/* Optional: subtle hover lift on desktop */
@media (hover:hover){
  .t-card{ transition: transform .18s ease, box-shadow .18s ease; }
  .t-card:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.10); }
}


/* ========== Service Pages */
.subhero{
  padding:72px 0 56px;
  background:linear-gradient(135deg, #0e0e12 0%, #10069F 100%);
  color:#fff; position:relative; overflow:hidden;
}
.subhero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; }
.subhero h1{ font-size:clamp(30px,4vw,44px); line-height:1.1; margin:0 0 10px; }
.subhero p.lede{ color:rgba(255,255,255,.88); margin:0 0 18px; }
.breadcrumbs{ font-size:13px; opacity:.85; margin-bottom:10px; }
.breadcrumbs a{ color:#C9D0FF; text-decoration:none; }
.subhero .cta-row{ display:flex; gap:10px; flex-wrap:wrap; }
.section{ padding:80px 0; background:#fff; }
.section.alt{ background:var(--wash); }
.section h2{ font-size:clamp(24px,2.6vw,32px); margin:0 0 20px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.klist{ margin:16px 0 32px; padding-left:18px; }
.klist li{ margin:8px 0; color:#2c2d30; }
.klist li strong{ color:#0B0B0C; }
/* Two-column checklist on desktop */
.klist.cols-2{ columns:2; column-gap:28px; }
/* Numbered step list (right column) */
.steplist{
  counter-reset:step; list-style:none; padding:0; margin:0;
  display:grid; gap:10px; color:#2c2d30;
}
.steplist li{
  position:relative; padding-left:44px; line-height:1.5;
}
.steplist li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:2px; width:28px; height:28px;
  border-radius:999px; display:grid; place-items:center;
  font-weight:700; font-size:14px; color:#10069F; background:#EEF1FF; border:1px solid #D7DBFF;
}
/* Right column callout card */
.callout{
  margin-top:40px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px 22px 20px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.callout h3{ margin:0 0 6px; font-size:18px; }
.callout p{ margin:0 0 10px; color:#2c2d30; }
.callout p.tight{ margin-bottom:20px; }
.callout__actions{ display:flex; gap:10px; flex-wrap:wrap; }
/* Notice */
.notice{
  background:#f7f9ff; border:1px solid #e1e6ff; color:#162256;
  padding:14px 16px; border-radius:12px; margin-top:60px !important;
  max-width:fit-content; margin-left: auto; margin-right: auto;
}
/* Related links/cards */
.related{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.related a{
  display:block; padding:16px; border-radius:14px; text-decoration:none; color:inherit;
  background:#fff; border:1px solid #eee; box-shadow:0 8px 20px rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.related a:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.10); }

/* ========== Contact */
.contact{ padding:100px 0; background:var(--wash); }
.contact__inner{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:40px;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}
.contact__left h2{ font-size:clamp(28px,3vw,40px); margin-bottom:12px; }
.contact__left p{ margin-bottom:12px; color:#2c2d30; }
.contact__buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.btn--contact-phone{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#10069F; border:1px solid #10069F;
  padding:12px 24px; border-radius:999px; font-weight:600; text-decoration:none;
  transition:all .2s ease;
}
.btn--contact-phone:hover{
  background:#10069F; color:#fff; transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(16,6,159,0.28);
}
.btn--contact-quote{
  background:#10069F; color:#fff; padding:12px 28px; border-radius:999px;
  font-weight:600; transition:all .2s ease;
}
.btn--contact-quote:hover{
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,6,159,0.35);
  background:#fff; color:#10069F; border:1px solid #10069F;
}
.contact__list{
  list-style:none; padding:0; margin:18px 0 10px;
  display:grid; gap:10px;
}
.contact__list li{ display:flex; align-items:flex-start; gap:10px; color:#2c2d30; }
.contact__list svg{ flex:0 0 20px; margin-top:2px; opacity:.9; }
.divider{ height:1px; background:var(--line); margin:16px 0 18px; }
.contact__micro{ margin-top:12px; color:#667085; font-size:13.5px; }
/* two-column contact card & right-side image */
.card-2col{
  display:grid; grid-template-columns:1fr 350px; gap:40px;
  background:#fff; padding:40px; border-radius:20px;
  box-shadow:0 8px 32px rgba(0,0,0,0.08);
}
.contact__image img{
  width:100%; height:auto; object-fit:cover; border-radius:16px;
}

/* ========== Footer */
.footer{ background:#fff; padding:60px 0 30px; border-top:1px solid var(--line); color:#2c2d30; }
.footer__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; }
.footer__logo{ height:42px; margin-bottom:14px; }
.footer__branding p{ max-width:260px; color:#576072; font-size:15px; }
.footer__links h4, .footer__contact h4{ font-size:16px; margin:0 0 12px; color:#0b0b0c; }
.footer__links a, .footer__contact a{
  display:block; margin-bottom:8px; color:#576072; text-decoration:none; font-size:15px;
  transition:color .2s ease;
}
.footer__links a:hover, .footer__contact a:hover{ color:#10069F; }
.footer__contact p{ margin-top:8px; color:#576072; font-size:15px; }
.footer__bottom{
  margin-top:30px; text-align:center; padding-top:20px; border-top:1px solid var(--line);
  color:#7a7f89; font-size:14px;
}

/* ========== Utilities */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.lede{ color:#2c2d30; margin:0 0 12px; }
.mt-40{ margin-top:56px !important; } /* used below “Systems We Install” */

/* ========== Animations */
.hero-animate{ opacity:0; transform:translateY(28px); animation:heroGroupIn 10s cubic-bezier(.22,.65,.22,1) forwards; }
@keyframes heroGroupIn{
  0%{ opacity:0; transform:translateY(28px); }
  70%,100%{ opacity:1; transform:translateY(0); }
}
.form-success{ animation:formShrink .5s ease forwards; }
@keyframes formShrink{ 0%{ transform:scale(1); opacity:1; } 100%{ transform:scale(.85); opacity:0; } }
.success-box{
  margin-top:20px; padding:28px; background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.25); border-radius:16px; backdrop-filter:blur(6px);
  text-align:center; color:#fff; opacity:0; animation:successFade .6s ease forwards;
}
@keyframes successFade{ 0%{ opacity:0; transform:translateY(10px); } 100%{ opacity:1; transform:translateY(0); } }

/* ================= TRUSTED BRANDS ================= */
.brands{ padding:96px 0; background:var(--wash); text-align:center; }
.brands__title{ font-size:clamp(28px,3vw,42px); margin-bottom:8px; letter-spacing:-0.01em; }
.brands__sub{ color:#677085; margin-bottom:48px; font-size:16px; }
.brands__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:32px; align-items:center; justify-items:center;
}
.brand-card{
  width:100%; max-width:180px; padding:22px;
  background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:20px;
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
  transition:transform .22s ease, box-shadow .22s ease;
}
.brand-card img{
  width:100%; height:auto; max-height:52px; object-fit:contain;
  filter:grayscale(20%) brightness(1.1);
  transition:filter .25s ease;
}
.brand-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,0.12); }
.brand-card:hover img{ filter:grayscale(0%) brightness(1.15); }

/* ========== Media Queries */
@media (max-width:1020px){
  .nav__inner{ gap:12px; }
  .menu{ gap:22px; }
}
@media (max-width:900px){
  .hamburger{ display:inline-block; }

  .menu{
    position:fixed;
    inset:72px 12px auto 12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
    display:none;
    flex-direction:column;
    gap:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    z-index:11000;               /* above overlay (10000) */
    max-height:calc(100vh - 96px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* ✅ authoritative open state */
  .menu.open{ display:flex !important; }

  .btn--phone{ width:100%; text-align:center; }

  .hero__grid{ grid-template-columns:1fr; min-height:unset; }
  .form--hero{ max-width:100%; margin-top:8px; }

  .about{ padding:96px 0; }
  .about__grid{ grid-template-columns:1fr; gap:24px; }

  .subhero .wrap{ grid-template-columns:1fr; row-gap:18px; }
  .grid-2{ grid-template-columns:1fr; }
  .klist.cols-2{ columns:1; }

  .contact__inner{ grid-template-columns:1fr; padding:28px; text-align:center; }
  .contact__buttons{ justify-content:center; }

  .card-2col{ grid-template-columns:1fr; }
  .contact__image{ order:-1; }

  .footer__grid{ grid-template-columns:1fr; text-align:center; }
  .footer__branding p{ margin:0 auto; }

  /* navbar safe padding on small screens */
  .nav__inner{ padding-left:18px; padding-right:18px; }
  .logo{ margin-left:2px; }
  .hamburger{ margin-right:2px; }
}

@media (max-width:640px){
  .services{ padding:72px 0; }
  .service-card img{ height:260px; }
  .menu{ inset:64px 10px auto 10px; }
  .nav__inner{ padding:12px 0; }
}

@media (max-width:380px){
  .hero{ padding:72px 0 120px; }
  .btn, .btn--ghost, .btn--solid{ padding:12px 16px; }
  .wrap{ padding-left:16px; padding-right:16px; }
  .menu{ inset:60px 8px auto 8px; }
  /* tighter navbar padding on extra-small devices */
  .nav__inner{ padding-left:16px; padding-right:16px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* small helper for hero form microcopy */
.form__micro{
  margin:10px 0 0; text-align:center; font-size:12.5px;
  color: rgba(255,255,255,.72);
}

/* ===== Mobile Menu Fix Guards (final) ===== */
/* Prevent the fixed drawer from being clipped by sticky/transform ancestors */
header, .nav, .site-header, .nav__inner, .nav-wrap, .wrap { overflow: visible !important; }
header[style*="transform"],
.nav[style*="transform"],
.nav__inner[style*="transform"],
.nav-wrap[style*="transform"],
.wrap[style*="transform"] { transform: none !important; }

/* Neutralize sticky header blur while menu is open (paired with JS 'html.menu-open') */
html.menu-open .nav,
html.menu-open .site-header{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* ==== Final Guarantees (append at end) ==== */
@media (max-width:900px){
  .menu { display: none; }
  .menu.open { display: flex !important; } /* authoritative */
}

/* Overlay is purely visual — never blocks interaction */
.nav-overlay { pointer-events: none !important; }

/* Ensure nothing clips the fixed drawer */
header, .nav, .site-header, .nav__inner, .nav-wrap, .wrap { overflow: visible !important; }
header[style*="transform"],
.nav[style*="transform"],
.nav__inner[style*="transform"],
.nav-wrap[style*="transform"],
.wrap[style*="transform"] { transform: none !important; }

@media (max-width:900px){
  .menu { display: none; }
  .menu.open { display: flex !important; }  /* authoritative open state */
}
/* make sure nothing blocks taps or clips the fixed drawer */
.nav-overlay { pointer-events: none !important; }
header, .nav, .site-header, .nav__inner, .wrap { overflow: visible !important; }

@media (max-width:900px){
  .menu { display: none; }               /* default hidden on mobile */
  .menu.open { display: flex !important; }  /* authoritative open state */
}
/* absolutely no overlay */
.nav-overlay { display:none !important; }
/* ensure nothing clips the fixed drawer */
header, .nav, .site-header, .nav__inner, .wrap { overflow: visible !important; }

/* Wrapper */
.reviews {
  padding: 80px 0;
  background: var(--wash);
}

/* Card */
.review-card {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  padding: 48px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
  border: 1px solid #e5e7eb;
}

/* Title */
.review-card h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* Subtitle */
.review-card p {
  font-size: 17px;
  color: #444;
  margin-bottom: 20px;
}

.reviews__stars {
  font-size: 38px;
  letter-spacing: 6px;
  color: #ffdf00;
  text-shadow:
    0 0 8px rgba(255,223,0,0.8),
    0 0 18px rgba(255,223,0,0.5),
    0 0 28px rgba(255,223,0,0.4);
  animation: starPulse 1.6s infinite ease-in-out;
}

@keyframes starPulse {
  0%   { text-shadow: 0 0 6px rgba(255,223,0,0.6); }
  50%  { text-shadow: 0 0 16px rgba(255,223,0,1); }
  100% { text-shadow: 0 0 6px rgba(255,223,0,0.6); }
}


/* Button */
.btn--review {
  display: inline-block;
  padding: 14px 32px;
  background: var(--accent);
  color: white;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 10px 24px rgba(10,44,255,0.28);
  transition: 0.2s ease;
  margin-top: 24px;
}

.btn--review:hover {
  background: #001FCC;
  transform: translateY(-2px);
}

/* About v2 */
.about-v2{ padding:60px 0; }
.about-head{ text-align:center; margin-bottom:28px; }
.about-head h1{ margin:0 0 6px; font-size:clamp(26px,3.5vw,36px); color:#0B0B0C; }
.about-head .sub{ color:#6B7280; }

.about-rows .row{
  display:grid; grid-template-columns:1fr; gap:22px; align-items:center;
  margin:0 0 42px;
}
.about-rows .row img{
  width:80%; height: 500px; display:block;
  border-radius:16px; box-shadow:0 10px 34px rgba(0,0,0,.08);
}
.about-rows .copy h2{ margin:0 0 8px; font-size:clamp(20px,3vw,28px); }
.about-rows .copy p{ margin:0 0 10px; color:#333; }
.about-rows .copy ul{ margin:0; padding-left:18px; color:#333; }

@media (min-width:900px){
  .about-rows .row{ grid-template-columns:1.15fr 1fr; gap:32px; }
  /* alternate rows: image right on even rows */
  .about-rows .row:nth-child(even) img{ order:2; }
  .about-rows .row:nth-child(even) .copy{ order:1; }
}

/* Photo strip */
.about-strip{
  list-style:none; padding:0; margin:6px 0 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.about-strip img{
  width:100%; height:auto; display:block; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
@media (min-width:720px){ .about-strip{ grid-template-columns:repeat(4,1fr); } }

/* Sub-hero colors if you use .hero.subhero above this */
.hero.subhero{ background:#F6F8FB; padding:80px 0 40px; text-align:center; }
.hero.subhero h1{ color:#0B0B0C; }
.hero.subhero .sub{ color:#6B7280; }

/* =============================
   ABOUT HERO SIDE-BY-SIDE LAYOUT
   ============================= */

.hero--page .hero__flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 40px 0;
}

.hero--page .hero__copy {
  text-align: left;
}

.hero--page .hero__media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.1);
}

/* Mobile: stack */
@media (max-width: 850px) {
  .hero--page .hero__flex {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero--page .hero__copy {
    text-align: center;
  }

  .hero--page .hero__media {
    margin-top: 20px;
  }
}

/* Our Story intro block */
.story-intro { padding: 12px 0 28px; }
.story-box{
  max-width: 820px; margin: 0 auto 40px;
  background:#fff; border:1px solid #E5E7EB; border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.06);
  padding: 26px 28px;
  line-height:1.6; color:#0B0B0C;
  border-left: 6px solid #10069F;
}
.story-box p{ margin:0 0 12px; }
.story-box p:last-child{ margin-bottom:0; }
@media (max-width:720px){ .story-box{ padding:16px; } }

.story-box {
  animation: fadeUp .6s ease forwards;
  opacity: 0;
  transform: translateY(14px);
}
.story-box{
  background:#f7f9ff;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-btn-wrap {
  width: 100%;
  text-align: center;
  margin-top: 40px;
}
.about-btn-wrap .btn {
  display: inline-block;
}

.about-btn-wrap .btn {
  padding: 10px 20px;   /* smaller button */
  font-size: 15px;      /* slightly smaller text */
  display: inline-block;
}

.about-strip li {
  transition: box-shadow .3s ease, transform .3s ease;
}

.about-strip li:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(0,0,0,.12);
}

.about-strip img {
  transition: transform .3s ease;
}

.about-strip img:hover {
  transform: scale(1.05);
}

/* === Patch: small fixes & cleanups === */

/* 1) Buttons should never be underlined */
a.btn, a.btn--solid, a.btn--ghost { text-decoration: none; }

/* 2) Ghost button border was missing a style keyword */
.btn--ghost { border: 2px solid #10069F; }
.btn--ghost:hover { border: 2px solid #10069F; }

/* 3) Star icon width typo (20x -> 20px) */
.t-stars svg { width: 20px; height: 20px; fill: #FBBF24; }

/* 4) About “rows” images: keep aspect clean on all screens */
.about-rows .row img{
  width: 100%;               /* was 80% – causes ragged alignment */
  height: 420px;             /* consistent frame */
  object-fit: cover;         /* crop, don’t squish */
}

/* 5) Story card: tidy spacing on small screens */
@media (max-width: 720px){
  .story-intro { padding: 8px 0 20px; }
  .story-box   { margin: 0 0 28px; }
}

/* 6) Mobile menu: keep ONE authoritative rule set */
@media (max-width: 900px){
  .menu { display: none; }
  .menu.open { display: flex !important; }
}

/* 7) Remove duplicated overlay/overflow rules fighting each other */
.nav-overlay { display: none !important; }

a.btn--contact-quote {
  text-decoration: none !important;
}