/* ==================================================================
   PRIVATE EXPERIENCES AT THE COURT YARD
   Page styles for experiences.html
   ------------------------------------------------------------------
   Everything the experience builder needs lives here. It used to be
   inline in experiences.html, which meant the shared site styles and
   the page's own styles were impossible to tell apart.

   COLOUR. The site rule is green and red only. Nothing here breaks
   that: --xp-cocoa and --xp-cream are warm NEUTRALS, the same job
   --ink and --sand already do, used only for the chocolate graphic
   motifs. They are never a button, a link or a heading colour.

   PHOTOGRAPHY. There is none yet, and no placeholder is shown. Every
   art panel draws a CSS motif underneath an empty --xp-photo slot,
   so adding a picture later is one custom property:
       .xp-poster[data-photo="chocolate"]{ --xp-photo:url(...); }
   Until then the motif is the finished design, not a gap.
   ================================================================== */

:root{
  --xp-green:#0F6939;
  --xp-green-deep:#0A4A28;
  --xp-green-ink:#063019;
  --xp-brick:#931B24;
  --xp-brick-bright:#B32530;

  /* Warm neutrals for the chocolate motifs. Not accent colours. */
  --xp-cocoa:#3B2417;
  --xp-cocoa-soft:#5A3823;
  --xp-cream:#F6EFE5;

  --xp-sage:#EFF3EE;
  --xp-sand:#FBF8F3;
  --xp-ink:#232620;
  --xp-muted:#5B6259;
  --xp-line:rgba(35,38,32,0.12);
  --xp-line-strong:rgba(35,38,32,0.20);

  --xp-r-lg:22px;
  --xp-r-md:16px;
  --xp-r-sm:11px;

  --xp-shadow:0 10px 34px rgba(10,74,40,0.10);
  --xp-shadow-lift:0 16px 44px rgba(10,74,40,0.16);
}

/* ---- shared type devices ---------------------------------------- */
.xp-eyebrow{
  display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--xp-green);margin:0 0 10px;
}
.xp-h2{
  font-size:clamp(24px,4.2vw,34px);font-weight:800;letter-spacing:-0.022em;
  line-height:1.1;color:var(--xp-green-deep);margin:0 0 8px;text-wrap:balance;
}
.xp-lede{font-size:15.5px;line-height:1.65;color:var(--xp-muted);margin:0;max-width:62ch;}
.xp-num{font-variant-numeric:tabular-nums;}

/* ==================================================================
   1. HERO
   ================================================================== */
.xp-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--xp-green-ink);
  color:#fff;
  padding:clamp(30px,6vw,76px) 24px clamp(46px,7vw,84px);
}
/* The court. Drawn, not photographed -- a top-down pickleball court
   bleeding off the right edge. Hidden from assistive tech; it carries
   no information. */
.xp-hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-8%;right:-6%;width:min(46%,420px);height:118%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 440' preserveAspectRatio='xMidYMid meet'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.2'%3E%3Crect x='5' y='5' width='190' height='430'/%3E%3Cline x1='5' y1='220' x2='195' y2='220'/%3E%3Cline x1='5' y1='150' x2='195' y2='150'/%3E%3Cline x1='5' y1='290' x2='195' y2='290'/%3E%3Cline x1='100' y1='5' x2='100' y2='150'/%3E%3Cline x1='100' y1='290' x2='100' y2='435'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.16;
  transform:rotate(9deg);
}
/* A chocolate bar laid along the bottom edge as a seam between the
   two halves of what this place does. */
.xp-hero::after{
  content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:14px;
  background-color:var(--xp-cocoa);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 46px);
  background-position:0 0, 44px 0;
}
.xp-hero-inner{max-width:1180px;margin:0 auto;position:relative;}

.xp-crumb{font-size:12.5px;color:rgba(255,255,255,.6);margin:0 0 18px;}
.xp-crumb a{color:rgba(255,255,255,.82);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);}
.xp-crumb a:hover{border-bottom-color:#fff;color:#fff;}

.xp-hero .xp-eyebrow{color:rgba(255,255,255,.72);}

.xp-hero-title{
  font-size:clamp(34px,8.4vw,72px);font-weight:800;letter-spacing:-0.038em;
  line-height:0.98;margin:0 0 18px;max-width:15ch;text-wrap:balance;
}
/* Two words, two halves of the business, two treatments. */
.xp-hero-title .l1{display:block;color:#fff;}
.xp-hero-title .l2{display:block;color:var(--xp-cream);}
.xp-hero-title .l3{
  display:block;font-weight:400;letter-spacing:-0.02em;
  color:rgba(255,255,255,.66);font-size:.62em;margin-top:.16em;
}
.xp-hero-sub{
  font-size:clamp(15px,2vw,17.5px);line-height:1.6;color:rgba(255,255,255,.86);
  margin:0 0 10px;max-width:52ch;
}
.xp-hero-sub.small{font-size:15px;color:rgba(255,255,255,.7);margin-bottom:26px;}

.xp-hero-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--xp-brick);color:#fff;text-decoration:none;
  padding:15px 28px;border-radius:100px;font-weight:700;font-size:15.5px;
  border:2px solid transparent;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.xp-hero-cta:hover{background:var(--xp-brick-bright);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.28);}
