/*
 * Shared styles used on every page.
 * 1. Banner waves  2. Request forms
 * Page templates no longer carry their own copy of these rules, so every page looks the same.
 */
/* ===== 1. Banner waves =====
 * Three independent layers, like a real river:
 *  - back layer: long slow swells drifting right
 *  - middle layer: medium waves flowing LEFT (opposite way)
 *  - front white layer: shorter waves drifting right
 * Each layer has its own speed, its own rise-and-fall rhythm and its own starting point,
 * so the crests never line up. Transforms run on the GPU, so the motion stays smooth.
 */
.h-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(2.8rem, 5vw, 4.5rem);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.h-w {
  position: absolute;
  left: 0;
  bottom: 0;
  background-repeat: repeat-x;
  background-position: 0 100%;
  will-change: transform, translate;
  backface-visibility: hidden;
}
/* Back: long, soft swells */
.h-w1 {
  height: 100%;
  width: calc(100% + 1600px);
  background-size: 1600px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%2338b6ff' fill-opacity='.28' d='M0 40 Q150 6 300 40 T600 40 T900 40 T1200 40 V80 H0 Z'/%3E%3C/svg%3E");
  animation: h-flow-right-1600 46s linear -17s infinite, h-bob-big 6.5s ease-in-out -1s infinite alternate;
}
/* Middle: medium waves, flowing the other way */
.h-w2 {
  height: 76%;
  width: calc(100% + 1100px);
  background-size: 1100px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%2338b6ff' fill-opacity='.5' d='M0 40 Q150 0 300 40 T600 40 T900 40 T1200 40 V80 H0 Z'/%3E%3C/svg%3E");
  animation: h-flow-left-1100 21s linear -6s infinite, h-bob-mid 4.3s ease-in-out -2.6s infinite alternate;
}
/* Front: white, shorter waves */
.h-w3 {
  height: 50%;
  width: calc(100% + 900px);
  background-size: 900px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 40 Q150 10 300 40 T600 40 T900 40 T1200 40 V80 H0 Z'/%3E%3C/svg%3E");
  animation: h-flow-right-900 15s linear -4s infinite, h-bob-small 3.4s ease-in-out -0.7s infinite alternate;
}
@keyframes h-flow-right-1600 { from { transform: translate3d(-1600px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes h-flow-left-1100  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1100px, 0, 0); } }
@keyframes h-flow-right-900  { from { transform: translate3d(-900px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes h-bob-big   { from { translate: 0 0; } to { translate: 0 8px; } }
@keyframes h-bob-mid   { from { translate: 0 1px; } to { translate: 0 6px; } }
@keyframes h-bob-small { from { translate: 0 0; } to { translate: 0 3px; } }



/* ===== 2. Request forms ===== */
.h-form {
  background: #fff;
  color: var(--text, #27384a);
  border-radius: 20px;
  padding: clamp(1.4rem, 3vw, 1.8rem);
  box-shadow: 0 26px 60px rgba(3, 14, 30, .28);
  border-top: 5px solid var(--valve, #d92020);
}
.h-form h2 { font-size: 1.45rem; line-height: 1.2; margin: 0 0 .3rem; color: var(--ink, #0b2a4a); }
.h-form__sub { color: var(--muted, #53647a); font-size: .95rem; line-height: 1.5; margin: 0 0 1.3rem; }

.atl-form { display: block; text-align: left; }

.h-field { position: relative; margin: 0 0 1.05rem; }
.h-field input,
.h-field select,
.h-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 3.2rem;
  margin: 0;
  padding: .95rem .95rem .7rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink, #0b2a4a);
  background: #fff;
  border: 1.5px solid #b9c9db;
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.h-field textarea { min-height: 6.5rem; resize: vertical; padding-top: 1.1rem; }
.h-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565c0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 1.15rem;
}
.h-field input:hover, .h-field select:hover, .h-field textarea:hover { border-color: #93add0; }
.h-field input:focus, .h-field select:focus, .h-field textarea:focus {
  outline: none;
  border-color: var(--blue, #1565c0);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, .14);
}
.h-field label {
  position: absolute;
  left: .75rem;
  top: 1.6rem;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 .35rem;
  max-width: calc(100% - 2.5rem);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #fff;
  font-size: .98rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--muted, #53647a);
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease, color .18s ease;
}
.h-field input:focus + label,
.h-field input:not(:placeholder-shown) + label,
.h-field textarea:focus + label,
.h-field textarea:not(:placeholder-shown) + label,
.h-field--fixed label {
  top: 0;
  font-size: .76rem;
  font-weight: 700;
  color: var(--blue, #1565c0);
}
.atl-opt { font-weight: 500; color: var(--muted, #53647a); }

/* Radio / checkbox chips */
.h-choices { border: 0; margin: 0 0 1.05rem; padding: 0; min-width: 0; }
.h-choices legend { padding: 0; margin: 0 0 .5rem; font-size: .9rem; font-weight: 700; color: var(--ink, #0b2a4a); }
.h-choices__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.h-choice {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .9rem;
  border: 1.5px solid #b9c9db;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink, #0b2a4a);
  transition: border-color .15s ease, background .15s ease;
}
.h-choice input { accent-color: var(--blue, #1565c0); margin: 0; }
.h-choice:has(input:checked) { border-color: var(--blue, #1565c0); background: #eaf3ff; }

/* Button inside a form */
.atl-form button[type=submit] { margin-top: .2rem; }
.atl-form button[type=submit] .icon { width: 1.15rem; height: 1.15rem; }
.atl-form button.is-sending { opacity: .7; cursor: progress; }

.atl-form__consent { margin: .9rem 0 0; font-size: .8rem; line-height: 1.5; color: #5b6b7f; text-align: center; }

/* Messages */
.h-msg { border-radius: 12px; padding: .85rem 1rem; margin: 0 0 1rem; font-weight: 700; font-size: .94rem; line-height: 1.45; }
.h-msg--ok { background: #e7f6ec; color: #17612f; border: 1.5px solid #a7f3d0; }
.h-msg--err { background: #fdecec; color: #a11d1d; border: 1.5px solid #fecaca; }

/* Spam trap: hidden from people */
.h-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* "Prefer to call?" badge under forms */
.h-form__call {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.1rem 0 0;
  padding: .75rem 1rem;
  background: var(--blue-soft, #e7f1fd);
  border: 1px solid #cfe0f4;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink, #0b2a4a);
  text-align: center;
}
.h-form__call a { font-size: 1.05rem; font-weight: 800; color: var(--valve, #d92020); text-decoration: underline; text-underline-offset: 3px; }
.h-form__call a:hover { color: var(--valve-dark, #b81818); }

@media (prefers-reduced-motion: reduce) {
  .h-w { animation: none !important; }
  .h-field label { transition: none; }
}

/* ===== 3. DIY guide cards (DIY page + blog posts) ===== */
.g-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.g-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line, #d9e4f0);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(11, 42, 74, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.g-card:hover { transform: translateY(-4px); border-color: #b9d3f0; box-shadow: 0 18px 40px rgba(11, 42, 74, .13); }
.g-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #0b2a4a 0%, #1565c0 100%);
}
.g-thumb__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.g-card:hover .g-thumb__img { transform: scale(1.04); }
.g-thumb__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(56, 182, 255, .35) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(56, 182, 255, .22) 0, transparent 40%),
    linear-gradient(135deg, #0b2a4a 0%, #13447c 100%);
}
.g-thumb__ph::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%2338b6ff' fill-opacity='.18' d='M0 34 C200 8 400 8 600 34 S1000 60 1200 34 V80 H0 Z'/%3E%3C/svg%3E") repeat-x 0 100% / 100% 100%;
}
.g-thumb__ico {
  position: relative;
  z-index: 1;
  width: 3.4rem;
  height: 3.4rem;
  padding: .9rem;
  box-sizing: content-box;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 20px;
  backdrop-filter: blur(6px);
}
.g-tag {
  position: absolute;
  left: .9rem;
  top: .9rem;
  z-index: 2;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--ink, #0b2a4a);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.g-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.35rem 1.35rem; }
.g-meta { display: flex; justify-content: space-between; gap: .8rem; font-size: .8rem; font-weight: 600; color: #7a8ca1; margin-bottom: .55rem; }
.g-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.g-ico { width: .95rem; height: .95rem; flex: none; }
.g-title { font-size: 1.14rem; line-height: 1.35; margin: 0 0 .55rem; }
.g-title a { color: var(--ink, #0b2a4a); text-decoration: none; }
.g-card:hover .g-title a { color: var(--blue, #1565c0); }
.g-excerpt { color: var(--muted, #53647a); font-size: .93rem; line-height: 1.55; margin: 0 0 1.1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g-more { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .92rem; color: var(--blue, #1565c0); text-decoration: none; }
.g-more .g-ico { transition: transform .2s ease; }
.g-card:hover .g-more .g-ico { transform: translateX(3px); }

/* Featured (wide) card */
@media (min-width: 52rem) {
  .g-card--wide { flex-direction: row; }
  .g-card--wide .g-thumb { flex: 0 0 52%; aspect-ratio: auto; min-height: 20rem; }
  .g-card--wide .g-body { padding: clamp(1.6rem, 3vw, 2.4rem); justify-content: center; }
}
.g-card--wide .g-title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.g-card--wide .g-excerpt { -webkit-line-clamp: 4; font-size: 1rem; }

/* Mini (sidebar) */
.g-mini { display: flex; align-items: center; gap: .85rem; padding: .6rem; border-radius: 12px; text-decoration: none; transition: background .2s ease; }
.g-mini:hover { background: var(--blue-soft, #e7f1fd); }
.g-thumb--mini { flex: 0 0 4.6rem; width: 4.6rem; height: 3.6rem; aspect-ratio: auto; border-radius: 10px; }
.g-thumb--mini .g-thumb__ico { width: 1.3rem; height: 1.3rem; padding: .4rem; border-radius: 10px; }
.g-thumb--mini .g-thumb__ph::after { display: none; }
.g-mini__t { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.g-mini__t b { font-size: .92rem; line-height: 1.35; color: var(--ink, #0b2a4a); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-mini__t small { font-size: .78rem; color: #7a8ca1; font-weight: 600; }
.g-mini:hover b { color: var(--blue, #1565c0); }
/* ===== 4. Footer ===== */
.f-new { background: #071a30; color: #b6c6d8; padding-top: clamp(3rem, 6vw, 4.5rem); font-size: .95rem; }
.f-new a { text-decoration: none; }
.f-grid { display: grid; gap: 2.4rem; padding-bottom: 2.6rem; }
@media (min-width: 40rem) { .f-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .f-grid { grid-template-columns: 1.35fr .9fr .8fr 1.35fr; gap: 2.6rem; } }

.f-name { color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .6rem; }
.f-about { margin: 0 0 1.3rem; line-height: 1.6; color: #b6c6d8; max-width: 24rem; }
.f-phone { display: inline-flex; align-items: center; gap: .8rem; padding: .55rem 1.2rem .55rem .55rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; transition: background .2s ease, border-color .2s ease; }
.f-phone:hover { background: rgba(217,32,32,.18); border-color: rgba(217,32,32,.55); color: #fff; }
.f-phone__ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--valve, #d92020); }
.f-phone__ico .icon { width: 1.2rem; height: 1.2rem; }
.f-phone small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9fb3c8; }
.f-phone b { display: block; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.f-new .f-info { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: .9rem; }
.f-info li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.5; }
.f-info .icon { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .15rem; color: var(--sky, #38b6ff); }

.f-title { color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 2px solid rgba(56,182,255,.35); display: inline-block; }
.f-new .f-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.f-links a { color: #c8d6e5; display: inline-flex; align-items: center; gap: .4rem; transition: color .2s ease, transform .2s ease; }
.f-links a:hover { color: #fff; transform: translateX(3px); text-decoration: none; }
.f-col { min-width: 0; }

.f-region { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; color: #8fa5bc; }
.f-new .f-towns { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.f-new .f-towns li { padding: .25rem .65rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: .8rem; color: #d3dfeb; white-space: nowrap; }
.f-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; font-weight: 700; font-size: .9rem; color: var(--sky, #38b6ff); }
.f-more .icon { width: 1rem; height: 1rem; transition: transform .2s ease; }
.f-more:hover { color: #fff; text-decoration: none; }
.f-more:hover .icon { transform: translateX(3px); }

.f-notice { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.25rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.f-notice__ico { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: rgba(56,182,255,.12); color: var(--sky, #38b6ff); }
.f-notice__ico .icon { width: 1.1rem; height: 1.1rem; }
.f-notice p { margin: 0; font-size: .86rem; line-height: 1.6; color: #a9bbcf; }
.f-notice strong { color: #fff; }
.f-license { display: block; margin-top: .3rem; color: #c8d6e5; }

.f-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding-block: 1.4rem; margin-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .86rem; color: #8fa5bc; }
.f-bottom p { margin: 0; }
.f-new .f-bottom ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; }
.f-bottom a { color: #b6c6d8; }
.f-bottom a:hover { color: #fff; text-decoration: none; }
@media (max-width: 47.99rem) { .f-new { padding-bottom: 4.5rem; } }

/* Mobile: brand and service areas full width, Services and Company side by side */
@media (max-width: 39.99rem) {
  .f-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.4rem; }
  .f-brand, .f-areas { grid-column: 1 / -1; }
}

/* ===== 5. Mobile sticky call bar (same on every page) ===== */
.h-sticky .h-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; font-weight: 800; font-size: 1rem; line-height: 1; text-decoration: none; border: 2px solid transparent; }
.h-sticky .h-btn .icon { width: 1.15rem; height: 1.15rem; }
.h-sticky .h-btn--red { background: var(--valve, #d92020); color: #fff; }
.h-sticky .h-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); }