/* ================= Root ================= */
:root{
  --navy:#12386f;
  --teal:#2ea6b8;
  --sky:#bfe6f0;
  --mist:#eef9fc;
  --lime:#9bd45a;
  --text:#0b1b2b;
  --muted:#5d7e8d;
  --card:rgba(255,255,255,.82);
  --bd:rgba(18,56,111,.12);
  --sh:0 16px 40px rgba(18,56,111,.14)
}

/* ================= Reset ================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 78% 0,rgba(46,166,184,.30),transparent 60%),
    radial-gradient(900px 520px at 0 18%,rgba(191,230,240,.55),transparent 60%),
    linear-gradient(180deg,#f7fdff,var(--mist))
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ================= Layout ================= */
.wrap{max-width:1100px;margin:0 auto;padding:22px}

/* ================= Header ================= */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{flex:0 0 auto}
.brand img{height:80px;width:auto}

/* Social (SVG) */
.social{display:flex;gap:10px;flex:0 0 auto}
.socialLink{
  width:40px;height:40px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.75);
  border:1px solid var(--bd);
  box-shadow:0 8px 22px rgba(18,56,111,.08)
}
.socialLink svg{width:20px;height:20px;fill:var(--navy)}

/* ================= Strapline ================= */
.strapline{
  margin-top:10px;
  border-radius:999px;
  border:1px solid var(--bd);
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(8px)
}
.straplineInner{
  padding:10px 14px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  line-height:1.25
}

/* ================= Hero ================= */
.hero{
  margin-top:18px;
  padding:28px;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.62));
  border:1px solid var(--bd);
  box-shadow:var(--sh);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  position:relative;
  overflow:hidden
}
.hero:before{
  content:"";
  position:absolute;
  inset:-150px -170px auto auto;
  width:440px;height:440px;border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%,rgba(155,212,90,.38),transparent 60%),
    radial-gradient(circle at 70% 70%,rgba(46,166,184,.34),transparent 62%)
}
.heroMain{position:relative}
.heroSide{position:relative;display:grid;gap:12px}

/* ================= Typography ================= */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--lime);
  box-shadow:0 0 0 7px rgba(155,212,90,.18)
}
h1{
  margin:.55rem 0 0;
  font-size:clamp(30px,4.2vw,52px);
  line-height:1.06;
  letter-spacing:.03em;
  color:var(--navy)
}
h2{
  margin:10px 0 0;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.1;
  color:var(--navy)
}
h3{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--navy)
}
.sub{margin:12px 0 0;color:var(--muted);font-size:clamp(16px,2vw,18px);max-width:70ch}
.mutedLine{margin:8px 0 0;color:var(--muted)}

/* ================= Meta line ================= */
.meta{
  margin-top:14px;
  color:rgba(11,27,43,.68);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:14px
}
.metaLink{color:var(--navy);font-weight:800}
.sep{opacity:.55}

/* ================= Buttons ================= */
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--bd);
  text-decoration:none;
  font-weight:900
}
.btn.primary{background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;border:none}
.btn.ghost{background:rgba(255,255,255,.80)}
.btn.small{padding:10px 14px;font-weight:900}

/* ================= Cards ================= */
.miniCard,
.tile,
.copy,
.priceCard,
.contactBox,
.trustItem,
.journeyStep,
.aftercareCard{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:22px;
  padding:16px;
  backdrop-filter:blur(8px)
}
.miniCard h2{margin:0 0 8px;font-size:16px;letter-spacing:.10em;text-transform:uppercase}
.miniCard p{margin:0;color:var(--muted);line-height:1.55}
.stack{margin-top:10px;display:grid;gap:8px}
.link{color:var(--navy);font-weight:900;text-decoration:none}

/* ================= Grid / Tiles ================= */
.grid{margin-top:14px;display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{
  grid-column:span 4;
  box-shadow:0 8px 22px rgba(18,56,111,.08)
}
.tileIcon{
  width:44px;height:44px;border-radius:16px;
  background:linear-gradient(135deg,rgba(46,166,184,.22),rgba(155,212,90,.22));
  border:1px solid rgba(18,56,111,.10);
  display:grid;place-items:center;margin-bottom:10px;color:var(--navy);font-weight:900
}
.tile p{margin:0;color:var(--muted);line-height:1.55}
.span6{grid-column:span 6}
.span12{grid-column:span 12}

/* Hours */
.hours{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;color:var(--muted)}
.hours li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(18,56,111,.10);padding-top:10px}

