/* James Woolford Design — expressive section system + mobile hero v37 */

:root{
  --jw-ink:#101010;
  --jw-blue:#2458ff;
  --jw-cream:#f3f1eb;
  --jw-paper:#fbfaf6;
  --jw-line:rgba(16,16,16,.14);
  --jw-dark:#101116;
  --jw-dark-2:#15192a;
}

/* Stop the v36 fixed background from making every section look identical. */
.portfolio-page,
.services-page,
.service-detail-page,
.insights-page,
.about-page{
  background:var(--jw-cream)!important;
  background-attachment:scroll!important;
}

/* Shared animated section surfaces. */
.jw-section-motion{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
.jw-section-motion::before,
.jw-section-motion::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:999px;
  filter:blur(72px);
  opacity:.58;
  will-change:transform;
}
.jw-section-motion::before{
  width:clamp(280px,34vw,620px);
  height:clamp(280px,34vw,620px);
  right:-12%;
  top:-18%;
  background:radial-gradient(circle,rgba(36,88,255,.25),rgba(36,88,255,.07) 48%,transparent 74%);
  animation:jw-section-drift-a 18s ease-in-out infinite alternate;
}
.jw-section-motion::after{
  width:clamp(220px,28vw,480px);
  height:clamp(220px,28vw,480px);
  left:-10%;
  bottom:-22%;
  background:radial-gradient(circle,rgba(26,31,44,.11),rgba(255,255,255,.04) 52%,transparent 76%);
  animation:jw-section-drift-b 22s ease-in-out infinite alternate-reverse;
}
.jw-section-motion.jw-motion-dark::before{
  opacity:.78;
  background:radial-gradient(circle,rgba(36,88,255,.44),rgba(36,88,255,.12) 46%,transparent 74%);
}
.jw-section-motion.jw-motion-dark::after{
  opacity:.42;
  background:radial-gradient(circle,rgba(255,255,255,.15),rgba(255,255,255,.03) 55%,transparent 78%);
}
.jw-section-motion > .portfolio-shell,
.jw-section-motion > .site-shell,
.jw-section-motion > .trust-section__inner{
  position:relative;
  z-index:1;
}
@keyframes jw-section-drift-a{
  0%{transform:translate3d(0,0,0) scale(.92)}
  55%{transform:translate3d(-34px,28px,0) scale(1.04)}
  100%{transform:translate3d(18px,54px,0) scale(1.12)}
}
@keyframes jw-section-drift-b{
  0%{transform:translate3d(0,0,0) scale(.94)}
  50%{transform:translate3d(38px,-22px,0) scale(1.06)}
  100%{transform:translate3d(-18px,-48px,0) scale(1.12)}
}

/* -------------------------------------------------------------------------- */
/* Page heroes — deliberately separate from the next section.                 */
/* -------------------------------------------------------------------------- */
.portfolio-page .portfolio-hero,
.services-page .services-hero,
.service-detail-page .service-detail-hero,
.insights-page .insights-hero,
.about-page .about-hero{
  background:
    linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.08)),
    var(--jw-cream)!important;
  border-bottom:1px solid var(--jw-line)!important;
}

/* Portfolio project area now reads as a distinct gallery surface. */
.portfolio-page .portfolio-index{
  background:
    linear-gradient(180deg,rgba(36,88,255,.065),transparent 36%),
    #eef1fa!important;
  border-top:1px solid rgba(36,88,255,.12)!important;
  padding-top:clamp(58px,6vw,96px)!important;
  padding-bottom:clamp(92px,10vw,150px)!important;
}
.portfolio-page .portfolio-index__grid{
  gap:clamp(24px,3vw,46px)!important;
}
.portfolio-page .portfolio-index__card{
  padding:12px!important;
  border:1px solid rgba(16,16,16,.12)!important;
  background:rgba(255,255,255,.54)!important;
  box-shadow:0 24px 65px rgba(25,31,52,.06)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease!important;
}
@media(hover:hover){
  .portfolio-page .portfolio-index__card:hover{
    transform:translateY(-8px)!important;
    border-color:rgba(36,88,255,.38)!important;
    box-shadow:0 34px 85px rgba(36,88,255,.12)!important;
  }
}

