/* Mystery Picnic - shared site stylesheet
   Core colours: Blue-grey #434F69 | Pink #F72079 | White #FFFFFF
*/
:root{
  --navy:#434F69;--navy-deep:#344057;--pink:#F72079;--pink-dark:#d91565;
  --white:#FFFFFF;--soft:#F8F8FA;--line:#E7E9EE;--text:#343A48;--muted:#687083;
  --radius:18px;--shadow:0 14px 35px rgba(67,79,105,.12);--shadow-pink:0 16px 38px rgba(247,32,121,.14)
;}
*{box-sizing:border-box;}html{scroll-behavior:smooth;scroll-padding-top:100px;}body{margin:0;background:var(--white);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;}img{max-width:100%;display:block;}a{color:inherit;}button{font:inherit;}.wrap{width:min(1220px,calc(100% - 40px));margin-inline:auto;}.centered{text-align:center;}
h1,h2,h3{color:var(--navy);line-height:1.08;margin-top:0;}h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;}h1{font-size:clamp(2.65rem,6vw,5.15rem);letter-spacing:-.035em;margin-bottom:22px;}h1 span{color:var(--pink);}h2{font-size:clamp(2rem,3.7vw,3.35rem);letter-spacing:-.025em;margin-bottom:20px;}h3{font-size:1.08rem;margin-bottom:8px;}p{margin-top:0;}.lead{font-size:1.15rem;color:var(--muted);}.eyebrow{color:var(--pink);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:800;margin-bottom:14px;}.eyebrow.light{color:#fff;}.text-link{text-decoration:none;color:var(--navy);font-weight:750;}.text-link:hover{color:var(--pink);}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);}.header-inner{min-height:86px;display:flex;align-items:center;gap:22px;}.brand{flex:0 0 auto;text-decoration:none;}.brand img{width:66px;height:66px;object-fit:contain;}.main-nav{margin-left:auto;display:flex;align-items:center;gap:23px;}.main-nav a{text-decoration:none;color:var(--navy);font-weight:700;font-size:.9rem;white-space:nowrap;}.main-nav a:hover{color:var(--pink);}.menu-toggle{display:none;margin-left:auto;border:0;background:none;color:var(--navy);font-size:1.7rem;cursor:pointer;}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:0 24px;border-radius:999px;background:var(--pink);color:#fff;font-weight:800;text-decoration:none;border:2px solid var(--pink);box-shadow:0 8px 22px rgba(247,32,121,.18);transition:background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;}.button:hover{background:var(--pink-dark);border-color:var(--pink-dark);transform:translateY(-1px);}.button:focus-visible,.carousel-button:focus-visible,.menu-toggle:focus-visible,.main-nav a:focus-visible,.text-link:focus-visible{outline:3px solid rgba(247,32,121,.32);outline-offset:3px;}.button-small{min-height:44px;padding-inline:18px;font-size:.88rem;}.button.full{width:100%;margin-top:18px;}
.hero{padding-top:42px;}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.78fr);align-items:center;gap:56px;}.hero-copy{padding:54px 0 58px;display:flex;flex-direction:column;justify-content:center;}.hero-intro{font-size:clamp(1.08rem,1.7vw,1.3rem);color:var(--muted);max-width:650px;}.hero-actions{display:flex;align-items:center;gap:24px;margin:14px 0 36px;}.hero-actions .button{background:#2B9EB3;border-color:#2B9EB3;box-shadow:0 8px 22px rgba(43,158,179,.20);}.hero-actions .button:hover,.hero-actions .button:focus-visible{background:var(--pink);border-color:var(--pink);box-shadow:0 8px 22px rgba(247,32,121,.20);}.quick-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:700px;}.quick-facts div{padding:17px 18px 16px 0;}.quick-facts div+div{padding-left:22px;border-left:1px solid var(--line);}.quick-facts strong{display:block;color:var(--navy);font-size:1rem;}.quick-facts span{font-size:.81rem;color:var(--muted);}.hero-visual{border-radius:32px;overflow:hidden;box-shadow:var(--shadow);background:var(--soft);aspect-ratio:11/13;}.hero-visual img{width:100%;height:100%;object-fit:cover;}.gingham-rule{height:9px;margin-top:42px;background:linear-gradient(90deg,var(--navy) 0 12px,transparent 12px 24px) 0 0/24px 9px,#fff;opacity:.9;}
.experience-gallery{padding:82px 0 38px;overflow:hidden;}.section-heading-row{display:flex;align-items:end;justify-content:space-between;gap:25px;}.carousel-controls{display:flex;gap:10px;padding-bottom:10px;}.carousel-button{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);cursor:pointer;font-size:1.15rem;font-weight:800;transition:.2s ease;}.carousel-button:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-1px);}.carousel{overflow:visible;}.carousel-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px max(0px,calc((100vw - min(1220px,calc(100vw - 40px)))/2)) 24px 0;overscroll-behavior-inline:contain;}.carousel-track::-webkit-scrollbar{display:none;}.carousel-card{flex:0 0 clamp(300px,31vw,430px);aspect-ratio:4/3;margin:0;border-radius:22px;overflow:hidden;scroll-snap-align:start;background:var(--soft);box-shadow:0 10px 28px rgba(67,79,105,.10);}.carousel-card img{width:100%;height:100%;object-fit:cover;}

.how-section{position:relative;isolation:isolate;overflow:hidden;padding:104px 0 96px;background:none;color:#fff;}.how-section::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(29,39,58,.58) 0%,rgba(34,45,64,.40) 48%,rgba(34,45,64,.28) 100%),linear-gradient(0deg,rgba(18,27,42,.10),rgba(18,27,42,.10));}.how-inner{position:relative;z-index:3;}.how-copy{max-width:790px;margin-bottom:38px;}.how-section .eyebrow{color:var(--pink);margin-bottom:12px;}.how-section h2{color:#fff;font-size:clamp(2.4rem,4.4vw,4.35rem);margin-bottom:18px;}.how-intro{max-width:720px;margin:0;color:rgba(255,255,255,.91);font-size:1.08rem;font-weight:550;}.steps{margin-top:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}.step{position:relative;isolation:isolate;min-height:252px;overflow:hidden;background:linear-gradient(135deg,rgba(43,158,179,.18),rgba(43,158,179,.08));border:1px solid rgba(43,158,179,.28);border-radius:22px;padding:31px 28px 29px;box-shadow:inset 0 1px 0 rgba(255,255,255,.19),0 18px 38px rgba(15,23,38,.11);backface-visibility:hidden;transform:translateZ(0);transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;}.step::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 42%,rgba(255,255,255,.035));}.step::after{content:"";position:absolute;z-index:3;left:24px;right:24px;top:0;height:3px;border-radius:0 0 999px 999px;background:rgba(43,158,179,.88);box-shadow:0 0 10px rgba(43,158,179,.16);transition:background-color .22s ease,box-shadow .22s ease;}.step>*{position:relative;z-index:2;}.step:hover,.step:focus-within,.step.is-active{transform:translateY(-6px) translateZ(0);background:linear-gradient(135deg,rgba(22,31,47,.24),rgba(255,255,255,.075));border-color:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 24px 50px rgba(15,23,38,.16);}.step:hover::after,.step:focus-within::after,.step.is-active::after{background:var(--pink);box-shadow:0 0 12px rgba(247,32,121,.22);}.step h3{font-family:Georgia,"Times New Roman",serif;font-size:1.42rem;font-weight:500;color:#fff;margin-bottom:12px;}.step p{color:rgba(255,255,255,.94);margin-bottom:0;font-size:.96rem;}.step-number{display:grid;place-items:center;width:50px;height:34px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.42);color:#fff;font-weight:850;margin-bottom:28px;}.step:hover .step-number,.step:focus-within .step-number,.step.is-active .step-number{background:rgba(247,32,121,.15);border-color:rgba(247,32,121,.60);color:#fff;}


/* How It Works images are supplied by each page index; CSS controls their shared treatment. */
.how-section-background{
  position:absolute;
  z-index:-2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.home-page .how-section-background{
  object-position:center 48%;
}

.product-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;}.product-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:2px solid var(--line);border-radius:24px;padding:27px 25px 23px;box-shadow:var(--shadow);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}.product-card:hover,.product-card:focus-within{border-color:var(--pink);box-shadow:var(--shadow-pink);transform:translateY(-2px);}.product-card-top{min-height:150px;}.product-kicker{margin:0 0 7px;color:var(--pink);font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}.product-card h3{font-family:Georgia,"Times New Roman",serif;font-size:1.55rem;font-weight:500;margin-bottom:10px;}.product-desc{color:var(--muted);font-size:.94rem;margin-bottom:18px;}.product-prices{border-top:1px solid var(--line);margin-top:4px;}.product-price-row{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);}.product-price-row span{color:var(--text);font-size:.94rem;}.product-price-row strong{color:var(--navy);font-size:1.08rem;white-space:nowrap;}.product-card .button{margin-top:auto;padding-inline:16px;text-align:center;}.pricing-footnote{margin:20px 0 0;color:var(--muted);font-size:.82rem;text-align:center;}


.faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:75px;}.faq-list details{border-bottom:1px solid var(--line);padding:0;}.faq-list summary{list-style:none;cursor:pointer;color:var(--navy);font-weight:800;padding:20px 32px 20px 0;position:relative;}.faq-list summary::-webkit-details-marker{display:none;}.faq-list summary:after{content:"+";position:absolute;right:4px;top:16px;color:var(--pink);font-size:1.5rem;}.faq-list details[open] summary:after{content:"–";}.faq-list details p{color:var(--muted);padding:0 40px 20px 0;margin:0;}
.final-cta{background:var(--navy);color:#fff;padding:68px 0;}.final-cta h2,.final-cta p{color:#fff;}.final-cta h2{margin-bottom:10px;}.final-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;}.final-cta-inner>div{max-width:720px;}.final-cta-inner p:last-child{margin-bottom:0;color:rgba(255,255,255,.82);}.final-cta-button{background:#FFE916;border-color:#FFE916;color:var(--navy);box-shadow:0 9px 24px rgba(255,233,22,.18);}.final-cta-button:hover,.final-cta-button:focus-visible{background:#f1dc00;border-color:#f1dc00;color:var(--navy);box-shadow:0 12px 28px rgba(255,233,22,.24);transform:translateY(-1px);}
.site-footer{background:#26334d;color:#fff;padding:58px 0 0;}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:55px;align-items:start;}.footer-brand img{width:92px;height:92px;object-fit:contain;margin-bottom:18px;}.footer-brand p{color:rgba(255,255,255,.78);max-width:300px;margin:0;}.site-footer h2{font-family:inherit;font-size:1rem;font-weight:800;color:#fff;letter-spacing:0;margin-bottom:15px;}.site-footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:9px;}.site-footer nav a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.93rem;}.site-footer nav a:hover{color:#fff;}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:45px;padding:22px 0 24px;}.footer-bottom p{margin:0;color:rgba(255,255,255,.66);font-size:.82rem;}

/* ===== Intro story + vertical pricing immediately below hero ===== */
.intro-options-section{
  padding:82px 0 100px;
  background:#fff;
}

.intro-options-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(390px,.55fr);
  gap:72px;
  align-items:start;
}

.intro-story{
  min-width:0;
  max-width:820px;
}

.intro-story > .eyebrow{
  margin-bottom:12px;
}

.intro-story > h2{
  max-width:800px;
  margin-bottom:22px;
}

.intro-lead{
  max-width:790px;
  margin:0 0 46px;
  color:var(--muted);
  font-size:1.13rem;
  line-height:1.75;
}






.story-block{
  padding:36px 0 38px;
  border-top:1px solid var(--line);
}

.story-block:first-of-type{
  border-top:0;
  padding-top:0;
}

.story-block-last{
  padding-bottom:0;
}

.story-kicker{
  margin:0 0 9px;
  color:var(--pink);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.74rem;
  font-weight:900;
}

.story-block h3{
  margin:0 0 14px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.55rem,2vw,2rem);
  font-weight:500;
  line-height:1.16;
}

.story-block p:not(.story-kicker){
  max-width:790px;
  margin:0 0 16px;
  color:var(--muted);
  font-size:1.03rem;
  line-height:1.72;
}

.story-block p:last-child{
  margin-bottom:0;
}

/* Pricing sidebar */
.intro-pricing{
  position:sticky;
  top:112px;
  align-self:start;
  min-width:0;
  padding:24px 22px 20px;
  border-radius:32px;
  background-color:#eef8fa;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(43,158,179,.16) 0 42px,
      rgba(67,79,105,.035) 42px 84px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(43,158,179,.12) 0 42px,
      rgba(255,255,255,.10) 42px 84px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(43,158,179,.055) 0 2px,
      transparent 2px 6px
    );
  border:1px solid rgba(43,158,179,.16);
  box-shadow:0 22px 48px rgba(67,79,105,.09);
}

.intro-pricing-heading{
  margin-bottom:22px;
  text-align:center;
}

.intro-pricing-heading .eyebrow{
  margin-bottom:9px;
}

.intro-pricing-heading h2{
  margin-bottom:10px;
  font-size:clamp(1.9rem,2.7vw,2.55rem);
}

.intro-pricing-heading > p:last-child{
  margin:0;
  color:var(--muted);
  font-size:.98rem;
}

