/* ==========================================================================
   Wedding Bharat — Homepage (premium redesign, 2026-10-10)
   Loaded by index.html only, after style.css / responsive.css /
   animations.css. Shared components (header, vendor cards, footer) live in
   style.css so every page matches; this file lays out the homepage sections:
   photo hero + floating search, category strip, why-us band, inspiration,
   planning tools, cities and the closing CTA band.
   Colours come from the theme tokens in style.css, so dark mode follows.
   ========================================================================== */

/* ---------- Shared section heading row ---------- */
.home-head {
  margin-bottom: 26px;
}

.home-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
}

/* One heading style for every homepage section (2026-10-10 consistency pass):
   left-aligned display serif, same size, sub-line below. No pill labels. */
.home-head h2,
.home-title,
#ai .section-head h2,
#faq .section-head h2,
.why-intro h2,
.plan-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}

.home-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 8px 0 0;
  max-width: 560px;
}

.home-head__links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--magenta);
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, gap 0.2s ease;
}

.home-link:hover { border-bottom-color: currentColor; gap: 9px; }
.home-link--quiet { color: var(--ink-soft); font-weight: 500; }

.home-link:focus-visible,
.inspo-card:focus-visible,
.plan-tool:focus-visible,
.plan-visual:focus-visible,
.city-card:focus-visible {
  outline: 2.5px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 14px;
}

/* ---------- Hero: full-bleed photograph ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Sized to its content (2026-10-10): a fixed min-height centred the text
     and left large empty bands above the label and below the buttons. */
  padding: 32px 0 120px;
  background: var(--plum-deep);
  overflow: hidden;
}

.hero-photo,
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.hero-photo img {
  object-fit: cover;
  object-position: 50% 30%;
}

/* Header on the photo (owner, 2026-10-18, after the InfluencersAd reference):
   on the homepage the hero runs up behind the sticky header, which is
   see-through with white links until the page scrolls (app.js adds .scrolled
   past 10px); then it gets its usual light glass background back. The logo
   keeps its colours (owner) and, as the brand's main mark, sits on a cream
   "brand tab" hanging from the top edge while the header is over the photo.
   Each breakpoint's top padding adds the header height, so the hero text
   stays exactly where it was. */
.hero { margin-top: calc(-1 * (var(--nav-h) + 1px)); padding-top: calc(32px + var(--nav-h) + 1px); }
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--nav-h) + 90px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(36, 8, 27, 0.6) 0%, rgba(36, 8, 27, 0) 100%);
}
header.nav:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Brand card (owner, 2026-10-18: the logo is the brand's main appearance, so it
   should stand out). A complete cream card floating just below the top edge,
   all four corners rounded (running it off the top of the screen looked cut),
   soft shadow and a thin gold line; the logo's own colours stay exactly as
   designed. Fades away when the header turns light. */
header.nav .brand { transition: background-color 0.25s ease, box-shadow 0.25s ease; border-radius: 16px; }
header.nav:not(.scrolled) .brand {
  margin-top: 6px;
  background: rgba(255, 250, 246, 0.97);
  padding: 7px 14px 6px;
  box-shadow: 0 10px 28px -10px rgba(36, 8, 27, 0.55), inset 0 0 0 1px rgba(201, 162, 39, 0.45);
}
/* On the card the logo sits fully inside it: no pull-up into the top edge
   (the drawing was clipped there) and slightly smaller, so the card keeps its
   distance from the headline. */
header.nav:not(.scrolled) .logo-img--nav { margin-top: 0; height: 74px; }
/* Phones: a narrower card and a smaller logo on it, so the heart,
   "List Your Business" and the menu button still fit on the screen. */
