/* ==========================================================================
   Birdie Central — shared stylesheet
   Chrome only: reset, tokens, header, footer, utilities.
   Section-specific styles live with their section in /sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  --bc-graphite:  #2A2A2A;   /* primary / backgrounds */
  --bc-copper:    #C84F36;   /* accent — primary brand colour */
  --bc-gold:      #F7B32B;   /* highlight */

  --bc-ink:       #2A2A2A;
  --bc-body:      #777777;
  --bc-muted:     #AAAAAA;
  --bc-line:      #E2E2E0;
  --bc-surface:   #FFFFFF;
  --bc-surface-2: #EEF0F2;
  --bc-page:      #FFFFFF;

  --bc-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Two widths, because production uses two:
       chrome (header/footer) sits in a ~1200px column
       section content sits in a ~1060px column
     They are deliberately not aligned on the live site. Measured off the DOM. */
  --bc-max:       1060px;
  --bc-max-chrome: 1200px;
  --bc-gutter:  24px;
  --bc-radius:  14px;
  --bc-header-h: 99px;   /* measured on production */

  --bc-shadow:    0 4px 20px rgba(0,0,0,.06);
  --bc-shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --bc-ease: .25s cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--bc-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bc-ink);
  background: var(--bc-page);
  -webkit-font-smoothing: antialiased;
}
body.bc-nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
/* Only reset lists that carry a class, so ported section markup keeps its
   intended bullets. The site chrome below is reset explicitly. */
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
.bc-nav ul, .bc-footer ul, .bc-social, .bc-footer__legal, .bc-footer__links {
  list-style: none; margin: 0; padding: 0;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; }

:focus-visible { outline: 3px solid var(--bc-copper); outline-offset: 2px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   Skip link + staging flag
   -------------------------------------------------------------------------- */
.bc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--bc-graphite); color: #fff;
  padding: 12px 20px; font-weight: 700; text-decoration: none;
}
.bc-skip:focus { left: 8px; top: 8px; }

