.hero{isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 72% 24%,rgba(215,169,101,.11),transparent 24%),radial-gradient(circle at 26% 72%,rgba(73,132,163,.09),transparent 30%),linear-gradient(180deg,rgba(4,12,21,.02),rgba(4,12,21,.12) 52%,rgba(3,10,18,.5));mix-blend-mode:screen}
.hero-bg{filter:saturate(1.07) contrast(1.04) brightness(.86)}
.hero-bg:before{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(5,15,25,.14)),repeating-linear-gradient(88deg,transparent 0 24px,rgba(215,169,101,.022) 25px,transparent 27px);mask-image:linear-gradient(to bottom,transparent,black 25%,black 74%,transparent);opacity:.66;animation:waterShimmer 10s ease-in-out infinite alternate}

/* Live glass service portals are reserved for the compact/mobile layout. */
.live-tray-stack{transform-style:preserve-3d;isolation:isolate}
.live-tray-stack:before{content:"";position:absolute;z-index:-2;inset:-34px -28px -92px -86px;border-radius:44px;background:radial-gradient(circle at 72% 18%,rgba(215,169,101,.1),transparent 38%),linear-gradient(145deg,rgba(3,11,20,.84),rgba(4,15,25,.56));box-shadow:0 45px 90px rgba(0,0,0,.3);backdrop-filter:blur(30px) saturate(112%);-webkit-backdrop-filter:blur(30px) saturate(112%);mask-image:linear-gradient(180deg,#000 0 84%,transparent 100%)}
.live-tray-stack:after{content:"";position:absolute;left:7%;right:0;top:88%;height:48%;z-index:-1;background:linear-gradient(180deg,rgba(215,169,101,.18),transparent 76%);filter:blur(19px);transform:perspective(600px) rotateX(68deg) scaleY(.7);opacity:.48}
.work-tray{position:relative;overflow:visible;transform-style:preserve-3d;background:linear-gradient(145deg,rgba(17,35,51,.7),rgba(3,13,23,.56));border-color:rgba(239,211,170,.54);box-shadow:0 26px 62px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.19),inset 0 0 45px rgba(118,163,188,.035);backdrop-filter:blur(24px) saturate(132%);-webkit-backdrop-filter:blur(24px) saturate(132%)}
.work-tray:before{content:"";position:absolute;z-index:0;inset:0;overflow:hidden;border-radius:inherit;background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.17) 47%,transparent 64%);background-size:260% 100%;background-position:120% center;opacity:.24;transition:opacity .25s ease,background-position .75s ease}
.work-tray:hover:before,.work-tray:focus-visible:before{opacity:.72;background-position:-85% center}
.work-tray>span:not(.tray-reflection){position:relative;z-index:2}
.work-tray:hover,.work-tray:focus-visible{transform:translateY(-9px) translateZ(68px) scale(1.012);border-color:rgba(241,213,168,.9);background:linear-gradient(145deg,rgba(26,48,66,.78),rgba(4,15,25,.62));box-shadow:0 36px 82px rgba(0,0,0,.44),0 0 42px rgba(215,169,101,.13),inset 0 1px rgba(255,255,255,.24)}
.tray-copy{min-width:0}.tray-copy strong{line-height:1.06}.tray-copy small{margin-top:5px;line-height:1.45}
.tray-reflection{position:absolute!important;z-index:-1!important;left:64px;right:42px;top:calc(100% + 8px);display:block!important;height:48px;overflow:hidden;color:rgba(241,213,168,.36);font-family:'Libre Caslon Display',serif;font-size:clamp(17px,1.45vw,24px);line-height:1;white-space:nowrap;text-overflow:ellipsis;transform-origin:top;transform:perspective(260px) rotateX(62deg) scaleY(-.72);filter:blur(1.5px);opacity:.2;mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 82%);text-shadow:0 0 9px rgba(215,169,101,.3);pointer-events:none;transition:opacity .3s ease,filter .3s ease,transform .3s ease}
.work-tray:hover .tray-reflection,.work-tray:focus-visible .tray-reflection{opacity:.43;filter:blur(.8px);transform:perspective(260px) rotateX(60deg) scaleY(-.78) translateY(3px)}
.work-tray:nth-child(1){transform:translateZ(56px)}.work-tray:nth-child(2){transform:translateZ(38px)}.work-tray:nth-child(3){transform:translateZ(20px)}.work-tray:nth-child(4){transform:translateZ(4px)}