@media (max-width: 768px) {
  header.nav:not(.scrolled) .brand { margin-top: 4px; padding: 5px 6px 4px; border-radius: 12px; }
  header.nav:not(.scrolled) .logo-img--nav { height: 56px; }
}
@media (max-width: 370px) {
  header.nav:not(.scrolled) .logo-img--nav { height: 50px; }
  header.nav:not(.scrolled) .wrap { gap: 6px; }
}
header.nav:not(.scrolled) .nav-trigger,
header.nav:not(.scrolled) .nav-links > a { color: #fff; opacity: 0.92; }
header.nav:not(.scrolled) .nav-trigger:hover,
header.nav:not(.scrolled) .nav-dd.is-open > .nav-trigger,
header.nav:not(.scrolled) .nav-dd.is-current > .nav-trigger { color: var(--gold-bright); opacity: 1; }
header.nav:not(.scrolled) .nav-theme-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); }
header.nav:not(.scrolled) .nav-signin-link { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.75); }
header.nav:not(.scrolled) .nav-toggle { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); }
header.nav:not(.scrolled) .nav-toggle span { background: #fff; }

/* The couple stand in the right third of the photo (garden, palace and
   floral arch behind), leaving the left side clear for the headline. */
@media (min-width: 1081px) {
  .hero-photo img { object-position: 72% 40%; }
}

/* Wine-tinted scrim: strong behind the text column, clear over the couple. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Lighter on the left (owner, 2026-10-18: "too much purple"); still
       dark enough behind the white headline. */
    linear-gradient(90deg, rgba(36, 8, 27, 0.42) 0%, rgba(36, 8, 27, 0.28) 34%, rgba(36, 8, 27, 0.06) 64%, rgba(36, 8, 27, 0) 100%),
    linear-gradient(0deg, rgba(36, 8, 27, 0.6) 0%, rgba(36, 8, 27, 0) 38%);
}

.hero > .wrap { width: 100%; }

.hero-content { max-width: 720px; }
/* The left shading is light (owner, 2026-10-18), so the hero text carries its
   own soft shadow to stay readable over the bright flowers. */
.hero .hero-eyebrow,
.hero h1,
.hero p.sub { text-shadow: 0 1px 2px rgba(36, 8, 27, 0.55), 0 2px 14px rgba(36, 8, 27, 0.6); }

.hero .hero-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 3.9vw, 54px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 600px;
}

.hero h1 .accent {
  display: inline-block;
  font-style: italic;
  color: var(--gold-bright);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.hero p.sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-on-inverse);
  max-width: 700px;
  margin: 10px 0 16px;
}

.hero .hero-ctas { gap: 12px; }

.hero .hero-ctas .btn-lg {
  padding: 11px 24px;
  font-size: 15px;
}

.hero .hero-ctas .btn-outline {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.55);
}

.hero .hero-ctas .btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

/* ---------- Search card floating on the hero ---------- */
/* --search-overlap: how far the search row is pulled up into the photo. Since
   2026-10-18 (owner) the photo runs on behind the whole search bar and the
   "+ Add budget, guests & date" link under it at every width; each breakpoint
   grows the hero's bottom padding by the same amount, so nothing below moves. */
#search.search-wrap { --search-overlap: 104px; margin-top: calc(-1 * var(--search-overlap)); }

#search .search-card {
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 30px 70px -28px rgba(36, 8, 27, 0.55), 0 2px 8px rgba(36, 8, 27, 0.08);
}

#search .search-btn {
  border-radius: 12px;
  background: var(--magenta-fill);
  box-shadow: none;
}

#search .search-btn:hover {
  transform: none;
  background: var(--plum);
}

/* Slim, single-row search bar on desktop (2026-10-10). With the optional
   budget/guests/date extras hidden there are only three fields, so they and
   the button share one row at every desktop width (the 1081–1280px band
   used to drop the button onto a second row), with tighter padding and a
   capped width. Opening the extras falls back to the original layout.
   The category trigger keeps its 4px-taller top padding so its text lines
   up with the selects (see .category-trigger in style.css). */
