/* ============================================================
   Northern Arizona Pools & Spas — site styles
   ============================================================ */

:root{
  /* Brand */
  --navy-900:#06152e;
  --navy-800:#0a1f3e;
  --navy-700:#0e2a52;
  --navy-600:#143a72;
  --blue-500:#1e7fff;
  --blue-400:#3b9bff;
  --blue-300:#7dd3fc;
  --silver:#e6edf5;
  --white:#ffffff;
  --paper:#f6f8fb;
  --ink:#0d1b2e;
  --ink-soft:#3a4a63;
  --ink-mute:#6c7a90;
  --line:#dbe3ef;
  --pine:#1f4a3a;
  --sand:#e8c97b;

  /* Type */
  --display:"Oswald", "Arial Narrow", system-ui, sans-serif;
  --body:"Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --maxw:1200px;
  --gutter:clamp(20px, 4vw, 48px);
  --radius:14px;
  --radius-lg:22px;
  --shadow-soft:0 12px 40px -16px rgba(10,31,62,.25);
  --shadow-card:0 30px 60px -28px rgba(10,31,62,.35);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
a:focus-visible, button:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;}

/* Type */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.05;
  text-wrap:balance;
  margin:0 0 .5em;
}
h1{font-size:clamp(44px, 7vw, 92px); letter-spacing:-.005em;}
h2{font-size:clamp(34px, 4.6vw, 60px);}
h3{font-size:clamp(22px, 2.4vw, 30px); letter-spacing:.02em;}
h4{font-size:18px; letter-spacing:.04em; text-transform:uppercase;}
p{margin:0 0 1em; text-wrap:pretty;}
.eyebrow{
  font-family:var(--display);
  font-weight:500;
  font-size:14px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--blue-500);
  display:inline-flex;
  align-items:center;
  gap:.8em;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:34px;height:2px;background:var(--blue-500);display:inline-block;
}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}
section{padding:clamp(64px, 9vw, 120px) 0;}
.dark{background:var(--navy-900);color:var(--silver);}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--white);}
.dark .eyebrow{color:var(--blue-300);}
.dark .eyebrow::before{background:var(--blue-300);}
.muted{color:var(--ink-mute);}
.dark .muted{color:#9fb1cc;}

/* ============================================================
   Header / nav
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(6,21,46,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:88px;
  gap:24px;
}
.brand{
  display:flex;align-items:center;gap:14px;
  color:var(--white);
  flex-shrink:0;
}
.brand img{height:62px;width:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));}
.brand-text{display:none;}
@media (min-width: 1080px){
  .brand-text{display:flex;flex-direction:column;line-height:1;white-space:nowrap;}
  .brand-text .b1{font-family:var(--display); font-size:18px; letter-spacing:.06em; color:var(--white);white-space:nowrap;}
  .brand-text .b2{font-family:var(--display); font-size:13px; letter-spacing:.24em; color:var(--blue-300); margin-top:4px;white-space:nowrap;}
}
.nav-links{
  display:flex;align-items:center;gap:6px;
}
.nav-links a{
  font-family:var(--display);
  font-size:14px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#cfd8e6;
  padding:10px 16px;
  border-radius:999px;
  transition:.18s color, .18s background;
}
.nav-links a:hover{color:var(--white); background:rgba(255,255,255,.06);}
.nav-links a.is-active{color:var(--white); background:rgba(30,127,255,.18);}
.nav-cta{
  display:none;
  font-family:var(--display);
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--white);
  padding:12px 20px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--blue-500), #0e63d6);
  box-shadow:0 8px 24px -8px rgba(30,127,255,.7);
  transition:.18s transform;
  white-space:nowrap;
  flex-shrink:0;
}
.nav-cta:hover{transform:translateY(-1px);}
@media (min-width: 900px){ .nav-cta{display:inline-flex; align-items:center; gap:8px;} }
.nav-cta svg{width:14px;height:14px;}
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px;height:42px;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;color:var(--white);
  border-radius:10px;cursor:pointer;
}
@media (min-width: 760px){ .menu-toggle{display:none;} }
@media (max-width: 759px){
  .nav-links{
    position:absolute;
    inset:88px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    padding:14px var(--gutter) 22px;
    background:var(--navy-900);
    border-bottom:1px solid rgba(255,255,255,.08);
    display:none;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{padding:14px 14px; border-radius:10px;}
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);
  font-size:15px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:18px 28px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:.18s transform, .18s box-shadow, .18s background, .18s color;
  white-space:nowrap;
  text-decoration:none;
}
.btn svg{width:14px;height:14px;}
.btn-primary{
  background:linear-gradient(180deg, var(--blue-500), #0e63d6);
  color:#fff;
  box-shadow:0 14px 36px -14px rgba(30,127,255,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 18px 40px -14px rgba(30,127,255,.85);}
.btn-ghost{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.35);
}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.btn-dark{
  background:var(--navy-800);
  color:#fff;
}
.btn-dark:hover{background:var(--navy-700);}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:min(86vh, 760px);
  display:flex;
  align-items:flex-end;
  color:var(--white);
  isolation:isolate;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;
  background-position:center 30%;
}
.hero::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,21,46,.35) 0%, rgba(6,21,46,.15) 30%, rgba(6,21,46,.85) 80%, rgba(6,21,46,1) 100%),
    linear-gradient(90deg, rgba(6,21,46,.55) 0%, rgba(6,21,46,0) 60%);
}
.hero .wrap{padding-top:80px; padding-bottom:80px; width:100%;}
.hero .eyebrow{color:var(--blue-300);}
.hero .eyebrow::before{background:var(--blue-300);}
.hero h1{
  font-size:clamp(48px, 8.5vw, 116px);
  line-height:.95;
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-shadow:0 14px 40px rgba(0,0,0,.45);
  max-width:14ch;
}
.hero h1 .accent{
  color:var(--blue-300);
  display:block;
}
.hero-sub{
  font-size:clamp(17px, 1.4vw, 20px);
  max-width:48ch;
  color:#dce6f5;
  margin-top:22px;
}
.hero-actions{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;
}

/* Hero meta strip */
.hero-meta{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:24px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-meta div .k{
  font-family:var(--display);font-size:42px;line-height:1;color:#fff;
}
.hero-meta div .v{
  margin-top:8px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#9fb1cc;
}

/* ============================================================
   Section heads
   ============================================================ */
.section-head{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:48px;
}
@media (min-width: 900px){
  .section-head{grid-template-columns:1fr 1fr; align-items:end; gap:48px;}
  .section-head .lede{justify-self:end; max-width:46ch; font-size:18px;}
}
.section-head h2{margin:0;}

/* ============================================================
   Service cards
   ============================================================ */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:18px;
}
.svc{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px 26px;
  transition:.2s transform, .2s box-shadow, .2s border-color;
  position:relative;
  overflow:hidden;
}
.svc:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
  border-color:#c7d3e7;
}
.svc .ico{
  width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(180deg, #e8f1ff, #d6e6ff);
  color:var(--blue-500);
  margin-bottom:18px;
}
.svc .ico svg{width:24px;height:24px;}
.svc h3{font-size:22px;letter-spacing:.02em; text-transform:uppercase; margin-bottom:8px;}
.svc p{color:var(--ink-soft);margin:0;}
.dark .svc{
  background:#0e2a52;
  border-color:rgba(255,255,255,.08);
  color:var(--silver);
}
.dark .svc h3{color:#fff;}
.dark .svc p{color:#aec0db;}
.dark .svc .ico{background:rgba(30,127,255,.18); color:var(--blue-300);}

/* Spotlight (two-col split) */
.split{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
}
@media (min-width: 900px){
  .split{grid-template-columns:1.1fr 1fr; gap:64px;}
  .split.flip{grid-template-columns:1fr 1.1fr;}
  .split.flip .split-media{order:-1;}
}
.split-media{
  position:relative;
  aspect-ratio: 4 / 5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  background:#11244a;
}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.split-media .badge{
  position:absolute;top:18px;left:18px;
  background:rgba(6,21,46,.78);
  backdrop-filter:blur(6px);
  color:#fff;
  font-family:var(--display);
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
}

/* Bullets */
.bullets{list-style:none;padding:0;margin:24px 0 32px;display:grid;gap:14px;}
.bullets li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:flex-start;
  padding:14px 16px;
  background:rgba(30,127,255,.06);
  border-radius:12px;
  border-left:3px solid var(--blue-500);
  font-size:15px;
}
.dark .bullets li{background:rgba(125,211,252,.07); border-left-color:var(--blue-300);}
.bullets li::before{
  content:"";
  width:18px;height:18px;border-radius:50%;
  background:var(--blue-500);
  margin-top:3px;
  position:relative;
  flex-shrink:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:13px;
}

/* ============================================================
   Service areas map / list
   ============================================================ */
.areas{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  align-items:center;
}
@media (min-width: 900px){
  .areas{grid-template-columns:1fr 1.2fr; gap:64px;}
}
.area-list{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:8px 18px;
  list-style:none;padding:0;margin:0;
}
.area-list li{
  display:flex;align-items:center;gap:12px;
  font-family:var(--display); font-size:20px; letter-spacing:.04em;
  text-transform:uppercase;
  padding:14px 4px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.area-list li svg{flex-shrink:0;width:16px;height:16px;color:var(--blue-300);}
.dark .area-list li{color:#fff;}
.map-card{
  position:relative;aspect-ratio: 4/3; border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  background:#0a1f3e;
}
.map-card svg{width:100%;height:100%;display:block;}

/* ============================================================
   Brands strip
   ============================================================ */
.brands{
  display:flex;flex-wrap:wrap;gap:18px 36px;
  align-items:center;
  padding:28px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.brands .lbl{
  font-family:var(--display); font-size:13px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-mute);
}
.brands .name{
  font-family:var(--display);
  font-size:clamp(22px, 2.4vw, 32px);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.6;
}
.dark .brands{border-color:rgba(255,255,255,.1);}
.dark .brands .lbl{color:#9fb1cc;}
.dark .brands .name{color:#fff; opacity:.65;}

/* ============================================================
   Banner CTA
   ============================================================ */
.banner{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding:clamp(40px, 6vw, 80px);
  color:var(--white);
  isolation:isolate;
}
.banner-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;}
.banner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg, rgba(6,21,46,.92) 0%, rgba(6,21,46,.75) 55%, rgba(6,21,46,.35) 100%);
}
.banner h2{max-width:18ch;}
.banner p{max-width:48ch;color:#cfdaee;}
.banner .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--navy-900);
  color:#9fb1cc;
  padding:72px 0 36px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
@media (min-width: 760px){
  .foot-grid{grid-template-columns: 1.4fr 1fr 1fr 1fr;}
}
.foot-grid h4{color:#fff;margin-bottom:18px;}
.foot-grid a{display:block;padding:6px 0;color:#bccada;}
.foot-grid a:hover{color:#fff;}
.foot-brand p{max-width:34ch;font-size:14px;}
.foot-brand img{height:70px;width:auto;margin-bottom:18px;}
.foot-bottom{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;
}

/* ============================================================
   Forms
   ============================================================ */
.form{
  display:grid;gap:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(28px, 4vw, 44px);
  box-shadow:var(--shadow-card);
}
.field{display:grid;gap:8px;}
.field label{
  font-family:var(--display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
}
.field input, .field textarea, .field select{
  width:100%;
  font:inherit;
  padding:16px 18px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  transition:.15s border-color, .15s box-shadow;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;
  border-color:var(--blue-500);
  box-shadow:0 0 0 4px rgba(30,127,255,.15);
}
.field textarea{min-height:140px;resize:vertical;}
.field-row{display:grid;gap:18px;grid-template-columns:1fr;}
@media (min-width: 640px){.field-row{grid-template-columns:1fr 1fr;}}
.form .btn{justify-self:start;}

/* Contact cards */
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:48px;
}
@media (min-width: 760px){.contact-grid{grid-template-columns:repeat(3,1fr);}}
.contact-card{
  padding:32px 28px;
  border-radius:var(--radius);
  background:linear-gradient(180deg,#0e2a52,#0a1f3e);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
}
.contact-card .ico{
  width:46px;height:46px;border-radius:12px;background:rgba(30,127,255,.2);color:var(--blue-300);
  display:grid;place-items:center;margin-bottom:18px;
}
.contact-card h3{font-size:22px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px;}
.contact-card .big{
  font-family:var(--display);font-size:30px;letter-spacing:.02em;color:#fff;
  margin:6px 0 4px;display:block;
}
.contact-card .lil{color:#9fb1cc;font-size:14px;}

/* Promo strip (hours / phone / email) */
.promo-bar{
  background:linear-gradient(90deg, var(--navy-800), var(--navy-700));
  color:#fff;
}
.promo-bar .wrap{
  padding-top:18px;padding-bottom:18px;
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;
}
.promo-bar .item{display:flex;align-items:center;gap:12px;font-size:14px;}
.promo-bar .item svg{width:16px;height:16px;color:var(--blue-300);}
.promo-bar .item strong{font-family:var(--display);letter-spacing:.1em;}

/* ============================================================
   Page hero (sub-pages)
   ============================================================ */
.page-hero{
  background:var(--navy-900);
  color:#fff;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background-size:cover;background-position:center;
  filter:blur(0px) saturate(.9);
}
.page-hero .wrap{padding-top:120px;padding-bottom:80px;}
.page-hero h1{font-size:clamp(48px, 7vw, 92px);text-transform:uppercase;line-height:1;}
.page-hero p{max-width:54ch;font-size:18px;color:#cfdaee;}
.crumbs{
  font-family:var(--display);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue-300);margin-bottom:18px;
}
.crumbs a{color:var(--blue-300);opacity:.7;}
.crumbs a:hover{opacity:1;}

/* ============================================================
   Mountain SVG accent
   ============================================================ */
.mountain-divider{
  display:block;width:100%;height:auto;color:var(--navy-900);
}

/* Utility */
.center{text-align:center;}
.lede{font-size:18px;color:var(--ink-soft);}
.dark .lede{color:#bccada;}
.kicker{
  display:inline-block;font-family:var(--display);font-size:14px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue-300);
}