/* ==========================================================================
   BerryFit Sydney — single page
   Design language: Pinterest (Gestalt-inspired)
   · consumer ink #211922 · action #1d1a5e (logo navy) · secondary surface #e5e5e0
   · 16px control radius · 30px marketing pill · flat, shadow-free chrome
   ========================================================================== */

:root {
  /* Accent is sampled straight off the logo mark. It is dark enough to carry
     white text on a fill, but it disappears against the ink sections — those
     use --brand-soft, a lighter tint of the same hue. */
  --brand:      #1d1a5e;
  --brand-hover:#14113f;
  --brand-soft: #8b86ea;
  /* Form errors stay red: the accent no longer reads as "something is wrong". */
  --danger:     #d92d20;
  --ink:      #211922;
  --muted:    #62625b;
  --surface:  #e5e5e0;
  --hairline: #91918c;
  --charcoal: #111111;
  --canvas:   #ffffff;

  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 20px;

  --r-control: 16px;
  --r-tab:     12px;
  --r-pill:    30px;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body { overflow-x: hidden; }

::selection { background: var(--brand); color: #fff; }

/* ---------- header ---------------------------------------------------- */

#site-header {
  background: rgba(255, 255, 255, 0);
}

#site-header.is-stuck {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* At rest the header sits on the white canvas above the hero card, so chrome
   stays ink-coloured. Only the surface changes on scroll, never the text. */

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-control);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: background .18s ease, color .18s ease;
}
.nav-link:hover { background: var(--surface); }
.nav-link.active { background: var(--surface); color: #000; }

.mnav {
  display: block;
  padding: 11px 14px;
  border-radius: var(--r-control);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.mnav:hover { background: var(--surface); }

/* ---------- buttons --------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: background .18s ease, transform .18s ease;
}
.btn-primary:hover { background: var(--brand-hover); transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  backdrop-filter: blur(6px);
  transition: background .18s ease;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .26); }

.btn-dark {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--charcoal);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: opacity .18s ease;
}
.btn-dark:hover { opacity: .85; }

.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
  font-size: 15px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.btn-ghost-dark:hover { background: var(--charcoal); color: #fff; }

.btn-invert {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--charcoal);
  font-size: 15px;
  font-weight: 600;
  transition: background .18s ease;
}
.btn-invert:hover { background: var(--surface); }

.btn-small {
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-control);
  background: var(--surface);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  transition: background .18s ease;
}
.btn-small:hover { background: #dcdcd6; }

/* ---------- section furniture ---------------------------------------- */

.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-title {
  margin-top: 12px;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.04;
}

.stat-n {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.stat-l {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
}
.tick svg { height: 11px; width: 11px; }

/* ---------- service tabs --------------------------------------------- */

.stab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-tab);
  background: var(--surface);
  color: var(--charcoal);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.stab:hover { background: #dcdcd6; }
.stab[aria-selected="true"] { background: var(--charcoal); color: #fff; }
.stab[aria-selected="true"] .stab-n { color: rgba(255, 255, 255, .55); }

.stab-n {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .06em;
}

/* Below lg the inactive panels leave the flow. Stacking them would make every
   tab as tall as the service with the most staff, and on a phone that is a lot
   of empty scrolling. The :not() outranks Tailwind's `grid` utility, whose
   stylesheet the Play CDN injects after this file. */
.svc-panel:not(.is-active) { display: none; }

@media (min-width: 1024px) {
  #service-panel { display: grid; }

  /* Every panel occupies the same cell, so the cell is as tall as the tallest
     one and all five tabs share a height — which is what keeps the photo the
     same size whichever service is open. visibility:hidden holds the space
     while taking the panel out of the tab order and the a11y tree. */
  .svc-panel { grid-area: 1 / 1; }
  .svc-panel:not(.is-active) { display: grid; visibility: hidden; }
}

.svc-panel.is-active { animation: fadeUp .38s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- masonry (Pinterest column flow) --------------------------- */

.masonry {
  column-count: 2;
  column-gap: 14px;
}
@media (min-width: 640px)  { .masonry { column-count: 2; column-gap: 20px; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
@media (min-width: 1280px) { .masonry { column-count: 4; } }

.masonry > * {
  break-inside: avoid;
  margin-bottom: 14px;
}
@media (min-width: 640px) { .masonry > * { margin-bottom: 20px; } }

/* Long-form cards stack badly in narrow columns, so below sm they become a
   snap-scrolling rail instead — one row of swipeable cards, not a tall stack.
   display:flex neutralises the column-count above.

   The rail deliberately does NOT full-bleed with a negative margin: it sits
   inside the section's own px-4, so the first and last cards keep the same
   16px gutter as every other element on the page.

   Selectors are typed (div.rail) so they outrank Tailwind's `grid` utility,
   whose stylesheet the Play CDN injects after this file. */
@media (max-width: 639px) {
  div.rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  div.rail::-webkit-scrollbar { display: none; }
  div.rail > * {
    flex: 0 0 84%;
    margin-bottom: 0;
    scroll-snap-align: start;
  }
}

/* ---------- team grid --------------------------------------------------
   A uniform portrait grid rather than a masonry: the ragged column bottoms
   and the top-to-bottom column fill order made the roster hard to scan, and
   re-flowed unpredictably when a filter changed the item count. Every card is
   the same 3:4 box — no one on the roster is shown larger than anyone else.
   Five columns is as wide as the grid goes: at six the nine staff break 6 + 3
   and the short row reads as missing content, where five gives 5 + 4.

   Flex rather than grid, so the short last row centres under the row above
   instead of hanging off its left edge. Full rows are unaffected, and it holds
   for whatever count the filters produce. --tg-cols is the column count per
   breakpoint and --tg-gap must match `gap`; the basis divides the row by the
   column count, gaps included.

   Exception: the head physiotherapist's 2x2 feature card can only span real
   grid tracks, so .team-grid--feature swaps in a grid at desktop. That gives
   up the centred short row, which is why the filtered views — none of which
   render a feature — stay on flex.
   ---------------------------------------------------------------------- */

.team-grid {
  --tg-cols: 2;
  --tg-gap: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tg-gap);
}
.team-grid > * {
  flex: 0 0 calc((100% - (var(--tg-cols) - 1) * var(--tg-gap)) / var(--tg-cols));
  max-width: calc((100% - (var(--tg-cols) - 1) * var(--tg-gap)) / var(--tg-cols));
}
@media (min-width: 640px)  { .team-grid { --tg-cols: 4; --tg-gap: 16px; } }
@media (min-width: 1024px) {
  .team-grid { --tg-cols: 5; --tg-gap: 18px; }

  .team-grid--feature {
    display: grid;
    grid-template-columns: repeat(var(--tg-cols), minmax(0, 1fr));
  }
  /* the flex basis goes inert under grid, but the max-width would still bite */
  .team-grid--feature > * { max-width: none; }
}

.pin {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  text-align: left;
  border-radius: var(--r-control);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
}

.pin img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.pin:hover img { transform: scale(1.05); }

/* legibility scrim — always on, so the name never fights the photo */
.pin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(15, 11, 16, .88) 0%,
    rgba(15, 11, 16, .45) 30%,
    rgba(15, 11, 16, .05) 58%,
    rgba(15, 11, 16, 0) 100%);
  transition: opacity .22s ease;
}
.pin:hover::after { opacity: .92; }

.pin-cta {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-tab);
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
}
.pin:hover .pin-cta { opacity: 1; transform: none; }

.pin-meta {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: 0;
  padding: 12px;
}
.pin-name {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.pin-role {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .72);
}

/* feature card — head physiotherapist, desktop only */
@media (min-width: 1024px) {
  .pin--feature {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .pin--feature .pin-meta { padding: 26px; }
  .pin--feature .pin-name { font-size: 26px; letter-spacing: -.02em; }
  .pin--feature .pin-role { margin-top: 5px; font-size: 15px; }
}

@media (max-width: 639px) {
  .pin-meta { padding: 12px; }
  .pin-name { font-size: 13.5px; }
  .pin-role { font-size: 11.5px; }
}

/* ---------- partner logo wall ------------------------------------------
   Only the tiles that carry a url render as anchors, so the hover state is
   scoped to a[class] rather than to .partner-tile — an unlinked tile must not
   look like it does something.
   ---------------------------------------------------------------------- */

a.partner-tile {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.partner-tile:hover {
  border-color: rgba(15, 11, 16, .22);
  box-shadow: 0 6px 18px rgba(15, 11, 16, .08);
  transform: translateY(-2px);
}
a.partner-tile:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- review cards ---------------------------------------------- */

.review {
  border-radius: var(--r-control);
  background: var(--surface);
  padding: 22px;
}
.review-stars { display: inline-flex; gap: 3px; color: #f5b301; }
.review-stars svg { height: 15px; width: 15px; }
.review-text  { margin-top: 12px; font-size: 15px; line-height: 1.62; }
.review-foot  { margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.review-more  { display: none; }

/* Phone rail: clamp the quote so every card lands at a similar height,
   with an explicit toggle for the full text. */
@media (max-width: 639px) {
  .review { padding: 18px; display: flex; flex-direction: column; }
  .review-text {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .review.open .review-text { -webkit-line-clamp: unset; overflow: visible; }

  .review-more {
    display: inline-block;
    align-self: flex-start;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 800;
    color: var(--brand);
  }
  .review-foot { margin-top: auto; padding-top: 14px; }
}
.review-av {
  height: 34px; width: 34px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- team / service detail ------------------------------------- */

/* Same overlay treatment as .pin in the team grid, and a square rather than a
   3:4 portrait. The old form stacked a 3:4 photo above a caption block, which
   came to roughly 274px a card — with five staff over two rows that one block
   set the height of every service panel. A fixed 1:1 box also means the card
   no longer changes size with the length of the role, which is what made
   Scott's and Eve's photos taller than Victor's and Sam's. */
/* Every panel is as tall as the service with the most staff, so the ones with
   fewer would leave a block of empty grey. From lg up the grid takes that slack
   and the cards grow into it. The column count is picked per headcount so that
   whatever the number, the cards land on the same row count and fill the same
   height: four staff go two-up over two rows, five go three-up over two. */
.person-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .person-grid {
    flex: 1 1 auto;
    grid-auto-rows: 1fr;
    min-height: 230px;
  }
  /* A lone card in a two-column grid reads as a grid missing an item, so a
     single name takes the full width instead. */
  .person-grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .person-grid[data-n="2"],
  .person-grid[data-n="3"],
  .person-grid[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-grid[data-n="5"],
  .person-grid[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Three-in-two and five-in-three each leave a single empty cell on the last
     row. The final card takes it rather than leaving a hole. */
  .person-grid[data-n="3"] > :last-child,
  .person-grid[data-n="5"] > :last-child { grid-column: span 2; }
}

.person-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-control);
  overflow: hidden;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
/* Inside the stretching grid the row decides the height, not the ratio. */
@media (min-width: 1024px) {
  .person-card {
    aspect-ratio: auto;
    height: 100%;
  }
}
.person-card img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.person-card:hover img { transform: scale(1.05); }

.person-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(15, 11, 16, .88) 0%,
    rgba(15, 11, 16, .40) 38%,
    rgba(15, 11, 16, 0) 70%);
}

.person-meta {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: 0;
  padding: 11px;
}
.person-name {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.person-role {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .72);
}

.cred {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.cred::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  height: 5px; width: 5px;
  border-radius: 999px;
  background: var(--brand);
}

/* ---------- community gallery ------------------------------------------
   Scrolls at every width, unlike .rail, which collapses to a grid from 640px
   up. The set grows with every event the team attends, so there is no row
   count that stays right — a strip just gets longer.
   ---------------------------------------------------------------------- */

.gal-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.gal-rail::-webkit-scrollbar { display: none; }

.gal-card {
  position: relative;
  flex: 0 0 210px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-control);
  overflow: hidden;
  background: var(--surface);
  scroll-snap-align: start;
}
@media (min-width: 640px) { .gal-card { flex-basis: 250px; } }

.gal-card img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.gal-card:hover img { transform: scale(1.05); }

.gal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(15, 11, 16, .85) 0%,
    rgba(15, 11, 16, .35) 32%,
    rgba(15, 11, 16, 0) 62%);
}

.gal-cap {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: 0;
  padding: 13px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

/* Arrows only from lg up. Below that the rail is swiped, and a tap target
   parked over the photos would just be in the way. */
.gal-nav { display: none; }

@media (min-width: 1024px) {
  .gal-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: 44px;
    /* the rail carries 6px of padding-bottom, so centre on the cards not the box */
    transform: translateY(calc(-50% - 3px));
    border-radius: 999px;
    background: var(--canvas);
    border: 1px solid rgba(0, 0, 0, .12);
    color: var(--ink);
    transition: background .18s ease, opacity .18s ease;
  }
  .gal-nav:hover { background: var(--surface); }
  .gal-nav--prev { left: 10px; }
  .gal-nav--next { right: 10px; }
  .gal-nav[disabled] { opacity: 0; pointer-events: none; }
}

.gal-nav svg { height: 19px; width: 19px; }

/* ---------- journal --------------------------------------------------- */

.post {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-control);
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  cursor: pointer;
  transition: background .22s ease, transform .22s ease;
}
.post:hover { background: rgba(255, 255, 255, .09); transform: translateY(-3px); }
.post:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 3px; }
.post-img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: #2a2a2a; }
.post-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }

.post-read    { font-size: 12px; color: rgba(255, 255, 255, .45); }
.post-title   { margin-top: 16px; font-size: 18px; font-weight: 800; letter-spacing: -.015em; line-height: 1.32; color: #fff; }
.post-excerpt { margin-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .6); flex: 1; }
.post-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}