.bc-staging-flag {
  background: var(--bc-gold); color: var(--bc-graphite);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-align: center; padding: 7px 16px;
}
.bc-staging-flag code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,.12); padding: 1px 5px; border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.bc-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bc-line);
}
.bc-header__inner {
  max-width: var(--bc-max-chrome); margin: 0 auto;
  padding: 0 var(--bc-gutter);
  min-height: var(--bc-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.bc-header__logo { flex-shrink: 0; display: block; }
.bc-header__logo img { width: 225px; height: auto; }  /* measured on production */

.bc-nav ul { display: flex; align-items: center; gap: 28px; }
.bc-nav a {
  font-size: 14px; font-weight: 500; text-decoration: none;
  color: var(--bc-ink); padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--bc-ease), border-color var(--bc-ease);
}
.bc-nav a:hover { color: var(--bc-copper); }
.bc-nav a[aria-current="page"] { border-bottom-color: var(--bc-copper); font-weight: 600; }

.bc-nav__cta a {
  background: var(--bc-copper); color: #fff;
  padding: 9px 18px; border-radius: 8px; font-weight: 700;
  border-bottom: 0;
}
.bc-nav__cta a:hover { background: #b4442e; color: #fff; }

.bc-header__toggle {
  display: none; width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.bc-header__toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--bc-ink); transition: transform var(--bc-ease), opacity var(--bc-ease);
}
.bc-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bc-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bc-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  /* backdrop-filter on an ancestor establishes a containing block for
     position:fixed descendants. With it on .bc-header, the mobile nav panel
     was positioned against the HEADER rather than the viewport, so it opened
     as a 48px sliver instead of a full-screen sheet. Dropping the effect at
     mobile widths is the fix; the frosted header is a desktop nicety and the
     panel is opaque white anyway once open. */
  .bc-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }

  .bc-header__toggle { display: flex; }
  /* The closed panel must stay INSIDE the viewport.
     It previously used transform: translateX(100%) to sit off-canvas, which
     added 400px of horizontal scroll on a 430px screen — position:fixed
     elements are not clipped by overflow-x on html or body, so the usual
     remedy does not work. Hiding it in place avoids the problem entirely,
     and visibility:hidden also takes the links out of the tab order while
     the menu is closed. */
  .bc-nav {
    position: fixed; inset: var(--bc-header-h) 0 0 0;
    background: #fff; padding: 24px var(--bc-gutter);
    overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--bc-ease), visibility var(--bc-ease);
  }
  .bc-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .bc-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .bc-nav li { border-bottom: 1px solid var(--bc-line); }
  .bc-nav a { display: block; padding: 16px 0; font-size: 16px; border-bottom: 0; }
  .bc-nav a[aria-current="page"] { color: var(--bc-copper); }
  .bc-nav__cta { border-bottom: 0; margin-top: 20px; }
  .bc-nav__cta a { text-align: center; padding: 14px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.bc-footer { background: var(--bc-graphite); color: #fff; padding: 64px 0 0; }
.bc-footer__inner {
  max-width: var(--bc-max-chrome); margin: 0 auto; padding: 0 var(--bc-gutter);
  display: grid; grid-template-columns: 1.5fr .9fr .9fr 1.1fr 1.1fr; gap: 36px;
}
@media (max-width: 1100px) { .bc-footer__inner { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (max-width: 900px)  { .bc-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .bc-footer__inner { grid-template-columns: 1fr; } }

.bc-footer__brand img { width: 190px; }
.bc-footer__brand p {
  font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.66);
  margin: 16px 0 20px; max-width: 30ch;
}

.bc-footer__heading {
  font-size: 15px; font-weight: 700; color: var(--bc-copper);
  margin-bottom: 16px;
}
.bc-footer__subheading {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bc-copper); margin: 22px 0 10px;
}
.bc-footer__links li + li { margin-top: 10px; }
.bc-footer__links a {
  font-size: 13px; color: rgba(255,255,255,.8);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.25);
  transition: color var(--bc-ease), text-decoration-color var(--bc-ease);
}
.bc-footer__links a:hover { color: #fff; text-decoration-color: var(--bc-copper); }

.bc-footer__open { font-size: 27px; font-weight: 800; letter-spacing: -.5px; }
.bc-footer__open-note { font-size: 12px; color: rgba(255,255,255,.6); }
.bc-footer__open-note em { color: #fff; font-style: italic; }
/* B-4: tagline replaces the retired "industrial comfort" description line. */
.bc-footer__tagline { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); font-style: italic; }
/* B-3: the differentiator, in gold so it reads as a claim and not body copy. */
.bc-footer__access-note { margin-top: 10px; font-size: 11.5px; font-weight: 700; color: var(--bc-gold); }

.bc-hours { width: 100%; max-width: 240px; font-size: 12.5px; }
.bc-hours th {
  text-align: left; font-weight: 500;
  color: rgba(255,255,255,.66); padding: 5px 0;
}
.bc-hours td { text-align: right; color: #fff; padding: 5px 0; white-space: nowrap; }

.bc-social { display: flex; gap: 14px; margin-bottom: 22px; }
.bc-social a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; background: rgba(255,255,255,.08);
  transition: background var(--bc-ease);
}
.bc-social a:hover { background: var(--bc-copper); }
.bc-social svg { width: 17px; height: 17px; fill: #fff; }

.bc-footer__chamber img { width: 148px; opacity: .95; }

.bc-footer__bar {
  margin-top: 56px; border-top: 1px solid rgba(255,255,255,.12);
  padding: 20px var(--bc-gutter);
}
.bc-footer__bar > * { max-width: var(--bc-max-chrome); margin: 0 auto; }
.bc-footer__bar p { font-size: 12px; color: rgba(255,255,255,.5); }
/* margin: 10px auto 0 — not margin-top alone, or the `> * { margin: 0 auto }`
   centring above is overridden and the legal links jam against the viewport edge. */
.bc-footer__legal {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px auto 0;
}
.bc-footer__legal a {
  font-size: 12px; color: rgba(255,255,255,.5); text-decoration: none;
}
.bc-footer__legal a:hover { color: #fff; text-decoration: underline; }


/* --------------------------------------------------------------------------
   Shared page furniture
   -------------------------------------------------------------------------- */
.bc-container { max-width: var(--bc-max); margin: 0 auto; padding: 0 var(--bc-gutter); }

/* Page hero — replaces the builder-native hero blocks.
   Real <h1> in real HTML, which is the entire point of this rebuild. */
.bc-hero {
  position: relative; display: grid; align-items: center;
  min-height: clamp(420px, 62vh, 660px);   /* production ~652px */
  color: #fff; overflow: hidden; background: var(--bc-graphite);
}
.bc-hero__media { position: absolute; inset: 0; }
.bc-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.bc-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.66) 45%, rgba(0,0,0,.50) 100%);
}
.bc-hero__inner {
  position: relative; z-index: 1;
  max-width: var(--bc-max); margin: 0 auto; width: 100%;
  padding: 56px var(--bc-gutter);
}
/* Wide enough that "Your Indoor Golf Clubhouse," sets on one or two lines as it
   does on the live site, rather than breaking after every two words. */
.bc-hero__content { max-width: 640px; }
.bc-hero__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--bc-copper); margin-bottom: 12px;
}
.bc-hero h1 {
  font-size: clamp(34px, 5.2vw, 64px); font-weight: 600;
  line-height: 1.08; letter-spacing: -1px; margin-bottom: 16px;
}
.bc-hero h1 .bc-accent { color: var(--bc-copper); display: block; }
.bc-hero__sub { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.88); max-width: 42ch; }
.bc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* B-1: setup requirement, placed below the CTAs. Sunflower gold rather than
   copper — gold on a dark hero clears AA comfortably where copper does not,
   and this is the site's first purposeful use of the third brand colour (G-3). */
