/* Landing components, built to the Grovia template's structure and motion.
   Every colour, radius, shadow and duration comes from tokens.css. */

/* --- floating pill navbar --------------------------------------------------- */
.nav-wrap {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.navbar {
  pointer-events: auto;
  margin-top: var(--s-m);
  padding: var(--s-3xs) var(--s-2xs);
  border-radius: var(--s-xl);
  background: var(--ink);
  box-shadow: var(--shadow-nav);
  display: flex;
  align-items: center;
  gap: var(--s-2xl);
  max-width: calc(100vw - 2 * var(--s-m));
  transition: margin-top var(--t), box-shadow var(--t), padding var(--t);
}

.navbar.is-stuck {
  margin-top: var(--s-3xs);
  box-shadow: 0 2px 26px #00000026;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3xs);
  min-width: 140px;
  padding-left: var(--s-2xs);
  color: var(--accent-deep);
  font-family: var(--font-heading);
  font-size: var(--h6);
  letter-spacing: -0.045em;
  transition: opacity var(--t);
}

.brand:hover { opacity: 0.8; }

/* The mark is now a complete logo, its own black disc with the yellow ring and
   M inside, so the span no longer draws a yellow circle behind it. */
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
}

.brand__mark img { display: block; width: 100%; height: 100%; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--s-4xs);
  padding-inline: var(--s-3xs);
  background: #ffffff14;
  border: 1px solid #ffffff26;
  border-radius: 2rem;
}

.navbar-link {
  display: flex;
  align-items: center;
  padding: var(--s-4xs) var(--s-xs);
  color: var(--white);
  font-size: var(--body);
  transition: opacity var(--t);
}

.navbar-link:hover { opacity: 0.8; }
.navbar-link.is-active { font-weight: 500; }

.nav-cta { margin-left: auto; }

.nav-burger {
  display: none;
  width: 44px;
  height: 36px;
  border: 1px solid #ffffff26;
  border-radius: var(--s-xl);
  background: #ffffff14;
  cursor: pointer;
}

.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  display: block;
  width: 16px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--white);
  transition: transform var(--t), opacity var(--t-fast);
}

.nav-burger span::before,
.nav-burger span::after {
  content: '';
  position: relative;
}

.nav-burger span::before { top: -5px; }
.nav-burger span::after { top: 3.5px; }
.nav-burger[aria-expanded='true'] span { transform: rotate(45deg); }
.nav-burger[aria-expanded='true'] span::before { opacity: 0; }
.nav-burger[aria-expanded='true'] span::after { transform: rotate(-90deg) translateX(3.5px); }

/* --- hero ------------------------------------------------------------------ */
.hero-section {
  position: relative;
  padding-top: var(--s-5xl);
  padding-bottom: 0;
}

.hero-wrap {
  margin-top: var(--s-5xl);
  display: flex;
  flex-direction: column;
  /* the marquee carries 24px of its own padding on top of this */
  gap: var(--s-m);
  width: 100%;
}

.hero {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: var(--s-l);
  width: 100%;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-xl);
  width: 41%;
  max-width: 400px;
}

.hero-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-m);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs);
}

.hero-ui {
  position: relative;
  align-self: flex-start;
  width: 49%;
}

/* Optional banner photo. It is a backdrop: the two cards keep their place and
   float on top of it, and the box gains padding so the photo shows around them. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--s-l);
  background: var(--bg-02);
  box-shadow: var(--shadow-card);
}

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

/* With a photo the box grows to the left and takes its own shape, since the card
   it used to be sized by is gone. min() keeps at least 420px for the headline
   column on narrower desktops. */
.hero-ui.has-photo {
  width: min(57%, 100% - 420px);
  aspect-ratio: 5 / 4;
}

/* Floated into the corner of the photo rather than sitting under it. */
.hero-ui.has-photo .hero-card-2 {
  position: absolute;
  right: var(--s-2xl);
  bottom: var(--s-2xl);
  margin: 0;
}

/* the tilted card the template floats beside its headline. Without a photo it is
   the whole of the right-hand side, so it stays in flow and sets the box height;
   with one it floats into the corner (see .hero-ui.has-photo above). */
