/* ── Stacked-sheet section backgrounds ── */
:root {
  --sheet-r: 22px;
  --sheet-overlap: 22px;
  --sheet-pad: clamp(34px, 3.6vw, 58px);
  --paper: #ffffff;
  --paper-alt: #efece8;
}

html,
body {
  background: var(--paper);
}

/* Uniform 30% downscale of the whole landing (landing.css loads only here). */

.hero {
  border-radius: 0;
  position: relative;
  z-index: 0;
}

.section,
.section-tight {
  position: relative;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  margin-top: calc(var(--sheet-overlap) * -1);
  padding-top: calc(var(--sheet-pad) + var(--sheet-overlap));
  overflow: hidden;
}

.section {
  padding-bottom: clamp(72px, 7vw, 112px);
}

.section-tight {
  padding-top: calc(32px + var(--sheet-overlap));
  padding-bottom: calc(32px + var(--sheet-overlap));
}

/* Alternating sheet colours */
.section {
  background: var(--paper);
}
#location {
  background: var(--paper-alt);
}
#how {
  background: var(--paper);
}
#sizes {
  background: var(--paper-alt);
}
#faq {
  background: var(--paper);
}
#reviews {
  background: var(--paper-alt);
}
.section-tight {
  background: var(--paper);
}

.bottom-stripe {
  display: none;
}

footer {
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  margin-top: calc(var(--sheet-overlap) * -1);
  padding-top: calc(clamp(48px, 5vw, 72px) + var(--sheet-overlap));
  overflow: hidden;
}

/* ─── INTRO + WHY CHOOSE US ─── */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(40px, 4.5vw, 72px);
  align-items: start;
}

.intro-separator {
  width: 1px;
  height: 100%;
  min-height: clamp(160px, 14vw, 260px);
  background: #85878b;
}

.intro-eyebrow {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--pink);
  margin-bottom: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.intro-text p {
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--label);
  margin-bottom: 16px;
}

.intro-text p.gap {
  margin-bottom: 20px;
}

.intro-text strong {
  font-weight: 700;
}

.why-card h2 {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--label);
  margin-bottom: 22px;
  letter-spacing: -0.2px;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.why-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.why-shield {
  width: 22px;
  /* match the first (bold) text line height so the icon stays centered on it when the text wraps */
  height: calc(1.1875rem * 1.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--pink);
}

.why-shield svg,
.why-shield img {
  width: 100%;
  /* biome-ignore lint/complexity/noImportantStyles: overrides next/image inline style */
  height: auto !important;
}

.why-text {
  font-size: 1.1875rem;
  color: var(--label);
  line-height: 1.55;
}

.why-text strong {
  font-weight: 700;
}

/* ─── LOCATION ─── */
.loc-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}

.loc-text {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 12px;
  padding: clamp(24px, 2.5vw, 40px) clamp(20px, 2vw, 32px);
  border: 1px solid var(--sep2);
}

.loc-heading {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--label);
  margin-bottom: 16px;
  letter-spacing: -0.2px;
}

.loc-text p {
  font-size: 1.1875rem;
  color: var(--label);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 0;
}

.loc-address-block {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.loc-address-block .pin-ico {
  width: 18px;
  height: 18px;
  color: var(--pink);
  flex-shrink: 0;
  margin-top: 1px;
}

.loc-address-block .pin-ico img {
  width: 100%;
  /* biome-ignore lint/complexity/noImportantStyles: overrides next/image inline style */
  height: auto !important;
}

.loc-address-block .addr {
  font-size: 1rem;
  font-weight: 700;
  color: var(--label);
  line-height: 1.5;
}

.loc-map {
  border-radius: 12px;
  overflow: hidden;
  background: #f0eeeb;
  border: 1px solid var(--sep2);
  height: 100%;
  min-height: clamp(260px, 22vw, 400px);
  position: relative;
}

.loc-map-loading {
  height: 100%;
  min-height: clamp(260px, 22vw, 400px);
  background: #f0eeeb;
}

/* ─── HOW IT WORKS — 6 photo steps ─── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.2vw, 20px);
  padding-top: 22px;
}

.step-card {
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease;
}

.step-card:hover {
  transform: translateY(-4px);
}

.step-card:hover .step-photo {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.step-card:hover .step-num {
  box-shadow: 0 4px 12px var(--pink-glow);
}

/* biome-ignore lint/style/noDescendingSpecificity: base rule must follow hover override for correct cascade */
.step-num {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  z-index: 2;
  box-shadow: 0 2px 8px var(--pink-glow);
  -webkit-user-select: none;
  user-select: none;
}

/* biome-ignore lint/style/noDescendingSpecificity: base rule must follow hover override for correct cascade */
.step-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sep2);
}

