/* ============================================================
   CASA DEL PULPO — shared stylesheet for every page.
   index.html, rocky-point-guide.html, driving-from-phoenix.html,
   frequently-asked-questions.html and guest-manual.html all link
   this one file, so a change here changes the whole site.
   ============================================================ */

/* ============================================================
   1. PALETTE & TYPE — change a color here, it changes everywhere
   ============================================================ */
/* Drawn from Encantame Towers: deep navy, Sea-of-Cortez cyan, and a
   brushed gold. Gold is the only warm note on the page, which is what
   makes it read as the call to action.
   Gold is legible on navy but NOT on white — keep it on dark grounds,
   on large display type, or as a fill behind dark text. */
:root{
  --foam:#EDF3F9; --sand:#F4ECE4; --white:#ffffff;
  --ink:#002B49; --ink-soft:#4E6B84;
  --sea:#00A9C5; --sea-deep:#1A428A;
  --guava:#0E6E8A; --butter:#C99A3A;
  --line:rgba(0,43,73,.14);
  --display:'DM Serif Display',Georgia,serif;
  --body:'Manrope',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --pad:clamp(20px,5vw,64px);
  --radius:20px;
  --shadow:0 18px 44px -22px rgba(0,43,73,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:70px}
/* the homepage stacks the sticky guide ribbon under the nav, so anchor
   jumps there need more clearance */
html:has(.guide-ribbon){scroll-padding-top:112px}
@media(max-width:640px){html:has(.guide-ribbon){scroll-padding-top:70px}}
body{margin:0;background:var(--foam);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;font-weight:450;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--guava);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.5rem,9vw,5.2rem)}
h2{font-size:clamp(1.9rem,6vw,3.2rem)}
h3{font-size:clamp(1.12rem,3vw,1.35rem);letter-spacing:-.01em}
p{margin:0 0 1em}
.eyebrow{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--sea-deep);margin:0 0 14px;display:flex;align-items:center;gap:9px;line-height:1.4}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--butter);flex:none}
.lede{font-size:clamp(1.04rem,2.3vw,1.24rem);color:var(--ink-soft);max-width:58ch}

/* ============================================================
   2. LAYOUT
   ============================================================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(58px,9vw,116px) 0}
.section-head{max-width:64ch;margin-bottom:clamp(30px,5vw,54px)}
.tint-sand{background:var(--sand)}
.tint-white{background:var(--white)}
.split{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;align-items:start}}

/* ============================================================
   2b. THE OCTOPUS MARK
   ============================================================ */
.octo{width:42px;height:42px;flex:none}
/* the name-story strip gets the photo treatment: low tide at sunset,
   which is literally the story the copy tells */
.namestrip{position:relative;color:var(--white);padding:clamp(44px,6vw,72px) 0;
  background:
    linear-gradient(to bottom, rgba(0,27,46,.68), rgba(0,27,46,.5)),
    url("/images/gallery-8.jpg") center 65%/cover no-repeat}
.namestrip h2{color:var(--white);text-shadow:0 2px 16px rgba(0,27,46,.5)}
.namestrip .translate{color:rgba(255,255,255,.85)}
.namestrip p{color:rgba(255,255,255,.92)}
.namestrip a{color:var(--butter)}
.namestrip-inner{display:grid;gap:22px;grid-template-columns:1fr;align-items:start}
@media(min-width:760px){.namestrip-inner{grid-template-columns:96px 1fr;gap:30px}}
.namestrip .octo-lg{width:96px;height:96px}
.namestrip h2{font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:10px}
.namestrip p{margin:0 0 .8em;max-width:62ch;font-size:1.02rem}
.namestrip .translate{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:10px}
.foot-octo{width:64px;height:64px;margin-bottom:14px}

/* ============================================================
   3. NAV — shared by every page
   ============================================================ */
.nav{position:sticky;top:0;z-index:60;background:rgba(237,243,249,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1180px;margin:0 auto;padding:8px var(--pad);display:flex;align-items:center;gap:18px}
.brand{font-family:var(--display);font-weight:400;font-size:1.08rem;text-decoration:none;white-space:nowrap;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.brand span{color:var(--guava)}
.nav-links{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-size:.85rem;font-weight:600;text-decoration:none;padding:8px 13px;border-radius:999px;white-space:nowrap;color:var(--ink-soft)}
.nav-links a:hover{background:var(--white);color:var(--ink)}
.nav-links a.minor{color:var(--ink-soft);opacity:.75;font-weight:500}
.nav-social{display:flex;gap:8px;flex:none;margin-left:2px}
.nav-social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--white);transition:background .18s ease,transform .18s ease}
.nav-social a:hover{background:var(--guava);transform:translateY(-1px)}
.nav-social svg{width:17px;height:17px;display:block}
@media(max-width:520px){.nav-social a{width:30px;height:30px}.nav-social svg{width:15px;height:15px}}

