/* Below-the-fold styles. Loaded asynchronously via the print-media swap in
   Bccs_Assets::async_global_css() — critical.css already holds everything
   needed for first paint. */

/* ── sections ─────────────────────────────────────────────── */
.bccs-sec{padding:var(--gap) 0;scroll-margin-top:68px}
.bccs-sec--tight{padding-bottom:0}
.bccs-sec--dark{background:var(--band);color:var(--on-band)}
.bccs-sec h1{font-size:var(--t-h1);max-width:22ch}
.bccs-sec h2{font-size:var(--t-h2);max-width:22ch}
.bccs-lede{margin:var(--space-4) 0 0;max-width:54ch;color:var(--on-surface-dim);font-size:var(--t-sm);line-height:var(--lh-body)}
.bccs-sec--dark .bccs-lede{color:var(--on-band-dim)}
.bccs-lang-en .bccs-lede{max-width:48ch}
.bccs-prose{margin-top:var(--space-5);max-width:64ch}
.bccs-prose p{color:var(--on-surface-dim);font-size:var(--t-sm);line-height:var(--lh-body)}
.bccs-prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color var(--t-fast) var(--ease)}
.bccs-prose a:hover{color:var(--on-surface)}
.bccs-sec--dark .bccs-prose a{color:var(--accent-hi)}
.bccs-more{margin-top:var(--space-6)}
.bccs-more .bccs-btn{display:inline-flex;flex:0 0 auto;min-width:12rem}

/* ── breadcrumbs ──────────────────────────────────────────── */
.bccs-crumbs{background:var(--surface-2);border-bottom:1px solid var(--rule);font-size:var(--t-xs)}
.bccs-crumbs ol{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:.75rem 0;list-style:none;color:var(--on-surface-mute)}
.bccs-crumbs li+li::before{content:"›";margin-right:.35rem;opacity:.55}
.bccs-crumbs a{text-decoration:none;color:var(--on-surface-dim)}
.bccs-crumbs a:hover{text-decoration:underline}
.bccs-crumbs [aria-current]{color:var(--on-surface)}

/* ── service list ─────────────────────────────────────────── */

.bccs-svc{list-style:none;margin:var(--space-6) 0 0;padding:0;border-top:1px solid var(--rule)}
.bccs-svc li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1rem;align-items:baseline;
  padding:1rem .15rem;border-bottom:1px solid var(--rule)}
/* minmax(0,1fr) above and this cap stop a long price note from squeezing the
   service name into a mid-word wrap in the two-column list. */
.bccs-price{max-width:11ch;white-space:normal}
.bccs-svc h3{font-size:var(--t-h3);font-weight:600;line-height:var(--lh-tight)}
.bccs-svc h3 a{text-decoration:none}
.bccs-svc h3 a{transition:color var(--t-fast) var(--ease)}
.bccs-svc h3 a:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.bccs-svc p{grid-column:1/-1;margin:0;color:var(--on-surface-mute);font-size:var(--t-xs);line-height:1.6;max-width:52ch}
.bccs-price{font-family:var(--display);font-weight:600;font-size:var(--t-sm);color:var(--on-surface-dim);
  text-align:right;font-variant-numeric:tabular-nums}
.bccs-svc h3{min-width:0}

/* ── ozone block ──────────────────────────────────────────── */
.bccs-ozone{position:relative;overflow:hidden}
.bccs-ozone::before{content:"";position:absolute;inset:-40% -10% auto;height:80%;
  background:radial-gradient(closest-side,rgba(0,194,168,.2),transparent 70%);pointer-events:none}
.bccs-ozone .bccs-wrap{position:relative}
.bccs-ozone ul{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--rule-band)}
.bccs-ozone li{padding:1.05rem 0;border-bottom:1px solid var(--rule-band)}
.bccs-ozone b{display:block;font-family:var(--display);font-weight:600;font-size:var(--t-h3);
  color:var(--accent-hi);margin-bottom:.2rem;line-height:var(--lh-tight)}
.bccs-ozone li>span{color:var(--on-band-dim);font-size:var(--t-sm);line-height:1.65}