.step-photo-img {
  object-fit: contain;
  object-position: center;
}

.step-optional {
  position: absolute;
  top: -12px;
  right: -6px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--pink);
  letter-spacing: 0.4px;
  font-style: italic;
  transform: rotate(-12deg);
  z-index: 3;
  white-space: nowrap;
  pointer-events: none;
}

.step-optional::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -5px;
  width: 115%;
  height: 25px;
  border: 2px solid var(--pink);
  border-bottom: none;
  border-radius: 50%;
  transform: rotate(356deg);
  pointer-events: none;
}

.step-body {
  padding: 12px 8px 8px;
}

.step-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--label);
  margin-bottom: 4px;
  letter-spacing: -0.1px;
}

.step-desc {
  font-size: 0.9375rem;
  color: var(--label2);
  line-height: 1.5;
}

/* ─── SIZES ─── */
.sizes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 36px);
}

/* size-card — proper card with hover lift */
.size-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg2);
  border: 1.5px solid var(--sep);
  border-radius: 8px;
  padding: 20px 20px 16px;
  transition:
    border-color 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}
.size-card:hover {
  border-color: var(--pink);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.size-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

.size-label {
  background: var(--pink);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 1.4px;
  padding: 6px 14px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.size-dim {
  font-size: 0.8125rem;
  color: var(--label);
  font-family: var(--font);
  font-weight: 600;
  margin-bottom: 22px;
}

/* Footer: price left, availability right */
.size-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sep);
  gap: 8px;
}

.size-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--label);
  line-height: 1;
}
.size-price-unit {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--label2);
}
.size-avail {
  display: flex;
  align-items: center;
  gap: 5px;
}
.avail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.avail-dot--yes {
  background: #22c55e;
}
.avail-dot--no {
  background: #ef4444;
}
.avail-text {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--label2);
}

/* Outer wrapper — padding reserves space for dimension annotations */
.size-photo-outer {
  width: 100%;
}

.size-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 0.15s;
}

.size-photo-img {
  object-fit: contain;
  object-position: center;
}

/* ─── FAQ ─── */
.faq-list {
  display: flex;
  flex-direction: column;
  max-width: 980px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--sep);
}

.faq-q {
  list-style: none;
  padding: 22px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--label);
  -webkit-user-select: none;
  user-select: none;
  letter-spacing: -0.1px;
  gap: 16px;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--label2);
  transition: transform 0.25s;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-a {
  padding: 0 8px 24px;
  font-size: 0.9375rem;
  color: var(--label2);
  line-height: 1.7;
}

.read-more-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* ─── REVIEWS (carousel) ─── */
.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.reviews-rating-num {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--label);
  letter-spacing: -0.6px;
  line-height: 1;
}

.reviews-stars-sum {
  display: inline-flex;
  gap: 3px;
}

.reviews-stars-sum svg {
  color: var(--pink);
}

.reviews-count {
  font-size: 0.75rem;
  color: var(--label2);
  font-weight: 600;
}

.reviews-carousel {
  position: relative;
  margin: 0 -8px;
}

.reviews-viewport {
  overflow: hidden;
}

.reviews-track {
  display: flex;
  gap: 16px;
  padding: 8px;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

.review-card {
  flex: 0 0 calc((100% - 32px) / 3);
  background: var(--bg2);
  border-radius: 8px;
  border: 1px solid var(--sep);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
}

.review-quote {
  font-size: 2.5rem;
  font-family: Georgia, serif;
  color: var(--pink);
  line-height: 0.8;
  margin-bottom: 6px;
  font-weight: 800;
}

.review-stars-row {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 12px;
}

.review-stars-row svg {
  color: var(--pink);
}

.review-text {
  font-size: 0.9375rem;
  color: var(--label);
  line-height: 1.65;
  margin-bottom: 18px;
  flex: 1;
}

.reviewer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--sep2);
}