.xp-hero-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease;}
.xp-hero-cta:hover svg{transform:translateY(3px);}

/* Trust points. Four facts, shown as a row rather than a list. */
.xp-trust{
  display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding:0;list-style:none;
}
.xp-trust li{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:9px 15px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.94);
}
.xp-trust svg{width:14px;height:14px;stroke:var(--xp-cream);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
@media (max-width:560px){
  .xp-trust{gap:8px;}
  .xp-trust li{font-size:12.5px;padding:8px 13px;}
}

/* ==================================================================
   2. INSPIRATION  ("Not sure where to start?")
   ================================================================== */
.xp-inspo{background:var(--xp-sand);padding:clamp(40px,6vw,68px) 24px;}
.xp-wrap{max-width:1180px;margin:0 auto;}
.xp-inspo-head{margin-bottom:26px;max-width:66ch;}

.xp-inspo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:1040px){ .xp-inspo-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .xp-inspo-grid{grid-template-columns:1fr;gap:12px;} }

.xp-idea{
  display:flex;flex-direction:column;text-align:left;
  background:#fff;border:1px solid var(--xp-line);border-radius:var(--xp-r-lg);
  overflow:hidden;padding:0;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.xp-idea:hover{transform:translateY(-4px);box-shadow:var(--xp-shadow-lift);border-color:var(--xp-green);}
/* The card that also exists as a scheduled, bookable experience. */
.xp-idea.is-scheduled{border-color:var(--xp-green);}

/* The art band. --xp-photo is empty today and paints nothing; the
   motif behind it is the design until a real photograph exists. */
.xp-idea-art{
  /* 128 rather than 104: at 104 a portrait photograph is cropped to a
     slice too thin to read as anything. Applied to all four so the row
     stays even. */
  position:relative;height:128px;
  background-image:var(--xp-photo,none);
  background-size:cover;background-position:center;
}
.xp-idea-art::before{
  content:"";position:absolute;inset:0;
}
/* With a real photograph the motif steps aside, and its slot becomes a
   scrim instead -- the tag is white and the wood underneath is pale. */
.xp-idea-art.has-photo::before{
  background:linear-gradient(to top, rgba(40,24,15,.78) 0%, rgba(40,24,15,.30) 45%, rgba(40,24,15,.05) 100%) !important;
}
.xp-idea:hover .xp-idea-art::before{opacity:.92;}
.xp-idea-art .tag{
  position:absolute;left:14px;bottom:11px;z-index:1;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.9);
}
.xp-idea-body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.xp-idea-title{font-size:16.5px;font-weight:800;color:var(--xp-green-deep);letter-spacing:-0.015em;line-height:1.25;margin:0;}
.xp-idea-blurb{font-size:13.5px;line-height:1.5;color:var(--xp-muted);margin:0;}
.xp-idea-price{font-size:12.5px;font-weight:700;color:var(--xp-brick);font-variant-numeric:tabular-nums;}
.xp-idea-price span{display:block;font-weight:500;color:var(--xp-muted);font-size:11.5px;margin-top:1px;}
.xp-idea-actions{margin-top:auto;padding-top:10px;}
/* Was a 32px text link. The card used to be one big button, so
   converting it to a div quietly shrank the only tappable thing on it
   to well under a thumb. Now a real target, and it looks like one. */
.xp-idea-go{
  display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  min-height:44px;padding:11px 16px;font-family:inherit;cursor:pointer;
  background:none;border:1.5px solid rgba(15,105,57,.28);border-radius:100px;
  font-size:13.5px;font-weight:700;color:var(--xp-green);text-align:left;
  transition:border-color .18s ease, background .18s ease;
}
.xp-idea-go:hover{border-color:var(--xp-green);background:rgba(15,105,57,.06);}
.xp-idea-go svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease;}
.xp-idea:hover .xp-idea-go svg{transform:translateX(4px);}
.xp-idea-go:focus-visible{outline:3px solid var(--xp-brick);outline-offset:3px;border-radius:6px;}