@media (min-width: 1081px) {
  /* 18px from the buttons to the search bar (121 − 103); the 57px bar, the
     link and a 12px margin all sit on the photo. */
  .hero { padding-bottom: 121px; }
  #search.search-wrap { --search-overlap: 103px; }
  #search .search-card:not(.show-extras) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    max-width: 1000px;
    padding: 5px;
    border-radius: 16px;
  }
  #search .search-card:not(.show-extras) .search-field:not(.search-field--category) {
    padding: 9px 16px;
    border-bottom: none;
    border-right: 1px solid var(--line);
  }
  #search .search-card:not(.show-extras) .search-field--category { border-bottom: none; border-right: 1px solid var(--line); }
  #search .search-card:not(.show-extras) .category-trigger { padding: 13px 16px 9px; }
  #search .search-card:not(.show-extras) .search-actions {
    grid-column: auto;
    padding: 4px;
  }
  #search .search-card:not(.show-extras) .search-btn {
    min-height: 46px;
    padding: 0 22px;
  }
  /* Keep the extras link centred under the narrower bar. */
  /* Sits under the left edge of the bar, so it reads as part of the search. */
  #search .search-extras-toggle { width: auto; max-width: none; margin-left: 4px; margin-right: 0; padding-left: 12px; text-align: left; }
  #search .search-extras-note { max-width: 1000px; }

  /* Bar width runs from the middle of "I'm a Vendor" to the groom's back in the
     photo; app.js (initHeroSearchAlign) measures both and sets the vars. Bar
     and link then sit --search-shift further right (owner, 2026-10-18). */
  #search { --search-shift: 80px; }
  #search .search-card:not(.show-extras) {
    margin-left: calc(var(--search-inset, 0px) + var(--search-shift));
    max-width: max(var(--search-w, 1000px), 500px);
  }
  /* The link spans exactly the bar's width and centres its text, so it sits
     in the middle under the bar (owner, 2026-10-18). */
  #search .search-card:not(.show-extras) + .search-extras-toggle {
    margin-left: calc(var(--search-inset, 0px) + var(--search-shift));
    width: calc(100% - var(--search-inset, 0px) - var(--search-shift));
    max-width: max(var(--search-w, 1000px), 500px);
    padding-left: 12px; padding-right: 12px;
    text-align: center;
  }
  /* "Try searching" stays on the page's left edge, in line with the headings. */
  #search .search-card:not(.show-extras) {
    /* "Select Category" is the longest value, so its column gets more room. */
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1.06fr) minmax(0, 1fr) auto;
  }
  #search .search-card:not(.show-extras) .search-field:not(.search-field--category) { padding: 9px 10px; }
  #search .search-card:not(.show-extras) .category-trigger { padding: 13px 10px 9px; }
  #search .search-card:not(.show-extras) .search-field select,
  #search .search-card:not(.show-extras) .cat-trigger-value { font-size: 13.5px; }
  #search .search-card:not(.show-extras) .search-btn svg { display: none; }
  /* The narrower bar needs the room: "Search" instead of "Discover Vendors"
     (the button keeps aria-label="Discover vendors"). */
  #search .search-card:not(.show-extras) .search-btn { padding: 0 16px; }
  #search .search-card:not(.show-extras) .search-btn-label { display: none; }

  /* Thinner bar (2026-10-11): about 57px tall instead of 73px. The category
     trigger keeps its 4px-taller top padding so its text lines up. */
  #search .search-card:not(.show-extras) { padding: 4px; }
  #search .search-card:not(.show-extras) .search-field:not(.search-field--category) { padding: 4px 10px; }
  #search .search-card:not(.show-extras) .search-field label { margin-bottom: 0; }
  #search .search-card:not(.show-extras) .category-trigger { padding: 8px 10px 4px; }
  #search .search-card:not(.show-extras) .search-actions { padding: 3px; }
  #search .search-card:not(.show-extras) .search-btn { min-height: 40px; }
  #search .search-card:not(.show-extras) .search-btn::after { content: "Search"; }
}

/* An empty "Recent searches" block (first visit) is noise under the hero. */
#search div:has(> #recentSearches > .search-empty) { display: none; }

/* ---------- Section rhythm (2026-10-10 consistency pass) ----------
   After the hero the backgrounds strictly alternate page / tint:
     categories (page) · how it works (tint) · brand placements (page)
     · why us (tint) · vendors (page) · inspiration (tint) · planning (page)
     · cities (tint) · FAQ (page)
   then the dark closing band and footer. Every section uses the same 32px
   vertical padding (28px on phones), so gaps are even. */