/* ================= Panels ================= */
.panel{
  margin-top:14px;
  border-radius:26px;
  border:1px solid var(--bd);
  background:linear-gradient(135deg,rgba(18,56,111,.06),rgba(46,166,184,.08),rgba(155,212,90,.06));
  box-shadow:0 10px 28px rgba(18,56,111,.10)
}
.panelInner{padding:18px}
.panelHead .sub{max-width:80ch}
.panelCols{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.copy{border-radius:18px;padding:14px;background:rgba(255,255,255,.75);border:1px solid rgba(18,56,111,.10)}
.copy p{margin:0 0 10px;color:var(--muted);line-height:1.6}
.copy p:last-child{margin-bottom:0}
.callout{color:var(--navy)}

/* Lists / Quotes */
.bullets{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.6}
.quote{margin:10px 0 0;color:var(--muted);line-height:1.6;border-left:4px solid rgba(46,166,184,.35);padding-left:12px}
.byline{margin-top:10px;font-weight:900;color:var(--navy)}

/* ================= Trust strip ================= */
.trust{margin-top:14px}
.trustGrid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px
}
.trustItem{
  grid-column:span 3;
  box-shadow:0 8px 22px rgba(18,56,111,.08)
}
.trustTop{display:flex;align-items:center;gap:10px}
.trustIcon{
  width:34px;height:34px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(46,166,184,.18),rgba(155,212,90,.18));
  border:1px solid rgba(18,56,111,.10);
  color:var(--navy);font-weight:950
}
.trustTitle{font-weight:950;color:var(--navy);letter-spacing:.02em}
.trustDesc{margin-top:8px;color:var(--muted);line-height:1.55}

/* ================= What to expect ================= */
.journeyGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px
}
.journeyStep{grid-column:span 3;position:relative;overflow:hidden}
.journeyNum{
  width:38px;height:38px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:950;color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--teal));
  box-shadow:0 10px 22px rgba(18,56,111,.18);
  margin-bottom:10px
}
.journeyTitle{font-weight:950;color:var(--navy);letter-spacing:.02em}
.journeyDesc{margin-top:8px;color:var(--muted);line-height:1.55}

/* ================= Services expanders ================= */
.serviceList{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.serviceItem{
  border:1px solid rgba(18,56,111,.10);
  border-radius:18px;
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(8px);
  overflow:hidden
}
.serviceBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left
}
.serviceBtn:focus-visible{
  outline:3px solid rgba(46,166,184,.22);
  outline-offset:2px
}
.serviceBtnLeft{display:grid;gap:4px}
.serviceTitle{font-weight:950;color:var(--navy);letter-spacing:.02em}
.serviceSummary{color:var(--muted);line-height:1.5}
.chev{
  font-size:26px;
  color:rgba(18,56,111,.55);
  transform:rotate(90deg);
  transition:transform .18s ease, color .18s ease
}
.serviceItem.open .chev{
  transform:rotate(-90deg);
  color:rgba(18,56,111,.75)
}
.servicePanel{
  padding:0 14px 14px;
  color:var(--muted);
  border-top:1px solid rgba(18,56,111,.08)
}
.servicePanel p{margin:12px 0 0;line-height:1.6}
.serviceBtn.noExpand{cursor:default}
.serviceBtn.noExpand .chev{display:none}

/* ================= Pricing ================= */
.priceGrid{margin-top:14px;display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.priceCard{grid-column:span 4;background:rgba(255,255,255,.80);border:1px solid rgba(18,56,111,.10);border-radius:20px;padding:14px;position:relative;overflow:hidden}
.priceCard h3{margin:0 0 8px;letter-spacing:.10em;text-transform:uppercase;color:var(--navy);font-size:15px}
.priceLine{display:flex;justify-content:space-between;gap:12px;align-items:baseline;color:var(--muted)}
.priceCard ul{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.6}

/* Right side holds price + optional suffix */
.priceRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

/* PRICE: white pill */
.priceValue{
  font-size:26px;
  font-weight:1000;
  letter-spacing:.02em;
  color:#fff !important;
  padding:8px 12px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--teal));
  box-shadow:0 10px 22px rgba(18,56,111,.18);
  line-height:1;
  white-space:nowrap;
}