.product-options-vertical{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.product-options-vertical .product-card{
  width:100%;
  padding:28px 28px 25px;
  
  border-radius:22px;
  
}

.product-options-vertical .product-card-top{
  position:relative;
  min-height:0;
  padding-right:78px;
}

.product-options-vertical .product-kicker{
  margin-bottom:6px;
}

.product-options-vertical .product-card h3{
  margin-bottom:10px;
  font-size:1.62rem;
}

.product-options-vertical .product-desc{
  margin-bottom:20px;
  font-size:.98rem;
  line-height:1.55;
}

.product-options-vertical .product-price-row{
  padding:15px 0;
}

.product-options-vertical .product-price-row span{
  font-size:.98rem;
}

.product-options-vertical .product-price-row strong{
  font-size:1.12rem;
}

.product-options-vertical .button{
  min-height:52px;
  margin-top:20px;
  background:var(--pink);
  border-color:var(--pink);
  box-shadow:0 10px 24px rgba(247,32,121,.20);
}

.product-options-vertical .button:hover,
.product-options-vertical .button:focus-visible,
.product-options-vertical .product-card:hover .button,
.product-options-vertical .product-card:focus-within .button{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
  box-shadow:0 10px 24px rgba(43,158,179,.24);
}

.intro-pricing .pricing-footnote{
  margin:14px 0 0;
  text-align:center;
}


/* ===== Pricing card emphasis ===== */
.product-options-vertical .product-card{
  position:relative;
  overflow:hidden;
  border:1.5px solid rgba(67,79,105,.24);
  background:#fff;
  box-shadow:0 12px 30px rgba(67,79,105,.12);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease,background .22s ease;
}

.product-options-vertical .product-card::after{
  content:"";
  position:absolute;
  width:54px;
  height:54px;
  top:22px;
  right:22px;
  border-radius:16px;
  border:1px solid rgba(67,79,105,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70);
  background-color:rgba(255,255,255,.92);
  background-repeat:no-repeat;
}

.product-options-vertical .product-card:nth-child(1)::after{
  background-image:
    radial-gradient(circle at 32% 28%, #F72079 0 4px, transparent 4.5px),
    radial-gradient(circle at 68% 28%, #2B9EB3 0 4px, transparent 4.5px),
    radial-gradient(ellipse 18% 14% at 32% 58%, #F72079 0 99%, transparent 100%),
    radial-gradient(ellipse 18% 14% at 68% 58%, #2B9EB3 0 99%, transparent 100%),
    linear-gradient(135deg, rgba(247,32,121,.12), rgba(43,158,179,.10));
}

.product-options-vertical .product-card:nth-child(2)::after{
  background-image:
    radial-gradient(circle at 31% 23%, #F72079 0 4px, transparent 4.5px),
    radial-gradient(circle at 69% 23%, #2B9EB3 0 4px, transparent 4.5px),
    radial-gradient(circle at 40% 56%, #F72079 0 3.4px, transparent 4px),
    radial-gradient(circle at 60% 56%, #2B9EB3 0 3.4px, transparent 4px),
    radial-gradient(ellipse 16% 12% at 31% 48%, #F72079 0 99%, transparent 100%),
    radial-gradient(ellipse 16% 12% at 69% 48%, #2B9EB3 0 99%, transparent 100%),
    radial-gradient(ellipse 12% 10% at 40% 75%, #F72079 0 99%, transparent 100%),
    radial-gradient(ellipse 12% 10% at 60% 75%, #2B9EB3 0 99%, transparent 100%),
    linear-gradient(135deg, rgba(43,158,179,.11), rgba(247,32,121,.08));
}

.product-options-vertical .product-card-premium::after{
  content:"";
  background-color:#FFE916;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23434F69' d='M13 42 9 18l14 10 9-17 9 17 14-10-4 24H13Zm3 5h32l-3 7H19l-3-7Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:58%;
  border-color:rgba(67,79,105,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 6px 16px rgba(255,233,22,.22);
}

.product-options-vertical .product-card::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:-1px;
  height:4px;
  border-radius:0 0 999px 999px;
  background:transparent;
  transition:background-color .22s ease,box-shadow .22s ease;
}

.product-options-vertical .product-card-premium::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.24);
}

.product-options-vertical .product-card-premium{
  border-color:rgba(43,158,179,.46);
  box-shadow:0 18px 42px rgba(43,158,179,.14),0 12px 30px rgba(67,79,105,.12);
}

.product-options-vertical .product-card:hover,
.product-options-vertical .product-card:focus-within{
  border-color:rgba(43,158,179,.56);
  background:#fff;
  box-shadow:0 18px 42px rgba(43,158,179,.17),0 12px 30px rgba(67,79,105,.12);
  transform:translateY(-3px);
}

.product-options-vertical .product-card:hover::before,
.product-options-vertical .product-card:focus-within::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.28);
}

.product-options-vertical:has(.product-card:not(.product-card-premium):hover) .product-card-premium,
.product-options-vertical:has(.product-card:not(.product-card-premium):focus-within) .product-card-premium{
  border-color:rgba(67,79,105,.24);
  box-shadow:0 12px 30px rgba(67,79,105,.12);
  transform:none;
}

.product-options-vertical:has(.product-card:not(.product-card-premium):hover) .product-card-premium::before,
.product-options-vertical:has(.product-card:not(.product-card-premium):focus-within) .product-card-premium::before{
  background:transparent;
  box-shadow:none;
}




/* Tablet */
@media (max-width:1050px){
  .intro-options-grid{
    grid-template-columns:minmax(0,1fr) minmax(330px,.62fr);
    gap:44px;
  }
}

/* Stack on smaller screens */
@media (max-width:850px){
  .intro-options-section{
    padding:68px 0 78px;
  }

  .intro-options-grid{
    grid-template-columns:1fr;
    gap:50px;
  }

  .intro-story{
    max-width:none;
  }

  .intro-pricing{
    position:static;
  }

  .intro-pricing-heading{
    max-width:700px;
  }
}

@media (max-width:650px){
  .intro-options-section{
    padding:54px 0 66px;
  }

  .intro-lead{
    margin-bottom:32px;
    font-size:1.04rem;
  }

  .story-block{
    padding:29px 0 31px;
  }

  .story-block p:not(.story-kicker){
    font-size:1rem;
  }

  

  

  .product-options-vertical .product-card{
    padding:25px 22px 22px;
  }

  .product-options-vertical .product-card h3{
    font-size:1.5rem;
  }
}

@media (max-width:1080px){.header-cta{display:none;}.main-nav{gap:18px;}.main-nav a{font-size:.86rem;}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);gap:38px;}}
@media (max-width:950px){.menu-toggle{display:block;}.main-nav{display:none;position:absolute;left:20px;right:20px;top:78px;flex-direction:column;align-items:stretch;gap:0;padding:10px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);}.main-nav.open{display:flex;}.main-nav a{padding:13px 3px;border-bottom:1px solid var(--line);font-size:.95rem;}.main-nav a:last-child{border-bottom:0;}.hero-grid,.faq-layout{grid-template-columns:1fr;}.hero-grid{gap:18px;}.hero-copy{padding:30px 0 12px;}.hero-visual{width:min(620px,100%);justify-self:center;}.faq-layout{gap:38px;}.steps{grid-template-columns:repeat(2,1fr);}.how-section{padding:86px 0 78px;}.how-copy{margin-bottom:32px;}.step{min-height:230px;}.product-options{grid-template-columns:1fr;}.product-card-top{min-height:0;}.footer-grid{grid-template-columns:1.25fr repeat(2,1fr);}.footer-grid>div:last-child{grid-column:2;}}
@media (max-width:650px){.wrap{width:min(100% - 28px,1220px);}.header-inner{min-height:72px;}.brand img{width:54px;height:54px;}.main-nav{top:70px;left:14px;right:14px;}h1{font-size:clamp(2.55rem,13vw,4rem);}.hero{padding-top:12px;}.hero-actions{align-items:flex-start;flex-direction:column;gap:15px;}.quick-facts{grid-template-columns:1fr;}.quick-facts div,.quick-facts div+div{padding:12px 0;border-left:0;border-bottom:1px solid var(--line);}.quick-facts div:last-child{border-bottom:0;}.hero-visual{border-radius:22px;}.gingham-rule{margin-top:28px;}.experience-gallery{padding:60px 0 18px;}.gallery-heading{display:block;}.carousel-controls{margin-top:12px;}.carousel-track{gap:13px;padding-right:14px;}.carousel-card{flex-basis:82vw;border-radius:18px;}.steps{grid-template-columns:1fr;}.how-section{padding:72px 0 62px;}.how-section h2{font-size:clamp(2.35rem,11vw,3.45rem);}.how-intro{font-size:1rem;}.step{min-height:0;padding:26px 23px;}.step-number{display:grid;place-items:center;width:50px;height:34px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.42);color:#fff;font-weight:850;margin-bottom:28px;}.final-cta-inner{display:block;}.final-cta .button{margin-top:18px;}.footer-grid{grid-template-columns:1fr 1fr;gap:34px 24px;}.footer-brand{grid-column:1/-1;}.footer-grid>div:last-child{grid-column:auto;}.footer-bottom{margin-top:34px;}}

@media (max-width:650px){
  .home-page .how-section-background{object-position:center;}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;}.map-pin-pulse::after{animation:none!important;}}


/* ===== Gallery controls ===== */
.carousel-button{
  border-color:#2B9EB3;
  background:#2B9EB3;
  color:#fff;
  box-shadow:0 8px 20px rgba(43,158,179,.18);
}

.carousel-button:hover,
.carousel-button:focus-visible{
  border-color:var(--pink);
  background:var(--pink);
  color:#fff;
  box-shadow:0 10px 24px rgba(247,32,121,.22);
}

.gallery-heading{
  margin-bottom:10px;
}



/* ===== Need to Know + reusable location map ===== */
.need-to-know-section{
  padding:86px 0 96px;
  background:var(--soft);
}

.need-to-know-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  gap:64px;
  align-items:start;
}

.need-to-know-copy{
  min-width:0;
}

.need-to-know-copy>h2{
  margin-bottom:16px;
}

.need-to-know-lead{
  margin:0 0 28px;
  color:var(--muted);
  font-size:1.08rem;
}

.need-accordion{
  border-top:1px solid var(--line);
}

.need-item{
  border-bottom:1px solid var(--line);
}

.need-item h3{
  margin:0;
  font-family:inherit;
}

.need-item-toggle{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:0;
  padding:22px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--navy);
  box-shadow:none;
  font:inherit;
  font-size:1rem;
  font-weight:800;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
}

.need-item-toggle:hover{
  color:var(--navy);
}

.need-item-toggle:focus-visible{
  outline:3px solid rgba(247,32,121,.22);
  outline-offset:4px;
  border-radius:6px;
}

.need-item-symbol{
  flex:0 0 auto;
  display:inline-block;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--pink);
  font-family:Inter,Arial,sans-serif;
  font-size:1.45rem;
  font-weight:800;
  line-height:1;
}

.need-item.is-open .need-item-symbol{
  background:transparent;
  color:var(--pink);
}

.need-item-panel[hidden]{
  display:none;
}

.need-item-content{
  padding:0 48px 24px 0;
}

.need-item p{
  margin:0 0 13px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.72;
}

.need-item p:last-child{
  margin-bottom:0;
}

.need-item .holiday-list{
  color:var(--pink);
  font-weight:750;
}

.need-to-know-side{
  display:grid;
  gap:24px;
}

.voucher-flex-card,
.location-map-card{
  background:#fff;
  border:1px solid rgba(67,79,105,.14);
  border-radius:26px;
  box-shadow:0 14px 34px rgba(67,79,105,.10);
}

.voucher-flex-card{
  padding:28px;
}

.voucher-flex-card .eyebrow,
.location-map-heading .eyebrow{
  margin-bottom:8px;
}

.voucher-flex-card h3,
.location-map-heading h3{
  margin:0 0 10px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.7rem;
  font-weight:500;
}

.voucher-flex-intro,
.location-map-heading>p:last-child{
  margin:0;
  color:var(--muted);
  font-size:.96rem;
}

.voucher-benefits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.voucher-benefit{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:78px;
  padding:15px 14px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fff;
}

.voucher-benefit-icon{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(247,32,121,.08);
  color:var(--pink);
}

.voucher-benefit-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.voucher-benefit strong{
  color:var(--navy);
  font-size:.92rem;
  line-height:1.3;
}

.location-map-card{
  padding:26px;
}

.location-map-heading{
  text-align:center;
  margin-bottom:19px;
}

.location-map-wrap{
  position:relative;
  width:100%;
}

.location-map-wrap>img{
  display:block;
  width:100%;
  height:auto;
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(67,79,105,.08);
}


/* Shared Mystery Picnic map coordinates */
.map-pin--edinburgh{--map-x:56.2%;--map-y:35.8%;}
.map-pin--whitby{--map-x:76.3%;--map-y:52.9%;}
.map-pin--leeds{--map-x:68%;--map-y:59.6%;}
.map-pin--hebden-bridge{--map-x:65.1%;--map-y:60.1%;}
.map-pin--harrogate{--map-x:72%;--map-y:57.5%;}
.map-pin--york{--map-x:68.8%;--map-y:57.7%;}
.map-pin--manchester{--map-x:63.7%;--map-y:62.2%;}
.map-pin--liverpool{--map-x:58.2%;--map-y:63.7%;}
.map-pin--birmingham{--map-x:66.3%;--map-y:72.9%;}
.map-pin--ludlow{--map-x:60.2%;--map-y:73.8%;}
.map-pin--stratford{--map-x:66.9%;--map-y:76.4%;}
.map-pin--oxford{--map-x:71.4%;--map-y:81.1%;}
.map-pin--london{--map-x:79.7%;--map-y:83.4%;}
.map-pin--cotswolds{--map-x:63.5%;--map-y:81.8%;}
.map-pin--bristol{--map-x:60.6%;--map-y:84.6%;}
.map-pin--bath{--map-x:62.3%;--map-y:85.6%;}
.map-pin--canterbury{--map-x:89.5%;--map-y:86%;}
.map-pin--belfast{--map-x:35.7%;--map-y:50.2%;}
.map-pin--causeway-coast{--map-x:36.8%;--map-y:49.7%;}
.map-pin--dorking{--map-x:78.3%;--map-y:86.6%;}

.map-pin{
  --pin-size:28px;
  position:absolute;
  z-index:4;
  left:var(--map-x);
  top:var(--map-y);
  width:var(--pin-size);
  height:var(--pin-size);
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  text-decoration:none;
  border-radius:50%;
}

.map-pin:hover,
.map-pin:focus-visible{
  z-index:30;
}

.map-pin-pulse{
  position:relative;
  width:14px;
  height:14px;
  display:block;
  border-radius:50%;
  background:var(--pink);
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(67,79,105,.28);
}

.map-pin-pulse::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:2px solid rgba(247,32,121,.46);
  border-radius:50%;
  animation:map-pin-pulse 1.9s ease-out infinite;
}

.map-pin::after{
  content:attr(data-label);
  position:absolute;
  z-index:40;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translate(-50%,4px);
  width:max-content;
  max-width:220px;
  padding:8px 11px;
  border:1px solid rgba(67,79,105,.16);
  border-radius:10px;
  background:#fff;
  color:var(--navy-deep);
  font-size:.74rem;
  font-weight:400;
  line-height:1.25;
  text-align:center;
  box-shadow:0 9px 24px rgba(20,30,48,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}

.map-pin[data-tooltip="left"]::after{
  left:auto;
  right:calc(100% + 7px);
  bottom:50%;
  transform:translate(4px,50%);
}

.map-pin:hover::after,
.map-pin:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.map-pin[data-tooltip="left"]:hover::after,
.map-pin[data-tooltip="left"]:focus-visible::after{
  transform:translate(0,50%);
}

.map-pin:focus-visible{
  outline:3px solid rgba(247,32,121,.34);
  outline-offset:3px;
}


/* London, Bath, Dorking, Oxford and Canterbury use the higher-priced voucher tier. */
.map-pin--london-bath-price .map-pin-pulse{
  background:#2B9EB3;
}

.map-pin--london-bath-price .map-pin-pulse::after{
  border-color:rgba(43,158,179,.48);
}

.map-pin--london-bath-price:focus-visible{
  outline-color:rgba(43,158,179,.38);
}

/* Small shared key so the second marker colour explains something useful. */
.map-price-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 16px;
  margin:14px 2px 0;
  color:var(--muted);
  font-size:.72rem;
  font-weight:400;
  line-height:1.35;
  text-align:center;
}

.map-price-legend>span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.map-legend-dot{
  flex:0 0 9px;
  width:9px;
  height:9px;
  border-radius:50%;
  box-shadow:0 0 0 2px #fff,0 1px 5px rgba(67,79,105,.22);
}

.map-legend-dot-standard{
  background:var(--pink);
}

.map-legend-dot-london-bath{
  background:#2B9EB3;
}

@keyframes map-pin-pulse{
  0%{transform:scale(.72);opacity:.8}
  70%,100%{transform:scale(1.45);opacity:0}
}

@media (max-width:1050px){
  .need-to-know-grid{
    grid-template-columns:minmax(0,1fr) minmax(320px,.82fr);
    gap:38px;
  }
}

@media (max-width:760px){
  .need-to-know-grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .need-to-know-side{
    grid-template-columns:1fr;
  }

  .location-map-card{
    width:min(100%,620px);
    margin-inline:auto;
  }
}

@media (max-width:650px){
  

  .gallery-disclaimer{
    margin-bottom:22px;
    
  }

  .need-item-toggle{
    gap:14px;
    
    
  }

  .need-item-symbol{
    flex-basis:31px;
    width:31px;
    height:31px;
  }

  

  .need-to-know-section{
    padding:64px 0 72px;
  }

  .voucher-flex-card,
  .location-map-card{
    padding:22px;
    border-radius:21px;
  }

  .voucher-benefits{
    gap:9px;
  }

  .voucher-benefit{
    min-height:70px;
    padding:12px 10px;
  }

  .voucher-benefit-icon{
    flex-basis:34px;
    width:34px;
    height:34px;
  }

  .voucher-benefit strong{
    font-size:.84rem;
  }
}

@media (hover:none){
  .map-pin::after{
    display:none;
  }
}


/* ===== Reusable five-layer hero deck =====
   The tartan card is a permanent backing layer. The fan is visible while
   the cards are resting; each individual photo keeps its own angle during
   the shuffle so the movement itself does not "tip" back and forth. */
.hero-visual.hero-photo-stack{
  --hero-back-x:11px;
  --hero-back-y:8px;
  --hero-third-x:22px;
  --hero-third-y:13px;
  --hero-fourth-x:33px;
  --hero-fourth-y:19px;
  --hero-tartan-x:45px;
  --hero-tartan-y:27px;
  --hero-tartan-offset:48px;
  position:relative;
  width:100%;
  aspect-ratio:11/13;
  padding:0 var(--hero-tartan-offset) var(--hero-tartan-offset) 0;
  overflow:visible;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.hero-photo-card{
  position:absolute;
  inset:0 var(--hero-tartan-offset) var(--hero-tartan-offset) 0;
  margin:0;
  overflow:hidden;
  border:5px solid #fff;
  border-radius:32px;
  background:#fff;
  backface-visibility:hidden;
  transform-origin:center;
}

.hero-photo-card[data-hero-photo]{
  --card-rotate:0deg;
}

.hero-photo-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-photo-backdrop{
  z-index:1;
  transform:translate(var(--hero-tartan-x),var(--hero-tartan-y)) rotate(2.6deg) scale(.964);
  box-shadow:0 12px 30px rgba(67,79,105,.14);
  pointer-events:none;
  border-color:#fff;
}

/* Keep the tartan layer subtle: mostly its edge, with only a hint of
   the pink logo curve showing through the revealed sliver. */
.hero-photo-backdrop img{
  object-position:78% 50%;
  transform:scale(1.12);
}

.hero-photo-card.is-front{
  z-index:5;
  transform:translate(0,0) rotate(var(--card-rotate)) scale(1);
  box-shadow:0 18px 42px rgba(67,79,105,.18);
}

.hero-photo-card.is-back{
  z-index:4;
  transform:translate(var(--hero-back-x),var(--hero-back-y)) rotate(var(--card-rotate)) scale(.992);
  box-shadow:0 15px 36px rgba(67,79,105,.16);
}

.hero-photo-card.is-third{
  z-index:3;
  transform:translate(var(--hero-third-x),var(--hero-third-y)) rotate(var(--card-rotate)) scale(.984);
  box-shadow:0 14px 34px rgba(67,79,105,.15);
}

.hero-photo-card.is-fourth{
  z-index:2;
  transform:translate(var(--hero-fourth-x),var(--hero-fourth-y)) rotate(var(--card-rotate)) scale(.976);
  box-shadow:0 13px 32px rgba(67,79,105,.14);
}

.hero-photo-stack.is-shuffling .hero-photo-card{
  pointer-events:none;
}

@media (max-width:950px){
  .hero-visual.hero-photo-stack{
    --hero-back-x:9px;
    --hero-back-y:7px;
    --hero-third-x:18px;
    --hero-third-y:12px;
    --hero-fourth-x:28px;
    --hero-fourth-y:17px;
    --hero-tartan-x:38px;
    --hero-tartan-y:24px;
    --hero-tartan-offset:41px;
    width:min(680px,100%);
  }
}

@media (max-width:650px){
  .hero-visual.hero-photo-stack{
    --hero-back-x:6px;
    --hero-back-y:6px;
    --hero-third-x:12px;
    --hero-third-y:10px;
    --hero-fourth-x:19px;
    --hero-fourth-y:14px;
    --hero-tartan-x:27px;
    --hero-tartan-y:20px;
    --hero-tartan-offset:30px;
    width:100%;
  }

  .hero-photo-card{
    border-width:4px;
    border-radius:22px;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-photo-card{
    animation:none!important;
    transition:none!important;
  }
}




/* ===== Automatic How It Works progression ===== */
.step.is-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 20px 46px rgba(15,23,38,.18),
    0 0 24px rgba(247,32,121,.10);
}

@media (prefers-reduced-motion:reduce){
  .step.is-active{
    transform:none;
  }
}


/* ===== Final spacing and CTA corrections ===== */


.gallery-disclaimer{
  max-width:900px;
  
  color:var(--muted);
  
  
}

.final-cta .final-cta-button{
  background:#FFE916;
  border-color:#FFE916;
  color:var(--navy);
  box-shadow:0 9px 24px rgba(255,233,22,.20);
}

.final-cta .final-cta-button:hover,
.final-cta .final-cta-button:focus-visible{
  background:#f1dc00;
  border-color:#f1dc00;
  color:var(--navy);
  box-shadow:0 12px 28px rgba(255,233,22,.25);
}

@media (max-width:650px){
  

  

  .need-item-toggle{
    padding:20px 0;
    font-size:.98rem;
  }

  .need-item-content{
    padding:0 0 22px;
  }
}


/* ===== End-of-day section order refinements ===== */


.experience-gallery{
  padding-top:82px;
}



@media (max-width:650px){
  

  .experience-gallery{
    padding-top:60px;
  }

  
}


/* ===== Gallery disclaimer refinement ===== */
.gallery-disclaimer{
  margin:6px 0 0;
  font-size:.76rem;
  line-height:1.45;
}

@media (max-width:650px){
  .gallery-disclaimer{
    margin-top:5px;
    font-size:.74rem;
  }
}


/* ===== Final section spacing/order refinements ===== */
.need-to-know-section{
  padding-top:75px;
}

@media (max-width:650px){
  .need-to-know-section{
    padding-top:52px;
  }
}


/* ===== Keep gallery disclaimer on one line ===== */
.gallery-disclaimer{
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}

.gallery-disclaimer::-webkit-scrollbar{
  display:none;
}


/* ===== Hero stack: user-controlled reveal ===== */
.hero-photo-stack[data-hero-photo-shuffle]{
  cursor:pointer;
}

.hero-photo-stack[data-hero-photo-shuffle]:focus-visible{
  outline:3px solid rgba(247,32,121,.34);
  outline-offset:8px;
  border-radius:32px;
}

.hero-photo-stack[data-hero-photo-shuffle].is-shuffling{
  cursor:default;
}

/* ===== Mystery Picnic homepage ===== */
.home-hero{padding:62px 0 74px;background:linear-gradient(180deg,#fff 0%,#fff 70%,#fbfbfd 100%);}



.home-hero-lead{max-width:700px;font-size:clamp(1.12rem,1.8vw,1.34rem);color:var(--muted);line-height:1.72;}
.home-hero-actions{display:flex;align-items:center;gap:24px;margin:30px 0 38px;}













.home-people-section{padding:92px 0 104px;}
.home-section-heading{max-width:820px;margin:0 auto 42px;}
.home-people-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.home-person-card{display:flex;flex-direction:column;min-height:285px;padding:28px 25px;border:1px solid var(--line);border-radius:22px;background:#fff;text-decoration:none;box-shadow:0 12px 30px rgba(67,79,105,.08);transition:.2s ease;}
.home-person-card:hover{transform:translateY(-4px);border-color:rgba(43,158,179,.42);box-shadow:0 18px 38px rgba(67,79,105,.12);}
.home-person-icon{display:grid;place-items:center;font-weight:900;font-size:1.18rem;}
.home-person-icon-teal{background:rgba(43,158,179,.10);}
.home-person-card h3{font-family:Georgia,"Times New Roman",serif;font-size:1.5rem;font-weight:500;}
.home-person-card p{color:var(--muted);font-size:.95rem;}
.home-card-link{margin-top:auto;color:var(--navy);font-size:.86rem;font-weight:800;}









.home-locations-section{padding:110px 0;}
.home-locations-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.8fr);gap:70px;align-items:center;}
.home-location-copy>.lead{max-width:720px;}
.home-featured-locations{display:grid;gap:10px;margin:32px 0;}
.home-featured-locations a{display:flex;justify-content:space-between;gap:28px;padding:17px 0;border-bottom:1px solid var(--line);text-decoration:none;}
.home-featured-locations strong{color:var(--navy);}
.home-featured-locations span{color:var(--muted);font-size:.9rem;text-align:right;}
.home-featured-locations a:hover strong{color:var(--pink);}
.home-map-card{padding:28px;border:1px solid rgba(67,79,105,.12);border-radius:28px;background:#fff;box-shadow:var(--shadow);}
.home-map-heading{margin-bottom:20px;}
.home-map-heading h3{font-family:Georgia,"Times New Roman",serif;font-size:1.8rem;font-weight:500;}







.home-premium-section{padding:10px 0 104px;}
.home-premium-card{display:flex;align-items:center;justify-content:space-between;gap:45px;padding:48px 52px;border-radius:28px;background:linear-gradient(135deg,#fffbe5,#fff);border:1px solid rgba(255,233,22,.58);box-shadow:0 16px 38px rgba(67,79,105,.08);}
.home-premium-card>div{max-width:760px;}
.home-premium-card h2{margin-bottom:12px;}
.home-premium-card p:last-child{margin-bottom:0;color:var(--muted);}
.home-voucher-section{padding:88px 0;background:var(--soft);}
.home-voucher-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.home-voucher-grid>div{padding:22px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;}
.home-voucher-benefit{display:flex;align-items:center;gap:14px;text-align:left;}
.home-voucher-benefit .voucher-benefit-icon{flex:0 0 42px;width:42px;height:42px;}
.home-voucher-copy{min-width:0;}
.home-voucher-grid strong{display:block;color:var(--navy);margin-bottom:4px;}
.home-voucher-grid .home-voucher-copy>span{display:block;color:var(--muted);font-size:.85rem;line-height:1.45;}


@media (max-width:1050px){
  .home-locations-grid{grid-template-columns:1fr;gap:42px;}
  
  .home-people-grid{grid-template-columns:repeat(2,1fr);}
  
  .home-voucher-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:650px){
  .home-hero{padding:34px 0 50px;}
  .home-hero-actions{align-items:flex-start;flex-direction:column;gap:14px;margin:24px 0 28px;}
  
  
  
  
  
  
  
  .home-people-section{padding:68px 0;}
  .home-people-grid,.home-voucher-grid{grid-template-columns:1fr;}
  .home-person-card{min-height:0;}
  
  
  .home-locations-section{padding:72px 0;}
  .home-featured-locations a{display:block;}
  .home-featured-locations span{display:block;margin-top:3px;text-align:left;}
  .home-map-card{padding:20px;}
  .home-premium-section{padding:0 0 68px;}
  .home-premium-card{display:block;padding:32px 26px;}
  .home-premium-card .button{margin-top:22px;}
  .home-voucher-section{padding:68px 0;}
}


/* ===== Homepage revision 2 ===== */


.home-person-card{
  appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.home-person-icon{width:72px;height:58px;background:transparent;border-radius:0;margin-bottom:16px;color:#F72079;}
.home-person-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.home-person-icon .art-fill{fill:currentColor;stroke:none;}
.home-person-icon-pink{color:#F72079;}
.home-person-icon-teal{color:#2f9eb0;}
.home-person-icon-family{color:#e48a00;}

.home-options-section{
  scroll-margin-top:92px;
  padding:86px 0 96px;
  background-color:#eef8fa;
  background-image:
    repeating-linear-gradient(90deg,rgba(43,158,179,.16) 0 42px,rgba(67,79,105,.035) 42px 84px),
    repeating-linear-gradient(0deg,rgba(43,158,179,.12) 0 42px,rgba(255,255,255,.10) 42px 84px),
    repeating-linear-gradient(135deg,rgba(43,158,179,.055) 0 2px,transparent 2px 6px);
}
.home-options-heading{max-width:820px;margin:0 auto 38px;}
.home-options-heading h2{margin-bottom:12px;}
.home-options-heading>p:last-child{margin:0;color:var(--muted);}
.home-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;}
.home-product-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:29px 27px 25px;background:#fff;border:1.5px solid rgba(67,79,105,.24);border-radius:24px;box-shadow:0 12px 30px rgba(67,79,105,.12);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;}
.home-product-card::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:4px;border-radius:0 0 999px 999px;background:transparent;transition:.22s ease;}

.home-product-card.is-selected::before{background:#2B9EB3;box-shadow:0 2px 10px rgba(43,158,179,.28);}
.home-product-card h3{font-family:Georgia,"Times New Roman",serif;font-size:1.62rem;font-weight:500;margin-bottom:10px;}
.home-product-card .product-desc{min-height:76px;}
.home-product-card .button{margin-top:auto;}
.home-product-icon{position:absolute;top:24px;right:24px;width:54px;height:54px;border-radius:16px;border:1px solid rgba(67,79,105,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);background-color:rgba(255,255,255,.92);}
.home-product-icon-classic{background-image:radial-gradient(circle at 32% 28%,#F72079 0 4px,transparent 4.5px),radial-gradient(circle at 68% 28%,#2B9EB3 0 4px,transparent 4.5px),radial-gradient(ellipse 18% 14% at 32% 58%,#F72079 0 99%,transparent 100%),radial-gradient(ellipse 18% 14% at 68% 58%,#2B9EB3 0 99%,transparent 100%),linear-gradient(135deg,rgba(247,32,121,.12),rgba(43,158,179,.10));}
.home-product-icon-family{background-image:radial-gradient(circle at 31% 23%,#F72079 0 4px,transparent 4.5px),radial-gradient(circle at 69% 23%,#2B9EB3 0 4px,transparent 4.5px),radial-gradient(circle at 40% 56%,#F72079 0 3.4px,transparent 4px),radial-gradient(circle at 60% 56%,#2B9EB3 0 3.4px,transparent 4px),radial-gradient(ellipse 16% 12% at 31% 48%,#F72079 0 99%,transparent 100%),radial-gradient(ellipse 16% 12% at 69% 48%,#2B9EB3 0 99%,transparent 100%),radial-gradient(ellipse 12% 10% at 40% 75%,#F72079 0 99%,transparent 100%),radial-gradient(ellipse 12% 10% at 60% 75%,#2B9EB3 0 99%,transparent 100%),linear-gradient(135deg,rgba(43,158,179,.11),rgba(247,32,121,.08));}
.home-product-icon-premium{background-color:#FFE916;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23434F69' d='M13 42 9 18l14 10 9-17 9 17 14-10-4 24H13Zm3 5h32l-3 7H19l-3-7Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:58%;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(255,233,22,.22);}

.home-locations-section{background:#fff;}
.home-location-copy h2{font-size:clamp(2rem,3.3vw,3.15rem);max-width:650px;text-wrap:balance;}
.home-map-heading p:last-child{margin:0;color:var(--muted);font-size:.92rem;}
.home-map-card .location-map-wrap{max-width:560px;margin-inline:auto;}

.home-how-reuse{margin:0;}




.home-premium-card button{white-space:nowrap;}

@media (max-width:950px){
  .home-product-grid{grid-template-columns:1fr;}
  .home-product-card .product-desc{min-height:0;}
}
@media (max-width:650px){
  .home-options-section{padding:68px 0 74px;}
  .home-product-card{padding:25px 22px 22px;}
  .home-product-icon{top:20px;right:20px;}
  .home-location-copy h2{font-size:clamp(2rem,10vw,2.75rem);}
  
}


/* ===== Homepage selected-price state ===== */
.home-product-card.is-selected{
  z-index:2;
  border-color:rgba(43,158,179,.72);
  box-shadow:0 24px 52px rgba(43,158,179,.23),0 14px 34px rgba(67,79,105,.15);
  transform:translateY(-5px) scale(1.018);
}
.home-product-card.is-selected .button{
  background:#2B9EB3;
  border-color:#2B9EB3;
  box-shadow:0 10px 24px rgba(43,158,179,.24);
}
.home-product-card.is-selected .button:hover,.home-product-card.is-selected .button:focus-visible{
  background:#238da0;
  border-color:#238da0;
}
.home-product-card.is-popping{animation:homePricePop .58s cubic-bezier(.2,.78,.25,1);}
@keyframes homePricePop{
  0%{transform:translateY(-5px) scale(1.018)}
  44%{transform:translateY(-10px) scale(1.065)}
  72%{transform:translateY(-4px) scale(1.008)}
  100%{transform:translateY(-5px) scale(1.018)}
}

@media (max-width:950px){
  .home-product-card.is-selected{transform:translateY(-3px) scale(1.012);}
  @keyframes homePricePop{0%{transform:translateY(-3px) scale(1.012)}44%{transform:translateY(-7px) scale(1.04)}72%{transform:translateY(-2px) scale(1.005)}100%{transform:translateY(-3px) scale(1.012)}}
}
@media (prefers-reduced-motion:reduce){
  .choice-burst{display:none;}
  .home-product-card.is-popping{animation:none;}
}

/* ===== Homepage pricing: keep only the divider between multiple price rows ===== */
.home-product-card[data-option-card="classic"] .product-price-row:last-child,
.home-product-card[data-option-card="family"] .product-price-row:last-child{
  border-bottom:0;
}


/* ===== Homepage expandable why section ===== */









/* ========================================================================
   Shared voucher-page layout
   Scoped beneath .voucher-page so location/homepage styling is untouched.
   ======================================================================== */

.voucher-page{
  overflow:hidden;
}

.romantic-sales-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:76px 0 82px;
  background:
    radial-gradient(circle at 18% 22%,rgba(247,32,121,.18),transparent 29%),
    radial-gradient(circle at 88% 16%,rgba(43,158,179,.16),transparent 25%),
    linear-gradient(135deg,#26334d 0%,#434F69 58%,#344057 100%);
  color:#fff;
}

.romantic-sales-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:460px;
  height:460px;
  left:-210px;
  bottom:-275px;
  border:62px solid rgba(247,32,121,.18);
  border-radius:50%;
}

.romantic-sales-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-70px;
  top:-70px;
  width:290px;
  height:290px;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:30px 30px;
  transform:rotate(8deg);
}

.romantic-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(560px,1.22fr);
  gap:58px;
  align-items:center;
}

.romantic-hero-copy{
  position:relative;
  z-index:3;
  padding:18px 0;
}

.romantic-sales-hero .eyebrow{
  color:#fff;
  opacity:.86;
}

.romantic-sales-hero h1{
  max-width:650px;
  color:#fff;
  font-size:clamp(3rem,5.7vw,5.7rem);
  margin-bottom:23px;
}

.romantic-sales-hero h1 span{
  color:#F72079;
}

.romantic-hero-lead{
  max-width:620px;
  margin:0;
  color:rgba(255,255,255,.88);
  font-size:clamp(1.08rem,1.65vw,1.27rem);
  line-height:1.72;
}

.romantic-hero-actions{
  display:flex;
  align-items:center;
  gap:24px;
  margin:31px 0 35px;
}

.romantic-hero-actions .button{
  box-shadow:0 12px 28px rgba(247,32,121,.28);
}

.romantic-hero-link{
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

.romantic-hero-link:hover,
.romantic-hero-link:focus-visible{
  color:#FFE916;
}

.romantic-hero-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:650px;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
}

.romantic-hero-facts>div{
  padding:15px 20px 15px 0;
}

.romantic-hero-facts>div+div{
  padding-left:20px;
  border-left:1px solid rgba(255,255,255,.18);
}

.romantic-hero-facts strong{
  display:block;
  color:#fff;
  font-size:.96rem;
}

.romantic-hero-facts span{
  display:block;
  color:rgba(255,255,255,.68);
  font-size:.77rem;
}

.romantic-hero-media{
  position:relative;
  z-index:2;
  margin:0;
}

.romantic-hero-media::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:26px -23px -25px 42px;
  border-radius:34px;
  background:
    linear-gradient(90deg,rgba(247,32,121,.35) 0 14%,transparent 14% 29%,rgba(255,255,255,.06) 29% 43%,transparent 43% 100%),
    linear-gradient(rgba(247,32,121,.35) 0 14%,transparent 14% 29%,rgba(255,255,255,.06) 29% 43%,transparent 43% 100%),
    #F72079;
  background-size:54px 54px;
  transform:rotate(2.1deg);
}

.romantic-hero-media img{
  width:100%;
  aspect-ratio:1408/741;
  object-fit:cover;
  border:6px solid #fff;
  border-radius:32px;
  box-shadow:0 28px 66px rgba(12,20,36,.34);
}

.romantic-hero-note{
  position:absolute;
  left:26px;
  bottom:-24px;
  max-width:310px;
  padding:15px 18px;
  border-radius:16px;
  background:#fff;
  color:var(--navy);
  box-shadow:0 16px 34px rgba(20,28,43,.18);
  font-size:.9rem;
  font-weight:750;
  line-height:1.42;
}

.romantic-hero-note span{
  color:var(--pink);
}

/* Intro / proposition */
.romantic-intro-section{
  padding:108px 0 96px;
  background:#fff;
}

.romantic-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:82px;
  align-items:start;
}

.romantic-intro-heading{
  position:sticky;
  top:120px;
}

.romantic-intro-heading h2{
  max-width:540px;
}

.romantic-intro-heading .lead{
  max-width:520px;
}

.romantic-story-copy{
  max-width:760px;
}

.romantic-story-copy>p{
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.78;
}


/* Buying options */
.romantic-options-section{
  scroll-margin-top:95px;
  padding:92px 0 102px;
  background:
    linear-gradient(180deg,#fff5f9 0%,#fff 100%);
}

.romantic-options-heading{
  max-width:820px;
  margin:0 auto 40px;
}

.romantic-options-heading>p:last-child{
  color:var(--muted);
}

.romantic-options-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  max-width:1120px;
  margin-inline:auto;
}

.romantic-option-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:34px 31px 29px;
  border:1.5px solid rgba(67,79,105,.20);
  border-radius:26px;
  background:#fff;
  box-shadow:0 16px 38px rgba(67,79,105,.10);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.romantic-option-card::before{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  top:-1px;
  height:4px;
  border-radius:0 0 999px 999px;
  background:var(--pink);
  transition:background-color .2s ease,box-shadow .2s ease;
}

.romantic-option-card:hover::before,
.romantic-option-card:focus-within::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.28);
}

.romantic-option-card:hover,
.romantic-option-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(247,32,121,.44);
  box-shadow:0 22px 48px rgba(247,32,121,.12),0 16px 36px rgba(67,79,105,.10);
}

.romantic-option-card-premium{
  border-color:rgba(43,158,179,.36);
}

.romantic-option-card-premium::before{
  background:#FFE916;
  box-shadow:0 2px 10px rgba(255,233,22,.28);
}

.romantic-option-badge{
  align-self:flex-start;
  margin-bottom:18px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(247,32,121,.08);
  color:var(--pink);
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.romantic-option-card-premium .romantic-option-badge{
  background:#FFE916;
  color:var(--navy);
}

.romantic-option-card-location{
  border-color:rgba(247,32,121,.24);
}

.romantic-option-card-location::before{
  background:var(--pink);
}

.romantic-option-card-location .romantic-option-badge{
  background:rgba(247,32,121,.08);
  color:var(--pink);
}

.romantic-option-locations{
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.88rem;
  line-height:1.55;
}

.romantic-option-locations strong{
  color:var(--navy);
}

.romantic-option-price-list{
  margin:18px 0 24px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.romantic-option-price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:13px 0;
}

.romantic-option-price-row + .romantic-option-price-row{
  border-top:1px solid var(--line);
}

.romantic-option-price-row span{
  color:var(--muted);
  font-size:.92rem;
}

.romantic-option-price-row strong{
  color:var(--navy);
  font-size:1.35rem;
  white-space:nowrap;
}

.romantic-option-card-premium .button{
  background:#FFE916;
  border-color:#FFE916;
  color:var(--navy);
  box-shadow:0 9px 24px rgba(255,233,22,.20);
}

.romantic-option-card:hover .button,
.romantic-option-card:focus-within .button,
.romantic-option-card .button:hover,
.romantic-option-card .button:focus-visible{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
  box-shadow:0 10px 24px rgba(43,158,179,.24);
}

.romantic-option-card h3{
  margin-bottom:10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.7rem,2.4vw,2.1rem);
  font-weight:500;
}

.romantic-option-card>p{
  color:var(--muted);
}

.romantic-option-price{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin:18px 0 24px;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.romantic-option-price span{
  color:var(--muted);
}

.romantic-option-price strong{
  color:var(--navy);
  font-size:1.45rem;
}

.romantic-option-card .button{
  margin-top:auto;
}

/* Occasion / photo cards */
.romantic-occasions-section{
  padding:104px 0;
  background:#fff;
}

.romantic-occasions-heading{
  max-width:800px;
  margin:0 auto 42px;
}

.romantic-occasion-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:21px;
}

.romantic-occasion-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 13px 34px rgba(67,79,105,.09);
  transition:transform .2s ease,box-shadow .2s ease;
}

.romantic-occasion-card:hover,
.romantic-occasion-card:focus-within{
  transform:translateY(-4px);
  box-shadow:0 19px 42px rgba(67,79,105,.13);
}

.romantic-occasion-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

.romantic-occasion-card>div{
  padding:24px 23px 26px;
}

.romantic-occasion-card h3{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.48rem;
  font-weight:500;
}

.romantic-occasion-card p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
}

/* Locations */
.romantic-locations-section{
  padding:106px 0;
  background:var(--soft);
}

.romantic-locations-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,.78fr);
  gap:70px;
  align-items:center;
}

.romantic-location-copy .lead{
  max-width:700px;
}

.romantic-location-list{
  display:grid;
  gap:0;
  margin:31px 0 30px;
  border-top:1px solid var(--line);
}

.romantic-location-list a{
  display:flex;
  justify-content:space-between;
  gap:28px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
}

.romantic-location-list strong{
  color:var(--navy);
}

.romantic-location-list span{
  color:var(--muted);
  font-size:.9rem;
  text-align:right;
}

.romantic-location-list a:hover strong{
  color:var(--pink);
}

.romantic-locations-map .location-map-card{
  margin:0;
}

/* Voucher reassurance */
.romantic-voucher-section{
  padding:88px 0;
  background:#fff;
}

.romantic-voucher-heading{
  max-width:760px;
  margin:0 auto 36px;
}

.voucher-page .home-voucher-grid{
  margin-top:0;
}

/* FAQ */
.romantic-faq-section{
  padding:96px 0;
  background:var(--soft);
}

.romantic-faq-intro p:last-child{
  color:var(--muted);
}

.voucher-page .faq-list details:first-child{
  border-top:1px solid var(--line);
}

/* Final CTA */
.romantic-final-cta{
  background:
    linear-gradient(120deg,#26334d 0%,#434F69 72%);
}

.romantic-final-cta .eyebrow{
  color:#F72079;
}

@media (max-width:1080px){
  .romantic-hero-grid{
    grid-template-columns:minmax(0,.8fr) minmax(470px,1.2fr);
    gap:38px;
  }

  .romantic-intro-grid{
    gap:50px;
  }

  .romantic-locations-grid{
    gap:44px;
  }
}

@media (max-width:900px){
  .romantic-sales-hero{
    padding:56px 0 76px;
  }

  .romantic-hero-grid,
  .romantic-intro-grid,
  .romantic-locations-grid{
    grid-template-columns:1fr;
  }

  .romantic-hero-copy{
    max-width:760px;
  }

  .romantic-hero-media{
    width:min(820px,100%);
    margin-inline:auto;
  }

  .romantic-intro-heading{
    position:static;
  }


  .romantic-locations-map{
    width:min(620px,100%);
    margin-inline:auto;
  }
}

@media (max-width:700px){
  .voucher-page .romantic-options-grid{
    grid-template-columns:1fr;
    max-width:560px;
  }

  .romantic-sales-hero{
    padding:42px 0 66px;
  }

  .romantic-hero-actions{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    margin:25px 0 28px;
  }

  .romantic-hero-facts{
    grid-template-columns:1fr;
  }

  .romantic-hero-facts>div,
  .romantic-hero-facts>div+div{
    padding:11px 0;
    border-left:0;
    border-bottom:1px solid rgba(255,255,255,.16);
  }

  .romantic-hero-facts>div:last-child{
    border-bottom:0;
  }

  .romantic-hero-media img{
    min-height:300px;
    border-width:4px;
    border-radius:22px;
  }

  .romantic-hero-media::before{
    inset:18px -12px -18px 20px;
    border-radius:24px;
  }

  .romantic-hero-note{
    position:relative;
    left:auto;
    bottom:auto;
    max-width:none;
    margin:-16px 18px 0;
  }

  .romantic-intro-section,
  .romantic-options-section,
  .romantic-occasions-section,
  .romantic-locations-section,
  .romantic-faq-section{
    padding:68px 0;
  }

  .romantic-options-grid,
  .romantic-occasion-grid{
    grid-template-columns:1fr;
  }

  .romantic-option-card{
    padding:28px 24px 24px;
  }

  .romantic-location-list a{
    display:block;
  }

  .romantic-location-list span{
    display:block;
    margin-top:3px;
    text-align:left;
  }

  .romantic-voucher-section{
    padding:68px 0;
  }
}

/* ========================================================================
   Homepage dark hero treatment — match Romantic Picnics visual style
   White shared header remains untouched.
   ======================================================================== */

.home-page .home-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:62px 0 74px;
  background:#434F69;
  color:#fff;
}

/* Very restrained decorative depth, using only existing brand colours. */
.home-page .home-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:420px;
  height:420px;
  left:-220px;
  bottom:-250px;
  border:58px solid rgba(247,32,121,.12);
  border-radius:50%;
}

.home-page .home-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-80px;
  top:-90px;
  width:320px;
  height:320px;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:30px 30px;
  transform:rotate(8deg);
}

/* Hero typography */
.home-page .home-hero .eyebrow{
  color:#fff;
  opacity:.86;
}

.home-page .home-hero h1{
  color:#fff;
}

.home-page .home-hero h1 span{
  color:#F72079;
}

.home-page .home-hero-lead{
  color:rgba(255,255,255,.88);
}

.home-page .home-hero .text-link{
  color:#fff;
}

.home-page .home-hero .text-link:hover,
.home-page .home-hero .text-link:focus-visible{
  color:#FFE916;
}

/* Quick facts become part of the dark hero, like Romantic Picnics. */








/* Keep the existing collage, but let it sit more naturally on dark blue. */




/* Mobile duplicate collage is only shown in the position directly below H1. */


@media (max-width:650px){
  .home-page .home-hero{
    padding:34px 0 50px;
  }

  

  

  
}

/* ========================================================================
   Homepage visual hero + "What is a Mystery Picnic?" — 20 Aug 2026
   ======================================================================== */

.home-page .home-hero.home-hero-visual{
  position:relative;
  isolation:isolate;
  
  
  overflow:hidden;
  
  color:#fff;
}

.home-hero-panels{
  position:absolute;
  inset:0;
  z-index:-3;
  display:grid;
  grid-template-columns:.88fr 1.34fr .94fr;
  gap:0;
}

.home-hero-panel{
  min-width:0;
  overflow:hidden;
}

.home-hero-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.home-hero-panel:first-child img{
  object-position:center 48%;
}

.home-hero-panel-wide img{
  object-position:center 56%;
}

.home-hero-panel:last-child img{
  object-position:center 50%;
}

.home-hero-filter{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,
      rgba(38,51,77,.92) 0%,
      rgba(38,51,77,.84) 28%,
      rgba(38,51,77,.62) 54%,
      rgba(38,51,77,.42) 76%,
      rgba(38,51,77,.34) 100%),
    linear-gradient(0deg,rgba(20,28,43,.18),rgba(20,28,43,.18));
}

.home-hero-content{
  min-height:640px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-top:76px;
  padding-bottom:76px;
}

.home-page .home-hero-content .eyebrow{
  margin-bottom:15px;
  color:#fff;
  opacity:.92;
  text-shadow:0 2px 12px rgba(17,24,38,.25);
}

.home-page .home-hero-content h1{
  max-width:720px;
  margin-bottom:22px;
  color:#fff;
  font-size:clamp(4rem,8vw,7.2rem);
  line-height:.92;
  text-shadow:0 3px 20px rgba(17,24,38,.20);
}

.home-page .home-hero-content h1 span{
  color:#F72079;
}

.home-page .home-hero-content .home-hero-lead{
  max-width:640px;
  margin:0;
  color:rgba(255,255,255,.94);
  font-size:clamp(1.08rem,1.55vw,1.27rem);
  line-height:1.72;
  text-shadow:0 2px 14px rgba(17,24,38,.28);
}

.home-page .home-hero-content .home-hero-actions{
  margin:30px 0 0;
}

.home-hero-secondary{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  text-shadow:0 2px 12px rgba(17,24,38,.28);
}

.home-hero-secondary:hover,
.home-hero-secondary:focus-visible{
  color:#FFE916;
}

.home-hero-rule{
  margin-top:0;
  height:11px;
  background:
    linear-gradient(90deg,
      #434F69 0 18px,
      #fff 18px 36px,
      #2B9EB3 36px 54px,
      #fff 54px 72px) 0 0/72px 11px;
  opacity:1;
}

.home-what-section{
  padding:92px 0 88px;
  background:#fff;
}

.home-what-grid{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:74px;
  align-items:start;
}

.home-what-heading{
  position:sticky;
  top:118px;
}

.home-what-heading h2{
  max-width:480px;
}

.home-what-heading .lead{
  max-width:500px;
  margin-bottom:0;
  line-height:1.72;
}

.home-what-cards{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}

.home-what-card{
  padding:30px 0 32px;
  border-bottom:1px solid var(--line);
}

.home-what-card .story-kicker{
  margin-bottom:8px;
}

.home-what-card h3{
  margin:0 0 12px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.55rem,2vw,1.95rem);
  font-weight:500;
  line-height:1.16;
}

.home-what-card p:last-child{
  max-width:790px;
  margin:0;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.75;
}

@media (max-width:900px){
  

  .home-hero-content{
    min-height:600px;
  }

  .home-hero-panels{
    grid-template-columns:1fr 1fr;
  }

  .home-hero-panel:last-child{
    display:none;
  }

  .home-hero-filter{
    background:
      linear-gradient(90deg,
        rgba(38,51,77,.92) 0%,
        rgba(38,51,77,.80) 48%,
        rgba(38,51,77,.55) 100%),
      linear-gradient(0deg,rgba(20,28,43,.16),rgba(20,28,43,.16));
  }

  .home-what-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .home-what-heading{
    position:static;
    max-width:760px;
  }
}

@media (max-width:650px){
  

  .home-hero-content{
    min-height:620px;
    justify-content:flex-end;
    padding-top:64px;
    padding-bottom:58px;
  }

  .home-hero-panels{
    grid-template-columns:1fr;
  }

  .home-hero-panel{
    display:none;
  }

  .home-hero-panel:first-child{
    display:block;
  }

  .home-hero-panel:first-child img{
    object-position:center 45%;
  }

  .home-hero-filter{
    background:
      linear-gradient(0deg,
        rgba(38,51,77,.96) 0%,
        rgba(38,51,77,.88) 45%,
        rgba(38,51,77,.52) 76%,
        rgba(38,51,77,.30) 100%);
  }

  .home-page .home-hero-content h1{
    font-size:clamp(3.6rem,18vw,5.4rem);
  }

  .home-page .home-hero-content .home-hero-actions{
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
  }

  .home-what-section{
    padding:66px 0 60px;
  }

  .home-what-card{
    padding:25px 0 27px;
  }

  .home-what-card p:last-child{
    font-size:1rem;
  }
}

/* ========================================================================
   Homepage polish after content restructure — 20 Aug 2026
   ======================================================================== */

/* Distinct explanatory/reason sections rather than reusing home-what styles. */
.home-reason-section{
  padding:86px 0 92px;
  background:#fff;
}

.home-reason-grid{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:74px;
  align-items:center;
}

.home-reason-heading h2{
  max-width:500px;
}

.home-reason-heading .lead{
  max-width:500px;
  margin-bottom:0;
  line-height:1.72;
}

.home-reason-card{
  padding:34px 36px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(135deg,#fff 0%,#fbfbfd 100%);
  box-shadow:0 14px 34px rgba(67,79,105,.08);
}

.home-reason-card h3{
  margin:0 0 13px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.65rem,2.2vw,2.05rem);
  font-weight:500;
}

.home-reason-card p:last-child{
  margin:0;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.76;
}

/* People section: wider 2 x 2 cards on desktop. */
.home-people-feature{
  padding:92px 0 100px;
  background:#fff;
}

.home-people-intro{
  max-width:760px;
  margin-bottom:42px;
}

.home-people-intro h2{
  margin-bottom:15px;
}

.home-people-intro .lead{
  margin-bottom:0;
}

.home-people-copy{
  max-width:900px;
  margin:0 0 30px;
}

.home-people-copy h3{
  margin:0 0 10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.8rem,2.8vw,2.55rem);
  font-weight:500;
}

.home-people-copy .lead{
  margin-bottom:0;
}

.home-people-grid-wide{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.home-people-grid-wide .home-person-card{
  min-height:230px;
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding:30px 32px;
  border-radius:24px;
}

.home-people-grid-wide .home-person-icon{
  width:82px;
  height:68px;
  margin:2px 0 0;
}

.home-person-card-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:168px;
}

.home-people-grid-wide .home-person-card h3{
  margin:0 0 10px;
  font-size:1.72rem;
}

.home-people-grid-wide .home-person-card p{
  max-width:520px;
  margin:0 0 18px;
  font-size:1rem;
  line-height:1.65;
}

.home-people-grid-wide .home-card-link{
  margin-top:auto;
}

/* Let the premium callout breathe after the people section. */
.home-people-feature + .home-premium-section{
  padding-top:8px;
}

/* Flexible day closes the page in the main brand navy. */
.home-voucher-section-dark{
  padding:82px 0 88px;
  background:#434F69;
  color:#fff;
}

.home-voucher-section-dark .home-section-heading .eyebrow{
  color:#F72079;
}

.home-voucher-section-dark .home-section-heading h2{
  color:#fff;
}

.home-voucher-section-dark .home-voucher-grid>div{
  background:rgba(255,255,255,.98);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 28px rgba(24,33,50,.12);
}

.home-voucher-section-dark .home-voucher-grid strong{
  color:var(--navy);
}

/* Footer now follows immediately after this dark section without a redundant CTA. */
.home-voucher-section-dark + .site-footer{
  margin-top:0;
}

@media (max-width:900px){
  .home-reason-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .home-people-grid-wide{
    grid-template-columns:1fr;
  }
}

@media (max-width:650px){
  .home-reason-section,
  .home-people-feature{
    padding:66px 0 70px;
  }

  .home-reason-card{
    padding:27px 24px;
    border-radius:20px;
  }

  .home-people-intro{
    margin-bottom:30px;
  }

  .home-people-copy{
    margin-bottom:24px;
  }

  .home-people-grid-wide .home-person-card{
    grid-template-columns:72px minmax(0,1fr);
    gap:16px;
    min-height:0;
    padding:24px 22px;
    border-radius:20px;
  }

  .home-people-grid-wide .home-person-icon{
    width:66px;
    height:55px;
  }

  .home-person-card-copy{
    min-height:0;
  }

  .home-people-grid-wide .home-person-card h3{
    font-size:1.5rem;
  }

  .home-people-grid-wide .home-person-card p{
    font-size:.96rem;
    line-height:1.58;
  }

  .home-voucher-section-dark{
    padding:66px 0 70px;
  }
}

/* ===== People section: left copy, 2 x 2 cards to the side ===== */
.home-people-layout{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:64px;
  align-items:start;
}
.home-people-layout .home-people-intro{
  position:sticky;
  top:118px;
  max-width:520px;
  margin:0;
}
.home-people-main{min-width:0;}
.home-people-layout .home-people-copy{
  max-width:none;
  margin:0 0 26px;
}
.home-people-layout .home-people-grid-wide{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.home-people-layout .home-person-card{
  min-height:250px;
  grid-template-columns:76px minmax(0,1fr);
  gap:18px;
  padding:26px 26px;
}
.home-people-layout .home-person-icon{
  width:70px;
  height:58px;
}
.home-people-layout .home-person-card-copy{
  min-height:194px;
}
.home-people-layout .home-person-card h3{
  font-size:1.58rem;
}
.home-people-layout .home-person-card p{
  font-size:.96rem;
  line-height:1.6;
}
@media (max-width:1050px){
  .home-people-layout{
    grid-template-columns:minmax(240px,.62fr) minmax(0,1.38fr);
    gap:40px;
  }
  .home-people-layout .home-people-grid-wide{grid-template-columns:1fr;}
  .home-people-layout .home-person-card{min-height:0;}
  .home-people-layout .home-person-card-copy{min-height:0;}
}
@media (max-width:760px){
  .home-people-layout{grid-template-columns:1fr;gap:30px;}
  .home-people-layout .home-people-intro{position:static;max-width:760px;}
  .home-people-layout .home-people-grid-wide{grid-template-columns:1fr;}
}

/* ========================================================================
   Homepage hero refinement — picnic blanket frame + lighter image filter
   ======================================================================== */

/* Use the existing branded picnic blanket as the surface beneath the hero. */


/* The photographs sit on top of the blanket, leaving a cloth strip visible
   along the top and bottom like a picnic spread laid out on the blanket. */
.home-page .home-hero.home-hero-visual .home-hero-panels{
  inset:14px 0;
}

/* Lighten the filter while retaining enough contrast beneath the copy. */
.home-page .home-hero.home-hero-visual .home-hero-filter{
  inset:14px 0;
  
}

/* Remove the earlier decorative arc/grid treatments from the homepage hero. */


/* The blanket itself now provides the visual divider, so don't add a second
   artificial gingham strip underneath it. */


@media (max-width:900px){
  
}

@media (max-width:650px){
  .home-page .home-hero.home-hero-visual{
    
    
    background-size:430px auto;
  }

  

  
}

/* ========================================================================
   Homepage hero — real Mystery Picnic blanket backing
   Uses /images/shared/mystery-picnic-logo-large-blanket.webp
   ======================================================================== */



/* Leave a visible blanket border above and below the photographic strip. */


/* Slightly lighter again now that the blanket provides more visual framing. */
.home-page .home-hero.home-hero-visual .home-hero-filter{
  background:
    linear-gradient(90deg,
      rgba(38,51,77,.72) 0%,
      rgba(38,51,77,.61) 30%,
      rgba(38,51,77,.42) 56%,
      rgba(38,51,77,.24) 78%,
      rgba(38,51,77,.16) 100%),
    linear-gradient(0deg,rgba(20,28,43,.06),rgba(20,28,43,.06));
}

/* Keep the hero clean: no decorative pseudo-elements. */




@media (max-width:900px){
  .home-page .home-hero.home-hero-visual{
    
    padding:15px 0;
    background-size:cover;
  }

  .home-page .home-hero.home-hero-visual .home-hero-panels,
  .home-page .home-hero.home-hero-visual .home-hero-filter{
    inset:15px 0;
  }

  .home-page .home-hero.home-hero-visual .home-hero-filter{
    background:
      linear-gradient(90deg,
        rgba(38,51,77,.76) 0%,
        rgba(38,51,77,.62) 52%,
        rgba(38,51,77,.34) 100%),
      linear-gradient(0deg,rgba(20,28,43,.05),rgba(20,28,43,.05));
  }
}

@media (max-width:650px){
  .home-page .home-hero.home-hero-visual{
    
    
    background-position:center;
  }

  

  .home-page .home-hero.home-hero-visual .home-hero-filter{
    background:
      linear-gradient(0deg,
        rgba(38,51,77,.84) 0%,
        rgba(38,51,77,.70) 46%,
        rgba(38,51,77,.30) 78%,
        rgba(38,51,77,.14) 100%);
  }
}

/* ========================================================================
   Homepage hero — wider real-blanket frame
   Show enough of the tartan to read as a picnic blanket rather than trim.
   ======================================================================== */

@media (min-width:901px){
  .home-page .home-hero.home-hero-visual{
    min-height:790px;
    padding:72px 0;
  }

  .home-page .home-hero.home-hero-visual .home-hero-panels,
  .home-page .home-hero.home-hero-visual .home-hero-filter{
    inset:72px 0;
  }
}

@media (min-width:651px) and (max-width:900px){
  .home-page .home-hero.home-hero-visual{
    min-height:720px;
    padding:54px 0;
  }

  .home-page .home-hero.home-hero-visual .home-hero-panels,
  .home-page .home-hero.home-hero-visual .home-hero-filter{
    inset:54px 0;
  }
}

@media (max-width:650px){
  .home-page .home-hero.home-hero-visual{
    
    padding:34px 0;
  }

  .home-page .home-hero.home-hero-visual .home-hero-panels,
  .home-page .home-hero.home-hero-visual .home-hero-filter{
    inset:34px 0;
  }
}

/* ========================================================================
   Homepage hero — photo strip only, no blanket edging
   ======================================================================== */

.home-page .home-hero.home-hero-visual{
  min-height:640px;
  padding:0 !important;
  background:#434F69 !important;
}

.home-page .home-hero.home-hero-visual .home-hero-panels,
.home-page .home-hero.home-hero-visual .home-hero-filter{
  inset:0 !important;
}

.home-page .home-hero-rule{
  display:none !important;
}

.home-page .home-hero.home-hero-visual::before,
.home-page .home-hero.home-hero-visual::after{
  content:none !important;
  display:none !important;
}

@media (max-width:900px){
  .home-page .home-hero.home-hero-visual{
    min-height:600px;
  }
}

@media (max-width:650px){
  .home-page .home-hero.home-hero-visual{
    min-height:620px;
  }
}

/* ========================================================================
   Homepage review notes 1–4 — 20 Aug 2026
   ======================================================================== */

/* Homepage hero sits directly beneath the shared header. */
.home-page .home-hero.home-hero-visual{
  margin-top:0;
}

/* 3. Reduce the large white gap between Premium and Locations by about half.
   Existing values are 104px bottom + 110px top on desktop. */
@media (min-width:651px){
  .home-page .home-premium-section{
    padding-bottom:52px;
  }

  .home-page .home-locations-section{
    padding-top:55px;
  }
}

@media (max-width:650px){
  .home-page .home-premium-section{
    padding-bottom:34px;
  }

  .home-page .home-locations-section{
    padding-top:36px;
  }
}

/* 4. Flexible Day: soften the benefit cards into the dark section rather
   than four stark white slabs. */


.home-page .home-voucher-section-dark .home-voucher-benefit{
  position:relative;
}

.home-page .home-voucher-section-dark .voucher-benefit-icon{
  flex-basis:46px;
  
  
  
  
  
}





/* A very restrained teal accent integrates the cards with the site's palette. */
.home-page .home-voucher-section-dark .home-voucher-grid>div::before{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  top:0;
  height:3px;
  border-radius:0 0 999px 999px;
  background:rgba(43,158,179,.72);
}



@media (max-width:650px){
  .home-page .home-voucher-section-dark .voucher-benefit-icon{
    flex-basis:42px;
    width:42px;
    height:42px;
  }
}

/* ========================================================================
   Flexible Day — simplified reassurance row for review
   ======================================================================== */

.home-page .home-voucher-section-dark .home-voucher-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  align-items:stretch;
}

.home-page .home-voucher-section-dark .home-voucher-grid>div{
  position:relative;
  overflow:visible;
  min-height:150px;
  padding:24px 28px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.home-page .home-voucher-section-dark .home-voucher-grid>div::before{
  display:none;
}

.home-page .home-voucher-section-dark .home-voucher-grid>div+div{
  border-left:1px solid rgba(255,255,255,.16);
}

.home-page .home-voucher-section-dark .home-voucher-benefit{
  align-items:flex-start;
  gap:16px;
}

.home-page .home-voucher-section-dark .voucher-benefit-icon{
  flex:0 0 46px;
  width:46px;
  height:46px;
  background:rgba(247,32,121,.12);
  color:#F72079;
  box-shadow:inset 0 0 0 1px rgba(247,32,121,.18);
}

.home-page .home-voucher-section-dark .home-voucher-grid strong{
  color:#fff;
  font-size:1rem;
}

.home-page .home-voucher-section-dark .home-voucher-copy>span{
  color:rgba(255,255,255,.72);
}

@media (max-width:900px){
  .home-page .home-voucher-section-dark .home-voucher-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .home-page .home-voucher-section-dark .home-voucher-grid>div{
    min-height:130px;
  }

  .home-page .home-voucher-section-dark .home-voucher-grid>div:nth-child(3){
    border-left:0;
    border-top:1px solid rgba(255,255,255,.16);
  }

  .home-page .home-voucher-section-dark .home-voucher-grid>div:nth-child(4){
    border-top:1px solid rgba(255,255,255,.16);
  }
}

@media (max-width:650px){
  .home-page .home-voucher-section-dark .home-voucher-grid{
    grid-template-columns:1fr;
  }

  .home-page .home-voucher-section-dark .home-voucher-grid>div{
    min-height:0;
    padding:20px 8px;
    border-left:0 !important;
  }

  .home-page .home-voucher-section-dark .home-voucher-grid>div+div{
    border-top:1px solid rgba(255,255,255,.16);
  }
}

/* Make the upward cue on Who cards easier to see without enlarging the text. */
.home-card-arrow{
  display:inline-block;
  margin-left:.18em;
  font-size:1.28em;
  font-weight:900;
  line-height:.8;
  transform:translateY(.05em);
}


/* ========================================================================
   Notting Hill: mobile pricing + Who Will You Bring picker
   Moved from inline <style> blocks on 21 Aug 2026.
   ======================================================================== */
.mobile-inline-pricing,
  .mobile-bottom-pricing,
  .quick-facts-mobile {
    display: none;
  }

  @media (max-width: 767px) {
    .hero-copy > .quick-facts {
      display: none;
    }

    .quick-facts-mobile {
      display: grid;
      width: 100%;
    }

    /* On mobile, show the relevant price card immediately after its blurb. */
    .mobile-inline-pricing {
      display: grid;
      gap: 1.25rem;
      margin: 1.55rem 0 .35rem;
    }

    /* Trial: give each inline mobile price card its own blue tartan backing. */
    .mobile-tartan-card {
      padding: .72rem;
      border-radius: 18px;
      background-color: #434F69;
      background-image:
        linear-gradient(90deg, rgba(43,158,179,.34) 0 9%, transparent 9% 18%, rgba(255,255,255,.055) 18% 27%, transparent 27% 50%, rgba(43,158,179,.20) 50% 59%, transparent 59% 100%),
        linear-gradient(rgba(43,158,179,.34) 0 9%, transparent 9% 18%, rgba(255,255,255,.055) 18% 27%, transparent 27% 50%, rgba(43,158,179,.20) 50% 59%, transparent 59% 100%);
      background-size: 42px 42px;
      box-shadow: 0 10px 24px rgba(30,39,58,.10);
    }

    .mobile-inline-pricing .product-card {
      width: 100%;
      margin: 0;
      scroll-margin-top: 24px;
    }

    /* The desktop tartan pricing panel stays beside the blurbs only on larger screens. */
    .intro-options-grid > .intro-pricing {
      display: none;
    }

    /* Repeat the complete tartan pricing block once, at the very end of the page. */
    .mobile-bottom-pricing {
      display: block;
      margin-top: 0;
    }

    .mobile-bottom-pricing .intro-pricing {
      display: block;
      width: 100%;
      max-width: none;
      margin: 0;
      border-radius: 0;
    }
  }

  .bring-picker + .story-block {
    border-top: 0 !important;
  }

.bring-picker {
    margin: 2.25rem 0 2.75rem;
    padding: 1.7rem 0 0;
  }

  .bring-picker-heading {
    display: grid;
    grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
    align-items: center;
    gap: .7rem .85rem;
    margin-bottom: 1.15rem;
  }

  .bring-picker-heading h3 {
    grid-column: 1 / -1;
    margin: .15rem 0 0;
    color: #434F69;
    font: inherit;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 4vw, 2.45rem);
    font-weight: 400;
    line-height: 1.05;
    text-align: center;
  }

  .bring-picker-line {
    height: 1px;
    background: repeating-linear-gradient(
      90deg,
      #F72079 0 4px,
      transparent 4px 10px
    );
    opacity: .7;
  }

  .bring-picker-heart {
    color: #F72079;
    font-size: 1.05rem;
    line-height: 1;
    transform: translateY(-1px);
  }

  .bring-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
  }

  .bring-option {
    appearance: none;
    border: 1px solid rgba(67, 79, 105, .16);
    background: #fff;
    color: #434F69;
    border-radius: 18px;
    min-height: 128px;
    padding: .9rem .7rem .8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font: inherit;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(67, 79, 105, .07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .bring-option:hover,
  .bring-option:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(247, 32, 121, .45);
    box-shadow: 0 12px 28px rgba(67, 79, 105, .11);
    outline: none;
  }

  .bring-option-art {
    width: 68px;
    height: 50px;
    display: grid;
    place-items: center;
  }

  .bring-option-art svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bring-option-art .art-fill {
    fill: currentColor;
    stroke: none;
  }

  .bring-art-romance { color: #F72079; }
  .bring-art-partner { color: #2f9eb0; }
  .bring-art-friends { color: #2f9eb0; }
  .bring-art-family { color: #e48a00; }
  .bring-art-unsure { color: #7455a7; }
  .bring-art-premium { color: #d69a00; }

  #booking-classic,
  #booking-family,
  #booking-premium {
    scroll-margin-top: 24px;
  }

  

  .bring-art-unsure text {
    fill: currentColor;
    stroke: none;
    font: 700 18px/1 sans-serif;
  }

  .choice-burst {
    position: fixed;
    z-index: 9999;
    left: var(--burst-x);
    top: var(--burst-y);
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .choice-burst .burst-piece {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    animation: bringBurst 1.45s cubic-bezier(.2,.75,.25,1) forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
  }

  .choice-burst .burst-piece svg {
    width: 54px;
    height: 54px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
  }

  .choice-burst .burst-piece.heart {
    width: 18px;
    height: 18px;
    background: #F72079;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 3px 7px 3px 7px;
  }

  .choice-burst .burst-piece.heart.partner-heart {
    background: #2f9eb0;
  }

  .choice-burst .burst-piece.heart::before,
  .choice-burst .burst-piece.heart::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background: inherit;
    border-radius: 50%;
  }
  .choice-burst .burst-piece.heart::before { left: -9px; top: 0; }
  .choice-burst .burst-piece.heart::after { left: 0; top: -9px; }

  .choice-burst .burst-piece.spark {
    width: 6px;
    height: 34px;
    border-radius: 999px;
    background: #e4a100;
  }

  .choice-burst .burst-piece.friend-figure { color: #2f9eb0; }
  .choice-burst .burst-piece.family-figure { color: #e48a00; }
  .choice-burst .burst-piece.unsure-figure { color: #7455a7; font-size: 32px; font-weight: 700; }
  .choice-burst .burst-piece.bulb { font-size: 36px; }

  

  

  .unsure-burst-label {
    font-size: .66rem;
    line-height: 1;
    letter-spacing: .14em;
    font-weight: 800;
    white-space: nowrap;
  }

  @keyframes bringBurst {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.55);
    }
    18% { opacity: 1; }
    100% {
      opacity: 0;
      transform:
        translate(
          calc(-50% + var(--dx)),
          calc(-50% + var(--dy))
        )
        rotate(var(--rot, 0deg))
        scale(1.08);
    }
  }

  @media (max-width: 720px) {
    .bring-picker {
      margin: 1.9rem 0 2.25rem;
    }

    .bring-options {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .7rem;
    }

    .bring-option {
      min-height: 116px;
      border-radius: 16px;
      padding: .75rem .55rem;
      font-size: .96rem;
    }

    .bring-option-art {
      width: 61px;
      height: 45px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .bring-option {
      transition: none;
    }
    .choice-burst {
      display: none;
    }
  }


/* ========================================================================
   Homepage mobile refinements — 21 Aug 2026
   ======================================================================== */
@media (max-width:950px){
  .home-page .home-product-card{
    scroll-margin-top:92px;
  }
}

@media (max-width:650px){
  .home-page .home-hero.home-hero-visual .home-hero-panels{
    --home-hero-slide:0;
    display:flex;
    grid-template-columns:none;
    width:100%;
    transform:translateX(calc(var(--home-hero-slide) * -100%));
    transition:transform .72s cubic-bezier(.22,.72,.25,1);
    will-change:transform;
  }

  .home-page .home-hero.home-hero-visual .home-hero-panel,
  .home-page .home-hero.home-hero-visual .home-hero-panel:first-child,
  .home-page .home-hero.home-hero-visual .home-hero-panel:last-child{
    display:block;
    flex:0 0 100%;
    width:100%;
  }

  .home-page .home-hero.home-hero-visual .home-hero-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

@media (max-width:650px) and (prefers-reduced-motion:reduce){
  .home-page .home-hero.home-hero-visual .home-hero-panels{
    transition:none;
  }
}

/* ========================================================================
   Romantic Picnics review rework — 21 Aug 2026
   ======================================================================== */

/* Replace the abstract hero arc with an oversized, softly cropped heart. */
.voucher-page .romantic-sales-hero::before{
  content:"♡";
  width:auto;
  height:auto;
  left:-92px;
  bottom:-205px;
  border:0;
  border-radius:0;
  color:rgba(247,32,121,.18);
  font-family:Georgia,"Times New Roman",serif;
  font-size:470px;
  font-weight:400;
  line-height:1;
  transform:rotate(-10deg);
}

/* Intro: let the shorter left-hand message travel with the longer romantic copy. */
.voucher-page .romantic-intro-section{
  padding:96px 0 90px;
}

.voucher-page .romantic-intro-heading{
  position:sticky;
  top:118px;
  align-self:start;
}

.voucher-page .romantic-intro-heading h2{
  max-width:500px;
}

.voucher-page .romantic-story-copy>p{
  font-size:1.07rem;
  line-height:1.82;
}

.voucher-page .romantic-story-copy>p:last-child{
  margin-bottom:0;
}

/* Compact full-width cyan tartan buying band. */
.voucher-page .romantic-options-section{
  padding:58px 0 64px;
  background-color:#eef8fa;
  background-image:
    repeating-linear-gradient(90deg,rgba(43,158,179,.16) 0 42px,rgba(67,79,105,.035) 42px 84px),
    repeating-linear-gradient(0deg,rgba(43,158,179,.12) 0 42px,rgba(255,255,255,.10) 42px 84px),
    repeating-linear-gradient(135deg,rgba(43,158,179,.055) 0 2px,transparent 2px 6px);
}

.voucher-page .romantic-options-heading{
  max-width:760px;
  margin:0 auto 25px;
}

.voucher-page .romantic-options-heading h2{
  margin-bottom:10px;
  font-size:clamp(2rem,3.2vw,3rem);
}

.voucher-page .romantic-options-heading>p:last-child{
  margin-bottom:0;
}

.voucher-page .romantic-options-grid{
  max-width:1120px;
  gap:20px;
}

.voucher-page .romantic-option-card{
  padding:26px 28px 23px;
  border-radius:23px;
  box-shadow:0 14px 34px rgba(67,79,105,.11);
}

.voucher-page .romantic-option-card::before{
  left:25px;
  right:25px;
}

.voucher-page .romantic-option-badge{
  margin-bottom:11px;
  padding:6px 10px;
}

.voucher-page .romantic-option-card h3{
  margin-bottom:8px;
  font-size:clamp(1.55rem,2vw,1.85rem);
}

.voucher-page .romantic-option-card>p{
  margin-bottom:0;
  font-size:.96rem;
  line-height:1.6;
}

.voucher-page .romantic-option-price{
  margin:13px 0 17px;
  padding:13px 0;
}

.voucher-page .romantic-option-price strong{
  font-size:1.35rem;
}

.voucher-page .romantic-option-price-list{
  margin:13px 0 17px;
}

.voucher-page .romantic-option-price-row{
  padding:10px 0;
}

.voucher-page .romantic-option-card .button{
  min-height:49px;
}

/* White breathing section: the original three ideas, expanded to four and
   given cleaner line artwork. */
.romantic-benefits-section{
  padding:76px 0 46px;
  background:#fff;
}

.romantic-benefits-heading{
  max-width:860px;
  margin:0 auto 34px;
}

.romantic-benefits-heading h2{
  margin-bottom:0;
  font-size:clamp(2rem,3vw,2.85rem);
}

.romantic-benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:17px;
}

.romantic-benefit-card{
  padding:25px 22px 24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 26px rgba(67,79,105,.065);
}

.romantic-benefit-icon{
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:50%;
  background:rgba(67,79,105,.035);
}

.romantic-benefit-icon svg{
  width:38px;
  height:38px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.romantic-benefit-icon-pink{color:var(--pink);background:rgba(247,32,121,.075);}
.romantic-benefit-icon-teal{color:#2B9EB3;background:rgba(43,158,179,.09);}
.romantic-benefit-icon-gold{color:#b77e00;background:rgba(255,233,22,.28);}
.romantic-benefit-icon-navy{color:var(--navy);background:rgba(67,79,105,.075);}

.romantic-benefit-card h3{
  margin-bottom:10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.34rem;
  font-weight:500;
}

.romantic-benefit-card p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.62;
}

/* Pull occasions up into the white buffer between tartan pricing and photo How It Works. */
.voucher-page .romantic-occasions-section{
  padding:44px 0 94px;
}

/* Use the large Canterbury scene as the How It Works background. */
.voucher-page .how-section-background{
  object-position:center 56%;
}

.voucher-page .how-section::after{
  background:
    linear-gradient(90deg,rgba(29,39,58,.63) 0%,rgba(34,45,64,.43) 48%,rgba(34,45,64,.30) 100%),
    linear-gradient(0deg,rgba(18,27,42,.08),rgba(18,27,42,.08));
}

/* Romantic gallery after locations. */
.romantic-gallery{
  padding:44px 0 82px;
  background:#fff;
}

.romantic-gallery .gallery-heading{
  margin-bottom:14px;
}

.romantic-gallery .gallery-heading h2{
  margin-bottom:0;
  font-size:clamp(2.1rem,3vw,3rem);
}

.romantic-gallery .carousel-card{
  flex-basis:clamp(300px,31vw,430px);
}

.romantic-gallery .gallery-disclaimer{
  margin-top:7px;
}

/* Flexibility: same restrained dark-blue reassurance treatment as homepage. */
.voucher-page .romantic-voucher-section-dark{
  padding:80px 0 84px;
  background:#434F69;
  color:#fff;
}

.voucher-page .romantic-voucher-section-dark .romantic-voucher-heading .eyebrow{
  color:#F72079;
}

.voucher-page .romantic-voucher-section-dark .romantic-voucher-heading h2{
  color:#fff;
}

.voucher-page .romantic-voucher-section-dark .romantic-voucher-heading .lead{
  color:rgba(255,255,255,.78);
}

.voucher-page .romantic-voucher-section-dark .home-voucher-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  align-items:stretch;
}

.voucher-page .romantic-voucher-section-dark .home-voucher-grid>div{
  position:relative;
  overflow:visible;
  min-height:148px;
  padding:24px 28px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.voucher-page .romantic-voucher-section-dark .home-voucher-grid>div+div{
  border-left:1px solid rgba(255,255,255,.16);
}

.voucher-page .romantic-voucher-section-dark .home-voucher-benefit{
  align-items:flex-start;
  gap:16px;
}

.voucher-page .romantic-voucher-section-dark .voucher-benefit-icon{
  flex:0 0 46px;
  width:46px;
  height:46px;
  background:rgba(247,32,121,.12);
  color:#F72079;
  box-shadow:inset 0 0 0 1px rgba(247,32,121,.18);
}

.voucher-page .romantic-voucher-section-dark .home-voucher-grid strong{
  color:#fff;
  font-size:1rem;
}

.voucher-page .romantic-voucher-section-dark .home-voucher-copy>span{
  color:rgba(255,255,255,.72);
}

@media (min-width:821px){
  .romantic-gallery .gallery-heading h2{
    white-space:nowrap;
  }
}

@media (max-width:1050px){
  .voucher-page .romantic-options-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:820px;
  }

  .romantic-benefit-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:900px){
  .voucher-page .romantic-intro-heading{
    position:static;
  }

  .voucher-page .romantic-voucher-section-dark .home-voucher-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .voucher-page .romantic-voucher-section-dark .home-voucher-grid>div{
    min-height:128px;
  }

  .voucher-page .romantic-voucher-section-dark .home-voucher-grid>div:nth-child(3){
    border-left:0;
    border-top:1px solid rgba(255,255,255,.16);
  }

  .voucher-page .romantic-voucher-section-dark .home-voucher-grid>div:nth-child(4){
    border-top:1px solid rgba(255,255,255,.16);
  }
}

@media (max-width:700px){
  .voucher-page .romantic-sales-hero::before{
    left:-72px;
    bottom:-108px;
    font-size:285px;
    color:rgba(247,32,121,.15);
  }

  .voucher-page .romantic-intro-section{
    padding:66px 0 62px;
  }

  .voucher-page .romantic-options-section{
    padding:50px 0 56px;
  }

  .voucher-page .romantic-options-heading{
    margin-bottom:22px;
  }

  .voucher-page .romantic-option-card{
    padding:25px 22px 22px;
  }

  .romantic-benefits-section{
    padding:62px 0 34px;
  }

  .romantic-benefit-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .romantic-benefit-card{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    column-gap:16px;
    align-items:start;
    padding:20px 20px 21px;
  }

  .romantic-benefit-icon{
    grid-row:1 / span 2;
    width:52px;
    height:52px;
    margin:0;
  }

  .romantic-benefit-icon svg{
    width:35px;
    height:35px;
  }

  .romantic-benefit-card h3{
    margin:2px 0 7px;
  }

  .romantic-benefit-card p{
    grid-column:2;
  }

  .voucher-page .romantic-occasions-section{
    padding:36px 0 68px;
  }

  .romantic-gallery{
    padding:42px 0 62px;
  }

  .romantic-gallery .gallery-heading h2{
    white-space:normal;
  }

  .voucher-page .romantic-voucher-section-dark{
    padding:66px 0 70px;
  }

  .voucher-page .romantic-voucher-section-dark .home-voucher-grid{
    grid-template-columns:1fr;
  }

  .voucher-page .romantic-voucher-section-dark .home-voucher-grid>div{
    min-height:0;
    padding:20px 8px;
    border-left:0!important;
  }

  .voucher-page .romantic-voucher-section-dark .home-voucher-grid>div+div{
    border-top:1px solid rgba(255,255,255,.16);
  }
}

/* Keep horizontal decoration clipped without turning <main> into the sticky
   heading's scroll container. */
.voucher-page{
  overflow-x:clip;
  overflow-y:visible;
}

/* ========================================================================
   Romantic Picnics — mobile fixes — 21 Aug 2026
   ======================================================================== */
@media (max-width:700px){

  /* Hero order/crop:
     eyebrow -> title -> image/caption -> intro/actions -> quick facts */
  .voucher-page .romantic-hero-grid{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }

  .voucher-page .romantic-hero-copy{
    display:contents;
  }

  .voucher-page .romantic-sales-hero .eyebrow{order:1;}

  .voucher-page .romantic-sales-hero h1{
    order:2;
    margin-bottom:20px;
  }

  .voucher-page .romantic-hero-media{
    order:3;
    width:100%;
    margin:0 0 32px;
  }

  .voucher-page .romantic-hero-media img{
    width:100%;
    height:clamp(245px,62vw,325px);
    min-height:0;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center 58%;
    border-width:4px;
    border-radius:22px;
  }

  .voucher-page .romantic-hero-media::before{
    inset:14px -10px -16px 18px;
    border-radius:24px;
  }

  .voucher-page .romantic-hero-note{
    position:relative;
    left:auto;
    bottom:auto;
    max-width:none;
    margin:-16px 18px 0;
  }

  .voucher-page .romantic-hero-lead{order:4;}

  .voucher-page .romantic-hero-actions{
    order:5;
    margin:25px 0 28px;
  }

  .voucher-page .romantic-hero-facts{order:6;}

  /* Separate the intro heading from its body copy on mobile. */
  .voucher-page .romantic-intro-heading{
    padding-bottom:28px;
    border-bottom:1px solid var(--line);
  }

  .voucher-page .romantic-intro-grid{
    gap:34px;
  }

  /* On mobile favour the right-hand side of the How It Works image,
     where the couple are sitting. */
  .voucher-page .how-section-background{
    object-position:82% 56%;
  }
}

/* ========================================================================
   Romantic Picnics — hide hero quick facts on mobile — 21 Aug 2026
   ======================================================================== */
@media (max-width:700px){
  .voucher-page .romantic-hero-facts{
    display:none;
  }
}


/* ========================================================================
   Voucher pages - voucher-card icons - 22 Aug 2026
   Match the homepage product-card icon treatment: two-person icon for both
   Classic vouchers and the yellow crown icon for Premium.
   ======================================================================== */
.voucher-page .romantic-option-card::after{
  content:"";
  position:absolute;
  z-index:2;
  top:24px;
  right:24px;
  width:54px;
  height:54px;
  border-radius:16px;
  border:1px solid rgba(67,79,105,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70);
  background-color:rgba(255,255,255,.92);
  background-image:
    radial-gradient(circle at 32% 28%,#F72079 0 4px,transparent 4.5px),
    radial-gradient(circle at 68% 28%,#2B9EB3 0 4px,transparent 4.5px),
    radial-gradient(ellipse 18% 14% at 32% 58%,#F72079 0 99%,transparent 100%),
    radial-gradient(ellipse 18% 14% at 68% 58%,#2B9EB3 0 99%,transparent 100%),
    linear-gradient(135deg,rgba(247,32,121,.12),rgba(43,158,179,.10));
  background-repeat:no-repeat;
  pointer-events:none;
}

.voucher-page .romantic-option-card-premium::after{
  background-color:#FFE916;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23434F69' d='M13 42 9 18l14 10 9-17 9 17 14-10-4 24H13Zm3 5h32l-3 7H19l-3-7Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:58%;
  border-color:rgba(67,79,105,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.60),0 6px 16px rgba(255,233,22,.22);
}

@media (max-width:700px){
  .voucher-page .romantic-option-card::after{
    top:20px;
    right:20px;
    width:50px;
    height:50px;
  }
}


/* ========================================================================
   Homepage pricing cards — 22 Aug 2026
   Standard + London/Bath pricing, location tooltips and Romantic-card hover
   colour behaviour. Static: pink / pink / yellow. Hover/selected: teal.
   ======================================================================== */
.home-page .home-product-card::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.18);
}

.home-page .home-product-card[data-option-card="premium"]::before{
  background:#FFE916;
  box-shadow:0 2px 10px rgba(255,233,22,.28);
}

.home-page .home-product-card .button{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 9px 24px rgba(247,32,121,.20);
}

.home-page .home-product-card[data-option-card="premium"] .button{
  background:#FFE916;
  border-color:#FFE916;
  color:var(--navy);
  box-shadow:0 9px 24px rgba(255,233,22,.20);
}

.home-page .home-product-card:hover::before,
.home-page .home-product-card:focus-within::before,
.home-page .home-product-card.is-selected::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.28);
}

.home-page .home-product-card:hover .button,
.home-page .home-product-card:focus-within .button,
.home-page .home-product-card.is-selected .button,
.home-page .home-product-card .button:hover,
.home-page .home-product-card .button:focus-visible{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
  box-shadow:0 10px 24px rgba(43,158,179,.24);
}

.home-page .home-product-card.is-selected .button:hover,
.home-page .home-product-card.is-selected .button:focus-visible{
  background:#238da0;
  border-color:#238da0;
}

.home-page .home-product-card .product-prices{
  margin-top:4px;
}

.home-page .home-product-card .product-price-row{
  min-height:71px;
  padding:14px 0;
  align-items:center;
}

.home-page .home-product-card .product-price-row:last-child{
  border-bottom:0;
}

.home-price-label{
  min-width:0;
  color:var(--text);
  font-size:.92rem;
  line-height:1.42;
}

.home-price-location{
  position:relative;
  display:inline-block;
  color:var(--navy);
  font-size:.84em;
  font-weight:800;
  white-space:nowrap;
  border-bottom:1px dotted rgba(67,79,105,.52);
  cursor:help;
}

.home-price-location::after{
  content:attr(data-tooltip);
  position:absolute;
  z-index:20;
  left:0;
  bottom:calc(100% + 9px);
  width:max-content;
  max-width:265px;
  padding:9px 11px;
  border:1px solid rgba(67,79,105,.16);
  border-radius:10px;
  background:#fff;
  color:var(--navy-deep);
  box-shadow:0 10px 26px rgba(20,30,48,.18);
  font-size:.78rem;
  font-weight:700;
  line-height:1.42;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}

.home-page .home-product-card[data-option-card="family"] .home-price-location::after{
  left:auto;
  right:0;
}

.home-price-location:hover::after,
.home-price-location:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.home-price-location:focus-visible{
  outline:2px solid rgba(247,32,121,.30);
  outline-offset:3px;
  border-radius:3px;
}

@media (max-width:950px){
  .home-page .home-product-card .product-price-row{
    min-height:0;
  }

  .home-price-location::after,
  .home-page .home-product-card[data-option-card="family"] .home-price-location::after{
    left:0;
    right:auto;
  }
}

@media (max-width:650px){
  .home-price-label{
    font-size:.9rem;
  }

  .home-price-location::after{
    max-width:min(250px,72vw);
  }
}

/* ========================================================================
   Homepage pricing tooltips — 22 Aug 2026
   Keep location labels/tooltips regular weight and make “map” actionable.
   ======================================================================== */
.home-price-location{
  font-weight:400;
}

.home-price-location::after{
  content:none;
  display:none;
}

.home-price-tooltip{
  position:absolute;
  z-index:20;
  left:0;
  bottom:calc(100% + 9px);
  width:max-content;
  max-width:265px;
  padding:9px 11px;
  border:1px solid rgba(67,79,105,.16);
  border-radius:10px;
  background:#fff;
  color:var(--navy-deep);
  box-shadow:0 10px 26px rgba(20,30,48,.18);
  font-size:.78rem;
  font-weight:400;
  line-height:1.42;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:auto;
  transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}

.home-price-tooltip a{
  color:inherit;
  font-weight:400;
  text-decoration:underline;
  text-underline-offset:2px;
}

.home-price-tooltip a:hover,
.home-price-tooltip a:focus-visible{
  color:#2B9EB3;
}

.home-page .home-product-card[data-option-card="family"] .home-price-tooltip{
  left:auto;
  right:0;
}

.home-price-location:hover .home-price-tooltip,
.home-price-location:focus-within .home-price-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media (max-width:950px){
  .home-price-tooltip,
  .home-page .home-product-card[data-option-card="family"] .home-price-tooltip{
    left:0;
    right:auto;
  }
}

@media (max-width:650px){
  .home-price-tooltip{
    max-width:min(250px,72vw);
  }
}

/* ========================================================================
   Family Days Out sales page — 22 Aug 2026
   Uses the shared voucher-page structure, with a teal-led family treatment.
   ======================================================================== */
.family-page .romantic-sales-hero{
  background:radial-gradient(circle at 18% 22%,rgba(43,158,179,.22),transparent 29%),radial-gradient(circle at 88% 16%,rgba(247,32,121,.10),transparent 25%),linear-gradient(135deg,#26334d 0%,#434F69 58%,#344057 100%);
}
/* Hero geometry is inherited unchanged from the shared voucher layout. Only family colour/motif/crop overrides live below. */
/* Replace the single teal arc with a low-contrast family-of-four motif. */
.family-page .romantic-sales-hero::before{content:none;}
.family-hero-motif{
  position:absolute;
  z-index:-1;
  left:-118px;
  bottom:-132px;
  width:560px;
  height:470px;
  pointer-events:none;
  opacity:.92;
}
.family-motif-person{
  --motif-colour:rgba(43,158,179,.16);
  position:absolute;
  bottom:0;
  display:block;
  border:0;
}
.family-motif-person::before{
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  top:0;
  width:var(--motif-head);
  height:var(--motif-head);
  transform:translateX(-50%);
  border:var(--motif-stroke) solid var(--motif-colour);
  border-radius:50%;
}
.family-motif-person::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--motif-body-height);
  border:var(--motif-stroke) solid var(--motif-colour);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 58% 58% 0 0;
}
.family-motif-parent-one{
  --motif-head:52px;
  --motif-stroke:13px;
  --motif-body-height:300px;
  left:0;
  width:246px;
  height:392px;
}
.family-motif-parent-two{
  --motif-head:48px;
  --motif-stroke:12px;
  --motif-body-height:265px;
  --motif-colour:rgba(43,158,179,.135);
  left:198px;
  width:220px;
  height:348px;
}
.family-motif-child-one{
  --motif-head:34px;
  --motif-stroke:9px;
  --motif-body-height:175px;
  --motif-colour:rgba(43,158,179,.20);
  left:130px;
  width:142px;
  height:236px;
  bottom:2px;
}
.family-motif-child-two{
  --motif-head:30px;
  --motif-stroke:8px;
  --motif-body-height:154px;
  --motif-colour:rgba(43,158,179,.18);
  left:271px;
  width:128px;
  height:210px;
  bottom:0;
}

.family-page .romantic-sales-hero h1 span{color:#2B9EB3;text-shadow:0 0 12px rgba(43,158,179,.34),0 0 28px rgba(43,158,179,.14);}
.family-page .romantic-hero-actions .button{background:#2B9EB3;border-color:#2B9EB3;box-shadow:0 12px 28px rgba(43,158,179,.27);}
.family-page .romantic-hero-actions .button:hover,.family-page .romantic-hero-actions .button:focus-visible{background:var(--pink);border-color:var(--pink);}
.family-page .romantic-hero-media::before{background:linear-gradient(90deg,rgba(43,158,179,.40) 0 14%,transparent 14% 29%,rgba(255,255,255,.06) 29% 43%,transparent 43% 100%),linear-gradient(rgba(43,158,179,.40) 0 14%,transparent 14% 29%,rgba(255,255,255,.06) 29% 43%,transparent 43% 100%),#2B9EB3;}
.family-page .romantic-hero-media img{object-position:center 42%;}
.family-page .romantic-hero-note span{color:#2B9EB3;}
.family-page .romantic-options-section{background-color:#eef8fa;background-image:repeating-linear-gradient(90deg,rgba(43,158,179,.19) 0 42px,rgba(67,79,105,.035) 42px 84px),repeating-linear-gradient(0deg,rgba(43,158,179,.14) 0 42px,rgba(255,255,255,.10) 42px 84px),repeating-linear-gradient(135deg,rgba(43,158,179,.06) 0 2px,transparent 2px 6px);}
.family-page .family-options-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;}
.family-page .romantic-option-card{border-color:rgba(67,79,105,.20);}
.family-page .romantic-option-card::before{background:var(--pink);box-shadow:0 2px 10px rgba(247,32,121,.18);}
.family-page .romantic-option-card:hover,.family-page .romantic-option-card:focus-within{border-color:rgba(43,158,179,.64);box-shadow:0 22px 48px rgba(43,158,179,.15),0 16px 36px rgba(67,79,105,.10);}
.family-page .romantic-option-badge{background:rgba(247,32,121,.08);color:var(--pink);}
.family-page .romantic-option-card .button{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 9px 24px rgba(247,32,121,.20);}
.family-page .romantic-option-card:hover .button,.family-page .romantic-option-card:focus-within .button,.family-page .romantic-option-card .button:hover,.family-page .romantic-option-card .button:focus-visible{background:#2B9EB3;border-color:#2B9EB3;box-shadow:0 10px 24px rgba(43,158,179,.24);}
.family-page .romantic-option-card:hover::before,.family-page .romantic-option-card:focus-within::before{background:#2B9EB3;box-shadow:0 2px 10px rgba(43,158,179,.28);}
.family-page .romantic-option-card:hover .romantic-option-badge,.family-page .romantic-option-card:focus-within .romantic-option-badge{background:rgba(43,158,179,.10);color:#238da0;}
.family-page .romantic-option-card::after{background-image:radial-gradient(circle at 31% 23%,#F72079 0 4px,transparent 4.5px),radial-gradient(circle at 69% 23%,#2B9EB3 0 4px,transparent 4.5px),radial-gradient(circle at 40% 56%,#F72079 0 3.4px,transparent 4px),radial-gradient(circle at 60% 56%,#2B9EB3 0 3.4px,transparent 4px),radial-gradient(ellipse 16% 12% at 31% 48%,#F72079 0 99%,transparent 100%),radial-gradient(ellipse 16% 12% at 69% 48%,#2B9EB3 0 99%,transparent 100%),radial-gradient(ellipse 12% 10% at 40% 75%,#F72079 0 99%,transparent 100%),radial-gradient(ellipse 12% 10% at 60% 75%,#2B9EB3 0 99%,transparent 100%),linear-gradient(135deg,rgba(43,158,179,.11),rgba(247,32,121,.08));}
.family-page .romantic-option-card:nth-child(2)::after{background-image:radial-gradient(circle at 29% 21%,#F72079 0 3.7px,transparent 4.2px),radial-gradient(circle at 71% 21%,#2B9EB3 0 3.7px,transparent 4.2px),radial-gradient(circle at 36% 52%,#F72079 0 3.1px,transparent 3.7px),radial-gradient(circle at 64% 52%,#2B9EB3 0 3.1px,transparent 3.7px),radial-gradient(circle at 50% 69%,#F72079 0 2.8px,transparent 3.4px),radial-gradient(ellipse 15% 11% at 29% 44%,#F72079 0 99%,transparent 100%),radial-gradient(ellipse 15% 11% at 71% 44%,#2B9EB3 0 99%,transparent 100%),radial-gradient(ellipse 11% 9% at 36% 70%,#F72079 0 99%,transparent 100%),radial-gradient(ellipse 11% 9% at 64% 70%,#2B9EB3 0 99%,transparent 100%),radial-gradient(ellipse 10% 8% at 50% 87%,#F72079 0 99%,transparent 100%),linear-gradient(135deg,rgba(43,158,179,.11),rgba(247,32,121,.08));}
.family-price-note{max-width:900px;margin:18px auto 0;color:var(--muted);font-size:.82rem;line-height:1.55;text-align:center;}.family-price-note a{color:#238da0;text-underline-offset:2px;}
.family-page .how-section-background{object-position:center 46%;}
.family-page .how-section::after{background:linear-gradient(90deg,rgba(29,39,58,.64) 0%,rgba(34,45,64,.44) 48%,rgba(34,45,64,.31) 100%),linear-gradient(0deg,rgba(18,27,42,.08),rgba(18,27,42,.08));}
.family-page .how-section .eyebrow{color:#7fd4e2;}.family-page .step:hover::after,.family-page .step:focus-within::after,.family-page .step.is-active::after{background:var(--pink);box-shadow:0 0 12px rgba(247,32,121,.22);}.family-page .step:hover .step-number,.family-page .step:focus-within .step-number,.family-page .step.is-active .step-number{background:rgba(247,32,121,.15);border-color:rgba(247,32,121,.60);}
.family-page .romantic-location-list a:hover strong{color:#2B9EB3;}.family-page .family-gallery .carousel-button{background:#2B9EB3;border-color:#2B9EB3;}.family-page .family-gallery .carousel-button:hover,.family-page .family-gallery .carousel-button:focus-visible{background:var(--pink);border-color:var(--pink);}
.family-page .family-faq-section .faq-list summary::after{color:#2B9EB3;}
@media (max-width:1050px){.family-page .family-options-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;}}
@media (max-width:700px){
  .family-page .family-options-grid{grid-template-columns:1fr;max-width:560px;}
  .family-hero-motif{
    left:-96px;
    bottom:-78px;
    width:390px;
    height:320px;
    transform:scale(.72);
    transform-origin:left bottom;
    opacity:.78;
  }
  .family-page .how-section-background{object-position:62% 46%;}
}


/* ========================================================================
   Friends & Groups sales page — 24 Aug 2026
   IMPORTANT: the hero deliberately inherits the Romantic/Family base
   geometry. Friends-specific rules below change only colour, motif, backing
   and the portrait image treatment — not the grid, spacing or breakpoints.
   ======================================================================== */

/* Dark-teal page identity; same hero box/padding as Romantic Picnics. */
.friends-page .romantic-sales-hero{
  background:
    radial-gradient(circle at 18% 22%,rgba(67,79,105,.18),transparent 29%),
    radial-gradient(circle at 88% 16%,rgba(255,255,255,.055),transparent 25%),
    linear-gradient(135deg,#176f7f 0%,#237f91 58%,#195f70 100%);
}

/* Replace the Romantic heart with four low-contrast adult/friend figures. */
.friends-page .romantic-sales-hero::before{content:none;}

.friends-hero-motif{
  position:absolute;
  z-index:-1;
  left:-118px;
  bottom:-132px;
  width:560px;
  height:470px;
  pointer-events:none;
  opacity:.92;
}

.friend-motif-person{
  --motif-colour:rgba(67,79,105,.26);
  position:absolute;
  bottom:0;
  display:block;
  border:0;
}

.friend-motif-person::before{
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  top:0;
  width:var(--motif-head);
  height:var(--motif-head);
  transform:translateX(-50%);
  border:var(--motif-stroke) solid var(--motif-colour);
  border-radius:50%;
}

.friend-motif-person::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--motif-body-height);
  border:var(--motif-stroke) solid var(--motif-colour);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 58% 58% 0 0;
}

.friend-motif-person-one{
  --motif-head:50px;
  --motif-stroke:12px;
  --motif-body-height:280px;
  left:0;
  width:225px;
  height:370px;
}

.friend-motif-person-two{
  --motif-head:46px;
  --motif-stroke:11px;
  --motif-body-height:250px;
  --motif-colour:rgba(67,79,105,.20);
  left:145px;
  width:205px;
  height:332px;
}

.friend-motif-person-three{
  --motif-head:43px;
  --motif-stroke:10px;
  --motif-body-height:225px;
  --motif-colour:rgba(67,79,105,.24);
  left:272px;
  width:185px;
  height:300px;
  bottom:2px;
}

.friend-motif-person-four{
  --motif-head:39px;
  --motif-stroke:9px;
  --motif-body-height:198px;
  --motif-colour:rgba(67,79,105,.19);
  left:385px;
  width:165px;
  height:268px;
}

/* Friends hero title accent: keep the brand navy, but give it enough depth
   to stand clearly against the teal without introducing another colour. */
.friends-page .romantic-sales-hero h1 span{
  color:#344057;
  font-weight:500;
  text-shadow:none;
}

/* Same inset, radius, rotation and dimensions as Romantic/Family — only the
   backing artwork changes to a plain dark blue. */
.friends-page .romantic-hero-media::before{
  background:#344057;
}

/* Same shared Romantic/Family hero frame. The source file itself is portrait;
   the declared 1408×741 dimensions and existing shared object-fit treatment
   control the displayed hero frame, just as on the established pages. */
.friends-page .romantic-hero-media img{
  object-position:center 42%;
}

.friends-page .romantic-hero-note span{color:#2B9EB3;}

/* Friends buying cards: Classic for two, Classic for four and Premium for two. */
.friends-page .friends-options-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:1120px;
}

.friends-page .friends-option-card{
  border-color:rgba(67,79,105,.22);
}

.friends-page .friends-option-card:hover,
.friends-page .friends-option-card:focus-within{
  border-color:rgba(43,158,179,.60);
  box-shadow:0 22px 48px rgba(43,158,179,.14),0 16px 36px rgba(67,79,105,.10);
}

.friends-page .friends-option-card .button{margin-top:auto;}

/* Four-person icon for the second card. */
.friends-page .friends-option-card-four::after{
  background-color:rgba(255,255,255,.94);
  background-image:
    radial-gradient(circle at 25% 27%,#F72079 0 3.7px,transparent 4.2px),
    radial-gradient(circle at 47% 23%,#2B9EB3 0 3.7px,transparent 4.2px),
    radial-gradient(circle at 69% 27%,#F72079 0 3.7px,transparent 4.2px),
    radial-gradient(circle at 82% 43%,#2B9EB3 0 3.4px,transparent 3.9px),
    radial-gradient(ellipse 13% 10% at 25% 55%,#F72079 0 99%,transparent 100%),
    radial-gradient(ellipse 13% 10% at 47% 51%,#2B9EB3 0 99%,transparent 100%),
    radial-gradient(ellipse 13% 10% at 69% 55%,#F72079 0 99%,transparent 100%),
    radial-gradient(ellipse 12% 9% at 82% 69%,#2B9EB3 0 99%,transparent 100%),
    linear-gradient(135deg,rgba(43,158,179,.11),rgba(247,32,121,.08));
}

.friends-price-note{
  max-width:900px;
  margin:18px auto 0;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.58;
  text-align:center;
}
.friends-price-note strong{color:var(--navy);}
.friends-price-note a{color:#238da0;text-underline-offset:2px;}

.friends-page .how-section-background{
  object-position:center 48%;
}
.friends-page .how-section::after{
  background:
    linear-gradient(90deg,rgba(29,39,58,.65) 0%,rgba(34,45,64,.46) 48%,rgba(34,45,64,.32) 100%),
    linear-gradient(0deg,rgba(18,27,42,.08),rgba(18,27,42,.08));
}
.friends-page .how-section .eyebrow{color:#7fd4e2;}
.friends-page .romantic-location-list a:hover strong{color:#2B9EB3;}
.friends-page .friends-gallery .carousel-button{background:#2B9EB3;border-color:#2B9EB3;}
.friends-page .friends-gallery .carousel-button:hover,
.friends-page .friends-gallery .carousel-button:focus-visible{background:var(--pink);border-color:var(--pink);}
.friends-page .friends-faq-section .faq-list summary::after{color:#2B9EB3;}

@media (max-width:1050px){
  .friends-page .friends-options-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:820px;
  }
}

/* The shared voucher mobile rules control order, image dimensions/crop and
   hiding of the quick facts. Only the Friends motif scale is page-specific. */
@media (max-width:700px){
  .friends-page .friends-options-grid{grid-template-columns:1fr;max-width:560px;}
  .friends-hero-motif{
    left:-96px;
    bottom:-78px;
    width:390px;
    height:320px;
    transform:scale(.72);
    transform-origin:left bottom;
    opacity:.72;
  }
  .friends-page .how-section-background{object-position:62% 48%;}
}

/* ========================================================================
   Location page hero treatment — 29 Aug 2026
   Uses the solid teal base from the voucher-card backing, without tartan.
   Shared by pages using the location-page template.
   ======================================================================== */
.location-page .hero{
  background:#eef8fa;
}

/* ========================================================================
   Location pages: page-specific How It Works background image
   The image itself belongs in each location index; CSS controls treatment.
   Voucher/sales page How It Works backgrounds remain unchanged.
   ======================================================================== */

/* ========================================================================
   Location How It Works image crop — 29 Aug 2026
   Favour the upper part of the location How It Works image.
   ======================================================================== */
.location-page .how-section-background{
  object-position:center 22%;
}

/* ========================================================================
   Header navigation by area - 29 Aug 2026
   Desktop: two-level hover flyout.
   Mobile: full-width Areas -> region -> locations accordion.
   ======================================================================== */

.site-header .header-inner{
  gap:26px;
}

.site-header .main-nav{
  position:relative;
  flex:1 1 auto;
  margin-left:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.header-nav-group{
  display:flex;
  align-items:center;
  gap:22px;
  min-width:0;
}

.header-location-group{
  flex:0 0 auto;
}

.header-voucher-group{
  margin-left:auto;
}

.header-nav-label{
  flex:0 0 auto;
  font-size:.9rem;
  font-weight:750;
  white-space:nowrap;
}

.header-nav-label-location{
  color:var(--pink);
}

.header-nav-label-voucher{
  color:#2B9EB3;
}

.nav-area-menu,
.nav-region{
  position:relative;
}

.nav-area-menu > summary,
.nav-region > summary{
  list-style:none;
}

.nav-area-menu > summary::-webkit-details-marker,
.nav-region > summary::-webkit-details-marker{
  display:none;
}

.nav-area-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 0;
  color:var(--navy);
  font-size:.9rem;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}

.nav-area-trigger::after{
  content:"";
  width:8px;
  height:8px;
  margin-top:-4px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s ease,margin .18s ease;
}

.nav-area-trigger-mobile{
  display:none;
}

.nav-area-trigger:focus-visible,
.nav-region-trigger:focus-visible{
  outline:3px solid rgba(43,158,179,.28);
  outline-offset:4px;
  border-radius:4px;
}

/* First level - compact vertical list beneath By Area on desktop. */
.nav-area-panel{
  position:absolute;
  z-index:90;
  top:calc(100% + 7px);
  left:0;
  width:236px;
  padding:4px 14px 10px;
  border:1px solid rgba(67,79,105,.10);
  border-top:0;
  border-radius:0 0 12px 12px;
  background:#fff;
  box-shadow:0 16px 34px rgba(67,79,105,.12);
}

.nav-area-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-8px;
  height:8px;
  background:transparent;
}

.nav-region-grid{
  display:block;
}

.nav-region{
  border-bottom:1px solid rgba(67,79,105,.36);
}

.nav-region-trigger{
  position:relative;
  width:100%;
  padding:9px 30px 9px 0;
  color:var(--navy);
  font-size:.9rem;
  font-weight:800;
  line-height:1.25;
  cursor:pointer;
}

.nav-region-trigger::after{
  content:"+";
  position:absolute;
  top:50%;
  right:1px;
  transform:translateY(-50%);
  color:var(--pink);
  font-size:1.05rem;
  font-weight:900;
}

/* Second level - clean flyout beside the region list. */
.nav-region-links{
  position:absolute;
  z-index:95;
  top:-1px;
  left:calc(100% + 18px);
  width:255px;
  display:grid;
  gap:0;
  padding:3px 0 5px 11px;
  border-left:1px solid rgba(67,79,105,.18);
  background:#fff;
  box-shadow:12px 12px 26px rgba(67,79,105,.08);
}

.nav-region-links::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-19px;
  width:19px;
  background:transparent;
}

.site-header .main-nav .nav-region-links a{
  display:block;
  padding:8px 10px;
  border:0;
  color:var(--navy);
  font-size:.84rem;
  font-weight:700;
  line-height:1.3;
  white-space:normal;
}

.site-header .main-nav .nav-region-links a:hover,
.site-header .main-nav .nav-region-links a:focus-visible{
  color:var(--pink);
  background:rgba(247,32,121,.035);
}

.site-header .header-cta{
  display:none;
}

/* Desktop hover behaviour. Native details still provide keyboard/click fallback. */
@media (min-width:951px) and (hover:hover) and (pointer:fine){
  .nav-area-menu:not([open]) > .nav-area-panel,
  .nav-region:not([open]) > .nav-region-links{
    display:block;
  }

  .nav-area-panel{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(4px);
    transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
  }

  .nav-area-menu:hover > .nav-area-trigger,
  .nav-area-menu:focus-within > .nav-area-trigger{
    color:#2B9EB3;
  }

  .nav-area-menu:hover > .nav-area-trigger::after,
  .nav-area-menu:focus-within > .nav-area-trigger::after{
    margin-top:4px;
    transform:rotate(225deg);
  }

  .nav-area-menu:hover > .nav-area-panel,
  .nav-area-menu:focus-within > .nav-area-panel,
  .nav-area-menu[open] > .nav-area-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav-region-links{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(-4px);
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
  }

  .nav-region:hover > .nav-region-trigger,
  .nav-region:focus-within > .nav-region-trigger,
  .nav-region[open] > .nav-region-trigger{
    color:var(--pink);
  }

  .nav-region:hover > .nav-region-trigger::after,
  .nav-region:focus-within > .nav-region-trigger::after,
  .nav-region[open] > .nav-region-trigger::after{
    content:"-";
  }

  .nav-region:hover > .nav-region-links,
  .nav-region:focus-within > .nav-region-links,
  .nav-region[open] > .nav-region-links{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);
  }
}

@media (max-width:1180px) and (min-width:951px){
  .site-header .main-nav{
    margin-left:8px;
    gap:20px;
  }

  .header-nav-group{
    gap:15px;
  }

  .header-nav-label,
  .nav-area-trigger,
  .site-header .main-nav > .header-voucher-group > a{
    font-size:.84rem;
  }

  .nav-area-panel{
    width:220px;
  }

  .nav-region-links{
    width:250px;
  }
}

/* Mobile menu - inspired by the simple BUK accordion structure, but using
   Mystery Picnic colours and only Areas -> region -> locations. */
@media (max-width:950px){
  .site-header .main-nav{
    display:none;
    position:absolute;
    z-index:80;
    left:0;
    right:0;
    top:100%;
    margin:0;
    max-height:calc(100vh - 72px);
    overflow-y:auto;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:34px 28px 42px;
    background:#f8fbfc;
    border:0;
    border-top:1px solid var(--line);
    border-radius:0;
    box-shadow:none;
  }

  .site-header .main-nav.open{
    display:flex;
  }

  .header-nav-group{
    display:block;
  }

  .header-location-group{
    padding:0;
    border:0;
  }

  /* Mobile says simply "Areas", like the reference menu. */
  .header-nav-label-location{
    display:none;
  }

  .nav-area-trigger-desktop{
    display:none;
  }

  .nav-area-trigger-mobile{
    display:inline;
  }

  .nav-area-trigger{
    width:100%;
    justify-content:flex-start;
    gap:9px;
    padding:10px 3px 12px;
    color:var(--pink);
    font-size:.82rem;
    font-weight:850;
    line-height:1.2;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .nav-area-trigger::after{
    width:8px;
    height:8px;
    margin:0 0 4px 3px;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }

  .nav-area-menu > .nav-area-trigger,
  .nav-area-menu[open] > .nav-area-trigger{
    color:var(--pink);
  }

  .nav-area-menu[open] > .nav-area-trigger::after{
    margin-bottom:-3px;
    transform:rotate(225deg);
  }

  .nav-area-panel{
    position:static;
    width:auto;
    padding:2px 0 20px 3px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .nav-area-panel::before,
  .nav-region-links::before{
    content:none;
  }

  .nav-region{
    border:0;
  }

  .nav-region + .nav-region{
    margin-top:2px;
  }

  .nav-region-trigger{
    width:100%;
    padding:11px 32px 11px 0;
    color:#434F69;
    font-size:1rem;
    font-weight:750;
    line-height:1.35;
  }

  .nav-region-trigger::after{
    content:"⌄";
    right:3px;
    color:var(--pink);
    font-size:1.15rem;
    font-weight:800;
  }

  .nav-region[open] > .nav-region-trigger{
    color:var(--pink);
  }

  .nav-region[open] > .nav-region-trigger::after{
    content:"⌃";
  }

  .nav-region-links{
    position:static;
    width:auto;
    display:grid;
    gap:0;
    padding:1px 0 11px 18px;
    border:0;
    background:transparent;
    box-shadow:none;
  }

  .site-header .main-nav .nav-region-links a{
    padding:9px 0;
    border:0;
    color:var(--text);
    font-size:1rem;
    font-weight:650;
    line-height:1.35;
  }

  .site-header .main-nav .nav-region-links a:hover,
  .site-header .main-nav .nav-region-links a:focus-visible{
    color:var(--pink);
    background:transparent;
  }

  /* Keep voucher types in the mobile menu, but visually separate them from
     the Areas accordion so the location hierarchy stays simple. */
  .header-voucher-group{
    margin:24px 0 0;
    padding:24px 4px 0;
    border-top:1px solid var(--line);
  }

  .header-nav-label-voucher{
    display:block;
    margin-bottom:5px;
    color:#2B9EB3;
    font-size:.82rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .site-header .main-nav > .header-voucher-group > a{
    display:block;
    padding:11px 0;
    border:0;
    color:var(--navy);
    font-size:1rem;
    font-weight:750;
  }

  .site-header .main-nav > .header-voucher-group > a:hover,
  .site-header .main-nav > .header-voucher-group > a:focus-visible{
    color:var(--pink);
  }
}

@media (max-width:650px){
  .site-header .main-nav{
    padding:28px 22px 36px;
  }

  .nav-area-panel{
    padding-left:3px;
  }

  .nav-area-trigger{
    font-size:.82rem;
  }

  .nav-region-trigger{
    font-size:1rem;
  }
}

/* ========================================================================
   Desktop hover-only location menu - 30 Aug 2026
   Mobile accordion remains unchanged.
   ======================================================================== */

.desktop-area-menu{
  display:none;
}

@media (min-width:951px){
  /* Hide the click/tap details menu on desktop. */
  .header-location-group > .nav-area-menu{
    display:none !important;
  }

  .desktop-area-menu{
    position:relative;
    display:block;
  }

  /* Group headings are labels, not links. */
  .header-nav-label{
    font-weight:400;
  }

  /* By Area looks exactly like the voucher links and never changes colour. */
  .desktop-area-trigger{
    position:relative;
    display:block;
    padding:7px 19px 7px 0;
    color:#434F69;
    font-size:.9rem;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
    cursor:default;
  }

  .desktop-area-trigger::after{
    content:"";
    position:absolute;
    right:1px;
    top:50%;
    width:7px;
    height:7px;
    margin-top:-6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
  }

  /* First level opens purely from hovering anywhere over By Area or its list. */
  .desktop-area-panel{
    position:absolute;
    z-index:100;
    top:100%;
    left:0;
    width:236px;
    padding:7px 14px 10px;
    border:1px solid rgba(67,79,105,.10);
    border-top:0;
    border-radius:0 0 12px 12px;
    background:#fff;
    box-shadow:0 16px 34px rgba(67,79,105,.12);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .desktop-area-menu:hover > .desktop-area-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .desktop-area-menu:hover > .desktop-area-trigger{
    color:var(--navy);
  }

  .desktop-area-menu:hover > .desktop-area-trigger::after{
    margin-top:-2px;
    transform:rotate(225deg);
  }

  .desktop-region{
    position:relative;
    border-bottom:1px solid rgba(67,79,105,.36);
  }

  .desktop-region-trigger{
    position:relative;
    display:block;
    width:100%;
    padding:9px 28px 9px 0;
    color:var(--navy);
    font-size:.9rem;
    font-weight:800;
    line-height:1.25;
    cursor:default;
  }

  .desktop-region-trigger::after{
    content:"+";
    position:absolute;
    right:1px;
    top:50%;
    transform:translateY(-50%);
    color:var(--pink);
    font-size:1.05rem;
    font-weight:900;
  }

  .desktop-region:hover > .desktop-region-trigger{
    color:var(--pink);
  }

  .desktop-region:hover > .desktop-region-trigger::after{
    content:"-";
  }

  /* Second level opens purely from hovering anywhere over the region row.
     It touches the first-level panel so there is no dead mouse gap. */
  .desktop-region-links{
    position:absolute;
    z-index:110;
    top:-1px;
    left:100%;
    width:255px;
    display:grid;
    gap:0;
    padding:4px 0 5px 18px;
    background:#fff;
    box-shadow:12px 12px 26px rgba(67,79,105,.08);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .desktop-region:hover > .desktop-region-links{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .site-header .main-nav .desktop-region-links a{
    display:block;
    padding:8px 10px;
    border:0;
    color:var(--navy);
    font-size:.84rem;
    font-weight:700;
    line-height:1.3;
    white-space:normal;
  }

  .site-header .main-nav .desktop-region-links a:hover{
    color:var(--pink);
    background:rgba(247,32,121,.035);
  }

  .site-header .main-nav .desktop-view-all{
    display:block;
    margin:11px 0 0;
    padding:7px 0 2px;
    border:0;
    color:var(--pink);
    font-size:.82rem;
    font-weight:800;
  }
}

@media (max-width:950px){
  /* Desktop-only duplicate is completely removed from mobile layout. */
  .desktop-area-menu{
    display:none !important;
  }
}

/* ========================================================================
   About Us page - MysteryPicnic.co.uk
   ======================================================================== */
.about-page{
  overflow-x:clip;
}

.about-hero{
  position:relative;
  overflow:hidden;
  padding:76px 0 0;
  background:
    radial-gradient(circle at 88% 10%,rgba(43,158,179,.18),transparent 24%),
    radial-gradient(circle at 12% 88%,rgba(43,158,179,.10),transparent 28%),
    linear-gradient(135deg,#26334d 0%,#434F69 62%,#344057 100%);
  color:#fff;
}

.about-hero::after{
  content:"?";
  position:absolute;
  right:-10px;
  top:-115px;
  color:rgba(255,255,255,.035);
  font-family:Georgia,"Times New Roman",serif;
  font-size:520px;
  line-height:1;
  pointer-events:none;
}

.about-hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(390px,.65fr);
  gap:68px;
  align-items:center;
  padding-bottom:78px;
}

.about-hero-copy .eyebrow{
  color:#fff;
  opacity:.84;
}

.about-hero h1{
  max-width:790px;
  margin-bottom:10px;
  color:#fff;
  font-size:clamp(3.3rem,6.6vw,6.3rem);
}

.about-hero h1 .about-mystery-word{
  color:#7fd4e2;
  text-shadow:0 0 18px rgba(43,158,179,.16);
}

.about-hero-kicker{
  margin:0 0 23px;
  color:#FFE916;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.45rem,2.2vw,2rem);
}

.about-hero-lead{
  max-width:690px;
  margin:0;
  color:rgba(255,255,255,.86);
  font-size:1.09rem;
  line-height:1.78;
}

.about-hero-actions{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:31px;
}

.about-hero-link{
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

.about-hero-link:hover,
.about-hero-link:focus-visible{
  color:#FFE916;
}

.about-mystery-card{
  position:relative;
  padding:31px 29px 28px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  background:rgba(255,255,255,.095);
  box-shadow:0 24px 54px rgba(18,27,42,.18);
  backdrop-filter:blur(9px);
}

.about-mystery-card::before{
  content:"";
  position:absolute;
  inset:14px -14px -14px 14px;
  z-index:-1;
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(43,158,179,.23) 0 13%,transparent 13% 26%,rgba(255,255,255,.05) 26% 39%,transparent 39% 100%),
    linear-gradient(rgba(43,158,179,.23) 0 13%,transparent 13% 26%,rgba(255,255,255,.05) 26% 39%,transparent 39% 100%);
  background-size:46px 46px;
  opacity:.85;
}

.about-mystery-heading{
  margin-bottom:18px;
}

.about-mystery-heading .eyebrow{
  color:#7fd4e2;
  opacity:1;
  margin-bottom:8px;
}

.about-mystery-heading h2{
  margin-bottom:0;
  color:#fff;
  font-size:clamp(1.8rem,2.5vw,2.45rem);
}

.about-mystery-list{
  display:grid;
  gap:0;
}

.about-mystery-list>div{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:14px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.14);
}

.about-mystery-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:1rem;
  font-weight:900;
}

.about-mystery-icon-teal{
  color:#fff;
  background:rgba(43,158,179,.30);
  box-shadow:inset 0 0 0 1px rgba(127,212,226,.34);
}

.about-mystery-icon-pink{
  color:#fff;
  background:rgba(43,158,179,.30);
  box-shadow:inset 0 0 0 1px rgba(127,212,226,.34);
}

.about-mystery-icon-gold{
  color:var(--navy-deep);
  background:#FFE916;
}

.about-mystery-list p{
  margin:0;
}

.about-mystery-list strong{
  display:block;
  color:#fff;
  margin-bottom:3px;
}

.about-mystery-list span:not(.about-mystery-icon){
  display:block;
  color:rgba(255,255,255,.70);
  font-size:.91rem;
  line-height:1.5;
}

.about-hero .gingham-rule{
  margin-top:0;
  opacity:1;
  background:linear-gradient(90deg,#434F69 0 12px,#fff 12px 24px,#2B9EB3 24px 36px,#fff 36px 48px) 0 0/48px 9px;
}

.about-intro-section{
  padding:98px 0 104px;
  background:#fff;
}

.about-intro-grid{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:76px;
  align-items:start;
}

.about-sticky-heading{
  position:sticky;
  top:116px;
}

.about-sticky-heading h2{
  max-width:520px;
}

.about-sticky-heading .lead{
  max-width:500px;
  margin-bottom:0;
  line-height:1.72;
}

.about-prose>p{
  color:var(--muted);
  font-size:1.07rem;
  line-height:1.82;
}

.about-prose .about-emphasis,
.about-location-copy .about-emphasis{
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.38rem;
  line-height:1.55;
}

.about-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:34px;
}

.about-detail-card{
  position:relative;
  padding:26px 24px 24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 30px rgba(67,79,105,.07);
}

.about-detail-number{
  display:inline-block;
  margin-bottom:15px;
  color:var(--pink);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.12em;
}

.about-detail-card h3{
  margin-bottom:9px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.4rem;
  font-weight:500;
}

.about-detail-card p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.62;
}

.about-why-section{
  padding:94px 0 98px;
  background:#f7fbfc;
  border-top:1px solid rgba(43,158,179,.10);
  border-bottom:1px solid rgba(43,158,179,.10);
}

.about-section-heading{
  max-width:820px;
  margin:0 auto 40px;
}

.about-section-heading .lead{
  margin-bottom:0;
}

.about-journey-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:17px;
}

.about-journey-card{
  position:relative;
  min-height:245px;
  padding:28px 24px 25px;
  border:1px solid rgba(67,79,105,.12);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 30px rgba(67,79,105,.07);
}

.about-journey-card::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:-1px;
  height:4px;
  border-radius:0 0 999px 999px;
  background:#2B9EB3;
}

.about-journey-card:nth-child(2)::before,
.about-journey-card:nth-child(4)::before{
  background:var(--pink);
}

.about-journey-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin-bottom:20px;
  border-radius:50%;
  background:rgba(43,158,179,.09);
  color:#2B9EB3;
  font-size:1.25rem;
  font-weight:900;
}

.about-journey-card:nth-child(2) .about-journey-icon,
.about-journey-card:nth-child(4) .about-journey-icon{
  background:rgba(247,32,121,.08);
  color:var(--pink);
}

.about-journey-card h3{
  margin-bottom:10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.46rem;
  font-weight:500;
}

.about-journey-card p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.64;
}

.about-locations-section{
  padding:104px 0;
  background:#fff;
}

.about-locations-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,.82fr);
  gap:70px;
  align-items:center;
}

.about-location-copy .lead{
  max-width:700px;
  line-height:1.74;
}

.about-location-copy>p:not(.eyebrow):not(.lead):not(.about-emphasis){
  color:var(--muted);
  font-size:1.03rem;
  line-height:1.76;
}

.about-location-copy .button{
  margin-top:10px;
}

.about-location-map .location-map-card{
  margin:0;
}

.about-booking-section{
  padding:96px 0 100px;
  background:#fff7fa;
  border-top:1px solid rgba(247,32,121,.08);
}

.about-booking-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:1100px;
  margin:0 auto;
}

.about-booking-step{
  padding:29px 27px 27px;
  border:1px solid rgba(67,79,105,.14);
  border-radius:23px;
  background:#fff;
  box-shadow:0 13px 32px rgba(67,79,105,.08);
}

.about-booking-step>span{
  display:grid;
  place-items:center;
  width:47px;
  height:34px;
  margin-bottom:20px;
  border-radius:999px;
  background:rgba(247,32,121,.08);
  color:var(--pink);
  font-size:.78rem;
  font-weight:900;
}

.about-booking-step h3{
  margin-bottom:10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.5rem;
  font-weight:500;
}

.about-booking-step p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.65;
}

.about-provider-note{
  max-width:900px;
  margin:24px auto 0;
  padding:20px 24px;
  border-left:4px solid #2B9EB3;
  border-radius:0 15px 15px 0;
  background:#fff;
  color:var(--muted);
  box-shadow:0 10px 26px rgba(67,79,105,.06);
}

.about-provider-note p{
  margin:0;
  line-height:1.66;
}

.about-provider-note strong{
  color:var(--navy);
}

.about-final-section{
  padding:74px 0;
  background:linear-gradient(120deg,#26334d 0%,#434F69 72%);
  color:#fff;
}

.about-final-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
}

.about-final-inner>div{
  max-width:780px;
}

.about-final-section h2,
.about-final-section p{
  color:#fff;
}

.about-final-section h2{
  margin-bottom:12px;
}

.about-final-section p{
  color:rgba(255,255,255,.80);
  line-height:1.72;
}

.about-final-section .about-final-last{
  margin-bottom:0;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.28rem;
}

@media (max-width:1000px){
  .about-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);
    gap:42px;
  }

  .about-intro-grid{
    gap:48px;
  }

  .about-journey-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .about-locations-grid{
    grid-template-columns:1fr;
    gap:44px;
  }

  .about-location-map{
    width:min(640px,100%);
    margin-inline:auto;
  }
}

@media (max-width:800px){
  .about-hero{
    padding-top:56px;
  }

  .about-hero-grid,
  .about-intro-grid{
    grid-template-columns:1fr;
  }

  .about-hero-copy{
    max-width:760px;
  }

  .about-mystery-card{
    width:min(620px,100%);
  }

  .about-sticky-heading{
    position:static;
  }

  .about-booking-grid{
    grid-template-columns:1fr;
    max-width:650px;
  }
}

@media (max-width:650px){
  .about-hero{
    padding-top:42px;
  }

  .about-hero::after{
    right:-40px;
    top:-38px;
    font-size:280px;
  }

  .about-hero-grid{
    gap:34px;
    padding-bottom:58px;
  }

  .about-hero h1{
    font-size:clamp(3rem,14vw,4.7rem);
  }

  .about-hero-actions{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }

  .about-mystery-card{
    padding:25px 22px 22px;
    border-radius:22px;
  }

  .about-mystery-card::before{
    inset:10px -9px -10px 9px;
    border-radius:22px;
  }

  .about-intro-section,
  .about-why-section,
  .about-locations-section,
  .about-booking-section{
    padding:68px 0;
  }

  .about-detail-grid,
  .about-journey-grid{
    grid-template-columns:1fr;
  }

  .about-detail-card,
  .about-journey-card,
  .about-booking-step{
    padding:24px 22px 22px;
  }

  .about-journey-card{
    min-height:0;
  }

  .about-final-section{
    padding:62px 0;
  }

  .about-final-inner{
    display:block;
  }

  .about-final-section .button{
    margin-top:22px;
  }
}


/* ========================================================================
   Header About Us link - 12 Sept 2026
   ======================================================================== */
@media (min-width:951px){
  .site-header .header-about-group{
    flex:0 0 auto;
    margin-left:0;
  }

  .site-header .main-nav .header-about-link{
    color:#26334D;
    font-size:.9rem;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
  }

  .site-header .main-nav .header-about-link:hover,
  .site-header .main-nav .header-about-link:focus-visible{
    color:var(--pink);
  }
}

@media (max-width:1180px) and (min-width:951px){
  .site-header .main-nav .header-about-link{
    font-size:.84rem;
  }
}

@media (max-width:950px){
  .site-header .header-about-group{
    display:block;
    margin:0;
    padding:0 4px;
  }

  .site-header .main-nav .header-about-link{
    display:block;
    padding:11px 0;
    border:0;
    color:#26334D;
    font-size:1rem;
    font-weight:750;
    text-decoration:none;
  }

  .site-header .main-nav .header-about-link:hover,
  .site-header .main-nav .header-about-link:focus-visible{
    color:var(--pink);
  }
}

/* ========================================================================
   Header separation and label emphasis - 12 Sept 2026
   ======================================================================== */
@media (min-width:951px){
  /* Make the two navigation category labels read more clearly. */
  .site-header .header-nav-label{
    font-weight:800;
  }

  /* About Us is a site link, not part of Voucher Types. */
  .site-header .header-about-group{
    min-height:32px;
    margin-left:4px;
    padding-left:24px;
    border-left:1px solid rgba(67,79,105,.32);
    align-items:center;
  }
}

@media (max-width:1180px) and (min-width:951px){
  .site-header .header-about-group{
    margin-left:0;
    padding-left:16px;
  }
}

/* ========================================================================
   About Us - photographic "not really just picnics" section
   Reuses the same three-image collage as the homepage hero.
   ======================================================================== */
.about-page .about-why-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#434F69;
  border-top:0;
  border-bottom:0;
}

.about-page .about-why-panels{
  position:absolute;
  z-index:-3;
  inset:0;
  display:grid;
  grid-template-columns:.88fr 1.34fr .94fr;
}

.about-page .about-why-panel{
  min-width:0;
  overflow:hidden;
}

.about-page .about-why-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.about-page .about-why-panel:first-child img{
  object-position:center 48%;
}

.about-page .about-why-panel-wide img{
  object-position:center 56%;
}

.about-page .about-why-panel:last-child img{
  object-position:center 50%;
}

.about-page .about-why-filter{
  position:absolute;
  z-index:-2;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(38,51,77,.78) 0%,
      rgba(38,51,77,.68) 32%,
      rgba(38,51,77,.54) 60%,
      rgba(38,51,77,.47) 100%),
    linear-gradient(0deg,rgba(20,28,43,.18),rgba(20,28,43,.18));
}

.about-page .about-why-content{
  position:relative;
  z-index:1;
}

.about-page .about-why-section .about-section-heading .eyebrow{
  color:#7fd4e2;
  text-shadow:0 2px 12px rgba(17,24,38,.24);
}

.about-page .about-why-section .about-section-heading h2{
  color:#fff;
  text-shadow:0 3px 18px rgba(17,24,38,.22);
}

.about-page .about-why-section .about-section-heading .lead{
  color:rgba(255,255,255,.90);
  text-shadow:0 2px 12px rgba(17,24,38,.22);
}

.about-page .about-why-section .about-journey-card{
  background:rgba(255,255,255,.96);
  border-color:rgba(255,255,255,.48);
  box-shadow:0 16px 38px rgba(16,24,39,.20);
  backdrop-filter:blur(3px);
}

@media (max-width:900px){
  .about-page .about-why-panels{
    grid-template-columns:1fr 1fr;
  }

  .about-page .about-why-panel:last-child{
    display:none;
  }

  .about-page .about-why-filter{
    background:
      linear-gradient(90deg,rgba(38,51,77,.80) 0%,rgba(38,51,77,.62) 100%),
      linear-gradient(0deg,rgba(20,28,43,.16),rgba(20,28,43,.16));
  }
}

@media (max-width:650px){
  .about-page .about-why-panels{
    grid-template-columns:1fr;
  }

  .about-page .about-why-panel{
    display:none;
  }

  .about-page .about-why-panel:first-child{
    display:block;
  }

  .about-page .about-why-panel:first-child img{
    object-position:center 45%;
  }

  .about-page .about-why-filter{
    background:
      linear-gradient(0deg,
        rgba(38,51,77,.88) 0%,
        rgba(38,51,77,.72) 50%,
        rgba(38,51,77,.52) 100%);
  }

  .about-page .about-why-section .about-journey-card{
    backdrop-filter:none;
  }
}


/* ========================================================================
   About Us - transparent animated journey cards - 12 Sept 2026
   Reuses the shared data-step-autoplay behaviour, with teal/yellow accents.
   ======================================================================== */
.about-page .about-why-section .about-journey-card.step{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:245px;
  padding:28px 24px 25px;
  background:linear-gradient(135deg,rgba(43,158,179,.17),rgba(20,28,43,.16));
  border:1px solid rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 38px rgba(15,23,38,.11);
  backdrop-filter:blur(2px);
  backface-visibility:hidden;
  transform:translateZ(0);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

/* Restore the shared glass highlight layer. Earlier About card CSS used
   ::before for a coloured top stripe. */
.about-page .about-why-section .about-journey-card.step::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  height:auto;
  border-radius:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 42%,rgba(255,255,255,.035));
}

/* Teal at rest, yellow while the card is highlighted. */
.about-page .about-why-section .about-journey-card.step::after{
  content:"";
  position:absolute;
  z-index:3;
  left:24px;
  right:24px;
  top:0;
  height:3px;
  border-radius:0 0 999px 999px;
  background:rgba(43,158,179,.92);
  box-shadow:0 0 10px rgba(43,158,179,.18);
  transition:background-color .22s ease,box-shadow .22s ease;
}

.about-page .about-why-section .about-journey-card.step > *{
  position:relative;
  z-index:2;
}

.about-page .about-why-section .about-journey-card.step h3{
  color:#fff;
  text-shadow:0 2px 10px rgba(17,24,38,.20);
}

.about-page .about-why-section .about-journey-card.step p{
  color:rgba(255,255,255,.90);
  text-shadow:0 1px 8px rgba(17,24,38,.16);
}

.about-page .about-why-section .about-journey-card.step .about-journey-icon,
.about-page .about-why-section .about-journey-card.step:nth-child(2) .about-journey-icon,
.about-page .about-why-section .about-journey-card.step:nth-child(4) .about-journey-icon{
  background:rgba(43,158,179,.16);
  border:1px solid rgba(127,212,226,.42);
  color:#8bdce8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.about-page .about-why-section .about-journey-card.step:hover,
.about-page .about-why-section .about-journey-card.step:focus-within,
.about-page .about-why-section .about-journey-card.step.is-active{
  transform:translateY(-6px) translateZ(0);
  background:linear-gradient(135deg,rgba(22,31,47,.31),rgba(255,255,255,.075));
  border-color:rgba(255,255,255,.64);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 24px 50px rgba(15,23,38,.18);
}

.about-page .about-why-section .about-journey-card.step:hover::after,
.about-page .about-why-section .about-journey-card.step:focus-within::after,
.about-page .about-why-section .about-journey-card.step.is-active::after{
  background:#FFE916;
  box-shadow:0 0 14px rgba(255,233,22,.26);
}

.about-page .about-why-section .about-journey-card.step:hover .about-journey-icon,
.about-page .about-why-section .about-journey-card.step:focus-within .about-journey-icon,
.about-page .about-why-section .about-journey-card.step.is-active .about-journey-icon{
  background:rgba(255,233,22,.14);
  border-color:rgba(255,233,22,.58);
  color:#FFE916;
}

@media (max-width:650px){
  .about-page .about-why-section .about-journey-card.step{
    min-height:0;
    backdrop-filter:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .about-page .about-why-section .about-journey-card.step.is-active{
    transform:none;
  }
}

/* ========================================================================
   About Us: voucher flexibility reassurance band
   ======================================================================== */
.about-flex-section{
  padding:82px 0 88px;
  background:#434F69;
  color:#fff;
}

.about-flex-heading{
  max-width:860px;
  margin:0 auto 42px;
}

.about-flex-heading .eyebrow{
  margin-bottom:11px;
  color:var(--pink);
}

.about-flex-heading h2{
  margin-bottom:17px;
  color:#fff;
  font-size:clamp(2.2rem,3.7vw,3.65rem);
}

.about-flex-heading>p:last-child{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:1.08rem;
}

.about-flex-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:1180px;
  margin:0 auto;
}

.about-flex-benefit{
  display:flex;
  align-items:flex-start;
  gap:17px;
  min-height:184px;
  padding:30px 34px;
}

.about-flex-benefit + .about-flex-benefit{
  border-left:1px solid rgba(255,255,255,.18);
}

.about-flex-icon{
  flex:0 0 50px;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(247,32,121,.12);
  color:var(--pink);
  box-shadow:inset 0 0 0 1px rgba(247,32,121,.25);
}

.about-flex-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.about-flex-benefit strong{
  display:block;
  margin:3px 0 7px;
  color:#fff;
  font-size:1rem;
  line-height:1.35;
}

.about-flex-benefit div>span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:.9rem;
  line-height:1.5;
}

@media (max-width:900px){
  .about-flex-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .about-flex-benefit{
    min-height:150px;
  }

  .about-flex-benefit:nth-child(3){
    border-left:0;
    border-top:1px solid rgba(255,255,255,.18);
  }

  .about-flex-benefit:nth-child(4){
    border-top:1px solid rgba(255,255,255,.18);
  }
}

@media (max-width:650px){
  .about-flex-section{
    padding:64px 0 68px;
  }

  .about-flex-heading{
    margin-bottom:26px;
  }

  .about-flex-grid{
    grid-template-columns:1fr;
  }

  .about-flex-benefit,
  .about-flex-benefit:nth-child(3),
  .about-flex-benefit:nth-child(4){
    min-height:0;
    padding:21px 8px;
    border-left:0;
  }

  .about-flex-benefit + .about-flex-benefit,
  .about-flex-benefit:nth-child(3),
  .about-flex-benefit:nth-child(4){
    border-top:1px solid rgba(255,255,255,.18);
  }

  .about-flex-icon{
    flex-basis:44px;
    width:44px;
    height:44px;
  }
}


/* ========================================================================
   Mystery Picnic animated header logo + static question-mark footer
   13 Sep 2026

   Opening visit:
   question mark + magnifying glass -> magnifier investigates -> MP rests.
   Later pages in the same browser session load directly on MP.
   Hover / keyboard focus replays the sequence once, then returns to MP.
   ======================================================================== */

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.brand{
  position:relative;
  display:block;
  width:66px;
  height:66px;
  overflow:visible;
}

.brand-logo{
  position:relative;
  display:block;
  width:66px;
  height:66px;
  overflow:visible;
  isolation:isolate;
}

.brand .brand-logo-layer{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  transform-origin:center;
}

/* Permanent tartan backing. */
.brand-logo-base{
  z-index:1;
}

/* Opening mystery mark. */
.brand-logo-question{
  z-index:2;
  opacity:1;
}

/* Small clue glass hangs just beyond the lower-right corner. */
.brand .brand-logo-magnifier{
  z-index:4;
  inset:auto;
  width:48%;
  height:48%;
  right:-13%;
  bottom:-16%;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:60% 45%;
}

/* Resting brand mark. */
.brand-logo-mp{
  z-index:3;
  opacity:0;
}

/* On later page loads in the same session, show the resting MP immediately. */
html.mp-logo-intro-seen .brand-logo-question,
html.mp-logo-intro-seen .brand-logo-magnifier{
  opacity:0;
}

html.mp-logo-intro-seen .brand-logo-mp{
  opacity:1;
}

/* Intro: preserve the intriguing opening frame briefly, then investigate. */
.brand-logo.is-intro-running .brand-logo-question{
  animation:mpLogoQuestionIntro 2.05s ease-in-out both;
}

.brand-logo.is-intro-running .brand-logo-magnifier{
  animation:
    mpLogoMagnifierMoveIntro 1.55s cubic-bezier(.22,.72,.25,1) both,
    mpLogoMagnifierFadeIntro 1.45s linear 1.45s both;
}

.brand-logo.is-intro-running .brand-logo-mp{
  animation:mpLogoMpIntro 2.05s ease-in-out both;
}

/* Resting state after either animation. */
.brand-logo.is-resting .brand-logo-question,
.brand-logo.is-resting .brand-logo-magnifier{
  opacity:0;
  animation:none;
}

.brand-logo.is-resting .brand-logo-mp{
  opacity:1;
  animation:none;
}

/* Hover/focus replay:
   MP -> opening mystery frame -> magnifier investigation -> MP. */
.brand-logo.is-replaying .brand-logo-question{
  animation:mpLogoQuestionReplay 2.20s ease-in-out both;
}

.brand-logo.is-replaying .brand-logo-magnifier{
  animation:
    mpLogoMagnifierMoveReplay 1.70s cubic-bezier(.22,.72,.25,1) both,
    mpLogoMagnifierFadeReplay 1.45s linear 1.55s both;
}

.brand-logo.is-replaying .brand-logo-mp{
  animation:mpLogoMpReplay 2.20s ease-in-out both;
}

@keyframes mpLogoQuestionIntro{
  0%,36%{
    opacity:1;
    transform:scale(1);
  }
  48%{
    opacity:.62;
    transform:scale(.997);
  }
  59%{
    opacity:.16;
    transform:scale(.993);
  }
  64%,100%{
    opacity:0;
    transform:scale(.99);
  }
}

/* Movement and dissolve are deliberately separate. The glass moves once,
   stops, then fades linearly and visibly over 1.45 seconds. */
@keyframes mpLogoMagnifierMoveIntro{
  0%,30%{
    transform:translate3d(0,0,0) scale(1);
  }
  100%{
    transform:translate3d(-76%,-72%,0) scale(3.05);
  }
}

@keyframes mpLogoMagnifierFadeIntro{
  0%{opacity:1;}
  20%{opacity:.82;}
  40%{opacity:.64;}
  60%{opacity:.44;}
  80%{opacity:.22;}
  100%{opacity:0;}
}

@keyframes mpLogoMpIntro{
  0%,51%{
    opacity:0;
    transform:scale(.99);
  }
  62%{
    opacity:.35;
    transform:scale(.994);
  }
  74%,100%{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes mpLogoQuestionReplay{
  0%,10%{
    opacity:0;
    transform:scale(.99);
  }
  20%,39%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:.62;
    transform:scale(.997);
  }
  60%{
    opacity:.16;
    transform:scale(.993);
  }
  65%,100%{
    opacity:0;
    transform:scale(.99);
  }
}

@keyframes mpLogoMagnifierMoveReplay{
  0%,22%{
    transform:translate3d(0,0,0) scale(1);
  }
  100%{
    transform:translate3d(-76%,-72%,0) scale(3.05);
  }
}

@keyframes mpLogoMagnifierFadeReplay{
  0%{opacity:1;}
  20%{opacity:.82;}
  40%{opacity:.64;}
  60%{opacity:.44;}
  80%{opacity:.22;}
  100%{opacity:0;}
}

@keyframes mpLogoMpReplay{
  0%,12%{
    opacity:1;
    transform:scale(1);
  }
  22%,52%{
    opacity:0;
    transform:scale(.99);
  }
  64%{
    opacity:.35;
    transform:scale(.994);
  }
  76%,100%{
    opacity:1;
    transform:scale(1);
  }
}

@media (prefers-reduced-motion:reduce){
  .brand-logo-question,
  .brand-logo-magnifier{
    display:none!important;
  }

  .brand-logo-mp{
    opacity:1!important;
    animation:none!important;
    transform:none!important;
  }
}


/* ========================================================================
   Footer logo interaction — 13 Sep 2026
   Default/resting state is the tartan + question mark (matching favicon).
   Hover/focus summons the magnifying glass, reveals MP underneath, then the
   magnifying glass slowly dissolves. Leaving the logo gently restores ?.
   ======================================================================== */

.footer-brand-link{
  display:inline-block;
  text-decoration:none;
}

.footer-logo{
  position:relative;
  display:block;
  width:92px;
  height:92px;
  margin-bottom:18px;
  overflow:visible;
  isolation:isolate;
}

.footer-logo-layer{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  transform-origin:center;
}

.footer-logo-base{
  z-index:1;
}

.footer-logo-question{
  z-index:2;
  opacity:1;
}

.footer-logo-mp{
  z-index:3;
  opacity:0;
}

.footer-logo-magnifier{
  z-index:4;
  inset:auto;
  width:48%;
  height:48%;
  right:-13%;
  bottom:-16%;
  opacity:0;
  transform:translate3d(0,0,0) scale(.9);
  transform-origin:60% 45%;
}

/* The hover/focus reveal uses the same visual story as the header, but the
   footer begins with the plain question-mark logo: no glass until engaged. */
.footer-logo.is-footer-revealing .footer-logo-question{
  animation:mpFooterQuestionReveal 2.35s ease-in-out both;
}

.footer-logo.is-footer-revealing .footer-logo-magnifier{
  animation:
    mpFooterMagnifierMove 1.62s cubic-bezier(.22,.72,.25,1) both,
    mpFooterMagnifierFade 1.45s linear 1.52s both;
}

.footer-logo.is-footer-revealing .footer-logo-mp{
  animation:mpFooterMpReveal 2.35s ease-in-out both;
}

.footer-logo.is-footer-mp .footer-logo-question,
.footer-logo.is-footer-mp .footer-logo-magnifier{
  opacity:0;
  animation:none;
}

.footer-logo.is-footer-mp .footer-logo-mp{
  opacity:1;
  animation:none;
}

/* After the pointer/focus leaves, quietly return to the favicon-like ?. */
.footer-logo.is-footer-resetting .footer-logo-question{
  animation:mpFooterQuestionReset .42s ease-out both;
}

.footer-logo.is-footer-resetting .footer-logo-mp{
  animation:mpFooterMpReset .42s ease-out both;
}

.footer-logo.is-footer-resetting .footer-logo-magnifier{
  opacity:0;
  animation:none;
}

@keyframes mpFooterQuestionReveal{
  0%,34%{
    opacity:1;
    transform:scale(1);
  }
  47%{
    opacity:.62;
    transform:scale(.997);
  }
  58%{
    opacity:.16;
    transform:scale(.993);
  }
  64%,100%{
    opacity:0;
    transform:scale(.99);
  }
}

@keyframes mpFooterMagnifierMove{
  0%{
    opacity:1;
    transform:translate3d(0,0,0) scale(.92);
  }
  18%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  100%{
    opacity:1;
    transform:translate3d(-76%,-72%,0) scale(3.05);
  }
}

@keyframes mpFooterMagnifierFade{
  0%{opacity:1;}
  20%{opacity:.82;}
  40%{opacity:.64;}
  60%{opacity:.44;}
  80%{opacity:.22;}
  100%{opacity:0;}
}

@keyframes mpFooterMpReveal{
  0%,51%{
    opacity:0;
    transform:scale(.99);
  }
  62%{
    opacity:.35;
    transform:scale(.994);
  }
  74%,100%{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes mpFooterQuestionReset{
  0%{opacity:0;transform:scale(.99);}
  100%{opacity:1;transform:scale(1);}
}

@keyframes mpFooterMpReset{
  0%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(.99);}
}

@media (prefers-reduced-motion:reduce){
  .footer-logo-question{
    opacity:1!important;
    display:block!important;
    animation:none!important;
    transform:none!important;
  }

  .footer-logo-magnifier,
  .footer-logo-mp{
    display:none!important;
    animation:none!important;
  }
}


/* ========================================================================
   Footer animated-logo sizing correction
   The older shared .footer-brand img rule sets every image to 92px x 92px.
   These more-specific rules restore the intended layered sizing so only the
   tartan/question/MP fill the 92px logo box and the magnifier begins at 48%.
   ======================================================================== */
.footer-brand .footer-logo-layer{
  width:100%;
  height:100%;
  margin:0;
}

.footer-brand .footer-logo-magnifier{
  width:48%;
  height:48%;
  right:-13%;
  bottom:-16%;
  margin:0;
}

@media (max-width:650px){
  .footer-brand .footer-logo-magnifier{
    width:48%;
    height:48%;
  }
}

/* ========================================================================
   All Locations search page - 13 Sept 2026
   Shared styles for /locations/
   ======================================================================== */

.locations-page{--teal:#2B9EB3;--lpink:#fff3f8;--lborder:#e4e8ef;--lshadow:0 14px 34px rgba(67,79,105,.10)}
.locations-page main{overflow:hidden}
.locations-hero{padding:58px 0 48px;background:linear-gradient(180deg,#fff,#fbfcfe);border-bottom:1px solid var(--line)}
.locations-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:42px;align-items:center}
.locations-hero h1{margin-bottom:16px}.locations-hero .lead{margin:0;max-width:760px}
.locations-note{background:#434F69;color:#fff;border-radius:22px;padding:26px 28px;box-shadow:var(--lshadow)}
.locations-note strong{display:block;color:#fff;font-family:Georgia,serif;font-size:1.4rem;line-height:1.2;margin-bottom:8px}
.locations-note p{margin:0;color:rgba(255,255,255,.82)}
.locations-search-section{padding:38px 0 22px}
.locations-search-box{background:rgba(247,32,121,.04);border:1px solid #cfd6e2;border-radius:22px;padding:20px;box-shadow:0 0 0 1px rgba(67,79,105,.025),var(--lshadow)}
.locations-search-row{display:grid;grid-template-columns:1fr auto;gap:12px}
#location-search{width:100%;min-height:56px;border:1px solid #cfd5df;border-radius:999px;padding:0 20px;font:inherit}
#location-search:focus{outline:4px solid rgba(247,32,121,.11);border-color:#F72079}
.locations-search-row .button{border:0;cursor:pointer;min-width:165px}
.location-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.location-filter{min-height:43px;border:1px solid #d5dbe4;border-radius:999px;background:#fff;color:#434F69;padding:0 13px;font:inherit;font-weight:700}
.location-helper{margin:13px 2px 0;color:#687083;font-size:.88rem}
.locations-results{padding:18px 0 58px}
.locations-results-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}
.locations-results-head h2{margin-bottom:4px}.locations-summary{margin:0;color:#687083}
.location-sort{display:flex;align-items:center;gap:8px;color:#687083;font-size:.9rem}
.location-sort select{min-height:42px;border:1px solid #d5dbe4;border-radius:999px;padding:0 13px;background:#fff;color:#434F69;font:inherit;font-weight:700}
.locations-status{display:none;margin:0 0 16px;padding:12px 14px;border-radius:13px;background:#eef8fa;border:1px solid #cce8ed;color:#255d67;font-size:.9rem}
.locations-status.show{display:block}
.locations-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.location-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lborder);border-radius:19px;overflow:hidden;box-shadow:0 9px 25px rgba(67,79,105,.08)}
.location-card[hidden]{display:none!important}
.location-card-image{position:relative;aspect-ratio:16/9;overflow:hidden;background:#edf0f4}
.location-card-image img{width:100%;height:100%;object-fit:cover}
.location-badge{position:absolute;left:11px;top:11px;border-radius:999px;padding:5px 9px;font-size:.73rem;font-weight:800;background:#fff;color:#434F69;border:1px solid rgba(67,79,105,.15)}
.location-badge.live{background:#e9f8fb;color:#176e7e;border-color:rgba(43,158,179,.35)}
.location-body{display:flex;flex-direction:column;flex:1;padding:17px}
.location-kicker{margin:0 0 5px;color:#F72079;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:800}
.location-card h3{font-family:Georgia,serif;font-size:1.45rem;margin-bottom:7px}
.location-preview{color:#687083;font-size:.91rem;line-height:1.48;margin-bottom:14px}
.location-meta{display:grid;gap:7px;margin-top:auto;padding:12px 0;border-top:1px solid #eceff3;border-bottom:1px solid #eceff3}
.location-meta div{display:grid;grid-template-columns:100px 1fr;gap:8px;font-size:.85rem;line-height:1.35}
.location-meta dt{color:#687083;font-weight:650}.location-meta dd{margin:0;color:#343A48;font-weight:700}
.location-actions{margin-top:14px}
.location-buy-label{margin:0 0 10px;color:var(--navy-deep);font-size:1rem;font-weight:700}
.location-buy-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.location-buy-link{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  min-width:0;
  min-height:48px;
  padding:0;
  overflow:hidden;
  border:2px solid var(--pink);
  border-radius:12px;
  background:#fff;
  color:var(--navy);
  text-decoration:none;
  font-size:.88rem;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.location-buy-link span,
.location-buy-link strong{
  display:flex;
  align-items:center;
  white-space:nowrap;
}
.location-buy-link span{
  min-width:0;
  justify-content:center;
  padding:10px 10px;
  background:rgba(247,32,121,.08);
  color:var(--navy);
  font-size:.88rem;
  font-weight:700;
  transition:background-color .15s ease,color .15s ease;
}
.location-buy-link strong{
  justify-content:center;
  min-width:58px;
  padding:10px 10px;
  border-left:2px solid var(--pink);
  background:#fff;
  color:var(--navy);
  font-size:.94rem;
  font-weight:700;
  transition:background-color .15s ease,color .15s ease;
}
.location-buy-link:hover,
.location-buy-link:focus-visible{
  background:rgba(247,32,121,.08);
  border-color:var(--pink);
  box-shadow:0 6px 16px rgba(247,32,121,.08);
  transform:translateY(-1px);
}
.location-buy-link:hover span,
.location-buy-link:focus-visible span,
.location-buy-link:hover strong,
.location-buy-link:focus-visible strong{
  background:#F72079;
  border-color:#fff;
  color:#fff;
}
.location-guide-link{
  display:flex;
  width:100%;
  min-height:44px;
  align-items:center;
  justify-content:center;
  margin-top:9px;
  padding:7px 12px;
  border:2px solid #2B9EB3;
  border-radius:12px;
  background:#2B9EB3;
  color:#fff;
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
  line-height:1.1;
  text-align:center;
  transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease;
}
.location-guide-link:hover,
.location-guide-link:focus-visible{
  background:#23879a;
  border-color:#23879a;
  color:#fff;
  transform:translateY(-1px);
}
.location-note{
  display:flex;
  align-items:center;
  min-height:44px;
  margin:9px 0 0;
  color:#687083;
  font-size:.77rem;
  line-height:1.4;
}
.location-empty{display:none;text-align:center;padding:30px;border:1px dashed #cfd5df;border-radius:18px;color:#687083}.location-empty.show{display:block}
.guides-section{padding:58px 0 72px;background:#f8f9fb;border-top:1px solid var(--line)}
.guides-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}.guides-head h2{margin-bottom:7px}.guides-head .lead{margin:0;max-width:760px}.guide-count{color:#687083;font-weight:700}
.guide-subhead{margin:30px 0 13px;font-family:Georgia,serif;font-size:1.4rem;color:#434F69}
.guide-live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.guide-card{display:grid;grid-template-columns:125px 1fr;background:#fff;border:1px solid var(--lborder);border-radius:17px;overflow:hidden;box-shadow:0 8px 22px rgba(67,79,105,.07)}
.guide-card img{width:100%;height:100%;object-fit:cover}.guide-copy{padding:14px}.guide-copy strong{display:block;color:#434F69;font-family:Georgia,serif;margin-bottom:6px}.guide-copy p{color:#687083;font-size:.82rem;line-height:1.42;margin-bottom:9px}.guide-copy a{color:#23879a;font-weight:800;font-size:.82rem;text-decoration:none}
.guide-soon-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.guide-soon-card{background:#fff;border:1px solid var(--lborder);border-radius:15px;overflow:hidden;box-shadow:0 7px 18px rgba(67,79,105,.06)}
.guide-soon-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.guide-soon-copy{padding:11px 12px 13px}.guide-soon-copy strong{display:block;color:#434F69;font-family:Georgia,serif;font-size:.92rem}.guide-soon-copy span{display:block;color:#687083;font-size:.75rem;margin-top:2px}.guide-soon-copy a{display:inline-block;margin-top:7px;color:#F72079;font-size:.78rem;font-weight:800;text-decoration:none}
@media(max-width:1050px){.locations-grid,.guide-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-soon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.locations-hero{padding:38px 0 34px}.locations-hero-grid{grid-template-columns:1fr;gap:24px}.locations-search-row{grid-template-columns:1fr}.locations-search-row .button{width:100%}.location-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.location-filter{width:100%}.locations-results-head,.guides-head{align-items:flex-start;flex-direction:column}.locations-grid,.guide-live-grid{grid-template-columns:1fr}.guide-soon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){
  .location-filters,.guide-soon-grid{grid-template-columns:1fr}
  .guide-card{grid-template-columns:105px 1fr}
  .location-buy-options{grid-template-columns:1fr 1fr}
  .location-buy-link{font-size:.8rem}
  .location-buy-link span{padding-inline:6px;font-size:.8rem}
  .location-buy-link strong{min-width:52px;padding-inline:6px;font-size:.86rem}
}

/* ========================================================================
   Romantic Picnics — three-card pricing responsive layout
   Stack Romantic's three detailed voucher cards earlier than the two-card
   Friends/Family layouts, without changing shared voucher-page behaviour.
   ======================================================================== */
@media (max-width:900px){
  .romantic-page .romantic-options-grid{
    grid-template-columns:1fr;
    max-width:560px;
  }
}

/* ========================================================================
   Homepage pricing note — higher-priced London locations
   ======================================================================== */
.home-price-note{
  max-width:1100px;
  margin:20px auto 0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.55;
  text-align:center;
}

/* ========================================================================
   Homepage pricing rows — tidy two-line hierarchy
   ======================================================================== */
.home-page .home-product-card .product-price-row{
  align-items:flex-start;
}

.home-page .home-price-label{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.35;
}

.home-page .home-price-main{
  display:block;
  color:var(--text);
  font-size:.94rem;
}

.home-page .home-price-location{
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:4px;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.4;
  white-space:normal;
}

.home-page .home-product-card .product-price-row strong{
  flex:0 0 auto;
  padding-top:1px;
}

/* Give the shared London-location note more breathing room and centre it. */
.home-page .home-price-note{
  max-width:1100px;
  margin:34px auto 0;
  padding:0 12px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.55;
  text-align:center;
}

@media (max-width:650px){
  .home-page .home-price-main{
    font-size:.92rem;
  }

  .home-page .home-price-location{
    font-size:.82rem;
  }

  .home-page .home-price-note{
    margin-top:28px;
  }
}

/* ========================================================================
   Homepage pricing — final cleanup
   Remove tooltip styling, use plain secondary location text, and enlarge note.
   ======================================================================== */
.home-page .home-price-location{
  border-bottom:0;
  cursor:default;
  text-decoration:none;
}

.home-page .home-price-tooltip{
  display:none !important;
}

/* Make the shared London-locations note easier to read while keeping it subtle. */
.home-page .home-price-note{
  margin-top:38px;
  font-size:.92rem;
  line-height:1.6;
  text-align:center;
}

/* Homepage pricing — internal map link in standard-location note */
.home-page .home-price-map-link{
  color:#2B9EB3;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:600;
}

.home-page .home-price-map-link:hover,
.home-page .home-price-map-link:focus-visible{
  color:var(--pink);
}

/* ========================================================================
   Romantic Picnics — Premier Locations pricing card
   ======================================================================== */

/* Keep the standard Classic card pink, make the Premier Classic card teal. */
.romantic-page .romantic-option-card-location{
  border-color:rgba(43,158,179,.46);
  box-shadow:0 16px 38px rgba(43,158,179,.11);
}

.romantic-page .romantic-option-card-location::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.24);
}

.romantic-page .romantic-option-card-location .romantic-option-badge{
  background:rgba(43,158,179,.11);
  color:#238da0;
}

.romantic-page .romantic-option-card-location .button{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
  box-shadow:0 9px 24px rgba(43,158,179,.22);
}

.romantic-page .romantic-option-card-location:hover,
.romantic-page .romantic-option-card-location:focus-within{
  border-color:rgba(247,32,121,.44);
  box-shadow:0 22px 48px rgba(247,32,121,.12),0 16px 36px rgba(67,79,105,.10);
}

.romantic-page .romantic-option-card-location:hover::before,
.romantic-page .romantic-option-card-location:focus-within::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.24);
}

.romantic-page .romantic-option-card-location:hover .button,
.romantic-page .romantic-option-card-location:focus-within .button,
.romantic-page .romantic-option-card-location .button:hover,
.romantic-page .romantic-option-card-location .button:focus-visible{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 10px 24px rgba(247,32,121,.22);
}

/* Shared note for what WonderDays means by "London". */
.romantic-page .romantic-price-note{
  max-width:1100px;
  margin:34px auto 0;
  padding:0 12px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
  text-align:center;
}

/* The middle card has a longer badge; keep room for the decorative icon. */
.romantic-page .romantic-option-card-location .romantic-option-badge{
  max-width:calc(100% - 72px);
}

/* Romantic has three detailed cards, so stack sooner than Friends/Family. */
@media (max-width:900px){
  .romantic-page .romantic-options-grid{
    grid-template-columns:1fr;
    max-width:560px;
  }
}

@media (max-width:700px){
  .romantic-page .romantic-price-note{
    margin-top:28px;
    font-size:.88rem;
  }
}

/* ========================================================================
   Romantic Picnics — consistent hover/focus treatment on all three cards
   All buy buttons and top trims turn pink on interaction.
   ======================================================================== */
.romantic-page .romantic-option-card:hover::before,
.romantic-page .romantic-option-card:focus-within::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.28);
}

.romantic-page .romantic-option-card:hover .button,
.romantic-page .romantic-option-card:focus-within .button,
.romantic-page .romantic-option-card .button:hover,
.romantic-page .romantic-option-card .button:focus-visible{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 10px 24px rgba(247,32,121,.24);
}

/* ========================================================================
   Friends & Groups — two-card pricing treatment
   First card stays pink; second card is teal at rest.
   Both use pink accents on hover/focus/active interaction.
   ======================================================================== */

/* Shared note beneath both cards. */
.friends-page .friends-price-note{
  max-width:1100px;
  margin:34px auto 0;
  padding:0 12px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
  text-align:center;
}

.friends-page .friends-price-note a{
  color:#2B9EB3;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:600;
}

.friends-page .friends-price-note a:hover,
.friends-page .friends-price-note a:focus-visible{
  color:var(--pink);
}

/* First card: pink at rest. */
.friends-page .friends-option-card:first-child{
  border-color:rgba(247,32,121,.28);
}

.friends-page .friends-option-card:first-child::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.20);
}

.friends-page .friends-option-card:first-child .romantic-option-badge{
  background:rgba(247,32,121,.08);
  color:var(--pink);
}

.friends-page .friends-option-card:first-child .button{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 9px 24px rgba(247,32,121,.20);
}

/* Second card: teal at rest. */
.friends-page .friends-option-card-four{
  border-color:rgba(43,158,179,.46);
  box-shadow:0 16px 38px rgba(43,158,179,.11);
}

.friends-page .friends-option-card-four::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.24);
}

.friends-page .friends-option-card-four .romantic-option-badge{
  background:rgba(43,158,179,.11);
  color:#238da0;
}

.friends-page .friends-option-card-four .button{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
  box-shadow:0 9px 24px rgba(43,158,179,.22);
}

/* Both cards resolve to the same pink interaction state. */
.friends-page .friends-option-card:hover,
.friends-page .friends-option-card:focus-within,
.friends-page .friends-option-card:has(.button:active){
  border-color:rgba(247,32,121,.48);
  box-shadow:0 22px 48px rgba(247,32,121,.12),0 16px 36px rgba(67,79,105,.10);
}

.friends-page .friends-option-card:hover::before,
.friends-page .friends-option-card:focus-within::before,
.friends-page .friends-option-card:has(.button:active)::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.28);
}

.friends-page .friends-option-card:hover .romantic-option-badge,
.friends-page .friends-option-card:focus-within .romantic-option-badge,
.friends-page .friends-option-card:has(.button:active) .romantic-option-badge{
  background:rgba(247,32,121,.08);
  color:var(--pink);
}

.friends-page .friends-option-card:hover .button,
.friends-page .friends-option-card:focus-within .button,
.friends-page .friends-option-card .button:hover,
.friends-page .friends-option-card .button:focus-visible,
.friends-page .friends-option-card .button:active{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 10px 24px rgba(247,32,121,.24);
}

@media (max-width:700px){
  .friends-page .friends-price-note{
    margin-top:28px;
    font-size:.88rem;
  }
}


/* ========================================================================
   Homepage pricing cards — pink / teal / yellow at rest
   All three switch to the same pink interaction state, then return to their
   own resting colours when hover/focus/click ends.
   ======================================================================== */

/* CLASSIC — pink at rest */
.home-page .home-product-card[data-option-card="classic"]{
  border-color:rgba(247,32,121,.28);
  box-shadow:0 12px 30px rgba(67,79,105,.12);
  transform:none;
}
.home-page .home-product-card[data-option-card="classic"]::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.18);
}
.home-page .home-product-card[data-option-card="classic"] .button{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 9px 24px rgba(247,32,121,.20);
}

/* FAMILY — teal at rest */
.home-page .home-product-card[data-option-card="family"]{
  border-color:rgba(43,158,179,.46);
  box-shadow:0 16px 38px rgba(43,158,179,.11);
  transform:none;
}
.home-page .home-product-card[data-option-card="family"]::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.24);
}
.home-page .home-product-card[data-option-card="family"] .button{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
  box-shadow:0 9px 24px rgba(43,158,179,.22);
}

/* PREMIUM — yellow at rest */
.home-page .home-product-card[data-option-card="premium"]{
  border-color:rgba(255,233,22,.58);
  box-shadow:0 16px 38px rgba(67,79,105,.10);
  transform:none;
}
.home-page .home-product-card[data-option-card="premium"]::before{
  background:#FFE916;
  box-shadow:0 2px 10px rgba(255,233,22,.28);
}
.home-page .home-product-card[data-option-card="premium"] .button{
  background:#FFE916;
  border-color:#FFE916;
  color:var(--navy);
  box-shadow:0 9px 24px rgba(255,233,22,.20);
}

/* Persistent JS selection must not overwrite the resting colours. */
.home-page .home-product-card.is-selected{
  transform:none;
}
.home-page .home-product-card[data-option-card="classic"].is-selected{
  border-color:rgba(247,32,121,.28);
  box-shadow:0 12px 30px rgba(67,79,105,.12);
}
.home-page .home-product-card[data-option-card="family"].is-selected{
  border-color:rgba(43,158,179,.46);
  box-shadow:0 16px 38px rgba(43,158,179,.11);
}
.home-page .home-product-card[data-option-card="premium"].is-selected{
  border-color:rgba(255,233,22,.58);
  box-shadow:0 16px 38px rgba(67,79,105,.10);
}

/* All cards take on the same pink interaction treatment. */
.home-page .home-product-card:hover,
.home-page .home-product-card:focus-within,
.home-page .home-product-card:has(.button:active){
  border-color:rgba(247,32,121,.48);
  box-shadow:0 22px 48px rgba(247,32,121,.12),0 16px 36px rgba(67,79,105,.10);
  transform:translateY(-4px);
}
.home-page .home-product-card:hover::before,
.home-page .home-product-card:focus-within::before,
.home-page .home-product-card:has(.button:active)::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.28);
}
.home-page .home-product-card:hover .button,
.home-page .home-product-card:focus-within .button,
.home-page .home-product-card .button:hover,
.home-page .home-product-card .button:focus-visible,
.home-page .home-product-card .button:active{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 10px 24px rgba(247,32,121,.24);
}

/* Explicitly restore the correct resting trim/button after .is-selected. */
.home-page .home-product-card[data-option-card="classic"].is-selected:not(:hover):not(:focus-within)::before{
  background:var(--pink);
}
.home-page .home-product-card[data-option-card="classic"].is-selected:not(:hover):not(:focus-within) .button{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
}
.home-page .home-product-card[data-option-card="family"].is-selected:not(:hover):not(:focus-within)::before{
  background:#2B9EB3;
}
.home-page .home-product-card[data-option-card="family"].is-selected:not(:hover):not(:focus-within) .button{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
}
.home-page .home-product-card[data-option-card="premium"].is-selected:not(:hover):not(:focus-within)::before{
  background:#FFE916;
}
.home-page .home-product-card[data-option-card="premium"].is-selected:not(:hover):not(:focus-within) .button{
  background:#FFE916;
  border-color:#FFE916;
  color:var(--navy);
}

/* ========================================================================
   Family Days Out — two-card pricing treatment
   First card pink at rest; second card teal at rest.
   Both become fully pink on hover/focus/click, then return to rest colours.
   ======================================================================== */

/* Shared note beneath the family cards. */
.family-page .family-price-note{
  max-width:1100px;
  margin:34px auto 0;
  padding:0 12px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
  text-align:center;
}

.family-page .family-price-note a{
  color:#2B9EB3;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:600;
}

.family-page .family-price-note a:hover,
.family-page .family-price-note a:focus-visible{
  color:var(--pink);
}

/* First family card: pink at rest. */
.family-page .family-options-grid .romantic-option-card:first-child{
  border-color:rgba(247,32,121,.28);
  box-shadow:0 12px 30px rgba(67,79,105,.12);
}

.family-page .family-options-grid .romantic-option-card:first-child::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.20);
}

.family-page .family-options-grid .romantic-option-card:first-child .romantic-option-badge{
  background:rgba(247,32,121,.08);
  color:var(--pink);
}

.family-page .family-options-grid .romantic-option-card:first-child .button{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 9px 24px rgba(247,32,121,.20);
}

/* Second family card: teal at rest. */
.family-page .family-options-grid .romantic-option-card:nth-child(2){
  border-color:rgba(43,158,179,.46);
  box-shadow:0 16px 38px rgba(43,158,179,.11);
}

.family-page .family-options-grid .romantic-option-card:nth-child(2)::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.24);
}

.family-page .family-options-grid .romantic-option-card:nth-child(2) .romantic-option-badge{
  background:rgba(43,158,179,.11);
  color:#238da0;
}

.family-page .family-options-grid .romantic-option-card:nth-child(2) .button{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
  box-shadow:0 9px 24px rgba(43,158,179,.22);
}

/* Both cards use the same pink interaction state. */
.family-page .family-options-grid .romantic-option-card:hover,
.family-page .family-options-grid .romantic-option-card:focus-within,
.family-page .family-options-grid .romantic-option-card:has(.button:active){
  border-color:rgba(247,32,121,.48);
  box-shadow:0 22px 48px rgba(247,32,121,.12),0 16px 36px rgba(67,79,105,.10);
  transform:translateY(-4px);
}

.family-page .family-options-grid .romantic-option-card:hover::before,
.family-page .family-options-grid .romantic-option-card:focus-within::before,
.family-page .family-options-grid .romantic-option-card:has(.button:active)::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.28);
}

.family-page .family-options-grid .romantic-option-card:hover .romantic-option-badge,
.family-page .family-options-grid .romantic-option-card:focus-within .romantic-option-badge,
.family-page .family-options-grid .romantic-option-card:has(.button:active) .romantic-option-badge{
  background:rgba(247,32,121,.08);
  color:var(--pink);
}

.family-page .family-options-grid .romantic-option-card:hover .button,
.family-page .family-options-grid .romantic-option-card:focus-within .button,
.family-page .family-options-grid .romantic-option-card .button:hover,
.family-page .family-options-grid .romantic-option-card .button:focus-visible,
.family-page .family-options-grid .romantic-option-card .button:active{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 10px 24px rgba(247,32,121,.24);
}

/* Explicitly restore the teal second card when no longer interacting. */
.family-page .family-options-grid .romantic-option-card:nth-child(2):not(:hover):not(:focus-within)::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.24);
}

.family-page .family-options-grid .romantic-option-card:nth-child(2):not(:hover):not(:focus-within) .romantic-option-badge{
  background:rgba(43,158,179,.11);
  color:#238da0;
}

.family-page .family-options-grid .romantic-option-card:nth-child(2):not(:hover):not(:focus-within) .button{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
  box-shadow:0 9px 24px rgba(43,158,179,.22);
}

@media (max-width:700px){
  .family-page .family-price-note{
    margin-top:28px;
    font-size:.88rem;
  }
}

/* ========================================================================
   Location pages — gift flexibility story block
   Keeps the gift section in the existing plain story style while ensuring
   balanced spacing after the preceding "And afterwards..." block.
   ======================================================================== */
.location-page .gift-story-block{
  padding-top:40px;
}

.location-page .gift-story-block.story-block-last{
  padding-bottom:0;
}

@media (max-width:650px){
  .location-page .gift-story-block{
    padding-top:32px;
  }
}

/* ========================================================================
   Location page vertical pricing cards — resting colours + pink interaction
   Classic: pink | Family: teal | Premium: yellow
   Hover/focus/click: pink, then return to the card's resting colour.
   ======================================================================== */

/* Resting top trims */
.location-page .product-options-vertical .product-card:nth-child(1)::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.18);
}

.location-page .product-options-vertical .product-card:nth-child(2)::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.24);
}

.location-page .product-options-vertical .product-card-premium::before{
  background:#FFE916;
  box-shadow:0 2px 10px rgba(255,233,22,.28);
}

/* Resting buttons */
.location-page .product-options-vertical .product-card:nth-child(1) .button{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 10px 24px rgba(247,32,121,.20);
}

.location-page .product-options-vertical .product-card:nth-child(2) .button{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
  box-shadow:0 10px 24px rgba(43,158,179,.24);
}

.location-page .product-options-vertical .product-card-premium .button{
  background:#FFE916;
  border-color:#FFE916;
  color:var(--navy);
  box-shadow:0 9px 24px rgba(255,233,22,.20);
}

/* Interaction treatment: all cards turn pink */
.location-page .product-options-vertical .product-card:hover::before,
.location-page .product-options-vertical .product-card:focus-within::before,
.location-page .product-options-vertical .product-card:active::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.28);
}

.location-page .product-options-vertical .product-card:hover .button,
.location-page .product-options-vertical .product-card:focus-within .button,
.location-page .product-options-vertical .product-card:active .button,
.location-page .product-options-vertical .product-card .button:hover,
.location-page .product-options-vertical .product-card .button:focus-visible,
.location-page .product-options-vertical .product-card .button:active{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
  box-shadow:0 10px 24px rgba(247,32,121,.24);
}

/* Match the pink interaction treatment on the card edge/shadow too. */
.location-page .product-options-vertical .product-card:hover,
.location-page .product-options-vertical .product-card:focus-within,
.location-page .product-options-vertical .product-card:active{
  border-color:rgba(247,32,121,.50);
  box-shadow:0 18px 42px rgba(247,32,121,.14),0 12px 30px rgba(67,79,105,.12);
}

/* Do not temporarily remove Premium's resting yellow trim when another
   card is hovered/focused. Each card keeps its own resting identity. */
.location-page .product-options-vertical:has(.product-card:not(.product-card-premium):hover) .product-card-premium::before,
.location-page .product-options-vertical:has(.product-card:not(.product-card-premium):focus-within) .product-card-premium::before{
  background:#FFE916;
  box-shadow:0 2px 10px rgba(255,233,22,.28);
}

/* ========================================================================
   Header navigation simplification - 14 Sep 2026
   Desktop top level:
   FIND A LOCATION | CHOOSE WHO WITH | ABOUT US

   The location menu remains the existing area -> location flyout. Its first
   item is deliberately anchored at the far-left edge of the nav, leaving a
   broad clear area for the location flyout to open to the right.
   ======================================================================== */

@media (min-width:951px){
  .site-header .main-nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    column-gap:34px;
    margin-left:4px;
    justify-content:stretch;
  }

  .header-location-group{
    justify-self:start;
    margin:0;
  }

  .header-voucher-group{
    justify-self:end;
    margin:0;
  }

  .header-about-group{
    justify-self:end;
    margin:0;
    padding-left:28px;
    border-left:1px solid rgba(67,79,105,.24);
  }

  /* Top-level desktop headings share one treatment. */
  .desktop-area-trigger,
  .desktop-who-trigger,
  .site-header .main-nav .header-about-link{
    color:var(--navy);
    font-size:.84rem;
    font-weight:850;
    line-height:1.2;
    letter-spacing:.055em;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .desktop-area-trigger,
  .desktop-who-trigger{
    position:relative;
    display:block;
    padding:9px 21px 9px 0;
    cursor:default;
  }

  .desktop-area-trigger::after,
  .desktop-who-trigger::after{
    content:"";
    position:absolute;
    right:2px;
    top:50%;
    width:7px;
    height:7px;
    margin-top:-6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:transform .15s ease,margin .15s ease;
  }

  .desktop-area-menu:hover > .desktop-area-trigger,
  .desktop-who-menu:hover > .desktop-who-trigger,
  .site-header .main-nav .header-about-link:hover{
    color:var(--pink);
  }

  .desktop-area-menu:hover > .desktop-area-trigger::after,
  .desktop-who-menu:hover > .desktop-who-trigger::after{
    margin-top:-2px;
    transform:rotate(225deg);
  }

  /* Existing location dropdown stays left-anchored so its second level has
     the maximum possible room to open to the right. */
  .desktop-area-panel{
    left:0;
  }

  /* Who-with dropdown is compact and opens directly beneath its heading. */
  .desktop-who-menu{
    position:relative;
    display:block;
  }

  .desktop-who-panel{
    position:absolute;
    z-index:100;
    top:100%;
    left:0;
    right:auto;
    width:205px;
    padding:8px 12px 10px;
    border:1px solid rgba(67,79,105,.10);
    border-top:0;
    border-radius:0 0 12px 12px;
    background:#fff;
    box-shadow:0 16px 34px rgba(67,79,105,.12);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  .desktop-who-panel::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-8px;
    height:8px;
    background:transparent;
  }

  .desktop-who-menu:hover > .desktop-who-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .site-header .main-nav .desktop-who-panel a{
    display:block;
    padding:9px 8px;
    border:0;
    color:var(--navy);
    font-size:.86rem;
    font-weight:750;
    line-height:1.3;
    white-space:nowrap;
  }

  .site-header .main-nav .desktop-who-panel a:hover,
  .site-header .main-nav .desktop-who-panel a:focus-visible{
    color:var(--pink);
    background:rgba(247,32,121,.035);
  }

  .mobile-who-menu{
    display:none;
  }
}

@media (max-width:1180px) and (min-width:951px){
  .site-header .main-nav{
    column-gap:24px;
    margin-left:0;
  }

  .header-about-group{
    padding-left:22px;
  }

  .desktop-area-trigger,
  .desktop-who-trigger,
  .site-header .main-nav .header-about-link{
    font-size:.78rem;
    letter-spacing:.045em;
  }
}

@media (max-width:950px){
  .desktop-who-menu{
    display:none;
  }

  .mobile-who-menu{
    display:block;
  }

  /* The old mobile location heading is now the actual menu name. */
  .nav-area-trigger-mobile{
    display:inline;
  }

  .header-voucher-group{
    margin:24px 0 0;
    padding:24px 4px 0;
    border-top:1px solid var(--line);
  }

  .header-nav-label-voucher{
    display:block;
    margin-bottom:5px;
    color:#2B9EB3;
    font-size:.82rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .site-header .main-nav .mobile-who-menu > a{
    display:block;
    padding:11px 0;
    border:0;
    color:var(--navy);
    font-size:1rem;
    font-weight:750;
  }

  .header-about-group{
    margin-top:22px;
    padding:20px 4px 0;
    border-top:1px solid var(--line);
  }

  .site-header .main-nav .header-about-link{
    display:block;
    padding:11px 0;
    border:0;
    color:var(--navy);
    font-size:1rem;
    font-weight:750;
  }
}

/* ========================================================================
   Aggregator hero - London template
   A level below the homepage: split editorial layout, breadcrumb and clipped
   destination imagery rather than the homepage's full photographic backdrop.
   ======================================================================== */

.aggregator-page .aggregator-hero{
  position:relative;
  overflow:hidden;
  background:#fffaf5;
  border-bottom:1px solid rgba(67,79,105,.08);
}

.aggregator-page .aggregator-hero-grid{
  display:grid;
  grid-template-columns:minmax(420px, 42%) minmax(0, 58%);
  min-height:570px;
}

.aggregator-page .aggregator-hero-copy{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:58px max(42px, calc((100vw - 1440px) / 2 + 34px)) 72px max(34px, calc((100vw - 1440px) / 2 + 34px));
}

.aggregator-page .aggregator-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 32px;
  font-size:.88rem;
  font-weight:700;
  color:var(--navy);
}

.aggregator-page .aggregator-breadcrumb a{
  color:var(--pink);
  text-decoration:none;
}

.aggregator-page .aggregator-breadcrumb a:hover,
.aggregator-page .aggregator-breadcrumb a:focus-visible{
  text-decoration:underline;
}

.aggregator-page .aggregator-hero .eyebrow{
  margin-bottom:14px;
}

.aggregator-page .aggregator-hero h1{
  max-width:610px;
  margin:0;
  color:var(--navy);
  font-family:Georgia, 'Times New Roman', serif;
  font-size:clamp(3.25rem,5vw,5.9rem);
  line-height:.88;
  letter-spacing:-.045em;
}

.aggregator-page .aggregator-hero h1 span{
  display:block;
  margin-top:8px;
  color:var(--pink);
}

.aggregator-page .aggregator-hero-lead{
  max-width:590px;
  margin:28px 0 0;
  color:var(--navy);
  font-size:clamp(1.05rem,1.35vw,1.28rem);
  line-height:1.6;
}

.aggregator-page .aggregator-hero-actions{
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:34px;
  flex-wrap:wrap;
}

.aggregator-page .aggregator-hero-secondary{
  color:var(--navy);
  font-weight:800;
  text-decoration:none;
}

.aggregator-page .aggregator-hero-secondary:hover,
.aggregator-page .aggregator-hero-secondary:focus-visible{
  color:var(--pink);
}

.aggregator-page .aggregator-hero-collage{
  position:relative;
  display:grid;
  grid-template-columns:1fr .95fr 1.05fr;
  min-width:0;
  min-height:570px;
  margin-left:-34px;
}

.aggregator-page .aggregator-hero-image{
  position:relative;
  min-width:0;
  margin:0;
  overflow:hidden;
  background:#ddd;
}

.aggregator-page .aggregator-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.025);
}

.aggregator-page .aggregator-hero-image-one{
  clip-path:polygon(16% 0,100% 0,88% 100%,0 100%);
  margin-right:-34px;
  z-index:3;
}

.aggregator-page .aggregator-hero-image-two{
  clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);
  margin-right:-34px;
  z-index:2;
}

.aggregator-page .aggregator-hero-image-three{
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
  z-index:1;
}

.aggregator-page .aggregator-hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(20,29,45,.34),transparent 38%);
  pointer-events:none;
}

.aggregator-page .aggregator-hero-image figcaption{
  position:absolute;
  z-index:2;
  left:30px;
  bottom:26px;
  color:#fff;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}

.aggregator-page .aggregator-hero-swoop{
  position:absolute;
  z-index:4;
  left:-3%;
  right:-3%;
  bottom:-32px;
  height:68px;
  background:rgba(247,32,121,.08);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  transform:rotate(.7deg);
  pointer-events:none;
}

.aggregator-page .aggregator-intro{
  padding:70px 0 44px;
  background:#fff;
}

@media (max-width:1100px){
  .aggregator-page .aggregator-hero-grid{
    grid-template-columns:44% 56%;
  }

  .aggregator-page .aggregator-hero-copy{
    padding-left:34px;
    padding-right:28px;
  }

  .aggregator-page .aggregator-hero h1{
    font-size:clamp(3rem,5.8vw,4.9rem);
  }

  .aggregator-page .aggregator-hero-collage{
    margin-left:-18px;
  }
}

@media (max-width:820px){
  .aggregator-page .aggregator-hero-grid{
    display:block;
    min-height:0;
  }

  .aggregator-page .aggregator-hero-copy{
    padding:38px 22px 46px;
  }

  .aggregator-page .aggregator-breadcrumb{
    margin-bottom:24px;
  }

  .aggregator-page .aggregator-hero h1{
    max-width:none;
    font-size:clamp(3.1rem,13vw,5rem);
  }

  .aggregator-page .aggregator-hero-lead{
    max-width:650px;
  }

  .aggregator-page .aggregator-hero-collage{
    min-height:360px;
    margin:0;
    grid-template-columns:1fr 1fr 1fr;
  }

  .aggregator-page .aggregator-hero-image-one,
  .aggregator-page .aggregator-hero-image-two,
  .aggregator-page .aggregator-hero-image-three{
    margin-right:-18px;
  }

  .aggregator-page .aggregator-hero-image-one{
    clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
  }

  .aggregator-page .aggregator-hero-image-two{
    clip-path:polygon(14% 0,100% 0,84% 100%,0 100%);
  }

  .aggregator-page .aggregator-hero-image-three{
    clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);
    margin-right:0;
  }

  .aggregator-page .aggregator-hero-image figcaption{
    left:18px;
    bottom:18px;
  }
}

@media (max-width:560px){
  .aggregator-page .aggregator-hero-copy{
    padding:30px 18px 38px;
  }

  .aggregator-page .aggregator-hero-actions{
    gap:18px;
  }

  .aggregator-page .aggregator-hero-collage{
    min-height:300px;
  }

  .aggregator-page .aggregator-hero-image figcaption{
    display:none;
  }
}

/* ========================================================================
   London aggregator - destination comparison cards
   Reuses the All Locations card language, with a little more breathing room
   because this page contains only the six London choices.
   ======================================================================== */

.london-locations-section{
  padding:72px 0 84px;
  background:#fff;
}

.london-locations-heading{
  max-width:820px;
  margin:0 auto 34px;
}

.london-locations-heading h2{
  margin-bottom:12px;
}

.london-locations-heading .lead{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

.london-locations-grid{
  align-items:stretch;
  gap:24px;
}

.london-location-card{
  height:100%;
}

.london-location-card .location-body{
  padding:19px 20px 18px;
}

.london-location-card .location-kicker{
  margin-bottom:6px;
}

.london-location-card h3{
  font-size:1.52rem;
}

.london-location-card .location-preview{
  min-height:4.1em;
}

.london-location-card .location-actions{
  padding-top:2px;
}

.london-location-card .location-guide-link{
  margin-top:10px;
}

/* Keep the six-card order at 3 + 3 on a normal desktop. */
@media (min-width:1051px){
  .london-locations-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Two columns on tablet / compact desktop. */
@media (max-width:1050px) and (min-width:761px){
  .london-locations-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* One clear comparison card per row on mobile. */
@media (max-width:760px){
  .london-locations-section{
    padding:54px 0 64px;
  }

  .london-locations-heading{
    margin-bottom:26px;
  }

  .london-locations-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .london-location-card .location-preview{
    min-height:0;
  }
}

/* ========================================================================
   London aggregator - What is a London Mystery Picnic?
   ======================================================================== */

.london-idea-section{
  padding:76px 0 72px;
  background:#fff;
}

.london-idea-grid{
  display:grid;
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.55fr);
  gap:78px;
  align-items:start;
}

.london-idea-intro{
  padding-right:16px;
}

.london-idea-intro h2{
  margin:10px 0 24px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.55rem,4.2vw,4.6rem);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.035em;
}

.london-idea-intro > p:last-child{
  max-width:500px;
  color:var(--muted);
  font-size:1.12rem;
  line-height:1.72;
}

.london-idea-details{
  border-top:1px solid var(--line);
}

.london-idea-detail{
  padding:31px 0 35px;
  border-bottom:1px solid var(--line);
}

.london-idea-detail h3{
  margin:9px 0 15px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.85rem,2.6vw,2.75rem);
  font-weight:500;
  line-height:1.12;
}

.london-idea-detail > p:last-child{
  max-width:900px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.72;
}


/* ========================================================================
   London aggregator - select your location later purchase band
   ======================================================================== */

.london-select-later-section{
  padding:72px 0 84px;
  background-color:#eef8fa;
  background-image:
    repeating-linear-gradient(90deg,rgba(43,158,179,.16) 0 42px,rgba(67,79,105,.035) 42px 84px),
    repeating-linear-gradient(0deg,rgba(43,158,179,.12) 0 42px,rgba(255,255,255,.10) 42px 84px),
    repeating-linear-gradient(135deg,rgba(43,158,179,.055) 0 2px,transparent 2px 6px);
}

.london-select-later-heading{
  max-width:850px;
  margin:0 auto 36px;
}

.london-select-later-heading h2{
  margin:10px 0 12px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.45rem,4vw,4.15rem);
  font-weight:500;
  line-height:1.02;
}

.london-select-later-heading .lead{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}

.london-picnic-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}

.london-picnic-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:29px 27px 25px;
  background:#fff;
  border:1.5px solid rgba(67,79,105,.20);
  border-radius:24px;
  box-shadow:0 12px 30px rgba(67,79,105,.12);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.london-picnic-card::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:-1px;
  height:4px;
  border-radius:0 0 999px 999px;
}

.london-picnic-card-classic::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.18);
}

.london-picnic-card-family::before{
  background:#2B9EB3;
  box-shadow:0 2px 10px rgba(43,158,179,.22);
}

.london-picnic-card-premium::before{
  background:#FFE916;
  box-shadow:0 2px 10px rgba(255,233,22,.26);
}

.london-picnic-card:hover{
  border-color:rgba(247,32,121,.5);
  box-shadow:0 18px 42px rgba(247,32,121,.14),0 12px 30px rgba(67,79,105,.12);
  transform:translateY(-2px);
}

.london-picnic-card:hover::before{
  background:var(--pink);
  box-shadow:0 2px 10px rgba(247,32,121,.28);
}

.london-picnic-card-top{
  min-height:142px;
}

.london-picnic-card h3{
  margin:8px 0 10px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.6rem;
  font-weight:500;
}

.london-picnic-card .product-desc{
  min-height:64px;
}

.london-picnic-card .product-prices{
  margin:3px 0 22px;
}

.london-picnic-card .button{
  margin-top:auto;
  text-align:center;
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
}

.london-picnic-card-family .button{
  background:#2B9EB3;
  border-color:#2B9EB3;
  color:#fff;
}

.london-picnic-card-premium .button{
  background:#FFE916;
  border-color:#FFE916;
  color:var(--navy);
}

.london-picnic-card:hover .button,
.london-picnic-card .button:hover,
.london-picnic-card .button:focus-visible,
.london-picnic-card .button:active{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
}

@media (max-width:900px){
  .london-idea-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .london-idea-intro{
    max-width:720px;
    padding-right:0;
  }

  .london-picnic-options{
    grid-template-columns:1fr;
  }

  .london-picnic-card-top,
  .london-picnic-card .product-desc{
    min-height:0;
  }
}

@media (max-width:650px){
  .london-idea-section{
    padding:56px 0 54px;
  }

  .london-idea-detail{
    padding:26px 0 29px;
  }

  .london-select-later-section{
    padding:56px 0 64px;
  }

  .london-picnic-card{
    padding:25px 22px 22px;
  }
}

/* ========================================================================
   London aggregator hero - six destination collage
   Keeps the existing slanted-photo hero treatment, now as a 2 x 3 mosaic.
   ======================================================================== */

.aggregator-page .aggregator-hero-collage-six{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  min-height:570px;
  margin-left:-34px;
  overflow:hidden;
  background:#fff;
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image{
  position:relative;
  min-width:0;
  min-height:0;
  margin:0;
  overflow:hidden;
  background:#ddd;
  clip-path:none;
}

/* Slanted outer edges and internal cuts */
.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-one,
.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-four{
  clip-path:polygon(10% 0,100% 0,92% 100%,0 100%);
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-two,
.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-five{
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  margin-left:-20px;
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-three,
.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-six{
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);
  margin-left:-20px;
}

/* Crisp white divider between the two rows, matching the current hero style */
.aggregator-page .aggregator-hero-collage-six::after{
  content:"";
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  top:50%;
  height:14px;
  transform:translateY(-7px);
  background:#fff;
  pointer-events:none;
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.03);
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(to top,rgba(20,29,45,.42),transparent 42%);
  pointer-events:none;
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image figcaption{
  position:absolute;
  z-index:3;
  left:24px;
  right:18px;
  bottom:20px;
  color:#fff;
  font-size:.72rem;
  font-weight:850;
  line-height:1.15;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.30);
}

/* Override the old three-panel margin/clip rules for the six-image version. */
.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-one,
.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-two,
.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-three,
.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-four,
.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-five,
.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-six{
  z-index:auto;
}

@media (max-width:1100px){
  .aggregator-page .aggregator-hero-collage-six{
    margin-left:-18px;
  }

  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image figcaption{
    left:18px;
    right:12px;
    bottom:16px;
    font-size:.64rem;
  }
}

@media (max-width:820px){
  .aggregator-page .aggregator-hero-collage-six{
    margin:0;
    min-height:500px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
  }

  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-one,
  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-four{
    clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
  }

  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-two,
  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-five,
  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-three,
  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image-six{
    margin-left:-12px;
  }
}

@media (max-width:560px){
  .aggregator-page .aggregator-hero-collage-six{
    min-height:420px;
  }

  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image figcaption{
    display:block;
    left:12px;
    right:8px;
    bottom:12px;
    font-size:.56rem;
    letter-spacing:.035em;
  }

  .aggregator-page .aggregator-hero-collage-six::after{
    height:10px;
    transform:translateY(-5px);
  }
}

/* ========================================================================
   London hero alignment fix
   The six images now sit inside three continuous slanted columns. This keeps
   each diagonal divider on the same line through both rows.
   ======================================================================== */

.aggregator-page .aggregator-hero-collage-six{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:1fr;
  gap:0;
  overflow:hidden;
  background:#fff;
}

.aggregator-page .aggregator-hero-collage-six::after{
  content:none;
}

.aggregator-page .aggregator-hero-column{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:repeat(2,minmax(0,1fr));
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#fff;
  transform:skewX(-3.6deg);
  transform-origin:center;
  border-left:12px solid #fff;
}

.aggregator-page .aggregator-hero-column:first-child{
  border-left:0;
}

.aggregator-page .aggregator-hero-column-one{
  margin-left:-28px;
}

.aggregator-page .aggregator-hero-column-three{
  margin-right:-28px;
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image{
  position:relative;
  min-width:0;
  min-height:0;
  margin:0;
  overflow:hidden;
  clip-path:none;
  background:#ddd;
  border:0;
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image + .aggregator-hero-image{
  border-top:14px solid #fff;
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image img{
  width:112%;
  height:100%;
  max-width:none;
  margin-left:-6%;
  object-fit:cover;
  display:block;
  transform:skewX(3.6deg) scale(1.04);
  transform-origin:center;
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(to top,rgba(20,29,45,.42),transparent 42%);
  pointer-events:none;
}

.aggregator-page .aggregator-hero-collage-six .aggregator-hero-image figcaption{
  position:absolute;
  z-index:3;
  left:24px;
  right:14px;
  bottom:19px;
  color:#fff;
  font-size:.72rem;
  font-weight:850;
  line-height:1.15;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.30);
  transform:skewX(3.6deg);
  transform-origin:left bottom;
}

@media (max-width:1100px){
  .aggregator-page .aggregator-hero-column{
    border-left-width:10px;
  }

  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image + .aggregator-hero-image{
    border-top-width:12px;
  }
}

@media (max-width:820px){
  .aggregator-page .aggregator-hero-collage-six{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:1fr;
  }

  .aggregator-page .aggregator-hero-column{
    transform:skewX(-3deg);
  }

  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image img,
  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image figcaption{
    transform:skewX(3deg);
  }
}

@media (max-width:560px){
  .aggregator-page .aggregator-hero-column{
    border-left-width:7px;
  }

  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image + .aggregator-hero-image{
    border-top-width:9px;
  }

  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image figcaption{
    left:11px;
    right:6px;
    bottom:11px;
    font-size:.54rem;
    letter-spacing:.025em;
  }
}

/* ========================================================================
   London hero - restore the sloping outer left edge
   ======================================================================== */

@media (min-width:821px){
  .aggregator-page .aggregator-hero-collage-six{
    /* Top edge begins further right than the bottom edge, matching the
       original three-image hero treatment. */
    clip-path:polygon(5.8% 0,100% 0,100% 100%,0 100%);
  }
}

@media (max-width:820px){
  .aggregator-page .aggregator-hero-collage-six{
    clip-path:polygon(3.5% 0,100% 0,100% 100%,0 100%);
  }
}

/* ========================================================================
   London hero - compact height + safer labels
   ======================================================================== */

@media (min-width:821px){
  /* Bring the whole hero back to a shallower, banner-like proportion.
     The images are deliberately cropped rather than forcing their full height. */
  .aggregator-page .aggregator-hero-grid{
    min-height:500px;
    max-height:610px;
  }

  .aggregator-page .aggregator-hero-copy{
    padding-top:44px;
    padding-bottom:54px;
  }

  .aggregator-page .aggregator-hero-collage-six{
    min-height:500px;
    max-height:610px;
  }

  .aggregator-page .aggregator-hero-column{
    min-height:0;
  }

  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image{
    min-height:0;
  }

  .aggregator-page .aggregator-hero-collage-six .aggregator-hero-image img{
    height:100%;
    object-fit:cover;
  }

  /* The first column sits behind the collage's sloping outer mask.
     Pull its labels inward so Camden and Marylebone remain fully visible. */
  .aggregator-page .aggregator-hero-column-one .aggregator-hero-image figcaption{
    left:54px;
  }
}

@media (min-width:1200px){
  .aggregator-page .aggregator-hero-grid,
  .aggregator-page .aggregator-hero-collage-six{
    min-height:520px;
    max-height:600px;
  }
}

@media (max-width:1100px) and (min-width:821px){
  .aggregator-page .aggregator-hero-grid,
  .aggregator-page .aggregator-hero-collage-six{
    min-height:470px;
    max-height:560px;
  }

  .aggregator-page .aggregator-hero-column-one .aggregator-hero-image figcaption{
    left:46px;
  }
}

/* ========================================================================
   London hero - rebalance copy/images + Camden label
   ======================================================================== */

@media (min-width:821px){
  /* Give the editorial copy a little more width and reduce the photo wall. */
  .aggregator-page .aggregator-hero-grid{
    grid-template-columns:minmax(470px,46%) minmax(0,54%);
  }

  .aggregator-page .aggregator-hero-copy{
    padding-right:40px;
  }

  .aggregator-page .aggregator-hero-collage-six{
    margin-left:-14px;
  }

  /* Camden sits closest to the sloping mask, so bring its label further in. */
  .aggregator-page .aggregator-hero-column-one .aggregator-hero-image:first-child figcaption{
    left:76px;
  }

  /* Marylebone can remain slightly less inset than Camden. */
  .aggregator-page .aggregator-hero-column-one .aggregator-hero-image:last-child figcaption{
    left:58px;
  }
}

@media (max-width:1100px) and (min-width:821px){
  .aggregator-page .aggregator-hero-grid{
    grid-template-columns:minmax(430px,47%) minmax(0,53%);
  }

  .aggregator-page .aggregator-hero-column-one .aggregator-hero-image:first-child figcaption{
    left:66px;
  }

  .aggregator-page .aggregator-hero-column-one .aggregator-hero-image:last-child figcaption{
    left:52px;
  }
}

/* London hero - final label alignment */
@media (min-width:821px){
  .aggregator-page .aggregator-hero-column-one .aggregator-hero-image:last-child figcaption{
    left:72px;
  }
}

@media (max-width:1100px) and (min-width:821px){
  .aggregator-page .aggregator-hero-column-one .aggregator-hero-image:last-child figcaption{
    left:62px;
  }
}

/* London select-later heading — match the quieter location-section hierarchy */
.london-select-later-heading h2{
  font-size:clamp(2.05rem,3.2vw,3.35rem);
  line-height:1.06;
}


/* ========================================================================
   London aggregator - which part of London?
   Targeted version of the homepage reason section.
   ======================================================================== */

.london-choice-section{
  padding:78px 0 88px;
  background:#fff;
}

.london-choice-grid{
  display:grid;
  grid-template-columns:minmax(300px,.8fr) minmax(0,1.45fr);
  gap:72px;
  align-items:center;
}

.london-choice-intro h2{
  margin:10px 0 24px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.55rem,4.1vw,4.35rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.03em;
}

.london-choice-intro > p:last-child{
  max-width:510px;
  margin:0;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.72;
}

.london-choice-card{
  padding:36px 42px 38px;
  border:1px solid var(--line);
  border-radius:28px;
  background:#fff;
  box-shadow:0 16px 38px rgba(67,79,105,.08);
}

.london-choice-card h3{
  margin:9px 0 16px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.8rem,2.7vw,2.7rem);
  font-weight:500;
  line-height:1.15;
}

.london-choice-card > p:last-child{
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.74;
}

@media (max-width:900px){
  .london-choice-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .london-choice-intro{
    max-width:720px;
  }
}

@media (max-width:650px){
  .london-choice-section{
    padding:58px 0 64px;
  }

  .london-choice-card{
    padding:28px 24px 30px;
    border-radius:22px;
  }

  .london-select-later-heading h2{
    font-size:clamp(2rem,9vw,2.8rem);
  }
}

/* ========================================================================
   London aggregator - flexible voucher band
   ======================================================================== */

.london-flex-band{
  padding:66px 0 72px;
  background:var(--navy);
  color:#fff;
}

.london-flex-heading{
  margin-bottom:42px;
}

.london-flex-heading .eyebrow{
  color:var(--pink);
}

.london-flex-heading h2{
  margin:10px 0 0;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.4rem,3.8vw,4rem);
  font-weight:500;
  line-height:1.04;
}

.london-flex-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.london-flex-item{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:18px;
  align-items:start;
  min-width:0;
  padding:28px 30px;
  border-left:1px solid rgba(255,255,255,.18);
}

.london-flex-item:first-child{
  border-left:0;
}

.london-flex-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(247,32,121,.45);
  border-radius:50%;
  color:var(--pink);
}

.london-flex-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.london-flex-item h3{
  margin:5px 0 8px;
  color:#fff;
  font-size:1.06rem;
  line-height:1.3;
}

.london-flex-item p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:.95rem;
  line-height:1.55;
}


/* ========================================================================
   London aggregator - photo carousel
   ======================================================================== */

.london-gallery-section{
  padding:76px 0 72px;
  background:#fff;
}

.london-gallery-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:34px;
  margin-bottom:28px;
}

.london-gallery-heading h2{
  max-width:1120px;
  margin:10px 0 0;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.35rem,4vw,4.15rem);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.03em;
}