.cat-strip-section { padding: 0 0 32px; background: linear-gradient(180deg, #F8EAE1 0%, var(--bg-page) 100%); }

/* Hero → page transition (2026-10-11). The photo used to stop on flat cream.
   Now the area under it starts in a soft blush (a light tint of the hero's
   wine) and eases into the page ivory across the search row and category
   strip, and the hero casts a faint shadow onto it, so the page flows out of
   the photo instead of being cut off. The search row's own background only
   starts below the part that overlaps the photo. */
#search.search-wrap {
  background: linear-gradient(180deg, transparent 0, transparent var(--search-overlap), #F3E0D5 var(--search-overlap), #F8EAE1 100%);
}
.hero { box-shadow: 0 18px 40px -24px rgba(36, 8, 27, 0.45); }
[data-theme="dark"] #search.search-wrap { background: transparent; }
[data-theme="dark"] .cat-strip-section { background: var(--bg-page); }

/* Tighter row for the extras link under the search bar; 10px clear of the
   bar's border (it touched it at 2px, owner 2026-10-18). */
#search .search-extras-toggle { margin-top: 10px; padding-top: 0; padding-bottom: 0; line-height: 1.6; }
/* On the photo (extras closed) the link is white; once the extras open, the
   taller bar pushes it onto the page background and it goes back to magenta. */
#search .search-card:not(.show-extras) + .search-extras-toggle { color: #fff; text-shadow: 0 1px 3px rgba(36, 8, 27, 0.7); }
#search .search-card:not(.show-extras) + .search-extras-toggle:focus-visible { outline-color: #fff; }
/* "Try searching / Recent searches" starts 16px below the photo, not on it
   (owner, 2026-10-18): the photo ends ~13px under the link on desktop and
   tablet, ~25px on phones. Only while the extras are closed; open, the link
   is already below the photo. !important beats the row's inline 6px. */
#search .wrap:has(.search-card:not(.show-extras)) > div[style] { margin-top: 29px !important; }
@media (max-width: 768px) {
  #search .wrap:has(.search-card:not(.show-extras)) > div[style] { margin-top: 41px !important; }
}
/* The suggestions/recent-searches row is empty for most visitors; don't let
   its top margin add space under the search bar when it has no content. */
/* !important (Core Web Vitals, to-do 21, 2026-10-17): the row's own inline
   style sets display:flex, which beat this rule, so the empty "Try searching /
   Recent searches" labels showed on load and search.js collapsed them ~0.8 s
   later, moving everything below up 26px. */
#search .wrap > div[style]:not(:has(.trending-search, .recent-search)) { display: none !important; }
#browse-categories .home-head h2 { line-height: 1.05; }
#ai.sec-pad,
.why-band,
#blog.sec-pad,
#cities.sec-pad { padding: 24px 0; background: var(--bg-section-alt); }
.why-band { padding: 18px 0; }
.sponsor-band,
#vendors.sec-pad,
#plan-your-wedding.sec-pad,
#faq.sec-pad { padding: 24px 0; background: var(--bg-page); }

/* ---------- Brand placements (sponsored carousel) ----------
   Same carousel pattern as categories and cities. Until real ads exist the
   cards are sample ad slots: wine gradient, gold dashed outline, "Sample ad
   slot" tag, "Your brand here" — visibly an offer to advertise, never a
   pretend ad. Real ads (initSponsoredStrip) render as image cards tagged
   "Ad". */
.sponsor-band__label {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.sponsor-grid {
  display: grid;
  grid-auto-flow: column;
  /* 5½ tiles in view (2026-10-11): the half tile shows there are more, and
     keeps the strip scrollable so it can loop (6 exact fits would not). */
  grid-auto-columns: calc((100% - 5 * 16px) / 5.5);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding: 4px 2px 6px;
  /* Core Web Vitals (to-do 21, 2026-10-17): match the 2px side padding, so the
     strip already sits on its first snap point. Without this the browser
     nudges it 2px on load, Chrome counts that as a scroll and stops measuring
     Largest Contentful Paint, and the homepage gets no speed score. */
  scroll-padding-inline: 2px;
  margin: -4px -2px 0;
  scrollbar-width: none;
}

.sponsor-grid::-webkit-scrollbar { display: none; }
.sponsor-grid > * { scroll-snap-align: start; }
.sponsor-grid:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 4px; border-radius: 16px; }

.sponsor-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  aspect-ratio: 16 / 10;
  padding: 14px 16px;
  border-radius: 16px;
  color: var(--text-on-inverse);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(195, 152, 63, 0.22) 0%, transparent 55%),
    linear-gradient(150deg, #6A1C4F 0%, var(--plum-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(225, 203, 142, 0.18);
}

.sponsor-slot { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sponsor-slot:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(225, 203, 142, 0.35), var(--shadow-md); }
.sponsor-slot:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 3px; }

.sponsor-slot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(225, 203, 142, 0.35);
  border-radius: 11px;
  pointer-events: none;
}

.sponsor-slot__tag {
  position: absolute;
  top: 16px;
  left: 18px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 244, 236, 0.1);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.sponsor-slot__ic {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 30px;
  height: 30px;
  color: var(--gold-bright);
  opacity: 0.85;
}