/* ---- mobile menu (CSS checkbox toggle; no framework) ----
   Below 900px the link row becomes a dropdown panel behind a hamburger;
   the FB/IG icons stay visible in the bar. Tapping any link closes the
   panel via the tiny inline handler on .nav-links. */
.nav-check{display:none}
.nav-toggle{display:none}
@media(max-width:899px){
  .nav-inner{position:relative}
  .nav-toggle{display:grid;place-items:center;width:42px;height:42px;flex:none;
    border:1px solid var(--line);border-radius:11px;background:var(--white);
    color:var(--ink);cursor:pointer;margin-left:6px}
  .nav-toggle svg{width:21px;height:21px}
  .nav-toggle .ic-close{display:none}
  .nav-check:checked ~ .nav-toggle .ic-burger{display:none}
  .nav-check:checked ~ .nav-toggle .ic-close{display:block}
  .nav-social{margin-left:auto}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;margin:0;padding:6px 0 10px;overflow:visible;
    background:var(--white);border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px -18px rgba(0,43,73,.35)}
  .nav-check:checked ~ .nav-links{display:flex}
  .nav-links a{padding:14px var(--pad);font-size:1rem;border-radius:0;color:var(--ink)}
  .nav-links a:hover{background:var(--foam)}
  .nav-links a.minor{opacity:1;color:var(--ink-soft)}
}

/* ============================================================
   3b. GUIDE RIBBON — sticks just under the nav (nav is ~59px tall;
   the ribbon tucks 1px underneath so no seam shows while scrolling)
   ============================================================ */
.guide-ribbon{position:sticky;top:58px;z-index:59;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;text-align:center;padding:9px var(--pad);
  background:var(--butter);color:var(--ink);text-decoration:none;
  font-size:.88rem;line-height:1.45;border-bottom:1px solid rgba(0,43,73,.18)}
/* on phones the ribbon scrolls away instead of eating 1/6 of the screen */
@media(max-width:640px){.guide-ribbon{position:static}}
.guide-ribbon b{font-weight:700}
.guide-ribbon .gr-cta{flex:none;font-family:var(--mono);font-size:.73rem;letter-spacing:.04em;
  background:var(--ink);color:var(--white);padding:6px 14px;border-radius:999px;white-space:nowrap}
.guide-ribbon:hover .gr-cta{background:var(--sea-deep)}
/* phones: swap the long line for the short label so it stays one row */
@media(max-width:640px){
  .guide-ribbon{font-size:.82rem}
  .guide-ribbon span:first-child{display:none}
  .guide-ribbon::before{content:"Our Rocky Point travel guide";font-weight:700}
}

/* ============================================================
   4. HERO (homepage)
   The grid is drawn with named areas so the photo can sit directly
   under the headline on a phone but beside the copy on a laptop:
     phone:  head / media / body        laptop:  head | media
                                                 body | media
   ============================================================ */
/* Full-bleed hero: the balcony-sunset photo IS the background, under a
   navy scrim so the type stays readable over the bright sky and the
   dark sea alike. */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(560px,92vh,940px);padding:clamp(40px,7vw,80px) 0 clamp(90px,12vw,130px);
  background:
    linear-gradient(to bottom, rgba(0,27,46,.62), rgba(0,27,46,.30) 45%, rgba(0,27,46,.58) 88%),
    url("/images/hero.jpg") center/cover no-repeat;
  color:var(--white)}
