/* JP Whyte stable rollback final fixes - 2026-07-04 */
html, body { max-width:100%; overflow-x:hidden; }
body { -webkit-font-smoothing:antialiased; }
main, section, header, footer, .container { max-width:100%; }
img, video, iframe { max-width:100%; }
.container > *, .grid-3 > *, .split > *, .showcase > *, .designer-flow-grid > *, .cinematic-grid > *, .contact-grid > * { min-width:0; }
.nav a.quote, .mobile-menu a:last-child { font-weight:950; }
.nav { flex-wrap:wrap; justify-content:flex-end; }
.site-header { isolation:isolate; }
.cinematic-showcase { isolation:isolate; }
.cinematic-window, .floating-spec { max-width:100%; }
.main-window { z-index:3; }
.small-window { z-index:4; }
.floating-spec { z-index:6; }
.media-stack .floating-card { position:static !important; margin:1rem 0 0 !important; max-width:none !important; }
.showcase { align-items:start !important; gap:clamp(1rem,2.4vw,1.6rem) !important; overflow:visible; }
.video-card { position:relative !important; width:100% !important; max-width:100% !important; aspect-ratio:16/9 !important; height:auto !important; min-height:0 !important; overflow:hidden !important; align-self:start !important; contain:layout paint; }
.video-card video { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:0 !important; object-fit:contain !important; background:#000 !important; display:block !important; }
.project-card { position:relative; z-index:1; }
.app-preview { position:relative; overflow:hidden; padding:clamp(4rem,7vw,7rem) 0; background:radial-gradient(circle at 12% 18%,rgba(24,138,213,.18),transparent 30%),radial-gradient(circle at 92% 18%,rgba(216,182,107,.18),transparent 32%),linear-gradient(180deg,#f8fcff,#eef8ff); }
.app-preview:before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 0 32%,rgba(255,255,255,.62) 32% 33%,transparent 33% 100%); pointer-events:none; }
.app-preview-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(330px,.72fr); align-items:center; gap:clamp(1.1rem,4vw,3rem); }
.app-preview-copy h2 { font-size:clamp(2.25rem,5vw,5.1rem); line-height:.94; letter-spacing:-.06em; margin:.55rem 0 .85rem; }
.app-preview-copy p { color:#526072; font-size:1.08rem; line-height:1.65; font-weight:800; max-width:680px; }
.app-feature-list { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.1rem 0 1.25rem; }
.app-feature-list span { display:inline-flex; border:1px solid rgba(7,21,43,.08); background:#fff; border-radius:999px; padding:.62rem .82rem; color:#075c9c; font-weight:950; box-shadow:0 10px 26px rgba(7,21,43,.06); }
.app-phone { width:min(100%,440px); justify-self:end; border-radius:42px; padding:.9rem; background:linear-gradient(145deg,#061326,#0b2447 54%,#188ad5); color:#fff; box-shadow:0 34px 100px rgba(7,21,43,.24); border:1px solid rgba(255,255,255,.24); }
.app-phone-top { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.55rem .55rem .82rem; font-weight:950; }
.app-phone-top span { width:42px; height:6px; border-radius:999px; background:rgba(255,255,255,.32); }
.app-phone-top strong { font-size:.9rem; text-align:center; }
.app-phone-top em { font-style:normal; color:#f7d88e; font-size:.85rem; white-space:nowrap; }
.paint-game-room { position:relative; height:250px; border-radius:32px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.18) 18%,var(--room-colour) 18% 74%,#e9d8c2 74% 100%); border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 1px rgba(255,255,255,.24); transition:background .3s ease; }
.room-window { position:absolute; right:12%; top:15%; width:28%; height:28%; border-radius:18px; background:linear-gradient(135deg,#dff4ff,#ffffff); border:7px solid rgba(255,255,255,.88); box-shadow:0 16px 36px rgba(7,21,43,.14); }
.room-window:before, .room-window:after { content:""; position:absolute; background:rgba(7,21,43,.12); }
.room-window:before { left:50%; top:0; bottom:0; width:2px; }
.room-window:after { top:50%; left:0; right:0; height:2px; }
.room-skirting { position:absolute; left:0; right:0; bottom:25%; height:9px; background:rgba(255,255,255,.86); box-shadow:0 7px 18px rgba(7,21,43,.10); }
.paint-spot { position:absolute; width:34px; height:34px; border:2px solid rgba(7,21,43,.22); border-radius:999px; background:rgba(255,255,255,.72); box-shadow:0 10px 24px rgba(7,21,43,.18); cursor:pointer; transition:.22s ease; }
.paint-spot:after { content:""; position:absolute; inset:10px; border-radius:999px; background:#188ad5; }
.paint-spot:hover { transform:scale(1.1); }
.paint-spot.is-fixed { opacity:0; transform:scale(.2); pointer-events:none; }
.spot-one { left:16%; top:34%; }
.spot-two { left:46%; top:22%; }
.spot-three { right:20%; top:55%; }
.app-task-card { margin-top:.85rem; border-radius:30px; padding:1rem; background:rgba(255,255,255,.94); color:#07152b; }
.app-task-card strong { display:block; font-size:1.18rem; letter-spacing:-.02em; }
.app-task-card p { color:#526072; margin:.35rem 0 .8rem; line-height:1.45; font-weight:760; }
.app-swatches, .app-steps { display:flex; flex-wrap:wrap; gap:.5rem; }
.app-swatches button { width:42px; height:42px; border:2px solid transparent; border-radius:999px; padding:4px; background:#fff; box-shadow:0 8px 18px rgba(7,21,43,.08); cursor:pointer; }
.app-swatches button span { display:block; width:100%; height:100%; border-radius:999px; border:1px solid rgba(7,21,43,.08); }
.app-swatches button.active { border-color:#188ad5; }
.app-steps { margin-top:.75rem; }
.app-steps button, .app-reset { border:1px solid rgba(7,21,43,.08); border-radius:999px; background:#eef7fc; color:#07152b; padding:.62rem .78rem; font-weight:950; cursor:pointer; }
.app-steps button.is-done { background:linear-gradient(135deg,#07152b,#188ad5); color:#fff; }
.app-progress { margin-top:.9rem; height:10px; border-radius:999px; background:#e5edf5; overflow:hidden; }
.app-progress span { display:block; height:100%; width:0%; border-radius:inherit; background:linear-gradient(90deg,#188ad5,#4ce094); transition:width .25s ease; }
.app-reset { margin-top:.75rem; background:#07152b; color:#fff; }
@media(max-width:1120px){.nav{gap:.05rem}.nav a{padding:.62rem .54rem;font-size:.9rem}.nav .quote{padding:.75rem .9rem}.app-preview-grid{grid-template-columns:1fr}.app-phone{justify-self:center}}
@media(max-width:980px){.showcase{grid-template-columns:1fr !important}.video-card{margin:0 0 .25rem !important}}
@media(max-width:760px){.cinematic-showcase{display:grid !important;grid-template-columns:1fr 1fr;grid-template-areas:"main main" "small1 small2" "spec spec";gap:.75rem;min-height:0 !important;perspective:none !important;transform-style:flat !important;opacity:1 !important;animation:none !important}.cinematic-showcase .showcase-glow,.cinematic-showcase .scroll-cue{display:none !important}.cinematic-showcase .main-window,.cinematic-showcase .small-window,.cinematic-showcase .floating-spec{position:relative !important;inset:auto !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;transform:none !important;translate:none !important;opacity:1 !important;animation:none !important;clip-path:none !important;width:100% !important;max-width:100% !important}.cinematic-showcase .main-window{grid-area:main;height:auto !important;aspect-ratio:16/10}.cinematic-showcase .small-window{height:auto !important;aspect-ratio:1.35/1}.cinematic-showcase .small-window-one{grid-area:small1}.cinematic-showcase .small-window-two{grid-area:small2}.cinematic-showcase .floating-spec{grid-area:spec;justify-self:center;width:min(100%,330px) !important}.route-grid{grid-template-columns:1fr !important}.route-card-primary{grid-column:auto !important}.app-phone{border-radius:32px;padding:.7rem}.paint-game-room{height:220px;border-radius:26px}}
@media(max-width:640px){.showcase{gap:1rem !important}.project-card{padding:1.15rem !important;border-radius:26px !important}.video-card{border-radius:24px !important}.app-preview{padding:3.5rem 0}.app-preview-copy h2{font-size:2.65rem}.app-preview-grid{gap:1.2rem}.app-phone-top{display:grid;grid-template-columns:42px 1fr auto}.app-task-card{border-radius:24px}.app-steps button{flex:1 1 calc(50% - .5rem)}}
/* Feedback polish - 2026-07-04: cleaner sliders, hero image fit, aligned cards */
.page-hero-image{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  aspect-ratio:16/10 !important;
  min-height:320px !important;
  max-height:430px !important;
  background:linear-gradient(135deg,#f7fbff,#e8f4fb) !important;
  border-radius:34px !important;
  overflow:hidden !important;
}
.page-hero-image img{
  width:100% !important;
  height:100% !important;
  min-height:320px !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  background:transparent !important;
  padding:0 !important;
}
.page-hero-image img[src*="jp-whyte-logo"],
.page-hero-image img[src*="logo"]{
  object-fit:contain !important;
  padding:clamp(1.4rem,3vw,2.4rem) !important;
  background:#fff !important;
}

/* Before/after slider labels: keep them as small pills, not long grey/black bars. */
.ba-slider-ready .ba-images{
  background:#f6fbff !important;
  border-radius:28px !important;
  padding:0 !important;
  border:0 !important;
}
.ba-slider-ready .ba-images figure{
  border:0 !important;
  border-radius:0 !important;
  background:#f6fbff !important;
}
.ba-slider-ready .ba-images img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  background:#f6fbff !important;
}
.ba-slider-ready .ba-images figure span{
  left:auto !important;
  right:auto !important;
  width:auto !important;
  max-width:max-content !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  line-height:1 !important;
  background:rgba(6,19,38,.86) !important;
  box-shadow:0 10px 24px rgba(6,19,38,.18) !important;
}
.ba-slider-ready .ba-images figure:nth-child(1) span{ left:.9rem !important; right:auto !important; }
.ba-slider-ready .ba-images figure:nth-child(2) span{ right:.9rem !important; left:auto !important; background:rgba(34,148,87,.92) !important; }
.ba-handle{ background:rgba(255,255,255,.96) !important; box-shadow:0 0 0 1px rgba(7,21,43,.08),0 0 22px rgba(255,255,255,.56) !important; }
.ba-handle i{ width:42px !important; height:42px !important; }

/* Keep project/image grids lined up cleanly. */
.before-after-grid{
  align-items:stretch !important;
  grid-auto-rows:1fr !important;
}
.before-after-grid > .work-card,
.before-after-grid > .ba-card,
.gallery > .work-card{
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}
.work-card figcaption,
.ba-card .copy{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}
.before-after-grid .work-card img,
.gallery .work-card img{
  height:clamp(260px,28vw,340px) !important;
  object-fit:cover !important;
  object-position:center !important;
  background:#f6fbff !important;
}
.before-after-grid .ba-images{
  min-height:clamp(260px,28vw,340px) !important;
}
.ba-card:not(.ba-slider-ready) .ba-images img{
  height:clamp(250px,24vw,310px) !important;
  object-fit:cover !important;
  background:#f6fbff !important;
}

@media(max-width:900px){
  .page-hero-image{ min-height:280px !important; }
  .page-hero-image img{ min-height:280px !important; }
}
@media(max-width:640px){
  .page-hero-image{ min-height:230px !important; aspect-ratio:4/3 !important; }
  .page-hero-image img{ min-height:230px !important; }
  .before-after-grid .work-card img,
  .gallery .work-card img,
  .before-after-grid .ba-images{ height:260px !important; min-height:260px !important; }
}

/* Mobile-only website fixes - 2026-07-04
   Keeps desktop/computer layout untouched. */
@media (max-width: 760px){
  /* Stop invisible reveal sections creating big blank clickable gaps on iPhone/Safari. */
  .reveal,
  .reveal:not(.is-visible),
  section.reveal,
  .card.reveal,
  .work-card.reveal,
  .ba-card.reveal,
  .project-card.reveal,
  .article-body.reveal,
  .question-panel.reveal,
  .ad-slot.reveal{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    translate:none !important;
    filter:none !important;
    animation:none !important;
    transition:none !important;
    pointer-events:auto !important;
  }

  /* Tighten mobile vertical rhythm so pages do not feel empty between sections. */
  main > section, section, .page-hero, .page-route{
    min-height:0 !important;
  }

  main > section:not(.hero):not(.cinematic-hero):not(.page-hero), .page-route{
    padding-top:2.15rem !important;
    padding-bottom:2.15rem !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  .page-hero{
    padding-top:2.4rem !important;
    padding-bottom:2.4rem !important;
  }

  .section-head{
    margin-bottom:1.05rem !important;
  }

  .section-head h2, .page-hero h1{
    font-size:clamp(2.05rem,9.5vw,3rem) !important;
    line-height:1.02 !important;
    letter-spacing:-.055em !important;
  }

  .section-head p, .page-hero p{
    font-size:1rem !important;
    line-height:1.42 !important;
  }

  /* Make the floating mobile CTA a bit less intrusive and leave content room behind it. */
  body,
  main,
  .site-main{
    padding-bottom:7rem !important;
  }

  .mobile-sticky-cta,
  .sticky-cta{
    left:.72rem !important;
    right:.72rem !important;
    bottom:max(.45rem, env(safe-area-inset-bottom)) !important;
    padding:.34rem !important;
    gap:.42rem !important;
    box-shadow:0 16px 42px rgba(4,16,35,.20) !important;
    z-index:9990 !important;
  }

  .mobile-sticky-cta a,
  .sticky-cta a{
    min-height:43px !important;
    font-size:.98rem !important;
    padding:.62rem .7rem !important;
  }
}

/* Hide side flow rail on small screens so it does not clash with mobile CTAs */
@media(max-width:760px){.flow-rail{display:none !important;}}


/* 2026 enquiry + SEO expansion additions */
.project-proof-grid,.case-study-grid,.seo-faq-grid,.service-area-grid{display:grid;gap:1.1rem}
.project-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.case-study-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.seo-faq-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.2rem}
.service-area-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1.2rem}
.proof-card,.case-study-card,.seo-faq-card,.service-area-card{background:rgba(255,255,255,.92);border:1px solid var(--line,#dce8f2);border-radius:26px;box-shadow:0 14px 34px rgba(7,21,43,.08);overflow:hidden}
.proof-card img,.case-study-card img{width:100%;height:255px;object-fit:cover;display:block;background:#f8fbff}
.proof-card .copy,.case-study-card .copy,.seo-faq-card,.service-area-card{padding:1.1rem}
.proof-card h3,.case-study-card h3,.seo-faq-card h3,.service-area-card h3{margin:.1rem 0 .45rem;line-height:1.12;color:var(--ink,#07152b)}
.proof-card p,.case-study-card p,.seo-faq-card p,.service-area-card p{margin:0;color:var(--muted,#5b6b7c);font-weight:760;line-height:1.5}
.proof-card a,.case-study-card a,.service-area-card a{display:inline-block;margin-top:.8rem;color:#0a7fce;font-weight:950}
.ai-answer-box{background:linear-gradient(135deg,#f0f8ff,#ffffff);border:1px solid rgba(24,138,213,.18);border-radius:28px;padding:1.35rem;margin:1.2rem 0;box-shadow:0 12px 32px rgba(7,21,43,.06)}
.ai-answer-box strong{display:block;margin-bottom:.35rem;color:#07152b;font-size:1.15rem}.ai-answer-box p{margin:0;color:#526072;font-weight:800;line-height:1.55}
.area-pill-grid{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}.area-pill-grid a{display:inline-flex;align-items:center;border:1px solid var(--line,#dce8f2);background:#fff;border-radius:999px;padding:.72rem 1rem;font-weight:950;box-shadow:0 6px 16px rgba(7,21,43,.04)}
@media(max-width:980px){.project-proof-grid,.case-study-grid,.seo-faq-grid,.service-area-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.project-proof-grid,.case-study-grid,.seo-faq-grid,.service-area-grid{grid-template-columns:1fr}.proof-card img,.case-study-card img{height:230px}}


/* Final SEO/customer-friendly additions */
.coverage-ai-section{padding:4rem 0;background:linear-gradient(180deg,#f8fcff,#eef7fc)}
.area-pill-grid{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.2rem}.area-pill-grid a{display:inline-flex;align-items:center;border:1px solid rgba(7,21,43,.09);background:#fff;border-radius:999px;padding:.72rem 1rem;font-weight:950;color:#07152b;box-shadow:0 10px 24px rgba(7,21,43,.06)}.area-pill-grid a:hover{background:#e9f6ff;color:#0b78c9}

/* 2026-07-22 mobile release: keep badges clear of headings and CTAs clear of content. */
@media(max-width:760px){
  body,
  main,
  .site-main{padding-bottom:0 !important}

  footer,
  .site-footer{padding-bottom:3rem !important}

  .mobile-sticky-cta,
  .sticky-cta{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:min(calc(100% - 1.5rem),680px) !important;
    margin:1.25rem auto 0 !important;
    padding:.42rem !important;
    gap:.45rem !important;
    z-index:2 !important;
    border-radius:22px !important;
  }

  .mobile-sticky-cta a,
  .sticky-cta a{
    min-height:48px !important;
    border-radius:16px !important;
  }

  .kicker,
  .section-head > .kicker,
  .page-hero .kicker,
  .dark-panel > .kicker,
  .designer-copy > .kicker,
  .signature-card .copy > .kicker,
  .project-card > .kicker,
  .featured-classroom-project .kicker{
    position:static !important;
    display:inline-flex !important;
    align-items:center !important;
    max-width:100% !important;
    margin:0 0 .8rem !important;
    padding:.48rem .7rem !important;
    border-radius:14px !important;
    line-height:1.18 !important;
    white-space:normal !important;
  }

  .section-head > h2,
  .designer-copy > h2,
  .signature-card .copy > h3,
  .project-card > h2,
  .featured-classroom-project h2{
    margin-top:0 !important;
  }
}