.sponsor-slot__ic svg { width: 30px; height: 30px; }
.sponsor-slot strong { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: #fff; }
.sponsor-slot > span:last-child { font-size: 13px; color: var(--text-on-inverse-muted); }

.sponsor-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

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

.sponsor-card__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(36, 8, 27, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) { .sponsor-grid { scroll-behavior: auto; } }

/* Section heads that used the centred style now match the rest. */
#ai .section-head,
#faq .section-head { text-align: left; max-width: 640px; margin: 0 0 32px; }
#ai .section-head p,
#faq .section-head p { font-size: 15px; margin-top: 8px; }
#faq .hp-faq { margin: 0; max-width: 820px; }
#faq .hp-faq-all { text-align: left; }

/* Compact homepage FAQ (2026-10-11): a quick answer box, not a feature.
   Smaller heading, slim rows, two columns on desktop. The full FAQ is /faq. */
#faq .section-head { margin-bottom: 14px; max-width: none; }
#faq .section-head h2 { font-size: 28px; }
#faq .section-head p { font-size: 14px; margin-top: 4px; }
#faq .hp-faq { max-width: none; column-gap: 12px; }
#faq .hp-faq details.faq-pane { margin-bottom: 8px; border-radius: 10px; break-inside: avoid; }
#faq .hp-faq details.faq-pane > summary { padding: 10px 14px; font-size: 14.5px; }
#faq .hp-faq details.faq-pane > summary .plus { transform: scale(0.8); }
#faq .hp-faq details.faq-pane .faq-answer { padding: 0 14px 12px; font-size: 14px; line-height: 1.55; }
#faq .hp-faq-all { margin-top: 6px; font-size: 14px; }
/* Two columns on desktop: questions 1–3 on the left, 4–5 and the "See all
   questions" link on the right (the link sits inside .hp-faq for this). */
/* Less space around the FAQ (2026-10-11): it is a quick-answer box. */
#faq.sec-pad { padding: 12px 0; }
#cities.sec-pad { padding-bottom: 16px; }
/* Less space between the vendor grid and Wedding inspiration (2026-10-11). */
#vendors.sec-pad { padding-bottom: 14px; }
#blog.sec-pad { padding-top: 14px; }
.final-band { padding-top: 24px; }

@media (min-width: 900px) {
  #faq .hp-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    align-items: start;
  }
  #faq .hp-faq-all { margin: 2px 0 0 4px; }
}

/* ---------- Category strip ---------- */

/* One-row carousel of every category (2026-10-10), same pattern as the city
   list: native horizontal scroll with snap; arrows in the heading row. */
#browse-categories #catGrid {
  grid-template-columns: none;
  grid-auto-flow: column;
  /* Same tile size as before (7 across the content column), but the strip
     runs edge to edge across the page (2026-10-11): it breaks out of .wrap,
     and the first tile still starts in line with the heading. */
  grid-auto-columns: calc((min(1216px, 100vw - 64px) - 6 * 12px) / 7);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  margin: -4px calc(50% - 50vw) 0;
  padding: 4px calc(50vw - 50%) 6px;
  scroll-padding-inline: calc(50vw - 50%);
  scrollbar-width: none;
}

#browse-categories #catGrid::-webkit-scrollbar { display: none; }
#browse-categories #catGrid > .cat-card { scroll-snap-align: start; }
/* Core Web Vitals (to-do 21, 2026-10-17): the tiles come from the database,
   so the strip used to start empty and grow ~200px, pushing every section
   below it down. One placeholder tile of the same 4:5 shape holds the row's
   height until the first real tile arrives (:empty then stops matching). */
#browse-categories #catGrid:empty::before {
  content: "";
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  background: var(--skeleton-base);
}
#browse-categories #catGrid:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 4px; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { #browse-categories #catGrid { scroll-behavior: auto; } }

/* Photo tiles (2026-10-10): each category is a portrait photo with a soft
   wine fade at the bottom carrying the name and live count. Categories with
   no photo fall back to the icon on a wine tile. */
.cat-strip-section .cat-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(160deg, #6A1C4F 0%, var(--plum-deep) 100%);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}

.cat-strip-section .cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.cat-strip-section .cat-photo,
.cat-strip-section .cat-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.cat-strip-section .cat-photo img {
  object-fit: cover;
  transition: transform 0.6s ease;
}

.cat-strip-section .cat-card:hover .cat-photo img { transform: scale(1.05); }

.cat-strip-section .cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(36, 8, 27, 0) 40%, rgba(36, 8, 27, 0.55) 70%, rgba(36, 8, 27, 0.9) 100%);
}

/* The icon only shows on tiles without a photo. */
.cat-strip-section .cat-card.has-photo .cat-ic { display: none; }
.cat-strip-section .cat-card .cat-ic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--gold-bright);
}

.cat-strip-section .cat-card .cat-ic svg { width: 24px; height: 24px; }

.cat-strip-section .cat-card .cat-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 12px 13px;
  text-align: left;
}

.cat-strip-section .cat-card h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 2px;
}

.cat-strip-section .cat-card p { font-size: 12px; color: var(--text-on-inverse-muted); margin: 0; }
.cat-strip-section .cat-card .arrow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cat-strip-section .cat-photo img { transition: none; }
  .cat-strip-section .cat-card:hover .cat-photo img { transform: none; }
}