/* ---- the scheduled version of a starting point ------------------ */
/* Sits inside the card, above the build action, because booking a date
   that already exists is the faster answer for most people. */
.xp-sched{
  margin-top:4px;padding-top:12px;border-top:1px solid var(--xp-line);
  display:flex;flex-direction:column;gap:7px;
}
.xp-sched-name{font-size:13px;color:var(--xp-muted);margin:0;line-height:1.5;}
.xp-sched-name a{color:var(--xp-green-deep);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(10,74,40,.3);}
.xp-sched-name a:hover{border-bottom-color:var(--xp-green-deep);}
.xp-sched-date{display:flex;flex-direction:column;gap:1px;}
.xp-sched-when{font-size:14px;font-weight:800;color:var(--xp-ink);letter-spacing:-0.01em;}
.xp-sched-places{font-size:12px;font-weight:600;color:var(--xp-brick);}
.xp-sched-book{
  display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;
  background:var(--xp-green-deep);color:#fff;text-decoration:none;
  min-height:44px;padding:11px 16px;border-radius:100px;font-size:13.5px;font-weight:700;
  transition:background .18s ease;
}
.xp-sched-book:hover{background:var(--xp-green);}
.xp-sched-book small{font-weight:500;font-size:11.5px;opacity:.85;}
.xp-sched-book:focus-visible{outline:3px solid var(--xp-brick);outline-offset:3px;}
.xp-sched-none{font-size:12.5px;color:var(--xp-muted);margin:0;line-height:1.5;}
.xp-sched-none a{color:var(--xp-green);}
.xp-sched-or{font-size:12px;color:var(--xp-muted);margin:2px 0 0;line-height:1.4;}

/* Motifs, one per idea. */
.xp-art-choc::before{
  background-color:var(--xp-cocoa);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.12) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.34) 0 2px, transparent 2px 40px);
  background-position:0 0, 0 0, 38px 0, 0 38px;
  transition:opacity .2s ease;
}
.xp-art-court::before{
  background-color:var(--xp-green-deep);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 440'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Crect x='5' y='5' width='190' height='430'/%3E%3Cline x1='5' y1='220' x2='195' y2='220'/%3E%3Cline x1='5' y1='150' x2='195' y2='150'/%3E%3Cline x1='5' y1='290' x2='195' y2='290'/%3E%3Cline x1='100' y1='5' x2='100' y2='150'/%3E%3Cline x1='100' y1='290' x2='100' y2='435'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto 190%;background-position:center;background-repeat:no-repeat;
  opacity:1;transition:opacity .2s ease;
}
.xp-art-both::before{
  background:
    linear-gradient(105deg, var(--xp-cocoa) 0 49%, var(--xp-green-deep) 49% 100%);
  transition:opacity .2s ease;
}
.xp-art-both::after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 2px, transparent 2px 34px);
}
.xp-art-family::before{
  background-color:var(--xp-green);
  background-image:repeating-radial-gradient(circle at 50% 128%, rgba(255,255,255,.16) 0 2px, transparent 2px 24px);
  transition:opacity .2s ease;
}

/* "Or build your own from scratch" */
.xp-scratch{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding:18px 22px;
  background:#fff;border:1.5px dashed var(--xp-line-strong);border-radius:var(--xp-r-md);
}
.xp-scratch p{margin:0;font-size:14px;color:var(--xp-muted);line-height:1.5;}
.xp-scratch b{color:var(--xp-ink);font-weight:700;}
.xp-scratch a{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:14.5px;font-weight:700;color:var(--xp-green);text-decoration:none;
  border-bottom:2px solid rgba(15,105,57,.3);padding-bottom:2px;
  transition:border-color .18s ease;
}
.xp-scratch a:hover{border-bottom-color:var(--xp-green);}
.xp-scratch a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease;}
.xp-scratch a:hover svg{transform:translateX(4px);}

/* ==================================================================
   3. THE BUILDER
   ================================================================== */
#builder{scroll-margin-top:100px;}
.xp-builder{padding:clamp(34px,5vw,56px) 24px 40px;}
.builder-layout{display:grid;grid-template-columns:1fr 356px;gap:30px;align-items:start;}
.builder-main{display:flex;flex-direction:column;gap:14px;min-width:0;}

/* Chapters. Eight steps is a lot to look at; three chapters is not.
   The numbering is unchanged -- only the grouping is new. */
