/* ==========================================================================
   Cheshire Dental Centre — inner-page overrides.
   Loaded after Content/style.css and cheshire-overrides.css on inner pages.
   These are targeted overrides on the ORIGINAL template section classes (kept from
   _reference), re-skinning them to the approved cream / walnut / bronze system.
   Content/style.css, Content/main.js and cheshire-overrides.css are never edited.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Progressive fallbacks for the template's IX2 reveals.
   The template starts reveal elements at inline opacity:0 and Webflow IX2 animates
   them in. That hides content when JavaScript is off, and IX2 does not honour
   reduced-motion. Both selectors below only match an element while its inline style
   still says opacity:0 — the moment IX2 sets opacity:1 they stop matching — so they
   reveal content without fighting a running animation. These load on inner pages
   only; the approved homepage is untouched.
   -------------------------------------------------------------------------- */
html:not(.w-mod-js) [style*="opacity:0"],
html:not(.w-mod-js) [style*="opacity: 0"] {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [style*="opacity:0"],
  [style*="opacity: 0"] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Recognition band (template .statas-section)
   The template ran a background video here; we dropped it, so give the section the
   approved walnut surface and make the staggered cards read as cream on walnut.
   -------------------------------------------------------------------------- */
.cdc-recognition.statas-section {
  background-color: var(--color-walnut);
  background-image: none;
}

.cdc-recognition .statas-single-card {
  background-color: var(--color-cream);
  border: 1px solid var(--color-line);
}

.cdc-recognition .statas-single-card .heading-style-05 {
  color: var(--color-walnut);
}

/* --------------------------------------------------------------------------
   About hero (template .hero-section.about-page)
   -------------------------------------------------------------------------- */
.about-page .about-hero-image {
  border-radius: var(--radius--radius-4xl, 16px);
}

/* --------------------------------------------------------------------------
   Award band (authored — no template section matched this shape).
   Sits between the recognition cards and the practice story on /about/. The
   photograph is portrait, so it is capped and the text column carries the width.
   -------------------------------------------------------------------------- */
.cdc-award-section {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.cdc-award-block {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

@media (max-width: 767px) {
  .cdc-award-block { grid-template-columns: minmax(0, 1fr); }
}

.cdc-award-media {
  display: flex;
  justify-content: center;
}

.cdc-award-image {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  filter: drop-shadow(0 24px 28px rgba(40, 24, 8, 0.16));
}

.cdc-award-eyebrow {
  color: var(--color-bronze-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cdc-award-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
}

/* --------------------------------------------------------------------------
   Team preview CTA under the card grid
   -------------------------------------------------------------------------- */
.team-member-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   Our Team — grouped card grid.
   Rebuilt 2026-07-23 from the client's reference (crossbankdental.co.uk/about-us):
   a labelled group per section, three 4:3 photo cards across, name and role
   centred beneath, and the biography behind a native <details> so the page needs
   no JavaScript. Everything here is authored (cdc-*) rather than a template class
   override, because the numbered directory rows this replaced are gone.
   -------------------------------------------------------------------------- */
.cdc-team-intro {
  max-width: 46rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.cdc-team-hint {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--color-bronze-text);
}

.cdc-team-hint span {
  font-weight: 600;
}

/* The top padding matters: only the gap BETWEEN groups came from the adjacent
   sibling rule below, so without this the first group heading sat hard against the
   bottom edge of the hero panel. Matched to the between-group gap so every group
   heading has the same air above it. */
.cdc-team-section {
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.cdc-team-group + .cdc-team-group {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
}

.cdc-team-group-title {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* Cards stretch to a common height per row (align-items defaults to stretch), so a
   member with no qualifications line and no biography still squares off against the
   card beside them instead of leaving a ragged bottom edge. */
.cdc-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

@media (max-width: 991px) {
  .cdc-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .cdc-team-grid { grid-template-columns: minmax(0, 1fr); }
}

.cdc-team-card {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The owner gets a warm hairline rather than a badge — enough to read as first
   among equals without labelling the card. */
.cdc-team-card.is-owner {
  border-color: var(--color-bronze);
}

.cdc-team-card-media {
  background: var(--color-walnut);
}

/* Framing is decided at BUILD time, not here — Website/_build/process-team-photos.py
   crops each card from the sitter's detected eye line so every face lands at a
   repeatable size and height. The files arrive already 4:3, so `cover` has nothing
   to crop and `object-position` is only a safety net for the sub-pixel rounding on
   the two cards derived from low-resolution portraits. It is deliberately left at
   the centre: this used to read `center 22%`, which looked like it was doing the
   framing when it was doing nothing at all, and sent anyone debugging a badly
   cropped face to the wrong file. */
.cdc-team-card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.cdc-team-card-body {
  padding: clamp(1rem, 2vw, 1.4rem) clamp(0.9rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cdc-team-card-name {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.3;
  color: var(--color-walnut);
}

.cdc-team-card-role {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-bronze-text);
}

/* Qualifications sit at the top of the opened disclosure, above the biography,
   set as a bronze credential line rather than body copy. */
.cdc-team-card-quals {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-bronze-text);
}

/* When both are present the biography follows straight on, so it drops the rule
   the qualifications line already drew. */
.cdc-team-card-quals + .cdc-team-bio-text {
  margin-top: 0.55rem;
  padding-top: 0;
  border-top: 0;
}

/* --- biography disclosure -------------------------------------------------
   The toggle sits directly under the role, NOT pinned to the bottom with
   margin-top:auto. Every card face now carries the same three things — name, role,
   toggle — so they line up on their own, and pinning would strand the toggle at the
   foot of a tall void whenever a neighbour in the row is expanded. */
.cdc-team-bio {
  margin-top: 0.9rem;
}

.cdc-team-bio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-walnut);
  list-style: none;
  /* Safari still needs the vendor pseudo-element to drop the disclosure triangle. */
}

.cdc-team-bio-toggle::-webkit-details-marker { display: none; }

.cdc-team-bio-toggle:hover { color: var(--color-bronze-text); }

.cdc-team-bio-toggle:focus-visible {
  outline: 2px solid var(--color-bronze);
  outline-offset: 3px;
  border-radius: 4px;
}

.cdc-team-bio-chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.cdc-team-bio[open] .cdc-team-bio-chevron {
  transform: translateY(1px) rotate(225deg);
}

.cdc-team-bio-text {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.9rem;
  line-height: 1.7;
  text-align: left;
  color: var(--color-ink);
}

.cdc-team-back {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ==========================================================================
   Treatment pages (template service-detail modules, re-skinned + new modules)
   ========================================================================== */

/* Safety / warning notice — deliberately prominent (whitening pregnancy exclusion,
   extraction infection red-flags). */
/* Treatment hero readability system.
   All 12 treatment pages share one hero photo — a bright clinical close-up — with
   LIGHT copy in two columns (eyebrow + H1 left, lead right) plus breadcrumbs. The
   template's overlay .rectangle is globally hidden (as a "stray rectangle"), so the
   copy previously sat on the bare bright image with no protection. Re-enable a warm
   DIRECTIONAL scrim — concentrated behind the copy (left column, bottom floor, and
   bottom-right corner) while the centre-top stays clear — derived from the approved
   homepage hero-bg-mask, plus text-shadows and light breadcrumbs. */
.cdc-treatment-hero { position: relative; isolation: isolate; }
.cdc-treatment-hero .cdc-treatment-hero-image { object-fit: cover; object-position: center 55%; z-index: 0; filter: saturate(1.04) contrast(1.02) brightness(0.92); }
.cdc-treatment-hero .rectangle.services-details {
  display: block !important;                 /* beat the global .rectangle { display:none !important } */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background:
    linear-gradient(to top, rgba(26, 16, 6, 0.74) 0%, rgba(26, 16, 6, 0.42) 32%, rgba(26, 16, 6, 0.12) 55%, rgba(26, 16, 6, 0) 76%),
    linear-gradient(96deg, rgba(26, 16, 6, 0.86) 0%, rgba(26, 16, 6, 0.60) 22%, rgba(26, 16, 6, 0.22) 42%, rgba(26, 16, 6, 0) 60%),
    radial-gradient(95% 85% at 100% 92%, rgba(26, 16, 6, 0.52), transparent 62%);
  z-index: 1;
}
.cdc-treatment-hero > .container { position: relative; z-index: 2; }
.cdc-treatment-hero h1,
.cdc-treatment-hero .hero-content-right .text-3xl { text-shadow: 0 1px 14px rgba(18, 11, 4, 0.55); }
.cdc-treatment-hero .tag-wrapper > div { text-shadow: 0 1px 10px rgba(18, 11, 4, 0.5); }
/* Breadcrumbs: the shared partial is dark (tuned for light pages); over this scrim make them light. */
.cdc-treatment-hero .cdc-breadcrumbs { text-shadow: 0 1px 8px rgba(18, 11, 4, 0.5); }
.cdc-treatment-hero .cdc-breadcrumbs ol,
.cdc-treatment-hero .cdc-breadcrumbs a { color: rgba(248, 242, 228, 0.85); }
.cdc-treatment-hero .cdc-breadcrumbs a:hover { color: #fff; border-bottom-color: rgba(248, 242, 228, 0.55); }
.cdc-treatment-hero .cdc-breadcrumbs [aria-current="page"] { color: #fff; }
.cdc-treatment-hero .cdc-breadcrumbs li + li::before { background: rgba(248, 242, 228, 0.5); }
@media (max-width: 767px) {
  /* Stacked single column covers most of the image — use a stronger, fuller scrim. */
  .cdc-treatment-hero .cdc-treatment-hero-image { object-position: center 50%; filter: saturate(1.04) contrast(1.02) brightness(0.86); }
  .cdc-treatment-hero .rectangle.services-details {
    background:
      linear-gradient(to top, rgba(24, 15, 5, 0.88) 0%, rgba(24, 15, 5, 0.62) 42%, rgba(24, 15, 5, 0.4) 72%, rgba(24, 15, 5, 0.28) 100%);
  }
}

/* The original service process is a 300vh sticky stack. Without its decorative
   stock-card image, use the same cards as a normal responsive grid. */
.cdc-process.service-processs-block {
  height: auto;
  min-height: 0;
  display: block;
  position: relative;
}
.cdc-process .service-process-card { position: static; max-width: none; min-height: 100%; padding: clamp(1.25rem, 2.5vw, 2rem); align-items: flex-start; justify-content: flex-start; }

.cdc-treatment-warning {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
  background: var(--color-cream-3);
  border-left: 3px solid var(--color-walnut);
  border-radius: var(--radius--radius-4xl, 16px);
  max-width: 60ch;
}
.cdc-treatment-warning .cdc-warning-label {
  font-family: var(--font-family--body-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-walnut);
  margin-bottom: 0.5rem;
}
.cdc-treatment-warning p {
  margin: 0;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.6;
}

/* Treatment brand feature */
.cdc-brand-feature-section { padding-block: clamp(3rem, 6vw, 5.5rem); background: var(--color-cream-2); }
.cdc-brand-feature { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); overflow: hidden; color: var(--color-on-dark-soft); background: var(--color-walnut); border-radius: 24px; box-shadow: 0 24px 60px rgba(42, 27, 12, .14); }
.cdc-brand-feature-identity { display: flex; flex-direction: column; justify-content: center; gap: 2rem; padding: clamp(1.75rem, 4vw, 3.25rem); background: rgba(0, 0, 0, .12); }
.cdc-brand-feature-eyebrow { max-width: 24rem; font-size: .76rem; font-weight: 600; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; color: var(--color-on-dark-soft); }
.cdc-brand-feature-logo-wrap { display: grid; min-height: 9rem; padding: clamp(1.5rem, 4vw, 2.5rem); place-items: center; background: #fff; border-radius: 18px; }
.cdc-brand-feature-logo { display: block; width: min(100%, 23.6875rem); height: auto; }
.cdc-brand-feature-content { padding: clamp(2rem, 5vw, 4.25rem); }
.cdc-brand-feature-content .heading-style-03 { max-width: 18ch; color: #fff; }
.cdc-brand-feature-body { max-width: 62ch; margin: 1.1rem 0 0; color: rgba(248, 242, 228, .82); line-height: 1.7; }
.cdc-brand-feature-points { display: grid; gap: 0; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(248, 242, 228, .2); }
.cdc-brand-feature-points li { display: grid; grid-template-columns: minmax(10rem, .75fr) minmax(0, 1.25fr); gap: 1rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid rgba(248, 242, 228, .2); }
.cdc-brand-feature-points strong { color: #fff; font-weight: 600; }
.cdc-brand-feature-points span { color: rgba(248, 242, 228, .76); line-height: 1.55; }
.cdc-brand-feature-cta { display: inline-flex; align-items: center; gap: .75rem; min-height: 3rem; margin-top: 1.75rem; padding: .75rem 1.15rem; color: var(--color-walnut); font-weight: 600; text-decoration: none; background: var(--color-cream); border-radius: 999px; transition: background .18s ease, transform .18s ease; }
.cdc-brand-feature-cta:hover, .cdc-brand-feature-cta:focus-visible { background: #fff; transform: translateY(-2px); }
@media (max-width: 820px) {
  .cdc-brand-feature { grid-template-columns: 1fr; }
  .cdc-brand-feature-identity { gap: 1.25rem; }
  .cdc-brand-feature-logo-wrap { min-height: 0; }
}
@media (max-width: 560px) {
  .cdc-brand-feature-points li { grid-template-columns: 1fr; gap: .35rem; }
  .cdc-brand-feature-cta { width: 100%; justify-content: center; text-align: center; }
}

/* Process journey — numbered cards, re-skinned from .service-processs-block. */
.cdc-process.service-processs-block { background: var(--color-walnut); background-image: none; padding-block: clamp(3rem, 6vw, 5.5rem); }
.cdc-process .cdc-process-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.cdc-process .cdc-process-head .accent-color { color: var(--color-on-dark-soft); }
.cdc-process .cdc-process-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 700px) { .cdc-process .cdc-process-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.cdc-process .service-process-card { background: transparent; }
.cdc-process .service-process-number { color: var(--color-on-dark-soft); font-family: var(--font-family--heading-font); }
.cdc-process .divider.service-process { background: rgba(248,242,228,.22); height: 1px; margin: 0.75rem 0 1rem; }
.cdc-process .service-process-info-inner .text-m { color: var(--color-on-dark-soft); }

/* Pricing */
.cdc-pricing-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.cdc-pricing-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.cdc-pricing-head .heading-style-03 { color: var(--color-walnut); margin-top: 1rem; }
.cdc-pricing-list { list-style: none; margin: 0; padding: 0; max-width: 44rem; border-top: 1px solid var(--color-line); }
.cdc-pricing-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-line); }
.cdc-pricing-label { font-family: var(--font-family--body-font); color: var(--color-ink); font-size: 1.0625rem; }
.cdc-pricing-price { font-family: var(--font-family--heading-font); color: var(--color-walnut); font-size: 1.25rem; white-space: nowrap; }
.cdc-pricing-note { margin: 1.25rem 0 0; color: var(--_colors---text-secondary); font-size: 0.9375rem; max-width: 44rem; }

/* Aftercare + related use a deeper cream tint */
.cdc-section--tint2 { background: var(--color-cream-2); }
.cdc-aftercare-section, .cdc-related-section { padding-block: clamp(3rem, 6vw, 5rem); }
.cdc-aftercare .heading-style-04 { color: var(--color-walnut); margin-bottom: 1rem; }
.cdc-aftercare .service-details { max-width: 62ch; }

/* FAQ — native disclosure, progressive (works without JS) */
.cdc-faq-section { padding-block: clamp(3rem, 6vw, 5rem); }
.cdc-faq-title { color: var(--color-walnut); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cdc-faq-list { max-width: 52rem; border-top: 1px solid var(--color-line); }
.cdc-faq-item { border-bottom: 1px solid var(--color-line); }
.cdc-faq-q { cursor: pointer; list-style: none; padding: 1.15rem 2rem 1.15rem 0; position: relative; font-family: var(--font-family--heading-font); font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem); color: var(--color-walnut); }
.cdc-faq-q::-webkit-details-marker { display: none; }
.cdc-faq-q::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--color-bronze); }
.cdc-faq-item[open] .cdc-faq-q::after { content: "\2013"; }
.cdc-faq-a { padding: 0 0 1.25rem; max-width: 60ch; }
.cdc-faq-a p { margin: 0; color: var(--_colors---text-secondary); line-height: 1.7; }

/* Emergency call CTA (urgent family) */
.cdc-emergency-cta { padding-block: clamp(3rem, 6vw, 5rem); }
.cdc-emergency-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 3vw, 2.5rem); background: var(--color-walnut); color: var(--color-on-dark); border-radius: var(--radius--radius-4xl, 16px); padding: clamp(1.75rem, 4vw, 3rem); }
.cdc-emergency-inner .heading-style-03 { color: var(--color-on-dark); margin: 0.5rem 0 0; }
.cdc-eyebrow-dark { font-family: var(--font-family--body-font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-on-dark-soft); }
.cdc-emergency-note { color: var(--color-on-dark-soft); margin: 1rem 0 0; max-width: 46ch; line-height: 1.6; }
.cdc-call-button { flex-shrink: 0; }

/* Related treatments */
.cdc-related-title { color: var(--color-walnut); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.cdc-related-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; max-width: 46rem; }
@media (min-width: 620px) { .cdc-related-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.cdc-related-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius--radius-4xl, 16px); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.cdc-related-card:hover { border-color: var(--color-bronze); transform: translateY(-2px); }
.cdc-related-name { font-family: var(--font-family--heading-font); color: var(--color-walnut); font-size: 1.0625rem; }
.cdc-related-arrow { color: var(--color-bronze); }

/* ---- Treatment page rhythm & content modules (consistency polish) ----
   The frozen template gives .services-details-section a large top padding and NO
   bottom padding, so the body between the hero and the next band read top-heavy and
   crowded the following section. Make it symmetric and consistent with the other
   cdc bands so every treatment page has the same calm rhythm. */
.services-details-section { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
/* "Please note" now reads as a deliberate, self-contained callout (balanced margins). */
.cdc-treatment-warning { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; }
.cdc-symptom-block + .cdc-treatment-warning,
.service-details-bottom { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Gum-disease symptom list (hygienist) */
.cdc-symptom-block { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.cdc-symptom-block .heading-style-05 { color: var(--color-walnut); margin-bottom: 0.9rem; }
.cdc-symptom-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; max-width: 54ch; }
.cdc-symptom-list li { position: relative; padding-left: 1.6rem; color: var(--_colors---text-secondary); }
.cdc-symptom-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-bronze); }

/* Emergency guide — "call now" vs "can wait" two-column triage */
.cdc-guide-section { padding-block: clamp(3rem, 6vw, 5rem); }
.cdc-guide-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); max-width: 62ch; }
.cdc-guide-head .heading-style-03 { color: var(--color-walnut); }
.cdc-guide-head .text-l { color: var(--_colors---text-secondary); margin-top: 0.75rem; }
.cdc-guide-cols { display: grid; grid-template-columns: 1fr; gap: clamp(1.1rem, 2.5vw, 1.75rem); }
@media (min-width: 720px) { .cdc-guide-cols { grid-template-columns: 1fr 1fr; } }
.cdc-guide-col { background: #fff; border: 1px solid var(--color-line); border-radius: 16px; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.cdc-guide-urgent { border-top: 3px solid var(--color-walnut); }
.cdc-guide-routine { border-top: 3px solid var(--color-bronze); }
.cdc-guide-col-label { font-family: var(--font-family--body-font); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; }
.cdc-guide-urgent .cdc-guide-col-label { color: var(--color-walnut); }
.cdc-guide-routine .cdc-guide-col-label { color: var(--color-bronze-text); }
.cdc-guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.cdc-guide-list li { color: var(--_colors---text-secondary); line-height: 1.55; }
.cdc-guide-list strong { color: var(--color-walnut); font-weight: 600; }
.cdc-guide-note { margin: clamp(1.5rem, 3vw, 2rem) 0 0; color: var(--_colors---text-secondary); font-size: 0.95rem; max-width: 72ch; }

/* Reassurance band — the same verified trust points on every treatment page */
.cdc-reassure-section { padding-block: clamp(3rem, 6vw, 5rem); background: var(--color-cream-3); }
.cdc-reassure-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cdc-reassure-eyebrow { font-family: var(--font-family--body-font); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-bronze-text); }
.cdc-reassure-head .heading-style-04 { color: var(--color-walnut); margin-top: 0.6rem; }
.cdc-reassure-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.1rem, 2.5vw, 1.75rem); }
@media (min-width: 620px) { .cdc-reassure-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .cdc-reassure-grid { grid-template-columns: repeat(4, 1fr); } }
.cdc-reassure-item { padding-top: 0.9rem; border-top: 2px solid var(--color-bronze); }
.cdc-reassure-title { font-family: var(--font-family--heading-font); color: var(--color-walnut); font-size: 1.1rem; margin-bottom: 0.4rem; }
.cdc-reassure-text { color: var(--_colors---text-secondary); font-size: 0.95rem; line-height: 1.55; }

/* ==========================================================================
   Treatments overview — grouped families of directory rows
   ========================================================================== */
.cdc-overview-group { padding-top: clamp(2.5rem, 5vw, 4rem); }
.cdc-overview-group + .cdc-overview-group { border-top: 1px solid var(--color-line); }
.cdc-overview-group__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cdc-overview-group__head .heading-style-03 { color: var(--color-walnut); }
.cdc-overview-group__head .text-l { color: var(--_colors---text-secondary); margin-top: 0.5rem; max-width: 54ch; }
.cdc-overview-row { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 1rem 1.25rem; padding: 1.2rem 0; border-top: 1px solid var(--color-line); text-decoration: none; transition: background .18s ease; }
.cdc-overview-row:last-child { border-bottom: 1px solid var(--color-line); }
.cdc-overview-row:hover .cdc-overview-name { color: var(--color-bronze-text); }
.cdc-overview-num { font-family: var(--font-family--body-font); color: var(--color-bronze-text); font-size: 0.85rem; }
.cdc-overview-name { font-family: var(--font-family--heading-font); color: var(--color-walnut); font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); transition: color .18s ease; }
.cdc-overview-desc { font-family: var(--font-family--body-font); color: var(--_colors---text-secondary); font-size: 0.95rem; grid-column: 2 / 3; margin: 0; max-width: 60ch; }
.cdc-overview-arrow { display: inline-flex; align-items: center; color: var(--color-bronze); }
.cdc-overview-arrow svg { display: block; width: 1.15rem; height: 1.15rem; }
@media (max-width: 559px) {
  .cdc-overview-row { grid-template-columns: 2.25rem 1fr; }
  .cdc-overview-arrow { display: none; }
}