/* ---------- How it works ----------
   A slim strip (2026-10-10 declutter): it sits right above the "Why couples
   choose" band, so it is kept light — page background, small heading, and the
   three steps as an open numbered row rather than three boxed cards. */
#ai .hiw-strip { gap: 0; }
#ai .hiw-item {
  padding: 4px 28px;
  background: none;
  border: 0;
  border-left: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
}
#ai .hiw-item:first-child { border-left: 0; padding-left: 0; }
#ai .hiw-item .hiw-icon { width: 36px; height: 36px; background: var(--plum-pale); }
#ai .hiw-item .hiw-icon svg path { stroke: var(--color-primary-text); }
#ai .hiw-item h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
#ai .hiw-item p { font-size: 13.5px; }
@media (max-width: 780px) {
  #ai .hiw-strip { row-gap: 18px; }
  #ai .hiw-item { border-left: 0; padding: 0; }
}

/* ---------- Why Wedding Bharat ---------- */
.why-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 2.2fr);
  gap: 28px;
  align-items: center;
}

/* Tighter band (2026-10-11): smaller heading and icons, less padding. */
.why-intro h2 { margin: 0 0 6px; font-size: 30px; }

.why-intro p { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

.why-intro .trust-strip-note {
  margin: 6px 0 0;
  text-align: left;
  font-size: 13px;
}

.why-intro .trust-strip-note strong { color: var(--ink); }
.why-intro .trust-strip-note a { color: var(--magenta); font-weight: 600; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.why-item {
  padding: 2px 18px;
  border-left: 1px solid var(--line);
}

.why-ic {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--magenta);
  margin-bottom: 6px;
}

.why-ic svg { width: 24px; height: 24px; }

.why-item h3 {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}

.why-item p { font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin: 0; }

/* ---------- Featured vendors ---------- */
/* Slightly tighter heading block (2026-10-11). */
#vendors .home-head { margin-bottom: 14px; }
#vendors .home-head h2 { font-size: clamp(26px, 2.4vw, 32px); }
#vendors .home-sub { margin-top: 4px; font-size: 14.5px; line-height: 1.5; }
#vendors .browse-top-rated-cta { margin-top: 14px; text-align: center; }

/* Vendor strip under the vendor grid (2026-10-11). */
.vendor-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-section-alt);
}
.vendor-strip__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.vendor-strip__points {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.vendor-strip__points li { position: relative; padding-left: 16px; }
.vendor-strip__points li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary-text); font-weight: 700; }
.vendor-strip__btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .vendor-strip { padding: 14px 16px; }
  .vendor-strip__btn { width: 100%; justify-content: center; }
}

/* Six across on wide screens (2026-10-10): live vendors then "Now onboarding"
   tiles fill one row. At ~190px wide the cards are compacted: shorter photo,
   smaller name, price stacked above a full-width contact button. */
@media (min-width: 1200px) {
  #vendorGrid.vendor-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  #vendorGrid .vendor-photo,
  #vendorGrid .onboard-card__img { height: 150px; }
  #vendorGrid .vendor-monogram { font-size: 40px; inset: 0 0 40px; }
  #vendorGrid .vendor-monogram::before,
  #vendorGrid .vendor-monogram::after { width: 18px; margin: 0 8px; }
  #vendorGrid .vendor-name-overlay { left: 12px; right: 46px; bottom: 10px; }
  #vendorGrid .vendor-name-overlay h4 { font-size: 15px; line-height: 1.2; }
  #vendorGrid .vendor-name-overlay .cat { font-size: 11px; }
  #vendorGrid .badge-verified { font-size: 10px; padding: 4px 8px; }
  #vendorGrid .vendor-actions { top: 10px; right: 10px; gap: 4px; }
  #vendorGrid .vendor-action-btn { width: 30px; height: 30px; }
  #vendorGrid .vendor-body { padding: 12px 12px 14px; }
  #vendorGrid .vendor-stats { flex-wrap: wrap; gap: 2px 8px; margin-bottom: 10px; }
  #vendorGrid .vendor-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  #vendorGrid .vendor-foot .price { font-size: 15px; }
  #vendorGrid .vendor-view-btn { width: 100%; justify-content: center; padding: 9px 10px; font-size: 12.5px; }
  #vendorGrid .onboard-card__body { padding: 12px 14px 16px; }
  #vendorGrid .onboard-card__body h4 { font-size: 16px; }
  #vendorGrid .onboard-card__body p { font-size: 12.5px; }
  #vendorGrid .onboard-card__badge { top: 10px; left: 10px; font-size: 10px; padding: 4px 9px; }
}