.london-gallery-controls{
  display:flex;
  gap:10px;
  flex:0 0 auto;
  padding-bottom:7px;
}

.london-gallery-button{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#2B9EB3;
  color:#fff;
  font-size:1.45rem;
  line-height:1;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}

.london-gallery-button:hover,
.london-gallery-button:focus-visible{
  background:var(--pink);
  transform:translateY(-1px);
}

.london-gallery-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 40px) / 3);
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
}

.london-gallery-track::-webkit-scrollbar{
  display:none;
}

.london-gallery-card{
  position:relative;
  overflow:hidden;
  min-width:0;
  aspect-ratio:1.31 / 1;
  margin:0;
  border-radius:22px;
  scroll-snap-align:start;
  background:#ddd;
}

.london-gallery-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.london-gallery-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(20,29,45,.45),transparent 38%);
  pointer-events:none;
}

.london-gallery-card figcaption{
  position:absolute;
  z-index:2;
  left:22px;
  right:18px;
  bottom:18px;
  color:#fff;
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.065em;
  text-transform:uppercase;
  text-shadow:0 2px 7px rgba(0,0,0,.28);
}

.london-gallery-note{
  margin:20px 0 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.5;
}

@media (max-width:1000px){
  .london-flex-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .london-flex-item:nth-child(3){
    border-left:0;
  }

  .london-flex-item:nth-child(n+3){
    border-top:1px solid rgba(255,255,255,.18);
  }

  .london-gallery-track{
    grid-auto-columns:calc((100% - 18px) / 2);
    gap:18px;
  }
}