.xp-chapter{
  display:flex;align-items:baseline;gap:12px;
  margin:26px 0 4px;padding-bottom:10px;border-bottom:2px solid var(--xp-line);
}
.builder-main > .xp-chapter:first-child{margin-top:0;}
.xp-chapter h2{
  font-size:17px;font-weight:800;color:var(--xp-green-deep);margin:0;letter-spacing:-0.015em;
}
.xp-chapter span{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--xp-muted);margin-left:auto;white-space:nowrap;
}

.builder-step{
  background:#fff;border:1px solid var(--xp-line);border-radius:var(--xp-r-lg);
  padding:24px 24px 22px;
}
.builder-step.is-optional{background:var(--xp-sand);border-style:solid;}
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.step-num{
  width:27px;height:27px;border-radius:9px;background:var(--xp-green-deep);color:#fff;
  font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;font-variant-numeric:tabular-nums;
}
.step-head h3{font-size:17px;font-weight:800;color:var(--xp-green-deep);margin:0;letter-spacing:-0.015em;}
.step-head .step-opt{
  margin-left:auto;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--xp-muted);background:var(--xp-sage);border-radius:100px;padding:4px 10px;white-space:nowrap;
}
.step-sub{font-size:13.5px;color:var(--xp-muted);line-height:1.55;margin:0 0 16px 39px;}
@media (max-width:640px){ .step-sub{margin-left:0;} }

/* ---- experience posters ----------------------------------------- */
.exp-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (max-width:860px){ .exp-cards{grid-template-columns:1fr;} }

.exp-card{position:relative;min-width:0;}
.exp-card input{position:absolute;opacity:0;width:0;height:0;}
.exp-card label{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  border:1.5px solid var(--xp-line);border-radius:var(--xp-r-lg);background:#fff;cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.exp-card label:hover{border-color:var(--xp-green);box-shadow:var(--xp-shadow);transform:translateY(-3px);}
.exp-card input:checked + label{border-color:var(--xp-green-deep);border-width:2.5px;box-shadow:var(--xp-shadow);}
.exp-card input:focus-visible + label{outline:3px solid var(--xp-brick);outline-offset:3px;}

/* The poster head: a wordmark over a motif, image-ready via --xp-photo. */
.ec-art{
  position:relative;padding:26px 20px 18px;overflow:hidden;isolation:isolate;
  background-image:var(--xp-photo,none);background-size:cover;background-position:center;
}
.ec-art::before{content:"";position:absolute;inset:0;z-index:-1;}
.ec-word{
  font-size:clamp(25px,5.4vw,36px);font-weight:800;letter-spacing:-0.028em;line-height:0.95;
  color:#fff;margin:0;text-transform:uppercase;
}
.ec-tag{
  font-size:14.5px;font-weight:600;line-height:1.35;color:rgba(255,255,255,.82);
  margin:8px 0 0;max-width:22ch;
}
.ec-state{
  display:none;position:absolute;top:14px;right:14px;z-index:1;
  align-items:center;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  background:#fff;color:var(--xp-green-deep);border-radius:100px;padding:5px 11px;
}
.exp-card input:checked + label .ec-state{display:inline-flex;}
.ec-state svg{width:11px;height:11px;stroke:var(--xp-green-deep);fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;}

.ec-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1;}
.ec-desc{font-size:13.5px;color:var(--xp-muted);line-height:1.6;margin:0;}

/* Price and duration sit together at the top of the body so they stay
   above the fold on a phone. */
.ec-facts{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:1px solid var(--xp-line);
}
.ec-price{font-size:26px;font-weight:800;color:var(--xp-green-deep);letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1;}
.ec-price span{font-size:12.5px;font-weight:600;color:var(--xp-muted);letter-spacing:0;margin-left:3px;}
.ec-dur{font-size:13px;font-weight:700;color:var(--xp-ink);text-align:right;}
.ec-meta{font-size:12.5px;color:var(--xp-muted);line-height:1.5;margin:0;}
.ec-meta.tight{margin-top:-4px;}

.ec-inc-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--xp-muted);margin:4px 0 0;}
.ec-inc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.ec-inc li{display:flex;gap:8px;font-size:13px;color:var(--xp-ink);line-height:1.45;}
.ec-inc li svg{width:13px;height:13px;stroke:var(--xp-green);fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:3px;}