.hero-inner{max-width:800px;width:100%}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero h1{text-shadow:0 2px 22px rgba(0,27,46,.55)}
.hero .lede{color:rgba(255,255,255,.94);text-shadow:0 1px 14px rgba(0,27,46,.5)}
.hero h1 .swash{color:var(--butter);position:relative;white-space:nowrap}
.hero h1 .swash::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.09em;background:rgba(255,255,255,.55);border-radius:99px;z-index:-1}
.hero .btn-ghost{color:var(--white);border-color:rgba(255,255,255,.85)}
.hero .btn-ghost:hover{background:var(--white);color:var(--ink)}
.hero .fee-note{color:rgba(255,255,255,.85)}
.hero-body{margin-top:clamp(18px,3vw,26px)}
.hero-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.hero-stats li{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.73rem;letter-spacing:.03em;background:rgba(255,255,255,.92);color:var(--ink);border:1px solid rgba(255,255,255,.4);padding:7px 13px;border-radius:999px}
.hero-stats svg{width:15px;height:15px;flex:none;color:var(--guava)}
.hero-badge{margin:26px 0 0;font-family:var(--mono);font-size:.7rem;line-height:1.5;color:rgba(255,255,255,.75)}
.wave{display:block;width:100%;height:auto;position:absolute;left:0;bottom:-2px}

/* ============================================================
   4c. FULL-BLEED PHOTO SECTION — same treatment as the hero: the
   section's photo becomes its background under a navy scrim, and
   everything inside flips to light-on-dark. Used by #resort.
   ============================================================ */
.section-photo{
  background:
    linear-gradient(to bottom, rgba(0,27,46,.72), rgba(0,27,46,.55) 45%, rgba(0,27,46,.72)),
    url("/images/gallery-28.jpg") center/cover no-repeat;
  color:var(--white)}
.section-photo .eyebrow{color:rgba(255,255,255,.85)}
.section-photo h2{color:var(--white);text-shadow:0 2px 18px rgba(0,27,46,.5)}
.section-photo .lede,.section-photo p{color:rgba(255,255,255,.93)}
.section-photo strong{color:var(--white)}
.section-photo a{color:var(--butter)}
.section-photo .more{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.section-photo .more summary::after{color:var(--butter)}
.section-photo .more .more-body p{color:rgba(255,255,255,.88)}
.section-photo .callout{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.section-photo .callout h3{color:var(--white)}
.section-photo .callout p{color:rgba(255,255,255,.88)}

/* ============================================================
   4b. PROOF STRIP — the 5.0 rating, right under the hero
   ============================================================ */
.proof{background:var(--white);padding:clamp(30px,5vw,52px) 0}
.proof-inner{display:grid;gap:clamp(20px,3vw,34px);grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.proof-inner{grid-template-columns:auto 1fr 1fr}}
.proof-score{display:flex;align-items:center;gap:16px}
.proof-score .owners{width:76px;height:76px;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(150deg,var(--sea),var(--sea-deep));box-shadow:var(--shadow)}
.proof-score .owners img{width:100%;height:100%;object-fit:cover}
.proof-score .owners .ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--white);font-family:var(--mono);font-size:.6rem;text-align:center;line-height:1.4;padding:6px}
.proof-score b{font-family:var(--display);font-size:2rem;line-height:1;display:block}
.proof-score small{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);display:block;margin-top:5px;max-width:22ch}
.proof-score .stars{margin:0 0 4px}
.proof blockquote{margin:0;border-left:3px solid var(--butter);padding-left:16px}
.proof blockquote p{font-family:var(--display);font-size:1.02rem;line-height:1.45;margin:0 0 8px}
.proof blockquote cite{font-family:var(--mono);font-size:.68rem;font-style:normal;color:var(--sea-deep)}
.proof-more{font-family:var(--mono);font-size:.72rem;color:var(--guava);font-weight:700;text-decoration:none;border-bottom:1px solid var(--line)}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 24px;border-radius:999px;font-family:var(--body);font-weight:700;font-size:.96rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--butter);color:var(--ink);box-shadow:0 10px 24px -12px rgba(201,154,58,.85)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--white)}
.btn-sm{min-height:44px;padding:10px 18px;font-size:.87rem}
.fee-note{font-family:var(--mono);font-size:.73rem;color:var(--sea-deep);margin-top:14px}

/* ============================================================
   6. AMENITIES / FACTS / CALLOUTS / EXPANDERS
   ============================================================ */
