/* WILLIAMS PLUMBING HEADER
   First implementation of DESIGN-TARGET.png.
   All rules are scoped under .wp-header. */

.wp-header {
  --navy:#031d3a;
  --navy2:#062c51;
  --blue:#18a8eb;
  --blue2:#0879cd;
  --pale:#a9defb;
  position:relative;
  height:520px;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 57%,rgba(20,164,230,.16),transparent 29%),
    linear-gradient(108deg,#021a34 0%,#062a4d 57%,#031d3a 100%);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
}

.wp-header * { box-sizing:border-box; }

.wp-header__texture {
  position:absolute;
  inset:0;
  opacity:.22;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.20) 0 1px,transparent 2px) 0 0/39px 39px,
    radial-gradient(circle at 70% 40%,rgba(255,255,255,.14) 0 1px,transparent 2px) 0 0/57px 57px;
}

.wp-header__inner {
  position:relative;
  z-index:5;
  width:min(1430px,calc(100% - 76px));
  height:100%;
  margin:auto;
}

.wp-header__top {
  height:225px;
  display:flex;
  align-items:center;
}

.wp-header__brand {
  width:510px;
  flex:0 0 510px;
  line-height:0;
}

.wp-header__brand img {
  width:510px;
  height:170px;
  display:block;
  object-fit:contain;
  object-position:left center;
}

.wp-header__nav {
  margin-left:auto;
  display:flex;
  gap:38px;
  align-items:center;
}

.wp-header__nav a {
  position:relative;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  font-size:16px;
  font-weight:800;
  letter-spacing:.01em;
  padding:18px 0 20px;
  white-space:nowrap;
}

.wp-header__nav a.active::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:7px;
  height:3px;
  border-radius:3px;
  background:var(--blue);
}

.wp-header__nav a span { color:var(--blue); }

.wp-header__contact {
  min-width:330px;
  margin-left:32px;
  padding-left:30px;
  border-left:1px solid rgba(255,255,255,.58);
}

.wp-header__phone {
  display:flex;
  align-items:center;
  gap:13px;
  color:#fff;
  text-decoration:none;
}

.phone-icon {
  width:46px;
  height:46px;
  flex:0 0 46px;
  border:3px solid var(--blue);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--blue);
  font-size:23px;
}

.wp-header__phone strong {
  display:block;
  font-size:25px;
  line-height:1;
}

.wp-header__phone small {
  display:block;
  margin-top:7px;
  color:var(--blue);
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
}

