/* ============================================================
   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:'Fraunces',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:600;line-height:1.03;letter-spacing:-.02em;margin:0;font-variation-settings:'SOFT' 40,'WONK' 1}
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}
.namestrip{background:var(--foam);padding:clamp(34px,5vw,56px) 0}
.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;color:var(--ink-soft);max-width:62ch;font-size:1.02rem}
.namestrip .translate{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sea-deep);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:700;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}}

/* ============================================================
   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
   ============================================================ */
.hero{position:relative;padding-top:clamp(24px,5vw,60px);overflow:hidden}
.hero-grid{display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:1fr;grid-template-areas:"head" "media" "body"}
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.05fr .95fr;column-gap:clamp(28px,4vw,52px);align-items:center;
    grid-template-areas:"head media" "body media"}
}
.hero-head{grid-area:head}
.hero-body{grid-area:body}
.hero h1 .swash{color:var(--guava);position:relative;white-space:nowrap}
.hero h1 .swash::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.09em;background:var(--butter);border-radius:99px;z-index:-1}
.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:var(--white);border:1px solid var(--line);padding:7px 13px;border-radius:999px}
.hero-stats svg{width:15px;height:15px;flex:none;color:var(--guava)}
.hero-media{grid-area:media;margin:0}
.hero-frame{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);background:linear-gradient(150deg,var(--sea),var(--sea-deep))}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-badge{text-align:center;margin-top:12px;font-family:var(--mono);font-size:.72rem;line-height:1.5;color:var(--ink-soft)}
.hero-badge b{color:var(--guava)}
.wave{display:block;width:100%;height:auto;margin-top:-2px}

/* ============================================================
   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:600;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}
.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}
.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}
.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}
.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)}
.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}