/* Rocky Mountain Pools homepage mockup.
   Colors from their logo and site CSS: deep teal #1A4653, pool blue #00A7E1, mid blue #308FAF.
   Pool blue carries dark text (white on it fails contrast). Links on white use #0b6f8f. */

:root {
  --teal: #1a4653;
  --teal-700: #236b80;
  --deep: #0e2a33;
  --pool: #00a7e1;
  --pool-dark: #0091c4;
  --link: #0b6f8f;
  --ink: #12252b;
  --muted: #4b5f66;
  --tint: #eef6f9;
  --line: #d5e4ea;
  --white: #fff;

  --head: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pad: 2.5rem;
  --container: 76rem;
  --section: 6.5rem;
  --radius: 10px;
  --radius-lg: 20px;
  --ribbon-h: 28px;
}
@media (max-width: 991px) { :root { --pad: 2rem; --section: 5rem; } }
@media (max-width: 479px) { :root { --pad: 1.25rem; --section: 3.75rem; --ribbon-h: 30px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ribbon-h) + 5rem); }
body { margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; padding-top: var(--ribbon-h); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--pool); outline-offset: 3px; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; color: var(--deep); text-wrap: balance; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.375rem; line-height: 1.2; }
.tagline { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
.tagline-light { color: #7fd6f5; }
.muted { color: var(--muted); }
.measure { max-width: 40rem; }
.lead { font-size: 1.25rem; line-height: 1.5; }

.container { width: 100%; max-width: calc(var(--container) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); }
.s-white { background: var(--white); }
.s-tint { background: var(--tint); }
.s-dark { background: var(--teal); color: #e6f2f5; }
.s-dark h2 { color: var(--white); }
.section-head { display: flex; flex-direction: column; gap: .875rem; margin-bottom: 3rem; }
.section-head.center { align-items: center; text-align: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.25rem; padding: .8rem 1.5rem; border-radius: 999px; font: 700 1.0625rem/1 var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn-sm { min-height: 2.75rem; padding: .6rem 1.15rem; font-size: 1rem; }
.btn-accent { background: var(--pool); color: var(--deep); border-color: var(--pool); }
.btn-accent:hover { background: #3cc0ee; border-color: #3cc0ee; }
.btn-ghost { color: var(--white); border-color: rgb(255 255 255 / .85); background: rgb(14 42 51 / .25); }
.btn-ghost:hover { background: var(--white); color: var(--deep); }
.btn-block { width: 100%; }

/* Ribbon */
.ribbon { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--ribbon-h); display: flex; align-items: center; justify-content: center; padding: 0 .75rem; background: #0a1d23; color: #c9dde3; font-size: .75rem; line-height: 1.25; text-align: center; }

/* Header */
.nav { position: sticky; top: var(--ribbon-h); z-index: 50; background: var(--teal); box-shadow: 0 2px 14px rgb(0 0 0 / .18); }
.nav-bar { display: flex; align-items: center; gap: 2rem; min-height: 5rem; }
.logo img { width: 150px; height: auto; }
.nav nav { margin-left: auto; }
.nav-links { display: flex; gap: .25rem; }
.nav-links a { display: block; padding: .5rem .9rem; color: #e6f2f5; font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: 8px; }
.nav-links a:hover { background: rgb(255 255 255 / .1); color: var(--white); }
@media (max-width: 899px) {
  .nav nav { display: none; }
  .nav-call { margin-left: auto; }
}
@media (max-width: 479px) {
  .nav-bar { min-height: 4.25rem; gap: 1rem; }
  .logo img { width: 124px; }
  .nav-call { padding-inline: .9rem; font-size: .9375rem; }
}

/* Hero */
.hero { padding: 1rem 1rem 0; background: var(--white); }
.hero-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: min(42rem, calc(100vh - 8.5rem)); display: flex; align-items: flex-end; background: var(--deep); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 29 35 / .86) 0%, rgb(10 29 35 / .6) 45%, rgb(10 29 35 / .05) 80%), linear-gradient(0deg, rgb(10 29 35 / .5), transparent 50%); }
.hero-inner { position: relative; z-index: 1; padding-block: 4rem; }
.hero-copy { max-width: 37rem; display: flex; flex-direction: column; gap: 1.25rem; color: #eef7fa; }
.hero h1 { color: var(--white); font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1; }
.hero-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
@media (max-width: 767px) {
  .hero { padding: .5rem .5rem 0; }
  .hero-card { min-height: 0; border-radius: 14px; display: block; background: var(--deep); }
  .hero-img { position: static; height: 11.5rem; object-position: 50% 62%; }
  .hero-card::after { display: none; }
  .hero-inner { padding: 1.5rem 1.25rem 1.75rem; }
  .hero-copy { gap: .9rem; }
  .hero .tagline { display: none; }
  .hero h1 { font-size: 2.45rem; }
  .lead { font-size: 1.0625rem; }
  .hero-btns { gap: .6rem; margin-top: .25rem; }
  .hero-btns .btn { flex: 1 1 100%; min-height: 3rem; }
}

/* Trust strip */
.trust { padding: 1.75rem 0; background: var(--white); border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.trust-item { display: flex; flex-direction: column; gap: .2rem; padding-left: 1.1rem; border-left: 3px solid var(--pool); color: var(--muted); font-size: .9375rem; line-height: 1.35; text-decoration: none; }
.trust-big { font-family: var(--head); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: var(--deep); }
.trust-rating:hover .trust-big { color: var(--link); }
.stars { color: #e3a008; font-size: 1.1rem; letter-spacing: .05em; vertical-align: .2em; }
@media (max-width: 767px) { .trust-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; } .trust-big { font-size: 1.45rem; } }

/* Services */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.svc-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 10px 30px rgb(14 42 51 / .07); }
.svc-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--teal); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.svc-body p { color: var(--muted); font-size: 1rem; }
@media (max-width: 991px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .svc-grid { grid-template-columns: 1fr; } }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 15rem; gap: 1rem; grid-auto-flow: dense; }
.gallery figure { overflow: hidden; border-radius: var(--radius); background: var(--teal); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery .g-big { grid-column: span 2; grid-row: span 2; }
.gallery .g-wide { grid-column: span 2; }
@media (max-width: 767px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 9.5rem; gap: .6rem; }
  .gallery .g-big { grid-row: span 1; }
}

/* How it works */
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
.how-intro { display: flex; flex-direction: column; gap: 1rem; }
.media { margin-top: 1rem; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.steps { display: flex; flex-direction: column; gap: 1rem; }
.step { display: flex; gap: 1.25rem; padding: 1.75rem; border-radius: var(--radius-lg); background: var(--tint); }
.step-num { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--teal); color: var(--white); font: 700 1.125rem var(--head); }
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--muted); }
@media (max-width: 991px) { .how-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 479px) { .step { padding: 1.25rem; gap: 1rem; } .step-num { width: 2.75rem; height: 2.75rem; } }