.reviewer-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 800;
  flex-shrink: 0;
}

.reviewer-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--label);
}

.reviewer-meta {
  font-size: 0.65625rem;
  color: var(--label2);
  margin-top: 1px;
}

.review-date {
  margin-left: auto;
  font-size: 0.65625rem;
  color: var(--label3);
  font-weight: 600;
}

.reviews-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.review-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--label);
  color: var(--label);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s,
    opacity 0.15s,
    border-color 0.15s;
}

.review-arrow:hover {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}

.review-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.review-arrow:disabled:hover {
  background: transparent;
  color: var(--label);
  border-color: var(--label);
}

.review-dots {
  display: flex;
  gap: 0;
  align-items: center;
}

.review-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sep);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border: none;
  padding: 8px;
  box-sizing: content-box;
  background-clip: content-box;
  transition:
    background 0.18s,
    width 0.18s;
}

.review-dot.active {
  background: var(--pink);
  background-clip: content-box;
  width: 22px;
  border-radius: 4px;
}

/* ─── GALLERY — 6 photos in grid ─── */
.gallery-wrap {
  max-width: 1600px;
  margin: 0 auto;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 13.2vw, 205px);
  gap: 8px;
}

.gallery > .ph {
  border-radius: 4px;
}

.gallery-item {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: none;
  background: #e9e6e2;
}

.gallery-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
  border-top-left-radius: 22px;
}
.gallery-item:nth-child(2) {
  grid-column: span 2;
  border-top-right-radius: 22px;
}
.gallery-item:nth-child(5) {
  grid-column: span 2;
}
.gallery-item:nth-child(6) {
  grid-column: span 2;
}

.gallery-edge {
  max-width: none;
  margin: 0;
  padding: 0 42px;
}
.gallery-edge .gallery-wrap {
  max-width: none;
}

.gallery-item__img {
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.gallery-item--loaded .gallery-item__img {
  opacity: 1;
}

/* PLACEHOLDER */
/* biome-ignore lint/style/noDescendingSpecificity: prototype CSS preserved verbatim */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.04) 0 10px,
      transparent 10px 20px
    ),
    var(--bg3);
  border: 1px solid var(--sep2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--label3);
  text-align: center;
  padding: 14px;
  overflow: hidden;
}

.ph span {
  position: relative;
  z-index: 1;
  max-width: 80%;
  line-height: 1.5;
}

/* ─── CONTACT (WhatsApp block — now used inside footer column) ─── */
.whatsapp-block {
  text-align: center;
}

.wa-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.whatsapp-block h3 {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--pink);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.whatsapp-block .wa-sub {
  font-size: 0.875rem;
  color: var(--label);
  font-weight: 700;
  margin-bottom: 16px;
}

.whatsapp-block .wa-hint {
  font-size: 0.75rem;
  color: var(--label2);
  margin-bottom: 22px;
  line-height: 1.5;
}

.whatsapp-block .btn {
  width: 100%;
  max-width: 320px;
  height: 46px;
  font-size: 0.8125rem;
}

.whatsapp-block .small {
  font-size: 0.6875rem;
  color: var(--label3);
  margin-top: 12px;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
}

.contact-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-icon svg {
  width: 22px;
  height: 22px;
}

.contact-label {
  font-size: 0.8125rem;
  color: var(--label);
  font-weight: 700;
  margin-bottom: 2px;
}

.contact-val {
  font-size: 0.78125rem;
  color: var(--label2);
  font-weight: 500;
  text-decoration: none;
}

.contact-val:hover {
  color: var(--pink-h);
}

/* ─── BOTTOM PINK STRIPE ─── */
.bottom-stripe {
  height: 8px;
  background: var(--pink);
}

/* ─── FOOTER ─── */
footer {
  background: var(--bg-footer);
  color: rgba(255, 255, 255, 0.78);
  padding: clamp(31px, 3.5vw, 56px) 0 clamp(20px, 2.1vw, 31px);
}