/* Cheshire remaining-page modules */
.cdc-simple-hero .hero-content-block.service-page { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cdc-simple-hero .sevice-content-block { padding-top: 0; }

.cdc-contact-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.cdc-contact-panel { display: grid; gap: 0.9rem; }
.cdc-contact-card {
  display: grid;
  gap: 0.35rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-ink);
  background: var(--color-cream-2);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}
.cdc-contact-card:hover { transform: translateY(-2px); border-color: var(--color-bronze); }
.cdc-contact-card strong { color: var(--color-walnut); font-family: var(--font-family--heading-font); font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem); overflow-wrap: anywhere; }
.cdc-contact-card > span:last-child { color: var(--_colors---text-secondary); }
.cdc-contact-label { color: var(--color-bronze-text); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cdc-map-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); background: var(--color-cream-2); }
.cdc-map-heading { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cdc-map-heading .heading-style-03 { color: var(--color-walnut); }
.cdc-map-heading p { margin: .75rem 0 0; color: var(--_colors---text-secondary); }
.cdc-map-frame { overflow: hidden; position: relative; border-radius: 16px; border: 1px solid var(--color-line); background: var(--color-cream-3); }
.cdc-map-fallback { position: absolute; left: 1rem; bottom: 1rem; padding: .75rem 1rem; color: var(--color-cream); background: var(--color-walnut); border-radius: 999px; text-decoration: none; font-weight: 600; }
.cdc-map-frame iframe { display: block; width: 100%; min-height: min(32rem, 70vh); border: 0; }

.cdc-booking-intro { display: grid; gap: 1.5rem; max-width: 52rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cdc-action-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; margin-top: 1.5rem; }
.cdc-secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .8rem 1.25rem; border: 1px solid var(--color-walnut); border-radius: 999px; color: var(--color-walnut); text-decoration: none; font-weight: 600; }
.cdc-secondary-button:hover { color: var(--color-cream); background: var(--color-walnut); }
.cdc-booking-directory { padding-bottom: clamp(3rem, 6vw, 5rem); }

