/* ==========================================================================
   Dr. Abbie Clinics — Component System
   Every component here is reused across templates. Nothing is page-specific.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS
   Orange is booking only. Phone CTAs are azure. Everything else is a text link.
   -------------------------------------------------------------------------- */

body .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;               /* above the 44px floor — older patient base */
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Primary — BOOKING ONLY. Rest state is the AA-safe orange; hover brightens
   to the brand orange. See DESIGN.md §2. */
body .btn--book{
  background: var(--orange-deep);
  color: #fff;
  box-shadow: 0 2px 8px rgba(203, 76, 18, 0.25);
}
body .btn--book:hover{
  background: var(--orange);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(203, 76, 18, 0.32);
}
body .btn--book:active{ transform: translateY(0); box-shadow: 0 1px 4px rgba(203, 76, 18, 0.3); }

/* Secondary — phone */
body .btn--call{
  background: transparent;
  color: var(--azure-deep);
  border-color: var(--azure-deep);
}
body .btn--call:hover{
  background: var(--azure-deep);
  color: #fff;
  transform: translateY(-1px);
}
body .btn--call:active{ transform: translateY(0); }

/* On dark grounds */
body .btn--ghost-invert{
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
body .btn--ghost-invert:hover{ background: #fff; color: var(--deep-blue); transform: translateY(-1px); }

body .btn--sm{ min-height: 44px; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-small); }
body .btn--block{ width: 100%; }

/* Circular arrow badge on the booking CTA. The arrow points up-right at rest
   and turns to point right on hover, so the button reacts without moving the
   label. Lives here rather than in a theme so every variant renders it. */
body .btn__icon{
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: var(--sp-2);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--orange-deep);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body .btn__icon svg{
  transition: transform var(--dur) var(--ease);
}
body .btn--book:hover .btn__icon svg, body .btn--book:focus-visible .btn__icon svg{
  transform: rotate(45deg);
}
body .btn--book:hover .btn__icon{ color: var(--orange); }

/* Compact buttons (header, mobile bar) get a smaller badge */
body .btn--sm .btn__icon{ width: 26px; height: 26px; }
body .btn--sm .btn__icon svg{ width: 12px; height: 12px; }

/* Ghost buttons on dark grounds carry the same affordance, inverted */
body .btn--ghost-invert .btn__icon{ background: rgba(255,255,255,0.16); color: #fff; }
body .btn--ghost-invert:hover .btn__icon{ background: var(--deep-blue); color: #fff; }
body .btn--ghost-invert:hover .btn__icon svg{ transform: rotate(45deg); }

/* Text link with chevron — the third tier. Never a third button colour. */
body .link-arrow{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--azure-deep);
}
body .link-arrow svg{ transition: transform var(--dur) var(--ease); flex: none; }
body .link-arrow:hover svg{ transform: translateX(3px); }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

body .site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: var(--shadow-header);
}

body .header-inner{
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

body .logo{ display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex: none; }
body .logo__mark{
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--azure); color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em;
}
/* 1.97 ratio lockup: hexagon + stacked wordmark. Below ~50px the
   wordmark stops being legible, so it does not shrink further. */
body .logo__img{ height: 54px; width: auto; }
/* Reversed lockup. Hidden unless a theme opts into a transparent header. */
body .logo__img--light{ display: none; }
@media (max-width: 560px) { body .logo__img{ height: 44px; } }
body .logo__text{ display: flex; flex-direction: column; line-height: 1.1; }
body .logo__name{ font-weight: 700; font-size: 1.0625rem; color: var(--deep-blue); letter-spacing: -0.01em; }
body .logo__sub{ font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

/* Desktop nav ------------------------------------------------------------- */

body .nav{ margin-left: auto; }
body .nav__list{ display: flex; align-items: center; gap: var(--sp-1); }

body .nav__link{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
body .nav__link:hover, body .nav__link[aria-expanded="true"]{ color: var(--azure-deep); background: var(--pale-blue); }
body .nav__link[aria-current="page"]{ color: var(--azure-deep); font-weight: 600; }

body .nav__chev{ transition: transform var(--dur) var(--ease); flex: none; }
body .nav__link[aria-expanded="true"] .nav__chev{ transform: rotate(180deg); }

/* Services dropdown — lists every service, deliberately. SEO architecture. */
body .nav__item{ position: relative; }
body .dropdown{
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(620px, 92vw);
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
body .nav__item.is-open .dropdown{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

body .dropdown__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-5); }
body .dropdown__link{
  display: block;
  padding: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body .dropdown__link:hover{ background: var(--pale-blue); color: var(--azure-deep); }
body .dropdown__foot{
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}

/* Header actions ---------------------------------------------------------- */

body .header-actions{ display: flex; align-items: center; gap: var(--sp-3); flex: none; }

body .header-phone{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--deep-blue);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  min-height: 44px;
}
body .header-phone:hover{ color: var(--azure-deep); background: var(--pale-blue); }
body .header-phone svg{ flex: none; color: var(--azure); }

body .nav-toggle{
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--deep-blue);
}
body .nav-toggle:hover{ background: var(--pale-blue); }

@media (max-width: 1080px) {
  body .nav, body .header-phone{ display: none; }
  body .nav-toggle{ display: flex; }
  body .header-actions{ margin-left: auto; }
}
@media (max-width: 560px) {
  body .logo__sub{ display: none; }
}

/* Mobile drawer ----------------------------------------------------------- */

body .drawer{
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  overflow: hidden;
}
body .drawer.is-open{ transform: translateX(0); }
body .drawer__head{
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
body .drawer__body{ overflow-y: auto; padding: var(--sp-5) var(--gutter) var(--sp-9); }
body .drawer__link{
  display: block;
  padding: var(--sp-4) 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-soft);
}
body .drawer__link:hover{ color: var(--azure-deep); }

body .drawer__group > button{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) 0;
  font-size: 1.125rem; font-weight: 500; text-align: left;
  border-bottom: 1px solid var(--hairline-soft);
}
body .drawer__group > button svg{ transition: transform var(--dur) var(--ease); }
body .drawer__group > button[aria-expanded="true"] svg{ transform: rotate(180deg); }
body .drawer__sub{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
body .drawer__group.is-open .drawer__sub{ grid-template-rows: 1fr; }
body .drawer__sub > div{ overflow: hidden; }
body .drawer__sub a{
  display: block;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  font-size: var(--fs-body);
  color: var(--ink-muted);
  text-decoration: none;
}
body .drawer__sub a:hover{ color: var(--azure-deep); }
/* the "All treatments" / "All conditions" link closing each group */
body .drawer__sub a.drawer__all{ font-weight: 600; color: var(--azure-deep); }
body .drawer__actions{ margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }

body.is-locked{ overflow: hidden; }

/* Mobile sticky booking bar: removed at the client's request (it took screen
   height on phones). Booking stays one tap away via the header button. */

/* --------------------------------------------------------------------------
   HERO — left-aligned asymmetric, 7/5 split. Never centred, never a text wash.
   -------------------------------------------------------------------------- */

body .hero{
  position: relative;
  background: var(--deep-blue);
  color: #fff;
  overflow: hidden;
}
body .hero__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
@media (min-width: 960px) {
  body .hero__inner{ grid-template-columns: 7fr 5fr; gap: var(--sp-9); }
}
body .hero__copy{ position: relative; z-index: 2; max-width: 40ch; }
body .hero h1{ color: #fff; }
body .hero__sub{ margin-top: var(--sp-5); font-size: var(--fs-body-lg); color: rgba(255,255,255,0.85); line-height: 1.55; }
body .hero__actions{ margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

body .hero__media{ position: relative; z-index: 2; }
body .hero__media img, body .hero__figure{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #16456A, #0C2E47);
}
body .hero__figure{ display: grid; place-items: center; color: rgba(255,255,255,0.5); font-size: var(--fs-small); text-align: center; padding: var(--sp-5); }

/* Compact hero for inner templates */
body .hero--inner .hero__inner{ padding-block: clamp(2.5rem, 5vw, 4rem); }
body .hero--inner .hero__copy{ max-width: 48ch; }

/* Breadcrumbs */
body .crumbs{ font-size: var(--fs-small); color: rgba(255,255,255,0.7); margin-bottom: var(--sp-4); }
body .crumbs a{ color: rgba(255,255,255,0.85); text-decoration: none; }
body .crumbs a:hover{ color: #fff; text-decoration: underline; }
body .crumbs span{ margin-inline: var(--sp-2); opacity: 0.5; }

/* Inline review rating (location + practitioner heroes) */
body .rating{ display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); }
body .rating__stars{ display: inline-flex; gap: 2px; color: #FFB547; }
body .rating__stars svg{ width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   POSITIONING BAR
   -------------------------------------------------------------------------- */

body .positioning{
  background: var(--pale-blue);
  padding-block: clamp(2rem, 5vw, 3.25rem);
  text-align: center;
}
body .positioning p{
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(1.375rem, 3.2vw, 2.125rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--deep-blue);
}
body .positioning strong{ font-weight: 700; }

/* --------------------------------------------------------------------------
   TRUST STRIP
   -------------------------------------------------------------------------- */

body .trust{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-5);
  padding-block: var(--sp-7);
  border-block: 1px solid var(--hairline);
}
body .trust__item{ text-align: center; }
body .trust__figure{
  display: block;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--azure-deep);
  line-height: 1.1;
}
body .trust__label{ display: block; margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */

body .card{
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body a.card:hover, body .card--link:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(17, 136, 207, 0.35);
}
body .card h3{ margin-bottom: var(--sp-2); }
body .card p{ font-size: var(--fs-body); color: var(--ink-muted); }
body .card__foot{ margin-top: auto; padding-top: var(--sp-4); }

/* Icon-led service card (Melbourne Walking Clinic icon-section reference) */
body .card__icon{
  width: 52px; height: 52px;
  display: grid; place-items: center;
  margin-bottom: var(--sp-4);
  background: var(--pale-blue);
  color: var(--azure-deep);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body a.card:hover .card__icon{ background: var(--azure); color: #fff; }
body .card__icon svg{ width: 26px; height: 26px; }

/* Condition card — compact, text-led */
body .card--condition{ padding: var(--sp-4) var(--sp-5); }
body .card--condition h3{ font-size: 1.0625rem; margin-bottom: var(--sp-1); }

/* Location card — hairline separator, no shadow. Eleven shadows is noise. */
body .loc-card{
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  border-top: 2px solid var(--azure);
  text-decoration: none;
  color: inherit;
}
body .loc-card h3{ font-size: 1.125rem; }
body .loc-card__meta{ font-size: var(--fs-small); color: var(--ink-muted); }
body .loc-card__hours{ font-size: var(--fs-small); font-weight: 600; color: var(--azure-deep); }
body .loc-card__actions{ margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
body .loc-card__tag{
  display: inline-block;
  padding: 0.15em 0.6em;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--pale-blue); color: var(--azure-deep);
  border-radius: var(--radius-pill);
}

/* Person card — team hub + practitioner highlights */
body .person-card{ text-align: left; }
body .person-card__img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, var(--pale-blue), #BFDFF4);
  margin-bottom: var(--sp-4);
}
body .person-card__figure{
  display: grid; place-items: center;
  color: var(--azure-deep); font-size: var(--fs-small); text-align: center; padding: var(--sp-4);
}
body .person-card__role{ font-size: var(--fs-small); color: var(--azure-deep); font-weight: 600; }
body .person-card__creds{ font-size: 0.8125rem; color: var(--ink-muted); margin-top: var(--sp-2); }

/* Category card — Adult / Children's / Sports */
body .cat-card{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  padding: var(--sp-6);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(12,46,71,0.25) 0%, rgba(12,46,71,0.88) 100%), var(--azure);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body .cat-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lift); color: #fff; }
body .cat-card h3{ color: #fff; }
body .cat-card p{ color: rgba(255,255,255,0.85); font-size: var(--fs-body); margin-top: var(--sp-2); }

/* Chips — special interests, clinic days, service tags */
body .chips{ display: flex; flex-wrap: wrap; gap: var(--sp-2); }
body .chip{
  display: inline-block;
  padding: 0.4em 0.9em;
  font-size: var(--fs-small);
  font-weight: 500;
  background: var(--pale-blue);
  color: var(--deep-blue);
  border-radius: var(--radius-pill);
  text-decoration: none;
}
body a.chip:hover{ background: var(--azure); color: #fff; }

/* --------------------------------------------------------------------------
   NBA PROCESS BAND — Assess, Diagnose, Treat
   The one place a three-across layout is correct: the content is a sequence
   and the connecting rule communicates order.
   -------------------------------------------------------------------------- */

body .nba{ position: relative; }
body .nba__steps{
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  margin-top: var(--sp-8);
}
@media (min-width: 820px) {
  body .nba__steps{ grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  body .nba__steps::before{
    content: "";
    position: absolute;
    left: 12%; right: 12%;
    top: calc(var(--sp-8) + 26px);
    height: 2px;
    background: rgba(255,255,255,0.22);
  }
}
body .nba__step{ position: relative; }
body .nba__num{
  width: 54px; height: 54px;
  display: grid; place-items: center;
  margin-bottom: var(--sp-4);
  background: var(--azure);
  color: #fff;
  border-radius: 50%;
  font-weight: 700; font-size: 1.125rem;
  border: 4px solid var(--deep-blue);
}
body .nba__step h3{ margin-bottom: var(--sp-2); }
body .nba__step p{ color: rgba(255,255,255,0.82); font-size: var(--fs-body); }

/* --------------------------------------------------------------------------
   ACCORDION — treatments (location) and FAQs
   Height animates via grid-template-rows, never max-height guessing.
   -------------------------------------------------------------------------- */

body .accordion{ border-top: 1px solid var(--hairline); }
body .acc-item{ border-bottom: 1px solid var(--hairline); }

body .acc-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) var(--sp-4);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: left;
  color: var(--deep-blue);
  background: var(--surface-alt);
  transition: background-color var(--dur) var(--ease);
}
body .accordion--plain .acc-trigger{ background: transparent; padding-inline: 0; }
body .acc-trigger:hover{ background: #CFE8F8; }
body .accordion--plain .acc-trigger:hover{ background: transparent; color: var(--azure-deep); }
body .acc-trigger svg{ flex: none; transition: transform var(--dur) var(--ease); color: var(--azure-deep); }
body .acc-trigger[aria-expanded="true"] svg{ transform: rotate(180deg); }
body .acc-trigger[aria-expanded="true"]{ background: #fff; }
body .accordion--plain .acc-trigger[aria-expanded="true"]{ background: transparent; }

body .acc-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
body .acc-item.is-open .acc-panel{ grid-template-rows: 1fr; }
body .acc-panel > div{ overflow: hidden; }
body .acc-panel__inner{ padding: var(--sp-4) var(--sp-4) var(--sp-6); }
body .accordion--plain .acc-panel__inner{ padding-inline: 0; }
body .acc-item.is-open{ border-left: 3px solid var(--azure); }
body .accordion--plain .acc-item.is-open{ border-left: 0; }
body .acc-panel p{ color: var(--ink-muted); max-width: var(--measure); }
body .acc-panel__actions{ margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* --------------------------------------------------------------------------
   CAROUSEL — scroll-snap, no library
   -------------------------------------------------------------------------- */

body .carousel{ position: relative; }
body .carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
}
body .carousel__track > *{ scroll-snap-align: start; }
@media (min-width: 720px)  { body .carousel__track{ grid-auto-columns: minmax(300px, 1fr); } }
@media (min-width: 1100px) { body .carousel__track{ grid-auto-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; } }

body .carousel__nav{ display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
body .carousel__btn{
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 2px solid var(--hairline);
  border-radius: 50%;
  color: var(--deep-blue);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
body .carousel__btn:hover{ border-color: var(--azure-deep); background: var(--pale-blue); }
body .carousel__btn[disabled]{ opacity: 0.35; cursor: default; }
@media (min-width: 1100px) { body .carousel__nav{ display: none; } }

/* --------------------------------------------------------------------------
   REVIEWS
   -------------------------------------------------------------------------- */

body .review{
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
body .review__stars{ color: #FFB547; display: flex; gap: 2px; margin-bottom: var(--sp-3); }
body .review__stars svg{ width: 18px; height: 18px; }
body .review blockquote{ font-size: var(--fs-body); line-height: 1.6; }
body .review__by{ margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-muted); font-weight: 600; }

/* --------------------------------------------------------------------------
   VISIT BLOCK — address, hours, parking, transport, map
   -------------------------------------------------------------------------- */

body .visit{ display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { body .visit{ grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); } }

body .visit dl{ display: grid; gap: var(--sp-4); }
body .visit dt{
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--azure-deep); margin-bottom: var(--sp-1);
}
body .visit dd{ margin: 0; font-size: var(--fs-body); }

body .hours-table{ width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
body .hours-table th, body .hours-table td{ text-align: left; padding: var(--sp-2) 0; border-bottom: 1px solid var(--hairline-soft); }
body .hours-table th{ font-weight: 500; color: var(--ink-muted); }
body .hours-table td{ text-align: right; font-weight: 600; }
body .hours-table tr.is-today th, body .hours-table tr.is-today td{ color: var(--azure-deep); }

body .map-embed{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  /* the gradient is the empty state; a real embed covers it */
  background: linear-gradient(160deg, #E8F3FA, #CFE4F2);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-5);
  border: 1px solid var(--hairline);
}

/* The iframe fills the container rather than sitting inside the grid centring,
   which would leave it at its intrinsic 300x150 default. */
body .map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
body .map-embed__note{ font-size: var(--fs-small); color: var(--ink-muted); max-width: 36ch; }

/* --------------------------------------------------------------------------
   CTA BAND
   -------------------------------------------------------------------------- */

body .cta-band{
  background: var(--deep-blue);
  color: #fff;
  position: relative;
  overflow: hidden;
}
body .cta-band__inner{
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 4.5rem);
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) { body .cta-band__inner{ grid-template-columns: 1.4fr 1fr; } }
body .cta-band h2{ color: #fff; max-width: 20ch; }
body .cta-band p{ color: rgba(255,255,255,0.82); margin-top: var(--sp-4); max-width: 46ch; }
body .cta-band__actions{ display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 900px) { body .cta-band__actions{ justify-content: flex-end; } }

/* --------------------------------------------------------------------------
   BLOG
   -------------------------------------------------------------------------- */

body .post-card{ padding: 0; overflow: hidden; }
body .post-card__img{
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  background: linear-gradient(160deg, var(--pale-blue), #BFDFF4);
  display: grid; place-items: center; color: var(--azure-deep); font-size: var(--fs-small);
}
body .post-card__body{ padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
body .post-card__cat{
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--azure-deep); margin-bottom: var(--sp-2);
}
body .post-card h3{ font-size: 1.125rem; margin-bottom: var(--sp-2); }

body .pagination{ display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-8); }
body .pagination a, body .pagination span{
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  padding-inline: var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; color: var(--ink);
}
body .pagination a:hover{ border-color: var(--azure-deep); background: var(--pale-blue); color: var(--azure-deep); }
body .pagination [aria-current="page"]{ background: var(--azure-deep); border-color: var(--azure-deep); color: #fff; }

/* Article layout */
body .article{ display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 1000px) { body .article{ grid-template-columns: minmax(0,1fr) 300px; gap: var(--sp-9); } }
body .article__aside{ align-self: start; position: sticky; top: calc(var(--header-h) + var(--sp-5)); display: grid; gap: var(--sp-5); }
body .aside-box{ padding: var(--sp-5); background: var(--surface-alt); border-radius: var(--radius-card); }
body .aside-box h3{ font-size: 1rem; margin-bottom: var(--sp-3); }
body .aside-box ul{ display: grid; gap: var(--sp-2); }
body .aside-box a{ font-size: var(--fs-small); }

body .byline{ display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--ink-muted); }
body .byline__avatar{
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--pale-blue); display: grid; place-items: center;
  color: var(--azure-deep); font-weight: 700; font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   ASSOCIATION LOGOS
   -------------------------------------------------------------------------- */

body .assoc{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-6) var(--sp-8);
}
body .assoc__item{
  font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-muted); font-size: var(--fs-small);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   FOOTER — charcoal double-footer. SEO architecture. Do not trim.
   -------------------------------------------------------------------------- */

body .site-footer{ background: var(--charcoal); color: rgba(255,255,255,0.75); }
body .site-footer a{ color: rgba(255,255,255,0.75); text-decoration: none; }
body .site-footer a:hover{ color: #fff; text-decoration: underline; }
/* The underline is for text links only. .site-footer a:hover is (0,2,1) and was
   catching the pill buttons too; this is (0,3,0), so it wins on class count
   rather than source order. */
body .site-footer .btn:hover{ text-decoration: none; }
body .site-footer h3{
  color: #fff; font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sp-4);
}

/* Lifted off the footer's charcoal so the locations read as their own band.
   Deep Blue was the obvious pick and measured 1.08:1 against #232629 -- the
   boundary simply was not visible. #2F353A is 1.22:1, which is. */
body .footer-top{
  background: #2F353A;
  padding-block: var(--sp-9);
  border-bottom: 1px solid var(--hairline-invert);
}
body .footer-locations{
  display: grid; gap: var(--sp-4) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: var(--sp-5);
}
body .footer-loc{ font-size: var(--fs-small); line-height: 1.5; }
body .footer-loc strong{ display: block; color: #fff; font-weight: 600; font-size: var(--fs-body); }
body .footer-loc span{ display: block; opacity: 0.7; }
body .footer-loc a.footer-loc__gbp{ font-size: 0.8125rem; }

/* "Stay connected" band. The reference runs it on a pale tint; on our charcoal
   footer the same idea is an azure-tinted panel lifted off the ground. */
body .footer-connect{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  /* sits between the link columns and the copyright bar, so the spacing hangs
     below it -- .footer-main already supplies the gap above */
  margin-bottom: var(--sp-8);
  padding: var(--sp-6) var(--sp-7);
  background: rgba(17, 136, 207, 0.16);
  border-radius: var(--radius-card);
}
body .footer-connect__title{
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}
body .footer-social--band a{
  /* --azure-deep, not --azure: white glyphs read 4.80:1 on it against 3.86:1
     on the brighter brand blue. DESIGN.md already carries this substitution. */
  background: var(--azure-deep);
  border-color: transparent;
  color: #fff;
}
body .footer-social--band a:hover{ background: #fff; color: var(--azure-deep); }

body .footer-main{
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-block: var(--sp-9);
}
/* Brand leads and the booking column closes, with the three link columns
   between. Explicit tracks: auto-fit would give all five equal width and
   squeeze both prose columns into ribbons. */
@media (min-width: 1100px) {
  body .footer-main{
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) 1.4fr;
    column-gap: var(--sp-7);
  }
}

/* chevron bullets on the link lists, as in the reference */
body .footer-col ul li{ position: relative; padding-left: 1.1em; }
body .footer-col ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-top: 1.6px solid var(--azure);
  border-right: 1.6px solid var(--azure);
  transform: rotate(45deg);
}

body .footer-col--book{ display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
/* Full width, smaller label, and never wrapping. Sizing the column alone was
   not enough: theme.css re-declares .btn with its own padding shorthand and a
   1rem label, so the button kept breaking "(02) 9545 4378" across two lines
   whenever the column ran narrow -- including at the 190px auto-fit floor
   below 1100px. white-space stops that at any width; the two-class selector
   clears theme.css's single-class .btn on specificity rather than order. */
body .footer-col--book .btn{
  width: 100%;
  padding-inline: var(--sp-4);
  font-size: var(--fs-small);
  white-space: nowrap;
}
body .footer-col__blurb{ font-size: var(--fs-small); margin: 0; }
body .footer-phone{
  background: transparent;
  border: 1px solid var(--hairline-invert);
  color: #fff;
  gap: var(--sp-2);
}
body .footer-phone:hover{ background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); }
/* Brand column leads, wider than the link columns. Explicit tracks rather than
   auto-fit here: with five children auto-fit gives them all equal width and the
   blurb ends up in a 190px ribbon. */
@media (min-width: 1000px) {
  body .footer-main{ grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
}

body .footer-brand{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
body .footer-brand__logo{ width: clamp(150px, 14vw, 190px); height: auto; }
body .footer-brand__blurb{ font-size: var(--fs-small); max-width: 34ch; margin: 0; }

/* Contact rows lead with an icon, like the reference. The icon is decorative:
   each row already says what it is in text. */
/* These rows used to sit in a .footer-col, where .footer-col ul supplied the
   small size. They live in the brand column now, so they were inheriting the
   18px body size and out-sizing the blurb directly above them. */
body .footer-contact{
  font-size: var(--fs-small);
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}
body .footer-contact li{ display: flex; align-items: flex-start; gap: var(--sp-3); line-height: 1.5; }
body .footer-ic{ flex: none; margin-top: 2px; color: var(--azure); }
/* The global reset is ul[class] and these lists carry no class, so they kept
   their default discs -- which then sat next to the chevrons as a second
   bullet. Reset locally rather than widening the global selector. */
body .footer-col ul{
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* copyright left, legal right -- the socials moved up into the connect band */
body .footer-bottom{
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--hairline-invert);
  font-size: var(--fs-small);
}
body .footer-social{ display: flex; gap: var(--sp-2); }
body .footer-social a{
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--hairline-invert); border-radius: 50%;
}
body .footer-social a:hover{ background: var(--azure); border-color: var(--azure); color: #fff; }
body .footer-legal{ display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Google "Add to preferred sources" — official embed goes here at build time.
   This is the reserved slot, deliberately not a fake button. */
body .preferred-source{
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px dashed var(--hairline-invert);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}

@media (max-width: 560px) {
  body .footer-locations{ grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); }
  body .footer-loc span{ display: none; }   /* keep names + links, drop addresses */
}