/* ── process ──────────────────────────────────────────────── */
.bccs-flow{list-style:none;margin:2.1rem 0 0;padding:0 0 0 2.5rem;position:relative}
.bccs-flow::before{content:"";position:absolute;left:.87rem;top:.6rem;bottom:2.6rem;width:1px;background:var(--rule)}
.bccs-flow li{position:relative;padding-bottom:1.7rem}
.bccs-flow__n{position:absolute;left:-2.5rem;top:0;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:700 var(--t-xs)/1 var(--display)}
.bccs-flow h3{font-size:var(--t-h3);font-weight:600;margin-bottom:.2rem;line-height:var(--lh-tight)}
.bccs-flow p{margin:0;color:var(--on-surface-dim);font-size:var(--t-sm);line-height:1.65}

/* ── facts + ticks ────────────────────────────────────────── */
.bccs-facts{display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;margin:1.75rem 0 0;padding:1.15rem 0;
  border-block:1px solid var(--rule)}
.bccs-facts dt{font-size:var(--t-xs);color:var(--on-surface-mute);margin-bottom:.2rem}
.bccs-facts dd{margin:0;font-family:var(--display);font-weight:600;font-size:var(--t-sm)}
.bccs-ticks{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-3)}
.bccs-ticks li{position:relative;padding-left:1.6rem;font-size:var(--t-sm);color:var(--on-surface-dim);line-height:1.6}
.bccs-ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.4rem;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* ── areas grid ───────────────────────────────────────────── */
.bccs-areas{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-3);grid-template-columns:repeat(2,1fr)}
.bccs-areas a{display:block;padding:1rem;border:1px solid var(--edge);border-radius:var(--r);
  background:var(--surface-2);text-decoration:none;min-height:44px}
.bccs-areas a{transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.bccs-areas a:hover{border-color:var(--accent);transform:translateY(-2px)}
.bccs-areas b{display:block;font-family:var(--display);font-size:var(--t-sm);line-height:1.3}
.bccs-areas span{font-size:var(--t-xs);color:var(--on-surface-mute)}
.bccs-travel{margin-top:1.5rem;padding:1rem 1.15rem;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:var(--r);font-size:var(--t-sm);color:var(--on-surface-dim);max-width:56ch}

/* ── reviews ──────────────────────────────────────────────── */
.bccs-revs{display:grid;gap:var(--space-4);margin-top:var(--space-6)}
.bccs-rev{padding:1.25rem 1.3rem;background:var(--surface-2);border-radius:var(--r);border:1px solid var(--rule);margin:0}
.bccs-rev p{font-size:var(--t-sm);line-height:1.7;margin-bottom:.7rem}
.bccs-rev cite{font-style:normal;font-size:var(--t-xs);color:var(--on-surface-mute)}
.bccs-rev__s{color:var(--accent-text);font-size:var(--t-xs);letter-spacing:.18em;margin-bottom:.5rem}

/* ── hours, address, map ──────────────────────────────────── */
.bccs-visit{display:grid;gap:var(--space-5);margin-top:var(--space-6)}
.bccs-openflag{display:inline-block;margin:0 0 1rem;padding:.35rem .7rem;border-radius:var(--r-pill);
  font:600 var(--t-xs)/1 var(--body)}
.bccs-openflag.is-open{background:var(--accent);color:var(--on-accent)}
.bccs-openflag.is-shut{background:rgba(243,247,245,.12);color:var(--on-band-dim)}
.bccs-hours{list-style:none;margin:0;padding:0;font-size:var(--t-sm)}
.bccs-hours li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--rule-band)}
.bccs-hours li.is-today .bccs-hours__t{color:var(--accent-hi);font-weight:600}
.bccs-hours__t{font-family:var(--display);font-variant-numeric:tabular-nums}
.bccs-addr{font-size:var(--t-sm);line-height:1.75;font-style:normal;color:var(--on-band-dim);margin-top:1.4rem}
.bccs-addr strong{font-family:var(--display);color:var(--on-band);font-size:var(--t-md)}
.bccs-addr a{color:var(--accent-hi);font-weight:600;display:inline-block;padding:.4rem 0;min-height:44px}
.bccs-sec:not(.bccs-sec--dark) .bccs-addr{color:var(--on-surface-dim)}
.bccs-sec:not(.bccs-sec--dark) .bccs-addr a{color:var(--accent-text)}
.bccs-map{border:0;width:100%;aspect-ratio:4/3;border-radius:var(--r);background:var(--map-bg)}