/* -------------------------------------------------------------------------- */
/* Services hub cards.                                                        */
/* -------------------------------------------------------------------------- */
.services-page .services-grid-section{
  padding:clamp(80px,9vw,140px) 0!important;
  background:#faf9f5!important;
  border-top:1px solid var(--jw-line)!important;
}
.services-page .services-grid{
  border:0!important;
  gap:16px!important;
}
.services-page .service-hub-card{
  border:1px solid rgba(16,16,16,.13)!important;
  background:rgba(255,255,255,.62)!important;
  box-shadow:0 18px 50px rgba(20,20,20,.045)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
@media(hover:hover){
  .services-page .service-hub-card:hover{
    border-color:rgba(36,88,255,.48)!important;
    background:linear-gradient(150deg,#11131b,#18244a)!important;
    box-shadow:0 28px 72px rgba(36,88,255,.16)!important;
  }
}

/* -------------------------------------------------------------------------- */
/* Service detail pages — cards, dark process story and a blue coverage band. */
/* -------------------------------------------------------------------------- */
.service-detail-page .service-capabilities{
  padding:clamp(86px,9vw,142px) 0!important;
  background:#faf9f5!important;
  border-top:1px solid var(--jw-line)!important;
}
.service-detail-page .service-capabilities__grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  border:0!important;
  background:transparent!important;
}
.service-detail-page .service-capabilities__grid article{
  min-height:270px!important;
  padding:32px!important;
  border:1px solid rgba(16,16,16,.13)!important;
  background:rgba(255,255,255,.68)!important;
  box-shadow:0 18px 50px rgba(15,20,35,.05)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease!important;
}
.service-detail-page .service-capabilities__grid article>span{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  border:1px solid rgba(36,88,255,.25)!important;
  background:rgba(36,88,255,.07)!important;
  color:var(--jw-blue)!important;
}
.service-detail-page .service-capabilities__grid h3{
  margin:54px 0 16px!important;
}
@media(hover:hover){
  .service-detail-page .service-capabilities__grid article:hover{
    transform:translateY(-7px)!important;
    border-color:rgba(36,88,255,.4)!important;
    box-shadow:0 30px 76px rgba(36,88,255,.12)!important;
  }
}

.service-detail-page .service-process{
  padding:clamp(92px,10vw,154px) 0!important;
  background:
    linear-gradient(135deg,rgba(36,88,255,.13),transparent 48%),
    var(--jw-dark)!important;
  color:#fff!important;
  border-top:0!important;
}
.service-detail-page .service-process__layout{
  display:block!important;
  grid-template-columns:none!important;
}
.service-detail-page .service-process__intro{
  position:relative!important;
  top:auto!important;
  display:grid!important;
  grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr)!important;
  gap:clamp(40px,8vw,120px)!important;
  align-items:end!important;
  margin:0 0 clamp(48px,6vw,82px)!important;
  padding-bottom:clamp(34px,4vw,56px)!important;
  border-bottom:1px solid rgba(255,255,255,.16)!important;
}
.service-detail-page .service-process__intro h2{
  max-width:9ch!important;
  margin:14px 0 0!important;
  color:#fff!important;
  font-size:clamp(54px,5.7vw,88px)!important;
  line-height:.9!important;
}
.service-detail-page .service-process__steps{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  border:0!important;
}
.service-detail-page .service-process__steps article{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  min-height:300px!important;
  padding:30px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 70px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,background .35s ease!important;
}
.service-detail-page .service-process__steps>article>span{
  display:grid!important;
  place-items:center!important;
  width:46px!important;
  height:46px!important;
  border:1px solid rgba(116,145,255,.42)!important;
  background:rgba(36,88,255,.14)!important;
  color:#90a7ff!important;
  font-size:10px!important;
}
.service-detail-page .service-process__steps article>div{
  margin-top:auto!important;
}
.service-detail-page .service-process__steps h3{
  margin:58px 0 14px!important;
  color:#fff!important;
  font-size:clamp(31px,3vw,44px)!important;
}
.service-detail-page .service-process__steps p{
  color:rgba(255,255,255,.62)!important;
}
@media(hover:hover){
  .service-detail-page .service-process__steps article:hover{
    transform:translateY(-7px)!important;
    border-color:rgba(96,128,255,.68)!important;
    background:linear-gradient(145deg,rgba(36,88,255,.2),rgba(255,255,255,.04))!important;
  }
}