/* Suffix (e.g. per session / from / per area) */
.priceSuffix{
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(11,27,43,.60);
  white-space:nowrap;
}

/* Featured pricing card (subtle & premium) */
.priceCard.featured{
  border:1px solid rgba(46,166,184,.45);
  background:
    radial-gradient(360px 220px at 85% 10%, rgba(46,166,184,.16), transparent 60%),
    radial-gradient(360px 220px at 10% 90%, rgba(155,212,90,.12), transparent 60%),
    rgba(255,255,255,.88);
  box-shadow:
    0 20px 48px rgba(18,56,111,.18),
    0 0 0 3px rgba(46,166,184,.08);
}
.priceCard.featured::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:16px;
  border:1px dashed rgba(18,56,111,.18);
  pointer-events:none;
}

/* Suitability note */
.suitability{margin-top:14px}
.suitabilityInner{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(18,56,111,.10);
  border-radius:18px;
  padding:14px;
  color:var(--muted);
  line-height:1.6
}
.suitabilityTitle{
  font-weight:950;
  color:var(--navy);
  letter-spacing:.02em;
  margin-bottom:6px
}

/* ================= Audience (best fit) ================= */
.audienceGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.audCol{
  background:rgba(255,255,255,.75);
  border:1px solid rgba(18,56,111,.10);
  border-radius:18px;
  padding:14px
}
.audCol h3{margin:0 0 8px}

/* ================= Aftercare ================= */
.aftercareGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px
}
.aftercareCard{grid-column:span 4;background:rgba(255,255,255,.78);border:1px solid rgba(18,56,111,.10);border-radius:18px}
.aftercareCard h3{margin:0 0 8px;font-size:15px}
.aftercareCard p{margin:0 0 10px;color:var(--muted);line-height:1.6}

/* ================= FAQ ================= */
.faqList{margin-top:14px;display:grid;gap:10px}
.faqItem{
  background:rgba(255,255,255,.75);
  border:1px solid rgba(18,56,111,.10);
  border-radius:18px;
  padding:0;
  overflow:hidden
}
.faqQ{
  list-style:none;
  cursor:pointer;
  padding:14px;
  font-weight:950;
  color:var(--navy);
  letter-spacing:.02em
}
.faqQ::-webkit-details-marker{display:none}
.faqA{
  padding:0 14px 14px;
  color:var(--muted);
  line-height:1.6;
  border-top:1px solid rgba(18,56,111,.08)
}

/* ================= Contact ================= */
.contact{
  margin-top:14px;
  border-radius:26px;
  border:1px solid var(--bd);
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.62));
  box-shadow:var(--sh);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:18px
}
.contactBox{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(18,56,111,.10);
  border-radius:18px;
  padding:14px;
  display:grid;
  gap:10px;
  align-content:start
}
.big{font-size:clamp(18px,2.2vw,24px);font-weight:950;letter-spacing:.03em;color:var(--navy);text-decoration:none}
.addr{color:var(--muted)}
.logistics{margin-top:14px}

/* ================= Footer ================= */
.foot{margin:16px 0 4px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:rgba(11,27,43,.62);font-size:13px}
.footLink{text-decoration:none;color:inherit}

/* ================= Responsive ================= */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .tile{grid-column:span 12}
  .span6{grid-column:span 12}
  .panelCols{grid-template-columns:1fr}
  .priceCard{grid-column:span 12}
  .contact{grid-template-columns:1fr}
  .brand img{height:48px}

  .trustItem{grid-column:span 6}
  .journeyStep{grid-column:span 6}
  .aftercareCard{grid-column:span 12}
  .audienceGrid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .socialLink{width:38px;height:38px}
  .socialLink svg{width:18px;height:18px}
  .straplineInner{font-size:11px;letter-spacing:.10em;padding:10px 12px}
  .trustItem{grid-column:span 12}
  .journeyStep{grid-column:span 12}
}
@media (max-width:420px){
  .straplineInner{font-size:10px;letter-spacing:.08em}
}
.reviewLinks{margin-top:12px;display:flex;justify-content:flex-end}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}

