/*
 * AOD for Exhibitors. Same look as aod.co.in: three colours (AOD orange #ff6201, white, black) and
 * mixes of them, Bricolage Grotesque for headings and Montserrat for everything else. Text is flat
 * (no shadows or glows). Phones first; the page is mostly shown on a phone at an expo stall.
 */
:root {
  --brand: #ff6201;
  --brand-hover: #e05500;
  --ink: #000;
  --body: #1a1a1a;
  --muted: #5c5c5c;
  --line: #e6e6e6;
  --wash: #fff4ed; /* 7% orange in white */
  --peach: #ffe7d9; /* 15% orange in white */
  --night: #000;
  --night-soft: #141414;
  --night-line: #2e2e2e;
  --whatsapp: #25d366;
  --whatsapp-hover: #1ebe5a;
  --error: #d92d20;
  --success: #12804a;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --wrap: 75rem;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-sans: "Montserrat", system-ui, sans-serif;
  --topbar: 4rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar) + 0.75rem);
  -webkit-text-size-adjust: 100%;
}

/* Laptops: everything is sized in rem, so this one value draws the whole page at 87.5%, a
   little "zoomed out"; the page width grows in rem to keep about the same width on screen. */
@media (min-width: 1024px) {
  html {
    font-size: 87.5%;
  }
  :root {
    --wrap: 84rem;
  }
}

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (hover: none) {
  html {
    -webkit-tap-highlight-color: transparent;
  }
}

img,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  font-weight: 700;
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[hidden] {
  display: none !important;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .wrap {
    padding-inline: 1.5rem;
  }
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: #fff;
}

.skip:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ───────────── Buttons ───────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 0.75rem;
  font: 600 0.95rem/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.btn:active {
  transform: scale(0.97);
}

.btn--sm {
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.875rem;
}

.btn--lg {
  height: 3.25rem;
  padding: 0 1.6rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
}

.btn--primary:hover {
  background: var(--brand-hover);
}

.btn--white {
  background: #fff;
  color: var(--ink);
}

.btn--white:hover {
  background: var(--wash);
}

.btn--ghost {
  border: 1.5px solid rgb(255 255 255 / 0.6);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}

.btn--ghost:hover {
  background: rgb(255 255 255 / 0.16);
}

.btn--outline {
  border: 2px solid var(--brand);
  background: #fff;
  color: var(--brand);
}

.btn--outline:hover {
  background: var(--wash);
}

.btn--wa {
  background: var(--whatsapp);
  color: #fff;
}

.btn--wa:hover {
  background: var(--whatsapp-hover);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ───────────── Top bar ───────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.topbar__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.brand img {
  height: 1.5rem;
  width: auto;
}

.brand__tag {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--peach);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.topbar__nav {
  display: none;
  gap: 1.5rem;
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 500;
}

.topbar__nav a {
  text-decoration: none;
}

.topbar__nav a:hover {
  color: var(--brand);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.topbar__actions .btn {
  display: none;
}

@media (min-width: 640px) {
  .topbar__actions .btn {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  .topbar__nav {
    display: flex;
  }
  .topbar__actions {
    margin-left: 1rem;
  }
}

/* ───────────── Hero ───────────── */
/* Black with a fine orange dot grid. Phones: the text, the video box, then the offer card, one
   under the other. Laptops: three columns of the same height (text, video, card). */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 0;
  background-color: var(--night);
  background-image: radial-gradient(rgb(255 98 1 / 0.22) 1px, transparent 1.4px);
  background-size: 22px 22px;
  color: #fff;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: 1.75rem;
}

/* The video's place: an empty box marked "VIDEO HERE" until the reel arrives, shaped like a
   reel (9:16). Phones: centred, at most 20rem wide. Laptops: the middle column, as tall as the others. */
.hero__reel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 2px dashed rgb(255 255 255 / 0.35);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.05);
}

/* With the reel: the frame (the player) fills the box; a tap anywhere on it pauses or plays (a play
   icon shows while paused), and a round button turns the sound on and off. */
.hero__reel.has-video {
  position: relative;
  border: 0;
  background: #000;
}

.reel-frame {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  overflow: hidden;
  border-radius: inherit;
  background: #000;
}

.reel-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.reel-toggle svg {
  width: 4rem;
  height: 4rem;
  padding: 1.1rem 1rem 1.1rem 1.2rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  fill: currentColor;
  stroke: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s, transform 0.2s;
}