/* Service area */
.area-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }
.area-grid h2 { margin: .75rem 0 1rem; }
.area-lead { font-size: 1.125rem; color: #cfe3e9; }
.towns { display: flex; flex-wrap: wrap; gap: .6rem; }
.towns li { padding: .6rem 1.1rem; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .22); color: var(--white); font-weight: 600; }
.towns li:first-child { background: var(--pool); border-color: var(--pool); color: var(--deep); }
@media (max-width: 991px) { .area-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Form */
.form-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; }
.form-intro { display: flex; flex-direction: column; gap: 1rem; }
.contact-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.contact-list a { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; text-decoration: none; color: var(--deep); overflow-wrap: anywhere; }
.contact-list .ico { color: var(--link); }
.quote-form { display: flex; flex-direction: column; gap: 1.1rem; padding: 2rem; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgb(14 42 51 / .1); }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-weight: 600; font-size: .9375rem; color: var(--deep); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; padding: .8rem .9rem; border: 1.5px solid #b9cdd4; border-radius: var(--radius); background: var(--white); color: var(--ink); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgb(0 167 225 / .25); }
.field textarea { resize: vertical; }
.form-note { padding: .9rem 1rem; border-radius: var(--radius); background: #e2f5fc; border: 1px solid #9fdcf2; color: var(--deep); font-weight: 600; font-size: .9375rem; }
@media (max-width: 991px) { .form-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 479px) { .field-row { grid-template-columns: 1fr; } .quote-form { padding: 1.25rem; } }

/* Footer */
.footer { background: var(--deep); color: #c3d6dc; padding: 4rem 0 2rem; font-size: .9375rem; }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer h3 { color: var(--white); font-size: 1.125rem; margin-bottom: .6rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
.footer-logo { width: 170px; margin-bottom: 1rem; }
.footer-base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .875rem; }
@media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Phone call bar */
.call-bar { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .call-bar { display: grid; transform: translateY(110%); opacity: 0; pointer-events: none; transition: transform .35s ease, opacity .35s ease; grid-template-columns: 1fr 1fr; gap: .65rem; position: fixed; inset: auto 0 0; z-index: 55; padding: .7rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background: rgb(14 42 51 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgb(255 255 255 / .1); }
  .call-bar.is-visible { transform: none; opacity: 1; pointer-events: auto; }
  .call-bar a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; border-radius: 999px; font-weight: 700; font-size: 1.0625rem; text-decoration: none; }
  .call-bar-call { background: var(--pool); color: var(--deep); }
  .call-bar-quote { border: 1.5px solid rgb(255 255 255 / .85); color: var(--white); }
}
@media (max-width: 479px) { .ribbon { font-size: .6875rem; } }