.cdc-aesthetics-hero .hero-content-block.about { align-items: center; }
.cdc-aesthetics-logo { width: min(18rem, 70%); height: auto; object-fit: contain; margin: 1rem 0 1.5rem; }
.cdc-aesthetics-hero .about-hero-image { object-position: center 20%; }
.cdc-aesthetics-services { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.cdc-aesthetics-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.cdc-aesthetics-menu > div { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--color-cream-2); border: 1px solid var(--color-line); border-radius: 16px; }
.cdc-aesthetics-menu h3 { margin: 0 0 1rem; color: var(--color-walnut); font-family: var(--font-family--heading-font); }
.cdc-aesthetics-menu ul { margin: 0; padding-left: 1.2rem; color: var(--color-ink); line-height: 1.8; }
.cdc-aesthetics-story .about-us-left-block { width: min(42%, 34rem); }
.cdc-partnership-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; }

.cdc-suppliers-content { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.cdc-supplier-intro { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3rem); color: var(--_colors---text-secondary); }
.collection-list.team-member.cdc-supplier-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.cdc-supplier-grid .collection-item.team-member { width: auto; flex: 0 1 calc((100% - 2rem) / 3); }
.cdc-supplier-card.team-member-card { height: 100%; background: var(--color-cream-2); border: 1px solid var(--color-line); border-radius: 16px; padding: 1rem; }
/* Uniform logo box: a FIXED-height, centred frame so all 7 logos (aspect ratios 2.0–6.0)
   line up. Bounding the logo on BOTH axes with object-fit:contain (not width:90%) stops
   the box collapsing to each logo's own height, which is what left them different sizes /
   top-vs-centre aligned. */
