/* James Woolford Design — page surfaces, location chapters and hero/nav overlap v49 */
:root{
  --jw49-ink:#090b12;
  --jw49-dark:#080a11;
  --jw49-dark-2:#10162a;
  --jw49-panel:#13192a;
  --jw49-blue:#2c5dff;
  --jw49-blue-deep:#173dbe;
  --jw49-paper:#f5f2eb;
  --jw49-pale:#e9edfa;
  --jw49-white:#fff;
  --jw49-line:rgba(12,16,28,.14);
  --jw49-white-line:rgba(255,255,255,.15);
}

/* -------------------------------------------------------------------------- */
/* Every secondary page hero now begins behind the fixed navigation.          */
/* -------------------------------------------------------------------------- */
.portfolio-page,
.case-study-page,
.about-page,
.contact-page,
.services-page,
.service-detail-page,
.insights-page,
.insight-article-page,
.areas-page,
.location-page,
.local-service-page,
.not-found-page{
  padding-top:0!important;
}

.portfolio-hero,
.case-study-hero,
.about-hero,
.contact-hero,
.services-hero,
.service-detail-hero,
.insights-hero,
.insight-article-hero,
.areas-hero,
.location-hero,
.local-service-hero,
.not-found-page__inner{
  position:relative!important;
  z-index:0!important;
}

/* Maintain the original content position while letting the section surface
   extend beneath the fixed navigation. */
.portfolio-hero,
.case-study-hero,
.about-hero,
.contact-hero,
.insights-hero,
.insight-article-hero,
.areas-hero,
.location-hero,
.local-service-hero{
  padding-top:clamp(190px,15vw,245px)!important;
}

.services-page .services-hero.jw44-services-hero,
.service-detail-page .service-detail-hero.jw43-video-hero,
.jw45-app-design-page .jw45-app-hero{
  padding-top:clamp(215px,16vw,275px)!important;
}

/* Remove animated wallpaper from the directory/location system. Each section
   below owns its own deliberate surface instead. */