@media (max-width:650px){
  .london-flex-band{
    padding:52px 0 56px;
  }

  .london-flex-grid{
    grid-template-columns:1fr;
  }

  .london-flex-item,
  .london-flex-item:nth-child(3){
    border-left:0;
    border-top:1px solid rgba(255,255,255,.18);
    padding:22px 6px;
  }

  .london-flex-item:first-child{
    border-top:0;
  }

  .london-gallery-section{
    padding:56px 0 58px;
  }

  .london-gallery-heading{
    align-items:center;
  }

  .london-gallery-controls{
    padding-bottom:0;
  }

  .london-gallery-button{
    width:46px;
    height:46px;
  }

  .london-gallery-track{
    grid-auto-columns:86%;
    gap:14px;
  }

  .london-gallery-card{
    border-radius:18px;
  }
}

/* ========================================================================
   London final refinements
   ======================================================================== */

/* Hero tiles are now links to their individual guide pages. */
.aggregator-page .aggregator-hero-image-link{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.aggregator-page .aggregator-hero-image-link:focus-visible{
  outline:3px solid var(--pink);
  outline-offset:-3px;
}

/* Give the two rows of destination cards twice the previous vertical gap. */
.london-locations-grid{
  column-gap:24px;
  row-gap:48px;
}

/* Marylebone sits against the sloped outer edge too, so move its label in. */
@media (min-width:821px){
  .aggregator-page .aggregator-hero-column-one .aggregator-hero-image:last-child figcaption{
    left:82px;
  }
}

@media (max-width:1100px) and (min-width:821px){
  .aggregator-page .aggregator-hero-column-one .aggregator-hero-image:last-child figcaption{
    left:70px;
  }
}

/* Final gallery deliberately has no location labels. */
.london-gallery-card figcaption{
  display:none;
}

/* Copy the homepage Flexible Day treatment onto the London page. */
.london-aggregator-page .london-flex-original{
  padding:82px 0 88px;
  background:#434F69;
  color:#fff;
}

.london-aggregator-page .london-flex-original .home-section-heading{
  margin-bottom:36px;
}

.london-aggregator-page .london-flex-original .home-section-heading .eyebrow{
  color:#F72079;
}

.london-aggregator-page .london-flex-original .home-section-heading h2{
  color:#fff;
}

.london-aggregator-page .london-flex-original .home-voucher-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  align-items:stretch;
}

