/* ============================================================
   Tiddlywinks Nursery — Find a Nursery page styles
   Class prefix: .tw-fan-*  (+ the generic .tw-carousel-* block,
   copied from aboutus.css/contact.css — the bundles never co-load).
   Loaded only on /find-a-nursery/ (see enqueue.php).

   SIBLING: resources/home-v2.css lines ~495-660 style the SAME data on the
   HOMEPAGE with the older design (.tw-h2-find__*). That is deliberately
   untouched, and the two files never load on the same page.
   ============================================================ */

/* ---------- Theme compatibility ----------
   1. Reset the theme's broad, UNSCOPED `header,nav{position:absolute;top:0}`
      for every semantic <header> inside our main — the reviews section head
      AND each review card's <header> (author + stars). Without this the card
      headers get yanked position:absolute to the top of the carousel track
      (a containing block via its transform), stacking author names on top of
      each other. `#header` is outside .tw-fan-main, so it stays untouched.
   2. main.css has `body main,html main{overflow-x:hidden}`, making <main> a
      clipping container. No position:sticky in this design, but `clip` keeps
      the warm wash from opening a horizontal scrollbar.
   NOTE: no `#header.white-bg` / logo / white-button fix here — this page has
   its own `hero_section` flex row and therefore a real `.hero-section`, so the
   theme's own header behaviour applies untouched (same as About Us).        */
.tw-fan-main {
  overflow-x: visible;
  overflow-x: clip;
}
.tw-fan-main header {
  position: static;
  padding: 0;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
}
/* The theme's hero partial injects an empty `.breadcrumbs-section` that still
   carries `margin:28px 0 24px`. Collapse it so the intro sits under the hero. */
.tw-fan-main > .breadcrumbs-section { margin: 0; }

/* The hero wrapper is `padding:150px 0 100px`, leaving 100px of dead space
   between the H1 and the intro line. Pull the intro up under the heading. */
.tw-fan-main .hero-section .hero-section-wrapper { padding-bottom: 28px; }

/* main.css has `main.content section:first-of-type { margin-top: 180px }`
   (120px at this breakpoint). `:first-of-type` resolves against the PARENT, so
   .tw-fan-finder — the first <section> inside .tw-fan-band — matches it, and
   that margin collapses through the band to open a big white gap above the map.
   Their selector is (0,2,2); these need a higher class count to win, hence the
   .tw-fan-main prefix. Don't "simplify" these selectors — they'll stop working. */
.tw-fan-main .tw-fan-band > section:first-of-type,
.tw-fan-main .tw-fan-band > .tw-fan-finder { margin-top: 0; }

/* The theme's universal `*{color:#2e2f33}` sets `color` directly on the <svg>
   AND its shapes, so currentColor icons never inherit an accent from a
   wrapper. Force inheritance for our icons. */
.tw-fan-main svg,
.tw-fan-main svg * { color: inherit; }

/* Smooth in-page anchor scroll (Reviews tile → #tw-fan-reviews). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Base ---------- */
.tw-fan-main {
  color: #2e2f33;
  line-height: 1.4;
}
.tw-fan-main h1,
.tw-fan-main h2,
.tw-fan-main h3 { line-height: 1.15; }

.tw-fan-container {
  width: 90vw;
  max-width: 1400px;
  margin: 0 auto;
}

/* Undo the theme's global ul{display:flex;flex-direction:column}. */
.tw-fan-main .tw-fan-chips { display: flex; }