.hero-card-2 {
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: 290px;
  max-width: 76%;
  padding: var(--s-s);
  border: 2px solid var(--ink);
  border-radius: var(--s-xs);
  background: var(--white-60);
  backdrop-filter: blur(5px);
  box-shadow: -2px 6px 20px #0000001a;
  transform: rotate(-3deg);
  transition: transform var(--t-slow);
}

.hero-card-2:hover { transform: rotate(0deg); }

.hero-open {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3xs);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--n-08);
  flex: none;
}

.dot[data-state='open'] {
  background: var(--ok);
  box-shadow: 0 0 0 3px #3f7d4e2b;
}

/* --- logo marquee ---------------------------------------------------------- */
.marquee {
  width: 100%;
  overflow: hidden;
  padding-block: var(--s-m);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--s-3xl);
  width: max-content;
  animation: marquee 36s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3xs);
  color: var(--muted);
  font-size: var(--body-s);
  white-space: nowrap;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* --- numbered steps -------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  padding: var(--s-l);
  border-radius: var(--s-s);
  background: var(--white-60);
  transition: box-shadow var(--t-slow), background-color var(--t);
  box-shadow: 5px 8px 15px #0000;
}

.step:hover {
  box-shadow: var(--shadow-card-soft);
  background: var(--white-80);
}

.step__num {
  color: var(--muted);
  font-size: var(--body-l);
  font-variant-numeric: tabular-nums;
}

.step p { color: var(--muted); }

/* --- dark pillar panel ----------------------------------------------------- */
/* Four cards, so an explicit 2x2: auto-fit lands on three across and leaves
   one stranded on its own row. */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-l);
  width: 100%;
}

.pillar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-l);
  min-height: 240px;
  padding: var(--s-xl);
  border-radius: var(--s-m);
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  box-shadow: var(--shadow-panel);
  transition: background-color var(--t), transform var(--t-slow);
}

.pillar:hover {
  background: #ffffff1a;
  transform: translateY(-4px);
}

.pillar__index {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--body-s);
}

.pillar p { color: var(--white-80); }

/* --- principles (numbered tag rows) ---------------------------------------- */
.principles {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

.principle {
  display: flex;
  align-items: flex-start;
  gap: var(--s-s);
  padding: var(--s-l);
  border-radius: var(--s-s);
  background: var(--white-40);
  transition: box-shadow var(--t), background-color var(--t);
  box-shadow: 5px 8px 15px #0000;
}

.principle:hover {
  box-shadow: var(--shadow-card-soft);
  background: var(--white-60);
}

.principle__label {
  font-family: var(--font-heading);
  font-size: var(--h6);
  letter-spacing: -0.035em;
  min-width: 130px;
}

.principle p { color: var(--muted); flex: 1; }

@media (max-width: 767px) {
  .principle { flex-direction: column; gap: var(--s-2xs); }
}

/* ---------------------------------------------------------------------------
   SERVICES WE OFFER (brief section 3).
   Structure lifted from the template's Success Stories block: a tinted rounded
   container holding a 2-up grid of cards, each card a 3:2 thumbnail with the
   wordmark centred over a dark overlay, a pill badge at bottom-right, and the
   title plus description underneath. Per-card colour comes from --accent.
   --------------------------------------------------------------------------- */
.case-study-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

/* An odd number of services would leave the last card alone in one column, so
   it takes the whole row instead and reads as deliberate. */
.case-study-list > .case-study:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.case-study-list > .case-study:last-child:nth-child(odd) .thumbnail-wrap {
  aspect-ratio: 3 / 1.1;
}

.case-study {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  height: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-s);
  background: var(--white-60);
  transition: box-shadow var(--t-slow), background-color var(--t);
  box-shadow: 5px 8px 15px #0000;
}

.case-study:hover {
  box-shadow: var(--shadow-card);
  background: var(--white-80);
}

.thumbnail-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  border-radius: var(--s-xs);
  overflow: clip;
}

.thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.case-study:hover .thumbnail { transform: scale(1.04); }