/* ── faq ──────────────────────────────────────────────────── */
.bccs-faq{margin-top:var(--space-6);border-top:1px solid var(--rule)}
.bccs-faq details{border-bottom:1px solid var(--rule)}
.bccs-faq summary{padding:1.05rem .15rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:1rem;align-items:center;font:600 var(--t-h3)/var(--lh-tight) var(--display);min-height:44px}
.bccs-faq summary::-webkit-details-marker{display:none}
.bccs-faq summary{transition:color var(--t-fast) var(--ease)}
.bccs-faq summary:hover{color:var(--accent-text)}
.bccs-faq summary::after{content:"+";font-weight:400;font-size:1.5rem;color:var(--on-surface-mute);line-height:1}
.bccs-faq details[open] summary::after{content:"–"}
.bccs-faq__a{padding:0 .15rem 1.2rem;color:var(--on-surface-dim);font-size:var(--t-sm);line-height:1.7;max-width:58ch}

/* ── pricing table ────────────────────────────────────────── */
/* The table keeps table semantics at every width; the wrapper does the
   scrolling. display:block on the <table> itself drops row/columnheader roles
   in Chrome and WebKit, so screen readers lose the price-to-service pairing. */
.bccs-tablewrap{margin-top:var(--space-6);overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(to right,var(--surface) 30%,transparent),linear-gradient(to left,var(--surface) 30%,transparent) 100% 0,linear-gradient(to right,var(--edge),transparent 12px),linear-gradient(to left,var(--edge),transparent 12px) 100% 0;background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
.bccs-pricetable{width:100%;min-width:30rem;border-collapse:collapse;font-size:var(--t-sm)}
.bccs-pricetable th,.bccs-pricetable td{text-align:left;padding:.85rem .75rem;border-bottom:1px solid var(--rule);vertical-align:top}
.bccs-pricetable thead th{font:600 var(--t-xs)/1.3 var(--body);color:var(--on-surface-mute);
  text-transform:uppercase;letter-spacing:.06em;border-bottom-width:2px}
.bccs-pricetable tbody th{font-family:var(--display);font-weight:600}
.bccs-pricetable tbody th a{text-decoration:none}
.bccs-pricetable tbody th a:hover{text-decoration:underline}
.bccs-pricetable td:last-child{color:var(--on-surface-dim);font-variant-numeric:tabular-nums}

/* ── form ─────────────────────────────────────────────────── */
.bccs-contact{display:grid;gap:var(--space-6);margin-top:var(--space-6)}
.bccs-contact__big{font-family:var(--display);font-size:1.6rem;margin:0 0 1rem}
.bccs-contact__big a{color:var(--accent-text);text-decoration:none}
.bccs-form{display:grid;gap:var(--space-4);max-width:34rem}
.bccs-form__row{display:grid;gap:.35rem}
.bccs-form label{font:600 var(--t-xs)/1.3 var(--body);color:var(--on-surface-dim)}
.bccs-form input,.bccs-form select,.bccs-form textarea{
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
  width:100%;min-height:48px;padding:.7rem .85rem;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface-2);color:var(--on-surface);border-color:var(--edge);
  /* 16px is a hard floor, not a taste choice: iOS Safari zooms the viewport on
     focus for any smaller field, which throws the user out of the layout. */
  font:400 1rem/1.5 var(--body)}
