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

:root {
  --brand:    #e60023;
  --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: #c8001e; 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;
}

.panel-fade { 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;
  }
}

/* ---------- pin cards ------------------------------------------------- */

.pin {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--r-control);
  overflow: hidden;
  background: var(--canvas);
  cursor: pointer;
  transition: transform .22s ease;
}
.pin:hover { transform: translateY(-3px); }

.pin-media {
  position: relative;
  border-radius: var(--r-control);
  overflow: hidden;
  background: var(--surface);
}
.pin-media img {
  width: 100%;
  display: block;
  height: var(--h, 320px);
  object-fit: cover;
  transition: transform .5s ease;
}
/* two narrow columns on phones — scale the pin heights to match */
@media (max-width: 639px) {
  .pin-media img { height: calc(var(--h, 320px) * .58); }
  .pin-name { font-size: 14px; }
  .pin-role { font-size: 12px; }
}
.pin:hover .pin-media img { transform: scale(1.04); }

.pin-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background .22s ease;
}
.pin:hover .pin-media::after { background: rgba(0, 0, 0, .28); }

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

.pin-meta { padding: 12px 4px 4px; }
.pin-name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.pin-role { margin-top: 2px; font-size: 13px; color: var(--muted); }

/* ---------- 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 ------------------------------------- */

/* The card is a <button>, and the UA stylesheet centres a button's content
   vertically. As a stretched grid item it is as tall as the tallest card in
   the row, so a one-line role (Scott, Eve) left white bands above and below
   the photo. Laying it out as a column kills the centring, and letting the
   image flex-grow means the photo absorbs the spare height instead. */
.person-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border-radius: var(--r-control);
  background: var(--canvas);
  border: 1px solid rgba(0, 0, 0, .07);
  overflow: hidden;
}
.person-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  background: var(--surface);
}

.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);
}

/* ---------- 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); 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-body p {
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
}
.article-body p + p { margin-top: 18px; }

.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(--brand); }

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(--brand);
  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; }
}