/* Areas page refresh — local coverage, service routes and a calmer South Coast identity. */
.areas-page{
  --areas-cyan:#43dbe7;
  --areas-blue:#5c79e8;
  --areas-sea:#9be7df;
  --areas-ink:#111823;
  --areas-night:#071016;
  --areas-panel:#0c1720;
  --areas-soft:#f3f7f6;
}

.areas-page .areas-hero{
  min-height:clamp(560px,72vh,690px);
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:#071016;
}
.areas-page .areas-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,10,15,.96) 0%,rgba(5,10,15,.88) 36%,rgba(5,10,15,.48) 66%,rgba(5,10,15,.12) 100%),
    linear-gradient(180deg,rgba(7,16,22,.08),rgba(7,16,22,.60)),
    url("photos/mobile-dj-areas-dorset-hampshire.webp") 58% center/cover no-repeat!important;
  filter:saturate(1.03) contrast(1.04)!important;
  opacity:1!important;
  mask-image:none!important;
}
.areas-page .areas-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:32%;
  background:linear-gradient(180deg,transparent,#071016 96%);
  opacity:.92!important;
  mask-image:none!important;
  pointer-events:none;
}
.areas-page .areas-hero-inner{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 64px));
  margin:0 auto;
  padding:120px 0 86px;
}
.areas-page .areas-hero .eyebrow{color:var(--areas-cyan)!important}
.areas-page .areas-hero h1{
  max-width:850px;
  margin:12px 0 20px;
  color:#fff;
  font-size:clamp(3.25rem,6.1vw,6.5rem);
  line-height:.93;
  letter-spacing:-.055em;
  text-transform:none;
}
.areas-page .areas-hero h1 span{
  display:block;
  background:linear-gradient(100deg,var(--areas-cyan),#c8fbf6 46%,var(--areas-blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.areas-page .areas-hero .hero-intro{
  max-width:760px;
  margin:0;
  color:#d4dce2;
  font-size:1.03rem;
  line-height:1.7;
}
.areas-hero-places{
  max-width:820px;
  margin:25px 0 26px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.areas-hero-places span{
  padding:8px 11px;
  border:1px solid rgba(155,231,223,.20);
  border-radius:999px;
  background:rgba(8,21,27,.52);
  color:#dceceb;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.areas-page .primary{background:linear-gradient(105deg,#16899a,#25b9c7 50%,#526fdb)!important}
.areas-page .line-link{color:#8eeaf0!important;border-color:#5bdbe3!important}

.areas-coverage,
.areas-production,
.areas-faq{padding:clamp(70px,8vw,110px) 0}
.areas-services{padding:clamp(72px,8vw,105px) 0;background:var(--areas-night);color:#fff}
.areas-coverage{background:linear-gradient(180deg,#f7faf9 0%,#eef5f3 100%)}
.areas-page .content-inner{width:min(1180px,calc(100% - 64px));margin:0 auto}
.areas-section-head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.72fr);
  gap:50px;
  align-items:end;
  margin-bottom:34px;
}
.areas-section-head .eyebrow{margin-bottom:9px;color:#167e8c!important}
.areas-section-head h2,
.areas-production-copy h2,
.areas-faq-intro h2{
  margin:0;
  color:var(--areas-ink);
  font-size:clamp(2.35rem,4.2vw,4.4rem);
  line-height:.97;
  letter-spacing:-.045em;
  text-transform:none;
}
.areas-section-head>p{
  margin:0;
  color:#58636c;
  font-size:.98rem;
  line-height:1.72;
}
.areas-section-head--dark h2{color:#fff}
.areas-section-head--dark>p{color:#aebcc4}
.areas-section-head--dark .eyebrow{color:var(--areas-cyan)!important}

.areas-region-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.areas-region-card{
  min-height:0!important;
  padding:32px!important;
  border:1px solid rgba(21,54,64,.11)!important;
  border-radius:22px;
  background:#fff!important;
  color:var(--areas-ink)!important;
  box-shadow:0 16px 34px rgba(17,38,45,.045)!important;
  overflow:hidden;
  position:relative;
}
.areas-region-card::before{
  content:""!important;
  position:absolute!important;
  width:260px!important;
  height:260px!important;
  top:-170px!important;
  right:-110px!important;
  border-radius:50%!important;
  filter:blur(60px)!important;
  opacity:.13!important;
}
.areas-region-card--dorset::before{background:var(--areas-cyan)!important}
.areas-region-card--hampshire::before{background:var(--areas-blue)!important}
.areas-region-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px;position:relative;z-index:1}
.areas-region-card-head span{color:#167e8c;font-size:.68rem;font-weight:900;letter-spacing:.16em}
.areas-region-card-head p{margin:0;color:#79838a!important;font-size:.67rem!important;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.areas-region-card h3{
  position:relative;
  z-index:1;
  max-width:500px;
  margin:0 0 12px!important;
  color:var(--areas-ink)!important;
  font-size:clamp(1.8rem,2.7vw,2.7rem)!important;
  line-height:1.04!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
}
.areas-region-card>p{position:relative;z-index:1;max-width:520px;margin:0;color:#5e6870!important;font-size:.93rem!important;line-height:1.65!important}
.areas-region-card ul{position:relative;z-index:1;margin:24px 0 0!important;padding:0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 22px!important;list-style:none!important}
.areas-region-card li{padding:10px 0!important;border-top:1px solid #e2e9e7!important;color:#25323a;font-size:.72rem!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase}
.areas-beyond-strip{
  margin-top:16px;
  padding:19px 22px;
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr) auto;
  gap:24px;
  align-items:center;
  border:1px solid rgba(38,96,103,.13);
  border-radius:16px;
  background:rgba(255,255,255,.68);
}
.areas-beyond-strip span{display:block;color:#167e8c;font-size:.62rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.areas-beyond-strip strong{display:block;margin-top:3px;color:#17242b;font-size:.95rem}
.areas-beyond-strip p{margin:0;color:#647078;font-size:.82rem;line-height:1.5}
.areas-beyond-strip a{color:#186f7a;font-size:.75rem;font-weight:900;white-space:nowrap}

.areas-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.areas-service-grid a{
  min-height:174px;
  padding:22px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(91,121,232,.16);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(18,31,41,.94),rgba(10,19,26,.96));
  color:#fff;
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.areas-service-grid a:nth-child(odd){border-top-color:rgba(67,219,231,.52)}
.areas-service-grid a:nth-child(even){border-top-color:rgba(92,121,232,.55)}
.areas-service-grid a:hover,.areas-service-grid a:focus-visible{transform:translateY(-3px);border-color:rgba(67,219,231,.52);outline:none}
.areas-service-grid span{color:#6bdde5;font-size:.62rem;font-weight:900;letter-spacing:.15em}
.areas-service-grid strong{margin-top:26px;font-size:1.1rem;letter-spacing:-.01em}
.areas-service-grid small{margin-top:7px;color:#9faeb7;font-size:.75rem;line-height:1.46}
.areas-service-grid b{margin-top:auto;padding-top:18px;color:#8eeaf0;font-size:.69rem;letter-spacing:.04em}
.areas-services-footer{display:flex;gap:22px;align-items:center;margin-top:24px}

.areas-production{background:#fff}
.areas-production-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.82fr);gap:clamp(38px,6vw,76px);align-items:center}
.areas-production figure{margin:0;overflow:hidden;border-radius:24px;background:#111b20;box-shadow:0 24px 50px rgba(20,35,40,.08)}
.areas-production figure img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 50%}
.areas-production-copy .eyebrow{color:#167e8c!important}
.areas-production-copy h2{margin:8px 0 18px}
.areas-production-copy .lead{margin:0;color:#39464e;font-size:1.04rem;line-height:1.72}
.areas-production-copy>p:not(.lead){margin:14px 0 0;color:#66727a;line-height:1.7}
.areas-proof-row{display:flex;flex-wrap:wrap;gap:7px;margin:23px 0 5px}
.areas-proof-row span{padding:7px 10px;border:1px solid #dce7e5;border-radius:999px;background:#f5f9f8;color:#32454d;font-size:.63rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

.areas-faq{background:linear-gradient(135deg,#091319,#0b1820 62%,#10192c);color:#fff}
.areas-faq-grid{display:grid;grid-template-columns:minmax(290px,.55fr) minmax(0,1fr);gap:clamp(42px,7vw,90px);align-items:start}
.areas-faq-intro{position:sticky;top:110px}
.areas-faq-intro .eyebrow{color:var(--areas-cyan)!important}
.areas-faq-intro h2{margin:8px 0 15px;color:#fff}
.areas-faq-intro>p:last-child{margin:0;color:#a8b6bd;line-height:1.68}
.areas-page .areas-faq .faq-list{display:grid;gap:8px}
.areas-page .areas-faq .faq-list details{margin:0!important;padding:0!important;border:1px solid rgba(141,225,230,.12)!important;border-radius:14px;background:rgba(255,255,255,.025)!important;overflow:hidden}
.areas-page .areas-faq .faq-list summary{padding:18px 20px!important;color:#f2f7f8!important;font-size:.91rem!important;font-weight:800;cursor:pointer}
.areas-page .areas-faq .faq-list details p{margin:0!important;padding:0 20px 19px!important;color:#aebbc2!important;font-size:.84rem!important;line-height:1.65!important}

.areas-cta{position:relative;overflow:hidden;padding:clamp(70px,8vw,105px) 0;background:#071016;color:#fff;text-align:center}
.areas-cta::before{content:"";position:absolute;inset:-80% 52% -80% -18%;background:radial-gradient(circle,rgba(67,219,231,.16),transparent 60%);pointer-events:none}
.areas-cta::after{content:"";position:absolute;inset:-90% -14% -70% 58%;background:radial-gradient(circle,rgba(92,121,232,.16),transparent 62%);pointer-events:none}
.areas-cta-inner{position:relative;z-index:1;width:min(760px,calc(100% - 48px));margin:0 auto}
.areas-cta .eyebrow{color:var(--areas-cyan)!important}
.areas-cta h2{margin:8px 0 14px;font-size:clamp(2.6rem,4.7vw,4.8rem);line-height:.98;letter-spacing:-.045em;text-transform:none}
.areas-cta p:not(.eyebrow){max-width:650px;margin:0 auto;color:#afbdc4;line-height:1.7}
.areas-cta .page-actions{justify-content:center;margin-top:25px}

@media(max-width:900px){
  .areas-page .areas-hero-inner,.areas-page .content-inner{width:min(100% - 40px,760px)}
  .areas-section-head,.areas-production-grid,.areas-faq-grid{grid-template-columns:1fr;gap:24px}
  .areas-region-grid{grid-template-columns:1fr}
  .areas-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .areas-faq-intro{position:static}
  .areas-beyond-strip{grid-template-columns:1fr auto}
  .areas-beyond-strip p{grid-column:1/-1;grid-row:2}
}

@media(max-width:650px){
  .areas-page .areas-hero{min-height:auto}
  .areas-page .areas-hero::before{background:linear-gradient(0deg,rgba(5,10,15,.95) 0%,rgba(5,10,15,.72) 54%,rgba(5,10,15,.38) 100%),url("photos/mobile-dj-areas-dorset-hampshire.webp") 62% center/cover no-repeat!important}
  .areas-page .areas-hero-inner{width:calc(100% - 32px);padding:108px 0 62px}
  .areas-page .areas-hero h1{font-size:clamp(2.65rem,13vw,4rem)}
  .areas-page .areas-hero .hero-intro{font-size:.92rem;line-height:1.62}
  .areas-hero-places{margin:19px 0 21px;gap:6px}
  .areas-hero-places span{padding:6px 8px;font-size:.58rem}
  .areas-page .content-inner{width:calc(100% - 32px)}
  .areas-coverage,.areas-services,.areas-production,.areas-faq{padding:58px 0}
  .areas-section-head{margin-bottom:24px}
  .areas-section-head h2,.areas-production-copy h2,.areas-faq-intro h2{font-size:clamp(2rem,10vw,3rem)}
  .areas-region-card{padding:24px!important;border-radius:18px}
  .areas-region-card ul{grid-template-columns:1fr!important}
  .areas-beyond-strip{grid-template-columns:1fr;gap:10px;padding:17px}
  .areas-beyond-strip p{grid-column:auto;grid-row:auto}
  .areas-beyond-strip a{white-space:normal}
  .areas-service-grid{grid-template-columns:1fr;gap:8px}
  .areas-service-grid a{min-height:142px;padding:19px}
  .areas-service-grid strong{margin-top:19px}
  .areas-services-footer{flex-direction:column;align-items:flex-start;gap:10px}
  .areas-production figure{border-radius:18px}
  .areas-production figure img{aspect-ratio:4/3}
  .areas-proof-row{gap:6px}
  .areas-proof-row span{font-size:.57rem}
  .areas-cta{padding:62px 0}
  .areas-cta h2{font-size:clamp(2.2rem,11vw,3.2rem)}
}

@media(prefers-reduced-motion:reduce){
  .areas-service-grid a{transition:none}
  .areas-service-grid a:hover,.areas-service-grid a:focus-visible{transform:none}
}