/* the generated stand-in when a service has no photo yet: a pastel field with
   a soft object shadow, in the same spirit as the template's thumbnails */
.thumbnail--generated {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 62% 38%, #ffffffb3 0%, transparent 60%),
    radial-gradient(90% 90% at 18% 94%, #0000001f 0%, transparent 55%),
    var(--accent);
  transition: transform var(--t-slow);
}

.thumbnail--generated::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 52%;
  width: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 38% 62% 55% 45% / 48% 42% 58% 52%;
  background: linear-gradient(145deg, #ffffffd9, #ffffff4d);
  box-shadow: 12px 18px 28px #00000026;
  transition: transform var(--t-slow);
}

.case-study:hover .thumbnail--generated { transform: scale(1.03); }
.case-study:hover .thumbnail--generated::after { transform: translate(-50%, -54%) rotate(-5deg); }

.badge {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  padding: var(--s-4xs) var(--s-3xs);
  border-radius: var(--s-xl);
  background: var(--overlay-02);
  color: var(--white);
  font-size: var(--body-s);
  backdrop-filter: blur(4px);
}

.case-study-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  padding: var(--s-s);
}

.case-study-text p { color: var(--muted); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4xs);
  list-style: none;
  margin: var(--s-4xs) 0 0;
  padding: 0;
}

.chips li {
  padding: var(--s-4xs) var(--s-2xs);
  border-radius: var(--s-xl);
  border: 1px solid var(--n-05);
  color: var(--muted);
  font-size: var(--body-s);
  transition: border-color var(--t), background-color var(--t);
}

.case-study:hover .chips li {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--n-05));
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

@media (max-width: 767px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .case-study-list { grid-template-columns: 1fr; }
}

/* --- testimonial slider ---------------------------------------------------- */
/* The aggregate strip under the "What clients say" heading: star average,
   review count and a line of context, on one row until the phone breaks it. */
.review-bar {
  padding: 0 0 var(--s-l);
}

.review-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2xs) var(--s-s);
}

/* The elevated pill. White on the cream page so it is spotted at a glance,
   and the same rounded shape as the floating navbar so it reads as native. */
.review-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3xs);
  padding: 0.8rem 1.5rem;
  background: var(--white);
  border-radius: 999px;
  box-shadow: var(--shadow-card-soft);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart);
}

a.review-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.review-pill .stars {
  margin: 0;
  font-size: 1rem;
}

.review-pill__score {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1;
}

.review-pill__meta {
  font-size: 0.95rem;
  color: var(--muted);
}

@media (max-width: 520px) {
  .review-pill {
    padding: 0.7rem 1.1rem;
    gap: 0.4rem;
  }
  .review-pill .stars { font-size: 0.85rem; letter-spacing: 0.1em; }
  .review-pill__score { font-size: 1.1rem; }
  .review-pill__meta { font-size: 0.85rem; }
}

/* A pasted widget brings its own look, so this only gives it the same width and
   left-aligns it: the section itself is centred, which would centre the
   widget's own text too. */
.reviews-embed {
  width: 100%;
  text-align: left;
}

.testimonials {
  position: relative;
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
  overflow: hidden;
}

/* pan-y keeps the page scrolling vertically while horizontal drags are ours */
.testimonial-viewport { overflow: hidden; touch-action: pan-y; }

.testimonial-track {
  display: flex;
  transition: transform var(--t-slow) var(--ease-out-quart);
}

.testimonial {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-l);
  padding: var(--s-xl);
  border-radius: var(--s-s);
  background: var(--white-60);
}

.quote-mark {
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--accent-deep);
}

/* Same gold as the quote mark above it, which sits on this same panel. */
.stars {
  margin: var(--s-2xs) 0;
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--star);
}

.testimonial blockquote {
  margin: 0;
  font-size: var(--body-l);
  line-height: var(--lh-l);
  color: var(--muted);
}

.testimonial-profile {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
}

.testimonial-profile .avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-heading);
}

.slider-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2xs);
  padding: var(--s-2xs) var(--s-s) var(--s-4xs);
}