.bccs-form input:focus,.bccs-form select:focus,.bccs-form textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(216,31,38,.15)}
.bccs-form textarea{min-height:96px;resize:vertical}
.bccs-form .bccs-btn{flex:0 0 auto}
/* The honeypot must be unreachable by people but present for bots. */
.bccs-form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bccs-form__note{font-size:var(--t-xs);color:var(--on-surface-mute);margin:0}
.bccs-form__msg{font-size:var(--t-sm);margin:0;min-height:1.5em}
.bccs-form__msg.is-ok{color:var(--ok)}
.bccs-form__msg.is-bad{color:#C0392B}
@media (prefers-color-scheme:dark){.bccs-form__msg.is-bad{color:#FF8A7A}}

/* ── cta band ─────────────────────────────────────────────── */
.bccs-band{background:var(--band-2);color:var(--on-band);padding:var(--gap) 0}
.bccs-band h2{font-size:var(--t-h2);max-width:20ch}
.bccs-band__sub{margin:.75rem 0 0;color:var(--on-band-dim);font-size:var(--t-sm)}

/* ── footer ───────────────────────────────────────────────── */
.bccs-foot{background:var(--band);color:var(--on-band);padding:2.75rem 0 6.75rem;font-size:var(--t-xs)}
.bccs-foot__grid{display:grid;gap:var(--space-6)}
.bccs-foot__logo{font-family:var(--display);font-weight:700;font-size:1.15rem;margin:0 0 .5rem}
.bccs-foot__tag{color:var(--on-band-dim);margin:0 0 1rem}
.bccs-foot__addr{font-style:normal;color:var(--on-band-dim);line-height:1.8}
.bccs-foot__addr a{color:var(--accent-hi);font-weight:600}
.bccs-foot__h{font-family:var(--display);font-weight:600;font-size:var(--t-sm);margin:0 0 .65rem}
.bccs-foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.bccs-foot__col a{color:var(--on-band-dim);text-decoration:none;display:inline-block;padding:.15rem 0}
.bccs-foot__col a{transition:color var(--t-fast) var(--ease)}
.bccs-foot__col a:hover{color:var(--on-band);text-decoration:underline}
.bccs-foot__legal{margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid var(--rule-band);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;color:var(--on-band-dim)}
.bccs-foot__legal p{margin:0}
.bccs-foot__legal a{color:var(--on-band-dim);margin-right:1rem}

/* ── sticky mobile bar ────────────────────────────────────── */
.bccs-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-auto-flow:column;
  grid-auto-columns:1fr;background:var(--band-scrim);backdrop-filter:blur(10px);
  border-top:1px solid var(--rule-band);padding-bottom:env(safe-area-inset-bottom)}
.bccs-bar a{min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--on-band);text-decoration:none;border-left:1px solid var(--rule-band);font:600 .6875rem/1 var(--body)}
.bccs-bar a:first-child{border-left:0}
.bccs-bar__pri{background:var(--accent);color:var(--on-accent)!important}
.bccs-bar svg{width:18px;height:18px}

/* ── 404 ──────────────────────────────────────────────────── */
.bccs-page--404 .bccs-cta{max-width:28rem}

/* ── mid tier: tablets and small laptop windows ────────────── */
/* Below this the layout is a single column; above it there is genuinely room
   for two, and 640-899px was previously wasting most of the viewport. */
@media (min-width:620px){
  .bccs-svc{columns:2;column-gap:2.5rem;border-top:0}
  .bccs-svc li{break-inside:avoid;border-top:1px solid var(--rule);border-bottom:0}
  .bccs-areas{grid-template-columns:repeat(3,1fr)}
  .bccs-foot__grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
  .bccs-factors{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:760px){
  .bccs-visit{grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start}
  .bccs-contact{grid-template-columns:1.2fr .8fr;gap:var(--space-7)}
}

/* ── desktop ──────────────────────────────────────────────── */
@media (min-width:900px){
  .bccs-svc{column-gap:3.25rem}
  .bccs-ozone ul{border-top:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.25rem}
  .bccs-ozone li{padding:1.1rem 0 0;border-bottom:0;border-top:2px solid var(--accent)}
  .bccs-flow{padding-left:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem}
  .bccs-flow::before{left:0;right:0;top:.87rem;bottom:auto;height:1px;width:auto}
  .bccs-flow li{padding:3rem 0 0}
  .bccs-flow__n{left:0;top:0}
  .bccs-revs{grid-template-columns:repeat(3,1fr)}
  .bccs-visit{grid-template-columns:1fr 1.1fr;gap:2.75rem;align-items:start}
  .bccs-areas{grid-template-columns:repeat(3,1fr)}
  .bccs-contact{grid-template-columns:1.2fr .8fr;gap:3rem}
  .bccs-foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
  .bccs-foot{padding-bottom:2.75rem}
  .bccs-bar{display:none}
}

/* ── motion ───────────────────────────────────────────────── */
@property --x{syntax:'<percentage>';inherits:true;initial-value:50%}
@keyframes bccs-sweep{0%,12%{--x:88%}70%,100%{--x:50%}}
.bccs-reveal.is-auto{animation:bccs-sweep 2.6s cubic-bezier(.5,0,.2,1) .35s both}
@keyframes bccs-shine{0%,72%,100%{opacity:0}80%{opacity:.85}88%{opacity:.2}}
.bccs-gleam{transform-origin:center;animation:bccs-shine 3.4s ease-in-out 1.6s infinite}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bccs-reveal.is-auto{animation:none}
  .bccs-gleam{animation:none;opacity:.5}
  *{transition-duration:.01ms!important}
}

/* ── pricing: what changes the price ──────────────────────── */
.bccs-h2-sub{margin-top:var(--space-8)}
.bccs-factors{display:grid;gap:var(--space-5);margin-top:var(--space-5)}
.bccs-factors h3{font-size:var(--t-h3);font-weight:600;line-height:var(--lh-tight);margin-bottom:var(--space-2)}
.bccs-factors p{margin:0;color:var(--on-surface-dim);font-size:var(--t-sm);line-height:1.7;max-width:60ch}
@media (min-width:900px){.bccs-factors{grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--space-7)}}