.reel-frame.is-paused .reel-toggle svg,
.reel-toggle:focus-visible svg {
  opacity: 1;
  transform: none;
}

.reel-sound,
.reel-close {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  cursor: pointer;
}

.reel-sound {
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
}

.reel-close {
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
}

.reel-close svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 2.5;
}

.reel-sound:hover,
.reel-close:hover {
  background: rgb(0 0 0 / 0.85);
}

/* The small player (laptops and desktops, after scrolling past the hero): bottom-left corner. */
.reel-frame.is-mini {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 45;
  width: 10rem;
  aspect-ratio: 9 / 16;
  border-radius: 1rem;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.35);
  animation: reel-pop 0.25s ease-out;
}

.reel-frame.is-mini .reel-sound {
  right: 0.5rem;
  bottom: 0.5rem;
  width: 2.2rem;
  height: 2.2rem;
}

.reel-frame.is-mini .reel-sound svg {
  width: 1.05rem;
  height: 1.05rem;
}

.reel-frame.is-mini .reel-toggle svg {
  width: 3rem;
  height: 3rem;
  padding: 0.8rem 0.7rem 0.8rem 0.9rem;
}

@keyframes reel-pop {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.96);
  }
}

.hero__reel-empty {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
}

.hero__reel-empty svg {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  color: var(--brand);
}

.hero__reel-empty strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero__reel-empty small {
  color: rgb(255 255 255 / 0.6);
  font-size: 0.85rem;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  margin-bottom: 1.1rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.35);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  backdrop-filter: blur(6px);
}

.live-chip__dot {
  width: 0.55rem;
  height: 0.55rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgb(255 98 1 / 0.6);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 0.55rem rgb(255 98 1 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(255 98 1 / 0);
  }
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.3rem, 4.6vw + 0.6rem, 3.9rem);
  font-weight: 800;
  line-height: 1.02;
}

.hero h1 .accent {
  color: var(--brand);
}

.hero__lead {
  max-width: 38rem;
  margin-top: 0.85rem;
  color: rgb(255 255 255 / 0.88);
  font-size: 1rem;
}

/* Phones go straight from the pitch to the offer card, which has its own Book button (and the
   bottom bar has Book and WhatsApp), so these buttons and points only show from tablets up. */
.hero__ctas {
  display: none;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.hero__points {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.9);
}

.hero__points li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hero__points svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--brand);
}

.hero__congrats {
  margin-bottom: 0.5rem;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
}

/* The offer card: price, what's included, the sample reels and the book button. */
.offer {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--body);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}

.offer__label {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--peach);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.offer__price {
  margin-top: 0.85rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.offer__was {
  margin-right: 0.5rem;
  color: var(--muted);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--brand);
}

.offer__price small {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
}

.offer__title {
  margin-top: 0.4rem;
  font-size: 1.15rem;
}

.offer__list {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.95rem;
}

.offer__list li {
  display: flex;
  gap: 0.55rem;
}

.offer__list svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  color: var(--brand);
  stroke-width: 2.5;
}

.offer__samples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 1.1rem;
}

.offer__samples:empty {
  display: none;
}

.offer__sample {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 0.75rem;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.offer__sample:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.offer__sample svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--brand);
}

@media (min-width: 640px) {
  .hero {
    padding-top: 3rem;
  }
  .hero__ctas,
  .hero__points {
    display: flex;
  }
  .hero__lead {
    font-size: 1.05rem;
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: calc(100svh - var(--topbar));
    justify-content: center;
    padding: 3rem 0;
  }
  /* Text on the left, the video in the middle, the offer card on the right, all one height: the
     row takes the tallest column's height and the other two stretch to it. */
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: stretch;
  }
  .hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero h1 {
    font-size: clamp(2.2rem, 2.4vw + 0.7rem, 3.2rem);
  }
  .hero__reel {
    max-width: none;
    height: 100%;
  }
  .offer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/* ───────────── Brands ───────────── */
.brands {
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid var(--line);
}

.brands__title {
  margin-bottom: 0.9rem;
  padding-inline: 1rem;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  width: max-content;
  animation: marquee 60s linear infinite;
}

.marquee__track img {
  width: auto;
  object-fit: contain;
}

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

/* ───────────── Sections ───────────── */
.section {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  .section {
    padding: 4.5rem 0;
  }
}

.section--wash {
  background: var(--wash);
}

.section__head {
  max-width: 46rem;
  margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
  .section__head {
    margin-bottom: 2.5rem;
  }
}