.slider-dots { display: flex; gap: var(--s-4xs); }

.slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--n-06);
  cursor: pointer;
  transition: background-color var(--t), width var(--t);
}

.slider-dot.is-on {
  width: 22px;
  border-radius: var(--s-xl);
  background: var(--ink);
}

.slider-arrows { display: flex; gap: var(--s-4xs); }

.slider-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--n-05);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t);
}

.slider-arrow:hover {
  background: var(--white-60);
  border-color: var(--ink);
}

/* --- become a cleaner, and the application page ---------------------------- */
.cleaners-layout {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2xl);
  width: 100%;
}

.cleaners-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-m);
  width: 48%;
}

.cleaners-points {
  display: flex;
  flex-direction: column;
  gap: var(--s-2xs);
  width: 46%;
}

.cleaners-point {
  padding: var(--s-s) var(--s-m);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

.cleaners-point p { margin-top: var(--s-4xs); }

/* the /apply page */
/* the floating navbar sits over the top of the page, so clear it */
.apply-section { padding-top: calc(var(--s-5xl) + var(--s-2xl)); }

.apply-layout {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2xl);
  width: 100%;
}

.apply-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-m);
  width: 42%;
  position: sticky;
  top: var(--s-5xl);
  align-self: flex-start;
}

.apply-intro a { color: var(--ink); text-decoration: underline; }

.apply-card {
  width: 54%;
  padding: var(--s-l);
  border-radius: var(--s-l);
  background: var(--bg-02);
  box-shadow: var(--shadow-card-soft);
}

.apply-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-4xs);
  margin-bottom: var(--s-s);
}

.apply-field label { font-size: var(--body-s); color: var(--muted); }

.apply-field input,
.apply-field textarea {
  width: 100%;
  padding: var(--s-3xs) var(--s-s);
  border: 1px solid var(--n-05);
  border-radius: var(--s-m);
  background: var(--white-60);
  font: inherit;
  color: var(--ink);
  transition: border-color var(--t);
}

.apply-field textarea {
  border-radius: var(--s-s);
  resize: vertical;
  min-height: 7rem;
}

.apply-field input:focus,
.apply-field textarea:focus { outline: none; border-color: var(--ink); }

/* --- the payment modal ----------------------------------------------------- */
.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--s-s);
  background: #1a1a1acc;
  backdrop-filter: blur(4px);
  animation: pay-fade var(--t) var(--ease-out-quart);
}

/* Stripe's form is its own white card, so the sheet is white too and sits
   flush around it. Anything else reads as a card inside a card. */
.pay-modal__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: min(84vh, 780px);
  border-radius: var(--s-m);
  background: var(--white);
  box-shadow: 0 24px 70px #00000047;
  overflow: hidden;
  animation: pay-rise var(--t-slow) var(--ease-out-quart);
}

/* a slim bar holding only the close button, so it never covers Stripe's
   own TEST MODE ribbon */
.pay-modal__head {
  display: flex;
  justify-content: flex-end;
  padding: var(--s-3xs) var(--s-3xs) 0;
}

.pay-modal__close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #00000008;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t), color var(--t);
}

.pay-modal__close:hover { background: #0000000f; color: var(--ink); }

.pay-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--s-3xs) var(--s-3xs);
}

@keyframes pay-fade { from { opacity: 0; } }
@keyframes pay-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

@media (max-width: 560px) {
  .pay-modal { padding: 0; place-items: end stretch; }
  .pay-modal__sheet {
    width: 100%;
    max-height: 94vh;
    border-radius: var(--s-m) var(--s-m) 0 0;
  }
}

.amount-wrap { position: relative; }

.amount-wrap .amount-sign {
  position: absolute;
  left: var(--s-s);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

.amount-wrap input { padding-left: calc(var(--s-s) + 0.85em); font-size: var(--body-l); }

.apply-note { margin-top: var(--s-3xs); color: var(--muted); min-height: 1.2em; }
.apply-note.is-bad { color: var(--bad); }

.apply-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2xs);
}