/* Pin the footer's inner container to the navbar's exact side indents (24px)
   at every breakpoint so the footer stretches to the same full width as the
   navbar and their content edges line up. (.wrap otherwise widens its padding
   to 2rem on mobile, leaving the footer narrower than the nav.) */
footer .wrap {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
}

.footer-brand .logo img {
  height: 52px;
}

.footer-brand .socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.footer-brand .socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition:
    background 0.18s,
    transform 0.18s;
}

.footer-brand .socials a:hover {
  background: var(--pink);
  transform: translateY(-2px);
}

.footer-brand .socials a img {
  width: 14px;
  /* biome-ignore lint/complexity/noImportantStyles: overrides next/image inline style */
  height: auto !important;
}

.footer-col h3 {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
  padding-bottom: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
}

.footer-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--pink);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* biome-ignore lint/style/noDescendingSpecificity: base link rule follows parent hover for correct cascade */
.footer-col a {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  display: inline-flex;
  width: fit-content;
  transition:
    color 0.15s,
    transform 0.15s;
}

/* biome-ignore lint/style/noDescendingSpecificity: hover pseudo-class follows base rule for correct cascade */
.footer-col a:hover {
  color: var(--pink);
  transform: translateX(3px);
}

.ft-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ft-block + .ft-block {
  margin-top: 16px;
}

.ft-ico {
  width: 20px;
  /* match the heading (label) line height so the icon stays centered on it when the value wraps */
  height: calc(0.75rem * 1.4);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--pink);
  flex-shrink: 0;
}

.ft-ico svg,
.ft-ico img {
  width: 100%;
  /* biome-ignore lint/complexity/noImportantStyles: overrides next/image inline style */
  height: auto !important;
}

.ft-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  line-height: 1.4;
  display: block;
  margin-bottom: 2px;
}

.ft-val {
  font-size: 0.8125rem;
  color: #fff;
  font-weight: 600;
  display: block;
  text-decoration: none;
  transition: color 0.15s;
}

.ft-val:hover {
  color: var(--pink);
}

.footer-bottom {
  margin-top: clamp(32px, 3vw, 48px);
  margin-bottom: clamp(32px, 3vw, 48px);
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* WhatsApp CTA card in dark footer — centered focal block */
.footer-whatsapp {
  text-align: center;
  justify-self: center;
  width: 100%;
  max-width: 340px;
}

.footer-whatsapp .wa-icon-circle {
  width: 52px;
  height: 52px;
  background: var(--whatsapp);
  border: none;
  margin: 0 auto 14px;
}

.footer-whatsapp .wa-icon-circle svg,
.footer-whatsapp .wa-icon-circle img {
  width: 26px;
  /* biome-ignore lint/complexity/noImportantStyles: overrides next/image inline style */
  height: auto !important;
}

.footer-whatsapp h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  padding-bottom: 0;
  letter-spacing: -0.1px;
  text-transform: none;
}

.footer-whatsapp h3::after {
  display: none;
}

.footer-whatsapp .wa-sub {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.footer-whatsapp .wa-hint {
  font-size: 0.71875rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
  line-height: 1.55;
}

.footer-whatsapp .btn-whatsapp {
  width: 100%;
  max-width: 260px;
  height: 44px;
  font-size: 0.75rem;
}

.footer-whatsapp .small {
  font-size: 0.65625rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 12px;
}

/* ─── BOOKING DRAWER ─── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 201;
  width: min(520px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--sep);
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
}

.drawer.open {
  transform: translateX(0);
}

.drawer-header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--sep);
  flex-shrink: 0;
}

.drawer-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--label);
}

.drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--fill);
  border: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  color: var(--label);
}

.drawer-body {
  flex: 1;
  overflow: hidden;
}

.drawer-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.loc-select {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 800;
  color: var(--label);
  letter-spacing: -0.03em;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ed2872' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  border: none;
  cursor: pointer;
  padding: 0 20px 0 0;
  outline: none;
  font-family: inherit;
  white-space: nowrap;
}

.loc-select:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
  border-radius: 2px;
}

.loc-divider-heading {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* ─── RESPONSIVE (section-specific rules) ─── */
@media (max-width: 960px) {
  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .review-card {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}

@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait),
  (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .intro-separator {
    display: none;
  }

  .loc-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .loc-text {
    border-radius: 0;
    border: none;
    padding: 0;
    background: transparent;
  }

  .loc-map {
    height: clamp(240px, 55vw, 340px);
    border-radius: 8px;
  }

  .sizes-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
    grid-template-areas:
      "brand brand"
      "links contact"
      "wa wa";
  }

  .footer-brand {
    grid-area: brand;
  }

  .footer-grid > .footer-col:not(.footer-whatsapp):not(#footer-contact) {
    grid-area: links;
  }

  #footer-contact {
    grid-area: contact;
  }

  .footer-whatsapp {
    grid-area: wa;
    max-width: 420px;
  }

  .review-card {
    flex: 0 0 100%;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
    gap: 6px;
  }
}