.cdc-supplier-card .team-card-image-wrap { display: grid; place-items: center; width: 100%; height: clamp(160px, 12vw, 170px); background: var(--color-cream); border-radius: 12px; overflow: hidden; padding: 0.85rem 1rem; }
.cdc-supplier-card .team-card-image-wrap img { width: auto; height: auto; max-width: 82%; max-height: 100%; object-fit: contain; }
.cdc-supplier-card .team-member-card-info { padding-top: 1rem; }
.cdc-supplier-card .team-member-name { margin: 0; color: var(--color-walnut); }
.cdc-resource-section { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--color-cream-2); }
.cdc-resource-heading { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cdc-resource-heading .heading-style-03 { margin-top: 1rem; color: var(--color-walnut); }
.cdc-resource-list { max-width: 54rem; border-top: 1px solid var(--color-line-strong); }
.cdc-resource-link { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; color: var(--color-walnut); border-bottom: 1px solid var(--color-line-strong); text-decoration: none; font-family: var(--font-family--heading-font); font-size: 1.1rem; }
.cdc-resource-link:hover { color: var(--color-bronze-text); }
.cdc-resource-arrow { display: inline-flex; flex: none; align-items: center; }
.cdc-resource-arrow svg { display: block; width: 1.1rem; height: 1.1rem; }

@media (max-width: 767px) {
  .cdc-aesthetics-menu { grid-template-columns: 1fr; }
  .cdc-aesthetics-story .about-us-left-block { width: 100%; }
  .cdc-supplier-grid .collection-item.team-member { flex-basis: calc((100% - 1rem) / 2); }
}

@media (max-width: 479px) {
  .cdc-supplier-grid .collection-item.team-member { flex-basis: 100%; }
  .cdc-contact-card { padding: 1.1rem; }
  .cdc-action-row > * { width: 100%; }
}