/* "Now onboarding" tiles (2026-10-10): same footprint as a vendor card so the
   grid reads as two full rows, but visibly not a listing — softened category
   photo, a gold badge, no name, rating, price or button. */
.onboard-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
}

.onboard-card__img {
  position: relative;
  display: block;
  height: 210px;
  background: var(--plum-deep);
}

.onboard-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.8);
}

.onboard-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(36, 8, 27, 0.75);
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.onboard-card__body { padding: 18px 22px 22px; }

.onboard-card__body h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.onboard-card__body p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* ---------- Wedding inspiration ---------- */

.inspo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.inspo-card { display: block; color: var(--ink); }

.inspo-card__img {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--plum-pale);
  margin-bottom: 12px;
}

.inspo-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.inspo-card:hover .inspo-card__img img { transform: scale(1.04); }

.inspo-card__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 4px;
}

.inspo-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}

.inspo-card:hover .inspo-card__title { color: var(--magenta); }

/* ---------- Planning tools ---------- */

.plan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.plan-copy h2 { margin: 0; }

.plan-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.plan-tool {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.plan-tool:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.plan-tool__ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--plum-pale);
  color: var(--magenta);
}

.plan-tool__ic svg { width: 21px; height: 21px; }
.plan-tool strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.plan-tool > span:last-child > span { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

.plan-visual {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 9 / 7.6;
  background: var(--plum-deep);
  box-shadow: var(--shadow-md);
}

.plan-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-card {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: min(300px, calc(100% - 44px));
  padding: 18px 18px 12px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

.plan-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  margin-bottom: 10px;
}

.plan-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

.plan-card__row i {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
}

/* ---------- Cities ---------- */

/* One-row carousel (2026-10-10): live cities first, then those opening next.
   Native horizontal scroll with snap, so touch, trackpad and keyboard all
   work; the arrows in the heading row scroll it by one view. */
.city-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 16px) / 5);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding: 4px 2px 6px;
  /* Core Web Vitals (to-do 21, 2026-10-17): match the 2px side padding, so the
     strip already sits on its first snap point. Without this the browser
     nudges it 2px on load, Chrome counts that as a scroll and stops measuring
     Largest Contentful Paint, and the homepage gets no speed score. */
  scroll-padding-inline: 2px;
  margin: -4px -2px 0;
  scrollbar-width: none;
}

.city-grid::-webkit-scrollbar { display: none; }
.city-grid > .city-card { scroll-snap-align: start; }
.city-grid:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 4px; border-radius: 16px; }

.carousel-nav { display: flex; gap: 8px; }

.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--color-primary-text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.carousel-btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }

@media (prefers-reduced-motion: reduce) { .city-grid { scroll-behavior: auto; } }

.city-card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.city-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.city-card__img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, var(--plum) 0%, var(--plum-deep) 100%);
}

.city-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.city-card:hover .city-card__img img { transform: scale(1.04); }

.city-card__mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 46px;
  color: rgba(225, 203, 142, 0.9);
}

.city-card__body { display: block; padding: 14px 16px 16px; }

/* Cities we are opening next: same card, with a "Coming soon" badge and a
   softened photo so they never read as live listings. */
.city-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(36, 8, 27, 0.72);
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(2px);
}

.city-card--soon .city-card__img img { filter: saturate(0.75) brightness(0.92); }
.city-card--soon .city-card__body span { color: var(--gold-deep); }

.city-vendor-note { margin: 18px 0 0; font-size: 14px; color: var(--text-secondary); text-align: center; }
.city-vendor-note a { color: var(--color-primary-text); font-weight: 600; }
.city-card__body strong { display: block; font-size: 15.5px; font-weight: 600; }
.city-card__body span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); }

/* ---------- Closing band (full width, sits on the footer) ---------- */
.final-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 32px 0;
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
}

.final-band__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: -2;
  opacity: 0.5;
}

.final-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(36, 8, 27, 0.95) 0%, rgba(36, 8, 27, 0.82) 55%, rgba(36, 8, 27, 0.7) 100%);
}

.final-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
}

.final-band__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.final-band__copy p {
  margin: 6px 0 14px;
  max-width: 480px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-on-inverse-muted);
}

.final-band__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }

.final-band__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-bright);
  text-decoration: underline;
  text-decoration-color: rgba(225, 203, 142, 0.4);
  text-underline-offset: 4px;
}

.final-band__link:hover { color: #fff; text-decoration-color: currentColor; }

.final-band__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, auto));
  margin: 0;
}