/* ── photographs ──────────────────────────────────────────── */
.bccs-shot{margin:0;border-radius:var(--r);overflow:hidden;background:var(--band-2);
  border:1px solid var(--rule-band)}
.bccs-shot img{width:100%;height:100%;object-fit:cover;display:block}
.bccs-shot--hero{aspect-ratio:16/9}
.bccs-gallery{display:grid;gap:var(--space-3);margin-top:var(--space-6);grid-template-columns:repeat(2,1fr)}
.bccs-gallery .bccs-shot{aspect-ratio:4/3}
.bccs-gallery .bccs-shot:first-child{grid-column:1/-1;aspect-ratio:16/9}
@media (min-width:760px){
  .bccs-gallery{grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
  .bccs-gallery .bccs-shot:first-child{grid-column:1/-1;aspect-ratio:21/9}
}
/* A free service should read as a benefit, not as a missing number. */
.bccs-price--free,.bccs-facts .bccs-free{color:var(--accent-text);font-weight:700}


/* ── touch targets ────────────────────────────────────────────
   Scoped to coarse pointers so a mouse-driven laptop keeps the
   tighter reading rhythm while thumbs get the full 44px.
   Measured before this rule at 320px: the footer phone link was
   84x17, footer nav links 28px tall, the language toggle 40px. */
@media (pointer:coarse){
  .bccs-foot__col a,
  .bccs-foot__addr a,
  .bccs-foot__legal a,
  .bccs-crumbs a,
  .bccs-pricetable a,
  .bccs-lang a,
  .bccs-lang span{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .bccs-crumbs ol{padding-block:0}
  .bccs-pricetable th,.bccs-pricetable td{padding-block:.6rem}

  /* Service-list titles were 22px tall. Padding grows the hit area and the
     matching negative margin keeps the row's baseline exactly where it was,
     so the visual rhythm is untouched. */
  .bccs-svc h3 a{display:inline-block;padding-block:.7rem;margin-block:-.7rem}

  /* Links inside a sentence are deliberately NOT expanded: WCAG 2.5.5 exempts
     inline targets, and padding them would break the line box around them. */
}

/* ── related links ────────────────────────────────────────── */
.bccs-related{background:var(--surface-2);border-top:1px solid var(--rule)}
.bccs-related__cols{display:grid;gap:var(--space-5);margin-top:var(--space-5)}
.bccs-related h3{font-size:var(--t-sm);font-weight:600;margin-bottom:var(--space-3);color:var(--on-surface-mute)}
.bccs-related ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.bccs-related a{color:var(--on-surface);text-decoration:none;font-size:var(--t-sm);
  border-bottom:1px solid transparent;transition:border-color var(--t-fast) var(--ease)}
.bccs-related a:hover{border-bottom-color:var(--accent-text)}
@media (min-width:620px){.bccs-related__cols{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}}
/* Legal pages read as one wall of text without section headings. */
.bccs-legal h2{font-size:var(--t-h3);margin-top:var(--space-6);margin-bottom:var(--space-3)}

/* Inline article photo. Sits between the facts strip and the prose. */
.bccs-shot--wide{aspect-ratio:16/9;margin:var(--space-6) 0 0;max-width:44rem}
@media (min-width:900px){.bccs-shot--wide{aspect-ratio:3/2}}

/* Legal effective date and the products line on service pages. */
.bccs-effective{font-size:var(--t-xs);color:var(--on-surface-mute);margin:var(--space-3) 0 0}
.bccs-products{margin:var(--space-5) 0 0;padding:var(--space-4);border-left:2px solid var(--accent);
  background:var(--surface-2);font-size:var(--t-sm);color:var(--on-surface-dim);max-width:60ch}