/*
  Purify Pro Restoration - site styles
  To change brand colors, edit the variables in section 1.
  Sections are in order; rules later in the file win over earlier ones.
*/

/* ===== 1. BASE: color tokens, reset, typography ===== */

:root {
  --bg:#fff;
  --alt:#eef4fc;
  --ink:#0a1f44;
  --mute:#4a5f82;
  --brand:#0a4aa8;
  --deep:#062557;
  --accent:#00a6f0;
  --line:#d6e1f2;
  --on:#fff;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

html {
  color-scheme:only light;
  scroll-padding-top:env(safe-area-inset-top,0px);
  scroll-behavior:smooth;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 Manrope,system-ui,sans-serif;
}

a {
  color:inherit;
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* ===== 2. LAYOUT HELPERS: page container, sections, headings ===== */

.w {
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

section {
  padding:64px 0;
}

section.alt {
  background:var(--alt);
}

h2.t {
  font-size:clamp(26px,4vw,36px);
  margin:0 0 10px;
  line-height:1.15;
}

.lead {
  color:var(--mute);
  max-width:64ch;
  margin:0 0 32px;
}

/* ===== 3. BUTTONS ===== */

.btn {
  display:inline-block;
  background:var(--accent);
  color:#04204a;
  font-weight:800;
  padding:12px 22px;
  border-radius:999px;
  text-decoration:none;
  border:0;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.btn.ghost {
  background:transparent;
  color:#fff;
  border:2px solid #fff;
}

.btn {
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}

.btn.navy {
  background:#0a4aa8;
  color:#fff;
}

/* ===== 4. HEADER: logo, menu, phone number ===== */

header {
  position:sticky;
  top:env(safe-area-inset-top,0px);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  z-index:5;
}

header .w {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:80px;
}

.logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:22px;
  text-decoration:none;
  color:var(--brand);
}

nav {
  display:flex;
  gap:22px;
  font-weight:600;
  font-size:15px;
}

nav a {
  text-decoration:none;
}

nav a:hover {
  color:var(--brand);
}

.hcall {
  display:flex;
  align-items:center;
  gap:14px;
}

.hcall .tel {
  font-weight:800;
  text-decoration:none;
}

nav a {
  border-bottom:3px solid transparent;
  padding:4px 0;
}

nav a.act {
  color:var(--brand);
  border-bottom-color:var(--accent);
}

.logo img {
  height:62px;
  width:auto;
  display:block;
}

nav {
  overflow-x:auto;
}

nav a {
  white-space:nowrap;
}

/* ===== 5. PAGES (tabs): show one page at a time with a fade-in ===== */

.view {
  display:none;
}

.view.on {
  display:block;
  animation:vin .45s ease;
}

/* ===== 6. 24/7 EMERGENCY STRIP (top of home page) ===== */

.alert247 {
  background:var(--alt);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}

.alert247 .w {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px 16px;
  flex-wrap:wrap;
  padding-top:10px;
  padding-bottom:10px;
  text-align:center;
}

.alert247 b {
  font-size:22px;
  line-height:1;
  font-weight:800;
  color:var(--brand);
}

.alert247 p {
  margin:0;
  font-weight:600;
  font-size:15px;
  color:var(--mute);
}

.alert247 .btn {
  padding:7px 18px;
  font-size:14px;
}

/* ===== 7. HOME HERO: headline, house background, "call right away" box ===== */

.hero {
  background:linear-gradient(135deg,#062557,#0a5fc0);
  color:#fff;
  padding:72px 0 84px;
}

.hero .w {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:center;
}

.badge {
  display:inline-block;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4);
  padding:6px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  margin-bottom:16px;
}

.hero h1 {
  font-size:clamp(34px,6vw,58px);
  line-height:1.08;
  margin:0 0 16px;
  font-weight:800;
}

.hero p {
  font-size:18px;
  max-width:52ch;
  margin:0 0 26px;
  opacity:.95;
}

.hero .row {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.panel {
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  border-radius:18px;
  padding:24px;
}

.panel h2 {
  margin:0 0 10px;
  font-size:20px;
}

.panel ul {
  list-style:none;
  margin:0;
  padding:0;
}

.panel li {
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.2);
  display:flex;
  gap:10px;
}

.panel li:last-child {
  border:0;
}

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

.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:url("assets/hero-house.svg") right -20px bottom/auto 112% no-repeat;
  pointer-events:none;
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,37,87,.9) 0%,rgba(6,37,87,.6) 45%,rgba(6,37,87,.1) 100%);
  pointer-events:none;
}

.hero .w {
  position:relative;
  z-index:1;
}

.panel {
  background:rgba(6,37,87,.55);
  backdrop-filter:blur(4px);
}

/* ===== 8. PAGE BANNERS (top of Residential, Commercial, About, Contact) ===== */

