.headerArea{
  --ha-navy:#0c131d;
  --ha-deep:#0d3b44;
  --ha-teal:#1f7f88;
  --ha-sun:#f6d814;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 88% 50%, rgba(246,216,20,.18), transparent 45%),
    linear-gradient(135deg, var(--ha-navy) 0%, var(--ha-deep) 55%, var(--ha-teal) 100%);
  border-bottom:4px solid var(--ha-sun);
  min-height:230px;
  padding:16px clamp(20px,5vw,72px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.headerArea *{box-sizing:border-box}

/* Rotating sun — right side */
.headerArea .ha-sun{
  position:absolute;z-index:-1;
  right:-130px;top:50%;
  width:560px;height:560px;
  margin-top:-280px;
  opacity:.2;
  pointer-events:none;
  animation:ha-spin 90s linear infinite;
}
.headerArea .ha-sun path,
.headerArea .ha-sun circle{fill:var(--ha-sun)}
@keyframes ha-spin{to{transform:rotate(360deg)}}

/* ---- Background texture: soft dot grid that fades to the left ---- */
.headerArea::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background-image:radial-gradient(rgba(255,255,255,.09) 1.2px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.35) 60%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.35) 60%,transparent 100%);
}
/* ---- Light beams fanning from the sun ---- */
.headerArea::after{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 92% 50%,
    rgba(246,216,20,.05) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image:radial-gradient(circle at 92% 50%, #000 0%, transparent 70%);
  mask-image:radial-gradient(circle at 92% 50%, #000 0%, transparent 70%);
}
/* ---- Drifting coastal waves along the bottom ---- */
.headerArea .ha-waves{
  position:absolute;left:0;right:0;bottom:0;height:70px;z-index:-1;
  pointer-events:none;overflow:hidden;
}
.headerArea .ha-waves svg{
  position:absolute;bottom:0;left:0;width:200%;height:100%;
}
.headerArea .ha-waves .wv1 path{fill:var(--ha-teal);opacity:.35}
.headerArea .ha-waves .wv2 path{fill:#3fa9b2;opacity:.18}
.headerArea .ha-waves .wv3 path{fill:none;stroke:var(--ha-sun);stroke-width:2;opacity:.35}
.headerArea .ha-waves .wv1{animation:ha-drift 26s linear infinite}
.headerArea .ha-waves .wv2{animation:ha-drift 18s linear infinite reverse}
.headerArea .ha-waves .wv3{animation:ha-drift 34s linear infinite}
@keyframes ha-drift{to{transform:translateX(-50%)}}


/* Logo — left */
.headerArea .ha-logo{justify-self:start;flex:none;min-width:max-content;display:inline-block;transition:transform .3s ease}
.headerArea .ha-logo:hover{transform:scale(1.03)}
.headerArea .ha-logo img{
  display:block;
  width:220px;max-width:none;height:auto;flex:none;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.5));
}

/* Tagline — centered */
.headerArea .ha-tagline{
  grid-column:2;
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:0;
  font-family:Oswald,sans-serif;font-weight:600;
  font-size:clamp(22px,2.6vw,34px);letter-spacing:.24em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
  text-shadow:0 4px 18px rgba(0,0,0,.4);
}
.headerArea .ha-tagline::before,
.headerArea .ha-tagline::after{
  content:"";width:56px;height:3px;background:var(--ha-sun);flex:none;
}

@media (max-width:1100px){
  /* logo keeps its size; tagline centers in the remaining space */
  .headerArea{grid-template-columns:auto 1fr}
  .headerArea .ha-tagline{letter-spacing:.16em}
  .headerArea .ha-tagline::before,
  .headerArea .ha-tagline::after{width:32px}
}
@media (max-width:900px){
  .headerArea{
    grid-template-columns:1fr;justify-items:center;
    min-height:0;padding:20px 16px 18px;gap:12px;
  }
  .headerArea .ha-logo{justify-self:center}
  .headerArea .ha-logo img{width:200px}
  .headerArea .ha-tagline{grid-column:1;font-size:20px;letter-spacing:.1em;white-space:nowrap;gap:10px}
  .headerArea .ha-tagline::before,
  .headerArea .ha-tagline::after{width:22px}
  .headerArea .ha-sun{width:380px;height:380px;margin-top:-190px;right:-170px}
}
@media (prefers-reduced-motion:reduce){
  .headerArea .ha-sun,.headerArea .ha-waves svg{animation:none}
}