.contactLink {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.addressBlock {
  display: block;
  width: 100%;
  margin-top: 0.75em;
}

.metaTitle {
  display: block;
  font-size: 0.8em;
  font-weight: 600;
  opacity: 0.75;
  margin-bottom: 0.25em;
}

.addressLink {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  padding: 0.6em 0.7em;
  border-radius: 6px;
  line-height: 1.4;
  text-decoration: none;
}

.addressLink:hover,
.addressLink:focus-visible {
  background: rgba(0,0,0,0.05);
}

.icon {
  font-size: 1.05em;
  line-height: 1;
}

.mapIcon {
  font-size: 1.1em;
}

.bundleArea{margin:12px 0 18px}
.bundleCard{
  display:grid;
  gap:10px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(18,56,111,.14);
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 46px rgba(18,56,111,.10);
}
.bundleTop{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.bundleMeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bundleKicker{font-weight:700;letter-spacing:.08em;font-size:.78rem;color:rgba(18,56,111,.85);text-transform:uppercase}
.bundleEnds{font-size:.9rem;color:rgba(17,24,39,.72)}
.bundleBody{color:rgba(17,24,39,.85)}
.pricePill{
  font-size:26px;
  font-weight:1000;
  letter-spacing:.02em;
  color:#fff;
  padding:8px 12px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--teal));
  box-shadow:0 10px 22px rgba(18,56,111,.18);
  line-height:1;
  white-space:nowrap;
}
.bundleCard h3{
  margin:0;
  letter-spacing:.02em;
  text-transform:none;
  font-size:18px;
}
.bundleCard.featured{
  position: relative;
  border: 1px solid rgba(46,166,184,.45);

  background:
    /* soft colour wash */
    linear-gradient(
      135deg,
      rgba(46,166,184,.10),
      rgba(155,212,90,.08)
    ),
    /* subtle light bloom */
    radial-gradient(
      420px 240px at 90% 0%,
      rgba(191,230,240,.55),
      transparent 60%
    ),
    rgba(255,255,255,.92);

  box-shadow:
    0 26px 60px rgba(18,56,111,.22),
    inset 0 0 0 1px rgba(255,255,255,.45);
}
.bundleCard.featured::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;

  background: linear-gradient(
    90deg,
    var(--navy),
    var(--teal),
    var(--lime)
  );

  border-radius:20px 20px 0 0;
}
.priceDownload{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;

  background:rgba(255,255,255,.85);
  border:1px solid rgba(18,56,111,.14);

  font-weight:950;
  letter-spacing:.02em;
  color:var(--navy);

  box-shadow:0 8px 22px rgba(18,56,111,.08);
}

.priceDownload:hover,
.priceDownload:focus-visible{
  background:rgba(255,255,255,.95);
  box-shadow:0 12px 30px rgba(18,56,111,.14);
}

.priceDownloadIcon{
  font-size:1.15em;
  line-height:1;
}

.priceDownloadMeta{
  margin-left:4px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(11,27,43,.55);
}
/* ================= Consultant (2-col desktop, stacked mobile) ================= */

.consultantGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr; /* 50/50 */
  gap:14px;
  align-items:stretch; /* KEY: makes image match left column total height */
}

/* Left column: stacks the two copy boxes */
.consultantText{
  display:grid;
  gap:14px;
  align-content:start;
}

/* Portrait: transparent waist-up PNG integration (full-height column) */
.consultantPortrait{
  position:relative;
  border-radius:22px;
  overflow:visible;
  min-height:100%; /* matches left column height */
  height:100%;

  background:
    radial-gradient(460px 300px at 60% 20%, rgba(46,166,184,.14), transparent 60%),
    radial-gradient(460px 300px at 40% 90%, rgba(155,212,90,.10), transparent 62%),
    rgba(255,255,255,.60);

  border:1px solid rgba(18,56,111,.10);
  backdrop-filter:blur(8px);
  box-shadow:0 12px 34px rgba(18,56,111,.10);

  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:14px 14px 0;
}

/* Halo behind the cut-out */
.portraitHalo{
  position:absolute;
  inset:12px 12px 0 12px;
  border-radius:20px;
  background:
    radial-gradient(380px 380px at 55% 30%, rgba(46,166,184,.22), transparent 65%),
    radial-gradient(380px 380px at 45% 85%, rgba(155,212,90,.16), transparent 68%);
  filter:blur(2px);
  opacity:.9;
  pointer-events:none;
}

/* Debs PNG sizing: big on desktop, controlled */
.consultantPortrait img{
  width:100%;
  max-width:640px;
  height:auto;
  display:block;
  transform:translateY(-1px);
  filter:drop-shadow(0 22px 30px rgba(18,56,111,.18));
}