.london-aggregator-page .london-flex-original .home-voucher-grid>div{
  position:relative;
  overflow:visible;
  min-height:150px;
  padding:24px 28px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.london-aggregator-page .london-flex-original .home-voucher-grid>div+div{
  border-left:1px solid rgba(255,255,255,.16);
}

.london-aggregator-page .london-flex-original .home-voucher-benefit{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.london-aggregator-page .london-flex-original .voucher-benefit-icon{
  flex:0 0 46px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(247,32,121,.12);
  color:#F72079;
  box-shadow:
    inset 0 0 0 1px rgba(247,32,121,.26),
    0 0 18px rgba(247,32,121,.20);
}

.london-aggregator-page .london-flex-original .voucher-benefit-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.london-aggregator-page .london-flex-original .home-voucher-copy{
  display:block;
  padding-top:4px;
}

.london-aggregator-page .london-flex-original .home-voucher-copy strong{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:1rem;
  line-height:1.3;
}

.london-aggregator-page .london-flex-original .home-voucher-copy>span{
  display:block;
  color:rgba(255,255,255,.72);
  line-height:1.5;
}

@media (max-width:900px){
  .london-aggregator-page .london-flex-original .home-voucher-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .london-aggregator-page .london-flex-original .home-voucher-grid>div:nth-child(3){
    border-left:0;
  }

  .london-aggregator-page .london-flex-original .home-voucher-grid>div:nth-child(n+3){
    border-top:1px solid rgba(255,255,255,.16);
  }
}

@media (max-width:650px){
  .london-aggregator-page .london-flex-original{
    padding:58px 0 62px;
  }

  .london-aggregator-page .london-flex-original .home-voucher-grid{
    grid-template-columns:1fr;
  }

  .london-aggregator-page .london-flex-original .home-voucher-grid>div,
  .london-aggregator-page .london-flex-original .home-voucher-grid>div:nth-child(3){
    min-height:0;
    padding:20px 4px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.16);
  }

  .london-aggregator-page .london-flex-original .home-voucher-grid>div:first-child{
    border-top:0;
  }

  .london-aggregator-page .london-flex-original .voucher-benefit-icon{
    flex-basis:42px;
    width:42px;
    height:42px;
  }

  .london-locations-grid{
    row-gap:28px;
  }
}



/* London location cards — final row spacing */
.london-locations-grid{
  row-gap:96px;
}

@media (max-width:650px){
  .london-locations-grid{
    row-gap:56px;
  }
}


/* ========================================================================
   London hero - widen the left image column by 0.5cm
   Keep the total collage width unchanged and preserve the diagonal treatment.
   ======================================================================== */

@media (min-width:821px){
  .aggregator-page .aggregator-hero-collage-six{
    grid-template-columns:
      calc(33.333333% + .5cm)
      calc(33.333333% - .25cm)
      calc(33.333333% - .25cm);
  }
}


/* London page — reduce only the gap before "The Choice" to about two-thirds.
   The 96px gap between the two location-card rows is unchanged. */
.london-choice-section{
  padding-top:52px;
}

@media (max-width:650px){
  .london-choice-section{
    padding-top:39px;
  }
}


/* London page — final small trim to the gap before "The Choice".
   Location-card row spacing remains unchanged. */
.london-choice-section{
  padding-top:44px;
}

@media (max-width:650px){
  .london-choice-section{
    padding-top:34px;
  }
}


/* ===== Map: locations whose Mystery Picnic guide is not yet complete =====
   These locations remain visible for geographic context, but use the site navy
   and do not pulse or link through to an unfinished page. */
.map-pin--coming-soon{
  cursor:default;
}

.map-pin--coming-soon .map-pin-pulse{
  background:var(--navy);
  box-shadow:0 0 0 2px #fff,0 3px 9px rgba(67,79,105,.28);
}

.map-pin--coming-soon .map-pin-pulse::after{
  content:none;
  animation:none;
}

.map-pin--coming-soon:focus-visible{
  outline-color:rgba(67,79,105,.38);
}

.map-legend-dot-coming-soon{
  background:var(--navy);
}

/* All Locations: highlight the route(s) that directly match the visitor's search.
   This is deliberately a glow rather than a layout-changing border. */

.locations-page .location-card--perfect-match{
  position:relative;
  background:#ffedf5;
  box-shadow:0 0 0 3px rgba(247,32,121,.82);
}

.locations-page .location-card--perfect-match:hover{
  box-shadow:0 0 0 3px rgba(247,32,121,.95);
}

@media (prefers-reduced-motion: reduce){
  .locations-page .location-card--perfect-match{
    transition:none;
  }
}


/* ========================================================================
   All Locations — guide-coming-soon search message
   Keep the heading and explanatory copy on separate lines.
   ======================================================================== */
.locations-status--guide-soon strong,
.locations-status--guide-soon span{
  display:block;
}

.locations-status--guide-soon strong{
  margin-bottom:6px;
}


/* Clickable higher-level London destination menu link */
.desktop-region a.desktop-region-trigger{
  cursor:pointer;
}


/* Mobile Find a Location — give View All Locations the same breathing room
   as the region rows above it. */
@media (max-width:950px){
  .site-header .main-nav .mobile-view-all{
    display:block;
    margin-top:13px;
    padding:11px 0;
    line-height:1.35;
  }
}


/* ========================================================================
   Dedicated Mystery Picnic Locations Map page
   ======================================================================== */
.map-page{
  background:#fff;
}

.map-page-hero{
  background:#fffaf5;
  padding:72px 0 0;
}

.map-page-hero-inner{
  max-width:820px;
  text-align:center;
  padding-bottom:58px;
}

.map-page-hero h1{
  margin:8px 0 18px;
  color:var(--navy);
}

.map-page-hero h1 span{
  color:var(--pink);
}

.map-page-intro{
  max-width:720px;
  margin:0 auto;
  font-size:1.08rem;
  line-height:1.75;
  color:var(--muted);
}

.map-page-main{
  padding:68px 0 84px;
}

.map-page .map-page-card{
  max-width:900px;
  margin:0 auto;
  padding:38px 42px 34px;
}

.map-page .map-page-heading{
  max-width:680px;
  margin:0 auto 28px;
  text-align:center;
}

.map-page .map-page-heading h3{
  font-size:clamp(1.7rem,3vw,2.45rem);
  margin:6px 0 12px;
}

.map-page .map-page-card .location-map-wrap{
  width:min(100%,680px);
  margin-left:auto;
  margin-right:auto;
}

.map-page .map-page-card .location-map-wrap > img{
  width:100%;
  height:auto;
}

.map-page .map-price-legend{
  justify-content:center;
  margin-top:26px;
}

.map-page-browse{
  max-width:900px;
  margin:38px auto 0;
  padding:30px 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  border-radius:22px;
  background:#eef8fa;
}

.map-page-browse h2{
  margin:5px 0 8px;
  color:var(--navy);
}

.map-page-browse p:last-child{
  margin-bottom:0;
}

.map-page-browse .button{
  flex:0 0 auto;
}

@media (max-width:700px){
  .map-page-hero{
    padding-top:48px;
  }

  .map-page-hero-inner{
    padding-bottom:42px;
  }

  .map-page-main{
    padding:42px 0 62px;
  }

  .map-page .map-page-card{
    padding:28px 18px 26px;
  }

  .map-page .map-page-heading{
    margin-bottom:20px;
  }

  .map-page-browse{
    margin-top:28px;
    padding:26px 22px;
    display:block;
  }

  .map-page-browse .button{
    margin-top:20px;
    width:100%;
    text-align:center;
  }
}


/* ========================================================================
   Premium Picnics — richer gold hero
   Premium-only colour treatment plus an explicit desktop media frame so the
   portrait source image cannot make the shared voucher hero taller.
   ======================================================================== */
.premium-page .romantic-sales-hero{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,247,190,.24),transparent 27%),
    radial-gradient(circle at 86% 14%,rgba(255,226,92,.18),transparent 24%),
    linear-gradient(110deg,
      #b98708 0%,
      #d9aa19 18%,
      #f1ce58 38%,
      #d5a313 57%,
      #f3d463 78%,
      #c6920b 100%
    );
}