/* poster motifs */
.ec-art-choc::before{
  background-color:var(--xp-cocoa);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.11) 0 2px, transparent 2px 52px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.11) 0 2px, transparent 2px 52px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 2px, transparent 2px 52px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.32) 0 2px, transparent 2px 52px);
  background-position:0 0, 0 0, 50px 0, 0 50px;
}
.ec-art-court::before{
  background-color:var(--xp-green-deep);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 440'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.6' opacity='0.34'%3E%3Crect x='5' y='5' width='190' height='430'/%3E%3Cline x1='5' y1='220' x2='195' y2='220'/%3E%3Cline x1='5' y1='150' x2='195' y2='150'/%3E%3Cline x1='5' y1='290' x2='195' y2='290'/%3E%3Cline x1='100' y1='5' x2='100' y2='150'/%3E%3Cline x1='100' y1='290' x2='100' y2='435'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto 230%;background-position:82% center;background-repeat:no-repeat;
}
.ec-art-rebound::before{
  background-color:var(--xp-green);
  background-image:repeating-radial-gradient(circle at 50% 132%, rgba(255,255,255,.18) 0 2px, transparent 2px 22px);
}
.ec-art-soon::before{
  background-color:#4A4E48;
  background-image:radial-gradient(circle, rgba(255,255,255,.20) 1.4px, transparent 1.5px);
  background-size:15px 15px;
}

/* Coming soon. Readable, deliberately unpickable, and carrying no
   price at all -- there isn't one yet. */
.exp-card.is-soon label{cursor:not-allowed;border-style:dashed;}
.exp-card.is-soon label:hover{border-color:var(--xp-line);box-shadow:none;transform:none;}
.ec-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4);
  padding:5px 11px;border-radius:100px;margin-top:12px;
}
.ec-badge svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* ---- the builder answering back --------------------------------- */
/* Requirement 8. One short, quiet acknowledgement, never more. */
.xp-response{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--xp-cream);border-left:4px solid var(--xp-green);
  border-radius:0 var(--xp-r-md) var(--xp-r-md) 0;
  padding:16px 18px;margin-top:16px;
  animation:xpRise .32s ease both;
}
@keyframes xpRise{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .xp-response{animation:none;} }
.xp-response h4{font-size:15px;font-weight:800;color:var(--xp-green-deep);margin:0 0 4px;letter-spacing:-0.01em;}
.xp-response p{font-size:13.5px;line-height:1.6;color:var(--xp-muted);margin:0;}

/* ---- reveals, notices, panels ----------------------------------- */
.sub-reveal{margin-top:18px;padding-top:16px;border-top:1px dashed var(--xp-line-strong);}
.sub-reveal h4{font-size:14px;font-weight:800;color:var(--xp-green-deep);margin:0 0 4px;}
.sub-reveal .sr-note{font-size:12.5px;color:var(--xp-muted);margin:0 0 11px;line-height:1.5;}

.exp-notice{
  display:flex;gap:10px;align-items:flex-start;background:#FFF6E6;border:1px solid #F0DDB4;
  border-radius:var(--xp-r-sm);padding:12px 14px;font-size:13px;color:#5B4A22;margin-top:14px;line-height:1.5;
}
.exp-notice svg{width:15px;height:15px;stroke:#8A6D28;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:2px;}

.included-panel{background:var(--xp-sage);border-radius:var(--xp-r-md);padding:15px 17px;}
.included-panel h4{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--xp-muted);margin:0 0 9px;}
.included-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;}
.included-panel li{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--xp-green-deep);}
.included-panel li svg{width:14px;height:14px;stroke:var(--xp-green);fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;}

/* Festive panel -- appears only when the occasion asks for it. */
.xp-festive{
  background:var(--xp-cream);border:1px solid rgba(59,36,23,.16);
  border-radius:var(--xp-r-md);padding:17px 19px;margin-top:16px;
  animation:xpRise .32s ease both;
}
@media (prefers-reduced-motion:reduce){ .xp-festive{animation:none;} }
.xp-festive h4{font-size:15px;font-weight:800;color:var(--xp-green-deep);margin:0 0 5px;}
.xp-festive p{font-size:13.5px;line-height:1.6;color:var(--xp-muted);margin:0;}