.areas-page section,
.location-page section,
.local-service-page section{
  background-image:none!important;
  animation:none!important;
}
.areas-page .site-ambient::before,
.areas-page .site-ambient::after,
.location-page .site-ambient::before,
.location-page .site-ambient::after,
.local-service-page .site-ambient::before,
.local-service-page .site-ambient::after{
  display:none!important;
}
.areas-page .site-reveal,
.location-page .site-reveal,
.local-service-page .site-reveal{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

/* -------------------------------------------------------------------------- */
/* Areas directory — strong opaque cards and real contrast.                   */
/* -------------------------------------------------------------------------- */
.areas-page{
  background:var(--jw49-paper)!important;
  color:var(--jw49-ink)!important;
}
.areas-page .areas-hero{
  min-height:620px!important;
  display:flex!important;
  align-items:flex-end!important;
  padding-bottom:clamp(84px,8vw,120px)!important;
  overflow:hidden!important;
  color:#fff!important;
  border-bottom:0!important;
  background:
    radial-gradient(circle at 82% 18%,rgba(63,102,255,.45),transparent 32%),
    radial-gradient(circle at 16% 86%,rgba(79,96,155,.24),transparent 30%),
    linear-gradient(135deg,#080b13 0%,#10182d 56%,#172b68 100%)!important;
}
.areas-page .areas-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 18%,rgba(255,255,255,.035) 50%,transparent 78%);
}
.areas-page .areas-hero__grid{position:relative;z-index:1}
.areas-page .areas-hero h1{color:#fff!important;max-width:12ch!important}
.areas-page .areas-hero p{color:rgba(255,255,255,.68)!important}
.areas-page .areas-hero .section-kicker{color:#8fa9ff!important}

.areas-page .areas-directory{
  padding:clamp(90px,9vw,144px) 0!important;
  background:var(--jw49-dark)!important;
  color:#fff!important;
}
.areas-page .jw47-section-head{
  border-bottom-color:rgba(255,255,255,.16)!important;
}
.areas-page .jw47-section-head h2{color:#fff!important}
.areas-page .jw47-section-head p{color:rgba(255,255,255,.62)!important}
.areas-page .jw47-area-services{
  gap:16px!important;
}
.areas-page .jw47-area-services>a{
  min-height:340px!important;
  padding:32px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:linear-gradient(145deg,#151a28,#101420)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.18)!important;
  opacity:1!important;
  backdrop-filter:none!important;
}
.areas-page .jw47-area-services>a:nth-child(2n){background:linear-gradient(145deg,#17213b,#11182d)!important}
.areas-page .jw47-area-services>a:hover{
  border-color:rgba(94,130,255,.78)!important;
  background:linear-gradient(145deg,#1c2b52,#111a32)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.32),0 0 0 1px rgba(76,112,255,.22)!important;
}
.areas-page .jw47-area-services h3{color:#fff!important}
.areas-page .jw47-area-services p{color:rgba(255,255,255,.61)!important}

.areas-page .areas-matrix-section{
  padding:clamp(90px,9vw,144px) 0!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--jw49-blue) 0%,#2148c9 48%,#142b7d 100%)!important;
}
.areas-page .jw47-location-grid{gap:16px!important}
.areas-page .jw47-location-grid article{
  padding:32px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:#0e1630!important;
  box-shadow:0 22px 54px rgba(6,14,48,.24)!important;
  backdrop-filter:none!important;
}
.areas-page .jw47-location-grid article:nth-child(3n+2){background:#111c3e!important}
.areas-page .jw47-location-grid h3{color:#fff!important}
.areas-page .jw47-location-grid a{color:rgba(255,255,255,.83)!important;border-top-color:rgba(255,255,255,.14)!important}
.areas-page .jw47-location-grid a:hover{color:#fff!important;padding-left:5px}

/* Also cover the earlier v45 card names if an older script wins the race. */
.areas-page .jw45-service-directory,
.areas-page .jw45-area-matrix-grid{gap:16px!important}
.areas-page .jw45-service-directory>a,
.areas-page .jw45-area-matrix-grid article{
  border:1px solid rgba(255,255,255,.17)!important;
  background:#121827!important;
  color:#fff!important;
  opacity:1!important;
}

/* -------------------------------------------------------------------------- */
/* Web-design location pages — intentional alternating chapters.              */
/* -------------------------------------------------------------------------- */
.location-page{
  background:var(--jw49-paper)!important;
  color:var(--jw49-ink)!important;
}
.location-page .location-hero{
  min-height:690px!important;
  display:flex!important;
  align-items:flex-end!important;
  padding-bottom:clamp(82px,8vw,122px)!important;
  overflow:hidden!important;
  color:#fff!important;
  border-bottom:0!important;
  background:
    radial-gradient(circle at 84% 20%,rgba(50,93,255,.48),transparent 34%),
    radial-gradient(circle at 8% 85%,rgba(95,111,170,.24),transparent 34%),
    linear-gradient(135deg,#080b13 0%,#10162a 57%,#172b68 100%)!important;
}
.location-page .location-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,rgba(0,0,0,.18),transparent 48%,rgba(255,255,255,.035));
}
.location-page .location-hero__grid{position:relative;z-index:1;align-items:end!important}
.location-page .location-hero h1{color:#fff!important;max-width:10ch!important}
.location-page .location-hero__copy p{color:rgba(255,255,255,.72)!important}
.location-page .location-hero__copy a{color:#fff!important;border-bottom-color:rgba(255,255,255,.65)!important}
.location-page .location-hero .section-kicker{color:#8fa9ff!important}
.location-page .jw45-location-panel{
  border:1px solid rgba(255,255,255,.18)!important;
  background:linear-gradient(145deg,rgba(11,15,26,.95),rgba(22,35,77,.92))!important;
  box-shadow:0 32px 80px rgba(0,0,0,.30)!important;
}

.location-page .location-context{
  padding:clamp(88px,9vw,140px) 0!important;
  background:var(--jw49-paper)!important;
}
.location-page .location-context__grid{align-items:start!important}
.location-page .location-context__copy{
  padding:clamp(28px,3vw,44px)!important;
  border:1px solid var(--jw49-line)!important;
  background:#fff!important;
  box-shadow:0 20px 55px rgba(26,38,76,.08)!important;
}
.location-page .location-context h2{color:var(--jw49-ink)!important}
.location-page .location-context__copy p{color:#625f58!important}

.location-page .location-benefits{
  padding:clamp(90px,9vw,142px) 0!important;
  background:linear-gradient(145deg,#080a11,#111a35)!important;
  color:#fff!important;
}
.location-page .location-benefits__grid{gap:16px!important;border:0!important}
.location-page .location-benefits article{
  min-height:315px!important;
  padding:34px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  background:linear-gradient(145deg,#161b29,#10141f)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.20)!important;
}
.location-page .location-benefits article:last-child{border:1px solid rgba(255,255,255,.15)!important}
.location-page .location-benefits h3{color:#fff!important}
.location-page .location-benefits p{color:rgba(255,255,255,.62)!important}

.location-page .location-coverage{
  padding:clamp(90px,9vw,142px) 0!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--jw49-blue),var(--jw49-blue-deep))!important;
}
.location-page .location-coverage h2,
.location-page .location-coverage p,
.location-page .location-coverage span{color:#fff!important}
.location-page .location-coverage__areas{border-top-color:rgba(255,255,255,.26)!important}
.location-page .location-coverage__areas span{
  border-bottom-color:rgba(255,255,255,.22)!important;
  background:rgba(6,16,57,.18)!important;
}

.location-page .location-hub-grid{
  padding:clamp(88px,9vw,140px) 0!important;
  background:#0b0e17!important;
  color:#fff!important;
}
.location-page .location-hub-grid h2,
.location-page .location-hub-grid h3{color:#fff!important}

.location-page .location-pricing{
  padding:clamp(88px,9vw,140px) 0!important;
  background:var(--jw49-pale)!important;
  color:var(--jw49-ink)!important;
}
.location-page .location-pricing h2,
.location-page .location-pricing strong,
.location-page .location-pricing span{color:var(--jw49-ink)!important}
.location-page .location-pricing__figures{border-color:var(--jw49-line)!important;gap:12px!important;border:0!important}
.location-page .location-pricing__figures>div{
  padding:26px!important;
  border:1px solid var(--jw49-line)!important;
  background:#fff!important;
  box-shadow:0 15px 38px rgba(31,43,84,.06)!important;
}
.location-page .location-pricing__layout>a{color:var(--jw49-ink)!important}

.location-page .location-faq{
  padding:clamp(88px,9vw,140px) 0!important;
  background:var(--jw49-paper)!important;
}
.location-page .location-faq__list{
  padding:0 clamp(24px,3vw,42px)!important;
  border:1px solid var(--jw49-line)!important;
  background:#fff!important;
  box-shadow:0 20px 50px rgba(25,38,78,.06)!important;
}
.location-page .location-faq h2,
.location-page .location-faq h3{color:var(--jw49-ink)!important}
.location-page .location-faq p{color:#625f58!important}
.location-page .location-nearby{
  padding:46px 0!important;
  background:#080a11!important;
  color:#fff!important;
  border-top:0!important;
}
.location-page .location-nearby a{color:rgba(255,255,255,.78)!important}
.location-page .location-nearby a:hover{color:#fff!important}

/* -------------------------------------------------------------------------- */
/* Service + location pages use the same chapter system.                       */
/* -------------------------------------------------------------------------- */
.local-service-page{
  background:var(--jw49-paper)!important;
  color:var(--jw49-ink)!important;
}
.local-service-page .local-service-hero{
  min-height:680px!important;
  display:flex!important;
  align-items:flex-end!important;
  padding-bottom:clamp(82px,8vw,122px)!important;
  color:#fff!important;
  border-bottom:0!important;
  background:
    radial-gradient(circle at 82% 18%,rgba(50,93,255,.48),transparent 34%),
    linear-gradient(135deg,#080b13,#10182f 58%,#172d71)!important;
}
.local-service-page .local-service-hero h1,
.local-service-page .local-service-hero p{color:#fff!important}
.local-service-page .local-service-hero p{color:rgba(255,255,255,.72)!important}
.local-service-page .local-service-context{padding:clamp(88px,9vw,140px) 0!important;background:var(--jw49-paper)!important}
.local-service-page .local-service-context__copy{padding:36px!important;border:1px solid var(--jw49-line)!important;background:#fff!important}
.local-service-page .local-service-capabilities{padding:clamp(88px,9vw,140px) 0!important;background:linear-gradient(145deg,#080a11,#111a35)!important;color:#fff!important}
.local-service-page .local-service-capabilities h2,.local-service-page .local-service-capabilities h3{color:#fff!important}
.local-service-page .local-service-capabilities p{color:rgba(255,255,255,.62)!important}
.local-service-page .local-service-coverage{padding:clamp(88px,9vw,140px) 0!important;background:linear-gradient(135deg,var(--jw49-blue),var(--jw49-blue-deep))!important;color:#fff!important}
.local-service-page .local-service-links{padding:clamp(76px,8vw,120px) 0!important;background:var(--jw49-pale)!important}
.local-service-page .location-faq{padding:clamp(88px,9vw,140px) 0!important;background:var(--jw49-paper)!important}
.local-service-page .location-faq__list{padding:0 30px!important;border:1px solid var(--jw49-line)!important;background:#fff!important}

/* -------------------------------------------------------------------------- */
/* Tablet/mobile                                                               */
/* -------------------------------------------------------------------------- */
@media(max-width:1000px){
  .areas-page .jw47-area-services{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .location-page .location-hero__grid{grid-template-columns:1fr minmax(300px,.72fr)!important}
  .location-page .jw45-location-panel{grid-column:2!important;grid-row:1 / span 2!important}
}

@media(max-width:760px){
  .portfolio-page,
  .case-study-page,
  .about-page,
  .contact-page,
  .services-page,
  .service-detail-page,
  .insights-page,
  .insight-article-page,
  .areas-page,
  .location-page,
  .local-service-page{padding-top:0!important}

  .portfolio-hero,
  .case-study-hero,
  .about-hero,
  .contact-hero,
  .insights-hero,
  .insight-article-hero,
  .areas-hero,
  .location-hero,
  .local-service-hero{padding-top:130px!important}

  .services-page .services-hero.jw44-services-hero,
  .service-detail-page .service-detail-hero.jw43-video-hero,
  .jw45-app-design-page .jw45-app-hero{padding-top:132px!important}

  .areas-page .areas-hero,.location-page .location-hero,.local-service-page .local-service-hero{min-height:auto!important}
  .areas-page .jw47-area-services{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:12px!important;padding-bottom:10px!important}
  .areas-page .jw47-area-services>a{flex:0 0 84vw!important;scroll-snap-align:start!important;min-height:390px!important}
  .areas-page .jw47-location-grid{grid-template-columns:1fr!important}
  .areas-page .jw47-location-grid article>div{grid-template-columns:1fr!important}

  .location-page .location-hero__grid{grid-template-columns:1fr!important;gap:28px!important}
  .location-page .jw45-location-panel{grid-column:1!important;grid-row:auto!important}
  .location-page .location-context__copy{padding:24px 20px!important}
  .location-page .location-benefits__grid{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:12px!important}
  .location-page .location-benefits article{flex:0 0 84vw!important;scroll-snap-align:start!important;min-height:360px!important}
  .location-page .location-pricing__figures{grid-template-columns:1fr!important}
  .location-page .location-faq__list{padding:0 18px!important}

  .local-service-page .local-service-hero__grid{grid-template-columns:1fr!important}
}

@media(prefers-reduced-motion:reduce){
  .areas-page *,
  .location-page *,
  .local-service-page *{animation:none!important;transition-duration:.01ms!important}
}