@media (min-width:701px){
  .premium-page .romantic-hero-media{
    aspect-ratio:1408/741;
    overflow:visible;
  }

  .premium-page .romantic-hero-media img{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center 50%;
  }
}

.premium-page .romantic-sales-hero::before{
  border-color:rgba(67,79,105,.13);
}

.premium-page .romantic-sales-hero h1,
.premium-page .romantic-sales-hero .eyebrow,
.premium-page .romantic-hero-lead,
.premium-page .romantic-hero-link,
.premium-page .romantic-hero-facts strong,
.premium-page .romantic-hero-facts span{
  color:#434F69;
}

.premium-page .romantic-sales-hero h1 span{
  color:#F72079;
}

.premium-page .romantic-hero-media::before{
  background:#434F69;
}

.premium-page .romantic-hero-note span{
  color:#d1a817;
}

/* ========================================================================
   Premium Picnics — match established voucher hero proportions
   15 Sept 2026
   The Premium hero itself, not the source image, owns the desktop height.
   The image fills the same tall hero media window as the other voucher pages.
   ======================================================================== */
@media (min-width:901px){
  .premium-page .romantic-sales-hero{
    height:850px;
    min-height:0;
    box-sizing:border-box;
  }

  .premium-page .romantic-hero-grid{
    height:100%;
  }

  .premium-page .romantic-hero-media{
    height:650px;
    aspect-ratio:auto;
    overflow:visible;
  }

  .premium-page .romantic-hero-media img{
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center 50%;
  }
}

