/* -----------------------------------------------------------------
   H2O SYSTEMS — redesign build, 28 Sep 2026
   Structure per Alex's 25 Sep brief: landing + What We Do / Contact / Gallery.
   Self-hosted fonts (Archivo Cond 700 + Public Sans), no CDN, no build step —
   ships to plain cPanel hosting exactly like the holding page did.
   ----------------------------------------------------------------- */

@font-face{font-family:"Archivo Cond";src:url("../fonts/ArchivoCond-700.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/PublicSans-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/PublicSans-600.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#111111;
  --paper:#ffffff;
  --grey:#d7d7d7;
  --blue:#1132fa;
  --sky:#9ED4EE;
  --hair:rgba(215,215,215,.26);
  --dim:#9a9ca1;
  --wa:#25D366;
  --pad:clamp(20px,4.5vw,64px);
  --disp:"Archivo Cond","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id]{scroll-margin-top:64px}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1380px;margin:0 auto;padding-inline:var(--pad)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* --- header, shared across every page ---------------------------- */
.top{
  border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:10;
  background:rgba(17,17,17,.86);backdrop-filter:blur(16px) saturate(160%);
}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:10px;flex-wrap:nowrap}
.mark{display:flex;align-items:center;text-decoration:none;line-height:1;flex:none}
.mark img{height:40px;width:auto}
.top__in nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.top__in nav a{font-family:var(--body);font-weight:600;font-size:.6875rem;letter-spacing:.15em;
  text-transform:uppercase;text-decoration:none;color:var(--grey)}
.top__in nav a:hover,.top__in nav a[aria-current="page"]{color:#fff}
.top__in nav a.call{
  background:var(--wa);color:#fff;padding:9px 15px;letter-spacing:.12em;
  display:inline-flex;align-items:center;gap:8px;border-radius:2px;
}
.top__in nav a.call svg{width:14px;height:14px;flex:none;fill:currentColor}
.top__in nav a.call:hover{filter:brightness(1.08)}

.burger{
  display:none;margin-left:auto;flex:none;
  width:40px;height:40px;padding:10px 9px;
  background:transparent;border:1px solid var(--hair);cursor:pointer;
  flex-direction:column;justify-content:space-between;
}
.burger span{display:block;height:2px;width:100%;background:#fff;transition:transform 180ms ease,opacity 140ms ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.menu{border-top:1px solid var(--hair);background:rgba(17,17,17,.98);backdrop-filter:blur(16px)}
.menu__in{display:flex;flex-direction:column;padding-block:8px 18px}
.menu__in a{
  padding-block:15px;border-bottom:1px solid var(--hair);text-decoration:none;
  font-family:var(--body);font-weight:600;font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);
}
.menu__in a[aria-current="page"]{color:#fff}
.menu__in a:last-child{border-bottom:0}
.menu__wa{
  display:flex!important;align-items:center;gap:10px;margin-top:14px;
  background:var(--wa);color:#fff!important;justify-content:center;
  border-bottom:0!important;padding-block:15px!important;border-radius:2px;
}
.menu__wa svg{width:16px;height:16px;flex:none;fill:#fff}
.menu__tel{
  text-align:center;font-family:var(--disp)!important;font-size:1.4rem!important;
  letter-spacing:.02em!important;color:#fff!important;padding-block:14px!important;
}
@media (max-width:720px){
  .top__in nav{display:none}
  .burger{display:flex}
}

/* --- footer, shared -------------------------------------------- */
footer{border-top:1px solid var(--hair);padding-block:30px;margin-top:60px}
.footer__in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer .kicker{font-family:var(--body);font-weight:600;font-size:1.375rem;letter-spacing:.14em;
  color:var(--dim);white-space:nowrap}
@media (max-width:480px){
  .footer__in{flex-direction:column;align-items:flex-start}
  footer .kicker{font-size:.8125rem;letter-spacing:.03em}
}
footer a{color:var(--dim);text-decoration:underline}
footer a:hover{color:#fff}

/* --- generic buttons ---------------------------------------------- */
.btn{
  font-family:var(--body);font-weight:600;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;border-radius:2px;transition:transform .1s ease,filter .1s ease;
}
.btn:active{transform:scale(.97)}
.btn svg{width:15px;height:15px;flex:none;fill:currentColor}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{filter:brightness(1.08)}
.btn--paper{background:var(--paper);color:var(--ink)}
.btn--paper:hover{filter:brightness(.94)}
.btn--outline{background:transparent;color:#fff;border:1px solid var(--hair)}
.btn--outline:hover{border-color:#fff}
.btn--fb{background:#1877F2;color:#fff}
.btn--fb:hover{filter:brightness(1.08)}
.btn--google{background:var(--paper);color:var(--ink)}
.btn--google:hover{filter:brightness(.94)}
.btn--google svg{width:18px;height:18px}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{filter:brightness(1.1)}
.btn--sent,.btn--sent:hover{background:var(--dim);color:#111;cursor:default;filter:none}

/* --- LANDING page: fit-to-screen hero --------------------------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;
  position:relative;isolation:isolate;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.62) 0%,rgba(8,8,10,.74) 45%,rgba(8,8,10,.92) 100%);
}
.hero__body{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(28px,6vh,56px);gap:clamp(20px,3vh,28px)}
/* Logo + badge side by side, own natural sizes — allowed to run wider than
   the paragraph beneath (Jasper's call, 28 Sep: "doesn't matter if they go
   further than inline with the left and right of the paragraph"). */
.hero__toprow{display:flex;align-items:center;flex-wrap:wrap;gap:20px}
.hero__lockup{width:min(598px,67.6vw)}
.hero__jojo{
  width:clamp(90px,11vw,150px);height:auto;
  background:#fff;border-radius:8px;padding:8px;object-fit:contain;
}
.hero__copy{max-width:46ch;font-size:clamp(1.21875rem,3.38vw,1.38125rem);line-height:1.55;color:#fff}
.hero__copy .gap{display:block;height:.75em}
.hero__copy strong{display:block;color:#fff;margin-top:.5em}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px}
.hero__acts .btn{padding:15px 24px;font-size:.75rem;min-width:160px;justify-content:center}
.hero__badgerow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero__phone{font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,4vw,1.9rem);letter-spacing:.01em}
.hero__phone a{text-decoration:none}
.hero__insure{font-size:.8125rem;color:var(--dim)}

/* Alex asked the landing hero fit one screen with no scroll, if achievable —
   this is a phone-only tightening pass so the exact welcome copy still reads
   comfortably; desktop already fits at the more generous sizing above. */
@media (max-width:480px){
  .hero__body{padding-block:clamp(16px,3.5vh,28px);gap:clamp(12px,1.8vh,18px)}
  .hero__lockup{width:min(442px,57.2vw)}
  .hero__jojo{width:clamp(64px,18vw,90px);padding:6px}
  .hero__copy{font-size:clamp(1.05625rem,3.9vw,1.1375rem);line-height:1.42}
  .hero__copy .gap{height:.5em}
  .hero__acts{flex-direction:column}
  .hero__acts .btn{padding:11px 18px;font-size:.6875rem;width:100%}
  .hero__phone{font-size:1.25rem}
  .hero__insure{display:none}
}

/* --- inner-page header band (What We Do / Contact / Gallery) ---- */
.pagehead{padding-block:clamp(36px,7vw,64px) clamp(20px,4vw,32px)}
.pagehead h1{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.4rem,8vw,4.4rem);line-height:.95;letter-spacing:-.01em;margin:0;
}
.pagehead h1 em{font-style:normal;color:var(--sky)}
.pagehead p{max-width:50ch;color:var(--grey);margin:14px 0 0;font-size:1.0625rem}

/* --- What We Do: large-type service list ------------------------ */
.services{padding-block:clamp(10px,3vw,28px) clamp(50px,8vw,90px)}
.services__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.services__list li{
  border-bottom:1px solid var(--hair);
  padding-block:clamp(20px,4vw,34px);
  display:flex;align-items:baseline;gap:clamp(14px,3vw,28px);
}
.services__list .num{
  font-family:var(--disp);font-weight:700;color:var(--sky);
  font-size:clamp(1.1rem,2.6vw,1.5rem);flex:none;width:2.2ch;
}
.services__list .txt{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,5.4vw,3rem);line-height:1.04;letter-spacing:-.01em;
}
.services__note{
  margin-top:34px;padding:0;list-style:none;max-width:56ch;
  /* matches .hero__copy exactly: same size, same line-height, same white */
  color:#fff;font-size:clamp(1.21875rem,3.38vw,1.38125rem);line-height:1.55;
}
.services__note li{position:relative;padding-left:1.3em;margin-top:.5em}
.services__note li:first-child{margin-top:0}
.services__note li::before{content:"\2022";position:absolute;left:0;color:#fff}
@media (max-width:480px){
  .services__note{font-size:clamp(1.05625rem,3.9vw,1.1375rem);line-height:1.42}
}

/* --- Contact page ------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);
  padding-block:clamp(10px,3vw,20px) clamp(60px,8vw,100px)}
@media (max-width:840px){.contact-grid{grid-template-columns:1fr}}
.contact-direct{display:flex;flex-direction:column;gap:22px}
.contact-card{border:1px solid var(--hair);padding:22px;border-radius:2px}
.contact-card .kicker{font-family:var(--body);font-weight:600;font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.contact-card .big{font-family:var(--disp);font-weight:700;font-size:1.5rem}
.contact-card .big a{text-decoration:none}
.contact-card .big a:hover{color:var(--sky)}
.service-area-text{letter-spacing:.03em;word-spacing:.15em}
.insure-note{font-size:1rem;color:var(--grey);padding-top:16px;margin-top:16px;position:relative}
.insure-note::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:56px;height:1px;background:var(--hair)}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.field input,.field textarea{
  background:#1a1a1a;border:1px solid var(--hair);color:#fff;
  font-family:var(--body);font-size:.9375rem;padding:13px 14px;border-radius:2px;
  width:100%;resize:vertical;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky)}
.field textarea{min-height:120px}
.form-note{font-size:.8125rem;color:var(--dim);margin-top:10px}
.form-status{margin-top:14px;padding:12px 14px;border-radius:2px;font-size:.9375rem;display:none}
.form-status.ok{display:block;background:rgba(37,211,102,.14);border:1px solid var(--wa);color:#d6ffe6}
.form-status.err{display:block;background:rgba(255,90,90,.12);border:1px solid #ff5a5a;color:#ffd7d7}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Gallery ------------------------------------------------------- */
.gallery{padding-block:clamp(10px,3vw,20px) clamp(60px,8vw,100px)}
.gallery__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;
}
.gallery__grid figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#1a1a1a;border-radius:2px}
.gallery__grid img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.gallery__grid a:hover img{transform:scale(1.3)}
.gallery__count{color:var(--dim);font-size:.9375rem;margin-bottom:18px}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(8,8,10,.94);display:none;align-items:center;justify-content:center;
  z-index:50;padding:24px}
.lb.is-open{display:flex}
.lb img{max-width:min(1100px,92vw);max-height:88vh;object-fit:contain}
.lb__close{position:absolute;top:18px;right:18px;width:44px;height:44px;border:1px solid var(--hair);
  background:rgba(17,17,17,.7);color:#fff;font-size:22px;line-height:1;cursor:pointer;border-radius:2px}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid var(--hair);
  background:rgba(17,17,17,.7);color:#fff;font-size:22px;cursor:pointer;border-radius:2px}
.lb__prev{left:16px}.lb__next{right:16px}