/* font-size and spacing fixes — phones only, never triggered by portrait orientation */
@media (max-width: 760px) {
  .hero-cta-btn {
    margin-bottom: 1.25rem;
  }

  .intro-eyebrow {
    font-size: 1.25rem;
    margin-bottom: 12px;
  }

  .intro-text p {
    font-size: 1rem;
  }

  .why-card h2 {
    font-size: 1.25rem;
    margin-bottom: 14px;
  }

  .why-text {
    font-size: 1rem;
  }

  .why-shield {
    /* keep icon box aligned with the smaller first-line height on this breakpoint */
    height: calc(1rem * 1.55);
  }

  .why-list {
    gap: 14px;
  }

  .loc-heading {
    font-size: 1.125rem;
    margin-bottom: 12px;
  }

  .loc-text p {
    font-size: 1rem;
  }

  .size-card {
    padding: 22px 18px 18px;
  }

  .size-price {
    font-size: 1.375rem;
  }

  .step-title {
    font-size: 1rem;
  }

  .step-desc {
    font-size: 0.875rem;
  }

  .step-body {
    padding: 14px 8px 10px;
  }

  .faq-q {
    font-size: 1rem;
  }

  .reviews-rating-num {
    font-size: 1.75rem;
  }

  .review-quote {
    font-size: 1.75rem;
  }
}

@media (max-width: 540px) {
  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "wa"
      "links"
      "contact";
    gap: 30px;
  }

  .footer-whatsapp {
    max-width: none;
  }

  .footer-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .footer-brand .socials {
    flex-direction: row;
    margin-top: 0;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
    gap: 6px;
  }

  .pink-divider .line {
    display: none;
  }

  .pink-divider {
    justify-content: center;
  }
}

/* GALLERY LIGHTBOX */
.gallery-lb-overlay {
  position: fixed;
  inset: 0;
  /* above the opening-soon banner so the close button stays clickable */
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lb-fade-in 0.2s ease;
}

@keyframes lb-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.gallery-lb-inner {
  position: relative;
  width: min(90vw, 1200px);
  height: min(80vh, 900px);
}

.gallery-lb-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-lb-img {
  object-fit: contain;
}

.gallery-lb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.375rem;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.gallery-lb-close:hover {
  background: rgba(0, 0, 0, 0.75);
}

@media (max-width: 760px) {
  .gallery-lb-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: auto;
    gap: 20px;
    padding-bottom: 24px;
  }

  .gallery-lb-img-wrap {
    position: relative;
    width: 100%;
    height: 65vh;
    flex-shrink: 0;
  }

  .gallery-lb-close {
    position: static;
    width: 48px;
    height: 48px;
    font-size: 26px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
  }

  .gallery-lb-close:hover {
    background: rgba(255, 255, 255, 0.35);
  }
}

/* Reserve space so the fixed card doesn't cover the last section */
main {
  padding-bottom: 5rem;
}

/* ── Opening Soon Banner (floating card) ─────────────────────────────── */
@keyframes banner-outline-pulse {
  0%,
  100% {
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.1),
      0 1px 4px rgba(0, 0, 0, 0.06),
      0 0 0 2px var(--pink);
  }
  50% {
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.1),
      0 1px 4px rgba(0, 0, 0, 0.06),
      0 0 0 2px transparent;
  }
}