.section__lead {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.eyebrow {
  margin-bottom: 0.75rem;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Scroll-in: short and small, so content never trails behind a fast scroll. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Portfolio */
.portfolio {
  display: grid;
  gap: 1.5rem;
}

.portfolio__feature {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
}

.portfolio__video {
  aspect-ratio: 16 / 9;
  background: var(--night);
}

.portfolio__video {
  overflow: hidden;
}

/* The footage carries a "Ganesh Housing" logo top left, a "Million Minds" logo top right (both in
   the top 11% of the frame) and, in one shot, a caption bar from 86% down. Zoomed 1.38× around a
   point a little above the middle, about 12% comes off the top and 16% off the bottom, so none of
   them shows. */
.portfolio__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.38);
  transform-origin: 50% 42%;
}

.portfolio__feature figcaption {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.portfolio__feature figcaption img {
  height: 2.5rem;
  width: auto;
}

.portfolio__feature figcaption strong {
  display: block;
  color: var(--ink);
}

.portfolio__side {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
}

.ticks {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  display: flex;
  gap: 0.6rem;
}

.ticks svg {
  margin-top: 0.15rem;
  color: var(--brand);
}

.portfolio__trust {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.portfolio__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.portfolio__more {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.portfolio__more figure {
  margin: 0;
}

.portfolio__more img,
.portfolio__more video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--peach);
}

.portfolio__more figcaption {
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

.portfolio__more figcaption span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

@media (min-width: 1024px) {
  .portfolio {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }
  .portfolio__more {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ───────────── Booking form ───────────── */
.book__grid {
  display: grid;
  gap: 1.25rem;
}

.book__promises {
  display: none;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}

.book__promises li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.book__promises svg {
  color: var(--brand);
}

.contact-card {
  display: none;
  margin-top: 2rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.contact-card__title {
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.contact-card a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  text-decoration: none;
  font-weight: 500;
}

.contact-card a:hover {
  color: var(--brand);
}


.form-card {
  margin-inline: -1rem;
  padding: 1.5rem 1rem;
  border-block: 1px solid var(--line);
  background: #fff;
}

@media (min-width: 640px) {
  .form-card {
    margin-inline: 0;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.07);
  }
}

@media (min-width: 1024px) {
  .book__grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
    align-items: start;
  }
  .book__intro {
    position: sticky;
    top: calc(var(--topbar) + 2rem);
  }
  .contact-card {
    display: block;
  }
  .book__promises {
    display: grid;
  }
}

.group {
  margin: 0 0 1.75rem;
  padding: 0 0 1.75rem;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.group legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.group__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--peach);
  color: var(--brand-hover);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
}

.row {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 640px) {
  .row {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  margin-bottom: 1rem;
}

.field:last-child {
  margin-bottom: 0;
}

.field label,
.field .label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.hint {
  margin: -0.2rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.req {
  color: var(--brand);
}

.opt {
  margin-left: 0.25rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 0.85rem;
  background: #fff;
  color: var(--ink);
  font: 500 1rem/1.4 var(--font-sans); /* 16px, so phones don't zoom in */
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #9a9a9a;
  font-weight: 400;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgb(255 98 1 / 0.15);
}

.is-invalid,
.is-invalid:focus {
  border-color: var(--error) !important;
}

.select {
  position: relative;
}

.select select {
  padding-right: 2.75rem;
  cursor: pointer;
}

.select svg {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.phone {
  display: flex;
  align-items: stretch;
}

.phone__code {
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  border: 1.5px solid var(--line);
  border-right: 0;
  border-radius: 0.85rem 0 0 0.85rem;
  background: var(--wash);
  color: var(--ink);
  font-weight: 600;
}

.phone input {
  border-radius: 0 0.85rem 0.85rem 0;
}

.field__error {
  margin-top: 0.35rem;
  color: var(--error);
  font-size: 0.85rem;
  font-weight: 500;
}

.field__error:empty {
  display: none;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 3.25rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 0.85rem;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.chip span small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.chip input:checked + span {
  border-color: var(--brand);
  background: var(--peach);
  box-shadow: 0 0 0 1px var(--brand);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.expo-card {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--wash);
  font-size: 0.9rem;
}

.expo-card strong {
  color: var(--ink);
}

.expo-card p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--body);
}

.expo-card svg {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  color: var(--brand);
}

.expo-card a {
  color: var(--brand-hover);
  font-weight: 600;
}

/* Payment */
.pay {
  margin-bottom: 1rem;
  padding: 1.1rem;
  border-radius: var(--radius);
  background: var(--wash);
}

.pay__note {
  color: var(--body);
  font-size: 0.9rem;
}

/* The amount for the days picked, big, above the QR. */
.pay__amount {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
}

.pay__amount span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pay__amount strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.1;
}

.pay__amount small {
  color: var(--muted);
  font-size: 0.85rem;
}

.pay__qr a,
.pay__id {
  display: block;
  border-radius: var(--radius);
  text-decoration: none;
}

.pay__hint {
  max-width: 22rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.pay__or {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.pay__apps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.pay__appbtn {
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.pay__note--after {
  margin-top: 0.9rem;
  text-align: center;
}

.pay__box {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
  text-align: center;
}

.pay__qr {
  width: 100%;
  max-width: 16rem;
  margin: 0;
}

.pay__qr img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.pay__qr figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.pay__qr strong {
  color: var(--ink);
}

.pay__upi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.pay__upi code {
  padding: 0.5rem 0.8rem;
  border: 1.5px dashed var(--brand);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--ink);
  font: 600 1rem var(--font-sans);
}

.pay__copy {
  height: 2.5rem;
  padding: 0 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 0.6rem;
  background: #fff;
  font: 600 0.85rem var(--font-sans);
  cursor: pointer;
}

.pay__app {
  justify-self: stretch;
}

.upload {
  display: block;
  position: relative;
  border: 2px dashed #d0d0d0;
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.upload:hover,
.upload:focus-within {
  border-color: var(--brand);
  background: var(--wash);
}

.upload input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.6rem 1rem;
  text-align: center;
}

.upload__empty svg {
  width: 2rem;
  height: 2rem;
  color: var(--brand);
}

.upload__empty small,
.upload__filled small {
  color: var(--muted);
  font-size: 0.85rem;
}

.upload__filled {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
}

.upload__filled img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.6rem;
  object-fit: cover;
  background: var(--peach);
}

.upload__filled strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.upload.is-invalid {
  border-color: var(--error);
}

.trap {
  display: none;
}

.consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.consent input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.1rem 0 0;
  flex-shrink: 0;
  accent-color: var(--brand);
}

.consent a {
  color: var(--brand-hover);
  font-weight: 600;
}

.form-error {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: #fdecea;
  color: var(--error);
  font-size: 0.9rem;
  font-weight: 500;
}

#booking-form .btn--block {
  margin-top: 1.25rem;
}

.form-note {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.met-by {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

/* After sending */
.done {
  padding: 1rem 0.25rem;
  text-align: center;
  outline: none;
}

.done__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--peach);
  color: var(--brand);
}

.done__icon svg {
  width: 2rem;
  height: 2rem;
  stroke-width: 2.5;
}

.done h3 {
  font-size: 1.6rem;
}

.done p {
  margin-top: 0.75rem;
  color: var(--muted);
}

.done__ref {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 0.6rem;
  background: var(--wash);
  color: var(--ink) !important;
  font-weight: 700;
}

.done__actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Final call to action */
.final {
  padding: 3.5rem 0;
  background: var(--brand);
  color: #fff;
  text-align: center;
}

.final h2 {
  max-width: 40rem;
  margin-inline: auto;
  color: #fff;
}

.final p {
  margin-top: 1rem;
  color: rgb(255 255 255 / 0.9);
  font-size: 1.05rem;
}

.final__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Footer */
.footer {
  padding: 2.5rem 0 7rem;
  background: var(--night);
  color: rgb(255 255 255 / 0.75);
  font-size: 0.9rem;
}

.footer__row {
  display: grid;
  gap: 1.5rem;
}

.footer__row img {
  height: 1.5rem;
  width: auto;
  margin-bottom: 0.75rem;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__links a {
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--brand);
}

.footer__copy {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--night-line);
  color: rgb(255 255 255 / 0.5);
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .footer {
    padding-bottom: 2.5rem;
  }
  .footer__row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* Phones: book button at the bottom until the form is on screen. */
.mobile-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #fff;
  transition: transform 0.25s;
}

.mobile-cta .btn {
  flex: 1;
}

.mobile-cta.is-hidden {
  transform: translateY(110%);
}

@media (min-width: 768px) {
  .mobile-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .marquee__track,
  .live-chip__dot {
    animation: none;
  }
  .marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
    width: auto;
    padding-inline: 1rem;
  }
  .marquee__track .dup {
    display: none;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}