/* ========================================================================
   Voucher hero final sizing adjustments — 15 Sept 2026
   Premium gets enough depth for the complete facts row; Romantic is trimmed
   slightly without changing its media geometry. Premium gets a double heart.
   ======================================================================== */
@media (min-width:901px){
  .premium-page .romantic-sales-hero{
    height:910px;
  }

  .romantic-page .romantic-sales-hero{
    padding-top:62px;
    padding-bottom:64px;
  }
}

/* Premium is the 'more' picnic, so give its background motif two hearts. */
.premium-page .romantic-sales-hero::before{
  content:"♡♡";
  left:-112px;
  bottom:-205px;
  color:rgba(247,32,121,.20);
  font-family:Georgia,"Times New Roman",serif;
  font-size:430px;
  font-weight:400;
  line-height:1;
  letter-spacing:-105px;
  transform:rotate(-10deg);
  white-space:nowrap;
}


/* ========================================================================
   Voucher heroes — bring the composition higher on desktop
   15 Sept 2026
   Reduce only the top padding so the bottom decorative motif peeks above
   the fold. Bottom spacing and established hero/media geometry stay intact.
   ======================================================================== */
@media (min-width:901px){
  .voucher-page .romantic-sales-hero{
    padding-top:26px;
  }
}


/* ========================================================================
   Voucher heroes — balance the reduced desktop top spacing
   15 Sept 2026
   Remove the same 50px from the overall desktop hero height so the space
   moved out of the top does not simply reappear below the facts/decorations.
   ======================================================================== */
@media (min-width:901px){
  .voucher-page .romantic-sales-hero{
    min-height:800px;
  }

  .voucher-page.premium-page .romantic-sales-hero{
    min-height:860px;
  }
}


/* ========================================================================
   Voucher heroes — tighter desktop bottom edge
   15 Sept 2026
   Premium still had excessive empty gold below the facts row. Tighten the
   section itself without moving or resizing its contents.
   ======================================================================== */
@media (min-width:901px){
  .voucher-page.premium-page .romantic-sales-hero{
    min-height:770px;
  }
}


/* ========================================================================
   Premium hero — remove the fixed-height lock
   15 Sept 2026
   Earlier Premium experiments set height:850px, then height:910px. Those
   fixed heights override every later min-height reduction. Let the hero size
   naturally around its 650px media frame and existing padding instead.
   ======================================================================== */
@media (min-width:901px){
  .voucher-page.premium-page .romantic-sales-hero{
    height:auto;
    min-height:0;
  }

  .voucher-page.premium-page .romantic-hero-grid{
    height:auto;
  }
}

/* ========================================================================
   Premium hero — isolated rebuild
   15 Sept 2026

   IMPORTANT:
   This component deliberately uses no romantic-hero, eyebrow, wrap or button
   classes. Its geometry is self-contained so old voucher-page hero rules do
   not participate in its layout.
   ======================================================================== */

.mp-premium-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:113px 0 50px;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,247,190,.24),transparent 27%),
    radial-gradient(circle at 86% 14%,rgba(255,226,92,.18),transparent 24%),
    linear-gradient(110deg,
      #b98708 0%,
      #d9aa19 18%,
      #f1ce58 38%,
      #d5a313 57%,
      #f3d463 78%,
      #c6920b 100%
    );
  color:#434F69;
  box-sizing:border-box;
}

.mp-premium-hero .mp-premium-hero__inner{
  position:relative;
  z-index:1;
  width:min(1220px,calc(100% - 40px));
  max-width:none;
  min-height:0;
  height:auto;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(520px,1.14fr);
  gap:96px;
  align-items:start;
  box-sizing:border-box;
}

.mp-premium-hero .mp-premium-hero__copy{
  position:relative;
  z-index:3;
  min-width:0;
  width:auto;
  max-width:none;
  height:auto;
  min-height:0;
  margin:0;
  padding:3px 0 0;
  align-self:start;
  box-sizing:border-box;
}

.mp-premium-hero .mp-premium-hero__eyebrow{
  display:block;
  margin:0 0 13px;
  padding:0;
  color:#434F69;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.76rem;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.mp-premium-hero .mp-premium-hero__title{
  display:block;
  max-width:500px;
  margin:0 0 22px;
  padding:0;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.45rem,5.25vw,5.15rem);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.035em;
}

.mp-premium-hero .mp-premium-hero__title span{
  display:inline;
  margin:0;
  padding:0;
  color:#F72079;
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}

.mp-premium-hero .mp-premium-hero__lead{
  display:block;
  max-width:500px;
  margin:0 0 25px;
  padding:0;
  color:#434F69;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.03rem;
  font-weight:400;
  line-height:1.72;
}

.mp-premium-hero .mp-premium-hero__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  width:auto;
  height:auto;
  margin:0 0 29px;
  padding:0;
}

.mp-premium-hero .mp-premium-hero__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:46px;
  width:auto;
  height:auto;
  margin:0;
  padding:0 21px;
  border:2px solid #F72079;
  border-radius:999px;
  background:#F72079;
  box-shadow:0 8px 22px rgba(247,32,121,.18);
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.88rem;
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  box-sizing:border-box;
}

.mp-premium-hero .mp-premium-hero__button:hover,
.mp-premium-hero .mp-premium-hero__button:focus-visible{
  background:#d91565;
  border-color:#d91565;
  color:#fff;
}

.mp-premium-hero .mp-premium-hero__link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:0;
  color:#434F69;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.88rem;
  font-weight:800;
  line-height:1.3;
  text-decoration:none;
}

.mp-premium-hero .mp-premium-hero__link:hover,
.mp-premium-hero .mp-premium-hero__link:focus-visible{
  color:#F72079;
}

.mp-premium-hero .mp-premium-hero__facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  max-width:500px;
  min-height:0;
  height:auto;
  margin:0;
  padding:0;
  border-top:1px solid rgba(67,79,105,.16);
  border-bottom:1px solid rgba(67,79,105,.16);
  box-sizing:border-box;
}

.mp-premium-hero .mp-premium-hero__fact{
  min-width:0;
  min-height:0;
  height:auto;
  margin:0;
  padding:13px 14px 12px 0;
  border:0;
  box-sizing:border-box;
}

.mp-premium-hero .mp-premium-hero__fact + .mp-premium-hero__fact{
  padding-left:17px;
  border-left:1px solid rgba(67,79,105,.16);
}

.mp-premium-hero .mp-premium-hero__fact strong,
.mp-premium-hero .mp-premium-hero__fact span{
  display:block;
  margin:0;
  padding:0;
  color:#434F69;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.mp-premium-hero .mp-premium-hero__fact strong{
  margin-bottom:2px;
  font-size:.88rem;
  font-weight:800;
  line-height:1.3;
}

.mp-premium-hero .mp-premium-hero__fact span{
  font-size:.72rem;
  font-weight:400;
  line-height:1.45;
}

.mp-premium-hero .mp-premium-hero__media{
  position:relative;
  z-index:2;
  align-self:start;
  min-width:0;
  width:100%;
  max-width:none;
  height:auto;
  min-height:0;
  aspect-ratio:auto;
  overflow:visible;
  margin:0;
  padding:0;
  transform:none;
  box-sizing:border-box;
}

.mp-premium-hero .mp-premium-hero__photo-frame{
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:0;
  aspect-ratio:1.17 / 1;
  overflow:hidden;
  border:5px solid #fff;
  border-radius:25px;
  background:#fff;
  box-shadow:22px 25px 0 #F72079;
  box-sizing:border-box;
}

.mp-premium-hero .mp-premium-hero__photo{
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:19px;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center 50%;
  box-shadow:none;
}

.mp-premium-hero .mp-premium-hero__note{
  position:absolute;
  z-index:4;
  left:20px;
  bottom:-21px;
  width:min(255px,70%);
  min-height:0;
  height:auto;
  margin:0;
  padding:11px 14px;
  border:0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 20px rgba(67,79,105,.10);
  color:#434F69;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.77rem;
  font-weight:700;
  line-height:1.35;
  text-align:left;
  box-sizing:border-box;
}

.mp-premium-hero .mp-premium-hero__note span{
  color:#d1a817;
  font:inherit;
}

.mp-premium-hero .mp-premium-hero__hearts{
  position:absolute;
  z-index:0;
  left:-118px;
  bottom:-216px;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  color:rgba(247,32,121,.20);
  font-family:Georgia,"Times New Roman",serif;
  font-size:430px;
  font-weight:400;
  line-height:1;
  letter-spacing:-105px;
  white-space:nowrap;
  transform:rotate(-10deg);
  pointer-events:none;
  user-select:none;
}

/* Tablet: keep the component self-contained while allowing the two columns
   to breathe before the mobile stack takes over. */
@media (max-width:1100px) and (min-width:801px){
  .mp-premium-hero{
    padding:46px 0 44px;
  }

  .mp-premium-hero .mp-premium-hero__inner{
    grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);
    gap:42px;
  }

  .mp-premium-hero .mp-premium-hero__title{
    font-size:clamp(3.15rem,5.7vw,4.5rem);
  }

  .mp-premium-hero .mp-premium-hero__photo-frame{
    aspect-ratio:1.08 / 1;
  }
}

/* Mobile rebuild: no old voucher hero mobile selectors are attached to this
   markup, so this stack is controlled only here. */
@media (max-width:800px){
  .mp-premium-hero{
    height:auto;
    min-height:0;
    padding:36px 0 42px;
  }

  .mp-premium-hero .mp-premium-hero__inner{
    width:min(100% - 32px,680px);
    height:auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:30px;
    margin:0 auto;
    padding:0;
  }

  .mp-premium-hero .mp-premium-hero__copy{
    order:1;
    width:100%;
    padding:0;
  }

  .mp-premium-hero .mp-premium-hero__title{
    max-width:620px;
    margin-bottom:19px;
    font-size:clamp(2.8rem,12vw,4.25rem);
    line-height:.98;
  }

  .mp-premium-hero .mp-premium-hero__lead{
    max-width:620px;
    margin-bottom:23px;
    font-size:1rem;
  }

  .mp-premium-hero .mp-premium-hero__actions{
    margin-bottom:27px;
  }

  .mp-premium-hero .mp-premium-hero__facts{
    max-width:620px;
  }

  .mp-premium-hero .mp-premium-hero__media{
    order:2;
  }

  .mp-premium-hero .mp-premium-hero__photo-frame{
    aspect-ratio:4 / 3;
    box-shadow:14px 16px 0 #F72079;
  }

  .mp-premium-hero .mp-premium-hero__note{
    left:14px;
    bottom:-18px;
  }

  .mp-premium-hero .mp-premium-hero__hearts{
    left:-115px;
    bottom:-215px;
    font-size:360px;
    letter-spacing:-90px;
  }
}

@media (max-width:520px){
  .mp-premium-hero{
    padding:30px 0 38px;
  }

  .mp-premium-hero .mp-premium-hero__inner{
    width:calc(100% - 28px);
  }

  .mp-premium-hero .mp-premium-hero__actions{
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
  }

  .mp-premium-hero .mp-premium-hero__button{
    width:100%;
  }

  .mp-premium-hero .mp-premium-hero__facts{
    grid-template-columns:1fr;
    border-bottom:0;
  }

  .mp-premium-hero .mp-premium-hero__fact,
  .mp-premium-hero .mp-premium-hero__fact + .mp-premium-hero__fact{
    padding:11px 0;
    border-left:0;
    border-bottom:1px solid rgba(67,79,105,.16);
  }

  .mp-premium-hero .mp-premium-hero__photo-frame{
    aspect-ratio:1 / 1;
  }
}

/* =========================================================
   ISOLATED ROMANTIC VOUCHER HERO
   Same geometry as the approved Premium hero. Romantic page
   keeps its original navy/pink theme and decorative motif.
   ========================================================= */

.mp-romantic-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:113px 0 50px;
  background:
    radial-gradient(circle at 18% 22%,rgba(247,32,121,.18),transparent 29%),
    radial-gradient(circle at 88% 16%,rgba(43,158,179,.16),transparent 25%),
    linear-gradient(135deg,#26334d 0%,#434F69 58%,#344057 100%);
  color:#fff;
  box-sizing:border-box;
}

.mp-romantic-hero::before{
  content:"♡";
  position:absolute;
  z-index:0;
  left:-58px;
  bottom:-150px;
  margin:0;
  padding:0;
  color:rgba(247,32,121,.20);
  font-family:Georgia,"Times New Roman",serif;
  font-size:390px;
  font-weight:400;
  line-height:1;
  transform:rotate(-12deg);
  pointer-events:none;
}

.mp-romantic-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  right:-70px;
  top:-70px;
  width:290px;
  height:290px;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:30px 30px;
  transform:rotate(8deg);
  pointer-events:none;
}

.mp-romantic-hero .mp-romantic-hero__inner{
  position:relative;
  z-index:1;
  width:min(1220px,calc(100% - 40px));
  max-width:none;
  min-height:0;
  height:auto;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(520px,1.14fr);
  gap:96px;
  align-items:start;
  box-sizing:border-box;
}

.mp-romantic-hero .mp-romantic-hero__copy{
  position:relative;
  z-index:3;
  min-width:0;
  width:auto;
  max-width:none;
  height:auto;
  min-height:0;
  margin:0;
  padding:3px 0 0;
  align-self:start;
  box-sizing:border-box;
}

.mp-romantic-hero .mp-romantic-hero__eyebrow{
  display:block;
  margin:0 0 13px;
  padding:0;
  color:#fff;
  opacity:.86;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.76rem;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.mp-romantic-hero .mp-romantic-hero__title{
  display:block;
  max-width:500px;
  margin:0 0 22px;
  padding:0;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.45rem,5.25vw,5.15rem);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.035em;
}

.mp-romantic-hero .mp-romantic-hero__title span{
  display:inline;
  margin:0;
  padding:0;
  color:#F72079;
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}

.mp-romantic-hero .mp-romantic-hero__lead{
  display:block;
  max-width:500px;
  margin:0 0 25px;
  padding:0;
  color:rgba(255,255,255,.88);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.03rem;
  font-weight:400;
  line-height:1.72;
}

.mp-romantic-hero .mp-romantic-hero__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  width:auto;
  height:auto;
  margin:0 0 29px;
  padding:0;
}

.mp-romantic-hero .mp-romantic-hero__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:46px;
  width:auto;
  height:auto;
  margin:0;
  padding:0 21px;
  border:2px solid #F72079;
  border-radius:999px;
  background:#F72079;
  box-shadow:0 12px 28px rgba(247,32,121,.28);
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.88rem;
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  box-sizing:border-box;
}

