/* ============================================================
   surf-camp-morocco.com
   ============================================================ */

:root{
  /* Ocean palette. Deep navy for structure, turquoise for action, foam and
     pale blue-grey for surfaces. Coral is the single warm accent, used only
     where something must be found instantly (price, primary CTA). */
  --abyss:#052F3E; --deep:#0A5B75; --tide:#0FA3B1; --foam:#D6EEF2;
  --erg:#0E7C8C; --sun:#FF6B4A; --sand:#F0F7F9; --paper:#F8FBFC;
  --ink:#12262E; --muted:#5C7079; --rule:#D7E6EA;
  --shell:#FFFFFF; --star:#F5B301;
  /* Accessible counterparts. --sun and --tide are the brand colours and stay
     exactly as they are for accents, icons, focus rings and text on dark;
     these two are the versions used UNDER WHITE TEXT, because the originals
     did not reach WCAG AA there: white on --sun measured 2.82:1 and white on
     --tide 3.05:1, against the 4.5:1 that 16px bold button text requires.
     The primary "Book now" button was the worst contrast on the whole site.
     --star-ink is the star glyph on a light card; --star stays for the dark
     review panels, where it already measures 7.6:1. */
  --cta:#CF4420; --cta-hover:#B8340C; --star-ink:#B8860B;
  /* Page gutter. Anything that bleeds full-width must offset by exactly
     this, so the two can never drift apart and push the document wider. */
  --gutter:24px;
  --good:#12795A; --warn:#B0521A;
  /* Roboto for headings and UI, Open Sans for body copy. Both are common
     enough to often be cached already, and both have real system fallbacks
     so the page is readable before webfonts arrive. */
  --disp:"Roboto","Helvetica Neue",Arial,sans-serif;
  --serif:"Open Sans","Segoe UI",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}

/* Every icon() glyph is a 24x24 line drawing, and SVG's own defaults are the
   opposite of that: fill black, stroke none. Most call sites set the stroke
   themselves, but .title-icon and .svc-ic never did, so the section headings
   on the homepage and the service cards on /surf-spots rendered their icon as
   a black dot (the one <circle> in the path) with the strokes invisible.
   :where() so this carries ZERO specificity — every existing rule that sets a
   stroke colour still wins, and only the icons with no rule at all are
   affected. */