.bc-hero__note {
  margin-top: 18px; max-width: 46ch;
  font-size: 12.5px; line-height: 1.6; font-weight: 600;
  color: var(--bc-gold, #F7B32B);
}

.bc-btn {
  display: inline-block; padding: 13px 24px; border-radius: 8px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background var(--bc-ease), border-color var(--bc-ease), color var(--bc-ease);
}
.bc-btn--primary { background: var(--bc-copper); color: #fff; }
.bc-btn--primary:hover { background: #b4442e; }
.bc-btn--ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.bc-btn--ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; }

/* Legal / long-form pages */
.bc-doc { max-width: 820px; margin: 0 auto; padding: 64px var(--bc-gutter) 88px; }
.bc-doc h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -.5px; margin-bottom: 8px; }
.bc-doc h2 { font-size: 20px; font-weight: 700; margin: 36px 0 12px; }
.bc-doc h3 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.bc-doc p, .bc-doc li { font-size: 14.5px; line-height: 1.75; color: #555; }
.bc-doc ul, .bc-doc ol { margin: 12px 0 12px 20px; }
.bc-doc li + li { margin-top: 6px; }
.bc-doc a { color: var(--bc-copper); font-weight: 600; }
.bc-doc__updated { font-size: 13px; color: var(--bc-muted); margin-bottom: 32px; }

.bc-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Full-bleed section bands
   --------------------------------------------------------------------------
   On the builder site these background colours came from Hostinger's own
   section wrapper, NOT from the embedded HTML — the embeds were transparent.
   Porting the embeds alone therefore lost every band, which left white text
   on white in the memberships and events sections. Colours sampled from the
   live DOM.
   -------------------------------------------------------------------------- */
.bc-band { width: 100%; }
.bc-band--grey   { background: #EEF0F2; }
.bc-band--dark   { background: #2A2A2A; }
.bc-band--copper { background: #C84F36; }
.bc-band--white  { background: #FFFFFF; }

/* Buttons must win over the long-form link styling in .bc-doc.
   Without this the 404 page's primary button renders copper-on-copper,
   i.e. an apparently blank orange rectangle. */
.bc-doc a.bc-btn--primary,
a.bc-btn--primary { color: #fff; font-weight: 700; text-decoration: none; }
.bc-doc a.bc-btn--ghost,
a.bc-btn--ghost   { color: #fff; font-weight: 700; text-decoration: none; }


/* Centred hero variant — /events-and-parties centres its hero on production. */
.bc-hero--center .bc-hero__content { max-width: 760px; margin: 0 auto; text-align: center; }
.bc-hero--center .bc-hero__sub { margin: 0 auto; }
.bc-hero--center .bc-hero__actions { justify-content: center; }
.bc-hero--center::after {
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 100%);
}


/* --------------------------------------------------------------------------
   Mobile refinements
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  /* Desktop hero min-height is ~652px to match production; on a 900px-tall
     phone that eats three quarters of the first screen before any content. */
  .bc-hero { min-height: clamp(340px, 52vh, 440px); }
  .bc-hero__inner { padding: 36px var(--bc-gutter); }
  .bc-hero__content { max-width: 100%; }
  .bc-hero h1 { font-size: clamp(28px, 8vw, 34px); }
  .bc-hero__sub { font-size: 14px; }
  .bc-hero__actions { gap: 10px; }
  .bc-btn { padding: 12px 18px; font-size: 13.5px; }

  /* Reduce the dark-left gradient at phone width — the text block spans the
     full width there, so the directional wash just muddies the photo. */
  .bc-hero::after {
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 100%);
  }

  .bc-footer { padding-top: 44px; }
  .bc-footer__bar { margin-top: 36px; }
}


/* --------------------------------------------------------------------------
   Hero variants — full-height landing, and pinned imagery
   --------------------------------------------------------------------------
   The builder site pinned the hero photograph: it stayed put while the page
   scrolled up and over it. Home additionally filled the whole landing view.

   Implementation notes:
   - The media and scrim are position:fixed, sitting at z-index 0 and 1.
   - Hero copy sits at z-index 2, everything after the hero at z-index 3, so
     each section scrolls over the pinned image and hides it.
   - That only works if the sections are OPAQUE. Any section without a colour
     band would let the photo show through, which is why the two un-banded
     home sections are wrapped in .bc-band--white.
   - Only position/z-index are set on following sections — deliberately no
     background — so the band colours keep winning on specificity.
   -------------------------------------------------------------------------- */

.bc-hero--full {
  min-height: calc(100vh - var(--bc-header-h));
}

.bc-hero--fixed { background: transparent; }

.bc-hero--fixed .bc-hero__media {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 0;
}
.bc-hero--fixed .bc-hero__media img { height: 100vh; }

.bc-hero--fixed::after {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 1;
}

.bc-hero--fixed .bc-hero__inner { position: relative; z-index: 2; }

/* Everything after the hero scrolls over the pinned image, on ONE opaque
   layer. Doing it per-section meant any section without a colour band let the
   photo bleed through — which is exactly what happened on the subpages. */
.bc-below-hero { position: relative; z-index: 3; background: var(--bc-page); }
.bc-footer     { position: relative; z-index: 3; }

/* The pinned image is position:fixed at z-index 0, which paints it ABOVE any
   static, unpositioned element — including the staging banner, which sits
   above the header in normal flow. That is what put a strip of hero image
   across the very top of the page. Lifting the banner onto its own layer
   fixes it. (Staging only; the banner is absent in production.) */
.bc-staging-flag { position: relative; z-index: 101; }

/* Raise band specificity so the rule above can never out-rank a band colour. */
.bc-band.bc-band--grey   { background: #EEF0F2; }
.bc-band.bc-band--dark   { background: #2A2A2A; }
.bc-band.bc-band--copper { background: #C84F36; }
.bc-band.bc-band--white  { background: #FFFFFF; }

/* Pinned backgrounds are expensive and jump around on iOS Safari, where the
   viewport resizes as the URL bar hides. Fall back to a normal cover image. */
@media (max-width: 860px) {
  .bc-hero--fixed .bc-hero__media,
  .bc-hero--fixed::after { position: absolute; height: 100%; }
  .bc-hero--fixed .bc-hero__media img { height: 100%; }
  .bc-hero--full { min-height: clamp(420px, 72vh, 620px); }
}

/* --------------------------------------------------------------------------
   Blog — "The Clubhouse Read"
   --------------------------------------------------------------------------
   Migrated from the blog subdomain, which had its own stylesheet. Rewritten
   here against the site's own tokens rather than porting that CSS, so the
   blog looks like part of the site instead of a bolted-on second design.
   -------------------------------------------------------------------------- */

.bc-blog-hero { background: #EEF0F2; padding: 64px 0 52px; }
.bc-blog-hero__inner { max-width: 820px; margin: 0 auto; padding: 0 var(--bc-gutter); }
.bc-blog-hero__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--bc-copper); margin-bottom: 12px;
}
.bc-blog-hero h1 {
  font-size: clamp(30px, 5vw, 44px); font-weight: 800;
  letter-spacing: -.7px; line-height: 1.12; color: var(--bc-ink);
}
.bc-blog-hero__dek {
  font-size: 15.5px; line-height: 1.7; color: #666;
  margin-top: 14px; max-width: 62ch;
}
.bc-blog-hero__rule {
  border: 0; height: 3px; width: 56px; background: var(--bc-copper);
  margin: 26px 0 0; border-radius: 2px;
}

.bc-blog-list { padding: 56px 0 80px; }
.bc-blog-list__inner {
  max-width: 820px; margin: 0 auto; padding: 0 var(--bc-gutter);
  display: grid; gap: 18px;
}
.bc-post-card {
  border: 1px solid var(--bc-line); border-radius: var(--bc-radius);
  background: #fff; transition: border-color var(--bc-ease), box-shadow var(--bc-ease);
}
.bc-post-card:hover { border-color: #ccc; box-shadow: var(--bc-shadow); }
.bc-post-card__link { display: block; padding: 28px 30px; text-decoration: none; }
.bc-post-card__pillar {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--bc-copper); margin-bottom: 10px;
}
.bc-post-card h2 {
  font-size: 21px; font-weight: 800; line-height: 1.3;
  color: var(--bc-ink); letter-spacing: -.2px;
}
.bc-post-card__dek { font-size: 14.5px; line-height: 1.7; color: #777; margin-top: 10px; }
.bc-post-card__meta {
  font-size: 12.5px; color: var(--bc-muted); margin-top: 16px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bc-post-card__go { color: var(--bc-copper); font-weight: 700; margin-left: auto; }

/* ---- Article ---- */
.bc-post { padding: 0 0 80px; }
.bc-post__inner { max-width: 720px; margin: 0 auto; padding: 0 var(--bc-gutter); }
.bc-post__crumbs { padding: 26px 0 0; font-size: 13px; }
.bc-post__crumbs a { color: var(--bc-copper); font-weight: 600; text-decoration: none; }
.bc-post__crumbs a:hover { text-decoration: underline; }

.bc-post__head { padding: 26px 0 32px; border-bottom: 3px solid var(--bc-copper); margin-bottom: 36px; }
.bc-post__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--bc-copper); margin-bottom: 12px;
}
.bc-post__head h1 {
  font-size: clamp(27px, 4.4vw, 38px); font-weight: 800;
  line-height: 1.18; letter-spacing: -.6px; color: var(--bc-ink);
}
.bc-post__meta {
  display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 22px 0 0;
}
.bc-post__meta div { display: flex; flex-direction: column; gap: 2px; }
.bc-post__meta dt {
  font-size: 10px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--bc-muted);
}
.bc-post__meta dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--bc-ink); }
.bc-post__meta dd.is-pillar { color: var(--bc-copper); }

/* Long-form typography for the ported article markup. */
.article-body { font-size: 16.5px; line-height: 1.78; color: #3d3d3d; }
.article-body > * + * { margin-top: 22px; }
.article-body h2 {
  font-size: 23px; font-weight: 800; color: var(--bc-ink);
  letter-spacing: -.3px; line-height: 1.3; margin-top: 44px;
}
.article-body h3 { font-size: 17.5px; font-weight: 700; color: var(--bc-ink); margin-top: 32px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li + li { margin-top: 8px; }
.article-body a { color: var(--bc-copper); font-weight: 600; text-underline-offset: 3px; }
.article-body strong { color: var(--bc-ink); font-weight: 700; }
.article-body img { border-radius: var(--bc-radius); margin: 30px 0; }
.article-body blockquote {
  border-left: 4px solid var(--bc-copper); padding: 4px 0 4px 20px;
  color: #555; font-style: italic;
}
.article-body table { width: 100%; font-size: 14.5px; margin: 26px 0; }
.article-body th, .article-body td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bc-line);
}
.article-body th { font-weight: 700; color: var(--bc-ink); }

.bc-post__cta {
  margin-top: 52px; background: var(--bc-graphite); color: #fff;
  border-radius: var(--bc-radius); padding: 34px 34px 36px; text-align: center;
}
.bc-post__cta h2 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.bc-post__cta p { font-size: 14.5px; color: rgba(255,255,255,.72); margin-top: 10px; line-height: 1.7; }
.bc-post__cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

@media (max-width: 560px) {
  .bc-post__cta { padding: 26px 22px 28px; }
  .article-body { font-size: 16px; }
}

/* ==========================================================================
   P0-5 — Header CTA + mobile sticky action bar
   ==========================================================================
   Every tap target below is >=44px, per WCAG 2.5.5 / Apple HIG. The old nav
   links were the only actions in the header and several sat under 40px.
   ========================================================================== */

.bc-header__cta { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.bc-header__call {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 6px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  color: var(--bc-graphite);
}
.bc-header__call svg { width: 15px; height: 15px; fill: var(--bc-copper); flex-shrink: 0; }
.bc-header__call:hover { color: var(--bc-copper); }

.bc-header__book {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 20px; white-space: nowrap;
}

/* Tablet and below: the number becomes an icon so the button keeps its room. */
@media (max-width: 1040px) {
  .bc-header__call-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .bc-header__call { padding: 0 10px; }
}

/* 860px is where the nav collapses to a hamburger. The header CTA hands off to
   the sticky bar at exactly the same width, so there is never an in-between
   size showing both a hamburger and a header button fighting for room. */
@media (max-width: 860px) {
  .bc-header__cta { display: none; }
}

/* --- Sticky mobile action bar ------------------------------------------- */
.bc-sticky { display: none; }

@media (max-width: 860px) {
  .bc-sticky {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--bc-graphite);
    border-top: 1px solid rgba(255,255,255,.12);
    /* Clears the iOS home indicator; 0 on everything else. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 14px rgba(0,0,0,.18);
  }
  .bc-sticky__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; padding: 8px 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .2px;
    color: #fff; text-decoration: none;
  }
  .bc-sticky__item svg { width: 18px; height: 18px; fill: currentColor; }
  .bc-sticky__item--primary { background: var(--bc-copper); }
  .bc-sticky__item:active { opacity: .8; }

  /* Reserve the bar's height so it never covers the footer's legal links.
     56px + the safe-area inset, matching the rule above. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* A-11 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* P0-6 — footer email capture. Sits in the Access column under the hours. */
.bc-footer__signup { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }

/* A-10 — visible breadcrumbs. Rendered from the same $crumbs array that
   head.php serialises into BreadcrumbList, so markup and UI cannot diverge. */
.bc-crumbs { border-bottom: 1px solid var(--bc-line); background: #faf9f7; }
.bc-crumbs__inner { max-width: var(--bc-max-chrome); margin: 0 auto; padding: 10px var(--bc-gutter); }
.bc-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bc-crumbs li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.bc-crumbs li + li::before { content: "/"; color: var(--bc-muted); }
.bc-crumbs a { color: #666; text-decoration: none; }
.bc-crumbs a:hover { color: var(--bc-copper); text-decoration: underline; }
.bc-crumbs [aria-current="page"] { color: var(--bc-ink); font-weight: 600; }


/* ==========================================================================
   Mobile space + readability pass
   ==========================================================================
   The whole site — header, footer, hero, breadcrumbs, .bc-container, .bc-doc,
   and every section wrapper — now draws its left/right gutter from a single
   token, --bc-gutter. Shrinking that one value here reclaims screen width on
   phones without touching any per-section rule. Card/button inner padding is
   deliberately NOT tied to this token, so components keep their proportions.

   Targets are the 2026 mobile baselines: >=16px body text (which also stops
   iOS from auto-zooming form fields), a 16px lateral gutter on phones, and
   44px+ tap targets (already met by the header/nav/sticky bar).
   -------------------------------------------------------------------------- */

/* Phones: 24px -> 16px gutter. ~16px reclaimed on each edge, 32px of content
   width back on a 390px screen. */
@media (max-width: 640px) {
  :root { --bc-gutter: 16px; }

  /* iOS zooms any field whose text is under 16px the moment it's focused.
     The form CSS sets 14px (and 12px on the email capture), so pin all
     controls to 16px at phone width. Layout is unaffected — inputs are
     width:100% blocks. */
  input, select, textarea { font-size: 16px; }

  /* Long-form legal/blog body copy sits at 14.5px; lift to 16px so full pages
     of terms/privacy/FAQ text read comfortably on a handset. */
  .bc-doc p, .bc-doc li { font-size: 16px; line-height: 1.75; }
}

/* Very small phones (<=360px, e.g. iPhone SE / Mini): a touch tighter still so
   pricing tables and card grids don't force horizontal scroll. */
@media (max-width: 360px) {
  :root { --bc-gutter: 14px; }
}