.tw-fan-main .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.tw-fan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tw-fan-btn--tan { background: #d8ae7d; border-color: #d8ae7d; color: #fff; }
.tw-fan-btn--tan:hover { background: #c99a63; border-color: #c99a63; color: #fff; }
/* Comp: white fill, 1px #D8AE7D border, radius 100, #36373B label. */
.tw-fan-btn--outline { background: #fff; border-color: #d8ae7d; color: #36373b; min-width: 145px; }
.tw-fan-btn--outline:hover { background: #d8ae7d; border-color: #d8ae7d; color: #fff; }

/* ============================================================
   2. INTRO
   ============================================================ */
.tw-fan-intro { padding: 0 0 28px; }
.tw-fan-intro__copy {
  max-width: 652px;
  margin: 0 auto;
  text-align: center;
  font-size: 17px;
  line-height: 19px;
  font-weight: 300;
  color: #2f3034;
}

/* ============================================================
   3+4. MAP BAND + CONTROLS  (+ the warm wash behind both)
   ============================================================ */
.tw-fan-band { position: relative; }

/* The comp's #F6F5F3 rectangle starts PARTWAY DOWN the map band (y=739 vs the
   band's 399-938) and runs to the end of the locations section — so it can't
   be a wrapper background. An absolutely-positioned span behind z-index:1
   children does it without any overflow:hidden or 100vw negative-margin
   trickery (both of which break elsewhere in this theme). */
.tw-fan-wash {
  position: absolute;
  left: 0;
  right: 0;
  top: 340px;       /* ≈ 63% down the 539px band, per the comp */
  bottom: 0;
  background: #f6f5f3;
  z-index: 0;
  pointer-events: none;
}
.tw-fan-finder,
.tw-fan-locations { position: relative; z-index: 1; }

.tw-fan-finder { margin-top: 0; padding: 0 0 8px; }

/* --- Two-column layout: results | map (comp 626 / 733) --- */
/* Per the comp the grey results panel and the map are one continuous surface —
   they butt together with no gutter, so only the OUTER corners are rounded. */
.tw-fan-layout {
  display: grid;
  grid-template-columns: minmax(0, 626fr) minmax(0, 733fr);
  gap: 0;
  align-items: stretch;
}

/* --- Results panel + custom scroll rail --- */
.tw-fan-panel {
  position: relative;
  background: #ebebeb;
  border-radius: 20px 0 0 20px;
  height: 539px;
  box-sizing: border-box;
}

.tw-fan-list {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  /* Comp: rail track at x=201 in a panel spanning 176→802 → 25px inside the
     left edge; card text begins at x≈262 → ~86px in. */
  padding: 8px 32px 8px 76px;
  /* Native scrollbar hidden VISUALLY only — overflow-y:auto stays, so wheel,
     trackpad, touch momentum, PageUp/Down, Home/End and screen-reader caret
     movement all keep working with no extra code. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tw-fan-list::-webkit-scrollbar { display: none; }
.tw-fan-list:focus { outline: none; }
.tw-fan-list:focus-visible { outline: 2px solid #84a7c8; outline-offset: -2px; border-radius: 20px 0 0 20px; }

.tw-fan-rail {
  position: absolute;
  left: 18px;
  top: 24px;
  bottom: 24px;
  width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.tw-fan-rail[hidden] { display: none; }

.tw-fan-rail__arrow {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #303135;
  cursor: pointer;
  border-radius: 50%;
  transition: opacity .2s ease, background-color .2s ease;
}
.tw-fan-rail__arrow svg { width: 20px; height: 20px; }
/* Comp draws these rotated 90° — a chevron pointing up / down. */
.tw-fan-rail__arrow--up svg   { transform: rotate(90deg); }
.tw-fan-rail__arrow--down svg { transform: rotate(90deg); }
@media (hover: hover) { .tw-fan-rail__arrow:hover { background: rgba(48,49,53,.08); } }
.tw-fan-rail__arrow[disabled] { opacity: .3; cursor: default; }
.tw-fan-rail__arrow:focus { outline: none; }
.tw-fan-rail__arrow:focus-visible { box-shadow: 0 0 0 3px rgba(132,167,200,.45); }

.tw-fan-rail__track {
  position: relative;
  flex: 1 1 auto;
  width: 11px;
  background: #d9d9d9;
  border-radius: 999px;
  cursor: pointer;
}
.tw-fan-rail__thumb {
  position: absolute;
  left: 50%;
  top: 0;
  width: 21px;
  height: 21px;
  margin-left: -10.5px;
  background: #303135;
  border-radius: 50%;
  cursor: grab;
  /* Only the thumb opts out of touch panning — the LIST still touch-scrolls. */
  touch-action: none;
}
.tw-fan-rail__thumb.is-dragging { cursor: grabbing; }

/* --- Result cards --- */
.tw-fan-result {
  position: relative;
  max-width: 348px;   /* comp: 348px text column + divider */
  padding: 22px 0;
  border-bottom: 1px solid #bdbdbd;
  cursor: pointer;
}
.tw-fan-result:last-of-type { border-bottom: 0; }
.tw-fan-result.is-active { background: rgba(216,174,125,.10); border-radius: 12px; padding-left: 14px; padding-right: 14px; }
.tw-fan-result.is-hidden { display: none; }
.tw-fan-result__link { text-decoration: none; }
.tw-fan-result__name {
  margin: 0;
  font-size: 20px;
  line-height: 22px;
  font-weight: 400;
  color: #303135;
}
.tw-fan-result__rating {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 17px;
  font-weight: 300;
  color: #303135;
}
.tw-fan-result__score { font-weight: 400; }
.tw-fan-result__count { color: #919399; }
.tw-fan-result__address { margin: 10px 0 0; font-size: 15px; line-height: 17px; font-weight: 300; color: #303135; }
/* Comp sets 11/12px here; nudged to 12/15 for legibility — see the plan's
   open question on type sizes. */
.tw-fan-result__quote { margin: 8px 0 0; font-size: 12px; line-height: 15px; font-weight: 300; color: #303135; }
.tw-fan-result__distance { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; color: #d8ae7d; }
.tw-fan-empty { padding: 28px 0; font-size: 15px; font-weight: 300; color: #919399; }

/* --- Review-source emblem --- */
.tw-fan-emblem { display: inline-block; height: 14px; width: auto; vertical-align: middle; }
.tw-fan-emblem--text {
  height: auto;
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .01em;
  color: #919399;
  white-space: nowrap;
}
.tw-fan-emblem-link { display: inline-flex; align-items: center; text-decoration: none; }

/* --- Map --- */
.tw-fan-map {
  position: relative;
  height: 539px;
  background: #ebebeb;
  border-radius: 0 20px 20px 0;
  overflow: hidden;
}
.tw-fan-map > div { width: 100%; height: 100%; }
.tw-fan-map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #919399;
  font-size: 15px;
  font-weight: 300;
}
/* Info window contents (Google injects its own wrapper). */
.tw-fan-iw { font-size: 14px; line-height: 1.5; color: #303135; }
.tw-fan-iw strong { font-size: 15px; }
.tw-fan-iw a { color: #303135; font-weight: 400; }

/* --- Controls row: BELOW the band, per the comp --- */
.tw-fan-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
}
.tw-fan-search {
  position: relative;
  flex: 0 1 480px;
  display: flex;
  align-items: center;
  height: 55px;
  background: #ebebeb;
  border-radius: 20px;
  padding: 0 48px 0 52px;
  box-sizing: border-box;
}
.tw-fan-search__icon {
  position: absolute;
  left: 18px;
  width: 24px;
  height: 24px;
  color: #303135;
}
.tw-fan-search__pin {
  position: absolute;
  right: 16px;
  width: 22px;
  height: 22px;
  color: #303135;
  opacity: .4;
  pointer-events: none;
}
.tw-fan-search__input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  color: #303135;
}
.tw-fan-search__input::placeholder { color: #303135; opacity: .4; }
.tw-fan-search__input::-webkit-search-cancel-button { cursor: pointer; }

.tw-fan-radius { position: relative; flex: 0 0 auto; }
.tw-fan-radius__select {
  height: 55px;
  min-width: 182px;
  background: #ebebeb;
  border: 0;
  border-radius: 20px;
  padding: 0 46px 0 22px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  color: #303135;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tw-fan-radius__chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #303135;
  pointer-events: none;
}

.tw-fan-chipwrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 300px;
  min-width: 0;
}
.tw-fan-chipnav {
  flex: 0 0 auto;
  width: 32px;
  height: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #303135;
  cursor: pointer;
}
.tw-fan-chipnav[hidden] { display: none; }
.tw-fan-chipnav svg { width: 22px; height: 22px; }
.tw-fan-chipnav[disabled] { opacity: .25; cursor: default; }

.tw-fan-chips {
  display: flex;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tw-fan-chips::-webkit-scrollbar { display: none; }
.tw-fan-chip {
  flex: 0 0 auto;
  height: 55px;
  padding: 0 26px;
  background: #ebebeb;
  border: 0;
  border-radius: 20px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  color: #303135;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) { .tw-fan-chip:hover { background: #e0ded9; } }
.tw-fan-chip.is-active { background: #d8ae7d; color: #fff; }
.tw-fan-chip:focus { outline: none; }
.tw-fan-chip:focus-visible { box-shadow: 0 0 0 3px rgba(132,167,200,.45); }

/* ============================================================
   Generic carousel  (.tw-carousel) — copied from aboutus.css.
   ============================================================ */
.tw-carousel { position: relative; padding: 0 56px; }
.tw-carousel__viewport { overflow: hidden; }
.tw-carousel__track {
  display: flex;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.tw-carousel__item {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;          /* JS overrides per items-per-view */
  padding: 0 12px;
}
/* Region filtering hides items with the `hidden` attribute; make sure that
   always wins over the flex display above, or hidden slides still take space. */
.tw-carousel__item[hidden] { display: none !important; }

.tw-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 43px;
  height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1cbc3;
  background: #fff;
  color: #303135;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
@media (hover: hover) { .tw-carousel__arrow:hover { background: #d8ae7d; color: #fff; border-color: #d8ae7d; } }
.tw-carousel__arrow:active { background: #d8ae7d !important; color: #fff !important; border-color: #d8ae7d !important; }
.tw-carousel__arrow:focus { outline: none; }
.tw-carousel__arrow:focus-visible { box-shadow: 0 0 0 3px rgba(132,167,200,.45); }
.tw-carousel__arrow svg { width: 22px; height: 22px; }
.tw-carousel__arrow--prev { left: 0; }
.tw-carousel__arrow--next { right: 0; }
.tw-carousel__arrow[disabled] { opacity: .35; cursor: default; }
.tw-carousel__arrow[disabled]:hover { background: #fff; color: #303135; border-color: #d1cbc3; }

.tw-carousel--single { padding: 0; }
.tw-carousel--single .tw-carousel__arrow,
.tw-carousel--single .tw-carousel__dots { display: none; }
.tw-carousel--empty .tw-carousel__arrow,
.tw-carousel--empty .tw-carousel__dots { display: none; }

/* Comp: 16px #D9D9D9 dots, active has a 10px #303135 inner dot. */
.tw-carousel__dots { display: flex; justify-content: center; gap: 4px; margin-top: 28px; }
.tw-carousel__dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #d9d9d9;
  cursor: pointer;
  transition: background-color .2s ease;
}
.tw-carousel__dot.is-active::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #303135;
}

/* ============================================================
   5. LOCATIONS IN: X
   ============================================================ */
.tw-fan-locations { padding: 48px 0 64px; }
.tw-fan-locations__title {
  font-size: 35px;
  line-height: 39px;
  font-weight: 300;
  color: #303135;
  margin: 0 0 28px;
}
.tw-fan-locations__carousel .tw-carousel__track { align-items: stretch; }

/* The comp puts this carousel's controls in a centred row UNDERNEATH the cards
   — ‹ • • • › — rather than as side arrows. Applies at every breakpoint (the
   mobile block below does the same for the reviews/tiles carousels). */
.tw-fan-locations__carousel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0;
}
.tw-fan-locations__carousel .tw-carousel__viewport { flex: 1 1 100%; order: 0; }
.tw-fan-locations__carousel .tw-carousel__arrow { position: static; transform: none; }
.tw-fan-locations__carousel .tw-carousel__arrow--prev { order: 1; }
.tw-fan-locations__carousel .tw-carousel__dots { order: 2; margin-top: 0; }
.tw-fan-locations__carousel .tw-carousel__arrow--next { order: 3; }
.tw-fan-locations__empty {
  padding: 28px 12px;
  font-size: 15px;
  font-weight: 300;
  color: #919399;
}

.tw-fan-loc { display: flex; flex-direction: column; height: 100%; }
.tw-fan-loc__media {
  display: block;
  width: 100%;
  aspect-ratio: 407 / 230;
  border-radius: 20px;
  background-color: #ebebeb;
  background-size: cover;
  background-position: center;
}
.tw-fan-loc__media--blue { background-image: linear-gradient(135deg, #84a7c8 0%, #c77cb3 100%); }
.tw-fan-loc__media--tan  { background-image: linear-gradient(135deg, #d8ae7d 0%, #84a7c8 100%); }
.tw-fan-loc__media--pink { background-image: linear-gradient(135deg, #c77cb3 0%, #d8ae7d 100%); }

.tw-fan-loc__name {
  margin: 20px 0 0;
  font-size: 20px;
  line-height: 22px;
  font-weight: 400;
}
.tw-fan-loc__name a { color: #303135; text-decoration: none; }
.tw-fan-loc__name a:hover { text-decoration: underline; }
.tw-fan-loc__rating {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 17px;
  font-weight: 300;
  color: #303135;
}
.tw-fan-loc__score { font-weight: 400; }
.tw-fan-loc__address { margin: 12px 0 0; font-size: 15px; line-height: 17px; font-weight: 300; color: #303135; }
.tw-fan-loc__quote { margin: 8px 0 0; font-size: 12px; line-height: 15px; font-weight: 300; color: #303135; }
/* Content varies per card — some nurseries have no score row, some no quote —
   so push the CTA to the bottom, or the buttons stair-step across the row. */
.tw-fan-loc .tw-fan-btn { margin-top: auto; align-self: flex-start; }
.tw-fan-loc__quote,
.tw-fan-loc__address { margin-bottom: 18px; }
.tw-fan-loc__address:not(:last-of-type) { margin-bottom: 0; }

/* ============================================================
   6. REVIEWS CAROUSEL
   ============================================================ */
.tw-fan-reviews { padding: 56px 0 72px; background: rgba(132, 167, 200, 0.1); }
.tw-fan-reviews__head { text-align: center; max-width: 620px; margin: 0 auto 20px; }
.tw-fan-reviews__title { font-size: clamp(28px, 3vw, 38px); font-weight: 400; margin: 0; }

.tw-fan-reviews__carousel .tw-carousel__track { align-items: flex-start; }

.tw-fan-review-wrap { display: flex; flex-direction: column; align-items: center; }
.tw-fan-review__smiley { display: block; width: 88px; height: 88px; margin: 0 0 -34px; position: relative; z-index: 2; }
.tw-fan-review__smiley svg { width: 100%; height: 100%; }

.tw-fan-review {
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 48px 32px 32px;
  box-shadow: 0 10px 30px rgba(46, 47, 51, .06);
}
.tw-fan-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tw-fan-review__author { font-size: 23px; font-weight: 700; margin: 0; }
.tw-fan-stars {
  display: inline-block;
  width: 110px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  flex: 0 0 auto;
}
.tw-fan-review__quote {
  font-size: 16px;
  line-height: 28px;
  margin: 0;
  border: 0;
  padding: 0;
  quotes: none;
}
.tw-fan-review__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  color: #919399;
  font-size: 13px;
}

/* ============================================================
   7. FEATURE TILES
   ============================================================ */
.tw-fan-cards { padding: 64px 0 8px; }
.tw-fan-card { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; }
.tw-fan-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 5;
  border-radius: 20px;
  background-color: #e8e5e1;
  background-size: cover;
  background-position: center;
}
.tw-fan-card__media--blue { background-image: linear-gradient(135deg, #84a7c8 0%, #c77cb3 100%); }
.tw-fan-card__media--tan  { background-image: linear-gradient(135deg, #d8ae7d 0%, #84a7c8 100%); }
.tw-fan-card__media--pink { background-image: linear-gradient(135deg, #c77cb3 0%, #d8ae7d 100%); }
.tw-fan-card__title {
  font-size: 22px;
  font-weight: 400;
  color: #2e2f33;
  margin: 24px 0 20px;
  max-width: 22ch;
  text-wrap: balance;
}
.tw-fan-card .tw-fan-btn { margin-top: auto; }

/* ============================================================
   8. CTA BAND
   ============================================================ */
.tw-fan-cta { padding: 56px 0 80px; }
.tw-fan-cta__inner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-color: #e8e5e1;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  padding: 56px;
  display: flex;
  align-items: center;
}
.tw-fan-cta__inner--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(46,47,51,.74) 0%, rgba(46,47,51,.5) 50%, rgba(46,47,51,.12) 100%);
}
.tw-fan-cta__content { position: relative; z-index: 2; max-width: 560px; text-align: left; }
.tw-fan-cta__title { font-size: 34px; font-weight: 700; margin: 0 0 14px; }
.tw-fan-cta__phone { font-size: 16px; margin: 0 0 20px; }
.tw-fan-cta__phone a { color: inherit; font-weight: 700; }
.tw-fan-cta__inner--photo .tw-fan-cta__title,
.tw-fan-cta__inner--photo .tw-fan-cta__phone { color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .tw-fan-list { padding-left: 68px; }
  .tw-fan-locations__title { font-size: 30px; line-height: 34px; }
}

/* Tablet — stack the finder: map first (per the mobile comp), list below. */
@media (max-width: 1024px) {
  /* Stacked, but still joined: map on top, list beneath. */
  .tw-fan-layout { grid-template-columns: 1fr; gap: 0; }
  .tw-fan-map { order: -1; height: 420px; border-radius: 20px 20px 0 0; }
  .tw-fan-panel { height: auto; max-height: 460px; border-radius: 0 0 20px 20px; }
  .tw-fan-list:focus-visible { border-radius: 0 0 20px 20px; }
  .tw-fan-list { max-height: 460px; height: auto; }
  .tw-fan-result { max-width: none; }
  .tw-fan-wash { top: 200px; }
  .tw-fan-chipwrap { flex: 1 1 100%; }
}

@media (max-width: 768px) {
  .tw-fan-intro { padding: 0 0 16px; }
  .tw-fan-main .hero-section .hero-section-wrapper { padding-bottom: 16px; }
  .tw-fan-intro__copy { font-size: 16px; line-height: 20px; }

  .tw-fan-map { height: 365px; border-radius: 20px; }  /* panel hidden below, so full radius */

  /* The mobile comp shows map → controls → locations carousel, with no
     scrollable results panel: the carousel below carries the same nurseries,
     so the panel (and its rail) is redundant on a small screen. Card↔marker
     interaction is desktop-only as a result — flagged in the plan. */
  .tw-fan-panel { display: none; }
  .tw-fan-rail { display: none; }

  .tw-fan-controls { margin-top: 20px; gap: 10px; }
  .tw-fan-search { flex: 1 1 100%; height: 50px; }
  .tw-fan-search__input { font-size: 16px; }
  .tw-fan-radius { flex: 1 1 100%; }
  .tw-fan-radius__select { width: 100%; height: 50px; font-size: 16px; }
  .tw-fan-chip { height: 46px; padding: 0 20px; font-size: 16px; }
  .tw-fan-chipnav { height: 46px; }

  .tw-fan-locations { padding: 32px 0 48px; }
  .tw-fan-locations__title { font-size: 25px; line-height: 28px; margin-bottom: 20px; }

  /* Comp: controls sit BELOW the card as a centred ‹ • • • › row. */
  .tw-carousel { padding: 0; }
  .tw-carousel__item { padding: 0; }
  .tw-carousel__arrow {
    position: static;
    transform: none;
    width: 43px;
    height: 43px;
  }
  .tw-carousel__arrow--prev { order: 1; }
  .tw-carousel__dots { order: 2; margin-top: 0; }
  .tw-carousel__arrow--next { order: 3; }
  .tw-carousel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .tw-carousel__viewport { flex: 1 1 100%; order: 0; }

  /* Full-width Visit Website button on mobile, per the comp. */
  .tw-fan-loc .tw-fan-btn { align-self: stretch; }

  /* The comp's dots are 16px. Keep them looking 16px but extend the touch
     target to ~44px with a transparent overlay — a 16px tap target is well
     below the comfortable minimum on a phone. */
  .tw-carousel__dot { position: relative; }
  .tw-carousel__dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .tw-fan-reviews { padding: 40px 0 48px; }
  .tw-fan-review { padding: 44px 20px 24px; }
  .tw-fan-review__author { font-size: 19px; }
  .tw-fan-review__quote { font-size: 15px; line-height: 26px; }
  .tw-fan-review__head { flex-wrap: wrap; gap: 8px; }

  .tw-fan-cards { padding: 40px 0 0; }
  .tw-fan-card__title { font-size: 20px; }

  .tw-fan-cta { padding: 40px 0 56px; }
  .tw-fan-cta__inner { padding: 32px 24px; min-height: 383px; align-items: flex-end; }
  /* Mobile comp: bottom-weighted scrim, centred text. */
  .tw-fan-cta__inner--photo::before {
    background: linear-gradient(0deg, rgba(0,0,0,.7) 33.65%, rgba(0,0,0,0) 100%);
  }
  .tw-fan-cta__content { max-width: none; text-align: center; }
  .tw-fan-cta__title { font-size: 30px; line-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-carousel__track { transition: none; }
  .tw-fan-chips { scroll-behavior: auto; }
}