/* Home, Experiences and Add-ons (the 30 Oct 2026 redesign). Loaded only on the marketing pages, never on booking or manage. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Hero: same layout, the photos fade from one to the next */
.slides{position:relative;aspect-ratio:4/5;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);background:var(--jm-cream-dark)}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.slides img.on{opacity:1}
.dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px}
.dots button{position:relative;width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#fff;opacity:.55;cursor:pointer}
.dots button:after{content:"";position:absolute;inset:-14px}
.dots button.on{opacity:1;background:var(--jm-orange)}
@media (prefers-reduced-motion:reduce){.slides img{transition:none}}

/* Why hosts choose us: line icons, hairline dividers */
.usp-band{background:var(--jm-cream-dark);padding:56px 0}
.usp-band .eyebrow{margin:0 0 26px;font-size:13px}
.usps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #DCC8AE}
.usp{padding:26px 22px 4px;border-left:1px solid #DCC8AE}
.usp:first-child{border-left:0;padding-left:0}
.ic{width:30px;height:30px;fill:none;stroke:var(--jm-orange-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.usp h3{font-size:19px;margin:16px 0 8px;letter-spacing:-.01em}
.usp p{margin:0;color:var(--jm-text-muted);font-size:15px;line-height:1.55}

/* Experience cards, left and right in turn; the whole card is the link */
.zz{display:grid;gap:28px}
.zz-card{display:grid;grid-template-columns:1.1fr 1fr;background:#fff;border:1px solid var(--jm-border);border-radius:var(--radius-lg,22px);overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.zz-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.zz-card:nth-child(even) .zz-img{order:2}
.zz-img{position:relative;min-height:340px}
.zz-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.zz-img.pair img{width:50%}
.zz-img.pair img+img{left:50%}
.zz-body{padding:34px 36px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.zz-body h3{font-size:28px;margin:0}
.zz-body .from{margin:0;font-weight:600;color:var(--jm-text-muted)}
.zz-body .from b{font-size:24px;color:var(--jm-text)}
.zz-body ul,.pkg ul{list-style:none;margin:4px 0;padding:0;display:grid;gap:8px}
.zz-body li,.pkg li{display:flex;gap:10px;align-items:baseline}
.zz-body li:before,.pkg li:before{content:"✓";color:var(--jm-orange-text);font-weight:800}
.zz-btn{align-self:flex-start;margin-top:8px}
.zz-card:hover .zz-btn{border-color:var(--jm-orange)}
.tag{align-self:flex-start;background:var(--jm-orange-light);color:var(--jm-text);font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:99px}

/* How booking works: a timeline, pictures left and right in turn */
.tl{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:56px}
.tl:before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:2px;background:var(--jm-border);transform:translateX(-1px)}
.tl li{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.tl li:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:var(--jm-orange);border:4px solid var(--jm-cream-dark);transform:translate(-50%,-50%)}
.tl li:nth-child(even) .tl-text{order:2}
.tl li:nth-child(odd) .tl-text{text-align:right}
.tl .num{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jm-orange-text)}
.tl h3{font-size:24px;margin:6px 0 8px;letter-spacing:-.01em}
.tl p{margin:0;color:var(--jm-text-muted);max-width:40ch;display:inline-block}
.tl-pic{margin:0;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);background:#fff}
.tl-pic img{display:block;width:100%;height:auto}
.tl-pic.shot{border:1px solid var(--jm-border)}
.tl-pic.tall{max-width:340px;justify-self:start}
.tl li:nth-child(even) .tl-pic.tall{justify-self:end}
.tl-pic.photo img{aspect-ratio:4/3;object-fit:cover}
.tl-pic.wa{background:#E7DDD3;padding:0 0 18px;width:100%;max-width:380px;justify-self:end}
.tl li:nth-child(even) .tl-pic.wa{justify-self:start}
.wam-head{background:#075E54;color:#fff;font-weight:600;font-size:14px;padding:12px 16px}
.wam-bubble{background:#fff;margin:16px 16px 0;padding:10px 12px 18px;border-radius:0 10px 10px 10px;font-size:14px;line-height:1.45;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wam-time{position:absolute;right:10px;bottom:4px;font-size:12px;color:#8a8a8a}

/* Reviews heading with the rating */
.rev-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px}
.rev-top h2{margin:0}
.rev-score{display:flex;align-items:center;gap:14px}
.rev-score .big{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1}
.rs-stars{color:var(--jm-orange);font-size:20px;letter-spacing:2px}
.rev-score .reviews-summary{font-size:14px;margin:2px 0 0}
.rev-cta{display:flex;justify-content:center;margin-top:30px}

/* Closing band */
.close-band{color:#fff;text-align:center;padding:120px 0;background:linear-gradient(rgba(24,20,16,.72),rgba(24,20,16,.82)),url(../img/hero-white-phone.jpg) center 40%/cover}
.close-band .container{display:flex;flex-direction:column;align-items:center;gap:18px}
.close-band .eyebrow{color:var(--jm-orange);margin:0}
.close-band h2{color:#fff;margin:0;font-size:clamp(36px,5.6vw,64px);line-height:1.05;letter-spacing:-.025em}
.close-sub{margin:0;font-size:17px;opacity:.85}
.close-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* Experiences and Add-ons: hero, photo reel, big tabs */
.exp-hero{padding:64px 0 8px}
.exp-hero h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.025em;line-height:1.06;max-width:18ch;margin:0 0 14px}
.exp-hero .lede{max-width:56ch}
.reel{overflow:hidden;margin:30px 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel-track{display:flex;gap:14px;width:max-content;animation:reel 140s linear infinite}
.reel:hover .reel-track{animation-play-state:paused}
.reel img{height:300px;width:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-md)}
@keyframes reel{to{transform:translateX(calc(-50% - 7px))}}
@media (prefers-reduced-motion:reduce){.reel-track{animation:none}.reel{overflow-x:auto}}
.tabs-label{margin:44px 0 14px;font-weight:700;font-size:15px}
.exp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.exp-tabs.two{grid-template-columns:repeat(2,minmax(0,420px));margin-bottom:40px}
.exp-tabs button{position:relative;display:flex;align-items:center;gap:18px;text-align:left;font:inherit;color:inherit;background:#fff;border:2px solid var(--jm-border);border-radius:var(--radius-md);padding:16px 18px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.exp-tabs button:hover{border-color:var(--jm-orange);box-shadow:var(--shadow-card)}
.exp-tabs button[aria-selected="true"]{border-color:var(--jm-orange);background:var(--jm-orange-light);box-shadow:0 10px 24px rgba(255,165,31,.25)}
.exp-tabs button[aria-selected="true"]:after{content:"✓";position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;background:var(--jm-orange);color:var(--jm-text);font-weight:800;display:grid;place-items:center;font-size:15px}
.exp-tabs button[aria-selected="false"]{opacity:.7}
.exp-tabs button[aria-selected="false"]:hover{opacity:1}
.exp-tabs img,.tab-ph{width:84px;height:84px;border-radius:12px;object-fit:cover;flex:none}
.tab-ph{display:grid;place-items:center;background:#fff;font-size:36px;font-weight:700;color:var(--jm-orange-text)}
.exp-tabs b{display:block;font-size:19px;letter-spacing:-.01em}
.exp-tabs small{display:block;color:var(--jm-text-muted);font-size:14px;margin-top:4px}
.tab-go{display:block;margin-top:8px;font-size:13.5px;font-weight:700;color:var(--jm-orange-text)}

/* Experiences: one panel per experience */
.exp-panel{padding-top:72px}
.exp-intro{max-width:760px;margin:0 auto 40px;text-align:center}
.exp-intro h2{font-size:clamp(30px,3.8vw,46px);margin:0 0 14px;letter-spacing:-.02em}
.exp-intro p{margin:0;color:var(--jm-text-muted);font-size:17.5px}
.exp-intro .eyebrow{margin-bottom:12px}
.mini-steps{margin:0 0 64px;padding:0;list-style:none;counter-reset:m;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mini-steps li{counter-increment:m;background:#fff;border:1px solid var(--jm-border);border-radius:var(--radius-md);padding:24px;font-size:15px;color:var(--jm-text-muted)}
.mini-steps li:before{content:counter(m);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--jm-orange-light);color:var(--jm-orange-text);font-weight:800;margin-bottom:14px}
.mini-steps b{display:block;color:var(--jm-text);font-size:17px;margin-bottom:4px}
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.pkg{position:relative;background:#fff;border:1px solid var(--jm-border);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column}
.pkg.pop{border-color:var(--jm-orange);box-shadow:0 0 0 2px var(--jm-orange)}
.pkg>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.pkg .tag{position:absolute;top:12px;left:12px;z-index:1}
.pkg:not(:has(img)) .tag{position:static;margin:22px 0 0 24px}
.pkg-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.pkg h3{margin:0;font-size:20px}
.pkg .price{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em}
.pkg .price small{font-size:14px;font-weight:600;color:var(--jm-text-muted)}
.pkg-desc{margin:0;color:var(--jm-text-muted);font-size:15px}
.pkg ul{margin:4px 0 8px;gap:7px;font-size:14.5px}
.pkg .btn{margin-top:auto}
.fine{margin:26px 0 0;color:var(--jm-text-muted);font-size:14.5px}
.fine a{color:var(--jm-orange-text);font-weight:600}
.exp-faq{margin:88px auto 0;max-width:820px}
.exp-faq h3{font-size:24px;margin:0 0 16px;text-align:center}

/* Add-ons: one card each, a photo or a line icon */
.ad-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ad{background:#fff;border:1px solid var(--jm-border);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column}
.ad-vis{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--jm-cream-dark);display:grid;place-items:center}
.ad-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ad-ic{width:76px;height:76px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-card)}
.ad-ic .ic{width:36px;height:36px}
.ad-txt{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.ad h3{margin:0;font-size:17px}
.ad-note{margin:0;color:var(--jm-text-muted);font-size:14.5px}
.ad-price{margin:auto 0 0;padding-top:8px;font-weight:800;font-size:16px;color:var(--jm-orange-text)}

@media (max-width:860px){
  .usps{grid-template-columns:1fr 1fr}
  .usp{padding:22px 14px 18px}
  .usp:nth-child(odd){border-left:0;padding-left:0}
  .rev-top{flex-direction:column;align-items:flex-start}
  .zz-card{grid-template-columns:1fr}
  .zz-card:nth-child(even) .zz-img{order:0}
  .zz-img{min-height:220px;aspect-ratio:4/3}
  .zz-body{padding:24px}
  .tl:before{left:7px}
  .tl li{grid-template-columns:1fr;gap:18px;padding-left:34px}
  .tl li:after{left:8px;top:14px}
  .tl li:nth-child(even) .tl-text{order:0}
  .tl li:nth-child(odd) .tl-text{text-align:left}
  .tl-pic.tall,.tl-pic.wa,.tl li:nth-child(even) .tl-pic.tall,.tl li:nth-child(even) .tl-pic.wa{justify-self:start}
  .slides{aspect-ratio:4/3}
  .reel img{height:200px}
  .exp-tabs,.exp-tabs.two{gap:8px}
  .exp-tabs.two{grid-template-columns:1fr 1fr}
  .exp-tabs button{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:10px 6px}
  .exp-tabs img,.tab-ph{width:100%;height:64px}
  .tab-ph{background:var(--jm-orange-light)}
  .exp-tabs b{font-size:14px}
  .exp-tabs small,.tab-go{display:none}
  .exp-tabs button[aria-selected="true"]:after{top:-8px;right:-6px;width:24px;height:24px;font-size:13px}
  .exp-intro{text-align:left}
  .mini-steps{grid-template-columns:1fr;gap:12px;margin-bottom:40px}
  .exp-panel{padding-top:48px}
  .pkgs{grid-template-columns:1fr}
  .ad-grid{grid-template-columns:1fr 1fr;gap:14px}
  .ad-txt{padding:14px}
}
@media (max-width:600px){
  .hero-actions .btn,.close-actions .btn{width:100%;text-align:center}
  .close-actions{width:100%;max-width:360px}
  .usps{grid-template-columns:1fr}
  .usp,.usp:nth-child(odd){border-left:0;padding:16px 0;border-top:1px solid #DCC8AE;display:grid;grid-template-columns:44px 1fr;column-gap:12px}
  .usp:first-child{border-top:0}
  .usp .ic{grid-row:span 2}
  .usp h3{margin:2px 0 4px}
  .ad-grid{grid-template-columns:1fr}
  /* How booking works on a phone: a 2x2 grid */
  .tl{grid-template-columns:1fr 1fr;gap:12px}
  .tl:before,.tl li:after{display:none}
  .tl li,.tl li:nth-child(odd),.tl li:nth-child(even){display:flex;flex-direction:column;gap:10px;padding:0;background:#fff;border:1px solid var(--jm-border);border-radius:var(--radius-md);overflow:hidden}
  .tl li .tl-text,.tl li:nth-child(odd) .tl-text,.tl li:nth-child(even) .tl-text{order:2;text-align:left;padding:0 12px 14px}
  .tl-pic,.tl-pic.tall,.tl-pic.wa,.tl li:nth-child(even) .tl-pic.tall,.tl li:nth-child(even) .tl-pic.wa{order:1;max-width:none;width:100%;height:150px;border:0;border-radius:0;box-shadow:none;justify-self:auto}
  .tl-pic img{width:100%;height:100%;object-fit:cover;object-position:top}
  .tl-pic.tall img{object-fit:contain;object-position:center;background:#FFFAF3}
  .tl-pic.photo img{aspect-ratio:auto}
  .tl-pic.wa{overflow:hidden;padding:0}
  .wam-head{font-size:12px;padding:8px 10px}
  .wam-bubble{font-size:12px;margin:8px 8px 0;padding:8px 9px 14px;line-height:1.35}
  .tl .num{font-size:12px}
  .tl h3{font-size:15px;margin:2px 0 4px;line-height:1.25}
  .tl p{font-size:13px;line-height:1.45}
}