@media (max-width: 991px) {
  .cleaners-layout,
  .apply-layout { flex-direction: column; }
  .cleaners-intro,
  .cleaners-points,
  .apply-intro,
  .apply-card { width: 100%; }
  .apply-intro { position: static; }
  .apply-card { padding: var(--s-m); }
}

/* --- gallery --------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

.gallery__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--s-xs);
  overflow: clip;
  cursor: zoom-in;
  background: var(--bg-03);
}

.gallery__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.gallery__item:hover img { transform: scale(1.05); }

.gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-l) var(--s-2xs) var(--s-2xs);
  background: linear-gradient(transparent, var(--overlay-03));
  color: var(--white);
  font-size: var(--body-s);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t), transform var(--t);
}

.gallery__item:hover .gallery__cap {
  opacity: 1;
  transform: none;
}

.gallery__tag {
  display: inline-block;
  margin-bottom: var(--s-4xs);
  padding: 1px 8px;
  border-radius: var(--s-xl);
  background: var(--accent);
  color: var(--ink);
  font-size: 0.72rem;
}

.empty-note {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  padding: var(--s-3xl) var(--s-s);
  border: 1px dashed var(--n-05);
  border-radius: var(--s-xs);
  color: var(--muted);
  text-align: center;
  font-size: var(--body-s);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--s-l);
  background: var(--overlay-03);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}

.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 84vh;
  border-radius: var(--s-s);
  transform: scale(0.97);
  transition: transform var(--t);
}

.lightbox.is-open img { transform: scale(1); }

.lightbox__close {
  position: absolute;
  top: var(--s-s);
  right: var(--s-s);
  width: 44px;
  height: 44px;
  border: 1px solid var(--white-20);
  border-radius: 50%;
  background: var(--white-10);
  color: var(--white);
  font-size: 20px;
  cursor: pointer;
  transition: background-color var(--t), transform var(--t);
}

.lightbox__close:hover { background: var(--white-20); transform: rotate(90deg); }

/* --- hours and slots ------------------------------------------------------- */
.hours-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

.hours-card,
.slots-card {
  padding: var(--s-l);
  border-radius: var(--s-s);
  background: var(--white-60);
}

.hours {
  list-style: none;
  margin: var(--s-s) 0 0;
  padding: 0;
}

.hours li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-s);
  padding: var(--s-2xs) var(--s-3xs);
  border-bottom: 1px solid var(--n-04);
  font-size: var(--body);
}

.hours li:last-child { border-bottom: 0; }

.hours li[data-today='true'] {
  background: var(--accent);
  border-radius: var(--s-3xs);
  border-bottom-color: transparent;
}

.hours li[data-today='true'] .hours__day::after {
  content: 'today';
  margin-left: var(--s-3xs);
  padding: 1px 7px;
  border-radius: var(--s-xl);
  background: var(--ink);
  color: var(--white);
  font-size: 0.68rem;
  vertical-align: 2px;
}

.hours__value { color: var(--muted); font-variant-numeric: tabular-nums; }
.hours li[data-closed='true'] .hours__value { color: var(--n-08); }

.slot-day {
  padding: var(--s-2xs) 0;
  border-bottom: 1px solid var(--n-04);
}

.slot-day:last-child { border-bottom: 0; }

.slot-day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3xs);
  font-size: var(--body-s);
  color: var(--muted);
}

.slot-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4xs);
  margin-top: var(--s-3xs);
}

.slot-pill {
  padding: var(--s-4xs) var(--s-2xs);
  border-radius: var(--s-xl);
  border: 1px solid var(--ink);
  font-size: var(--body-s);
  font-variant-numeric: tabular-nums;
}

.slot-pill[data-bookable='false'] {
  border-color: var(--n-05);
  color: var(--n-08);
  text-decoration: line-through;
}

@media (max-width: 991px) {
  .hours-layout { grid-template-columns: 1fr; }
}