.amen-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.amen{background:var(--white);border-radius:14px;padding:15px 17px;border:1px solid var(--line)}
.amen .dot{width:9px;height:9px;border-radius:50%;background:var(--sea);display:inline-block;margin-right:9px;vertical-align:middle}
.amen b{font-size:.94rem;font-weight:700}
.amen small{display:block;color:var(--ink-soft);font-size:.82rem;margin-top:2px;padding-left:18px}
/* amenity tiles with a photo: camera hint, hover preview, click to open */
button.amen{position:relative;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.amen.has-img b::after{content:"📷";font-size:.72rem;margin-left:7px;opacity:.55}
.amen .peek{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:min(240px,70vw);aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--line);background:var(--white);
  pointer-events:none;z-index:30}
.amen .peek img{width:100%;height:100%;object-fit:cover}
@media(hover:hover){
  .amen.has-img:hover .peek,.amen.has-img:focus-visible .peek{display:block}
  .amen.has-img:hover{border-color:var(--sea)}
}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:flex;gap:14px;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.facts b{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--sea-deep);flex:none}
.facts span{text-align:right}

.callout{border-radius:16px;padding:20px 22px;margin:0 0 16px;border:1px solid var(--line);background:var(--white)}
.callout h3{margin-bottom:7px}
.callout p{margin:0;font-size:.94rem;color:var(--ink-soft)}
.callout.warn{background:#FBF1E0;border-color:rgba(201,154,58,.45);border-left:5px solid var(--butter)}
.callout.warn h3{color:#8A6520}
.callout.warn p{color:var(--ink)}
.packlist{list-style:none;margin:10px 0 0;padding:0}
.packlist li{font-size:.93rem;padding:7px 0 7px 26px;position:relative;border-bottom:1px dashed var(--line)}
.packlist li:last-child{border-bottom:0}
.packlist li::before{content:"◆";position:absolute;left:0;color:var(--sea);font-size:.7rem;top:9px}

/* "more" expanders — keeps homepage sections to a few sentences */
.more{border:1px solid var(--line);border-radius:14px;background:var(--white);margin:14px 0 0}
.more summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:700;font-size:.93rem;display:flex;justify-content:space-between;gap:14px}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";color:var(--guava);font-size:1.25rem;line-height:1}
.more[open] summary::after{content:"–"}
.more .more-body{padding:2px 18px 16px}
.more .more-body p{font-size:.94rem;color:var(--ink-soft)}

/* ============================================================
   7. THE DRIVE (numbered because it genuinely is a sequence)
   ============================================================ */
.drive{list-style:none;margin:0;padding:0;counter-reset:step}
.drive li{counter-increment:step;position:relative;padding:20px 0 20px 58px;border-bottom:1px solid var(--line)}
.drive li::before{content:counter(step);position:absolute;left:0;top:20px;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--butter);font-family:var(--mono);font-size:.85rem;display:flex;align-items:center;justify-content:center}
.drive h3{margin-bottom:4px}
.drive p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.drive .mins{font-family:var(--mono);font-size:.72rem;color:var(--guava);display:block;margin-top:6px}

/* ============================================================
   8. GALLERY
   ============================================================ */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){
  .gallery{grid-template-columns:repeat(4,1fr)}
  .gallery .g-item:nth-child(1),
  .gallery .g-item:nth-child(6){grid-column:span 2;grid-row:span 2}
}
.g-item{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;aspect-ratio:1/1;background:linear-gradient(140deg,var(--sea),var(--sea-deep));border:0;padding:0;font:inherit;color:var(--white)}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.g-item:hover img{transform:scale(1.05)}
.g-item .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-family:var(--mono);font-size:.67rem;line-height:1.5;padding:14px}
.g-item .ph em{font-style:normal;opacity:.8;font-size:.61rem}
.gallery-more{display:flex;justify-content:center;margin-top:clamp(22px,3.5vw,34px)}

/* full gallery — every photo, opened from the button */
.photos-modal{position:fixed;inset:0;z-index:190;background:var(--white);display:none;flex-direction:column}
.photos-modal.open{display:flex}
.pm-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--pad);border-bottom:1px solid var(--line);background:var(--white)}
.pm-head p{margin:0;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--sea-deep)}
.pm-head strong{display:block;font-family:var(--display);font-size:1.25rem;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.pm-close{background:var(--ink);color:var(--white);border:0;border-radius:999px;min-height:44px;padding:0 20px;
  font-family:var(--mono);font-size:.75rem;cursor:pointer;flex:none}
.pm-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(20px,4vw,40px) var(--pad) clamp(40px,7vw,80px)}
.pm-set+.pm-set{margin-top:clamp(30px,5vw,54px)}
.pm-set h3{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pm-set h3 span{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);letter-spacing:.08em;margin-left:10px}
.pm-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);max-width:1180px}
@media(min-width:700px){.pm-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.pm-grid{grid-template-columns:repeat(4,1fr)}}
.pm-item{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;
  background:linear-gradient(140deg,var(--sea),var(--sea-deep));border:0;padding:0;font:inherit;color:var(--white)}