.ph {
  background:linear-gradient(135deg,#062557,#0a5fc0);
  color:#fff;
  padding:56px 0;
}

.ph h1 {
  font-size:clamp(30px,5vw,46px);
  margin:0 0 10px;
  line-height:1.1;
}

.ph p {
  margin:0;
  max-width:56ch;
  font-size:18px;
}

.ph .badge {
  margin-bottom:14px;
}

/* ===== 9. SERVICES DROPDOWN (damage types on the home page) ===== */

.acc {
  max-width:820px;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:var(--bg);
}

.sv {
  padding:0;
  border-bottom:1px solid var(--line);
}

.sv:last-child {
  border-bottom:0;
}

.sv summary {
  list-style:none;
  cursor:pointer;
  padding:22px 26px;
  font-size:20px;
  font-weight:800;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-left:6px solid transparent;
}

.sv summary::-webkit-details-marker {
  display:none;
}

.sv summary:after {
  content:"+";
  font-size:28px;
  line-height:1;
  color:var(--brand);
  font-weight:600;
  transition:transform .35s ease;
}

.sv[open] summary {
  background:var(--alt);
  border-left-color:var(--accent);
  color:var(--brand);
}

.sv.is-open summary:after {
  transform:rotate(135deg);
}

.sv summary {
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}

.sb {
  padding:8px 26px 28px 32px;
  background:var(--alt);
  overflow:hidden;
}

.sb p {
  color:var(--mute);
  margin:0 0 14px;
  max-width:56ch;
}

.sb ul {
  margin:0 0 22px;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.sb li {
  padding-left:30px;
  position:relative;
}

.sb li:before {
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#0a5fc0;
}

.sb li:after {
  content:"";
  position:absolute;
  left:5px;
  top:9px;
  width:4px;
  height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ===== 10. SHARED COMPONENTS: cards, steps, chips, checklist, team, story text ===== */

.story {
  max-width:760px;
}

.note {
  font-style:italic;
  font-size:14px;
}

.card .ic {
  font-weight:800;
  font-size:20px;
}

.team .av {
  width:72px;
  height:72px;
  border-radius:50%;
  background:#0a5fc0;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:24px;
  margin-bottom:12px;
}

.chk {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}

.chk li {
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 16px 16px 48px;
  position:relative;
  font-weight:600;
}

.chk li:before {
  content:"\2713";
  position:absolute;
  left:16px;
  top:14px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#0a5fc0;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:13px;
}

.steps {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
  counter-reset:st;
}

.steps>div {
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  counter-increment:st;
}

.steps>div:before {
  content:counter(st);
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--accent);
  color:#04204a;
  font-weight:800;
  margin-bottom:12px;
}

.steps h3 {
  margin:0 0 6px;
}

.steps p {
  margin:0;
  color:var(--mute);
  font-size:15px;
}

.chips {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chips span {
  padding:10px 18px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--line);
  font-weight:700;
}

.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;
}

.card {
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
}

.card .ic {
  width:48px;
  height:48px;
  border-radius:12px;
  background:#0a5fc0;
  color:#fff;
  display:grid;
  place-items:center;
  margin-bottom:14px;
}

.card h3 {
  margin:0 0 6px;
  font-size:19px;
}

.card p {
  margin:0 0 12px;
  color:var(--mute);
  font-size:15px;
}

/* ===== 11. HOME PAGE EXTRAS: why choose us, towns, reviews, FAQ ===== */

.why>div {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 28px;
}

.why>div>.t,.why>div>.lead {
  grid-column:1/-1;
}

.why {
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:start;
}

.why .item {
  margin-bottom:22px;
}

.why h3 {
  margin:0 0 4px;
}

.why p {
  margin:0;
  color:var(--mute);
}

.towns {
  columns:3 150px;
  gap:18px;
  padding:0;
  list-style:none;
  margin:0;
  color:var(--mute);
  font-size:15px;
}

.towns li {
  padding:3px 0;
}

.rev {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}

.rev blockquote {
  margin:0;
  background:var(--bg);
  border-left:5px solid var(--accent);
  border-radius:12px;
  padding:22px;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.rev .st {
  color:var(--accent);
  letter-spacing:2px;
}

.rev cite {
  display:block;
  margin-top:10px;
  font-style:normal;
  font-weight:800;
}

details {
  border-bottom:1px solid var(--line);
  padding:16px 0;
}

summary {
  cursor:pointer;
  font-weight:800;
  font-size:18px;
}

details p {
  color:var(--mute);
  margin:10px 0 0;
  max-width:70ch;
}

/* ===== 12. CONTACT PAGE: form, calendar, sidebar, map ===== */

.cg {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:32px;
  align-items:start;
}

.cform {
  max-width:none;
  margin:0;
}

.r2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.ok2 {
  display:none;
  background:var(--alt);
  border:1px solid var(--line);
  border-left:6px solid var(--accent);
  padding:20px;
  border-radius:12px;
  font-weight:600;
}

aside .card {
  margin-bottom:16px;
}

aside h3 {
  margin:0 0 8px;
}

aside .card p {
  margin:0 0 12px;
  color:var(--mute);
}

.map {
  height:180px;
  border:2px dashed var(--line);
  border-radius:16px;
  display:grid;
  place-items:center;
  color:var(--mute);
  font-weight:600;
}

.cal {
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  background:var(--bg);
  max-width:380px;
}

.ch {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.ch b {
  font-size:17px;
}

.ch button {
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--alt);
  color:var(--ink);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:background .2s,color .2s;
}

.ch button:hover:not(:disabled) {
  background:#0a5fc0;
  color:#fff;
}

.ch button:disabled {
  opacity:.35;
  cursor:not-allowed;
}

.cw,.cgd {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  text-align:center;
}

.cw span {
  font-size:12px;
  font-weight:800;
  color:var(--mute);
  padding:4px 0;
}

.cgd button {
  aspect-ratio:1;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}

.cgd button:hover:not(:disabled) {
  background:color-mix(in srgb,var(--brand) 22%,var(--bg));
  transform:scale(1.08);
}

.cgd button:disabled {
  opacity:.3;
  cursor:not-allowed;
}

.cgd button.today {
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

.cgd button.sel {
  background:#0a5fc0;
  color:#fff;
}

.csel {
  margin:12px 0 0;
  font-weight:700;
  color:var(--brand);
  font-size:14px;
}

select.flash {
  animation:flash 1.6s ease;
}

form {
  display:grid;
  gap:12px;
  max-width:560px;
  margin:0 auto;
  text-align:left;
}

label {
  font-weight:600;
  font-size:14px;
}

input,select,textarea {
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--line);
  font:inherit;
  background:#fff;
  color:#0d2a35;
}

/* ===== 13. CALL-TO-ACTION BANNERS (bottom of pages) ===== */

.cta {
  background:linear-gradient(135deg,#0a4aa8,#0a66c8);
  color:#fff;
  text-align:center;
  padding:56px 0;
}

.cta h2 {
  font-size:clamp(26px,4vw,38px);
  margin:0 0 8px;
}

.cta p {
  margin:0 0 22px;
}

.cta .btn.ghost {
  margin-left: 8px;
}

/* ===== 14. FOOTER ===== */

footer {
  background:var(--deep);
  color:#c4d8df;
  padding:44px 0 28px;
  font-size:14px;
}

footer .g {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:28px;
}

footer h4 {
  color:#fff;
  margin:0 0 8px;
}

footer a {
  display:block;
  text-decoration:none;
  padding:3px 0;
}

footer small {
  display:block;
  margin-top:28px;
  opacity:.7;
}

/* ===== 15. ANIMATIONS ===== */

@keyframes vin {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:none; }
}

@keyframes flash {
  0%,100% { box-shadow:0 0 0 0 rgba(0,166,240,0); }
  30% { box-shadow:0 0 0 5px rgba(0,166,240,.45); }
}

/* ===== 16. HOVER EFFECTS (mouse devices only) ===== */

@media(hover:hover) {
  .btn:hover {
    background:#4cc9ff;
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,166,240,.45);
  }

  .btn.ghost:hover {
    background:#fff;
    color:#062557;
    box-shadow:none;
  }

  .sv summary:hover {
    background:color-mix(in srgb,var(--brand) 20%,var(--bg));
    border-left-color:var(--accent);
    color:var(--brand);
  }

  .sv summary:hover:after {
    transform:scale(1.25);
  }

  .sv.is-open summary:hover:after {
    transform:rotate(135deg) scale(1.25);
  }

  .sv.is-open summary:hover {
    background:color-mix(in srgb,var(--brand) 28%,var(--bg));
  }

  .btn.navy:hover {
    background:#0a4aa8;
    color:#fff;
    box-shadow:0 8px 18px rgba(6,37,87,.4);
  }
}

/* ===== 17. RESPONSIVE: phones and small screens ===== */

@media(max-width:820px) {
  .hcall .tel {
    display:none;
  }

  header .w {
    flex-wrap:wrap;
    height:auto;
    padding-top:10px;
    padding-bottom:10px;
  }

  nav {
    order:3;
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    gap:4px 16px;
    font-size:14px;
    overflow-x:visible;
  }

  .hero .w {
    grid-template-columns:1fr;
  }

  .hero {
    padding:48px 0 56px;
  }

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

  .logo img {
    height:52px;
  }

  .why>div {
    grid-template-columns:1fr;
  }

  .hero::after {
    background:rgba(6,37,87,.72);
  }

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

/* ===== 18. REDUCED MOTION (accessibility: no animation if the visitor asks) ===== */

@media(prefers-reduced-motion:reduce) {
  .view.on {
    animation:none;
  }
}

/* ===== 19. RESPONSIVE: footer on small screens ===== */

@media(max-width:700px) {
  footer .g {
    grid-template-columns:1fr;
  }
}