/* V8 | Two user-supplied images as full-bleed backgrounds, not photo cards.
   Overview: seated veranda portrait RIGHT / copy LEFT.
   Contact: walking portrait LEFT / contact details RIGHT. */
:root { --v8-navy:#061422; }
/* ================================================================ */
#overview {
  isolation:isolate!important;
  position:relative!important;
  min-height:800px!important;
  padding:clamp(48px,5.5vw,80px) 0 68px!important;
  background-color:#071a27!important;
  background-image:
    linear-gradient(90deg,rgba(3,13,24,.96) 0%,rgba(3,13,24,.92) 19%,rgba(3,13,24,.80) 37%,rgba(3,13,24,.44) 58%,rgba(3,13,24,.07) 78%,rgba(3,13,24,.05) 100%),
    linear-gradient(180deg,rgba(3,13,24,.22) 0%,transparent 24%,rgba(3,13,24,.03) 62%,#061422 100%),
    url('images/overview-seated-fullbleed.webp')!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
  border-bottom:1px solid rgba(100,194,214,.18)!important;
}
#overview::before {
  content:""!important;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 57% 55%,rgba(4,27,46,.18),transparent 65%)!important;
  opacity:1!important;-webkit-mask-image:none!important;mask-image:none!important;
}
#overview::after{opacity:0!important;background:none!important;}
#overview>.max-w-7xl {position:relative;z-index:2;}
#overview .grid.lg\\:grid-cols-12 {align-items:center!important;}
#overview .hero-copy{grid-column:1 / span 7;max-width:690px;position:relative;z-index:2;
  border-radius:20px;background:linear-gradient(90deg,rgba(3,15,27,.17),transparent);}
#overview .hero-impact-strip{margin-top:48px!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
#overview h1{font-size:clamp(3.3rem,5.7vw,6rem)!important;text-shadow:0 6px 20px rgba(0,0,0,.45);}
#overview #hero-subtitle{color:#99e9ff!important;text-shadow:0 2px 9px #03101ea3;}
#overview #hero-summary{color:#e3edf4!important;text-shadow:0 2px 9px #03101ec5;line-height:1.78!important;}
#overview .hero-overline{margin-bottom:28px!important;}
#overview .hero-scroll-hint{z-index:3;}
/* The first photo is the whole contact background; no extra dish or overlaid portraits. */
#contact {
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
  isolation:isolate!important;
  min-height:730px!important;padding:95px 0 84px!important;
  background-color:#071a27!important;
  background-image:
    linear-gradient(90deg,rgba(3,14,23,.03) 0%,rgba(3,14,23,.07) 20%,rgba(3,14,23,.35) 42%,rgba(3,14,23,.76) 57%,rgba(3,14,23,.94) 78%,rgba(3,14,23,.96) 100%),
    linear-gradient(180deg,rgba(3,14,23,.12) 0%,rgba(3,14,23,.02) 25%,rgba(3,14,23,.23) 70%,rgba(3,14,23,.83) 100%),
    url('images/contact-walk-fullbleed.webp')!important;
  background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;
}
#contact::before{content:""!important;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 75% 45%,rgba(4,17,31,.3),transparent 55%)!important;}
#contact::after{display:none!important;}
#contact .contact-inner {
  display:grid!important;position:relative!important;z-index:2;width:min(100%,1280px)!important;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;
  align-items:center!important;margin:0 auto!important;padding:0 30px!important;gap:0!important;
}
#contact .contact-content {grid-column:2!important;max-width:760px!important;width:100%!important;
  padding:28px 0!important;position:relative;z-index:2;text-align:left!important;}
#contact .contact-content>h2 {margin:0 0 4px!important;max-width:750px!important;line-height:1.16!important;
  font-size:clamp(2rem,3.1vw,3.2rem)!important;letter-spacing:-.025em;}
#contact .contact-content>p {margin:0!important;max-width:700px!important;line-height:1.75!important;color:#d5e1e9!important;}
#contact .contact-content>.grid {grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:none!important;
  margin:0!important;width:100%!important;gap:10px!important;}
#contact .contact-content>.grid a {min-width:0!important;background:rgba(7,29,46,.80)!important;
  border:1px solid rgba(94,193,218,.28)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