.pm-item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.pm-item:hover img{transform:scale(1.05)}
.pm-item .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 8px;text-align:left;
  font-family:var(--mono);font-size:.63rem;line-height:1.35;letter-spacing:.02em;
  background:linear-gradient(to top,rgba(0,43,73,.78),transparent);opacity:0;transition:opacity .25s ease}
.pm-item:hover .cap,.pm-item:focus-visible .cap{opacity:1}
@media(hover:none){.pm-item .cap{opacity:1}}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,43,73,.94);display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%}
.lightbox img{max-width:100%;max-height:82vh;border-radius:12px}
.lightbox figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--white);text-align:center}
.lightbox figcaption i{font-style:normal;opacity:.6;margin-left:10px}
.lightbox-close{position:absolute;top:16px;right:16px;background:var(--white);color:var(--ink);border:0;border-radius:999px;width:46px;height:46px;font-size:1.4rem;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);color:var(--ink);
  border:0;border-radius:999px;width:46px;height:46px;font-size:1.3rem;line-height:1;cursor:pointer}
.lightbox.solo .lb-nav{display:none}
.lb-nav[data-dir="-1"]{left:12px}
.lb-nav[data-dir="1"]{right:12px}
@media(min-width:780px){.lb-nav[data-dir="-1"]{left:24px}.lb-nav[data-dir="1"]{right:24px}}
body.no-scroll{overflow:hidden}

/* ============================================================
   8b. FULL-WIDTH OCEAN BAND between major sections
   ============================================================ */
.ocean-band{margin:0;position:relative}
.ocean-band img{width:100%;height:clamp(240px,42vw,440px);object-fit:cover;display:block}
.ocean-band figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px var(--pad) 16px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--white);
  background:linear-gradient(to top,rgba(0,43,73,.55),transparent)}

/* ============================================================
   9. GUIDE — the signature: travel time from our door on every card
   ============================================================ */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 18px;scrollbar-width:none}
/* phones scroll the chip row; wider screens wrap it so every filter
   (all ten of them now) stays visible */
@media(min-width:640px){.chips{flex-wrap:wrap;overflow-x:visible}}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-family:var(--mono);font-size:.73rem;letter-spacing:.03em;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink-soft);cursor:pointer;min-height:40px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.card{background:var(--white);border-radius:16px;padding:20px;border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
/* the guide filter sets [hidden]; without this, .card's display:flex
   would override the attribute and filtering would do nothing */
.card[hidden]{display:none}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card h3{font-size:1.1rem}
.card p{margin:0;font-size:.93rem;color:var(--ink-soft)}
.card .kind{font-family:var(--mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.13em;color:var(--sea-deep)}
.trip{font-family:var(--mono);font-size:.7rem;font-weight:700;white-space:nowrap;padding:4px 10px;border-radius:999px;flex:none}
.trip.here{background:rgba(201,154,58,.28);color:#7A5300}
.trip.walk{background:rgba(0,169,197,.16);color:var(--sea-deep)}
.trip.drive{background:rgba(14,110,138,.13);color:var(--guava)}
.card .tip{font-family:var(--mono);font-size:.72rem;color:var(--ink);border-top:1px dashed var(--line);padding-top:9px;margin-top:auto;line-height:1.6}
.card .tip b{color:var(--guava)}
.card .cash{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--butter);padding:3px 9px;border-radius:999px;align-self:flex-start}
/* optional photo strip across the top of a guide card */
.card .card-photo{margin:-20px -20px 14px;border-radius:16px 16px 0 0;overflow:hidden;aspect-ratio:5/2}
.card .card-photo img{width:100%;height:100%;object-fit:cover}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--guava);text-decoration:underline;text-underline-offset:3px}
.card .card-links{display:flex;gap:16px;flex-wrap:wrap;align-self:flex-start}
.card .card-links:empty{display:none}
.card .maplink{font-family:var(--mono);font-size:.68rem;color:var(--sea-deep);text-decoration:none;border-bottom:1px solid var(--line);align-self:flex-start}
.maplink .fav{width:15px;height:15px;border-radius:3px;vertical-align:-3px;margin-right:5px;display:inline-block}
.chip svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
.card .maplink:hover{color:var(--guava)}