.mp-romantic-hero .mp-romantic-hero__button:hover,
.mp-romantic-hero .mp-romantic-hero__button:focus-visible{
  background:#d91565;
  border-color:#d91565;
  color:#fff;
}

.mp-romantic-hero .mp-romantic-hero__link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:0;
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.88rem;
  font-weight:800;
  line-height:1.3;
  text-decoration:none;
}

.mp-romantic-hero .mp-romantic-hero__link:hover,
.mp-romantic-hero .mp-romantic-hero__link:focus-visible{
  color:#FFE916;
}

.mp-romantic-hero .mp-romantic-hero__facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  max-width:500px;
  min-height:0;
  height:auto;
  margin:0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
  box-sizing:border-box;
}

.mp-romantic-hero .mp-romantic-hero__fact{
  min-width:0;
  min-height:0;
  height:auto;
  margin:0;
  padding:13px 14px 12px 0;
  border:0;
  box-sizing:border-box;
}

.mp-romantic-hero .mp-romantic-hero__fact + .mp-romantic-hero__fact{
  padding-left:17px;
  border-left:1px solid rgba(255,255,255,.18);
}

.mp-romantic-hero .mp-romantic-hero__fact strong,
.mp-romantic-hero .mp-romantic-hero__fact span{
  display:block;
  margin:0;
  padding:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.mp-romantic-hero .mp-romantic-hero__fact strong{
  margin-bottom:2px;
  color:#fff;
  font-size:.88rem;
  font-weight:800;
  line-height:1.3;
}

.mp-romantic-hero .mp-romantic-hero__fact span{
  color:rgba(255,255,255,.68);
  font-size:.72rem;
  font-weight:400;
  line-height:1.45;
}

.mp-romantic-hero .mp-romantic-hero__media{
  position:relative;
  z-index:2;
  align-self:start;
  min-width:0;
  width:100%;
  max-width:none;
  height:auto;
  min-height:0;
  aspect-ratio:auto;
  overflow:visible;
  margin:0;
  padding:0;
  transform:none;
  box-sizing:border-box;
}

.mp-romantic-hero .mp-romantic-hero__photo-frame{
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:0;
  aspect-ratio:1.17 / 1;
  overflow:hidden;
  border:5px solid #fff;
  border-radius:25px;
  background:#fff;
  box-shadow:22px 25px 0 #F72079;
  box-sizing:border-box;
}

.mp-romantic-hero .mp-romantic-hero__photo-frame::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
}

.mp-romantic-hero .mp-romantic-hero__photo{
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:19px;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center 50%;
  box-shadow:none;
}

.mp-romantic-hero .mp-romantic-hero__note{
  position:absolute;
  z-index:4;
  left:20px;
  bottom:-21px;
  width:min(255px,70%);
  min-height:0;
  height:auto;
  margin:0;
  padding:11px 14px;
  border:0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 20px rgba(20,28,43,.18);
  color:#434F69;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.77rem;
  font-weight:700;
  line-height:1.35;
  text-align:left;
  box-sizing:border-box;
}

.mp-romantic-hero .mp-romantic-hero__note span{
  color:#F72079;
  font:inherit;
}

@media (max-width:1100px) and (min-width:801px){
  .mp-romantic-hero{
    padding:46px 0 44px;
  }

  .mp-romantic-hero .mp-romantic-hero__inner{
    grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);
    gap:42px;
  }

  .mp-romantic-hero .mp-romantic-hero__title{
    font-size:clamp(3.15rem,5.7vw,4.5rem);
  }

  .mp-romantic-hero .mp-romantic-hero__photo-frame{
    aspect-ratio:1.08 / 1;
  }
}

@media (max-width:800px){
  .mp-romantic-hero{
    height:auto;
    min-height:0;
    padding:36px 0 42px;
  }

  .mp-romantic-hero .mp-romantic-hero__inner{
    width:min(100% - 32px,680px);
    height:auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:30px;
    margin:0 auto;
    padding:0;
  }

  .mp-romantic-hero .mp-romantic-hero__copy{
    order:1;
    width:100%;
    padding:0;
  }

  .mp-romantic-hero .mp-romantic-hero__title{
    max-width:620px;
    margin-bottom:19px;
    font-size:clamp(2.8rem,12vw,4.25rem);
    line-height:.98;
  }

  .mp-romantic-hero .mp-romantic-hero__lead{
    max-width:620px;
    margin-bottom:23px;
    font-size:1rem;
  }

  .mp-romantic-hero .mp-romantic-hero__actions{
    margin-bottom:27px;
  }

  .mp-romantic-hero .mp-romantic-hero__facts{
    max-width:620px;
  }

  .mp-romantic-hero .mp-romantic-hero__media{
    order:2;
  }

  .mp-romantic-hero .mp-romantic-hero__photo-frame{
    aspect-ratio:4 / 3;
    box-shadow:14px 16px 0 #F72079;
  }

  .mp-romantic-hero .mp-romantic-hero__note{
    left:14px;
    bottom:-18px;
  }
}

@media (max-width:520px){
  .mp-romantic-hero{
    padding:30px 0 38px;
  }

  .mp-romantic-hero .mp-romantic-hero__inner{
    width:calc(100% - 28px);
  }

  .mp-romantic-hero .mp-romantic-hero__actions{
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
  }

  .mp-romantic-hero .mp-romantic-hero__button{
    width:100%;
  }

  .mp-romantic-hero .mp-romantic-hero__facts{
    grid-template-columns:1fr;
    border-bottom:0;
  }

  .mp-romantic-hero .mp-romantic-hero__fact,
  .mp-romantic-hero .mp-romantic-hero__fact + .mp-romantic-hero__fact{
    padding:11px 0;
    border-left:0;
    border-bottom:1px solid rgba(255,255,255,.18);
  }

  .mp-romantic-hero .mp-romantic-hero__photo-frame{
    aspect-ratio:1 / 1;
  }
}

/* =========================================================
   ISOLATED FRIENDS & GROUPS VOUCHER HERO
   Same approved geometry as Premium/Romantic; preserves the
   Friends page theme and four-person motif.
   ========================================================= */

.mp-friends-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:113px 0 50px;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.12),transparent 28%),
    radial-gradient(circle at 87% 15%,rgba(255,233,22,.12),transparent 24%),
    linear-gradient(115deg,#218b9d 0%,#2B9EB3 48%,#247f91 100%);
  color:#fff;
  box-sizing:border-box;
}

.mp-friends-hero .mp-friends-hero__inner{
  position:relative;
  z-index:2;
  width:min(1220px,calc(100% - 40px));
  max-width:none;
  min-height:0;
  height:auto;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(520px,1.14fr);
  gap:96px;
  align-items:start;
  box-sizing:border-box;
}

.mp-friends-hero .mp-friends-hero__copy{
  position:relative;
  z-index:3;
  min-width:0;
  width:auto;
  max-width:none;
  margin:0;
  padding:3px 0 0;
  box-sizing:border-box;
}

.mp-friends-hero .mp-friends-hero__eyebrow{
  display:block;
  margin:0 0 13px;
  padding:0;
  color:#fff;
  opacity:.88;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.76rem;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.mp-friends-hero .mp-friends-hero__title{
  display:block;
  max-width:500px;
  margin:0 0 22px;
  padding:0;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.45rem,5.25vw,5.15rem);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.035em;
}

.mp-friends-hero .mp-friends-hero__title span{
  display:inline;
  color:#FFE916;
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}

.mp-friends-hero .mp-friends-hero__lead{
  display:block;
  max-width:500px;
  margin:0 0 25px;
  padding:0;
  color:rgba(255,255,255,.9);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.03rem;
  font-weight:400;
  line-height:1.72;
}

.mp-friends-hero .mp-friends-hero__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  margin:0 0 29px;
  padding:0;
}

.mp-friends-hero .mp-friends-hero__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin:0;
  padding:0 21px;
  border:2px solid #F72079;
  border-radius:999px;
  background:#F72079;
  box-shadow:0 12px 28px rgba(43,58,76,.18);
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.88rem;
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  box-sizing:border-box;
}

.mp-friends-hero .mp-friends-hero__button:hover,
.mp-friends-hero .mp-friends-hero__button:focus-visible{
  background:#d91565;
  border-color:#d91565;
  color:#fff;
}

.mp-friends-hero .mp-friends-hero__link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:0;
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.88rem;
  font-weight:800;
  line-height:1.3;
  text-decoration:none;
}

.mp-friends-hero .mp-friends-hero__link:hover,
.mp-friends-hero .mp-friends-hero__link:focus-visible{
  color:#FFE916;
}

.mp-friends-hero .mp-friends-hero__facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  max-width:500px;
  margin:0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
  box-sizing:border-box;
}

.mp-friends-hero .mp-friends-hero__fact{
  min-width:0;
  margin:0;
  padding:13px 14px 12px 0;
  box-sizing:border-box;
}

.mp-friends-hero .mp-friends-hero__fact + .mp-friends-hero__fact{
  padding-left:17px;
  border-left:1px solid rgba(255,255,255,.22);
}

.mp-friends-hero .mp-friends-hero__fact strong,
.mp-friends-hero .mp-friends-hero__fact span{
  display:block;
  margin:0;
  padding:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.mp-friends-hero .mp-friends-hero__fact strong{
  margin-bottom:2px;
  color:#fff;
  font-size:.88rem;
  font-weight:800;
  line-height:1.3;
}

.mp-friends-hero .mp-friends-hero__fact span{
  color:rgba(255,255,255,.72);
  font-size:.72rem;
  font-weight:400;
  line-height:1.45;
}

.mp-friends-hero .mp-friends-hero__media{
  position:relative;
  z-index:2;
  align-self:start;
  min-width:0;
  width:100%;
  margin:0;
  padding:0;
  overflow:visible;
  box-sizing:border-box;
}

.mp-friends-hero .mp-friends-hero__photo-frame{
  position:relative;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  aspect-ratio:1.17 / 1;
  overflow:hidden;
  border:5px solid #fff;
  border-radius:25px;
  background:#fff;
  box-shadow:22px 25px 0 #FFE916;
  box-sizing:border-box;
}

.mp-friends-hero .mp-friends-hero__photo{
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:19px;
  object-fit:cover;
  object-position:center 50%;
  box-shadow:none;
}

.mp-friends-hero .mp-friends-hero__note{
  position:absolute;
  z-index:4;
  left:20px;
  bottom:-21px;
  width:min(255px,70%);
  margin:0;
  padding:11px 14px;
  border:0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 20px rgba(20,28,43,.18);
  color:#434F69;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.77rem;
  font-weight:700;
  line-height:1.35;
  text-align:left;
  box-sizing:border-box;
}

.mp-friends-hero .mp-friends-hero__note span{
  color:#F72079;
  font:inherit;
}

/* Single outline star motif for the Friends & Groups hero. */
.mp-friends-hero .mp-friends-hero__motif{
  position:absolute;
  z-index:1;
  left:-55px;
  bottom:-55px;
  width:330px;
  height:330px;
  opacity:.18;
  transform:rotate(-12deg);
  pointer-events:none;
}

.mp-friends-hero .mp-friends-hero__motif::before{
  content:"☆";
  display:block;
  margin:0;
  padding:0;
  color:#FFE916;
  font-family:Arial,sans-serif;
  font-size:330px;
  font-weight:400;
  line-height:1;
}

.mp-friends-hero .mp-friends-hero__person{
  display:none;
}

@media (max-width:1100px) and (min-width:801px){
  .mp-friends-hero{padding:46px 0 44px;}

  .mp-friends-hero .mp-friends-hero__inner{
    grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);
    gap:42px;
  }

  .mp-friends-hero .mp-friends-hero__title{
    font-size:clamp(3.15rem,5.7vw,4.5rem);
  }

  .mp-friends-hero .mp-friends-hero__photo-frame{
    aspect-ratio:1.08 / 1;
  }
}

@media (max-width:800px){
  .mp-friends-hero{
    height:auto;
    min-height:0;
    padding:36px 0 42px;
  }

  .mp-friends-hero .mp-friends-hero__inner{
    width:min(100% - 32px,680px);
    display:flex;
    flex-direction:column;
    gap:30px;
    margin:0 auto;
    padding:0;
  }

  .mp-friends-hero .mp-friends-hero__copy{
    order:1;
    width:100%;
    padding:0;
  }

  .mp-friends-hero .mp-friends-hero__title{
    max-width:620px;
    margin-bottom:19px;
    font-size:clamp(2.8rem,12vw,4.25rem);
    line-height:.98;
  }

  .mp-friends-hero .mp-friends-hero__lead{
    max-width:620px;
    margin-bottom:23px;
    font-size:1rem;
  }

  .mp-friends-hero .mp-friends-hero__actions{margin-bottom:27px;}
  .mp-friends-hero .mp-friends-hero__facts{max-width:620px;}
  .mp-friends-hero .mp-friends-hero__media{order:2;}

  .mp-friends-hero .mp-friends-hero__photo-frame{
    aspect-ratio:4 / 3;
    box-shadow:14px 16px 0 #FFE916;
  }

  .mp-friends-hero .mp-friends-hero__note{
    left:14px;
    bottom:-18px;
  }

  .mp-friends-hero .mp-friends-hero__motif{
    left:-70px;
    bottom:-60px;
    transform:scale(.78) rotate(-12deg);
    transform-origin:left bottom;
  }
}

@media (max-width:520px){
  .mp-friends-hero{padding:30px 0 38px;}
  .mp-friends-hero .mp-friends-hero__inner{width:calc(100% - 28px);}

  .mp-friends-hero .mp-friends-hero__actions{
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
  }

  .mp-friends-hero .mp-friends-hero__button{width:100%;}

  .mp-friends-hero .mp-friends-hero__facts{
    grid-template-columns:1fr;
    border-bottom:0;
  }

  .mp-friends-hero .mp-friends-hero__fact,
  .mp-friends-hero .mp-friends-hero__fact + .mp-friends-hero__fact{
    padding:11px 0;
    border-left:0;
    border-bottom:1px solid rgba(255,255,255,.22);
  }

  .mp-friends-hero .mp-friends-hero__photo-frame{
    aspect-ratio:1 / 1;
  }
}

/* =========================================================
   ISOLATED FAMILY VOUCHER HERO
   Premium-sized geometry with the ORIGINAL Family visual
   identity copied from the old Family hero CSS.
   ========================================================= */

.mp-family-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:113px 0 50px;
  background:
    radial-gradient(circle at 18% 22%,rgba(43,158,179,.22),transparent 29%),
    radial-gradient(circle at 88% 16%,rgba(247,32,121,.10),transparent 25%),
    linear-gradient(135deg,#26334d 0%,#434F69 58%,#344057 100%);
  color:#fff;
  box-sizing:border-box;
}

.mp-family-hero .mp-family-hero__inner{
  position:relative;
  z-index:2;
  width:min(1220px,calc(100% - 40px));
  max-width:none;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(520px,1.14fr);
  gap:96px;
  align-items:start;
  box-sizing:border-box;
}

.mp-family-hero .mp-family-hero__copy{
  position:relative;
  z-index:3;
  min-width:0;
  margin:0;
  padding:3px 0 0;
  box-sizing:border-box;
}

.mp-family-hero .mp-family-hero__eyebrow{
  display:block;
  margin:0 0 13px;
  padding:0;
  color:#fff;
  opacity:.86;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.76rem;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.mp-family-hero .mp-family-hero__title{
  display:block;
  max-width:500px;
  margin:0 0 22px;
  padding:0;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.45rem,5.25vw,5.15rem);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.035em;
}

.mp-family-hero .mp-family-hero__title span{
  display:inline;
  color:#2B9EB3;
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  text-shadow:0 0 26px rgba(43,158,179,.14);
}

.mp-family-hero .mp-family-hero__lead{
  display:block;
  max-width:500px;
  margin:0 0 25px;
  padding:0;
  color:rgba(255,255,255,.88);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.03rem;
  font-weight:400;
  line-height:1.72;
}

.mp-family-hero .mp-family-hero__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  margin:0 0 29px;
  padding:0;
}

.mp-family-hero .mp-family-hero__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin:0;
  padding:0 21px;
  border:2px solid #2B9EB3;
  border-radius:999px;
  background:#2B9EB3;
  box-shadow:0 12px 28px rgba(43,158,179,.24);
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.88rem;
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  box-sizing:border-box;
}

.mp-family-hero .mp-family-hero__button:hover,
.mp-family-hero .mp-family-hero__button:focus-visible{
  background:#F72079;
  border-color:#F72079;
  color:#fff;
}

.mp-family-hero .mp-family-hero__link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:0;
  color:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.88rem;
  font-weight:800;
  line-height:1.3;
  text-decoration:none;
}

.mp-family-hero .mp-family-hero__link:hover,
.mp-family-hero .mp-family-hero__link:focus-visible{
  color:#2B9EB3;
}

.mp-family-hero .mp-family-hero__facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  max-width:500px;
  margin:0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
  box-sizing:border-box;
}

.mp-family-hero .mp-family-hero__fact{
  min-width:0;
  margin:0;
  padding:13px 14px 12px 0;
  box-sizing:border-box;
}

.mp-family-hero .mp-family-hero__fact + .mp-family-hero__fact{
  padding-left:17px;
  border-left:1px solid rgba(255,255,255,.18);
}

.mp-family-hero .mp-family-hero__fact strong,
.mp-family-hero .mp-family-hero__fact span{
  display:block;
  margin:0;
  padding:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.mp-family-hero .mp-family-hero__fact strong{
  margin-bottom:2px;
  color:#fff;
  font-size:.88rem;
  font-weight:800;
  line-height:1.3;
}

.mp-family-hero .mp-family-hero__fact span{
  color:rgba(255,255,255,.68);
  font-size:.72rem;
  font-weight:400;
  line-height:1.45;
}

.mp-family-hero .mp-family-hero__media{
  position:relative;
  z-index:2;
  align-self:start;
  min-width:0;
  width:100%;
  margin:0;
  padding:0;
  overflow:visible;
  box-sizing:border-box;
}

.mp-family-hero .mp-family-hero__photo-frame{
  position:relative;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  aspect-ratio:1.17 / 1;
  overflow:visible;
  border:5px solid #fff;
  border-radius:25px;
  background:#fff;
  box-sizing:border-box;
}

/* Original Family teal grid/pattern backing, adapted to the new frame geometry. */
.mp-family-hero .mp-family-hero__photo-frame::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:22px;
  top:25px;
  width:100%;
  height:100%;
  border-radius:25px;
  background:
    linear-gradient(90deg,rgba(43,158,179,.40) 0 14%,transparent 14% 29%,rgba(255,255,255,.06) 29% 43%,transparent 43% 100%),
    linear-gradient(rgba(43,158,179,.40) 0 14%,transparent 14% 29%,rgba(255,255,255,.06) 29% 43%,transparent 43% 100%),
    #2B9EB3;
}

.mp-family-hero .mp-family-hero__photo{
  display:block;
  position:relative;
  z-index:1;
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:19px;
  object-fit:cover;
  object-position:center 42%;
  box-shadow:none;
}

.mp-family-hero .mp-family-hero__note{
  position:absolute;
  z-index:4;
  left:20px;
  bottom:-21px;
  width:min(255px,70%);
  margin:0;
  padding:11px 14px;
  border:0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 20px rgba(20,28,43,.18);
  color:#434F69;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.77rem;
  font-weight:700;
  line-height:1.35;
  text-align:left;
  box-sizing:border-box;
}

.mp-family-hero .mp-family-hero__note span{
  color:#2B9EB3;
  font:inherit;
}

/* Original Family-of-four motif. */
.mp-family-hero .mp-family-hero__motif{
  position:absolute;
  z-index:1;
  left:-118px;
  bottom:-132px;
  width:560px;
  height:470px;
  pointer-events:none;
  opacity:.92;
}

.mp-family-hero .mp-family-hero__person{
  --motif-colour:rgba(43,158,179,.16);
  position:absolute;
  bottom:0;
  display:block;
  border:0;
}

.mp-family-hero .mp-family-hero__person::before{
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  top:0;
  width:var(--motif-head);
  height:var(--motif-head);
  transform:translateX(-50%);
  border:var(--motif-stroke) solid var(--motif-colour);
  border-radius:50%;
  box-sizing:border-box;
}

.mp-family-hero .mp-family-hero__person::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--motif-body-height);
  border:var(--motif-stroke) solid var(--motif-colour);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 58% 58% 0 0;
  box-sizing:border-box;
}

.mp-family-hero .mp-family-hero__parent--one{
  --motif-head:52px;
  --motif-stroke:13px;
  --motif-body-height:300px;
  left:0;
  width:246px;
  height:392px;
}

.mp-family-hero .mp-family-hero__parent--two{
  --motif-head:48px;
  --motif-stroke:12px;
  --motif-body-height:265px;
  --motif-colour:rgba(43,158,179,.135);
  left:198px;
  width:220px;
  height:348px;
}

/* Children retain the smaller, overlapping Family motif treatment. */
.mp-family-hero .mp-family-hero__child--one{
  --motif-head:34px;
  --motif-stroke:9px;
  --motif-body-height:175px;
  --motif-colour:rgba(43,158,179,.20);
  left:130px;
  width:142px;
  height:236px;
  bottom:2px;
}

.mp-family-hero .mp-family-hero__child--two{
  --motif-head:30px;
  --motif-stroke:8px;
  --motif-body-height:154px;
  --motif-colour:rgba(43,158,179,.18);
  left:271px;
  width:128px;
  height:210px;
  bottom:0;
}

@media (max-width:1100px) and (min-width:801px){
  .mp-family-hero{padding:46px 0 44px;}

  .mp-family-hero .mp-family-hero__inner{
    grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);
    gap:42px;
  }

  .mp-family-hero .mp-family-hero__title{
    font-size:clamp(3.15rem,5.7vw,4.5rem);
  }

  .mp-family-hero .mp-family-hero__photo-frame{
    aspect-ratio:1.08 / 1;
  }
}

@media (max-width:800px){
  .mp-family-hero{
    height:auto;
    min-height:0;
    padding:36px 0 42px;
  }

  .mp-family-hero .mp-family-hero__inner{
    width:min(100% - 32px,680px);
    display:flex;
    flex-direction:column;
    gap:30px;
    margin:0 auto;
    padding:0;
  }

  .mp-family-hero .mp-family-hero__copy{
    order:1;
    width:100%;
    padding:0;
  }

  .mp-family-hero .mp-family-hero__title{
    max-width:620px;
    margin-bottom:19px;
    font-size:clamp(2.8rem,12vw,4.25rem);
    line-height:.98;
  }

  .mp-family-hero .mp-family-hero__lead{
    max-width:620px;
    margin-bottom:23px;
    font-size:1rem;
  }

  .mp-family-hero .mp-family-hero__actions{margin-bottom:27px;}
  .mp-family-hero .mp-family-hero__facts{max-width:620px;}
  .mp-family-hero .mp-family-hero__media{order:2;}

  .mp-family-hero .mp-family-hero__photo-frame{
    aspect-ratio:4 / 3;
  }

  .mp-family-hero .mp-family-hero__photo-frame::before{
    left:14px;
    top:16px;
  }

  .mp-family-hero .mp-family-hero__note{
    left:14px;
    bottom:-18px;
  }

  .mp-family-hero .mp-family-hero__motif{
    left:-96px;
    bottom:-78px;
    width:390px;
    height:320px;
    transform:scale(.72);
    transform-origin:left bottom;
    opacity:.78;
  }
}

@media (max-width:520px){
  .mp-family-hero{padding:30px 0 38px;}
  .mp-family-hero .mp-family-hero__inner{width:calc(100% - 28px);}

  .mp-family-hero .mp-family-hero__actions{
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
  }

  .mp-family-hero .mp-family-hero__button{width:100%;}

  .mp-family-hero .mp-family-hero__facts{
    grid-template-columns:1fr;
    border-bottom:0;
  }

  .mp-family-hero .mp-family-hero__fact,
  .mp-family-hero .mp-family-hero__fact + .mp-family-hero__fact{
    padding:11px 0;
    border-left:0;
    border-bottom:1px solid rgba(255,255,255,.18);
  }

  .mp-family-hero .mp-family-hero__photo-frame{
    aspect-ratio:1 / 1;
  }
}

/* =========================================================
   DESKTOP VOUCHER HERO MEDIA GUTTER
   Keep the approved text geometry and image size unchanged;
   shift only the media column 30px to the right.
   ========================================================= */
@media (min-width:1101px){
  .mp-premium-hero .mp-premium-hero__media,
  .mp-romantic-hero .mp-romantic-hero__media,
  .mp-friends-hero .mp-friends-hero__media,
  .mp-family-hero .mp-family-hero__media{
    transform:translateX(30px);
  }
}

/* =========================================================
   PREMIUM OPTIONS — wider centred cards + gold treatment
   ========================================================= */
.premium-page #premium-options .friends-options-grid{
  width:min(100%, 980px);
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  justify-content:center;
}

.premium-page #premium-options .friends-option-card{
  position:relative;
  width:100%;
  min-width:0;
  overflow:hidden;
}

/* Premium gold top trim */
.premium-page #premium-options .friends-option-card::before{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  top:0;
  height:4px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,#d9a600 0%,#FFE916 48%,#e5b800 100%);
  box-shadow:0 2px 10px rgba(217,166,0,.22);
}

/* Gold Premium CTAs at rest */
.premium-page #premium-options .friends-option-card > .button.full{
  background:linear-gradient(135deg,#d9a600 0%,#FFE916 52%,#e5b800 100%);
  border-color:#d9a600;
  color:#434F69;
  box-shadow:0 10px 24px rgba(217,166,0,.22);
  white-space:nowrap;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

/* Mystery Picnic pink on interaction */
.premium-page #premium-options .friends-option-card > .button.full:hover,
.premium-page #premium-options .friends-option-card > .button.full:focus-visible,
.premium-page #premium-options .friends-option-card > .button.full:active{
  background:#F72079;
  border-color:#F72079;
  color:#fff;
  box-shadow:0 10px 24px rgba(247,32,121,.24);
}

/* Keep the pair centred as the viewport narrows, then stack cleanly. */
@media (max-width:1050px){
  .premium-page #premium-options .friends-options-grid{
    width:min(100%, 900px);
    max-width:900px;
    gap:22px;
  }

  .premium-page #premium-options .friends-option-card > .button.full{
    white-space:normal;
  }
}

@media (max-width:800px){
  .premium-page #premium-options .friends-options-grid{
    width:min(100%,560px);
    max-width:560px;
    grid-template-columns:1fr;
  }
}

/* =========================================================
   PREMIUM OPTIONS — refined proportions + metallic interaction
   Narrower cards restore the taller Premium proportions.
   ========================================================= */
.premium-page #premium-options .friends-options-grid{
  width:min(100%, 900px);
  max-width:900px;
  gap:24px;
}

/* Give the trim a transition as well as the button. */
.premium-page #premium-options .friends-option-card::before{
  background:linear-gradient(
    90deg,
    #b98200 0%,
    #e7b900 18%,
    #fff08a 42%,
    #FFE916 55%,
    #c99100 82%,
    #f2ca16 100%
  );
  box-shadow:0 2px 10px rgba(185,130,0,.24);
  transition:background .22s ease, box-shadow .22s ease;
}

/* More metallic gold at rest. */
.premium-page #premium-options .friends-option-card > .button.full{
  background:linear-gradient(
    105deg,
    #b98200 0%,
    #e9b900 17%,
    #fff08a 40%,
    #FFE916 53%,
    #c99100 78%,
    #f1c914 100%
  );
  border-color:#c99100;
  color:#434F69;
}

/* Metallic Mystery Picnic pink for the CTA interaction state. */
.premium-page #premium-options .friends-option-card > .button.full:hover,
.premium-page #premium-options .friends-option-card > .button.full:focus-visible,
.premium-page #premium-options .friends-option-card > .button.full:active{
  background:linear-gradient(
    105deg,
    #b80e53 0%,
    #F72079 20%,
    #ff82b5 42%,
    #ff3f8d 55%,
    #c70f59 80%,
    #F72079 100%
  );
  border-color:#d41462;
  color:#fff;
  box-shadow:0 10px 24px rgba(247,32,121,.30);
}

/* Let the whole card advertise the pink interaction by changing its trim too. */
.premium-page #premium-options .friends-option-card:has(> .button.full:hover)::before,
.premium-page #premium-options .friends-option-card:has(> .button.full:focus-visible)::before,
.premium-page #premium-options .friends-option-card:has(> .button.full:active)::before{
  background:linear-gradient(
    90deg,
    #b80e53 0%,
    #F72079 20%,
    #ff82b5 43%,
    #ff3f8d 56%,
    #c70f59 81%,
    #F72079 100%
  );
  box-shadow:0 2px 12px rgba(247,32,121,.30);
}

@media (max-width:1050px){
  .premium-page #premium-options .friends-options-grid{
    width:min(100%, 860px);
    max-width:860px;
    gap:22px;
  }
}

@media (max-width:800px){
  .premium-page #premium-options .friends-options-grid{
    width:min(100%,560px);
    max-width:560px;
  }
}

/* =========================================================
   PREMIUM OPTIONS — final narrower desktop proportions
   ========================================================= */
@media (min-width:1051px){
  .premium-page #premium-options .friends-options-grid{
    width:min(100%, 840px);
    max-width:840px;
    gap:24px;
  }
}

/* =========================================================
   PREMIUM OPTIONS — test narrower cards + single-line note
   ========================================================= */
@media (min-width:1051px){
  .premium-page #premium-options .friends-options-grid{
    width:min(100%, 800px);
    max-width:800px;
    gap:24px;
  }

  .premium-page #premium-options .friends-price-note{
    width:max-content;
    max-width:none;
    margin-left:50%;
    margin-right:0;
    transform:translateX(-50%);
    white-space:nowrap;
  }
}

/* =========================================================
   PREMIUM OPTIONS — taller cards / clear title from icon
   ========================================================= */
@media (min-width:801px){
  .premium-page #premium-options .friends-option-card{
    padding-top:32px;
    padding-bottom:28px;
  }

  /* Reserve space on the right so the title never runs under the icon. */
  .premium-page #premium-options .friends-option-card h3{
    padding-right:72px;
  }
}

/* =========================================================
   PREMIUM OPTIONS — correction: restore full title width
   Card height stays increased; heading no longer loses 72px.
   ========================================================= */
@media (min-width:801px){
  .premium-page #premium-options .friends-option-card h3{
    padding-right:0;
  }
}

/* =========================================================
   PREMIUM OPTIONS — more vertical breathing room
   Keep card/title width unchanged; move title down away from icon.
   ========================================================= */
@media (min-width:801px){
  .premium-page #premium-options .friends-option-card{
    padding-top:38px;
    padding-bottom:34px;
  }

  .premium-page #premium-options .friends-option-card h3{
    margin-top:28px;
  }
}

/* =========================================================
   VOUCHER HERO STRUCTURE — copy, media, actions and facts are siblings
   Mobile: copy -> image -> actions -> facts.
   Desktop/tablet: actions and facts remain beneath the copy at left;
   media remains at right. No display:contents reordering.
   ========================================================= */

@media (min-width:1101px){
  .mp-premium-hero .mp-premium-hero__inner,
  .mp-romantic-hero .mp-romantic-hero__inner,
  .mp-friends-hero .mp-friends-hero__inner,
  .mp-family-hero .mp-family-hero__inner{
    column-gap:96px;
    row-gap:0;
  }

  .mp-premium-hero .mp-premium-hero__copy,
  .mp-romantic-hero .mp-romantic-hero__copy,
  .mp-friends-hero .mp-friends-hero__copy,
  .mp-family-hero .mp-family-hero__copy{
    grid-column:1;
    grid-row:1;
  }

  .mp-premium-hero .mp-premium-hero__actions,
  .mp-romantic-hero .mp-romantic-hero__actions,
  .mp-friends-hero .mp-friends-hero__actions,
  .mp-family-hero .mp-family-hero__actions{
    grid-column:1;
    grid-row:2;
  }

  .mp-premium-hero .mp-premium-hero__facts,
  .mp-romantic-hero .mp-romantic-hero__facts,
  .mp-friends-hero .mp-friends-hero__facts,
  .mp-family-hero .mp-family-hero__facts{
    grid-column:1;
    grid-row:3;
  }

  .mp-premium-hero .mp-premium-hero__media,
  .mp-romantic-hero .mp-romantic-hero__media,
  .mp-friends-hero .mp-friends-hero__media,
  .mp-family-hero .mp-family-hero__media{
    grid-column:2;
    grid-row:1 / span 3;
  }
}

@media (min-width:801px) and (max-width:1100px){
  .mp-premium-hero .mp-premium-hero__inner,
  .mp-romantic-hero .mp-romantic-hero__inner,
  .mp-friends-hero .mp-friends-hero__inner,
  .mp-family-hero .mp-family-hero__inner{
    column-gap:42px;
    row-gap:0;
  }

  .mp-premium-hero .mp-premium-hero__copy,
  .mp-romantic-hero .mp-romantic-hero__copy,
  .mp-friends-hero .mp-friends-hero__copy,
  .mp-family-hero .mp-family-hero__copy{
    grid-column:1;
    grid-row:1;
  }

  .mp-premium-hero .mp-premium-hero__actions,
  .mp-romantic-hero .mp-romantic-hero__actions,
  .mp-friends-hero .mp-friends-hero__actions,
  .mp-family-hero .mp-family-hero__actions{
    grid-column:1;
    grid-row:2;
  }

  .mp-premium-hero .mp-premium-hero__facts,
  .mp-romantic-hero .mp-romantic-hero__facts,
  .mp-friends-hero .mp-friends-hero__facts,
  .mp-family-hero .mp-family-hero__facts{
    grid-column:1;
    grid-row:3;
  }

  .mp-premium-hero .mp-premium-hero__media,
  .mp-romantic-hero .mp-romantic-hero__media,
  .mp-friends-hero .mp-friends-hero__media,
  .mp-family-hero .mp-family-hero__media{
    grid-column:2;
    grid-row:1 / span 3;
  }
}

@media (max-width:800px){
  .mp-premium-hero .mp-premium-hero__inner,
  .mp-romantic-hero .mp-romantic-hero__inner,
  .mp-friends-hero .mp-friends-hero__inner,
  .mp-family-hero .mp-family-hero__inner{
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .mp-premium-hero .mp-premium-hero__copy,
  .mp-romantic-hero .mp-romantic-hero__copy,
  .mp-friends-hero .mp-friends-hero__copy,
  .mp-family-hero .mp-family-hero__copy{
    order:1;
    width:100%;
  }

  .mp-premium-hero .mp-premium-hero__media,
  .mp-romantic-hero .mp-romantic-hero__media,
  .mp-friends-hero .mp-friends-hero__media,
  .mp-family-hero .mp-family-hero__media{
    order:2;
    width:calc(100% - 16px);
    margin:0 16px 40px 0;
    transform:translateX(-2px);
  }

  .mp-premium-hero .mp-premium-hero__actions,
  .mp-romantic-hero .mp-romantic-hero__actions,
  .mp-friends-hero .mp-friends-hero__actions,
  .mp-family-hero .mp-family-hero__actions{
    order:3;
    width:100%;
    margin:0 0 27px;
  }

  .mp-premium-hero .mp-premium-hero__facts,
  .mp-romantic-hero .mp-romantic-hero__facts,
  .mp-friends-hero .mp-friends-hero__facts,
  .mp-family-hero .mp-family-hero__facts{
    order:4;
    width:100%;
    max-width:none;
  }
}