/* The approved desktop artwork already contains its own visual booking stack. Never layer a second stack over it. */
.hero-bg--approved-marina{background-size:100% 100%!important;background-repeat:no-repeat!important;background-position:center!important;filter:saturate(1.04) contrast(1.035) brightness(.94);animation:approvedDrift 24s ease-in-out infinite alternate}
.hero-bg--approved-marina:after{content:none!important;display:none!important}
.hero--approved-art:before{background:linear-gradient(180deg,rgba(3,10,18,.01),transparent 56%,rgba(3,10,18,.15) 80%,rgba(3,10,18,.5) 100%);mix-blend-mode:normal}
.hero--approved-art .hero-live-copy{display:none}
.hero--approved-art .live-tray-stack{display:none!important}
.hero--approved-art .hero-hotspots{display:none!important}
.hero--approved-art .concierge-bar{position:absolute;z-index:18;left:7.7%;bottom:2.7%;display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(720px,48vw);min-height:68px;padding:11px 12px 11px 17px;border:1px solid rgba(241,213,168,.36);border-radius:22px;background:linear-gradient(145deg,rgba(7,19,31,.82),rgba(3,11,20,.72));box-shadow:0 28px 75px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.13),0 0 30px rgba(215,169,101,.055);backdrop-filter:blur(21px) saturate(130%);-webkit-backdrop-filter:blur(21px) saturate(130%)}
.concierge-copy{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;min-width:0}
.availability-dot{width:7px;height:7px;border-radius:50%;background:#78c99f;box-shadow:0 0 0 5px rgba(120,201,159,.1),0 0 18px rgba(120,201,159,.35)}
.concierge-copy>span:nth-child(2){font-size:11px;font-weight:700;color:#eef2f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.concierge-copy small{grid-column:2;color:#9eacb5;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.concierge-actions{display:flex;align-items:center;gap:8px;flex:none}.concierge-bar .button{min-height:45px;padding-inline:18px;font-size:12px}.concierge-call{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.045);text-decoration:none;font-size:11px;font-weight:700;transition:background .2s ease,border-color .2s ease,transform .2s ease}.concierge-call:hover{transform:translateY(-2px);border-color:rgba(215,169,101,.45);background:rgba(215,169,101,.08)}
.hero--approved-art .scroll-cue{display:none}

/* The harbor continues underneath the website information. */
.harbor-info-deck{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:44px clamp(20px,3vw,52px) 76px;background-image:linear-gradient(180deg,rgba(3,10,18,.7),rgba(3,10,18,.91)),var(--marina-source,url('assets/hero-real.jpg'));background-size:cover;background-position:center bottom;background-attachment:fixed;border-top:1px solid rgba(241,213,168,.25);overflow:hidden}
.harbor-info-deck:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(2,9,16,.32),transparent 48%,rgba(2,9,16,.26)),repeating-linear-gradient(91deg,transparent 0 48px,rgba(215,169,101,.018) 49px,transparent 52px);animation:waterShimmer 14s ease-in-out infinite alternate}
.portal-card{position:relative;min-height:294px;display:flex;flex-direction:column;padding:26px;border:1px solid rgba(241,213,168,.38);border-radius:26px;background:linear-gradient(145deg,rgba(20,40,56,.48),rgba(3,13,23,.38));box-shadow:0 30px 70px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.16);backdrop-filter:blur(20px) saturate(126%);-webkit-backdrop-filter:blur(20px) saturate(126%);text-decoration:none;overflow:visible;transition:transform .3s cubic-bezier(.2,.8,.25,1),border-color .3s ease,background .3s ease,box-shadow .3s ease}
.portal-card:hover,.portal-card:focus-visible{transform:translateY(-9px);border-color:rgba(241,213,168,.78);background:linear-gradient(145deg,rgba(30,54,72,.6),rgba(4,15,25,.42));box-shadow:0 40px 90px rgba(0,0,0,.4),0 0 34px rgba(215,169,101,.1)}
.portal-card:focus-visible{outline:3px solid var(--gold-light);outline-offset:4px}
.portal-kicker{color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.portal-card h2{margin:auto 0 12px;font-size:clamp(27px,2.4vw,39px);line-height:1.04}
.portal-card p{margin:0 0 24px;color:#c2cdd2;font-size:13px}
.portal-link{display:flex;justify-content:space-between;align-items:center;min-height:45px;padding:0 14px;border:1px solid rgba(255,255,255,.16);border-radius:13px;color:var(--gold-light);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.portal-reflection{position:absolute;left:24px;right:24px;top:calc(100% + 7px);height:38px;overflow:hidden;color:rgba(241,213,168,.23);font-family:'Libre Caslon Display',serif;font-size:21px;transform-origin:top;transform:perspective(240px) rotateX(64deg) scaleY(-.7);filter:blur(1.6px);mask-image:linear-gradient(180deg,#000,transparent 82%);opacity:.22;pointer-events:none;transition:opacity .3s ease,filter .3s ease}
.portal-card:hover .portal-reflection,.portal-card:focus-visible .portal-reflection{opacity:.48;filter:blur(.9px)}

/* Existing information is glass over photography instead of opaque blocks. */
.service-selector,.experience-section,.area-section,.faq-section{position:relative;isolation:isolate;background-image:linear-gradient(180deg,rgba(5,15,25,.89),rgba(4,13,22,.94)),var(--marina-source,url('assets/hero-real.jpg'));background-size:cover;background-position:center;background-attachment:fixed}
.service-selector:after,.experience-section:after,.area-section:after,.faq-section:after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 82% 12%,rgba(215,169,101,.09),transparent 28%),linear-gradient(90deg,rgba(3,11,20,.36),transparent 45%,rgba(3,11,20,.24))}
.service-card,.experience-card,.not-sure-card,.area-grid a,.faq-list details{background:linear-gradient(145deg,rgba(20,39,54,.52),rgba(4,14,24,.38));border-color:rgba(255,255,255,.14);backdrop-filter:blur(19px) saturate(122%);-webkit-backdrop-filter:blur(19px) saturate(122%);box-shadow:0 25px 65px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.1)}
.service-card-featured{background:linear-gradient(145deg,rgba(67,63,49,.42),rgba(4,14,24,.4));border-color:rgba(215,169,101,.5)}

/* Four-photo family story with every credit attached to its image. */
.story-section{position:relative;isolation:isolate;background-image:linear-gradient(180deg,rgba(5,17,28,.9),rgba(4,14,24,.96)),var(--marina-source,url('assets/hero-real.jpg'));background-size:cover;background-position:center;background-attachment:fixed}
.story-section:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 14% 12%,rgba(73,132,163,.18),transparent 33%),radial-gradient(circle at 86% 72%,rgba(215,169,101,.07),transparent 31%)}
.story-gallery{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:24px!important;align-items:start!important}
.story-gallery figure{position:relative;margin:0!important;padding:9px!important;border:1px solid rgba(241,213,168,.28)!important;border-radius:27px!important;background:linear-gradient(145deg,rgba(20,39,54,.52),rgba(4,14,24,.38))!important;box-shadow:0 30px 78px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.12)!important;backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);overflow:hidden;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.story-gallery figure:hover{transform:translateY(-7px);border-color:rgba(241,213,168,.62)!important;box-shadow:0 42px 95px rgba(0,0,0,.4),0 0 35px rgba(215,169,101,.08)!important}
.story-photo--asilomar{grid-column:1/span 7}
.story-photo--van{grid-column:8/span 5;margin-top:70px!important}
.story-photo--crawlspace{grid-column:2/span 4;margin-top:-8px!important}
.story-photo--field{grid-column:6/span 7;margin-top:34px!important}
.story-gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:19px}
.story-photo--van img{aspect-ratio:4/5}
.story-photo--field img{aspect-ratio:16/10}
.story-gallery figcaption{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:18px!important;padding:12px 7px 4px!important;color:#c4cfd4!important;font-size:10px!important;line-height:1.45}
.story-gallery figcaption span:last-child{color:var(--gold-light);text-align:right;white-space:nowrap}
.story-section blockquote{max-width:980px;margin:58px auto 14px;padding:30px 34px;border:1px solid rgba(241,213,168,.22);border-left:2px solid var(--gold);border-radius:0 24px 24px 0;background:linear-gradient(145deg,rgba(20,39,54,.42),rgba(4,14,24,.34));box-shadow:0 24px 65px rgba(0,0,0,.22);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px)}
.story-actions{justify-content:center!important;margin-top:0!important}.story-actions .photo-credit{display:none!important}.story-actions .text-button{padding:10px 14px;border:1px solid rgba(241,213,168,.24);border-radius:999px;background:rgba(255,255,255,.025)}