.opening-soon {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* above the map (500) but below the gallery lightbox (1000) so the lightbox close button stays clickable */
  z-index: 600;
  padding: 0.7rem 2rem;
  background: rgba(255, 255, 255, 0.92);
  /* biome-ignore lint/suspicious/noDuplicateProperties: rgba() fallback for color-mix() */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-top: 3px solid var(--pink);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.1);
  animation: banner-outline-pulse 1.4s ease-in-out infinite;
}

.opening-soon__wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.opening-soon__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  /* Pink warning triangle (white glyph), drawn as SVG for cross-device consistency */
  color: var(--pink);
  line-height: 1;
  flex-shrink: 0;
}

.opening-soon__badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

.opening-soon__headline {
  font-size: clamp(1.5rem, 2.1vw, 2.1rem);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
}

.opening-soon__body {
  font-size: clamp(1rem, 1.5vw, 1.375rem);
  opacity: 0.6;
  margin: 0;
}

@media (max-width: 540px) {
  .opening-soon {
    padding: 1.25rem 1.25rem;
  }
  .opening-soon__body {
    display: none;
  }
  .opening-soon__headline {
    font-size: 1.25rem;
  }
}
/* ── /Opening Soon Banner ─────────────────────────────────────────────── */

/* ── Device Offline Banner ────────────────────────────────────────────── */
.device-offline-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 28px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}

.device-offline-banner__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #d97706;
}

.device-offline-banner__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.device-offline-banner__text strong {
  font-weight: 700;
  font-size: 0.8125rem;
}

.device-offline-banner__text span {
  opacity: 0.85;
}

.device-offline-banner__sync {
  font-size: 0.6875rem;
  font-weight: 600;
  opacity: 0.6;
  margin-top: 2px;
}
/* ── /Device Offline Banner ───────────────────────────────────────────── */

/* ── Location nav buttons ─────────────────────────────────────────────── */
.loc-nav-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.loc-nav-btns .btn-outline-pink {
  margin-top: 0;
}

.btn-waze {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  border: 1.5px solid #33ccbc;
  background: rgba(51, 204, 188, 0.7);
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  text-decoration: none;
  transition:
    background 0.15s,
    filter 0.15s;
  flex-shrink: 0;
}

.btn-waze img {
  filter: brightness(0) invert(1);
  width: 22px;
  /* biome-ignore lint/complexity/noImportantStyles: overrides next/image inline style */
  height: auto !important;
}

.btn-waze:hover {
  background: #33ccbc;
}
/* ── /Location nav buttons ────────────────────────────────────────────── */

/* ── Wide-monitor gallery + FAQ adaptation ── */
@media (min-width: 1280px) {
  .gallery-wrap {
    max-width: var(--maxw);
  }
  .faq-list {
    max-width: clamp(980px, 70vw, 1480px);
  }
  .gallery {
    grid-auto-rows: clamp(150px, 12.5vw, 300px);
    gap: clamp(8px, 0.6vw, 12px);
  }
  .gallery-edge {
    padding: 0 clamp(42px, 3vw, 72px);
  }
}

/* Tablet (541–1023px): moderate scale-up of footer content, sitting between
   the compact mobile sizing and the large desktop sizing for a consistent
   visual rhythm across breakpoints. Layout (grid areas) is handled by the
   existing structural media queries above. */