.service-detail-page .service-coverage{
  padding:clamp(70px,8vw,118px) 0!important;
  background:
    radial-gradient(circle at 90% 10%,rgba(255,255,255,.22),transparent 34%),
    linear-gradient(135deg,#dfe7ff,#f3f1eb 68%)!important;
  border-top:1px solid rgba(36,88,255,.14)!important;
}
.service-detail-page .service-coverage__areas span,
.service-detail-page .service-coverage__areas a{
  border-color:rgba(36,88,255,.2)!important;
  background:rgba(255,255,255,.58)!important;
  box-shadow:0 10px 28px rgba(36,88,255,.05)!important;
}
.service-detail-page .service-coverage__areas a:last-child{
  background:#11131b!important;
  color:#fff!important;
}

/* -------------------------------------------------------------------------- */
/* Insights — feature stage, article cards and clear section hierarchy.        */
/* -------------------------------------------------------------------------- */
.insights-page .insights-featured{
  padding:clamp(74px,8vw,120px) 0!important;
  background:linear-gradient(145deg,#101116,#18244a)!important;
  border-top:0!important;
}
.insights-page .insight-feature-card{
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.22)!important;
}
.insights-page .insights-list-section{
  padding:clamp(78px,9vw,138px) 0!important;
  background:#faf9f5!important;
  border-top:1px solid var(--jw-line)!important;
}
.insights-page .insights-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  margin-top:28px!important;
}
.insights-page .insight-row{
  display:flex!important;
  flex-direction:column!important;
  min-height:330px!important;
  padding:30px!important;
  border:1px solid rgba(16,16,16,.13)!important;
  background:rgba(255,255,255,.68)!important;
  box-shadow:0 18px 50px rgba(20,20,20,.045)!important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease!important;
}
.insights-page .insight-row__number{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  border:1px solid rgba(36,88,255,.25)!important;
  background:rgba(36,88,255,.07)!important;
}
.insights-page .insight-row>div:not(.insight-row__meta){
  margin-top:auto!important;
}
.insights-page .insight-row__meta{
  margin-top:24px!important;
  justify-content:space-between!important;
}
@media(hover:hover){
  .insights-page .insight-row:hover{
    transform:translateY(-7px)!important;
    border-color:rgba(36,88,255,.42)!important;
    box-shadow:0 30px 76px rgba(36,88,255,.11)!important;
  }
}