/* light variant — blog archive sits on a pale background */
.post--light {
  background: var(--canvas);
  border-color: rgba(0, 0, 0, .08);
}
.post--light:hover { background: var(--canvas); }
.post--light .post-img      { background: var(--surface); }
.post--light .post-read     { color: var(--muted); }
.post--light .post-title    { color: var(--ink); }
.post--light .post-excerpt  { color: var(--muted); }
.post--light .post-foot     { border-top-color: rgba(0, 0, 0, .08); color: var(--muted); }

/* compact cards inside the phone rail */
@media (max-width: 639px) {
  .post-img  { aspect-ratio: 16 / 8; }
  .post-body { padding: 18px; }
  .post-body h3 { font-size: 16px; }
  .post-body p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-control);
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tfilter {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-tab);
  background: #fff;
  color: var(--charcoal);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, .08);
  transition: background .18s ease, color .18s ease;
}
.tfilter:hover { background: var(--surface); }
.tfilter[aria-pressed="true"] { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }

.tfilter-n {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}
.tfilter[aria-pressed="true"] .tfilter-n { color: rgba(255, 255, 255, .55); }

/* ---------- blog archive ------------------------------------------------ */

.search-wrap { position: relative; display: block; }
.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  height: 17px;
  width: 17px;
  pointer-events: none;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391918c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
}
.search-field { padding-left: 42px; height: 48px; }
.search-field::-webkit-search-cancel-button { cursor: pointer; }