/* Final desktop correction: move the four distinct information cards into the approved hero's existing tray positions. */
@media(min-width:901px){
  .hero+.harbor-info-deck{position:absolute;z-index:20;top:0;left:0;width:100%;height:clamp(720px,56.31vw,1020px);display:block;padding:0;border:0;background:none!important;background-image:none!important;overflow:visible;pointer-events:none}
  .hero+.harbor-info-deck:before{content:none!important;display:none!important}
  .hero+.harbor-info-deck .portal-card{position:absolute;pointer-events:auto;min-height:0;display:flex;justify-content:center;padding:clamp(18px,1.55vw,29px) clamp(62px,4.6vw,88px) clamp(18px,1.55vw,29px) clamp(64px,4.7vw,90px);border:1px solid rgba(241,213,168,.75);border-radius:clamp(20px,1.7vw,31px);background:linear-gradient(145deg,rgba(9,25,39,.96),rgba(3,13,23,.92));box-shadow:0 28px 72px rgba(0,0,0,.43),inset 0 1px rgba(255,255,255,.18),inset 0 0 58px rgba(91,143,171,.035);backdrop-filter:blur(24px) saturate(126%) brightness(.72);-webkit-backdrop-filter:blur(24px) saturate(126%) brightness(.72);overflow:visible;transform:none}
  .hero+.harbor-info-deck .portal-card:hover,.hero+.harbor-info-deck .portal-card:focus-visible{transform:translateY(-6px) scale(1.006);border-color:rgba(241,213,168,.95);background:linear-gradient(145deg,rgba(14,34,50,.97),rgba(4,15,25,.94));box-shadow:0 38px 88px rgba(0,0,0,.48),0 0 34px rgba(215,169,101,.11),inset 0 1px rgba(255,255,255,.21)}
  .hero+.harbor-info-deck .portal-card:nth-child(1){left:70.1%;top:5.6%;width:26.3%;height:25.9%}
  .hero+.harbor-info-deck .portal-card:nth-child(2){left:67.4%;top:29.5%;width:26.1%;height:24.8%}
  .hero+.harbor-info-deck .portal-card:nth-child(3){left:63.6%;top:52.4%;width:26.7%;height:24.2%}
  .hero+.harbor-info-deck .portal-card:nth-child(4){left:59.1%;top:71.8%;width:26.5%;height:23.4%}
  .hero+.harbor-info-deck .portal-card:after{position:absolute;left:clamp(19px,1.45vw,27px);top:clamp(17px,1.4vw,25px);color:var(--gold);font-size:clamp(14px,1.18vw,20px);font-weight:700;line-height:1}
  .hero+.harbor-info-deck .portal-card:nth-child(1):after{content:"01"}
  .hero+.harbor-info-deck .portal-card:nth-child(2):after{content:"02"}
  .hero+.harbor-info-deck .portal-card:nth-child(3):after{content:"03"}
  .hero+.harbor-info-deck .portal-card:nth-child(4):after{content:"04"}
  .hero+.harbor-info-deck .portal-kicker{margin:0 0 7px;font-size:clamp(7px,.58vw,10px);line-height:1.2}
  .hero+.harbor-info-deck .portal-card h2{margin:0 0 6px;font-size:clamp(24px,2.05vw,37px);line-height:1.01}
  .hero+.harbor-info-deck .portal-card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0;max-width:100%;color:#d0d9dd;font-size:clamp(9px,.76vw,13px);line-height:1.38}
  .hero+.harbor-info-deck .portal-link{position:absolute;right:clamp(15px,1.25vw,23px);top:50%;display:grid;place-items:center;width:clamp(39px,3.05vw,52px);height:clamp(39px,3.05vw,52px);min-height:0;padding:0;transform:translateY(-50%);border-color:rgba(241,213,168,.28);border-radius:50%;font-size:0;letter-spacing:0}
  .hero+.harbor-info-deck .portal-link b{font-size:clamp(17px,1.35vw,23px);font-weight:400}
  .hero+.harbor-info-deck .portal-reflection{left:clamp(64px,4.7vw,90px);right:clamp(40px,3.2vw,62px);top:calc(100% + 5px);height:clamp(32px,3vw,48px);color:rgba(241,213,168,.3);font-size:clamp(16px,1.35vw,23px);opacity:.22;filter:blur(1.35px);transform:perspective(260px) rotateX(62deg) scaleY(-.72);text-shadow:0 0 9px rgba(215,169,101,.24);white-space:nowrap}
}