/* Mobile: Debs first, then text, then bullets */
@media (max-width:980px){
  .consultantGrid{ grid-template-columns:1fr; align-items:start; }

  .consultantPortrait{ order:1; min-height:360px; height:auto; }
  .consultantText{ order:2; }

  .consultantPortrait img{
    max-width:360px;
    transform:translateY(20px);
  }
}
.mediaCard{
  display:flex;
  flex-direction:column;   /* ← THIS is the key line */
  align-items:stretch;
}


.mediaCard img{
  max-width:100%;
  width:auto;
  height:auto;
  border-radius:14px;
  display:block;
}
.baGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

@media (max-width:720px){
  .baGrid{ grid-template-columns:1fr; }
}

.mediaCard{
  background:#f8fafc;
  border-radius:22px;
  padding:12px;
  box-shadow:0 8px 28px rgba(15,23,42,.08);
  margin:0;
}

.mediaBtn{
  width:100%;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mediaCard img{
  max-width:100%;
  width:auto;
  height:auto;
  display:block;
  border-radius:14px;
}

.mediaCard--compact img{
  max-height:320px;
}

.mediaCap{
  margin-top:12px;
  padding-top:10px;
  font-size:13.5px;
  line-height:1.35;
  text-align:center;
  color:rgba(15,23,42,.72);

  border-top:1px solid rgba(15,23,42,.08);
}


/* ================= Lightbox ================= */

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}

.lightbox.isOpen{
  display:flex;
}

.lightboxInner{
  position:relative;
  width:min(980px,100%);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  backdrop-filter:blur(10px);
  padding:16px 52px;
}

.lightboxFigure{
  margin:0;
  display:grid;
  gap:12px;
  place-items:center;
}

.lightboxImg{
  max-width:100%;
  max-height:72vh;
  width:auto;
  height:auto;
  border-radius:16px;
  display:block;
}

.lightboxCap{
  font-size:14px;
  line-height:1.3;
  color:rgba(255,255,255,.88);
  text-align:center;
}

.lightboxClose{
  position:absolute;
  top:10px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.lightboxNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:26px;
  cursor:pointer;
}

.lightboxPrev{ left:10px; }
.lightboxNext{ right:10px; }

@media (max-width:520px){
  .lightboxInner{ padding:14px 14px; }
  .lightboxNav{ display:none; }
}
/* Section header – calm, not shouty */
.sectionHead{
  margin-bottom:14px;
}

.sectionTitle{
  margin:0;
}

.sectionSub{
  margin:6px 0 0;
  max-width:64ch;
  opacity:.78;
}

/* Clinical grid: 2-up desktop (50/50), 2-up tablet, 1-up mobile */
.clinicGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr); /* 50 / 50 */
  gap:18px;
}

@media (max-width:720px){
  .clinicGrid{ grid-template-columns:1fr; }
}

.clinicCard .mediaBtn{
  height:100%;
}

.clinicCard img{
  width:100%;
  height:auto;
  object-fit:cover;
}


@media (max-width:980px){
  .clinicGrid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:720px){
  .clinicGrid{ grid-template-columns:1fr; }
}

