/* ==========================================================================
   Platinum Heating & Air Conditioning, Inc. — original stylesheet
   ========================================================================== */

:root{
  --navy-900:#05122f;
  --navy-800:#08204f;
  --blue-700:#0e3a86;
  --blue-600:#1450b5;
  --blue-500:#2a6fdb;
  --red-600:#c0161c;
  --red-500:#e02127;
  --gold:#a67c1f;
  --ink:#16202f;
  --body:#4b5768;
  --line:#e2e7ef;
  --mist:#f4f7fb;
  --white:#fff;
  --radius:14px;
  --shadow-sm:0 2px 10px rgba(8,32,79,.07);
  --shadow:0 14px 40px rgba(8,32,79,.12);
  --shadow-lg:0 26px 70px rgba(8,32,79,.20);
  --wrap:1200px;
  --ease:cubic-bezier(.22,.68,.36,1);
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --head:"Barlow Condensed","Inter",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
@media (max-width:760px){html{scroll-padding-top:88px}}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.7;
  color:var(--body);background:var(--white);overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-600);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--red-600)}
h1,h2,h3,h4,h5{
  font-family:var(--head);color:var(--ink);margin:0 0 .5em;
  font-weight:700;line-height:1.08;letter-spacing:-.01em;text-transform:uppercase;
}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:1.4rem}
p{margin:0 0 1.1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:24px}
.section{padding:clamp(64px,8vw,110px) 0}
.section--mist{background:var(--mist)}
.section--navy{background:var(--navy-900);color:#b8c6dd}
.section--navy h2,.section--navy h3{color:#fff}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--head);font-size:1rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--red-600);margin-bottom:14px;
}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--red-600);border-radius:2px}
.section--navy .eyebrow{color:#ff8b8f}
.section--navy .eyebrow::before{background:#ff8b8f}

.head{max-width:720px;margin-bottom:54px}
.head--center{margin-inline:auto;text-align:center}
.head--center .eyebrow::before{display:none}
.head p{font-size:1.06rem;margin-bottom:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--head);font-size:1.12rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:16px 34px;border:2px solid transparent;
  border-radius:8px;cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;
}
.btn.btn--primary{background:var(--red-600);color:#fff;box-shadow:0 10px 26px rgba(192,22,28,.32)}
.btn.btn--primary:hover{background:var(--red-500);color:#fff;transform:translateY(-3px);box-shadow:0 16px 34px rgba(192,22,28,.42)}
.btn.btn--blue{background:var(--blue-700);color:#fff;box-shadow:0 10px 26px rgba(14,58,134,.3)}
.btn.btn--blue:hover{background:var(--blue-600);color:#fff;transform:translateY(-3px)}
.btn.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn.btn--ghost:hover{background:#fff;color:var(--navy-900);border-color:#fff}
.btn.btn--outline{border-color:var(--blue-700);color:var(--blue-700)}
.btn.btn--outline:hover{background:var(--blue-700);color:#fff}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{background:var(--navy-900);color:#9fb2d0;font-size:.9rem}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:46px;flex-wrap:wrap}
.topbar ul{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.topbar li{display:flex;align-items:center;gap:8px}
.topbar a{color:#dbe6f6;font-weight:600}
.topbar a:hover{color:#fff}
.topbar svg{width:15px;height:15px;fill:var(--red-500);flex:none}
.topbar ul.topbar__social{gap:14px}
.topbar__social a{
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.08);transition:background .2s var(--ease)
}
.topbar__social a:hover{background:var(--red-600)}
.topbar__social svg{fill:#fff;width:14px;height:14px}

.site-header{position:sticky;top:0;z-index:60;background:#fff;box-shadow:var(--shadow-sm);transition:box-shadow .3s var(--ease)}
.site-header.is-stuck{box-shadow:0 8px 30px rgba(8,32,79,.15)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;min-height:94px}
.brand{display:flex;align-items:center;flex:none;justify-self:start}
.brand img{width:clamp(180px,20vw,250px)}

.nav__menu{display:flex;align-items:center;gap:2px;justify-self:center}
.nav__menu > li:not(.nav__menu-cta) > a{
  font-family:var(--head);font-size:1.1rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);padding:12px 12px;display:block;position:relative;
  white-space:nowrap;
}
.nav__menu > li:not(.nav__menu-cta) > a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:3px;
  background:var(--red-600);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__menu > li:not(.nav__menu-cta) > a:hover::after,
.nav__menu > li.is-active:not(.nav__menu-cta) > a::after{transform:scaleX(1)}
.nav__menu > li.is-active:not(.nav__menu-cta) > a{color:var(--blue-700)}

.nav__cta{display:flex;align-items:center;gap:18px;flex:none;justify-self:end}
.nav__menu-cta{display:none}
.nav__phone{display:flex;align-items:center;gap:12px}
.nav__phone .ico{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--blue-700),var(--blue-500));
}
.nav__phone .ico svg{width:19px;height:19px;fill:#fff}
.nav__phone span{display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#8592a6;font-weight:700;line-height:1.25}
.nav__phone strong{display:block;font-family:var(--head);font-size:1.42rem;color:var(--ink);letter-spacing:.01em;line-height:1.05}

.nav__toggle{
  display:none;position:relative;width:48px;height:48px;padding:0;border:0;border-radius:13px;
  background:linear-gradient(135deg,var(--blue-700),var(--blue-600));cursor:pointer;
  box-shadow:0 6px 18px rgba(14,58,134,.30);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .15s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.nav__toggle:active{transform:scale(.94)}
.nav__toggle span{
  position:absolute;left:50%;top:50%;width:20px;height:2px;border-radius:2px;background:#fff;
  transition:transform .32s var(--ease),opacity .18s var(--ease);
}
.nav__toggle span:nth-child(1){transform:translate(-50%,calc(-50% - 6px))}
.nav__toggle span:nth-child(2){transform:translate(-50%,-50%)}
.nav__toggle span:nth-child(3){transform:translate(-50%,calc(-50% + 6px))}
.nav__toggle[aria-expanded="true"]{
  background:linear-gradient(135deg,var(--red-600),#8f0f14);box-shadow:0 6px 18px rgba(192,22,28,.35);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% 14%,rgba(42,111,219,.42),transparent 62%),
    radial-gradient(760px 520px at 8% 92%,rgba(192,22,28,.30),transparent 64%),
    linear-gradient(140deg,#04102a 0%,#08204f 46%,#0e3a86 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  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:62px 62px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
          mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding-block:clamp(70px,9vw,124px)}
.hero h1{color:#fff;margin-bottom:22px;text-shadow:0 6px 30px rgba(0,0,0,.3)}
.hero h1 em{font-style:normal;color:#ff9ea1;display:block}
.hero__lead{font-size:1.16rem;color:#c9d8f0;max-width:56ch;margin-bottom:34px}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:40px}
.hero__badges{display:flex;flex-wrap:wrap;gap:12px}
.hero__badges li{
  display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;color:#dce8fb;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  padding:9px 16px;border-radius:999px;backdrop-filter:blur(6px);
}
.hero__badges svg{width:15px;height:15px;fill:#63e6a4;flex:none}

/* hero booking card */
.book{
  background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);
  padding:34px;color:var(--body);border-top:6px solid var(--red-600);
}
.book h2{font-size:1.65rem;margin-bottom:4px}
.book > p{font-size:.95rem;margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7b889b;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.98rem;color:var(--ink);padding:13px 15px;
  border:1.5px solid var(--line);border-radius:9px;background:#fbfcfe;transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(42,111,219,.14);background:#fff;
}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field .err{display:none;font-size:.82rem;color:var(--red-600);font-weight:600;margin-top:5px}
.field.is-bad input,.field.is-bad select{border-color:var(--red-600);background:#fff6f6}
.field.is-bad .err{display:block}
.book .btn{width:100%}
.book__note{font-size:.82rem;text-align:center;margin:14px 0 0;color:#8592a6}
.form-ok{
  display:none;background:#e8f8ef;border:1.5px solid #9fdcb9;color:#17693e;
  border-radius:10px;padding:14px 16px;font-size:.94rem;font-weight:600;margin-bottom:16px;
}
.form-ok.is-on{display:block}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.btn:disabled{opacity:.72;cursor:progress}
.form-ok__alt{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:700;
  color:#17693e;text-decoration:underline;text-underline-offset:2px;
}
.form-ok__alt:hover{color:#0f4a2b}

/* ==========================================================================
   Emergency strip
   ========================================================================== */
.strip{background:linear-gradient(100deg,var(--red-600),#8f0f14);color:#fff}
.strip__in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding-block:26px}
.strip h3{color:#fff;margin:0;font-size:1.6rem}
.strip p{margin:2px 0 0;color:#ffd9da;font-size:.98rem}
.strip__left{display:flex;align-items:center;gap:20px}
.strip__left .ico{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.strip__left .ico svg{width:26px;height:26px;fill:#fff}

/* ==========================================================================
   Services
   ========================================================================== */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:28px}
.svc{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 32px 34px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.svc::before{
  content:"";position:absolute;left:0;top:0;height:5px;width:100%;
  background:linear-gradient(90deg,var(--blue-700),var(--red-600));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.svc:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc__ico{
  width:68px;height:68px;border-radius:16px;display:grid;place-items:center;margin-bottom:22px;
  background:linear-gradient(135deg,rgba(14,58,134,.10),rgba(42,111,219,.16));
  transition:background .3s var(--ease);
}
.svc__ico svg{width:32px;height:32px;fill:var(--blue-700);transition:fill .3s}
.svc:hover .svc__ico{background:linear-gradient(135deg,var(--blue-700),var(--blue-500))}
.svc:hover .svc__ico svg{fill:#fff}
.svc h3{margin-bottom:10px}
.svc p{font-size:.97rem;margin-bottom:16px}
.svc__link{font-family:var(--head);font-size:1rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.svc__link svg{width:15px;height:15px;fill:currentColor;transition:transform .25s var(--ease)}
.svc:hover .svc__link svg{transform:translateX(5px)}
.svc__num{
  position:absolute;right:20px;top:14px;font-family:var(--head);font-size:4.2rem;font-weight:700;
  color:rgba(8,32,79,.05);line-height:1;pointer-events:none;
}

/* ==========================================================================
   About
   ========================================================================== */
.about{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,6vw,80px);align-items:center}
.about__art{
  position:relative;border-radius:20px;padding:56px 44px;text-align:center;
  background:linear-gradient(150deg,#f7f9fd,#e8eef9);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.about__art img{margin:0 auto 26px;width:min(240px,62%)}
.about__art .tag{font-family:var(--head);text-transform:uppercase;letter-spacing:.2em;color:#7b889b;font-size:.86rem;font-weight:700}
.about__art .yrs{font-family:var(--head);font-size:5.4rem;line-height:.9;color:var(--blue-700);margin:8px 0 2px}
.about__stamp{
  position:absolute;right:-18px;bottom:-18px;background:var(--red-600);color:#fff;border-radius:14px;
  padding:18px 22px;font-family:var(--head);text-transform:uppercase;line-height:1.15;
  box-shadow:0 14px 30px rgba(192,22,28,.35);
}
.about__stamp b{display:block;font-size:1.7rem}
.about__stamp span{font-size:.82rem;letter-spacing:.14em}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:26px 0 32px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-weight:600;color:var(--ink);font-size:.98rem}
.checks svg{width:20px;height:20px;fill:var(--blue-600);flex:none;margin-top:3px}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px;text-align:center}
.stat b{display:block;font-family:var(--head);font-size:clamp(3rem,5.4vw,4.2rem);line-height:1;color:#fff}
.stat b i{font-style:normal;color:var(--red-500)}
.stat > span{display:block;font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-top:10px;color:#8ea4c6}

/* ==========================================================================
   Process
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;counter-reset:s}
.step{position:relative;text-align:center;padding:0 10px}
.step__badge{
  width:92px;height:92px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px dashed rgba(14,58,134,.28);position:relative;
}
.step__badge svg{width:36px;height:36px;fill:var(--blue-700)}
.step__badge::after{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;right:-6px;top:-6px;width:34px;height:34px;border-radius:50%;
  background:var(--red-600);color:#fff;font-family:var(--head);font-size:1rem;font-weight:700;
  display:grid;place-items:center;
}
.step p{font-size:.96rem;margin:0}
.step h3{font-size:1.25rem}

/* ==========================================================================
   Service area + FAQ
   ========================================================================== */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,74px);align-items:start}
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin:0}
.areas li{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:11px 14px;font-weight:600;color:var(--ink);font-size:.94rem;
}
.areas svg{width:15px;height:15px;fill:var(--red-600);flex:none}

.faq__item{background:#fff;border:1px solid var(--line);border-radius:11px;margin-bottom:12px;overflow:hidden}
.faq__q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:19px 54px 19px 22px;
  font-family:var(--head);font-size:1.2rem;font-weight:600;color:var(--ink);position:relative;
  text-transform:uppercase;letter-spacing:.02em;
}
.faq__q::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--blue-700);border-bottom:2.5px solid var(--blue-700);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq__item.is-open .faq__q::after{transform:translateY(-20%) rotate(225deg)}
.faq__item.is-open .faq__q{color:var(--blue-700)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq__a p{padding:0 22px 20px;margin:0;font-size:.97rem}

/* ==========================================================================
   Service area — county cards
   ========================================================================== */
.areas-groups{display:grid;gap:36px}
.area-group__name{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:1.22rem;
  margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--line);
}
.area-group__flag{
  font-family:var(--head);background:var(--red-600);color:#fff;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px;
}
.areas li{transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.areas li:hover{border-color:var(--blue-500);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.areas__note{text-align:center;margin:38px auto 0;max-width:62ch;font-size:1rem}
.areas__note a{font-weight:700;white-space:nowrap}

.faq--narrow{max-width:840px;margin-inline:auto}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta{
  color:#fff;text-align:center;
  background:radial-gradient(900px 400px at 50% 0%,rgba(42,111,219,.45),transparent 70%),
             linear-gradient(120deg,#05122f,#0e3a86);
}
.cta h2{color:#fff;max-width:18ch;margin-inline:auto}
.cta p{max-width:58ch;margin:0 auto 32px;color:#c3d4ef}
.cta__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,64px);align-items:start}
.info{display:grid;gap:16px}
.info__card{
  display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s
}
.info__card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.info__card .ico{
  width:52px;height:52px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue-700),var(--blue-500));
}
.info__card .ico svg{width:22px;height:22px;fill:#fff}
.info__card h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;color:#8592a6;margin:0 0 5px}
.info__card p{margin:0;color:var(--ink);font-weight:600;line-height:1.5}
.info__card a{color:var(--ink);font-weight:600}
.info__card a:hover{color:var(--red-600)}

.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(28px,4vw,42px);box-shadow:var(--shadow-sm)}

/* desktop fallback when the browser can't open a text */
.sms-out{display:none;margin-top:18px;padding:20px;border:1.5px dashed var(--line);border-radius:12px;background:var(--mist)}
.sms-out.is-on{display:block}
.sms-out p{font-size:.94rem;margin:0 0 12px}
.sms-out strong{color:var(--ink)}
.sms-out textarea{
  width:100%;font:inherit;font-size:.92rem;line-height:1.6;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--line);border-radius:9px;background:#fff;resize:vertical;
}
.sms-out__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
/* Calling is the fastest route to a booked job on a desktop, so it gets the
   weight: full-width buttons first, the copy-and-text path underneath. */
.sms-out__row--main{margin-top:0;margin-bottom:16px}
.sms-out__row--main .btn{flex:1 1 220px;justify-content:center}
.sms-out__lead{font-size:1rem !important}
.sms-out__alt{font-size:.88rem !important;color:var(--mute);margin-bottom:8px !important}
.sms-out__row .btn{flex:1 1 auto;font-size:1rem;padding:13px 20px}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{background:var(--navy-900);color:#93a7c6;padding-top:76px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:56px}
.foot h4{
  font-family:var(--head);color:#fff;font-size:1.22rem;text-transform:uppercase;
  letter-spacing:.06em;margin:0 0 22px;position:relative;padding-bottom:14px;
}
.foot h4::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;background:var(--red-600);border-radius:2px}
.foot__logo{background:#fff;border-radius:12px;padding:16px 18px;display:inline-block;margin-bottom:22px}
.foot__logo img{width:230px}
.foot p{font-size:.95rem;line-height:1.75}
.foot li{margin-bottom:11px;font-size:.95rem}
.foot a{color:#93a7c6}
.foot a:hover{color:#fff;padding-left:5px}
.foot li a{display:inline-block;transition:padding-left .2s var(--ease),color .2s}
.foot__social{display:flex;gap:11px;margin-top:20px}
.foot__social a{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;padding:0}
.foot__social a:hover{background:var(--red-600);padding:0}
.foot__social svg{width:16px;height:16px;fill:#fff}
.foot__hours{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed rgba(255,255,255,.12);padding-bottom:9px;margin-bottom:11px;font-size:.93rem}
.foot__hours b{color:#fff;font-weight:600}
.foot__bar{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem}
.foot__bar ul{display:flex;gap:22px;flex-wrap:wrap}

/* ==========================================================================
   Legal / content pages
   ========================================================================== */
.legal-hero{
  background:linear-gradient(135deg,#05122f,#0e3a86);color:#fff;
  padding:clamp(48px,7vw,84px) 0 clamp(40px,6vw,66px);
}
.legal-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:10px}
.legal-hero p{color:#c3d4ef;margin:0;font-size:1.02rem}
.legal{max-width:820px;margin-inline:auto;padding-block:clamp(44px,6vw,72px)}
.legal h2{font-size:1.46rem;margin:38px 0 12px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.12rem;margin:24px 0 8px;text-transform:none;letter-spacing:0}
.legal p,.legal li{font-size:1rem;line-height:1.75}
.legal ul{list-style:disc;padding-left:22px;margin:0 0 1.1em}
.legal li{margin-bottom:7px}
.legal a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.legal__updated{
  display:inline-block;background:var(--mist);border:1px solid var(--line);
  border-radius:999px;padding:6px 15px;font-size:.86rem;font-weight:600;color:#6b7891;margin-bottom:30px;
}
.legal__back{
  display:inline-flex;align-items:center;gap:8px;margin-top:38px;font-family:var(--head);
  font-size:1.05rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

/* ==========================================================================
   Utilities / motion
   ========================================================================== */
/* Only hide content for the entrance animation once JS has proved it is alive
   (see the inline head script). If main.js fails to load or throws, .js comes
   back off and every section is visible — a blank white page is not a thing a
   sales site can afford on a flaky phone connection. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

.to-top{
  position:fixed;right:22px;bottom:22px;width:50px;height:50px;border-radius:50%;border:0;z-index:70;
  background:var(--red-600);cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:all .3s var(--ease);
  box-shadow:0 10px 26px rgba(192,22,28,.4);
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top svg{width:17px;height:17px;fill:#fff}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:48px}
  .about{grid-template-columns:1fr}
  .contact,.two{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:920px){
  .nav__toggle{display:block}
  .nav__cta .nav__phone{display:none}
  .nav__menu{
    position:absolute;left:0;right:0;top:calc(100% + 1px);background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:8px 20px 22px;box-shadow:0 24px 48px rgba(8,32,79,.20);
    border-top:1px solid var(--line);display:none;
    max-height:calc(100dvh - 78px);overflow-y:auto;overscroll-behavior:contain;
  }
  .nav__menu.is-open{display:flex;animation:navDrop .28s var(--ease)}
  @keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nav__menu > li:not(.nav__menu-cta) > a{
    padding:15px 4px;border-bottom:1px solid var(--line);white-space:normal;
    font-size:1.16rem;display:flex;align-items:center;justify-content:space-between;
  }
  .nav__menu > li:not(.nav__menu-cta) > a::after{
    display:block;content:"";position:static;transform:none;width:7px;height:7px;flex:none;
    border:0;border-right:2px solid #c3ccda;border-bottom:2px solid #c3ccda;
    rotate:-45deg;background:none;border-radius:0;
  }
  .nav__menu > li.is-active > a{color:var(--red-600)}
  .nav__menu > li.is-active > a::after{border-color:var(--red-600)}
  .nav__menu-cta{display:block;margin-top:18px}
  .nav__menu-cta a.btn{color:#fff}
  .nav__menu-cta a.btn:hover,.nav__menu-cta a.btn:active{color:#fff}
  .nav__menu-cta a{display:flex;width:100%}
  .nav{position:relative;min-height:78px;grid-template-columns:1fr auto}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding-inline:20px}
  .topbar__in{justify-content:center;min-height:0;padding-block:9px}
  .topbar ul{gap:16px;justify-content:center}
  .topbar ul.topbar__social{display:none}
  .strip__in{flex-direction:column;align-items:flex-start;text-align:left}
  .checks{grid-template-columns:1fr}
  .field--row{grid-template-columns:1fr}
  .about__stamp{right:10px;bottom:-14px}
  .foot__grid{grid-template-columns:1fr}
  .foot__bar{justify-content:center;text-align:center;gap:6px}
  .foot__bar ul{justify-content:center;gap:8px 20px}
}
/* ==========================================================================
   Sticky mobile call bar
   ========================================================================== */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;background:rgba(5,18,47,.94);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12);
}
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--head);font-size:1.08rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:14px 10px;border-radius:10px;
  -webkit-tap-highlight-color:transparent;
}
.callbar svg{width:17px;height:17px;fill:currentColor;flex:none}
.callbar__call{background:var(--red-600);color:#fff;box-shadow:0 6px 18px rgba(192,22,28,.4)}
.callbar__call:hover,.callbar__call:active{background:var(--red-500);color:#fff}
.callbar__book{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
.callbar__book:hover,.callbar__book:active{background:rgba(255,255,255,.2);color:#fff}

@media (max-width:760px){
  .callbar{display:flex}
  /* Space for the bar goes INSIDE the footer, not on <body>. On body it painted
     as a white band under the navy footer — the page looked like it had run out
     before the bar. The footer's own navy now runs to the bottom edge. */
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  /* the bar already anchors the bottom-right — a floating button there
     only overlaps content (it sat on top of the Emergency Line button) */
  .to-top{display:none}

  /* iOS Safari zooms the whole page when a focused control is under 16px, which
     throws the layout sideways mid-form. 16px exactly is the threshold. */
  .field input,.field select,.field textarea{font-size:16px}

  /* thumb-sized targets: 27px links are a miss-tap on a phone */
  .svc__link{min-height:44px;align-items:center}
  .topbar a{display:inline-flex;align-items:center;min-height:40px}
  .foot__grid a,.foot__bar a{display:inline-flex;align-items:center;min-height:40px}
}

/* ==========================================================================
   Small-screen polish
   ========================================================================== */
@media (max-width:760px){
  .topbar__in{padding-block:8px}
  .topbar ul{gap:6px 18px}
  .topbar ul.topbar__social{display:none}
  .topbar a,.topbar span{font-size:.86rem}

  .nav{min-height:72px}
  .brand img{width:186px}

  .hero__in{padding-block:48px 56px;gap:34px}
  .hero__lead{font-size:1.04rem;margin-bottom:26px}
  .hero__actions{display:none}  /* duplicated by the sticky call bar */
  .hero__lead{margin-bottom:22px}
  .hero__badges{gap:9px}
  .hero__badges li{font-size:.85rem;padding:8px 13px}

  .book{padding:26px 22px;border-radius:15px}
  .book h2{font-size:1.45rem}

  .strip__in{gap:18px;padding-block:24px}
  .strip__left{gap:15px}
  .strip__left .ico{width:48px;height:48px}
  .strip__left .ico svg{width:22px;height:22px}
  .strip h3{font-size:1.32rem}
  .strip p{font-size:.92rem}
  .strip .btn{width:100%;font-size:1rem;padding:14px 18px}

  .head{margin-bottom:36px}
  .grid-3{gap:20px}
  .svc{padding:30px 24px 28px}
  .svc__num{font-size:3.4rem;right:16px}

  .about__art{padding:40px 26px}
  .about__art .yrs{font-size:4.2rem}

  .stats{grid-template-columns:1fr 1fr;gap:26px 18px}
  .stat b{font-size:2.9rem}
  .stat > span{font-size:.76rem;letter-spacing:.12em}

  .steps{gap:34px}
  .step__badge{width:78px;height:78px;margin-bottom:18px}
  .step__badge svg{width:30px;height:30px}


  .areas{grid-template-columns:1fr 1fr;gap:9px}
  .areas li{padding:10px 12px;font-size:.9rem}
  .area-group__name{font-size:1.1rem}
  .areas__note{margin-top:28px;font-size:.96rem}

  .faq__q{font-size:1.08rem;padding:16px 46px 16px 18px}
  .faq__a p{padding:0 18px 18px}

  .cta__actions .btn{flex:1 1 100%}

  .info__card{padding:20px}
  .panel{border-radius:15px}

  .foot{padding-top:56px}
  .foot__grid{padding-bottom:40px;gap:34px}
  .foot__logo img{width:200px}
}

@media (max-width:380px){
  .hero__badges li{font-size:.8rem;padding:7px 11px}
  .stats{gap:22px 14px}
  .callbar a{font-size:.98rem;padding:13px 8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}