/* --- service area pills ---------------------------------------------------- */
.cities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4xs);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cities li {
  padding: var(--s-4xs) var(--s-2xs);
  border-radius: var(--s-xl);
  border: 1px solid var(--n-05);
  background: var(--white-40);
  color: var(--muted);
  font-size: var(--body-s);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.cities li:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

/* --- closing panel --------------------------------------------------------- */
/* --- footer ---------------------------------------------------------------- */
.footer {
  width: 100%;
  padding: var(--s-2xl) 0;
  border: 20px solid var(--bg-01);
  border-bottom-width: 0;
  border-radius: var(--s-xl) var(--s-xl) 0 0;
  background: var(--bg-02);
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xl);
  width: 100%;
}

.footer-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-l);
  width: 100%;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-s);
  max-width: 320px;
}

.footer-nav-block {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-xl);
}

.footer-nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--s-4xs);
}

.footer-nav-menu a,
.footer-nav-menu span {
  padding: var(--s-4xs) 0;
  color: var(--muted);
  font-size: var(--body);
  transition: color var(--t), padding-left var(--t);
}

.footer-nav-menu a:hover {
  color: var(--ink);
  padding-left: var(--s-4xs);
}

.footer-copyrights {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2xs) var(--s-s);
  width: 100%;
  padding-top: var(--s-s);
  border-top: 1px solid var(--n-05);
  color: var(--muted);
  font-size: var(--body-s);
}

@media (max-width: 991px) {
  .footer { border-width: 8px; border-bottom-width: 0; }
  .footer-info { flex-direction: column; }
  .footer-nav-block { justify-content: flex-start; flex-wrap: wrap; }
}

/* --- responsive hero / nav ------------------------------------------------- */
@media (max-width: 991px) {
  .hero { flex-direction: column; }
  .hero-text,
  .hero-ui { width: 100%; max-width: none; }
  /* stacked, the panel is wide and short, with the card in its corner */
  .hero-ui.has-photo { width: 100%; aspect-ratio: 16 / 10; }
  .hero-ui.has-photo .hero-card-2 { right: var(--s-s); bottom: var(--s-s); }
  .hero-wrap { margin-top: var(--s-4xl); }
}

@media (max-width: 767px) {
  /* the card wraps onto more lines down here, so the panel needs to be deeper
     and the card tucked closer into the corner to stay inside it */
  /* On a phone the card stops floating over the photo. Overlaid at this width
     it sat across the faces, its translucent backing let the photo show through
     its own text, and it pushed past the right edge of the screen. Below the
     photo the picture is whole and the card is legible. */
  .hero-ui.has-photo {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }

  .hero-ui.has-photo .hero-photo {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
  }

  .hero-ui.has-photo .hero-card-2 {
    position: static;
    width: 100%;
    max-width: none;
    margin: var(--s-2xs) 0 0;
    background: var(--white);
    backdrop-filter: none;
    transform: none;
  }

  .hero-ui.has-photo .hero-card-2:hover { transform: none; }

  .navbar {
    flex-wrap: wrap;
    /* Column gap only. A row gap would also apply to the collapsed menu's
       wrapped line, padding the bar out by 8px when the menu is shut. */
    column-gap: var(--s-3xs);
    row-gap: 0;
    width: calc(100vw - 2 * var(--s-m));
  }

  .brand { min-width: 0; margin-right: auto; }
  .nav-burger { display: block; }

  .nav-menu {
    order: 4;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-height: 0;
    padding-block: 0;
    /* Collapsed it must take no height at all. A transparent 1px border still
       occupies 2px, which is half of the gap that showed under the bar. */
    border-width: 0;
    border-color: transparent;
    overflow: hidden;
    transition: max-height var(--t-slow) var(--ease-out-quart), padding var(--t),
      border-color var(--t), border-width var(--t), margin-top var(--t);
  }

  .nav-menu.is-open {
    max-height: 320px;
    /* the gap the navbar no longer supplies, added back only when it is open */
    margin-top: var(--s-3xs);
    padding-block: var(--s-3xs);
    border-width: 1px;
    border-color: #ffffff26;
  }

  .nav-cta { order: 3; }
  .nav-cta .button { height: 36px; padding-left: var(--s-2xs); font-size: var(--body-s); }
  .hero-section { padding-top: var(--s-3xl); }
}