.wp-header__quote {
  width:270px;
  height:51px;
  margin:19px 0 0 59px;
  padding:0 21px 0 25px;
  border-radius:27px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(100deg,#19a6e8,#3abaf2);
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  box-shadow:0 12px 30px rgba(0,120,200,.22);
}

.wp-header__quote b {
  font-size:25px;
  font-weight:400;
}

.wp-header__promises {
  position:absolute;
  top:211px;
  left:0;
  display:flex;
  gap:18px;
  align-items:center;
  font-size:17px;
  white-space:nowrap;
}

.wp-header__promises span {
  display:flex;
  align-items:center;
  gap:9px;
}

.wp-header__promises b {
  color:var(--blue);
  font-size:20px;
}

.wp-header__promises em {
  width:1px;
  height:25px;
  background:rgba(255,255,255,.68);
}

/* Large symbolic background plumbing. */
.wp-header__lineart {
  position:absolute;
  left:0;
  bottom:92px;
  width:900px;
  height:130px;
  opacity:.42;
  color:rgba(30,159,226,.75);
}

.wp-header__lineart .radiator {
  position:absolute;
  left:0;
  bottom:0;
  width:155px;
  height:88px;
  border:1px solid currentColor;
  border-radius:8px;
  background:repeating-linear-gradient(90deg,transparent 0 12px,currentColor 13px 14px);
}

.wp-header__lineart .boiler {
  position:absolute;
  left:310px;
  bottom:-4px;
  width:90px;
  height:108px;
  border:1px solid currentColor;
  border-radius:6px;
}

.wp-header__lineart .boiler::after {
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:19px;
  height:2px;
  background:currentColor;
  box-shadow:0 25px currentColor,0 68px currentColor;
}

.wp-header__lineart .sink {
  position:absolute;
  left:595px;
  bottom:36px;
  width:145px;
  height:53px;
  border:1px solid currentColor;
  border-top:0;
  border-radius:0 0 70px 70px;
}

.wp-header__lineart .sink::before {
  content:"";
  position:absolute;
  left:67px;
  top:-40px;
  width:18px;
  height:40px;
  border:1px solid currentColor;
  border-bottom:0;
  border-radius:12px 12px 0 0;
}

.wp-header__lineart .ubend {
  position:absolute;
  left:820px;
  bottom:0;
  width:65px;
  height:102px;
  border:1px solid currentColor;
  border-radius:32px;
}

.wp-header__pipework {
  position:absolute;
  right:-24px;
  bottom:90px;
  width:590px;
  height:240px;
  object-fit:contain;
  object-position:right center;
  mix-blend-mode:screen;
  opacity:.98;
}

/* Layered wave treatment to tie into the footer. */
.wp-header__waves {
  position:absolute;
  z-index:10;
  left:-5%;
  right:-5%;
  bottom:-1px;
  height:155px;
  pointer-events:none;
}

.wp-header__waves .wave {
  position:absolute;
  left:0;
  width:110%;
  border-radius:50% 50% 0 0/48% 48% 0 0;
}

.wp-header__waves .wave1 {
  height:102px;
  bottom:18px;
  background:#073b70;
  transform:rotate(-2deg);
}

.wp-header__waves .wave2 {
  height:95px;
  bottom:7px;
  background:#0a91db;
  transform:rotate(2deg);
}

.wp-header__waves .wave3 {
  height:77px;
  bottom:-1px;
  background:var(--pale);
  transform:rotate(-1.2deg);
}

.wp-header__waves .wave4 {
  height:85px;
  bottom:-24px;
  background:#fff;
  transform:rotate(-2.5deg);
}

.wp-header__menu,
.wp-header__mobile-nav {
  display:none;
}

@media(max-width:1180px) {
  .wp-header { height:470px; }
  .wp-header__inner { width:calc(100% - 44px); }
  .wp-header__brand { width:390px; flex-basis:390px; }
  .wp-header__brand img { width:390px; height:140px; }
  .wp-header__nav { gap:21px; }
  .wp-header__nav a { font-size:13px; }
  .wp-header__contact { min-width:250px; margin-left:20px; padding-left:20px; }
  .wp-header__phone strong { font-size:19px; }
  .wp-header__quote { width:215px; margin-left:44px; font-size:12px; }
  .wp-header__pipework { width:455px; }
}

@media(max-width:820px) {
  .wp-header { height:335px; }
  .wp-header__inner { width:calc(100% - 28px); }
  .wp-header__top { height:105px; }
  .wp-header__brand { width:270px; flex-basis:270px; }
  .wp-header__brand img { width:270px; height:100px; }
  .wp-header__nav,.wp-header__contact { display:none; }
  .wp-header__menu {
    display:flex;
    margin-left:auto;
    width:46px;
    height:46px;
    padding:9px;
    border:0;
    border-radius:11px;
    background:var(--blue);
    flex-direction:column;
    justify-content:center;
    gap:5px;
  }
  .wp-header__menu i { height:2px; background:#fff; display:block; }
  .wp-header__promises { top:108px; font-size:11px; gap:9px; }
  .wp-header__promises em { height:17px; }
  .wp-header__lineart { bottom:61px; transform:scale(.65); transform-origin:left bottom; }
  .wp-header__pipework { width:325px; right:-85px; bottom:53px; }
  .wp-header__waves { height:92px; }
}