@media (min-width: 541px) and (max-width: 1023px) {
  .footer-brand .logo img {
    height: 57px;
  }

  .footer-brand .socials a {
    width: 46px;
    height: 46px;
  }

  .footer-brand .socials a img {
    width: 17px;
  }

  .footer-col h3 {
    font-size: 0.875rem;
  }

  /* biome-ignore lint/style/noDescendingSpecificity: tablet size override of the base link rule */
  .footer-col a {
    font-size: 0.875rem;
  }

  .ft-ico {
    width: 22px;
    height: calc(0.8rem * 1.4);
  }

  .ft-label {
    font-size: 0.8rem;
  }

  .ft-val {
    font-size: 0.875rem;
  }

  .footer-whatsapp .wa-icon-circle {
    width: 56px;
    height: 56px;
  }

  .footer-whatsapp .wa-icon-circle img {
    width: 28px;
  }

  .footer-whatsapp h3 {
    font-size: 1.15rem;
  }

  .footer-whatsapp .wa-sub {
    font-size: 0.875rem;
  }

  .footer-whatsapp .wa-hint {
    font-size: 0.78rem;
  }

  .footer-whatsapp .btn-whatsapp {
    height: 46px;
    font-size: 0.8125rem;
  }

  .footer-whatsapp .small {
    font-size: 0.72rem;
  }

  .footer-bottom {
    font-size: 0.78rem;
  }
}

/* Mobile (≤540px): gentle bump of body text and social icons for legibility
   on small screens, without changing the stacked single-column layout. */
@media (max-width: 540px) {
  .footer-brand .logo img {
    height: 50px;
  }

  .footer-brand .socials a {
    width: 44px;
    height: 44px;
  }

  .footer-brand .socials a img {
    width: 16px;
  }

  .footer-col h3 {
    font-size: 0.875rem;
  }

  /* biome-ignore lint/style/noDescendingSpecificity: mobile size override of the base link rule */
  .footer-col a {
    font-size: 0.875rem;
  }

  .ft-label {
    font-size: 0.78rem;
  }

  .ft-val {
    font-size: 0.875rem;
  }
}

/* Desktop: give the footer a tall, full-section presence (80vh) with its
   content vertically centred so the added height reads as intentional, then
   scale up the content (text, social icons, logo) to fill the larger space
   and spread the columns more evenly. */
@media (min-width: 1024px) {
  footer {
    min-height: 56vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Brand / links / contact size to content; the WhatsApp column takes the
     remaining width so its max-width:340px card reads as a centred focal block
     (matches the live layout). Roomier gaps for desktop. */
  .footer-grid {
    grid-template-columns: auto auto 1fr auto;
    gap: clamp(48px, 5vw, 96px);
  }

  /* Logo +20% (52px → ~62px). */
  .footer-brand .logo img {
    height: 62px;
  }

  .footer-brand .socials {
    gap: 14px;
    margin-top: 28px;
  }

  .footer-brand .socials a {
    width: 52px;
    height: 52px;
  }

  .footer-brand .socials a img {
    width: 20px;
  }

  .footer-col h3 {
    font-size: 0.95rem;
    margin-bottom: 22px;
  }

  .footer-col h3::after {
    width: 34px;
  }

  .footer-col ul {
    gap: 14px;
  }

  /* biome-ignore lint/style/noDescendingSpecificity: desktop size override of the base link rule */
  .footer-col a {
    font-size: 0.95rem;
  }

  .ft-block + .ft-block {
    margin-top: 20px;
  }

  .ft-ico {
    width: 24px;
    height: calc(0.875rem * 1.4);
  }

  .ft-label {
    font-size: 0.85rem;
  }

  .ft-val {
    font-size: 0.95rem;
  }

  .footer-whatsapp {
    max-width: 380px;
  }

  .footer-whatsapp .wa-icon-circle {
    width: 60px;
    height: 60px;
  }

  .footer-whatsapp .wa-icon-circle img {
    width: 30px;
  }

  .footer-whatsapp h3 {
    font-size: 1.3rem;
  }

  .footer-whatsapp .wa-sub {
    font-size: 0.95rem;
  }

  .footer-whatsapp .wa-hint {
    font-size: 0.85rem;
  }

  .footer-whatsapp .btn-whatsapp {
    max-width: 280px;
    height: 50px;
    font-size: 0.875rem;
  }

  .footer-whatsapp .small {
    font-size: 0.78rem;
  }

  .footer-bottom {
    font-size: 0.85rem;
  }
}

@media (min-width: 2200px) {
  .gallery-item:nth-child(1) {
    border-top-left-radius: 28px;
  }
  .gallery-item:nth-child(2) {
    border-top-right-radius: 28px;
  }
  .loc-map {
    border-radius: 18px;
  }
}