/* Article bodies are written in the admin editor, which emits a fixed, small
   set of tags — h2, h3, p, strong, em, ul, ol, li, blockquote, a, img. Every
   one of them is styled here, because anything the editor can produce will
   eventually appear on a page. */

.article-body p,
.article-body li {
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
}
.article-body p + p { margin-top: 18px; }

.article-body h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-top: 44px;
}
.article-body h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: 34px;
}
.article-body h2 + p,
.article-body h3 + p { margin-top: 14px; }

.article-body ul,
.article-body ol {
  margin-top: 18px;
  padding-left: 24px;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: 8px; }

.article-body blockquote {
  margin-top: 26px;
  padding-left: 20px;
  border-left: 3px solid var(--brand);
  font-style: italic;
  color: var(--muted);
}

.article-body a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover { color: var(--brand-hover); }

.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 28px;
  border-radius: var(--r-control);
  background: var(--surface);
}

.article-body strong { font-weight: 700; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- locations -------------------------------------------------- */

.loc-card {
  border-radius: var(--r-control);
  overflow: hidden;
  background: var(--canvas);
  border: 1px solid rgba(0, 0, 0, .08);
  transition: transform .22s ease;
}
.loc-card:hover { transform: translateY(-3px); }
.loc-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface); }

.map-frame {
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
  min-height: 320px;
}
.map-frame iframe {
  display: block;
  height: 100%;
  width: 100%;
  min-height: 320px;
  border: 0;
}

/* ---------- form ------------------------------------------------------- */

.lbl {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.field {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  padding: 11px 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  background: #fff;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(33, 25, 34, .1); }
.field::placeholder { color: var(--hairline); }
.field.invalid { border-color: var(--danger); }

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362625b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}

.err {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
  min-height: 0;
}

/* ---------- footer ----------------------------------------------------- */

.foot-h {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.foot-a { transition: color .18s ease; }
.foot-a:hover { color: #fff; }

.legal-item { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.legal-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
}
.legal-btn:hover { color: #fff; }
.legal-btn svg { flex: 0 0 16px; transition: transform .22s ease; }
.legal-item.open .legal-btn svg { transform: rotate(45deg); }
.legal-body {
  display: none;
  padding: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .55);
  max-width: 80ch;
}
.legal-item.open .legal-body { display: block; }

/* ---------- utilities --------------------------------------------------- */

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}