@keyframes approvedDrift{to{transform:scale(1.012) translate3d(-.12%,-.08%,0)}}
@keyframes waterShimmer{to{transform:translate3d(-1.1%,.45%,0) scale(1.018);opacity:.48}}

@media(max-width:1240px) and (min-width:901px){
  .hero--approved-art .concierge-bar{left:5.5%;bottom:2%;width:min(640px,55vw)}
  .concierge-copy small{display:none}
  .hero+.harbor-info-deck .portal-card{padding-left:54px;padding-right:56px}
  .hero+.harbor-info-deck .portal-card p{-webkit-line-clamp:2}
}
@media(max-width:900px){
  .hero:before{background:linear-gradient(180deg,rgba(3,10,18,.02),rgba(3,10,18,.08) 33%,rgba(3,10,18,.88) 58%,var(--bg) 78%);mix-blend-mode:normal}
  .live-tray-stack:before,.live-tray-stack:after{display:none}.work-tray:nth-child(n){transform:none}
  .hero-bg--approved-marina{background-position:34% top!important;background-size:auto 67vh!important;background-color:var(--bg);animation:none}
  .hero--approved-art .hero-live-copy{display:block}.hero--approved-art .live-tray-stack{display:none!important}
  .hero--approved-art .hero-hotspots,.hero--approved-art .concierge-bar{display:none}
  .hero--approved-art .hero-live-copy>p:not(.eyebrow){color:#e7edef;text-shadow:0 3px 18px rgba(0,0,0,.82)}
  .hero--approved-art .work-tray{background:linear-gradient(145deg,rgba(14,28,41,.92),rgba(4,14,24,.86));border-color:rgba(241,213,168,.42)}
  .tray-reflection{display:none!important}
  .harbor-info-deck{grid-template-columns:repeat(2,1fr);background-attachment:scroll;padding-bottom:58px}
  .service-selector,.experience-section,.story-section,.area-section,.faq-section{background-attachment:scroll}
  .story-photo--asilomar{grid-column:1/span 7}.story-photo--van{grid-column:8/span 5;margin-top:42px!important}.story-photo--crawlspace{grid-column:1/span 5}.story-photo--field{grid-column:6/span 7;margin-top:18px!important}
}
@media(max-width:620px){
  .harbor-info-deck{grid-template-columns:1fr;padding:26px 14px 54px}
  .portal-card{min-height:230px;padding:22px}.portal-card h2{font-size:31px}
  .portal-reflection{display:none}
  .story-gallery{grid-template-columns:1fr!important;gap:16px!important}
  .story-gallery .story-photo{grid-column:1!important;margin-top:0!important}
  .story-gallery figcaption{flex-direction:column;gap:3px!important}.story-gallery figcaption span:last-child{text-align:left;white-space:normal}
  .story-photo--van img,.story-photo--field img{aspect-ratio:4/3}
  .story-section blockquote{margin-top:34px;padding:22px 24px}
}
@media(prefers-reduced-motion:reduce){.hero-bg:before,.hero-bg--approved-marina,.harbor-info-deck:before{animation:none!important}}


/* Harbor glass system — persistent waterfront background */
body{
  position:relative;
  isolation:isolate;
  background:#030a12;
}
body:before{
  content:"";
  position:fixed;
  z-index:-2;
  inset:-3vh -3vw;
  background-image:
    linear-gradient(180deg,rgba(2,8,14,.13),rgba(2,8,14,.42)),
    var(--marina-source,url("assets/marina-hero-clean.webp"));
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.04);
  pointer-events:none;
}
body:after{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  background:
    radial-gradient(circle at 78% 12%,rgba(215,169,101,.07),transparent 26%),
    linear-gradient(180deg,rgba(2,8,14,.08),rgba(2,8,14,.24));
  pointer-events:none;
}
main{position:relative;background:transparent}
.confidence-ribbon,
.service-selector,
.experience-section,
.story-section,
.area-section,
.faq-section,
.final-cta{
  background-image:none!important;
}
.service-selector,
.experience-section,
.story-section,
.area-section,
.faq-section,
.final-cta{
  border-top:1px solid rgba(241,213,168,.13);
  background:linear-gradient(180deg,rgba(3,11,20,.66),rgba(3,11,20,.76))!important;
}
.experience-section,.area-section,.final-cta{
  background:linear-gradient(180deg,rgba(3,11,20,.54),rgba(3,11,20,.72))!important;
}
.story-section,.faq-section{
  background:linear-gradient(180deg,rgba(3,11,20,.72),rgba(3,11,20,.8))!important;
}
.service-selector:after,
.experience-section:after,
.story-section:before,
.area-section:after,
.faq-section:after{
  background:
    radial-gradient(circle at 82% 10%,rgba(215,169,101,.075),transparent 27%),
    linear-gradient(90deg,rgba(2,8,15,.17),transparent 46%,rgba(2,8,15,.12))!important;
}
.confidence-ribbon{
  gap:12px;
  padding:26px clamp(20px,7vw,112px);
  border-block:1px solid rgba(241,213,168,.16);
  background:linear-gradient(180deg,rgba(3,11,20,.55),rgba(3,11,20,.7))!important;
}
.confidence-ribbon div{
  min-height:112px;
  border:1px solid rgba(241,213,168,.34);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(24,43,56,.39),rgba(3,13,23,.23));
  box-shadow:0 22px 58px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.14);
  backdrop-filter:blur(15px) saturate(120%);
  -webkit-backdrop-filter:blur(15px) saturate(120%);
}
.service-card,
.experience-card,
.not-sure-card,
.area-grid a,
.faq-list details,
.story-gallery figure,
.story-section blockquote{
  border:1px solid rgba(241,213,168,.4)!important;
  background:linear-gradient(145deg,rgba(24,43,56,.4),rgba(3,13,23,.24))!important;
  box-shadow:0 26px 68px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.17)!important;
  backdrop-filter:blur(16px) saturate(122%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(122%)!important;
}
.service-card-featured{
  border-color:rgba(241,213,168,.68)!important;
  background:linear-gradient(145deg,rgba(53,59,56,.42),rgba(3,13,23,.28))!important;
}
.service-card:hover,
.experience-card:hover,
.area-grid a:hover,
.faq-list details:hover{
  border-color:rgba(255,224,178,.75)!important;
  background:linear-gradient(145deg,rgba(31,53,68,.5),rgba(3,14,23,.3))!important;
  box-shadow:0 34px 82px rgba(0,0,0,.34),0 0 30px rgba(215,169,101,.075),inset 0 1px rgba(255,255,255,.2)!important;
}
.service-number{
  right:24px;
  top:17px;
  color:rgba(241,213,168,.18);
}
.experience-card{transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease}
.experience-card:hover{transform:translateY(-6px)}
.not-sure-card{border-radius:24px}
.area-grid a{border-radius:22px}
.faq-list{display:grid;gap:12px}
.faq-list details{
  padding:0 22px;
  border-radius:21px;
  overflow:hidden;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.faq-list details:last-child{border-bottom:1px solid rgba(241,213,168,.4)!important}
.faq-list details[open]{
  border-color:rgba(241,213,168,.66)!important;
  background:linear-gradient(145deg,rgba(32,53,67,.47),rgba(3,13,23,.3))!important;
}
.final-cta{isolation:isolate}
.final-cta .final-glow{opacity:.72}
footer{
  border-top:1px solid rgba(241,213,168,.2);
  background:linear-gradient(180deg,rgba(3,11,20,.82),rgba(2,8,14,.92));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
@media(max-width:900px){
  body:before{
    inset:0;
    background-position:42% center;
    transform:none;
  }
  .confidence-ribbon{grid-template-columns:repeat(2,1fr);padding:18px 14px}
  .confidence-ribbon div{min-height:98px}
  .service-selector,.experience-section,.story-section,.area-section,.faq-section,.final-cta{
    background:linear-gradient(180deg,rgba(3,11,20,.72),rgba(3,11,20,.82))!important;
  }
}
@media(max-width:560px){
  .confidence-ribbon{grid-template-columns:1fr;gap:10px}
  .confidence-ribbon div{min-height:auto;padding:19px 20px}
  .faq-list details{padding:0 17px}
}


/* Keep the review invitation visible near the primary actions without competing with booking. */
.hero-review-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  padding:10px 14px;
  border:1px solid rgba(241,213,168,.3);
  border-radius:999px;
  background:rgba(5,15,25,.42);
  color:rgba(248,239,225,.9);
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  text-decoration:none;
  backdrop-filter:blur(12px) saturate(120%);
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease;
}
.hero-review-link>span:first-child{color:var(--gold-light);font-size:15px;line-height:1}
.hero-review-link:hover,.hero-review-link:focus-visible{
  border-color:rgba(241,213,168,.7);
  background:rgba(8,22,35,.72);
  color:#fff;
  transform:translateY(-1px);
}


/* Responsive split: preserve the wide desktop composition while giving phones a tighter, purpose-built layout. */
@media (max-width: 900px){
  .site-header{
    gap:12px;
    padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));
  }
  .brand{min-width:0;max-width:calc(100% - 58px)}
  .brand>span:last-child{min-width:0}
  .brand strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-bg--approved-marina{
    height:clamp(430px,55svh,500px)!important;
    min-height:430px!important;
    background-size:auto clamp(430px,55svh,500px)!important;
    background-position:32% top!important;
    transform:none!important;
  }
  .hero--approved-art .hero-live-copy{margin-top:clamp(330px,42svh,390px)}
  .harbor-info-deck{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 620px){
  .site-header{
    min-height:60px;
    gap:8px;
    padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));
    background:linear-gradient(180deg,rgba(3,9,16,.96),rgba(3,9,16,.62),transparent);
  }
  .brand{gap:8px;max-width:calc(100% - 49px)}
  .brand-mark{width:36px;height:36px;flex:0 0 36px;border-radius:12px;font-size:21px}
  .brand strong{font-size:11.5px;line-height:1.02;letter-spacing:-.01em}
  .brand small{margin-top:2px;font-size:7px;letter-spacing:.1em}
  .menu-button{width:40px;height:40px;flex:0 0 40px;padding:10px;border-radius:12px}
  .mobile-menu{padding:76px 18px max(96px,calc(72px + env(safe-area-inset-bottom)))}
  .mobile-menu>a:not(.button){padding:12px 3px;font-size:24px}

  .hero{padding:72px 12px 32px}
  .hero-bg--approved-marina{
    height:clamp(390px,52svh,465px)!important;
    min-height:390px!important;
    background-size:auto clamp(390px,52svh,465px)!important;
    background-position:31% top!important;
  }
  .hero--approved-art .hero-live-copy{margin-top:clamp(295px,39svh,355px)}
  .hero--approved-art .hero-live-copy h1{font-size:clamp(38px,11.5vw,46px)}
  .hero--approved-art .hero-live-copy>p:not(.eyebrow){font-size:13px;line-height:1.5}

  .harbor-info-deck{grid-template-columns:1fr;padding:24px 12px 52px}
  .portal-card{min-height:205px;padding:20px;border-radius:22px}
  .portal-card h2{font-size:29px}
  .service-selector,.experience-section,.story-section,.area-section,.faq-section,.final-cta{
    padding-left:14px;
    padding-right:14px;
  }
}