/* ============================================================
   10. ACCORDIONS (FAQ + house manual)
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;font-weight:700;font-size:1rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--guava);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 18px;color:var(--ink-soft);font-size:.94rem;margin:0}
.quotes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.quote{background:var(--white);border-radius:16px;padding:22px;border:1px solid var(--line);margin:0}
.quote p{font-family:var(--display);font-size:1.06rem;line-height:1.42;margin:0 0 12px}
.quote cite{font-family:var(--mono);font-size:.71rem;font-style:normal;color:var(--sea-deep)}
.stars{color:#B07E22;letter-spacing:2px;font-size:.9rem;margin-bottom:10px}

/* ============================================================
   11. EMERGENCY
   ============================================================ */
.emg{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.emg-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.emg-card h3{font-size:1.05rem;margin-bottom:10px}
.emg-card ul{list-style:none;margin:0;padding:0}
.emg-card li{font-size:.92rem;padding:5px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.emg-card li span{color:var(--ink-soft)}
.emg-card a{font-family:var(--mono);font-size:.86rem;font-weight:700;color:var(--guava);text-decoration:none;white-space:nowrap}
.emg-card.big{background:var(--guava);color:var(--white);border-color:var(--guava)}
.emg-card.big h3{color:var(--white)}
.emg-card.big .nine{font-family:var(--display);font-size:3.4rem;line-height:1;letter-spacing:-.03em}
.emg-card.big p{margin:8px 0 0;font-size:.9rem;color:rgba(255,255,255,.88)}

/* ============================================================
   12. BOOK / MAP / FOOTER
   ============================================================ */
.map-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--white)}
.map-frame iframe{width:100%;height:340px;border:0;display:block}
footer{background:var(--ink);color:rgba(255,255,255,.72);padding:44px 0 120px;font-size:.87rem}
@media(min-width:760px){footer{padding-bottom:44px}}
footer a{color:var(--white)}
.foot-grid{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:700px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer .brand span{color:var(--butter)}
.foot-grid h4{font-family:var(--mono);font-size:.71rem;text-transform:uppercase;letter-spacing:.13em;color:var(--butter);margin:0 0 10px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:7px}
.disclaimer{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:.76rem;color:rgba(255,255,255,.55);max-width:72ch}

/* ============================================================
   13. STICKY MOBILE BOOKING BAR
   ============================================================ */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:80;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.sticky-bar .btn{flex:1;min-height:48px;padding:12px 10px;font-size:.89rem}
@media(min-width:760px){.sticky-bar{display:none}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ============================================================
   14. AVAILABILITY CALENDAR + INQUIRY FORM
   ============================================================ */
.avail-sec{background:var(--sand);padding:clamp(40px,6vw,72px) 0}
.avail{background:var(--white);border-radius:var(--radius);padding:clamp(22px,3.4vw,38px);box-shadow:var(--shadow);border:1px solid var(--line)}
.avail h2{margin:0 0 6px}
.avail .lede{margin:0 0 20px}
.avail-legend{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;color:var(--ink);margin-bottom:20px}
.avail-legend i{font-style:normal;display:inline-flex;align-items:center;gap:8px}
.avail-legend b{width:15px;height:15px;border-radius:5px;border:1px solid var(--line)}
/* fixed 1 / 2 / 4 columns — each divides the 8 rendered months evenly,
   so the calendar always ends on a full row */
.months{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:480px){.months{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.months{grid-template-columns:repeat(4,1fr)}}
.month h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 12px;color:var(--sea-deep)}
.dow,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dow span{font-family:var(--mono);font-size:.6rem;color:var(--ink-soft);text-align:center;padding-bottom:6px}
.days span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.84rem;font-weight:600;border-radius:7px;background:var(--foam);color:var(--ink)}
.days .out{background:none}
.days .busy{background:#EADCCB;color:#77571E;text-decoration:line-through;font-weight:500}
.days .past{background:none;color:var(--ink-soft);opacity:.45;font-weight:400;position:relative}
/* the slash: one thin diagonal line, corner to corner */
.days .past::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,
    transparent calc(50% - .5px), currentColor calc(50% - .5px),
    currentColor calc(50% + .5px), transparent calc(50% + .5px))}