#contact .contact-content>.grid a:hover{border-color:#5eead4!important;background:rgba(7,38,57,.91)!important;}
#contact .contact-content>.pt-10{border-color:rgba(135,186,204,.2)!important;}
/* Tablet: keep subjects on their original sides, no competing images. */
@media(min-width:768px) and (max-width:1150px){
 #overview{min-height:750px!important;background-position:62% center!important;}
 #overview .hero-copy{grid-column:1 / span 8!important;max-width:650px!important;}
 #contact{min-height:690px!important;background-position:43% center!important;}
 #contact .contact-inner{grid-template-columns:minmax(0,.57fr) minmax(0,1.43fr)!important;}
 #contact .contact-content>.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
 #contact .contact-content>.grid a{flex-direction:column!important;text-align:center!important;justify-content:center!important;}
}
/* Mobile: photographs remain backgrounds in a dedicated cinematic top area.
   The copy starts below the image fade, so no text covers a face. */
@media(max-width:767px){
 #overview{min-height:0!important;padding:clamp(325px,100vw,485px) 0 60px!important;
   background-color:#061422!important;
   background-image:none!important;}
 #overview::before {inset:0 0 auto!important;height:clamp(370px,115vw,540px)!important;opacity:1!important;
   background-image:linear-gradient(180deg,rgba(3,14,25,.04) 0%,rgba(3,14,25,.03) 48%,rgba(3,14,25,.42) 77%,#061422 100%),url('images/overview-seated-fullbleed.webp')!important;
   background-size:cover!important;background-position:76% 42%!important;background-repeat:no-repeat!important;}
 #overview .hero-overline{font-size:9px!important;letter-spacing:.17em!important;margin:0 0 18px!important;}
 #overview .hero-overline .overline-line{width:16px;}
 #overview .grid.lg\\:grid-cols-12 {display:block!important;}
 #overview .hero-copy{max-width:100%!important;padding-top:7px!important;}
 #overview .hero-impact-strip{margin-top:30px!important;}
 #overview h1{font-size:clamp(3.15rem,13vw,5rem)!important;}
 #overview #hero-summary{font-size:13.5px!important;line-height:1.7!important;}
 #contact{min-height:0!important;padding:clamp(365px,101vw,490px) 0 55px!important;
   background-image:none!important;background-color:#061422!important;display:block!important;}
 #contact::before {inset:0 0 auto!important;height:clamp(390px,115vw,540px)!important;
   background-image:linear-gradient(180deg,rgba(3,14,23,.03) 0%,rgba(3,14,23,.02) 53%,rgba(3,14,23,.45) 80%,#061422 100%),url('images/contact-walk-fullbleed.webp')!important;
   background-size:cover!important;background-position:left 50%!important;background-repeat:no-repeat!important;}
 #contact .contact-inner{display:block!important;padding:0 22px!important;}
 #contact .contact-content{grid-column:auto!important;text-align:center!important;padding:0!important;max-width:600px!important;margin:0 auto!important;}
 #contact .contact-content>h2{font-size:clamp(1.85rem,6.4vw,2.65rem)!important;}
 #contact .contact-content>p{margin:0 auto!important;}
 #contact .contact-content>.grid{grid-template-columns:1fr!important;max-width:480px!important;margin:0 auto!important;}
 #contact .contact-content>.grid a{flex-direction:column!important;justify-content:center!important;text-align:center!important;padding:16px!important;}
 #contact .contact-content>.pt-10{text-align:center!important;}
}
@media(max-width:767px){
 #overview .hero-focus-switcher{width:100%!important;max-width:100%!important;display:block!important;padding:10px!important;}
 #overview .hero-focus-switcher>span{display:flex!important;justify-content:center!important;margin-bottom:7px!important;}
 #overview .hero-focus-buttons{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;width:100%!important;}
 #overview .hero-focus-buttons button{width:100%!important;min-height:38px!important;padding:8px 10px!important;white-space:normal!important;line-height:1.35!important;text-align:center!important;}
}
@media(max-width:375px){#overview{padding-top:330px!important;}#contact{padding-top:355px!important;}}
@media print{
 #overview,#contact{background-image:none!important;background:#fff!important;min-height:0!important;padding:18px 0!important;color:#0b1525!important;}
 #overview::before,#contact::before{display:none!important;}
 #contact .contact-inner{display:block!important;}
 #contact .contact-content{color:#172033!important;}
 #contact .contact-content>h2{color:#172033!important;}
}