/* Fresh water palette and layouts that also work on narrow phones. */
body { background: #fff; color: #163449; }
h1, h2, h3 { text-wrap: balance; }
.site-header {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #e7f1f5;
}
.hero.panel--dark {
  color: #123449;
  background-color: #edf8fc;
  background-image: radial-gradient(ellipse at 8% 5%, #fff 0%, transparent 48%),
    radial-gradient(ellipse at 95% 95%, #d5f3f6 0%, transparent 60%),
    linear-gradient(125deg, #f4fbff, #e5f5fc);
  border: 1px solid #dceef5;
  padding-block: clamp(2.75rem, 2rem + 3vw, 5rem);
}
.hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.hero-text, .contact-main, .price-card { min-width: 0; }
.hero h1 { font-size: clamp(2rem, 1.15rem + 3vw, 3.6rem); letter-spacing: -.04em; line-height: 1.17; }
.hero .eyebrow { color: #075985; letter-spacing: .1em; }
.hero-lead { color: #456476; font-size: 1.12rem; }
.hero .btn--primary { box-shadow: 0 8px 20px -10px rgba(8, 120, 181, .65); }
.hero .btn--ghost-light, .contact .btn--ghost-light {
  color: #075985;
  background: rgba(255, 255, 255, .8);
  border-color: #b3d8e9;
}
.hero .btn--ghost-light:hover, .contact .btn--ghost-light:hover { background: #fff; border-color: #0878b5; }
.hero-ref { color: #426174; line-height: 1.45; }
.hero-ref:hover { color: #075985; }
.hero-ref-num { color: #075985; background: #fff; border: 1px solid #c6e5f0; }
.hero-ref-details { display: flex; flex-direction: column; gap: .35rem; }
.reference-label { display: inline-flex; align-items: center; gap: .4rem; }
.rating-row { display: inline-flex; align-items: center; gap: .5rem; line-height: 1.2; white-space: nowrap; }
.rating-stars { display: inline-flex; gap: 2px; flex: none; color: #cad9e2; }
.rating-star { display: block; position: relative; width: 16px; height: 16px; flex: none; }
.rating-star svg { display: block; width: 16px; height: 16px; max-width: none; fill: currentColor; }
.rating-star-fill { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; color: #b67b0d; }
.rating-score { color: #163449; font-size: .8rem; font-weight: 600; }
.rating-max { color: #496575; font-weight: 400; }
.stat-reference .rating-row { margin-top: .1rem; }
.stat-reference .rating-score { display: none; }
.contact-facts .reference-link { text-decoration: none; }
.reference-summary { text-decoration: underline; text-underline-offset: .2em; }
.reference-link .rating-row { display: flex; margin-top: .4rem; }
.hero-well {
  padding: 1.1rem;
  max-width: 370px;
  background: radial-gradient(ellipse at top right, #21445d, #102a3d 80%);
  border-radius: 28px;
  box-shadow: 0 18px 38px -22px rgba(18, 65, 92, .5);
}
.phone-number { white-space: nowrap; }
.stats { color: #163449; background: #f2fafd; border: 1px solid #d7ebf2; }
.stat + .stat { border-color: #d7ebf2; }
.stat-num { color: #0878b5; }
.stat-label { color: #496575; }
.stat-reference { border-radius: 22px; transition: background .2s ease; }
.stat-reference:hover { background: #e3f4fb; }
.step, .price-card { border: 1px solid #dfedf3; box-shadow: 0 12px 28px -24px rgba(15, 71, 103, .4); }
.step-num { border-radius: 16px; color: #075985; background: #e4f4fb; }
.price-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
.price-list li:not(:has(.depth)) { grid-template-columns: minmax(0, 1fr) auto; }
.price-card h3 .icon { flex-shrink: 0; }
.contact.panel--brand {
  color: #163449;
  background-color: #e9f7fc;
  background-image: radial-gradient(ellipse at top right, #d3f2f5, transparent 65%), linear-gradient(135deg, #f1faff, #e6f4fc);
  border: 1px solid #d4eaf4;
}
.contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.contact-main { container-type: inline-size; }
.contact h2 { color: #123449; }
.contact-lead { color: #456476; max-width: 38ch; margin-bottom: 1.25rem; }
.contact .eyebrow--light { color: #075985; }
.contact-phone {
  color: #075985;
  white-space: nowrap;
  font-size: clamp(1.15rem, 4.9vw, 2.65rem);
  font-size: clamp(1.15rem, 8cqi, 2.65rem);
  line-height: 1.4;
  letter-spacing: -.025em;
}
.contact-mail { color: #426174; }
.contact-mail:hover { color: #075985; }
.contact .btn--light { color: #fff; background: #0878b5; }
.contact .btn--light:hover { background: #075985; }
.contact-facts { background: rgba(255, 255, 255, .88); border: 1px solid #d9eaf2; box-shadow: 0 14px 32px -26px rgba(15, 71, 103, .45); }
.contact-facts div { grid-template-columns: minmax(6.5rem, .7fr) minmax(0, 1fr); border-color: #e0edf3; }
.contact-facts dt { color: #4e6879; }
.contact-facts dd { min-width: 0; overflow-wrap: anywhere; }
.contact-facts a { color: #075985; text-underline-offset: .2em; }
.site-footer { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.footer-contact a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 960px) {
  .hero-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-well { max-width: 320px; justify-self: center; }
  .stat:nth-child(n+3) { border-color: #d7ebf2; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .panel { border-radius: 24px; }
  .section { padding-block: 3.25rem; }
  .hero.panel--dark { padding-block: 2.7rem 2.5rem; }
  .hero h1 { font-size: clamp(1.85rem, 7.5vw, 2.5rem); max-width: 18ch; margin-bottom: .65em; }
  .hero .eyebrow { font-size: .63rem; letter-spacing: .08em; gap: .4rem; }
  .hero .eyebrow::before { width: 1rem; }
  .hero-lead { font-size: 1.02rem; line-height: 1.65; }
  .hero .btn { padding: .9rem .8rem; font-size: .94rem; gap: .5rem; }
  .hero-ref { font-size: .85rem; gap: .6rem; }
  .hero-ref-num { font-size: 1.15rem; padding: .3rem .7rem; }
  h2 { font-size: clamp(1.5rem, 6.2vw, 2rem); line-height: 1.22; }
  .section-head .lead { font-size: 1rem; }
  .stats { border-radius: 22px; }
  .stat { padding: 1.15rem .9rem; gap: .5rem; }
  .stat-num { font-size: 1.7rem; }
  .stat-label { font-size: .82rem; line-height: 1.5; }
  .step, .price-card { padding: 1.1rem; border-radius: 22px; }
  .price-list li { gap: .6rem; }
  .p-name { font-size: .91rem; }
  .p-val { font-size: clamp(.8rem, 3.3vw, .98rem); }
  .p-val--muted { font-size: .86rem; }
  .contact-facts { padding: 1.1rem; border-radius: 22px; }
  .contact-facts div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .contact-phone { font-size: clamp(1.15rem, 4.9vw, 2.65rem); font-size: clamp(1.15rem, 8cqi, 2.65rem); margin-block: .35rem .7rem; }
  .contact-mail { font-size: 1rem; }
  .contact .btn { min-height: 48px; }
  .footer-nav a { min-height: 40px; display: inline-flex; align-items: center; }
}