.final-band__facts > div {
  padding: 2px 20px;
  text-align: center;
  border-left: 1px solid rgba(255, 244, 236, 0.16);
}

.final-band__facts > div:first-child { border-left: 0; }

.final-band__ic {
  display: inline-flex;
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  color: var(--gold-bright);
}

.final-band__ic svg { width: 24px; height: 24px; }

.final-band__facts dt {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
  color: #fff;
}

.final-band__facts dd {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-on-inverse-muted);
}

/* ---------- ≤1280px ---------- */
@media (max-width: 1280px) {
  .why-item { padding: 2px 16px; }
}

/* ---------- ≤1080px: tablet ---------- */
@media (max-width: 1080px) {
  /* 40px from the buttons to the 238px two-row bar (324 − 284). */
  .hero { padding: calc(40px + var(--nav-h) + 1px) 0 324px; }
  #search.search-wrap { --search-overlap: 284px; }

  #browse-categories #catGrid { grid-auto-columns: calc((100vw - 64px - 3 * 12px) / 4); }
  .sponsor-grid { grid-auto-columns: calc((100% - 3 * 16px) / 3.5); }

  .why-layout { grid-template-columns: 1fr; gap: 28px; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .why-item:nth-child(odd) { border-left: 0; padding-left: 0; }

  /* Inspiration becomes a swipeable row instead of five squeezed columns. */
  .inspo-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 30%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .inspo-card { scroll-snap-align: start; }

  .plan-layout { grid-template-columns: 1fr; gap: 32px; }

  .city-grid { grid-auto-columns: calc((100% - 2 * 16px) / 3); }

  .final-band__inner { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- ≤768px: phones ---------- */
@media (max-width: 768px) {
  .hero {
    min-height: 0;
    align-items: flex-end;
    padding: calc(72px + var(--nav-h) + 1px) 0 396px;
  }

  .hero-photo img { object-position: 50% 30%; }

  .hero-scrim {
    background: linear-gradient(180deg, rgba(36, 8, 27, 0.3) 0%, rgba(36, 8, 27, 0.62) 45%, rgba(36, 8, 27, 0.9) 100%);
  }

  .hero .hero-eyebrow { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(32px, 8.4vw, 42px); }
  .hero p.sub { font-size: 15.5px; margin: 14px 0 0; }

  /* The search card sits directly below; on phones the two hero buttons would
     push it off the first screen. "List your business" stays in the menu and
     the vendor promo bar. */
  .hero .hero-ctas { display: none; }

  /* 36px from the text to the ~305px stacked bar (396 − 360). */
  #search.search-wrap { --search-overlap: 360px; }

  .home-head { margin-bottom: 20px; }

  .cat-strip-section { padding: 8px 0 28px; }
  /* One swipeable row of tiles on phones; long names ("Photographers") don't fit
     a 4-up grid at 375px. */
  #browse-categories #catGrid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 132px;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 18px;
    margin: 0 -18px;
    padding: 2px 18px 8px;
    scrollbar-width: none;
  }
  #browse-categories #catGrid::-webkit-scrollbar { display: none; }
  #browse-categories .cat-card { scroll-snap-align: start; }
  .cat-strip-section .cat-card { border-radius: 14px; }
  .cat-strip-section .cat-card h4 { font-size: 13px; }

  .why-grid { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .why-item { padding: 0 0 0 14px; }
  .why-item:nth-child(odd) { padding-left: 0; }

  #ai.sec-pad,
  #vendors.sec-pad,
  #blog.sec-pad,
  #plan-your-wedding.sec-pad,
  #cities.sec-pad,
  #faq.sec-pad,
  .why-band,
  .sponsor-band { padding: 20px 0; }

  .inspo-grid { grid-auto-columns: 64%; }

  .plan-tools { grid-template-columns: 1fr; }
  .plan-card { right: 14px; bottom: 14px; width: calc(100% - 28px); }

  .city-grid { grid-auto-columns: 62%; gap: 12px; }
  .sponsor-grid { grid-auto-columns: 58%; gap: 12px; }
  .carousel-nav { display: none; }

  .final-band { padding: 28px 0; }
  .final-band__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .final-band__facts > div { padding: 0 12px; }
  .final-band__facts > div:nth-child(3) { border-left: 0; }
}

@media (max-width: 340px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-item { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .inspo-card__img img,
  .city-card__img img,
  .vendor-photo img { transition: none; }
  .inspo-card:hover .inspo-card__img img,
  .city-card:hover .city-card__img img { transform: none; }
}