.avail-note{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);margin-top:20px;line-height:1.65;max-width:70ch}

/* the inquiry form itself */
.inquiry{margin-top:clamp(26px,4vw,40px);border-top:1px solid var(--line);padding-top:clamp(24px,4vw,36px)}
.inquiry h3{font-size:clamp(1.3rem,3.4vw,1.7rem);margin-bottom:6px}
.inquiry .sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:20px;max-width:56ch}
.iq-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:560px){.iq-grid{grid-template-columns:1fr 1fr}}
@media(min-width:760px){.iq-grid{grid-template-columns:repeat(4,1fr)}}
.iq-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.iq-field.wide{grid-column:1/-1}
@media(min-width:760px){.iq-field.half{grid-column:span 2}}
.iq-field label{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sea-deep)}
.iq-field input,.iq-field select,.iq-field textarea{font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--foam);border:1px solid var(--line);border-radius:12px;padding:13px 14px;min-height:50px;width:100%}
.iq-field textarea{min-height:96px;resize:vertical}
.iq-field input:focus,.iq-field select:focus,.iq-field textarea:focus{outline:3px solid var(--guava);outline-offset:1px}
.iq-hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}
.estimate{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--foam);display:none}
.estimate.show{display:block}
.estimate .row{display:flex;justify-content:space-between;gap:14px;font-size:.95rem;padding:3px 0}
.estimate .row b{font-family:var(--mono);font-size:.9rem}
.estimate .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;font-weight:700}
.estimate .row.total b{color:var(--guava);font-size:1.05rem}
.estimate .fine{font-family:var(--mono);font-size:.66rem;color:var(--ink-soft);margin:10px 0 0;line-height:1.6}
.estimate .clash{color:#8A2B1D;font-weight:700;font-size:.92rem;margin:0}
.iq-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.iq-status{font-family:var(--mono);font-size:.78rem;margin:12px 0 0;display:none}
.iq-status.ok{display:block;color:#1F6B3A}
.iq-status.err{display:block;color:#8A2B1D}
.iq-alt{font-size:.85rem;color:var(--ink-soft);margin:14px 0 0}
.iq-alt a{color:var(--guava);font-weight:700}

/* ============================================================
   15. LOCATION
   ============================================================ */
.loc-facts{list-style:none;margin:18px 0 0;padding:0}
.loc-facts li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.loc-facts b{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--sea-deep);flex:none;min-width:92px;padding-top:2px}

/* ============================================================
   16. SUBPAGE HEADER (guide, drive, faq, manual)
   ============================================================ */
.subhead{padding:clamp(40px,7vw,80px) 0 clamp(26px,4vw,44px)}
/* photo-banner variant: set the image per page with style="--shbg:url(...)" */
.subhead-photo{color:var(--white);padding:clamp(56px,9vw,120px) 0 clamp(34px,5vw,60px);
  background:
    linear-gradient(to bottom, rgba(0,27,46,.78), rgba(0,27,46,.58)),
    var(--shbg) center/cover no-repeat}
.subhead-photo h1{color:var(--white);text-shadow:0 2px 18px rgba(0,27,46,.55)}
.subhead-photo .lede{color:rgba(255,255,255,.95);text-shadow:0 1px 12px rgba(0,27,46,.75)}
.subhead-photo .crumb{color:rgba(255,255,255,.85)}
.subhead-photo .eyebrow{color:rgba(255,255,255,.85)}
.subhead-photo a{color:var(--white)}

/* pre-footer CTA band on the content subpages */
.cta-band{position:relative;color:var(--white);text-align:center;padding:clamp(56px,9vw,110px) 0;
  background:
    linear-gradient(to bottom, rgba(0,27,46,.6), rgba(0,27,46,.68)),
    url("/images/ocean-from-the-tower.jpg") center/cover no-repeat}
.cta-band h2{color:var(--white);margin-bottom:12px;text-shadow:0 2px 18px rgba(0,27,46,.55)}
.cta-band p{color:rgba(255,255,255,.92);max-width:52ch;margin:0 auto 24px}
.subhead h1{font-size:clamp(2rem,6.5vw,3.6rem)}
.subhead .lede{margin-top:14px}
.crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--guava);text-decoration:none;display:inline-block;margin-bottom:18px}
.crumb:hover{text-decoration:underline}