/* Shared FAQ treatment — the questions remain specific to each page. */
.faq-home,
.page-section:has(> .wrap > .faq-stack),
.page-section:has(> .wrap.faq-stack){
  background:#edf9fb;
  box-shadow:0 0 0 100vmax #edf9fb;
  clip-path:inset(0 -100vmax);
}

.faq-home{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  column-gap:clamp(34px,6vw,90px);
  row-gap:16px;
  padding-block:clamp(58px,8vw,110px);
  /* Keep the circle's top edge level with the FAQ heading on every page. */
  align-items:start;
}
.faq-home::before,
.page-section:has(> .wrap > .faq-stack) > .wrap::before,
.page-section:has(> .wrap.faq-stack) > .faq-stack::before{
  content:"";
  display:block;
  min-height:480px;
  border-radius:220px 220px 26px 26px;
  background:
    radial-gradient(circle at 18% 38%,#2fd7c3 0 31%,transparent 31.3%),
    linear-gradient(#00345224,#00345224),
    url("assets/moment-jet-ski-family.jpg") center / cover no-repeat;
  box-shadow:0 20px 38px #0034521a;
}
.faq-home::before{grid-column:1;grid-row:1 / span 3}
.faq-home .faq-intro,.faq-home .faq-list{grid-column:2;margin:0;max-width:none}
.faq-home .content-nav{grid-column:2;margin:7px 0 0}
.faq-home .faq-intro{padding:0}
.faq-home .faq-intro .eyebrow,
.page-section:has(.faq-stack) h2::before{
  content:"FAQS";
  display:block;
  color:var(--teal);
  font:700 .94rem/1 "Barlow Condensed",sans-serif;
  letter-spacing:.13em;
  margin-bottom:12px;
}
.faq-home .faq-intro .eyebrow{font-size:0;line-height:0;margin:0}
.faq-home .faq-intro .eyebrow::after{
  content:"FAQS";
  display:block;
  color:var(--teal);
  font:700 .94rem/1 "Barlow Condensed",sans-serif;
  letter-spacing:.13em;
}
.faq-home h2,
.page-section:has(.faq-stack) h2{
  max-width:600px;
  margin:0 0 16px;
  color:var(--navy);
  font-size:clamp(3rem,5.1vw,5.45rem);
  line-height:.88;
  text-transform:uppercase;
}
.faq-home .faq-intro > p:last-child{max-width:650px;margin-bottom:20px}

.faq-home .faq-list,
.page-section:has(.faq-stack) .faq-stack{display:grid;gap:13px}
/* Override the legacy homepage rule so the first FAQ starts like every other row. */
.faq-home .faq-list{border-top:0}
.faq-home .faq-list details,
.faq-stack details{
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  /* No teal rule on the first item or on expanded items. */
  border:0;
  border-radius:0;
  box-shadow:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.faq-home .faq-list details:hover,
.faq-stack details:hover,
.faq-home .faq-list details[open],
.faq-stack details[open]{border-color:transparent;box-shadow:none}
.faq-home .faq-list summary,
.faq-stack summary{
  position:relative;
  display:block;
  padding:22px 64px 22px 26px;
  color:var(--navy);
  font:700 clamp(1.05rem,1.6vw,1.3rem)/1.05 "Barlow Condensed",sans-serif;
  letter-spacing:.015em;
  text-transform:uppercase;
  cursor:pointer;
}
.faq-home .faq-list summary::-webkit-details-marker,
.faq-stack summary::-webkit-details-marker{display:none}
.faq-home .faq-list summary::after,
.faq-stack summary::after{
  content:"→";
  position:absolute;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  color:var(--navy);
  font:700 1.5rem/1 "Alumni Sans",sans-serif;
}
.faq-home .faq-list details[open] summary::after,
.faq-stack details[open] summary::after{content:"−";color:var(--teal)}
.faq-home .faq-list details p,
.faq-stack details p{max-width:none;margin:0;padding:0 26px 23px;color:#335665}

.page-section:has(> .wrap > .faq-stack),
.page-section:has(> .wrap.faq-stack){padding-block:clamp(58px,8vw,110px)}
.page-section:has(> .wrap > .faq-stack) > .wrap{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  grid-template-areas:"visual heading" "visual stack" "visual nav";
  column-gap:clamp(34px,6vw,90px);
  row-gap:18px;
  align-items:start;
}
.page-section:has(> .wrap > .faq-stack) > .wrap::before{grid-area:visual}
.page-section:has(> .wrap > .faq-stack) > .wrap > h2{grid-area:heading;align-self:start}
.page-section:has(> .wrap > .faq-stack) > .wrap > .faq-stack{grid-area:stack}
.page-section:has(> .wrap > .faq-stack) > .wrap > .content-nav{grid-area:nav}

.page-section:has(> .wrap.faq-stack) > .faq-stack{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  column-gap:clamp(34px,6vw,90px);
  align-items:start;
}
.page-section:has(> .wrap.faq-stack) > .faq-stack::before{grid-column:1;grid-row:1 / span 10}
.page-section:has(> .wrap.faq-stack) > .faq-stack > details{grid-column:2}
.page-section:has(.faq-stack) .content-nav{margin-top:7px}
.page-section:has(.faq-stack) .content-nav a{border-color:#9bdde0;color:var(--navy)}
.page-section:has(.faq-stack) .content-nav a:hover{background:#fff;border-color:var(--teal)}
.faq-home .content-nav a{border-color:#9bdde0;color:var(--navy)}
.faq-home .content-nav a:hover{background:#fff;border-color:var(--teal)}

/* Match the supporting photo to the experience without changing FAQ content. */
body:has(.boat-fleet) .page-section:has(> .wrap > .faq-stack) > .wrap::before{
  background:
    radial-gradient(circle at 18% 38%,#2fd7c3 0 31%,transparent 31.3%),
    linear-gradient(#00345224,#00345224),
    url("assets/moment-boat-day.jpg") center / cover no-repeat;
}

@media (max-width:760px){
  .faq-home,.page-section:has(> .wrap > .faq-stack) > .wrap,.page-section:has(> .wrap.faq-stack) > .faq-stack{display:block}
  .faq-home::before,.page-section:has(> .wrap > .faq-stack) > .wrap::before,.page-section:has(> .wrap.faq-stack) > .faq-stack::before{min-height:270px;margin-bottom:34px;border-radius:150px 150px 20px 20px}
  .faq-home .faq-intro{margin-bottom:24px}
  .faq-home h2,.page-section:has(.faq-stack) h2{font-size:clamp(2.85rem,14vw,4.4rem)}
  .faq-home .faq-list summary,.faq-stack summary{padding:19px 54px 19px 20px}
  .faq-home .faq-list details p,.faq-stack details p{padding:0 20px 21px}
  .page-section:has(.faq-stack) .content-nav{margin-top:23px}
  .faq-home .content-nav{margin-top:23px}
}

/* Four circular real-photo crops, matching the requested collage direction. */
.faq-home::before,
.page-section:has(> .wrap > .faq-stack) > .wrap::before,
.page-section:has(> .wrap.faq-stack) > .faq-stack::before{
  min-height:0;
  width:100%;
  aspect-ratio:1;
  border-radius:0;
  box-shadow:none;
  background-image:
    url("assets/moment-sandbar.jpg"),
    url("assets/moment-jet-ski-couple.jpeg"),
    url("assets/moment-crew-pontoon.jpg"),
    url("assets/moment-jet-ski-family.jpg");
  background-size:58% 58%,34% 34%,38% 38%,61% 61%;
  background-position:left top,92% 5%,17% 100%,100% 100%;
  background-repeat:no-repeat;
  -webkit-mask-image:
    radial-gradient(circle at 29% 29%,#000 0 28.5%,transparent 28.8%),
    radial-gradient(circle at 75% 22%,#000 0 17%,transparent 17.3%),
    radial-gradient(circle at 36% 81%,#000 0 18.8%,transparent 19.1%),
    radial-gradient(circle at 69.5% 69.5%,#000 0 30%,transparent 30.3%);
  mask-image:
    radial-gradient(circle at 29% 29%,#000 0 28.5%,transparent 28.8%),
    radial-gradient(circle at 75% 22%,#000 0 17%,transparent 17.3%),
    radial-gradient(circle at 36% 81%,#000 0 18.8%,transparent 19.1%),
    radial-gradient(circle at 69.5% 69.5%,#000 0 30%,transparent 30.3%);
  -webkit-mask-composite:source-over;
  mask-composite:add;
}
.faq-home .faq-list summary,
.faq-stack summary{font-weight:600}
@media (max-width:760px){
  .faq-home::before,
  .page-section:has(> .wrap > .faq-stack) > .wrap::before,
  .page-section:has(> .wrap.faq-stack) > .faq-stack::before{min-height:0;margin-bottom:34px;border-radius:0}
}

/* Final FAQ visual: one large, simple circular real-photo image. */
.faq-photo-collage{display:none !important}
.faq-home::before,
.page-section:has(> .wrap > .faq-stack) > .wrap::before,
.page-section:has(> .wrap.faq-stack) > .faq-stack::before,
body:has(.boat-fleet) .page-section:has(> .wrap > .faq-stack) > .wrap::before{
  display:block;
  min-height:0;
  width:100%;
  aspect-ratio:1;
  margin:0;
  border-radius:50%;
  box-shadow:0 18px 36px #0034521c;
  background:#c8f2f0 url("assets/moment-jet-ski-family.jpg") center / cover no-repeat;
  -webkit-mask-image:none;
  mask-image:none;
}
.faq-home:has(.faq-photo-collage)::before,
.page-section:has(.faq-photo-collage) > .wrap::before,
.page-section:has(.faq-photo-collage) > .faq-stack::before{display:block}
body:has(.boat-fleet) .page-section:has(> .wrap > .faq-stack) > .wrap::before{
  background:#c8f2f0 url("assets/internal/boat-faq-people-float.png") center 58% / cover no-repeat;
}
@media (max-width:760px){
  .faq-home::before,
  .page-section:has(> .wrap > .faq-stack) > .wrap::before,
  .page-section:has(> .wrap.faq-stack) > .faq-stack::before{margin-bottom:34px;border-radius:50%}
}

/* The primary FAQ is the complete reference page. Grouped questions make it
   scannable without repeating a large service-page FAQ treatment five times. */
.faq-directory{background:#edf9fb;box-shadow:0 0 0 100vmax #edf9fb;clip-path:inset(0 -100vmax);padding-block:clamp(58px,8vw,110px)}
.faq-directory > .wrap{display:grid;grid-template-columns:minmax(245px,.72fr) minmax(0,1.28fr);gap:clamp(36px,6vw,90px);align-items:start}
.faq-directory__visual{position:sticky;top:142px;width:100%;aspect-ratio:1;border-radius:50%;background:#c8f2f0 url("assets/internal/faq-jet-ski-riders-circle.png") center 52% / cover no-repeat;box-shadow:0 18px 36px #0034521c}
.faq-directory__groups{display:grid;gap:clamp(45px,6vw,78px)}
.faq-directory .faq-group h2{margin:0 0 14px;color:var(--navy);font:600 clamp(1.45rem,2vw,2rem)/.98 "Barlow Condensed",sans-serif;letter-spacing:.025em;text-transform:uppercase}
.faq-directory .faq-group h2::before{content:"";display:none}
.faq-group .faq-stack{display:grid;gap:13px}
.faq-group .faq-stack details{margin:0;padding:0;overflow:hidden;background:#fff;border:0;border-radius:0;box-shadow:none}
.faq-group .faq-stack summary{position:relative;display:block;padding:22px 64px 22px 26px;color:var(--navy);font:600 clamp(1.05rem,1.6vw,1.3rem)/1.05 "Barlow Condensed",sans-serif;letter-spacing:.015em;text-transform:uppercase;cursor:pointer}
.faq-group .faq-stack summary::-webkit-details-marker{display:none}
.faq-group .faq-stack summary::after{content:"→";position:absolute;right:26px;top:50%;transform:translateY(-50%);color:var(--navy);font:700 1.5rem/1 "Alumni Sans",sans-serif}
.faq-group .faq-stack details[open] summary::after{content:"−";color:var(--teal)}
.faq-group .faq-stack p{max-width:none;margin:0;padding:0 26px 23px;color:#335665}
@media(max-width:760px){.faq-directory > .wrap{display:block}.faq-directory__visual{position:static;max-width:360px;margin:0 auto 42px}.faq-group .faq-stack summary{padding:19px 54px 19px 20px}.faq-group .faq-stack p{padding:0 20px 21px}.faq-directory__groups{gap:48px}}

/* Shared topographic background for every live FAQ treatment. The supplied
   artwork is shown once, anchored at the top center of each section. */
.faq-home,
.page-section:has(> .wrap > .faq-stack),
.page-section:has(> .wrap.faq-stack),
.faq-directory{
  background-color:#edf9fb;
  background-image:url("assets/little-philly-way-contours.png");
  background-position:top center;
  background-repeat:no-repeat;
}

/* Homepage-only FAQ visual: anchor the family and pontoon in the middle of
   the circular crop rather than centering the wide original photograph. */
.faq-home::before{
  background:#c8f2f0 url("assets/faq-home-family-pontoon.png") 0 center / cover no-repeat;
}

/* Guided-tour FAQ: keep the jet-ski riders centered in the circular visual. */
body:has(.guided-tours-hero) .page-section:has(> .wrap > .faq-stack) > .wrap::before{
  background:#c8f2f0 url("assets/internal/faq-jet-ski-riders-circle.png") center 52% / cover no-repeat;
}

/* Jet-ski-rental FAQ: keep the riders and their ski centered in the circle. */
body:has(.jet-ski-rentals-hero) .page-section:has(> .wrap > .faq-stack) > .wrap::before{
  background:#c8f2f0 url("assets/internal/jet-ski-rental-faq-riders-circle.png") 58% 52% / cover no-repeat;
}