:where(svg[viewBox="0 0 24 24"]){fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.62;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
h1,h2,h3,h4,h5,h6{font-family:var(--disp);font-weight:700;line-height:1.18;letter-spacing:-.01em;color:var(--abyss);margin:0;}
p,ul,ol,dl,figure{margin:0;}
a{color:var(--deep);text-underline-offset:3px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:12px 18px;font-family:var(--disp);}
:focus-visible{outline:3px solid var(--cta);outline-offset:3px;}

.wrap{max-width:1140px;margin:0 auto;padding:0 var(--gutter);}
.mid{max-width:820px;}
.sec{padding:52px 0;}
@media(max-width:1024px){.sec{padding:44px 0;}}
.sec-sand{background:var(--sand);}
.sec-deep{background:var(--deep);color:var(--foam);}
.sec-abyss{background:var(--abyss);color:#C6DDE4;}
.sec-deep h2,.sec-deep h3,.sec-deep h4,.sec-abyss h2,.sec-abyss h3,.sec-abyss h4{color:#fff;}
.sec-deep a,.sec-abyss a{color:#7FD9E4;}
/* Fine print inherited --muted, which is a grey chosen for light grounds: on
   --abyss it measured 2.73:1. And a .btn inside a dark section picked up the
   link colour above, putting #7FD9E4 on the button's --erg fill at 3.02:1. */
.sec-deep .fine,.sec-abyss .fine{color:#A9B6B7;}
.sec-deep a.btn,.sec-abyss a.btn,.sec-deep .btn,.sec-abyss .btn{color:#fff;}

/* ---------- header ---------- */
.site-head{background:var(--abyss);position:sticky;top:0;z-index:50;}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--disp);
  font-weight:500;font-size:1.12rem;color:#fff;letter-spacing:-.02em;}
.logo strong{font-weight:800;color:#7FD9E4;margin-left:4px;}
/* Brand mark: foam-coloured waves under the green star of the Moroccan
   flag. The flag green (#006233) is too dark to read on the navy header, so
   the mark uses a lifted version of it and keeps the true flag green where
   it sits on a light ground. */
.logo-mark{width:48px;height:48px;flex:none;}
/* Sand against the dark header and footer, so the tent separates from the
   green star and the blue waves without a fourth idea in the palette. */
.logo-tent{fill:none;stroke:#E8B06A;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;}
/* The interlaced pentagram of the Moroccan flag: unfilled, so the five chords
   cross and leave the pentagon open in the middle. That hole is the whole
   character of the mark and it is only about two pixels wide, so the stroke
   has to stay finer than the tent and the waves around it. */
.logo-star{fill:none;stroke:#17A45C;stroke-width:1;stroke-linejoin:round;}
.logo-wave{fill:none;stroke:#7FD9E4;stroke-width:1.6;stroke-linecap:round;}
.site-foot .logo-star{stroke:#17A45C;}
.nav{display:flex;align-items:center;gap:22px;}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-end{display:flex;align-items:center;gap:12px;}
/* Centred on the header, not on the space left over beside the logo. The
   logo is wider than the two buttons opposite it, so anything that centres
   within the remaining flex run lands visibly off to the right. Taking the
   links out of flow and pinning them to the midpoint is what actually puts
   them in the middle of the bar. Desktop only: in the burger menu they are
   a stacked list and this does not apply. */
@media(min-width:781px){
  .head-inner{position:relative;}
  .nav-links{position:absolute;left:50%;transform:translateX(-50%);}
}
.nav a{font-family:var(--disp);font-size:.95rem;font-weight:600;color:#C8D6D7;text-decoration:none;padding:6px 0;}
.nav a:hover,.nav a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--tide);}
/* ---------- account menu ---------- */
/* A <details> element, so it opens without JavaScript. */
.acct{position:relative;}
.acct-btn{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;
  padding:7px 10px 7px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(255,255,255,.07);transition:background .15s,border-color .15s;}
.acct-btn::-webkit-details-marker{display:none;}
.acct-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);}
.acct-btn svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.acct-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid rgba(255,255,255,.75);}
.acct[open] .acct-caret{transform:rotate(180deg);}
.acct[open] .acct-btn{background:rgba(255,255,255,.16);}

.acct-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:70;width:296px;
  background:var(--shell);border:1px solid var(--rule);border-radius:12px;padding:7px;
  box-shadow:0 8px 20px rgba(5,47,62,.16),0 26px 50px -28px rgba(5,47,62,.6);}
.acct-panel a{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:8px;
  text-decoration:none;color:var(--ink);box-shadow:none;}
.acct-panel a:hover{background:var(--foam);color:var(--ink);box-shadow:none;}
.acct-panel svg{flex:none;width:20px;height:20px;margin-top:2px;stroke:var(--tide);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.acct-panel strong{display:block;font-family:var(--disp);font-size:.92rem;color:var(--abyss);}
.acct-panel small{display:block;font-size:.78rem;color:var(--muted);margin-top:2px;line-height:1.4;}
.navtoggle,.burger{display:none;}

/* ---------- breadcrumbs ---------- */
.crumbs{background:var(--sand);font-family:var(--disp);font-size:.86rem;}
.crumbs .wrap{padding-top:7px;padding-bottom:7px;}
/* The crumb links were a 16px-high tap target on a phone. The padding takes
   them to 26px without changing the height of the bar — the wrap above gave
   back the 8px it adds. */
.crumbs a{color:var(--deep);text-decoration:none;display:inline-block;padding:5px 0;}
.crumbs span{color:var(--muted);margin:0 8px;}

/* ---------- blog post ---------- */
.guide-figure{margin:26px 0 8px;}
.guide-figure img{width:100%;height:auto;border-radius:10px;display:block;}
.guide-seealso{margin:26px 0;padding:16px 20px;background:var(--foam);border-radius:10px;}
.guide-seealso a{display:inline-block;padding:3px 0;}
.guide-seealso h3{font-family:var(--disp);font-size:.78rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--deep);margin:0 0 8px;}
.guide-seealso ul{list-style:none;margin:0;padding:0;}
.guide-seealso li{margin:5px 0;font-size:.97rem;}

/* ---------- homepage: browse by type, and reviews ---------- */
.title-icon{display:block;margin:0 auto 10px;color:var(--tide);}
.title-icon svg{width:30px;height:30px;}

.rev-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.rev-card{background:var(--shell);border:1px solid var(--rule);border-radius:12px;padding:20px 22px;
  box-shadow:0 1px 2px rgba(5,47,62,.05);}
/* The star row is the first thing scanned, so it leads the card. */
.rev-stars{color:var(--star-ink);font-size:1.02rem;letter-spacing:.06em;margin-bottom:10px;}
.rev-card h3{font-size:1rem;margin:0 0 8px;}
.rev-card p{font-size:.95rem;margin:0;}
.rev-meta{margin-top:12px !important;font-size:.86rem;color:var(--muted);}
.rev-meta a{color:var(--deep);}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--abyss);padding:110px 0 0;text-align:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 18% 12%,#0E6A85 0,transparent 60%),
  radial-gradient(110% 90% at 88% 92%,#12A5B8 0,transparent 64%),
  linear-gradient(180deg,#052F3E 0,#0A5B75 58%,#0E8497 100%);}
/* The photograph, then a blue wash over it. The wash is what the headline's
   contrast actually rests on: white on an unmodified photo is a gamble that
   changes every time the image does, and this hero carries the h1 on every
   page of the site. The gradient underneath still shows through the image at
   low opacity, so the two read as one surface. */
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Favour the lower band of the image: on a narrow screen the hero is tall
     and cover would otherwise crop to the empty sky, losing the horizon that
     makes it read as a photograph at all. */
  /* .46 was tuned against a flat generated gradient, where there was nothing
     to see anyway. Under a photograph it crushed the image to the point that
     the hero looked like a plain navy band. Raised to .62; the h1's contrast
     is then carried by the ::after wash below, which was strengthened to
     match and is measured rather than guessed. */
  object-position:50% 60%;opacity:.62;}
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,47,62,.72) 0,rgba(5,47,62,.30) 42%,rgba(10,91,117,.55) 100%),
    radial-gradient(86% 74% at 50% 46%,rgba(5,47,62,.88) 0,rgba(5,47,62,.30) 100%);}
/* Keep the hero legible when the viewer has asked for less motion or the
   image fails: the gradient beneath is a complete background on its own. */
@media (prefers-reduced-data:reduce){.hero-bg img{display:none;}}
.hero .wrap{position:relative;z-index:2;padding-bottom:90px;}
.hero h1{color:#fff;font-size:clamp(2.3rem,5.6vw,4.1rem);max-width:20ch;margin:0 auto;
  text-shadow:0 2px 30px rgba(0,0,0,.35);}
/* 1.5rem, not 1.35: over a photograph the measured background contrast is
   3.9:1, which is a pass for WCAG large text (>=24px) and a fail below it.
   The size is the difference between meeting AA and not. */
/* Body face, normal weight, and smaller than the display type above it: this
   is a sentence of supporting copy, not a second headline. The shadow stays —
   it is what keeps it readable over a photograph at this size. */
.hero p.sub{font-family:var(--body);font-weight:400;font-size:clamp(.98rem,1.5vw,1.12rem);
  line-height:1.55;max-width:64ch;margin-left:auto;margin-right:auto;
  text-shadow:0 1px 10px rgba(4,26,36,.6);
  /* Pure white, not #DCEEF3. At 18px this is normal-size text and needs
     4.5:1 against the wash behind it; the tint was giving away a fifth of the
     contrast for a softness nobody notices over a photograph. */
  color:#FFFFFF;margin-top:20px;}
.hero .meta{font-family:var(--disp);font-size:.9rem;color:#A6CBD4;margin-top:20px;}
/* Two crests: the back one translucent so the pair reads as depth rather
   than a single cut-out. Height is fixed so the hero copy never collides
   with the water on a short viewport. */
.hero-waves{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:96px;z-index:1;}
@media(max-width:640px){.hero-waves{height:62px;}}
.hero--small{padding:78px 0 0;}
.hero--small h1{font-size:clamp(2rem,4.4vw,3.2rem);}
.hero--small .wrap{padding-bottom:74px;}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--disp);font-weight:700;font-size:1rem;padding:15px 34px;
  background:var(--erg);color:#fff;text-decoration:none;border:2px solid var(--erg);
  border-radius:6px;transition:background .15s,color .15s,box-shadow .15s;}
.btn:hover{background:var(--deep);border-color:var(--deep);color:#fff;
  box-shadow:0 6px 18px rgba(10,91,117,.22);}
.btn--go{background:var(--cta);border-color:var(--cta);color:#fff;}
.btn--go:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:#fff;}
.btn-dark{background:var(--abyss);border-color:var(--abyss);color:#fff;}
.btn-dark:hover{background:var(--deep);border-color:var(--deep);color:#fff;}
/* Outline button. The default is the light-background version, because that
   is where most of them sit; white-on-white was invisible before. Dark
   sections opt back in to the white treatment below. */
.btn-line{background:transparent;color:var(--deep);border-color:var(--tide);}
.btn-line:hover{background:var(--erg);border-color:var(--erg);color:#fff;}
.hero .btn-line,
.strip .btn-line,
.sec-deep .btn-line,
.sec-abyss .btn-line{color:#fff;border-color:rgba(255,255,255,.55);}
.hero .btn-line:hover,
.strip .btn-line:hover,
.sec-deep .btn-line:hover,
.sec-abyss .btn-line:hover{background:#fff;border-color:#fff;color:var(--abyss);}
.btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:22px;}
.btns-left{justify-content:flex-start;}

/* ---------- titles ---------- */
.title{text-align:center;margin-bottom:30px;}
.title h2{font-size:clamp(1.8rem,3.4vw,2.6rem);}
.title .title-sub{font-family:var(--disp);font-weight:600;font-size:1rem;color:var(--erg);margin-top:9px;}
.sec-deep .title .title-sub,.sec-abyss .title .title-sub{color:#7FD9E4;}
.title p{color:var(--muted);margin-top:12px;font-size:1.08rem;max-width:68ch;margin-left:auto;margin-right:auto;}
.sec-deep .title p,.sec-abyss .title p{color:var(--foam);opacity:.85;}
.rule{width:64px;height:3px;background:var(--erg);margin:13px auto 0;}

/* ---------- prose ---------- */
.prose{max-width:72ch;}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:34px 0 12px;}
.prose h3{font-size:1.28rem;margin:26px 0 9px;}
.prose p+p,.prose ul+p,.prose p+ul{margin-top:16px;}
.prose ul,.prose ol{padding-left:1.2em;}
.prose li+li{margin-top:8px;}
.prose li::marker{color:var(--erg);}
.prose strong{font-weight:600;color:var(--abyss);}
.lead{font-size:1.2rem;line-height:1.55;color:var(--muted);}

/* ---------- image placeholder ---------- */
.ph{position:relative;background:repeating-linear-gradient(45deg,#DCEDF1 0 12px,#CDE4EA 12px 24px);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);aspect-ratio:3/2;}
.ph::after{content:attr(data-label);font-family:var(--disp);font-size:.8rem;font-weight:700;
  color:#5F8C99;text-align:center;padding:10px 14px;}
.ph-sq{aspect-ratio:1/1;}

/* ---------- welcome ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start;}
.split-imgs{display:grid;gap:18px;}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px;}
.pack{background:#fff;border:1px solid var(--rule);display:flex;flex-direction:column;scroll-margin-top:90px;}
.pack-featured{border-color:var(--tide);box-shadow:0 0 0 3px rgba(15,163,177,.14);}
.pack-img{position:relative;}
.pack-img .ph,.pack-img img{aspect-ratio:16/10;object-fit:cover;}
.pack-price{position:absolute;left:0;bottom:0;background:var(--erg);color:#fff;font-family:var(--disp);
  font-weight:700;font-size:1rem;padding:9px 16px;}
.pack-price small{font-weight:500;opacity:.9;font-size:.82rem;}
.pack-flag{position:absolute;right:0;top:0;background:var(--cta);color:#fff;font-family:var(--disp);
  font-weight:700;font-size:.78rem;padding:6px 12px;}
.pack-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;}
.pack-body h3,.pack-body h2{font-size:1.24rem;margin-bottom:8px;}
.pack-meta{font-family:var(--disp);font-size:.86rem;font-weight:600;color:var(--tide);margin-bottom:12px;}
.pack-body p{font-size:.99rem;color:var(--muted);margin-bottom:16px;}
.icons{display:flex;gap:12px;align-items:center;margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);}
.icons svg{width:25px;height:25px;stroke:var(--erg);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.icons span{margin-left:auto;font-family:var(--disp);font-size:.84rem;font-weight:700;color:var(--abyss);}
.pack-cta{display:block;text-align:center;font-family:var(--disp);font-weight:700;font-size:.94rem;
  padding:13px;background:var(--abyss);color:#fff;text-decoration:none;margin-top:18px;}
.pack-cta:hover{background:var(--erg);}

/* ---------- feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.card{background:#fff;border:1px solid var(--rule);padding:26px;}
.card h3,.card h2{font-size:1.18rem;margin-bottom:10px;}
.card p{font-size:1rem;color:var(--muted);}
.card ul{margin-top:12px;font-size:1rem;padding-left:1.15em;}
/* The HTML sitemap is a page of nothing but links, packed one per line
   at a 22px tap target. Spacing the rows out is the difference between
   usable and unusable on a phone, and it is the only page where the
   card list is the content rather than a footnote to it. */
.card ul li{padding:3px 0;}
/* On the anchor, not just the row: the tap target IS the link's own box. */
.card ul li > a{display:inline-block;padding:2px 0;}
.card-sea{border-top:5px solid var(--tide);}
.card-sand{border-top:5px solid var(--erg);}
.sec-deep .card,.sec-abyss .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);}
.sec-deep .card p,.sec-abyss .card p{color:#C4CFCF;}

/* ---------- tables ---------- */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);background:#fff;}
table{width:100%;border-collapse:collapse;font-size:.97rem;min-width:620px;}
table td a{display:inline-block;padding:3px 0;}
thead th{background:var(--abyss);color:#fff;text-align:left;font-family:var(--disp);font-weight:600;
  font-size:.92rem;padding:14px 16px;}
tbody td{padding:13px 16px;border-top:1px solid var(--rule);vertical-align:top;}
tbody tr:nth-child(even) td{background:#F9F5EE;}
tbody td:first-child{font-weight:600;color:var(--abyss);}
.fine{font-size:.92rem;color:var(--muted);margin-top:12px;}
.tag{display:inline-block;padding:3px 10px;font-family:var(--disp);font-size:.78rem;font-weight:700;white-space:nowrap;}
/* --good and --warn are tuned for white; on these tints they measured 4.48
   and 4.29. Darkened here only, so the tokens keep their other uses. */
.tag-beg,.tag-best{background:#DCEFE1;color:#0E6248;}
.tag-int,.tag-good{background:#FBE8C6;color:#8F4115;}
.tag-adv,.tag-avoid{background:#F5DCD2;color:#8A3312;}
.tag-fair{background:#EDE7DC;color:var(--muted);}

/* ---------- itinerary ---------- */
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18);}
.day{background:rgba(255,255,255,.05);padding:24px 22px;}
.day-sand{background:rgba(233,163,43,.1);}
.day-n{font-family:var(--disp);font-weight:700;font-size:.82rem;color:var(--sun);margin-bottom:8px;}
.day h4{color:#fff;font-size:1.05rem;margin-bottom:7px;}
.day p{font-size:.97rem;color:#BFCBCB;}

/* ---------- inclusions ---------- */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px;}
.incl-col{background:#fff;border:1px solid var(--rule);padding:24px 26px 26px;}
.incl-col h4{font-size:1.05rem;margin-bottom:14px;}
.incl-col ul{list-style:none;padding:0;}
.incl-col li{position:relative;padding-left:24px;font-size:.99rem;color:var(--muted);}
.incl-col li+li{margin-top:9px;}
.incl-col li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border:2px solid var(--erg);}
.incl-no li::before{border-color:#A9A092;background:#A9A092;}

/* ---------- departures ---------- */
.dep-month{margin-top:28px;}
.dep-month h4,.dep-month h3{font-family:var(--disp);font-size:1rem;color:var(--erg);border-bottom:1px solid var(--rule);
  padding-bottom:8px;margin-bottom:14px;}
.dep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;}
a.dep{display:block;background:#fff;border:1px solid var(--rule);border-left:4px solid var(--tide);
  padding:14px 16px;text-decoration:none;transition:border-color .15s,transform .15s;}
a.dep:hover{border-left-color:var(--erg);transform:translateX(2px);}
a.dep b{display:block;font-family:var(--disp);font-size:1.04rem;color:var(--abyss);}
a.dep span{display:block;font-size:.86rem;color:var(--muted);margin-top:2px;}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
.gal figure{margin:0;overflow:hidden;}
.gal img,.gal .ph{aspect-ratio:1/1;object-fit:cover;transition:transform .3s ease;}
.gal figure:hover img{transform:scale(1.05);}

/* ---------- activities ---------- */
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:20px;}
a.act{display:block;text-decoration:none;background:#fff;border:1px solid var(--rule);padding:28px 22px;
  text-align:center;transition:border-color .15s,transform .15s;}
a.act:hover{border-color:var(--erg);transform:translateY(-3px);}
a.act svg{width:40px;height:40px;stroke:var(--erg);fill:none;stroke-width:1.5;stroke-linecap:round;
  stroke-linejoin:round;margin:0 auto 14px;}
a.act h3{font-size:1.04rem;margin-bottom:5px;}
a.act p{font-size:.89rem;color:var(--muted);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule);max-width:900px;margin:0 auto;}
details.q{border-bottom:1px solid var(--rule);}
details.q>summary{cursor:pointer;list-style:none;padding:20px 46px 20px 0;position:relative;
  font-family:var(--disp);font-weight:600;font-size:1.06rem;color:var(--abyss);}
details.q>summary::-webkit-details-marker{display:none;}
details.q>summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--erg);border-bottom:2px solid var(--erg);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;}
details.q[open]>summary::after{transform:translateY(-20%) rotate(-135deg);}
details.q .a{padding:0 0 22px;color:var(--muted);max-width:74ch;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:start;}
.formbox{background:#fff;border:1px solid var(--rule);padding:32px 34px;}
.formbox h3{font-size:1.32rem;margin-bottom:8px;}
.formbox>p{color:var(--muted);margin-bottom:22px;}
.field{margin-bottom:18px;}
.field label{display:block;font-family:var(--disp);font-weight:700;font-size:.85rem;color:var(--abyss);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;font-family:var(--serif);font-size:1rem;
  padding:12px 14px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:0;}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--tide);outline-offset:0;border-color:var(--tide);}
.hp{position:absolute;left:-9999px;}
.note{padding:16px 18px;margin-bottom:22px;font-size:.97rem;}
.note-ok{background:#DCEFE1;border-left:4px solid var(--good);}
.note-err{background:#F7E2DA;border-left:4px solid var(--erg);}
.info h3{font-size:1.28rem;margin-bottom:10px;}
.info p{color:var(--muted);}
.info dl{margin-top:24px;}
.info dl>div{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--rule);}
.info svg{width:22px;height:22px;stroke:var(--erg);fill:none;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round;flex:none;margin-top:3px;}
.info dt{font-family:var(--disp);font-weight:700;font-size:.8rem;color:var(--muted);}
.info dd{margin:2px 0 0;font-family:var(--disp);font-weight:600;font-size:1.02rem;color:var(--abyss);}
.info dd a{color:var(--abyss);text-decoration:none;}
.info dd a:hover{color:var(--erg);}

/* ---------- reviews ---------- */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px;}
.rev{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:28px 26px;
  display:flex;flex-direction:column;}
.stars{color:var(--star);letter-spacing:3px;margin-bottom:14px;}
.rev blockquote{margin:0;font-size:1.02rem;color:#D8D2C5;font-style:italic;}
.rev footer{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:12px;}
.av{width:40px;height:40px;border-radius:50%;background:var(--erg);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;flex:none;}
.rev-name{font-family:var(--disp);font-weight:700;font-size:.96rem;color:#fff;}
.rev-src{font-size:.84rem;color:#9AA6A6;}

/* ---------- embeds ---------- */
.media{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.embed{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--rule);}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- related ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
a.rel{display:block;background:#fff;border:1px solid var(--rule);padding:24px;text-decoration:none;
  transition:border-color .15s,transform .15s;}
a.rel:hover{border-color:var(--erg);transform:translateY(-3px);}
a.rel h3,a.rel h2{font-size:1.1rem;margin-bottom:8px;}
a.rel p{font-size:.95rem;color:var(--muted);}

/* ---------- strip + footer ---------- */
.strip{background:var(--erg);color:#fff;padding:44px 0;text-align:center;}
.strip h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);}
.strip p{margin-top:12px;font-size:1.06rem;opacity:.94;}
/* Four cards rather than four stacked lists: the block carries forty links and
   without the grouping being visible it reads as one long undifferentiated
   column. The blurb is what tells a reader which group is theirs. */
/* align-items:start, or every card stretches to the height of the tallest and
   three of the four render as mostly empty boxes. */
.svc-grid{display:grid;gap:18px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
@media(min-width:900px){.svc-group--wide{grid-column:span 2;}}
.svc-group{background:var(--shell);border:1px solid var(--rule);border-radius:12px;
  padding:22px 24px;box-shadow:0 1px 2px rgba(5,47,62,.05);}
.svc-ic{display:block;color:var(--tide);margin-bottom:10px;}
.svc-ic svg{width:26px;height:26px;}
.svc-group h3{font-family:var(--disp);font-size:1.05rem;color:var(--abyss);margin:0 0 6px;}
/* max-width in characters, not pixels: the camps card spans two columns on
   a wide screen and the line would otherwise run the full width. */
.svc-blurb{font-size:.9rem;color:var(--muted);margin:0 0 14px;line-height:1.5;max-width:46ch;}
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:5px 18px;
  grid-template-columns:repeat(auto-fill,minmax(155px,1fr));}
/* No rule under these. text-decoration was already none; the line came from
   a transparent bottom border that turned solid on hover, which on a list of
   forty links read as forty underlines appearing and disappearing. Colour
   alone carries the hover now. */
.svc-list a{color:var(--deep);text-decoration:none;font-size:.93rem;
  display:block;padding:2px 0;}
.svc-list a:hover{color:var(--tide);}

.sub-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:18px auto 0;max-width:520px;position:relative;}
.sub-form input[type=email]{flex:1 1 260px;min-width:0;font:inherit;font-family:var(--body);
  padding:12px 14px;border:1px solid rgba(255,255,255,.5);border-radius:8px;
  background:rgba(255,255,255,.96);color:var(--ink);}
.sub-form input[type=email]::placeholder{color:#7C9099;}
.sub-form input[type=email]:focus{outline:3px solid rgba(255,255,255,.75);outline-offset:1px;}
.sub-form .btn{flex:0 0 auto;}
.sub-fine{font-size:.84rem;opacity:.85;margin-top:12px;}
@media(max-width:520px){.sub-form .btn{width:100%;justify-content:center;}}

.site-foot{background:var(--abyss);color:#A9B6B7;padding:46px 0 0;font-size:.98rem;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:34px;}
.site-foot h3{color:#fff;font-size:.95rem;margin-bottom:14px;}
.site-foot ul{list-style:none;padding:0;}
.site-foot li+li{margin-top:9px;}
.site-foot a{color:#A9B6B7;text-decoration:none;}
/* Footer list links were a 22px tap target. Scoped to the lists so the
   inline dot-separated row in .foot-base keeps its baseline. */
.site-foot ul a{display:inline-block;padding:2px 0;}
.site-foot a:hover{color:var(--sun);}
.logo-foot{margin-bottom:14px;}
.foot-base{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;padding-bottom:26px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.9rem;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .split,.contact-grid,.media{grid-template-columns:1fr;gap:36px;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px;}
}
@media(max-width:780px){
  .burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:10px 0;}
  .burger span{display:block;width:26px;height:2px;background:#fff;}
  .nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--abyss);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 22px;
    border-top:1px solid rgba(255,255,255,.12);}
  .navtoggle:checked ~ .nav{display:flex;}
  .nav-links,.nav-end{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .nav a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);}
  /* In the burger menu the account items become part of the list rather
     than a floating panel — there is nothing to float over. */
  .acct{width:100%;}
  .acct-btn{justify-content:center;margin-top:12px;border-radius:8px;}
  .acct-panel{position:static;width:auto;margin-top:8px;background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.16);box-shadow:none;}
  .acct-panel a{border-bottom:0;padding:10px;}
  .acct-panel a:hover{background:rgba(255,255,255,.1);}
  .acct-panel strong{color:#fff;}
  .acct-panel small{color:rgba(255,255,255,.7);}
  .head-inner{position:relative;flex-wrap:wrap;}
}
@media(max-width:640px){
  body{font-size:16.5px;}
  .sec{padding:36px 0;}
  :root{--gutter:20px;}
  .wrap{padding:0 var(--gutter);}
  .hero{padding:70px 0 0;}
  .gal{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}
@media print{.site-head,.strip,.site-foot,.btns{display:none;}}

/* ---------- spot fact grid ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);}
.fact{background:#fff;padding:18px 20px;}
.fact b{display:block;font-family:var(--disp);font-size:1.02rem;color:var(--abyss);line-height:1.25;}
.fact span{font-size:.86rem;color:var(--muted);display:block;margin-top:4px;}

/* ---------- article extras ---------- */
.toc{background:var(--sand);padding:22px 26px;margin:26px 0 8px;}
.toc h2{margin:0 0 10px;font-family:var(--disp);}
.toc ul{margin:0;padding-left:1.1em;}
.toc li+li{margin-top:6px;}
/* Each entry was 22px tall on a phone, under the 24px minimum. Padding on
   the anchor rather than the li, so the growth is inside the tap target. */
.toc a{color:var(--deep);display:inline-block;padding:3px 0;}
.rel-meta{font-family:var(--disp);font-size:.8rem;font-weight:700;color:var(--erg);
  margin-bottom:8px;text-transform:none;}
.cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;justify-content:center;}
.cats a{font-family:var(--disp);font-weight:600;font-size:.92rem;text-decoration:none;
  padding:9px 20px;border:1px solid var(--rule);color:var(--deep);background:#fff;}
.cats a:hover,.cats a.on{background:var(--abyss);color:#fff;border-color:var(--abyss);}
.site-foot .foot-base a{margin-right:4px;}

/* ---------- tour itinerary rows ---------- */
.days-list{list-style:none;padding:0;margin:0;counter-reset:d;}
.dayrow{position:relative;padding:0 0 34px 66px;}
.dayrow::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:rgba(255,255,255,.18);}
.dayrow:last-child::before{display:none;}
.dayrow-n{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:1.05rem;
  color:#fff;background:var(--erg);}
.dayrow-sand .dayrow-n{background:var(--erg);}
.dayrow h3{color:#fff;font-size:1.25rem;margin-bottom:10px;}
.dayrow p{color:#BFCBCB;max-width:70ch;}
.dayrow p+p{margin-top:14px;}
.dayrow-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.15);}
.dayrow-meta span{display:flex;align-items:center;gap:7px;font-family:var(--disp);font-size:.85rem;
  font-weight:600;color:var(--sun);}
.dayrow-meta svg{width:18px;height:18px;stroke:var(--sun);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:640px){.dayrow{padding-left:54px;}}

/* ---------- trust bar ---------- */

/* ---------- sticky mobile CTA ---------- */
.stickycta{display:none;}
@media(max-width:780px){
  .stickycta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--abyss);border-top:1px solid rgba(255,255,255,.15);
    align-items:stretch;box-shadow:0 -6px 20px rgba(0,0,0,.18);}
  .stickycta-price{flex:1;display:flex;align-items:center;padding:13px 16px;
    font-family:var(--disp);font-size:.9rem;color:#C8D6D7;text-decoration:none;}
  .stickycta-price strong{color:var(--sun);font-size:1.05rem;margin:0 4px;}
  /* #33240A was left over from when this button was amber. On the accent it
     measures 3.22:1 and fails AA; white on the same background is 4.67. */
  .stickycta-btn{display:flex;align-items:center;padding:13px 22px;background:var(--cta);
    color:#fff;font-family:var(--disp);font-weight:700;font-size:.95rem;text-decoration:none;}
  body{padding-bottom:52px;}

  /* ---- listing bar: price, rating, Book ----
     The booking card on a listing sits below the itinerary, the inclusions
     and the FAQ — on a phone that is several screens down. This keeps the
     three things a decision needs in front of the reader the whole way. */
  .stickycta--pdp{align-items:center;padding-right:8px;gap:10px;}
  .stickycta-info{flex:1;min-width:0;display:flex;flex-direction:column;
    justify-content:center;gap:1px;padding:9px 0 9px 16px;}
  .stickycta-amount{font-family:var(--disp);font-weight:700;font-size:1.12rem;
    color:#fff;line-height:1.15;}
  .stickycta-amount small{font-weight:400;font-size:.76rem;color:#A6CBD4;margin-left:3px;}
  .stickycta-rating{display:flex;align-items:center;gap:4px;font-size:.82rem;color:#C8D6D7;}
  .stickycta-star{color:var(--star);font-size:.9rem;line-height:1;}
  .stickycta-rating strong{color:#fff;font-weight:700;}
  .stickycta-count{color:#8FB0BA;}
  .stickycta-unit{font-size:.78rem;color:#A6CBD4;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .stickycta--pdp .stickycta-btn{border-radius:8px;padding:12px 24px;
    box-shadow:0 2px 10px rgba(207,68,32,.45);}
  body{padding-bottom:60px;}
}

/* Screen-reader-only: the star glyph is decorative, so the rating is also
   written out in words for anyone not looking at it. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---------- layout stability ---------- */
img{aspect-ratio:attr(width) / attr(height);}
.pack-img img,.gal img{aspect-ratio:auto;}
.hero-bg img{aspect-ratio:auto;}

/* ---------- reading progress on guides ---------- */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--sun);width:0;z-index:70;
  transition:width .1s linear;}
@media(prefers-reduced-motion:reduce){.progress{transition:none;}}

/* ---------- language switcher ---------- */
.langsw{position:relative;}
/* Deliberately identical to .acct-btn, which sits immediately beside it:
   same pill, same translucent fill, same border and hover, same caret. The
   two were a square outline and a rounded pill next to each other. */
.langsw-btn{display:flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 10px 7px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(255,255,255,.07);transition:background .15s,border-color .15s;
  color:#fff;font-family:var(--disp);font-weight:700;font-size:.85rem;
  /* 19px is the height of the account button's icon, so the two pills come
     out the same height and sit on the same baseline rather than nearly. */
  line-height:19px;}
.langsw-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);}
.langsw-btn svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.langsw-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid rgba(255,255,255,.75);}
.langsw:hover .langsw-btn,.langsw.open .langsw-btn{background:rgba(255,255,255,.16);}
.langsw.open .langsw-caret{transform:rotate(180deg);}
.langsw-list{position:absolute;right:0;top:calc(100% + 6px);background:var(--abyss);
  border:1px solid rgba(255,255,255,.2);list-style:none;margin:0;padding:6px 0;min-width:150px;
  display:none;z-index:80;}
.langsw:hover .langsw-list,.langsw.open .langsw-list{display:block;}
.langsw-list a{display:block;padding:9px 16px;color:#C8D6D7;text-decoration:none;
  font-family:var(--disp);font-size:.9rem;}
.langsw-list a:hover{background:rgba(255,255,255,.08);color:#fff;}
.langsw-list a[aria-current]{color:var(--sun);}
@media(max-width:780px){
  .langsw{width:100%;margin-top:12px;}
  .langsw-btn{width:100%;justify-content:center;border-radius:8px;}
  .langsw-list{position:static;display:block;border:0;background:transparent;padding:0;}
  .langsw-list a{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);}
}

/* ---------- marketplace ---------- */
.mk-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
.mk-card{display:block;background:#fff;border:1px solid rgba(11,31,42,.12);text-decoration:none;
  color:inherit;transition:border-color .15s,transform .15s;}
.mk-card:hover{border-color:var(--tide);transform:translateY(-2px);}
.mk-card-body{padding:20px;}
.mk-card h3{font-family:var(--disp);font-size:1.08rem;margin:0 0 8px;line-height:1.3;}
.mk-card p{font-size:.9rem;color:#4A5C63;margin:0 0 12px;line-height:1.5;}
.mk-card-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;color:var(--muted);margin-bottom:12px;}
.mk-card-price{display:flex;align-items:baseline;gap:6px;margin-top:12px;}
.mk-card-price strong{font-family:var(--disp);font-size:1.3rem;color:var(--abyss);}
.mk-card-price span{font-size:.78rem;color:var(--muted);}

.verified{display:inline-flex;align-items:center;gap:5px;font-family:var(--disp);
  font-size:.72rem;font-weight:700;color:#1B7F5A;white-space:nowrap;}
.verified svg{flex:none;}

.mk-supplier-strip{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between;background:var(--paper);border:1px solid rgba(11,31,42,.12);
  padding:18px 22px;}
.mk-supplier-strip a{color:inherit;}
.mk-supplier-strip .fine{display:block;font-size:.75rem;color:var(--muted);margin-bottom:2px;}

.mk-split{border:1px solid rgba(11,31,42,.14);margin:18px 0;}
.mk-split div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 18px;border-bottom:1px solid rgba(11,31,42,.08);}
.mk-split div:last-child{border-bottom:0;background:var(--paper);}
.mk-split span{font-size:.9rem;color:#4A5C63;}
.mk-split strong{font-family:var(--disp);font-size:1.05rem;}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:18px;}
.form h3{font-family:var(--disp);font-size:1rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--deep);margin:16px 0 -4px;padding-top:16px;border-top:1px solid rgba(11,31,42,.12);}
.form h3:first-of-type{border-top:0;padding-top:0;margin-top:0;}
.form label{display:flex;flex-direction:column;gap:6px;font-family:var(--disp);
  font-size:.85rem;font-weight:600;color:var(--abyss);}
.form label .fine{font-weight:400;color:var(--muted);font-size:.78rem;}
.form input,.form select,.form textarea{font:inherit;font-family:var(--body);font-weight:400;
  font-size:.95rem;padding:11px 13px;border:1px solid rgba(11,31,42,.28);background:#fff;
  color:var(--abyss);width:100%;}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--tide);
  outline-offset:-1px;border-color:var(--tide);}
.form textarea{resize:vertical;line-height:1.5;}
.form-row{display:grid;gap:18px;grid-template-columns:1fr 1fr;}
@media(max-width:620px){.form-row{grid-template-columns:1fr;}}
.form-error{color:#A32B2B;font-family:var(--body);font-weight:400;font-size:.82rem;}
.form input[aria-invalid],.form select[aria-invalid]{border-color:#A32B2B;}
.form .btn{align-self:flex-start;}

/* ---------- browse layout (/experiences): sidebar + results ---------- */
.mk-browse{display:grid;grid-template-columns:272px minmax(0,1fr);gap:34px;align-items:start;}
.mk-side{position:sticky;top:92px;display:flex;flex-direction:column;gap:16px;}
.mk-side-box{background:var(--shell);border:1px solid var(--rule);border-radius:12px;
  padding:16px 18px;box-shadow:0 1px 2px rgba(5,47,62,.05);}
.mk-side-box > summary{font-family:var(--disp);font-weight:700;font-size:.95rem;
  color:var(--abyss);cursor:pointer;list-style:none;display:flex;
  align-items:center;justify-content:space-between;}
.mk-side-box > summary::-webkit-details-marker{display:none;}
.mk-side-box > summary::after{content:"";width:9px;height:9px;flex:none;margin-left:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .15s ease;}
.mk-side-box[open] > summary::after{transform:rotate(-135deg);}
/* The sidebar form is one column, so the auto-fit grid the panel uses has to
   be overridden or every field sits on its own 170px island. */
/* Doubled class: this block sits above the base .mk-filters rules, so at equal
   specificity the panel styling would win and the sidebar would render a
   second bordered box inside the first. */
.mk-filters.mk-filters--side{display:block;background:none;border:0;
  padding:14px 0 0;box-shadow:none;border-radius:0;}
.mk-filters.mk-filters--side label{margin-bottom:13px;}
.mk-filters.mk-filters--side .mk-filters-go{margin-top:4px;}
.mk-filters.mk-filters--side .btn{width:100%;justify-content:center;}
/* Collapsible filter facets. Same accordion idiom as the category groups
   below them, but a facet has to keep saying what it is set to while closed —
   a collapsed filter that hides its own value is how people end up staring at
   four results and not knowing why. */
.mk-facet > summary{display:flex;align-items:center;gap:8px;cursor:pointer;
  list-style:none;padding:11px 0;}
/* Stacked in the sidebar, a rule between each reads as a divider. In the wide
   panel on /search the same rule floats above a grid cell with nothing to
   divide, so there the summary gets an underline like the fields beside it. */
.mk-filters--side .mk-facet{border-top:1px solid var(--rule);}
.mk-filters:not(.mk-filters--side) .mk-facet{align-self:end;}
/* In the wide panel a grid cell is ~170px, too narrow for the label and its
   value side by side — the value was ellipsised down to "Anywhere in...".
   Stacked instead, which is also the shape of every other field in that row. */
.mk-filters:not(.mk-filters--side) .mk-facet > summary{position:relative;
  flex-direction:column;align-items:flex-start;gap:5px;
  padding:0 18px 9px 0;border-bottom:1px solid var(--rule);}
.mk-filters:not(.mk-filters--side) .mk-facet-value{margin-left:0;max-width:100%;}
.mk-filters:not(.mk-filters--side) .mk-facet > summary::after{position:absolute;
  right:2px;bottom:13px;}
.mk-facet > summary::-webkit-details-marker{display:none;}
.mk-facet-label{font-family:var(--disp);font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-weight:700;}
/* min-width:0 so the ellipsis actually engages: a flex item defaults to
   min-width:auto and refuses to shrink below its text. */
.mk-facet-value{margin-left:auto;min-width:0;font-size:.86rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mk-facet-value.is-set{color:var(--deep);font-weight:600;}
.mk-facet[open] > summary .mk-facet-label{color:var(--abyss);}
.mk-facet > summary::after{content:"";width:8px;height:8px;flex:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease;}
.mk-facet[open] > summary::after{transform:translateY(1px) rotate(-135deg);}
.mk-facet > select{width:100%;margin:0 0 13px;}

.mk-side-cats h2{font-family:var(--disp);font-size:.95rem;margin:0 0 10px;color:var(--abyss);}
.mk-cat-group{border-top:1px solid var(--rule);}
.mk-cat-group:first-of-type{border-top:0;}
.mk-cat-group > summary{display:flex;align-items:center;
  gap:8px;cursor:pointer;list-style:none;padding:10px 0;
  font-family:var(--disp);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:700;}
.mk-cat-group > summary::-webkit-details-marker{display:none;}
/* Pushed right rather than the summary using space-between, so the chevron
   that follows it still sits hard against the edge. */
.mk-cat-group > summary > em{margin-left:auto;font-style:normal;font-size:.72rem;letter-spacing:0;
  color:var(--muted);background:var(--sand);border-radius:999px;padding:1px 8px;}
/* The groups start closed, so each one needs to look like it opens. Same
   chevron as the Filters panel above it. */
.mk-cat-group > summary::after{content:"";width:8px;height:8px;flex:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease;}
.mk-cat-group[open] > summary::after{transform:translateY(1px) rotate(-135deg);}
.mk-cat-group[open] > summary{color:var(--abyss);}
.mk-cat-group > ul{padding-bottom:8px;}
.mk-side-cats a.is-on{color:var(--deep);font-weight:700;}
.mk-side-cats a.is-on em{background:var(--deep);color:#fff;}
/* A type nobody has listed under yet is still shown — hiding it would conceal
   something true about the marketplace — but it is visibly quieter so the
   count is read before the click. */
.mk-side-cats a.is-empty{color:var(--muted);}
.mk-side-cats a.is-empty em{background:#EDF2F3;color:#8FA3AB;}
/* The editorial under the grid spans the full column rather than the 72ch
   .prose measure: it sits below a 1140px grid, and a narrow column floating
   under a wide one reads as a different page. Two columns keep the line
   length readable at that width. */
.exp-notes.prose{max-width:none;columns:2;column-gap:52px;}
.exp-notes h2{font-size:1.15rem;margin:0 0 10px;break-after:avoid;}
.exp-notes h2:not(:first-child){margin-top:22px;}
.exp-notes p{break-inside:avoid;margin-bottom:14px;}
@media(max-width:820px){.exp-notes.prose{columns:1;}}

/* Category editorial, inside the results column. Single column at this width
   — the two-column treatment on /experiences works at 1140px and not at 800. */
.cat-notes.prose{max-width:none;margin-top:38px;padding-top:30px;
  border-top:1px solid var(--rule);}
.cat-notes h2{font-size:1.2rem;margin:0 0 12px;}
.cat-notes h2:not(:first-child){margin-top:26px;}
.cat-notes .lead{font-size:1.05rem;color:var(--ink);}
.cat-notes p{margin-bottom:14px;}

.mk-empty{background:var(--shell);border:1px solid var(--rule);border-radius:12px;
  padding:40px 32px;text-align:center;}
.mk-empty h2{font-size:1.3rem;margin:0 0 10px;color:var(--abyss);}
.mk-empty p{color:var(--muted);max-width:56ch;margin:0 auto 18px;}
.mk-empty .btns{margin-top:20px;}
.mk-side-cats ul{list-style:none;margin:0;padding:0;}
.mk-side-cats a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;font-size:.92rem;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);}
.mk-side-cats li:last-child a{border-bottom:0;}
.mk-side-cats a:hover span{color:var(--deep);text-decoration:underline;}
.mk-side-cats em{font-style:normal;font-size:.78rem;color:var(--muted);
  background:var(--foam);border-radius:999px;padding:1px 9px;flex:none;}
/* Beside a sidebar there is less room, so the cards need a smaller floor than
   the full-width grid uses or they drop to one per row too early. */
.mk-grid--side{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
@media(max-width:900px){
  .mk-browse{grid-template-columns:1fr;gap:20px;}
  .mk-side{position:static;}
}

/* ---------- search filters ---------- */
.mk-filters{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:var(--paper);border:1px solid rgba(11,31,42,.12);padding:20px;align-items:end;}
.mk-filters label{display:flex;flex-direction:column;gap:5px;font-family:var(--disp);
  font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#4A5C63;}
.mk-filters input,.mk-filters select{font:inherit;font-family:var(--body);font-weight:400;
  font-size:.9rem;padding:9px 11px;border:1px solid rgba(11,31,42,.25);background:#fff;width:100%;}
.mk-filters input:focus,.mk-filters select:focus{outline:2px solid var(--tide);outline-offset:-1px;}
.mk-filters-go{display:flex;flex-direction:column;gap:6px;}
.mk-filters-go .fine{text-align:center;}
.mk-sortbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin-top:22px;padding-bottom:12px;border-bottom:1px solid rgba(11,31,42,.12);}
.mk-sortbar div{display:flex;flex-wrap:wrap;gap:4px;}
.mk-sort{font-family:var(--disp);font-size:.8rem;padding:6px 12px;text-decoration:none;
  color:#4A5C63;border:1px solid transparent;}
.mk-sort:hover{border-color:rgba(11,31,42,.2);}
.mk-sort.is-on{background:var(--abyss);color:#fff;}
.mk-pager{display:flex;gap:6px;justify-content:center;margin-top:34px;}
.mk-pager a{font-family:var(--disp);font-size:.9rem;padding:8px 14px;text-decoration:none;
  color:var(--abyss);border:1px solid rgba(11,31,42,.2);}
.mk-pager a.is-on{background:var(--abyss);color:#fff;border-color:var(--abyss);}

/* ---------- checkout ---------- */
.mk-note{background:#FDF7E8;border-left:3px solid var(--sun);padding:14px 18px;
  font-size:.92rem;margin:0 0 24px;line-height:1.55;}
.mk-dl{display:grid;grid-template-columns:180px 1fr;gap:10px 20px;margin:0 0 26px;font-size:.95rem;}
.mk-dl dt{color:#5A6B72;font-family:var(--disp);font-size:.82rem;letter-spacing:.03em;
  text-transform:uppercase;padding-top:2px;}
.mk-dl dd{margin:0;}
@media(max-width:560px){.mk-dl{grid-template-columns:1fr;gap:2px 0;}
  .mk-dl dd{margin-bottom:12px;}}

/* ---------- product imagery ---------- */
.mk-card-img{aspect-ratio:3/2;overflow:hidden;background:var(--paper);}
.mk-card-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;}
.mk-card:hover .mk-card-img img{transform:scale(1.03);}
.sec--tight{padding-top:0;padding-bottom:0;}
/* ---------- gallery: mosaic on desktop, slider on phone ---------- */
/* Desktop: a 4x2 mosaic, lead photo on the left half, four supporting shots
   on the right. Rows are a fixed height rather than square tiles — a 1/1
   ratio made the lead as tall as the viewport on a wide screen and pushed
   the listing itself below the fold. Two rows of 158px holds the gallery to
   about 324px at any width. */
.mk-gallery{display:grid;gap:8px;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:158px;margin-top:-10px;}
.mk-gallery figure{position:relative;margin:0;overflow:hidden;background:var(--foam);
  height:100%;}
.mk-gallery figure.is-lead{grid-column:span 2;grid-row:span 2;}
/* Each tile is a link to the full-size file, so the gallery works with the
   script switched off. The anchor has to fill the figure or the hover zoom
   and the +N badge lose their box. */
.mk-gallery a{display:block;width:100%;height:100%;position:relative;}
.mk-gallery img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;}
.mk-gallery figure:hover img{transform:scale(1.04);}

/* A count on the last tile, so it is obvious there are more photos. */
.mk-gallery-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(5,47,62,.55);color:#fff;font-family:var(--disp);font-weight:700;
  font-size:1.05rem;backdrop-filter:blur(2px);}

@media(max-width:900px){
  .mk-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:132px;}
  .mk-gallery figure.is-lead{grid-column:span 2;grid-row:span 2;}
}

/* Five tiles are what the mosaic holds. The rest stay in the markup for the
   lightbox and are shown in full by the phone slider further down. */
@media(min-width:641px){
  .mk-gallery--pdp figure:nth-child(n+6){display:none;}
}

/* Phone: one photo at a time, swiped horizontally. Scroll snapping does the
   work — no JavaScript, so it keeps working if the script fails to load. */
@media(max-width:640px){
  .mk-gallery{display:flex;grid-template-columns:none;gap:10px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scroll-padding:0 16px;
    /* bleed to the screen edges so the next photo peeks in */
    margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 12px;
    scrollbar-width:none;}
  .mk-gallery::-webkit-scrollbar{display:none;}
  .mk-gallery figure,
  .mk-gallery figure.is-lead{flex:0 0 86%;height:auto;scroll-snap-align:center;
    aspect-ratio:4/3;border-radius:10px;}
  .mk-gallery figure:hover img{transform:none;}
}

/* ---------- reviews ---------- */
.stars{color:var(--star-ink);letter-spacing:1px;font-size:.95rem;}
.stars span{color:rgba(11,31,42,.2);}
.mk-review{border-top:1px solid rgba(11,31,42,.12);padding:22px 0;}
.mk-review-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;}
.mk-review-head strong{font-family:var(--disp);font-size:.92rem;}
.verified-booking{font-family:var(--disp);font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#0F6A4F;background:#DDF0E7;padding:3px 9px;}
.mk-review h3{font-size:1rem;margin:0 0 6px;}
.mk-review p{margin:0;}
.mk-review-reply{margin-top:14px;padding:14px 18px;background:var(--paper);
  border-left:3px solid var(--tide);}
.mk-review-reply strong{display:block;font-family:var(--disp);font-size:.82rem;margin-bottom:4px;}
.rate{border:1px solid rgba(11,31,42,.18);padding:12px 16px;margin:0;display:flex;
  flex-wrap:wrap;align-items:center;gap:14px;}
.rate legend{font-family:var(--disp);font-size:.82rem;font-weight:700;padding:0 6px;}
.rate label{flex-direction:row;align-items:center;gap:5px;font-weight:400;font-size:.9rem;}
.rate input{width:auto;}
.rate--small{border-color:rgba(11,31,42,.1);padding:8px 14px;}
.rate--small legend{font-size:.76rem;color:#5A6B72;}

/* ---------- search bars ----------------------------------------------
   Two treatments from one markup. The hero search is a single white bar
   divided by hairlines — the pattern every booking site uses, because it
   reads as one control you fill in left to right rather than three
   unrelated boxes stacked in a panel. The filter bar on /search keeps the
   panel shape but gets the same field styling.

   The select arrow is drawn as a background SVG: removing the field border
   leaves the native arrow floating with nothing to sit against, and it
   differs on every platform.
   -------------------------------------------------------------------- */
.mk-filters select{
  -webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C7079' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;}

/* Panel treatment (the /search filter bar) */
.mk-filters{padding:18px 20px;gap:16px;}
.mk-filters label{gap:7px;color:#5C7079;font-size:.72rem;}
.mk-filters input,.mk-filters select{
  padding:11px 12px;border:1px solid var(--rule);border-radius:8px;
  background-color:#fff;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;}
.mk-filters input::placeholder{color:#8FA3AB;}
.mk-filters input:hover,.mk-filters select:hover{border-color:#AFC4CB;}
.mk-filters input:focus,.mk-filters select:focus{
  outline:none;border-color:var(--erg);
  box-shadow:0 0 0 3px rgba(14,124,140,.16);}

/* Hero treatment: one continuous bar */
.mk-hero-search{
  max-width:940px;margin:30px auto 18px;text-align:left;
  grid-template-columns:1.15fr 1.15fr 1.4fr auto;
  gap:0;padding:0;align-items:stretch;
  background:var(--shell);border:0;border-radius:999px;
  box-shadow:0 2px 6px rgba(5,47,62,.10),0 18px 44px -20px rgba(5,47,62,.55);}
.mk-hero-search label{
  justify-content:center;gap:3px;padding:14px 22px;min-width:0;
  border-left:1px solid var(--rule);border-radius:0;
  transition:background .15s ease;}
.mk-hero-search label:first-child{border-left:0;padding-left:30px;}
.mk-hero-search label:hover{background:#F4F9FA;}
.mk-hero-search label:first-child{border-top-left-radius:999px;border-bottom-left-radius:999px;}
.mk-hero-search label > span{font-size:.74rem;color:#5C7079;}
/* Borderless inside the bar — the hairlines between segments do that job. */
.mk-hero-search input,.mk-hero-search select{
  border:0;border-radius:0;padding:2px 0;background-color:transparent;
  font-size:.98rem;color:var(--ink);}
.mk-hero-search select{padding-right:22px;background-position:right 0 center;}
.mk-hero-search input:hover,.mk-hero-search select:hover{border-color:transparent;}
.mk-hero-search input:focus,.mk-hero-search select:focus{
  outline:none;border-color:transparent;box-shadow:none;}
/* The focus ring goes on the segment, so it is visible without a field border. */
.mk-hero-search label:focus-within{background:#EEF6F8;
  box-shadow:inset 0 0 0 2px var(--erg);}
.mk-hero-search label:first-child:focus-within{border-radius:999px 0 0 999px;}
.mk-hero-search .btn{
  width:auto;align-self:center;margin:6px 8px 6px 10px;padding:15px 32px;
  border-radius:999px;white-space:nowrap;}

@media (max-width:860px){
  /* Below the pill's comfortable width it becomes a stacked card: a bar
     squeezed into three 90px columns is unusable on a phone. */
  .mk-hero-search{grid-template-columns:1fr;border-radius:16px;padding:8px;gap:2px;}
  .mk-hero-search label{border-left:0;border-top:1px solid var(--rule);
    border-radius:10px;padding:12px 14px;}
  .mk-hero-search label:first-child{border-top:0;padding-left:14px;border-radius:10px;}
  .mk-hero-search label:focus-within,
  .mk-hero-search label:first-child:focus-within{border-radius:10px;}
  .mk-hero-search .btn{width:100%;margin:8px 0 2px;justify-content:center;}
}

/* ============================================================
   Ocean theme — surface polish
   Rounded, softly shadowed cards on a pale blue-grey ground, so
   listings read as a professional booking site rather than a
   brochure. Applied as overrides so the base rules stay legible.
   ============================================================ */
.card,.pack,a.rel,.mk-card{border-radius:10px;overflow:hidden;
  border-color:var(--rule);background:var(--shell);
  box-shadow:0 1px 2px rgba(5,47,62,.05),0 8px 24px -18px rgba(5,47,62,.35);}
.mk-card,a.rel{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.mk-card:hover,a.rel:hover{transform:translateY(-4px);border-color:var(--tide);
  box-shadow:0 6px 14px rgba(5,47,62,.08),0 22px 40px -26px rgba(5,47,62,.5);}
.sec-deep .card,.sec-abyss .card{box-shadow:none;}
.mk-card-price strong{color:var(--deep);}
.verified{color:var(--good);}
.crumbs{background:transparent;border-bottom:1px solid var(--rule);}
.mk-filters{border-radius:10px;border-color:var(--rule);}
.mk-filters input,.mk-filters select{border-radius:6px;}

/* ============================================================
   Product detail page
   Two columns with a sticky booking card, and a sticky section
   nav that highlights where you are as you scroll.
   ============================================================ */
.pdp-top{padding:26px 0 18px;background:var(--shell);border-bottom:1px solid transparent;}
.pdp-top h1{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:6px 0 0;}
.pdp-sub{color:var(--muted);font-size:1.1rem;margin-top:10px;max-width:70ch;}
.pdp-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;
  font-family:var(--disp);font-size:.9rem;color:var(--muted);}
.pdp-facts span{display:inline-flex;align-items:center;gap:7px;}
.pdp-facts svg{width:17px;height:17px;stroke:var(--tide);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.pdp-rating{gap:8px!important;}
.pdp-rating strong{color:var(--abyss);}
.pdp-rating a{color:var(--deep);}
.mk-gallery--pdp{border-radius:12px;overflow:hidden;}
.pdp-noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--foam);border-radius:12px;padding:54px 20px;color:var(--deep);}
.pdp-noimg svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.5;}
.pdp-noimg p{font-family:var(--disp);font-size:.95rem;}

/* sticky section nav */
.pdp-nav{position:sticky;top:70px;z-index:40;background:var(--shell);
  border-bottom:1px solid var(--rule);box-shadow:0 6px 18px -14px rgba(5,47,62,.5);
  isolation:isolate;}
/* The fade on the right edge is the only cue that the strip scrolls when it
   is too narrow to show every section. */
.pdp-nav::after{content:"";position:absolute;top:0;right:0;bottom:1px;width:38px;
  pointer-events:none;background:linear-gradient(to right,transparent,var(--shell));}
.pdp-nav .wrap{display:flex;align-items:center;gap:8px;overflow-x:auto;
  scroll-behavior:smooth;scrollbar-width:none;padding-top:0;padding-bottom:0;}
.pdp-nav .wrap::-webkit-scrollbar{display:none;}
/* :not(.btn) because the Book now button lives in this strip too, and
   ".pdp-nav a" outranks ".btn--go" on specificity — it was painting the
   button's label muted grey on the orange fill, a contrast of 1.11:1. */
.pdp-nav a:not(.btn){position:relative;font-family:var(--disp);font-size:.92rem;font-weight:600;
  color:var(--muted);text-decoration:none;padding:15px 4px;margin-right:16px;
  white-space:nowrap;border-bottom:3px solid transparent;transition:color .15s;}
.pdp-nav a:not(.btn):hover{color:var(--abyss);}
.pdp-nav a.is-on{color:var(--deep);border-bottom-color:var(--tide);}

@media(max-width:860px){
  /* Pills read more clearly than an underline on a strip that is itself
     moving, and give the active item a shape you can find at a glance. */
  .pdp-nav{top:56px;}
  .pdp-nav .wrap{gap:0;padding-top:9px;padding-bottom:9px;}
  .pdp-nav a:not(.btn){padding:7px 13px;margin-right:7px;border-bottom:0;border-radius:999px;
    font-size:.86rem;background:var(--foam);color:var(--deep);}
  .pdp-nav a.is-on{background:var(--deep);color:#fff;}
  .pdp-nav::after{width:26px;}
}
.pdp-nav-price{margin-left:auto;display:flex;align-items:center;gap:14px;padding-left:20px;}
.pdp-nav-price small{font-size:.78rem;color:var(--muted);margin-right:-8px;}
.pdp-nav-price strong{font-family:var(--disp);font-size:1.1rem;color:var(--abyss);white-space:nowrap;}
.pdp-nav-price .btn{padding:9px 20px;font-size:.9rem;}
@media(max-width:860px){.pdp-nav-price{display:none;}}

/* body columns */
.pdp-body{padding-top:30px;}
.pdp-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start;}
.pdp-sec{scroll-margin-top:130px;padding-bottom:28px;margin-bottom:28px;
  border-bottom:1px solid var(--rule);}
.pdp-sec:last-child{border-bottom:0;margin-bottom:0;}
.pdp-sec h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:18px;}
.pdp-sec h3{font-size:1.12rem;margin:24px 0 10px;}
.pdp-sec p+p{margin-top:14px;}
.pdp-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:26px;}
.pdp-specs div{background:var(--foam);border-radius:8px;padding:14px 16px;}
.pdp-specs dt{font-family:var(--disp);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--deep);}
.pdp-specs dd{margin:4px 0 0;font-family:var(--disp);font-weight:700;color:var(--abyss);}

/* places to stay: the room, the house, and what it has */
.pdp-subh{font-family:var(--disp);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--deep);margin:30px 0 0;}
.pdp-subh + .pdp-specs{margin-top:14px;}
.pdp-amenities{list-style:none;margin:14px 0 0;padding:0;font-size:.97rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 22px;}
.pdp-amenities li{position:relative;padding-left:26px;}
.pdp-amenities li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:700;color:var(--good);}

/* itinerary timeline */
.pdp-timeline{list-style:none;margin:0;padding:0;position:relative;}
.pdp-timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--rule);}
.pdp-timeline li{position:relative;padding:0 0 26px 38px;}
.pdp-timeline li::before{content:"";position:absolute;left:2px;top:7px;width:16px;height:16px;
  border-radius:50%;background:var(--shell);border:3px solid var(--tide);}
.pdp-timeline h3{margin:0 0 8px;font-size:1.08rem;}
.pdp-daymeta{font-family:var(--disp);font-size:.82rem;color:var(--muted);margin-top:10px;}

/* included lists */
.pdp-incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;}
.pdp-incl ul{list-style:none;margin:0;padding:0;font-size:.97rem;}
.pdp-incl li{position:relative;padding-left:26px;margin-bottom:9px;}
.pdp-incl li::before{position:absolute;left:0;top:0;font-weight:700;}
.pdp-incl .tick li::before{content:"✓";color:var(--good);}
.pdp-incl .cross li::before{content:"✕";color:var(--warn);}
.pdp-incl .dot li::before{content:"•";color:var(--tide);font-size:1.3em;line-height:1;}

/* sticky booking card */
.co-party{margin:0 0 22px;padding:16px 18px;background:var(--foam);border-radius:10px;}
.co-party .form-row{margin:0;}
.pdp-book-min{margin:8px 0 0;font-size:.84rem;color:var(--deep);font-family:var(--disp);font-weight:600;}

.pdp-aside{position:sticky;top:132px;}
.pdp-book{background:var(--shell);border:1px solid var(--rule);border-radius:12px;padding:22px;
  box-shadow:0 2px 4px rgba(5,47,62,.05),0 18px 40px -26px rgba(5,47,62,.55);}
.pdp-book-cta{display:block;text-align:center;width:100%;margin:18px 0 16px;}
.pdp-book-list{list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--muted);}
.pdp-book-list li{position:relative;padding-left:24px;margin-bottom:8px;}
.pdp-book-list li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700;}
.pdp-book-sup{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);font-size:.9rem;}
.pdp-book-sup .fine{display:block;color:var(--muted);font-size:.78rem;margin-bottom:4px;}
/* The operator's business name, sitting under the verified mark. It reads
   as the opening of the sentence below it rather than as a heading, so it
   takes that sentence's colour, weight and size and keeps only its own
   line. */
.pdp-book-sup-name{display:block;font-weight:400;
  color:var(--muted);font-size:.78rem;line-height:1.35;margin:5px 0 2px;}
.pdp-book-sup a{color:var(--deep);}

@media(max-width:960px){
  .pdp-cols{grid-template-columns:1fr;gap:32px;}
  .pdp-aside{position:static;order:-1;}
}

/* ---------- destination pages ---------- */
.dest-intro{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;}
.dest-facts{background:var(--foam);border-radius:12px;padding:24px;}
.dest-facts h2{font-size:1.1rem;margin-bottom:16px;color:var(--abyss);}
.dest-facts dl{margin:0;}
.dest-facts dl div+div{margin-top:16px;padding-top:16px;border-top:1px solid rgba(5,47,62,.12);}
.dest-facts dt{font-family:var(--disp);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--deep);margin-bottom:4px;}
.dest-facts dd{margin:0;font-size:.95rem;color:var(--ink);}
.dest-empty{max-width:60ch;margin:0 auto;text-align:center;background:var(--shell);
  border:1px solid var(--rule);border-radius:12px;padding:44px 30px;}
.dest-empty h2{font-size:1.4rem;margin-bottom:14px;}
.dest-empty p{color:var(--muted);}
@media(max-width:900px){.dest-intro{grid-template-columns:1fr;gap:28px;}}

/* ---------- guest booking management ---------- */
.mk-note--bad{background:#FDECE6;border-left-color:var(--warn);}
.mk-dl-wrap{background:var(--shell);border:1px solid var(--rule);border-radius:12px;padding:26px;margin-bottom:22px;}
.mk-dl-wrap h2{margin:0 0 18px;font-size:1.3rem;}

/* ============================================================
   Product cards — the unit that appears on the homepage, in
   search, and on every destination and category page.
   A card is a flex column so that however long the title runs,
   the price footer still lines up across a row.
   ============================================================ */
.mk-card{display:flex;flex-direction:column;height:100%;}
.mk-card-body{display:flex;flex-direction:column;flex:1;padding:17px 19px 19px;}

/* media */
.mk-card-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--foam);flex:none;}
.mk-card-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#DCEDF1,#BFE0E8);}
.mk-card-noimg svg{width:46px;height:46px;stroke:var(--tide);fill:none;stroke-width:1.5;
  stroke-linecap:round;opacity:.75;}
/* Category and price share one strip across the bottom of the image, over a
   gradient so both stay legible on any photograph. */
.mk-card-strip{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;
  justify-content:space-between;gap:10px;padding:22px 12px 11px;
  background:linear-gradient(to top,rgba(5,47,62,.86) 0%,rgba(5,47,62,.55) 55%,transparent 100%);}
.mk-card-cat{background:rgba(255,255,255,.16);color:#fff;
  font-family:var(--disp);font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;
  backdrop-filter:blur(3px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mk-card-cost{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;
  margin-left:auto;flex:none;}
.mk-card-cost small{font-size:.72rem;color:rgba(255,255,255,.8);text-transform:uppercase;
  letter-spacing:.05em;}
.mk-card-cost strong{font-family:var(--disp);font-weight:700;font-size:1.24rem;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.3);}


/* title, rating, blurb */
.mk-card h3{font-family:var(--disp);font-size:1.12rem;margin:0 0 6px;line-height:1.3;
  color:var(--abyss);}
.mk-card-rating{display:flex;align-items:center;gap:5px;margin-bottom:11px;min-height:20px;}
.mk-card-rating .mk-star{color:var(--star-ink);font-size:1.06rem;line-height:1;}
.mk-card-rating strong{font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--abyss);}
.mk-card-rating > span:last-child{font-size:.78rem;color:var(--muted);margin-left:3px;}
.mk-card-noreviews{font-size:.78rem;color:var(--muted);font-style:italic;}
.mk-card p{font-size:.89rem;color:var(--muted);margin:0 0 12px;line-height:1.5;}

/* icon facts */
/* Every fact icon gets the same 18px box and the same stroke weight, so a
   row of them reads as one set rather than as icons of assorted sizes. */
.mk-card-facts{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.mk-card-facts li{display:flex;align-items:center;gap:9px;font-size:.84rem;color:#42565E;
  min-width:0;}
.mk-card-facts svg{flex:none;width:18px;height:18px;stroke:var(--tide);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  vertical-align:middle;overflow:visible;}
.mk-card-facts span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

.stars{color:var(--star-ink);letter-spacing:1px;font-size:.9rem;margin:0;}
.stars span{color:rgba(5,47,62,.18);}

/* ============================================================
   Card rail — one scrollable line of listings.
   Scroll snapping does the work, so it swipes on touch and
   scrolls with a trackpad even if the arrow script never runs.
   ============================================================ */
/* The track scrolls internally, but without containment here its overflow
   still counts toward the document width and gives the whole page a
   horizontal scrollbar. `clip` contains it without forcing the vertical
   axis to scroll, which `hidden` would. */
.mk-rail{position:relative;overflow-x:clip;}
.mk-rail-track{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scroll-padding-left:2px;
  /* bleed to the gutter so a card is never clipped mid-shadow */
  margin:0 -4px;padding:6px 4px 18px;
  scrollbar-width:none;}
.mk-rail-track::-webkit-scrollbar{display:none;}
.mk-rail-track:focus-visible{outline:3px solid var(--cta);outline-offset:4px;}
.mk-rail-track > .mk-card{flex:0 0 292px;scroll-snap-align:start;}

/* arrows: desktop affordance, hidden where there is nothing to scroll */
.mk-rail-btn{position:absolute;top:38%;z-index:5;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  background:var(--shell);border:1px solid var(--rule);border-radius:50%;
  cursor:pointer;padding:0;
  box-shadow:0 3px 10px rgba(5,47,62,.14),0 12px 26px -14px rgba(5,47,62,.5);
  transition:background .15s,border-color .15s,opacity .15s;}
.mk-rail-btn svg{width:20px;height:20px;stroke:var(--abyss);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
/* An author display:flex beats the user-agent [hidden] rule, so the JS
   toggling `hidden` did nothing and both arrows showed even at the ends of
   the track. This puts the attribute back in charge. */
.mk-rail-btn[hidden]{display:none;}
.mk-rail-btn:hover{background:var(--erg);border-color:var(--erg);}
.mk-rail-btn:hover svg{stroke:#fff;}
.mk-rail-prev{left:2px;}
.mk-rail-next{right:2px;}
@media(max-width:900px){
  /* On touch the swipe is the affordance; arrows only take up room. */
  .mk-rail-btn{display:none;}
}

/* Cards in a rail are more compact than cards in a browse grid. */
.mk-rail-track .mk-card-body{padding:15px 16px 16px;}
.mk-rail-track .mk-card h3{font-size:1.04rem;margin-bottom:5px;}
.mk-rail-track .mk-card p{font-size:.82rem;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mk-rail-track .mk-card-facts{gap:6px;}
.mk-rail-track .mk-card-facts li{font-size:.78rem;}
.mk-rail-track .mk-card-facts svg{width:17px;height:17px;}
.mk-rail-track .mk-card-cost strong{font-size:1.14rem;}
.mk-rail-track .mk-card-cat{font-size:.70rem;padding:4px 8px;}
.mk-rail-track .mk-card-rating{margin-bottom:8px;min-height:18px;}


@media(max-width:640px){
  .mk-rail-track{gap:12px;margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 16px;}
  .mk-rail-track > .mk-card{flex:0 0 80%;max-width:310px;}
}

/* ============================================================
   Destination mosaic
   A four-column grid of photographs at mixed sizes. The first tile
   takes a 2x2 block and one later tile runs double-width, which
   with twelve destinations fills the grid exactly; `dense` keeps it
   tidy if that count ever changes.
   ============================================================ */
.mk-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:158px;
  grid-auto-flow:dense;gap:12px;}
/* The oversized lead only earns its place when there are enough tiles to
   fill around it. `:nth-last-child(n+6)` means "and there are at least six
   in total" — below that the block would leave a hole, so every tile stays
   the same size instead. */
.mk-mosaic > .mk-tile:nth-child(1):nth-last-child(n+6){grid-column:span 2;grid-row:span 2;}
.mk-mosaic > .mk-tile:nth-child(10){grid-column:span 2;}

.mk-tile{position:relative;display:block;overflow:hidden;border-radius:10px;
  background:var(--abyss);text-decoration:none;color:#fff;isolation:isolate;
  box-shadow:0 1px 2px rgba(5,47,62,.05),0 8px 24px -18px rgba(5,47,62,.35);
  transition:transform .18s ease,box-shadow .18s ease;}
.mk-tile:hover{transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(5,47,62,.1),0 22px 40px -26px rgba(5,47,62,.5);}
.mk-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;}
.mk-tile:hover img{transform:scale(1.05);}
/* The scrim is what keeps the name legible over any photograph. */
.mk-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,33,44,.88) 0%,rgba(4,33,44,.34) 46%,rgba(4,33,44,.05) 100%);}
.mk-tile--bare{background:linear-gradient(150deg,var(--deep),var(--tide));}
.mk-tile--bare::after{background:linear-gradient(to top,rgba(4,33,44,.7) 0%,rgba(4,33,44,.1) 70%);}

.mk-tile-body{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:3px;padding:16px 16px 14px;}
.mk-tile-body strong{font-family:var(--disp);font-weight:700;font-size:1.12rem;
  line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.35);}
.mk-tile-sub{font-size:.83rem;color:rgba(255,255,255,.9);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mk-tile-meta{font-family:var(--disp);font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:2px;}

/* The lead tile is twice the size, so it can carry more type. */
.mk-mosaic > .mk-tile:nth-child(1):nth-last-child(n+6) .mk-tile-body{padding:22px;}
.mk-mosaic > .mk-tile:nth-child(1):nth-last-child(n+6) strong{font-size:1.7rem;}
.mk-mosaic > .mk-tile:nth-child(1):nth-last-child(n+6) .mk-tile-sub{font-size:.95rem;-webkit-line-clamp:3;}

@media(max-width:900px){
  .mk-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;}
  .mk-mosaic > .mk-tile:nth-child(10){grid-column:span 1;}
  .mk-mosaic > .mk-tile:nth-child(1):nth-last-child(n+6) strong{font-size:1.35rem;}
}
@media(max-width:520px){
  .mk-mosaic{grid-template-columns:1fr;grid-auto-rows:150px;}
  .mk-mosaic > .mk-tile:nth-child(1):nth-last-child(n+6){grid-column:span 1;grid-row:span 2;}
}

/* ---------- homepage editorial ---------- */
/* Prose on the left, the four facts stacked beside it. The article was a lone
   78ch column inside a 1140px wrap, which left a wide empty margin either
   side; this uses the width without pushing the line length past what is
   comfortable to read. */
.home-intro{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:50px;align-items:start;}
.home-intro .prose{max-width:none;}
.home-intro h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:16px;}
.home-intro p+p{margin-top:15px;}
/* The costs block sits below the two columns, so it needs its own cap —
   a paragraph running the full 1140px is too long a line to read. */
.home-cost{max-width:76ch;margin-top:36px;}
.home-cost h3{font-size:1.3rem;margin:0 0 12px;}
/* Stacked in the side panel rather than a 2x2 grid. */
.home-facts{display:grid;gap:14px;align-content:start;}
@media(max-width:900px){
  .home-intro{grid-template-columns:1fr;gap:28px;}
  .home-facts{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){.home-facts{grid-template-columns:1fr;}}
.home-facts div{background:var(--foam);border-radius:10px;padding:16px 18px;}
.home-facts strong{display:block;font-family:var(--disp);font-size:.74rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--deep);margin-bottom:6px;}
.home-facts p{font-size:.9rem;color:var(--ink);line-height:1.5;margin:0;}

/* Guide links under the costs block: full width so the three sit on one
   line, and matched heights whatever the label length. */
.home-links{margin-top:22px;}
.home-links .btn{padding:13px 24px;font-size:.95rem;}

/* ---------- support page ---------- */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;}
.ct-aside h2{font-size:1.15rem;margin-bottom:14px;}
.ct-aside h2+*{margin-top:0;}
.ct-aside h2:not(:first-child){margin-top:30px;}
.ct-links{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.ct-links a{display:block;background:var(--foam);border-radius:10px;padding:14px 16px;
  text-decoration:none;color:var(--ink);}
.ct-links a:hover{background:#C6E6EC;}
.ct-links strong{display:block;font-family:var(--disp);font-size:.94rem;color:var(--abyss);}
.ct-links span{display:block;font-size:.82rem;color:#3C525C;margin-top:3px;line-height:1.45;}
.ct-direct{display:flex;flex-direction:column;gap:8px;font-size:.95rem;}
.ct-direct svg{width:17px;height:17px;stroke:var(--tide);fill:none;stroke-width:1.7;
  stroke-linecap:round;vertical-align:-3px;margin-right:8px;}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr;gap:32px;}}

/* ---------- back to top ---------- */
/* Hidden until it is useful. A button that sits there from the first pixel of
   an article is clutter; one that appears after a screen and a half of
   scrolling is a shortcut. [hidden] does the hiding so it is out of the
   accessibility tree too, not merely invisible. */
.totop{position:fixed;right:18px;bottom:22px;z-index:70;width:44px;height:44px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:var(--abyss);color:#fff;box-shadow:0 4px 14px rgba(5,47,62,.3);
  opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;}
.totop[hidden]{display:none!important;}
.totop.is-on{opacity:1;transform:none;}
.totop:hover{background:var(--deep);}
.totop:focus-visible{outline:3px solid var(--sun);outline-offset:3px;}
.totop svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}
/* The phone has a fixed booking bar along the bottom; clear it rather than
   sit on top of the one control that matters more. */
@media(max-width:780px){.totop{bottom:74px;right:14px;width:40px;height:40px;}}
@media(prefers-reduced-motion:reduce){.totop{transition:none;}}

/* ---------- cookie notice ---------- */
/* A notice, not a consent gate — see includes/footer.php for why. It is
   therefore allowed to be small and out of the way, and must not block the
   page or trap focus. */
.cookie{position:fixed;left:14px;right:14px;bottom:14px;z-index:80;
  max-width:620px;margin:0 auto;background:var(--abyss);color:#D6E4E7;
  border-radius:8px;box-shadow:0 8px 30px rgba(5,47,62,.34);
  padding:14px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  font-size:.88rem;line-height:1.5;}
.cookie[hidden]{display:none!important;}
.cookie p{margin:0;flex:1 1 260px;}
.cookie a{color:#7FD4DE;}
.cookie button{font:inherit;font-weight:600;border:0;border-radius:5px;
  padding:9px 18px;background:var(--foam);color:var(--abyss);cursor:pointer;}
.cookie button:hover{background:#fff;}
.cookie button:focus-visible{outline:3px solid var(--sun);outline-offset:2px;}
@media(max-width:780px){.cookie{bottom:74px;}}

/* ---------- photo lightbox ----------
   Opened from a listing's gallery tiles. The strip is a scroll-snap track, so
   the swipe on a phone is the browser's own and the arrows are nothing more
   than scrollBy calls — there is no slide-index state to drift out of sync. */
.lb{position:fixed;inset:0;z-index:300;background:rgba(3,20,27,.95);
  display:flex;flex-direction:column;}
.lb[hidden]{display:none;}
.lb-track{flex:1;display:flex;min-height:0;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.lb-track::-webkit-scrollbar{display:none;}
.lb-slide{flex:0 0 100%;min-width:100%;scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;padding:60px 20px 24px;}
.lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:8px;}
.lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:0;
  cursor:pointer;background:rgba(255,255,255,.16);color:#fff;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease;}
.lb-btn:hover{background:rgba(255,255,255,.3);}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.lb-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.lb-prev{left:18px;top:50%;transform:translateY(-50%);}
.lb-next{right:18px;top:50%;transform:translateY(-50%);}
.lb-close{top:14px;right:14px;}
.lb-count{position:absolute;top:26px;left:50%;transform:translateX(-50%);
  margin:0;color:#fff;font-family:var(--disp);font-size:.85rem;letter-spacing:.05em;}
/* The page must not scroll behind the overlay. */
body.lb-open{overflow:hidden;}

/* Phone: swipe only. A 48px arrow on each side covers a third of the
   photograph, and the track already swipes. */
@media(max-width:640px){
  .lb-prev,.lb-next{display:none;}
  .lb-slide{padding:54px 12px 28px;}
}
@media(prefers-reduced-motion:reduce){
  .lb-track{scroll-behavior:auto;}
  .lb-btn{transition:none;}
}

/* ---------- about page ------------------------------------------------- */
/* Scoped to .ab-prose rather than .prose: every guide, spot and policy page
   shares that class and none of them has icons in its headings. */
.ab-prose h2{display:flex;align-items:center;gap:11px;}
.h2-ico{flex:none;width:26px;height:26px;stroke:var(--tide);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
/* The invitation to list, aimed at operators rather than travellers. Warm
   rather than the page's cool palette, because it is an aside addressed to a
   different reader and should not be mistaken for the next section. */
.ab-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:26px 0 34px;padding:20px 22px;border-radius:12px;
  background:var(--sand);border:1px solid var(--rule);border-left:4px solid var(--sun);}
.ab-cta-ico{flex:none;width:34px;height:34px;stroke:var(--erg);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.ab-cta-copy{flex:1 1 260px;min-width:0;}
.ab-cta-copy strong{display:block;font-family:var(--disp);font-size:1.06rem;
  color:var(--abyss);margin-bottom:4px;}
.ab-cta-copy p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.5;}
.ab-cta-btn{flex:none;white-space:nowrap;}
@media(max-width:560px){
  .ab-cta{gap:14px;padding:18px;}
  .ab-cta-btn{width:100%;justify-content:center;}
  .ab-prose h2{gap:9px;}
  .h2-ico{width:20px;height:20px;}
}

/* ---------- overall rating panel ----------------------------------------
   Deliberately unlike the review cards below it: one bordered slab, the
   score cut out of it as a deep ocean block, the distribution beside it and
   the aspect averages banded underneath. The average alone hides its own
   shape, so the bars are what actually earn their place here. Bars are
   aria-hidden and the figure beside each one carries the meaning, so a
   screen reader hears the numbers once rather than twice. */
.rv-panel{display:grid;grid-template-columns:auto 1fr;margin:0 0 26px;
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:#fff;}
.rv-panel-score{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 26px;background:var(--abyss);color:#fff;text-align:center;min-width:156px;}
.rv-panel-num{font-family:var(--disp);font-size:2.9rem;line-height:1;font-weight:700;}
.rv-panel-outof{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--foam);margin-top:4px;}
.rv-panel-stars{margin-top:8px;}
.rv-panel-score .stars{color:var(--star);font-size:1.05rem;letter-spacing:.08em;}
.rv-panel-score .stars span{color:#3A6273;}
.rv-panel-count{font-size:.74rem;color:var(--foam);margin-top:6px;line-height:1.3;}
.rv-dist{list-style:none;margin:0;padding:18px 22px;display:grid;gap:8px;align-content:center;}
.rv-dist li{display:grid;grid-template-columns:32px 1fr 26px;align-items:center;gap:10px;}
.rv-dist-k{font-size:.8rem;color:var(--muted);white-space:nowrap;}
.rv-dist-k span{color:var(--star-ink);margin-left:1px;}
.rv-dist-bar{height:8px;border-radius:4px;background:var(--sand);overflow:hidden;}
.rv-dist-bar i{display:block;height:100%;background:var(--tide);border-radius:4px;}
.rv-dist-n{font-size:.8rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;}
.rv-aspects{grid-column:1/-1;list-style:none;margin:0;padding:16px 22px 18px;
  border-top:1px solid var(--rule);background:var(--paper);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 30px;}
.rv-aspects li{display:grid;grid-template-columns:1fr 64px 28px;align-items:center;gap:10px;}
.rv-aspect-k{font-size:.82rem;color:var(--ink);}
.rv-aspect-bar{height:6px;border-radius:4px;background:var(--rule);overflow:hidden;}
.rv-aspect-bar i{display:block;height:100%;background:var(--erg);border-radius:4px;}
.rv-aspect-n{font-size:.82rem;font-weight:600;color:var(--abyss);text-align:right;
  font-variant-numeric:tabular-nums;}
@media(max-width:620px){
  .rv-panel{grid-template-columns:1fr;}
  .rv-panel-score{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
    gap:4px 12px;padding:16px 18px;text-align:left;}
  .rv-panel-num{font-size:2.1rem;}
  .rv-panel-outof,.rv-panel-stars,.rv-panel-count{margin-top:0;}
  .rv-panel-count{flex-basis:100%;}
  .rv-dist{padding:16px 18px;}
  .rv-aspects{grid-template-columns:1fr;padding:14px 18px 16px;}
}

/* ---------- party size on the booking panel ---------- */
.pdp-book-form{display:contents;}
.pdp-book-party{display:block;margin:16px 0 12px;}
/* Direct child only. As a bare descendant selector this also caught the
   stepper's readout nested inside it — (0,1,1) beating .pdp-stepper-val's
   (0,1,0) — which silently held the count at the label's 12.8px muted grey. */
.pdp-book-party > span{display:block;font-size:.8rem;color:var(--muted);
  margin-bottom:6px;font-family:var(--disp);font-weight:600;}
.pdp-book-party select{width:100%;padding:11px 12px;font:inherit;font-size:.95rem;
  color:var(--abyss);background:#fff;border:1px solid var(--rule);border-radius:6px;
  -webkit-appearance:none;appearance:none;
  /* the chevron, as a data URI so it needs no extra request and no inline style */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7079' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
  padding-right:36px;}
.pdp-book-party select:focus-visible{outline:2px solid var(--tide);outline-offset:1px;}
/* The - / + stepper the script swaps in for that select. One bordered row so
   it reads as a single control; 44px minimum on the buttons because they are
   the one thing on this panel a thumb has to hit repeatedly. */
.pdp-stepper{display:flex;align-items:stretch;width:100%;min-height:46px;
  border:1px solid var(--rule);border-radius:6px;background:#fff;overflow:hidden;}
.pdp-stepper-btn{flex:0 0 46px;border:0;background:#fff;color:var(--deep);
  font:inherit;font-size:1.3rem;line-height:1;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-appearance:none;appearance:none;}
.pdp-stepper-btn:hover:not(:disabled){background:var(--sand);color:var(--abyss);}
.pdp-stepper-btn:disabled{color:var(--rule);cursor:default;}
.pdp-stepper-btn:focus-visible{outline:2px solid var(--tide);outline-offset:-3px;}
.pdp-stepper-val{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  gap:4px;padding:0 8px;text-align:center;color:var(--abyss);
  /* This is the number the reader is actually setting, so it carries more
     weight than the label above it rather than less. */
  font-size:1.06rem;font-family:var(--disp);font-weight:600;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);}
/* The running total, which is the number the reader came for. */
.pdp-book-total{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0 0 14px;padding-top:12px;border-top:1px solid var(--rule);}
.pdp-book-total span{font-size:.85rem;color:var(--muted);}
.pdp-book-total strong{font-family:var(--disp);font-size:1.35rem;color:var(--abyss);
  white-space:nowrap;}
.pdp-book-note{margin:-6px 0 14px;font-size:.78rem;color:var(--muted);line-height:1.45;}
/* The CTA is a submit button here, not a link; it must still fill the panel. */
button.pdp-book-cta{width:100%;cursor:pointer;text-align:center;}