/* ---- choices ---------------------------------------------------- */
.choice-grid{display:flex;flex-wrap:wrap;gap:9px;}
.choice-pill{position:relative;}
.choice-pill input{position:absolute;opacity:0;width:0;height:0;}
.choice-pill label{
  display:flex;align-items:center;gap:9px;
  padding:13px 18px;border-radius:100px;border:1.5px solid var(--xp-line-strong);
  font-size:13.5px;font-weight:600;color:var(--xp-ink);cursor:pointer;background:#fff;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  min-height:46px;
}
.choice-pill label:hover{border-color:var(--xp-green);}
.choice-pill input:checked + label{background:var(--xp-green-deep);border-color:var(--xp-green-deep);color:#fff;}
.choice-pill label small{font-weight:500;opacity:.68;font-size:12px;}
.choice-pill input:checked + label small{opacity:.88;}
.choice-pill input:checked + label::before{content:"\2713";font-weight:800;font-size:13px;line-height:1;}
.choice-pill input:focus-visible + label{outline:3px solid var(--xp-brick);outline-offset:3px;}
.choice-pill input:disabled + label{opacity:.5;cursor:not-allowed;}

/* Wide choices (food, drinks) get their own row so the price and the
   quantity stepper are never squeezed onto one line on a phone. */
.xp-choice-row{width:100%;}
.xp-choice-row .choice-pill,
.xp-choice-row .choice-pill label{width:100%;}
.xp-choice-row .choice-pill label{justify-content:flex-start;border-radius:var(--xp-r-md);padding:14px 17px;}
.xp-choice-row .choice-pill label .cp-name{flex:1;}
.xp-choice-row .choice-pill label small{white-space:nowrap;}
.xp-choice-list{display:flex;flex-direction:column;gap:11px;}

.qty-row{display:none;align-items:center;gap:10px;margin:9px 0 0 4px;flex-wrap:wrap;}
.qty-row.show{display:flex;}
.qty-row label{font-size:12.5px;color:var(--xp-muted);}
.qty-row input{width:82px;padding:9px 11px;border:1.5px solid var(--xp-line-strong);border-radius:9px;font-family:inherit;font-size:15px;}

.opt-note{font-size:12.5px;color:var(--xp-muted);margin:8px 0 0 4px;line-height:1.55;}
.opt-note.first{margin-top:0;}

/* ---- fields ------------------------------------------------------ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--xp-muted);margin-bottom:6px;}
.field input[type=text],.field input[type=number],.field input[type=date],.field input[type=time],
.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;padding:13px 14px;border-radius:var(--xp-r-sm);border:1.5px solid var(--xp-line-strong);
  font-family:'Poppins',sans-serif;font-size:15px;color:var(--xp-ink);background:#fff;
}
.field textarea{resize:vertical;min-height:76px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--xp-green);border-color:var(--xp-green);}
.field-err{display:block;font-size:12.5px;color:#a33a39;font-weight:700;margin-top:5px;min-height:1px;}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#a33a39;}

/* ==================================================================
   4. YOUR EXPERIENCE  (the itinerary, not a basket)
   ================================================================== */
.summary-card{
  position:sticky;top:96px;background:var(--xp-green-ink);color:#fff;
  border-radius:var(--xp-r-lg);padding:0;overflow:hidden;
  display:flex;flex-direction:column;
}
/* No motif here. Behind a chip row at this size the stripes read as
   stray table borders rather than chocolate. */
.sum-head{
  padding:20px 22px 16px;border-bottom:1px solid rgba(255,255,255,.14);
}
.sum-head h3{
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.66);margin:0 0 8px;
}
.sum-who{display:flex;flex-wrap:wrap;gap:7px;}
.sum-who span{
  font-size:12.5px;font-weight:700;background:rgba(255,255,255,.12);
  border-radius:100px;padding:5px 12px;color:#fff;
}
.sum-body{padding:6px 22px 4px;}
.sum-close{padding:0 22px 22px;}

/* An itinerary line: what it is, what it involves, how long, what it
   costs. */