/* Ensure caption is always under image (you already hit this bug once) */
.mediaCard{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* Slightly taller allowance than before/after – clinical shots benefit */
.clinicCard img{
  max-height:420px;
}

/* Optional: tiny hover lift (subtle, not tacky) */
@media (hover:hover){
  .clinicCard{
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .clinicCard:hover{
    transform:translateY(-2px);
  }
}
.sectionWrap{
  margin:48px 0;
}

.sectionContainer{
  max-width:1180px;
  margin-inline:auto;
  padding:22px 22px 26px;

  background:rgba(255,255,255,.65);
  border:1px solid rgba(15,23,42,.08);
  border-radius:28px;
  backdrop-filter:blur(8px);
}
.sectionWrap + .sectionWrap{
  margin-top:56px;
}
/* Landscape grid: 2-up desktop, 1-up mobile */
.landGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

@media (max-width:720px){
  .landGrid{ grid-template-columns:1fr; }
}

/* No special rules: keep using the same wrapper behaviour */
.landCard img{
  max-height:320px; /* keeps the row tidy without forcing cropping */
}
.straplineBreak{
  display:inline;
}

@media (max-width:768px){
  .straplineBreak{
    display:block;
  }
}
.priceFilters{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.filterBtn{
  appearance:none;
  border:1px solid rgba(18,56,111,.14);
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(8px);
  border-radius:999px;
  padding:10px 12px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

.filterBtn:hover{ transform:translateY(-1px); }

.filterBtn.isActive{
  border-color:rgba(46,166,184,.35);
  background:rgba(46,166,184,.12);
}

.priceCard.isHidden{ display:none; }
.qPrice{opacity:.92}
.qPrice:hover{opacity:1}
}
/* ================= Quick Navigation (QuickNav2) ================= */

/* Make anchor jumps land nicely below sticky nav */
:root{scroll-padding-top:92px}
html{scroll-behavior:smooth}

.quickNav2{
  position:sticky; top:0; z-index:60;
  margin:10px 0 0;
  padding:10px;

  display:flex;
  align-items:center;
  justify-content:flex-start; /* ✅ left aligned */
  gap:10px;

  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  border:1px solid rgba(18,56,111,.10);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

/* If an old spacer element still exists in HTML, neutralise it */
.q2Spacer{display:none}

/* Buttons */
.q2Menu{position:relative}

.q2Btn{
  height:36px;
  padding:0 12px;
  border-radius:999px;

  font-weight:900;
  font-size:13px;
  letter-spacing:.02em;

  border:1px solid rgba(18,56,111,.12);
  background:rgba(255,255,255,.9);
  color:inherit;
  cursor:pointer;
}
.q2Btn:hover{transform:translateY(-1px)}
.q2Chevron{opacity:.7}

/* Treatments default tint (subtle) */
.q2Btn--treatments{
  background:rgba(46,166,184,.12);
  border-color:rgba(46,166,184,.30);
}

/* ✅ Treatments active highlight (JS toggles .isActive) */
.q2Btn--treatments.isActive{
  border-color:rgba(46,166,184,.58);
  background:
    linear-gradient(135deg, rgba(46,166,184,.22), rgba(155,212,90,.14)),
    rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(46,166,184,.16);
}

/* Dropdown panel */
.q2Panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;                 /* ✅ left aligned panel */
  right:auto;

  min-width:220px;
  padding:10px;
  border-radius:16px;

  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border:1px solid rgba(18,56,111,.12);
  box-shadow:0 18px 46px rgba(0,0,0,.14);

  display:none;
}
.q2Menu.isOpen .q2Panel{display:block}

.q2GroupTitle{
  font-size:12px;
  font-weight:900;
  opacity:.65;
  padding:6px 8px 8px;
}
.q2Item{
  width:100%;
  text-align:left;

  padding:10px 10px;
  border-radius:12px;

  border:1px solid rgba(18,56,111,.10);
  background:rgba(255,255,255,.88);
  font-weight:800;
  cursor:pointer;
}
.q2Item:hover{background:rgba(18,56,111,.06)}
.q2Divider{
  height:1px;
  margin:10px 4px;
  background:rgba(18,56,111,.12);
}

/* Mobile: make it a clean two-button bar + dropdown sheet */
@media (max-width:720px){
  .quickNav2{gap:8px; padding:8px}
  .q2Btn{min-width:110px} /* even visual weight */

  .q2Menu{position:static} /* avoids off-screen popovers */

  .q2Panel{
    position:fixed;
    left:12px;
    right:12px;
    top:68px; /* tweak if your sticky bar is taller */
    min-width:0;
    max-height:calc(100vh - 88px);
    overflow:auto;
    z-index:9999;
  }

  /* subtle backdrop when any menu is open */
  .q2Menu.isOpen::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.12);
    z-index:9998;
  }
}
.q2Btn--menu.isOpen{
  border-color:rgba(18,56,111,.22);
  background:rgba(18,56,111,.10);
}
.quickNav2{display:flex;align-items:center}
.q2Social{margin-left:auto;display:flex;gap:10px;align-items:center}
.q2Social .socialLink{width:36px;height:36px}
.q2Social .socialLink svg{width:18px;height:18px}
@media (max-width:720px){
  .q2Social .socialLink{width:34px;height:34px}
  .q2Social{gap:8px}
}
.q2SocialInMenu{display:grid;gap:8px;padding:0 4px 4px}
.q2SocialItem{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(18,56,111,.10);
  background:rgba(255,255,255,.88);
  font-weight:800;
}
.q2SocialItem:hover{background:rgba(18,56,111,.06)}