@media (max-width: 380px){
  .brand strong{font-size:10.5px}
  .brand small{font-size:6.5px;letter-spacing:.08em}
  .hero-bg--approved-marina{
    height:390px!important;
    background-size:auto 390px!important;
    background-position:30% top!important;
  }
}


/* Customer tools and website lead card */
.customer-tools{
  position:relative;
  padding:clamp(72px,8vw,118px) clamp(20px,7vw,112px);
  border-top:1px solid rgba(241,213,168,.16);
  background:linear-gradient(180deg,rgba(3,11,20,.58),rgba(3,11,20,.76));
}
.customer-tools:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 16% 14%,rgba(215,169,101,.1),transparent 28%);
}
.customer-tools>*{position:relative}
.customer-tools-heading{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr);gap:30px;align-items:end;margin-bottom:34px}
.customer-tools-heading h2{max-width:850px;margin:0;font-size:clamp(38px,5vw,68px)}
.customer-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.customer-tool-card{
  min-height:240px;display:grid;grid-template-columns:58px 1fr;gap:22px;align-items:start;padding:30px;
  border:1px solid rgba(241,213,168,.42);border-radius:26px;text-decoration:none;
  background:linear-gradient(145deg,rgba(24,43,56,.42),rgba(3,13,23,.25));
  box-shadow:0 26px 68px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.16);
  backdrop-filter:blur(17px) saturate(122%);-webkit-backdrop-filter:blur(17px) saturate(122%);
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.customer-tool-card:hover{transform:translateY(-5px);border-color:rgba(241,213,168,.75);background:linear-gradient(145deg,rgba(53,59,56,.46),rgba(3,13,23,.24))}
.customer-tool-icon,.website-builder-mark{
  display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(241,213,168,.5);border-radius:50%;
  color:var(--gold-light);font-family:'Libre Caslon Display',serif;font-size:25px;
  background:rgba(4,14,24,.42);box-shadow:inset 0 1px rgba(255,255,255,.14);
}
.customer-tool-icon--star{font-size:19px}
.customer-tool-card small,.website-builder-card small{display:block;margin:3px 0 12px;color:var(--gold-light);font-size:10px;font-style:normal;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.customer-tool-card strong,.website-builder-card strong{display:block;font-family:'Libre Caslon Display',serif;font-size:clamp(28px,3vw,42px);font-weight:400;line-height:1.05}
.customer-tool-card em,.website-builder-card em{display:block;max-width:520px;margin-top:14px;color:#b9c5cb;font-size:14px;font-style:normal;line-height:1.6}
.website-builder-card{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:22px;align-items:center;margin-top:18px;padding:22px 26px;
  border:1px solid rgba(241,213,168,.31);border-radius:24px;text-decoration:none;
  background:linear-gradient(110deg,rgba(9,27,40,.76),rgba(28,36,39,.52),rgba(4,15,25,.68));
  box-shadow:0 22px 54px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:.3s ease;
}
.website-builder-card:hover{transform:translateY(-3px);border-color:rgba(241,213,168,.66)}
.website-builder-card strong{font-size:clamp(23px,2.5vw,34px)}
.website-builder-card em{margin-top:6px}
.website-builder-card b{color:var(--gold-light);font-size:12px;white-space:nowrap}
@media(max-width:1240px) and (min-width:1051px){
  .desktop-nav{gap:10px}.desktop-nav a{font-size:10.5px}.phone-link{padding:9px 11px}.header-book{padding:10px 13px}
}
@media(max-width:760px){
  .customer-tools{padding:66px 14px}
  .customer-tools-heading{grid-template-columns:1fr;gap:8px;margin-bottom:24px}
  .customer-tools-grid{grid-template-columns:1fr}
  .customer-tool-card{min-height:210px;grid-template-columns:48px 1fr;gap:16px;padding:22px 18px}
  .customer-tool-icon,.website-builder-mark{width:48px;height:48px;font-size:21px}
  .customer-tool-card strong{font-size:29px}
  .website-builder-card{grid-template-columns:48px 1fr;padding:19px 17px}
  .website-builder-card b{grid-column:1/-1;padding-top:10px;border-top:1px solid rgba(241,213,168,.18);white-space:normal}
}