.sum-item{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10);}
.sum-item:last-child{border-bottom:none;}
.sum-item-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.sum-item-name{font-size:15px;font-weight:700;line-height:1.3;flex:1;}
.sum-item-amt{font-size:15px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;}
.sum-item-amt.is-inc{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.62);}
.sum-item-amt.is-tbc{font-size:12px;font-weight:700;color:var(--xp-cream);}
.sum-sub{display:block;font-size:12.5px;color:rgba(255,255,255,.68);margin-top:3px;line-height:1.5;}
.sum-sub.dur{color:rgba(255,255,255,.9);font-weight:600;}
.sum-min{display:block;font-size:12px;color:#FFD9A0;margin-top:5px;line-height:1.5;}

.sum-foot{padding:16px 22px 0;border-top:1px solid rgba(255,255,255,.18);margin-top:4px;}
.sum-time{
  display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
  color:rgba(255,255,255,.9);margin-bottom:12px;
}
.sum-time b{font-weight:700;white-space:nowrap;}
.sum-total-l{font-size:12.5px;color:rgba(255,255,255,.72);}
.sum-total{font-size:38px;font-weight:800;line-height:1.05;letter-spacing:-0.035em;margin-top:2px;font-variant-numeric:tabular-nums;}
.sum-avg{font-size:13.5px;color:rgba(255,255,255,.8);margin-top:3px;font-variant-numeric:tabular-nums;}
.sum-private{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:12.5px;font-weight:700;color:var(--xp-cream);
}
.sum-private svg{width:14px;height:14px;stroke:var(--xp-cream);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.sum-empty{font-size:14px;color:rgba(255,255,255,.82);line-height:1.65;padding:16px 0 4px;}
.sum-empty b{color:#fff;}
.sum-rate{font-size:26px;font-weight:800;letter-spacing:-0.03em;margin:8px 0 2px;font-variant-numeric:tabular-nums;}

.xp-send{
  width:100%;justify-content:center;background:var(--xp-brick);color:#fff;border:none;
  font-family:inherit;font-size:15.5px;font-weight:700;padding:16px 20px;border-radius:100px;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .18s ease, transform .18s ease;
}
.xp-send:hover:not(:disabled){background:var(--xp-brick-bright);transform:translateY(-2px);}
.xp-send:disabled{opacity:.65;cursor:progress;transform:none;}
.summary-note{font-size:12px;color:rgba(255,255,255,.72);line-height:1.55;margin:12px 0 0;}

/* The same send button repeated at the natural end of the form, so
   nobody has to open a summary sheet to find it. */
.xp-send-inline{
  background:#fff;border:1px solid var(--xp-line);border-radius:var(--xp-r-lg);
  padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.xp-send-inline p{font-size:13px;color:var(--xp-muted);margin:0;line-height:1.6;}
.xp-send-inline .xp-send{width:auto;padding:15px 30px;}

.confirm-panel{display:none;background:var(--xp-sage);border-radius:var(--xp-r-lg);padding:34px;text-align:center;margin-top:22px;}
.confirm-panel.show{display:block;}
.confirm-panel h3{color:var(--xp-green-deep);font-size:21px;margin:0 0 10px;font-weight:800;}
.confirm-panel p{color:var(--xp-muted);font-size:14.5px;max-width:520px;margin:0 auto;line-height:1.65;}

/* ==================================================================
   5. MOBILE
   ================================================================== */
.mob-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--xp-green-ink);color:#fff;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  align-items:center;gap:12px;box-shadow:0 -6px 22px rgba(0,0,0,.24);
}
.mob-bar .mb-t{flex:1;min-width:0;}
.mob-bar .mb-l{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:rgba(255,255,255,.62);}
.mob-bar .mb-t b{display:block;font-size:20px;font-weight:800;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mob-bar button{
  background:#fff;color:var(--xp-green-ink);border:none;border-radius:100px;
  padding:12px 18px;font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-height:44px;
}
.mob-bar button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;}
.mob-bar button[aria-expanded="true"] svg{transform:rotate(180deg);}

.xp-scrim{
  display:none;position:fixed;inset:0;z-index:65;background:rgba(6,48,25,.5);
  opacity:0;transition:opacity .22s ease;
}
.xp-scrim.show{display:block;opacity:1;}

@media (max-width:980px){
  .builder-layout{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .mob-bar{display:flex;}
  /* Keeps the bar clear of the last field rather than over it. */
  .xp-builder{padding-bottom:96px;}

  /* The summary becomes a sheet that slides up over the builder
     rather than a panel that lives permanently in the way. */
  .summary-card{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:75;
    border-radius:var(--xp-r-lg) var(--xp-r-lg) 0 0;
    max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateY(101%);transition:transform .26s ease;
    box-shadow:0 -10px 40px rgba(0,0,0,.34);
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  .summary-card.open{transform:translateY(0);}
  .sum-head{position:sticky;top:0;z-index:1;background-color:var(--xp-green-ink);}
  .xp-sheet-close{
    position:absolute;top:14px;right:14px;z-index:2;
    /* 44, not 34: this is the only way out of the sheet other than the
       scrim, and it sits in the corner where thumbs are least accurate. */
    width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .xp-sheet-close svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;}
  body.xp-sheet-open{overflow:hidden;}
}
@media (min-width:901px){
  .xp-sheet-close{display:none;}
  .xp-send-inline{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .summary-card{transition:none;}
  .xp-scrim{transition:none;}
}

@media (max-width:640px){
  .xp-builder{padding-left:16px;padding-right:16px;}
  .xp-inspo{padding-left:16px;padding-right:16px;}
  .xp-hero{padding-left:18px;padding-right:18px;}
  .builder-step{padding:20px 17px 18px;border-radius:var(--xp-r-md);}
  .ec-art{padding:20px 17px 16px;}
  .ec-body{padding:16px 17px 18px;}
  .sum-head,.sum-body,.sum-foot,.sum-close{padding-left:18px;padding-right:18px;}
  /* Selections must be obvious and easy to hit. */
  .choice-pill label{min-height:50px;font-size:14px;}
}

/* ==================================================================
   6. HOW IT WORKS / CLASSBENTO
   ================================================================== */
.xp-how{background:var(--xp-sage);padding:clamp(38px,5vw,60px) 24px;}
.xp-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:24px auto 0;}
@media (max-width:760px){ .xp-how-grid{grid-template-columns:1fr;gap:14px;} }
.xp-how-step{background:#fff;border-radius:var(--xp-r-md);padding:22px;}
.xp-how-step .n{
  width:32px;height:32px;border-radius:10px;background:var(--xp-green-deep);color:#fff;
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.xp-how-step h3{font-size:15.5px;font-weight:800;color:var(--xp-green-deep);margin:0 0 5px;}
.xp-how-step p{font-size:13.5px;color:var(--xp-muted);line-height:1.6;margin:0;}

.xp-elsewhere{
  max-width:1180px;margin:0 auto;padding:26px 24px 0;
  font-size:13px;color:var(--xp-muted);line-height:1.6;
}
.xp-elsewhere a{color:var(--xp-green);text-decoration:none;border-bottom:1px solid rgba(15,105,57,.3);}
.xp-elsewhere a:hover{border-bottom-color:var(--xp-green);}

/* ==================================================================
   7. GETTING OUT OF EACH OTHER'S WAY
   ==================================================================
   The site-wide feedback button is fixed at bottom:16px with z-index
   9000, which on a phone lands exactly on top of this page's running
   total bar and covers the button that opens it. The widget is shared
   with every other page, so it is moved here rather than there --
   only this page puts anything else along the bottom edge.
   The inline style it sets itself is why this needs !important. */
@media (max-width:900px){
  #wnpFabWrap{ bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  /* While the itinerary sheet is up it is the only thing on screen. */
  body.xp-sheet-open #wnpFabWrap{ display:none !important; }
}

/* Four trust points stacked four-deep pushes the CTA off a phone
   screen. Two columns keeps the hero to one screenful. */
@media (max-width:560px){
  .xp-trust{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .xp-trust li{padding:8px 11px;font-size:11.5px;gap:6px;}
}
@media (max-width:380px){
  .xp-trust{grid-template-columns:1fr;}
}

/* The member figure, shown beside the estimate rather than instead of
   it -- most people reading this page are not members yet. */
.sum-member{
  margin-top:10px;padding:9px 12px;border-radius:var(--xp-r-sm);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  font-size:13.5px;color:#fff;
}
.sum-member b{font-weight:800;font-variant-numeric:tabular-nums;}

/* ==================================================================
   8. WHERE IT HAPPENS
   ==================================================================
   The room is dressed like this all year round, so these read as the
   venue rather than as a season. --xp-focus frames each shot: both
   originals are portrait and both have a cold marquee ceiling at the
   top worth cropping past, so the framing is per-tile rather than
   centred. */
.xp-place{background:var(--xp-sand);padding:clamp(38px,5vw,62px) 24px;}
.xp-place-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;}
@media (max-width:760px){ .xp-place-grid{grid-template-columns:1fr;gap:12px;} }

.xp-place-tile{
  position:relative;margin:0;border-radius:var(--xp-r-lg);overflow:hidden;
  background:var(--xp-cocoa);aspect-ratio:4/3;
}
.xp-place-tile img{
  width:100%;height:100%;display:block;object-fit:cover;
  object-position:var(--xp-focus,center);
}
.xp-place-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:34px 18px 14px;color:#fff;font-size:13.5px;font-weight:700;
  background:linear-gradient(to top, rgba(40,24,15,.82) 0%, rgba(40,24,15,.35) 55%, rgba(40,24,15,0) 100%);
}
.xp-place-more{margin:18px 0 0;font-size:14px;}
.xp-place-more a{
  color:var(--xp-green);text-decoration:none;font-weight:700;
  border-bottom:2px solid rgba(15,105,57,.3);padding-bottom:2px;
}
.xp-place-more a:hover{border-bottom-color:var(--xp-green);}