/* -------------------------------------------------------------------------- */
/* About — card-based proof, dark principles and boxed timeline.               */
/* -------------------------------------------------------------------------- */
.about-page .about-intro{
  padding:clamp(88px,10vw,150px) 0!important;
  background:#faf9f5!important;
  border-top:1px solid var(--jw-line)!important;
}
.about-page .about-intro__grid{
  padding:clamp(32px,4vw,58px)!important;
  border:1px solid rgba(16,16,16,.13)!important;
  background:rgba(255,255,255,.64)!important;
  box-shadow:0 24px 70px rgba(20,24,38,.055)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.about-page .about-proof{
  padding:clamp(66px,8vw,112px) 0!important;
  background:linear-gradient(135deg,#e2e9ff,#f3f1eb 70%)!important;
  border-top:1px solid rgba(36,88,255,.14)!important;
  border-bottom:1px solid rgba(36,88,255,.14)!important;
}
.about-page .about-proof__grid{
  gap:14px!important;
}
.about-page .about-proof article{
  min-height:230px!important;
  padding:28px!important;
  border:1px solid rgba(36,88,255,.16)!important;
  background:rgba(255,255,255,.56)!important;
  box-shadow:0 16px 44px rgba(36,88,255,.055)!important;
}
.about-page .about-approach{
  padding:clamp(92px,10vw,150px) 0!important;
  background:linear-gradient(145deg,#101116,#18244a)!important;
  color:#fff!important;
  border:0!important;
}
.about-page .about-approach__head h2,
.about-page .about-approach__grid h3{
  color:#fff!important;
}
.about-page .about-approach__grid{
  gap:16px!important;
  border:0!important;
}
.about-page .about-approach__grid article{
  min-height:350px!important;
  padding:30px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important;
  box-shadow:0 28px 80px rgba(0,0,0,.18)!important;
}
.about-page .about-approach__grid p{
  color:rgba(255,255,255,.64)!important;
}
.about-page .about-timeline{
  padding:clamp(88px,10vw,150px) 0!important;
  background:#faf9f5!important;
  border-top:1px solid var(--jw-line)!important;
}
.about-page .about-timeline__track{
  display:grid!important;
  gap:14px!important;
  border:0!important;
}
.about-page .about-timeline__track article{
  padding:28px!important;
  border:1px solid rgba(16,16,16,.13)!important;
  background:rgba(255,255,255,.7)!important;
  box-shadow:0 16px 44px rgba(20,20,20,.045)!important;
}

/* -------------------------------------------------------------------------- */
/* Reliable FAQ — no React/reveal race, answer stays open.                    */
/* -------------------------------------------------------------------------- */
.faq-answer{
  display:grid!important;
  grid-template-rows:0fr!important;
  height:auto!important;
  max-height:none!important;
  overflow:hidden!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:grid-template-rows .38s cubic-bezier(.22,1,.36,1),opacity .22s ease!important;
}
.faq-answer>div{
  min-height:0!important;
  overflow:hidden!important;
}
.faq-item[data-jw-open="true"] .faq-answer{
  grid-template-rows:1fr!important;
  opacity:1!important;
  visibility:visible!important;
}
.faq-item[data-jw-open="true"] .faq-answer p{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  color:#625e57!important;
}

/* Swipe guides used on secondary-page card collections. */
.jw-swipe-guide{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:max-content;
  max-width:100%;
  margin:0 0 18px;
  padding:10px 14px;
  border-radius:999px;
  background:var(--jw-blue);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:0 12px 30px rgba(36,88,255,.18);
}
.jw-swipe-guide::after{
  content:"→";
  font-size:16px;
  animation:jw-swipe-arrow 1.25s ease-in-out infinite;
}
@keyframes jw-swipe-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* -------------------------------------------------------------------------- */
/* Mobile hero: navigation is a separate bar and package explanation visible. */
/* -------------------------------------------------------------------------- */
@media(max-width:760px){
  .site-header{
    top:0!important;
    padding:0!important;
    background:#0d0f15!important;
    border-bottom:1px solid rgba(255,255,255,.1)!important;
  }
  .site-header__bar{
    width:100%!important;
    height:72px!important;
    margin:0!important;
    border-radius:0!important;
    border-top:0!important;
    border-left:0!important;
    border-right:0!important;
    box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
  }
  body.admin-bar .site-header{top:46px!important}

  .website-stage{
    height:calc(300svh + 72px)!important;
    padding-top:72px!important;
  }
  .website-stage__sticky{
    top:72px!important;
    height:calc(100svh - 72px)!important;
    min-height:0!important;
  }
  body.admin-bar .website-stage__sticky{
    top:118px!important;
    height:calc(100svh - 118px)!important;
  }
  .slide__content{
    padding:26px 18px 82px!important;
    grid-template-rows:auto 1fr auto!important;
  }
  .slide__meta{
    margin-top:3px!important;
  }
  .slide__headline-wrap{
    align-self:center!important;
    width:100%!important;
    margin-top:-2vh!important;
    padding-bottom:0!important;
  }
  .slide__title{
    max-width:9ch!important;
    font-size:clamp(46px,14.5vw,70px)!important;
    line-height:.82!important;
  }
  .slide__price{
    margin-top:16px!important;
    font-size:clamp(26px,8vw,38px)!important;
  }
  .slide__bottom-copy{
    display:block!important;
    width:100%!important;
    max-width:390px!important;
    margin:0 0 18px!important;
    padding:14px 15px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    background:rgba(5,8,15,.58)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.22)!important;
    backdrop-filter:blur(15px)!important;
    -webkit-backdrop-filter:blur(15px)!important;
  }
  .slide__bottom-copy p{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    overflow:hidden!important;
    max-width:34ch!important;
    margin:0 0 11px!important;
    color:rgba(255,255,255,.78)!important;
    font-size:12px!important;
    line-height:1.48!important;
  }
  .slide__cta{
    font-size:9px!important;
  }
  .slider-footer{
    bottom:12px!important;
  }
  .whatsapp-float.is-hero-visible{
    bottom:90px!important;
  }

  .portfolio-page,
  .services-page,
  .service-detail-page,
  .insights-page,
  .about-page{
    padding-top:72px!important;
  }
  body.admin-bar .portfolio-page,
  body.admin-bar .services-page,
  body.admin-bar .service-detail-page,
  body.admin-bar .insights-page,
  body.admin-bar .about-page{
    padding-top:118px!important;
  }
  .services-page .services-hero,
  .insights-page .insights-hero,
  .about-page .about-hero,
  .service-detail-page .service-detail-hero{
    padding-top:46px!important;
  }

  .jw-swipe-guide{display:flex!important}

  .service-detail-page .service-capabilities__grid,
  .service-detail-page .service-process__steps,
  .about-page .about-approach__grid,
  .services-page .services-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:none!important;
    padding:0 18px 18px!important;
    margin-left:-18px!important;
    margin-right:-18px!important;
  }
  .service-detail-page .service-capabilities__grid::-webkit-scrollbar,
  .service-detail-page .service-process__steps::-webkit-scrollbar,
  .about-page .about-approach__grid::-webkit-scrollbar,
  .services-page .services-grid::-webkit-scrollbar{display:none!important}

  .service-detail-page .service-capabilities__grid article,
  .service-detail-page .service-process__steps article,
  .about-page .about-approach__grid article,
  .services-page .service-hub-card{
    flex:0 0 84vw!important;
    width:84vw!important;
    scroll-snap-align:start!important;
  }
  .service-detail-page .service-process__intro{
    display:block!important;
  }
  .service-detail-page .service-process__steps article{
    min-height:330px!important;
  }
  .service-detail-page .service-capabilities__grid article{
    min-height:260px!important;
  }

  .insights-page .insights-list{
    grid-template-columns:1fr!important;
  }
  .insights-page .insight-row{
    min-height:280px!important;
  }

  .about-page .about-proof__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .about-page .about-proof article{
    min-height:180px!important;
  }
}

@media(max-width:480px){
  .about-page .about-proof__grid{grid-template-columns:1fr!important}
  .about-page .about-proof article{min-height:160px!important}
}

@media(prefers-reduced-motion:reduce){
  .jw-section-motion::before,
  .jw-section-motion::after,
  .jw-swipe-guide::after{animation:none!important}
}