/* design-fixes.css — design-conformance fixes layered after styles.css */

/* step3: mega-menu category heading is now a link to the category landing page
   (was a static span). Keep the eyebrow look; add pointer + hover. */
.mega__panel .mega__cat-link {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur, 300ms) var(--ease, ease);
}
.mega__panel .mega__cat-link:hover {
  color: var(--c01);
}

/* Hero subtitle is now an <h1> (SEO: keyword line as the page H1). The global
   h1 rule would restyle it as Playfair 400 / line-height 1 - restore the body
   type it had as the original <p class="lead hero__sub">. Visual is unchanged. */
.hero__sub {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
}

/* Five Reasons decorative subtitle ("- your North East dentist"). .italic-accent
   only sets font-style + colour (it's meant to sit inside a Playfair heading); on
   this standalone <p> it fell back to Poppins, which we don't load an italic for
   (faux-oblique). Render it as the loaded Playfair Display italic accent instead. */
.reasons__sub {
  font-family: var(--font-head);
  font-weight: 400;
}

/* Treatment Fees: carousel arrows are back (fees__grid is a 3-per-row
   slider again), so restore the default space-between layout. Desktop only -
   mobile sets its own margin-top/justify-content in styles.css. */
@media (min-width: 769px) {
  .fees__footer {
    justify-content: space-between;
  }
}

/* Find Us location tabs: the 8 tabs only fit one line at ~1920 (design width);
   at laptop widths they overflowed to a 2nd line (Consett wrapping). Step the
   gap + font-size down so all 8 stay on a single line across desktop/laptop
   widths. Phones (<=768) still use the collapsed dropdown from styles.css. */
@media (min-width: 769px) and (max-width: 1530px) {
  .findus__tabs { gap: 24px; }
  .findus__tab { font-size: 20px; }
}
@media (min-width: 769px) and (max-width: 1200px) {
  .findus__tabs { gap: 14px; }
  .findus__tab { font-size: 17px; }
}

/* Mega menu leaf links: styles.css uses CSS multi-column (`columns: 2`), which
   lets a single long link (e.g. "Oral Surgery & Wisdom Teeth") break across the
   two columns and look like two broken items. Use a real 2-col grid so each link
   stays intact in its own cell. */
.mega__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
}

/* Mega menu hover bridge: the panel sits 14px below the nav item (top: 100% +
   14px), and that gap was a dead-zone that dropped :hover and closed the menu
   mid-move. The bridge must live on the NAV ITEM (always pointer-events: auto) -
   putting it on .mega failed because .mega loses pointer-events the instant
   hover drops, so it couldn't sustain itself. This transparent strip below the
   nav item keeps a continuous hover path from the link down into the panel. */
.nav-item:has(.mega) {
  --mega-bridge: 16px;
}
.nav-item:has(.mega)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--mega-bridge);
}

/* All-on-4 section: the inner grid used fixed 906px/632px columns sized for a
   1920 canvas, so below ~1920 (but still desktop) it overflowed and cut the
   copy column off the right. Make the columns proportional so the section
   fits laptop widths. Scoped to desktop only — below 769px the mobile rules
   in styles.css switch this to a single stacked column. */
@media (min-width: 769px) {
  .di-allon4__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

/* Inline internal links woven into body copy. The base `a` rule is
   color:inherit + no underline, so links dropped into prose were invisible.
   Style content links as the terracotta accent with a subtle underline. */
.di-body a, .di-intro a, .di-opt__body a, .di-bullets a,
.results__intro a, .fees__intro a, .feature__desc a, .lead a,
.loc-intro__text a, .loc-why__text a {
  color: var(--c01);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur, 300ms) var(--ease, ease);
}
.di-body a:hover, .di-intro a:hover, .di-opt__body a:hover, .di-bullets a:hover,
.results__intro a:hover, .fees__intro a:hover, .feature__desc a:hover, .lead a:hover,
.loc-intro__text a:hover, .loc-why__text a:hover {
  color: var(--c01-deep);
}

/* Treatment-page CTA breathing room. The di sections space via `margin-top`
   (200px desktop / 120px mobile), but that inter-section rhythm was carried
   before the closing CTA by `.page-di .cta { margin-top: 200px }` — a rule
   scoped to the `<body class="page-di">` wrapper. The HTML→JSX converter
   extracts only <main>, so that body class (and its spacing) was dropped on
   every di page, leaving the CTA flush against the final di-split (gap: 0).
   Restore the section rhythm ahead of the CTA. */
.di-split + .cta,
.di-allon4 + .cta {
  margin-top: 200px;
}
@media (max-width: 768px) {
  .di-split + .cta,
  .di-allon4 + .cta {
    margin-top: 120px;
  }
}

/* Reusable dark "break" panel (di-panel--sbs). The implants "What are dental
   implants?" section sits on a raised #1A1A1A rounded card (.di-panel__bg) that
   breaks up the otherwise flat #0A0A0A page. We reuse that card as a standing
   device: the 2nd/3rd image/text SBS on every inner treatment page wraps its
   .di-split in .di-panel.di-panel--sbs so one mid-page section is visually
   distinct. Text is already white site-wide, so no colour work is needed.
   The implants panel has bespoke adjacent-sibling spacing (`.di-panel + .di-split`
   → 149px margin + 89px copy padding-top, to align its specific "right for me"
   section); neutralise it so an SBS that FOLLOWS a break panel keeps the normal
   200px rhythm and un-padded copy. */
.di-panel--sbs + .di-split {
  margin-top: 200px;
}
.di-panel--sbs + .di-split .di-split__copy {
  padding-top: 0;
}

@media (max-width: 769px) {
.di-panel--sbs + .di-split {
    margin-top: 60px;
}
}

.page-treatments--clean-care .fees__head .h-96 {
    margin-top: 0px;
}
.page-treatments--clean-care{
  
}


.pt-0{
  padding-top: 0 !important;
}
.spacer{
  height: 160px;
}
@media (max-width: 769px) {
  .spacer{
    height: 60px;
  }
}

/* Smile makeover: the treatment-solutions grid (.fees) already carries 140px
   bottom padding, and the following dark "3 steps" panel adds a 200px top
   margin + 156px internal top padding - together far too big a gap. Drop the
   panel's top margin and trim the grid's bottom padding so the gap matches the
   normal ~200px section rhythm. Scoped to a .fees immediately before a panel. */
.fees:has(+ .di-panel) { padding-bottom: 40px; }
.fees + .di-panel { /* margin-top: 0; */ }

/* Treatment fees: the cost-guide dark panel is followed by the .cf-prices
   price list, which carries its own 200px top padding on top of the panel's
   internal bottom padding - too big a gap. Drop the price list's top padding
   after a break panel so it matches the normal section rhythm. */
/* .di-panel--sbs + .cf-prices { padding-top: 0; } */

/* Testimonials: the two fixed 632px columns + 424px right padding only fit at the
   1920 Figma width; below that the right column overflowed off-screen. Trim the
   right padding and let the columns shrink to fit below the design width. */
@media (min-width: 769px) and (max-width: 1900px) {
  /* .page-testimonials .tst-body .container { padding-inline: 96px; } */ /* disabled: masonry now aligned to .cu-grid via styles.css .tst-grid max-width:1308px */
  .page-testimonials .tst-col { flex: 0 1 632px; min-width: 0; }
}

/* Celebrity detail hero: the design's fixed 311/316px container padding is a @1920
   value that pushes the hero text too far right and squeezes the two columns below
   1920. Centre the 1293px content block (text 448 + media 624) instead — this
   reproduces the design at 1920 and scales down cleanly to 1440 and narrower. */
@media (min-width: 769px) {
  .page-celebrity-detail .csd-hero .container { padding-inline: 40px; }
  .page-celebrity-detail .csd-hero__inner { max-width: 1293px; margin-inline: auto; }
  .page-celebrity-detail .csd-hero__text { flex: 0 1 448px; min-width: 0; }
  .page-celebrity-detail .csd-hero__media { flex: 0 1 624px; min-width: 0; }
}

/* Celebrity detail: bold the DENTAL CONCERN / TREATMENT labels. */
.csd-eyebrow { font-weight: 700; }

/* Image lightbox (Queensway Stars full photos) */
.img-lightbox { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10,10,10,.9); opacity: 0; transition: opacity .3s ease; }
.img-lightbox.open { display: flex; opacity: 1; }
.img-lightbox img { max-width: 92vw; max-height: 90vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 24px 90px rgba(0,0,0,.6); }
.img-lightbox__close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background .3s ease; }
.img-lightbox__close:hover { background: var(--c01); }
.cs-card[data-lightbox] { cursor: pointer; }

/* CTA with two stacked buttons (e.g. About Us): add a gap so they aren't touching. */
.cta__content .btn + .btn { margin-top: 16px; }

/* Hero video: allow a play button + scrim to overlay the di-hero image
   (e.g. dental-hygiene). di-hero__media only holds an img elsewhere, so
   position:relative is a safe no-op there. */
.di-hero__media { position: relative; }
/* Same for split-section square media that carries a video play button
   (e.g. dental-hygiene "what to expect", gum-health "signs"). */
.di-split__media:has(.di-video__play) { position: relative; }

/* Booking-page review cards with a video still (Chloe/Anna): override the
   hard-coded landscape crop transform so the portrait still fills the media
   window normally, and size the play button down for the smaller container. */
.bk-review__media--video img { position: static; left: auto; top: auto; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.bk-review__media--video .di-video__play { left: 24px; bottom: 24px; font-size: 14px; gap: 12px; }

/* Dual-CTA (e.g. Specialist Prosthodontics): lay the two buttons in a spaced row
   that wraps to stacked on mobile. Cancels the stacked-button top margin above. */
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.cta__actions .btn + .btn { margin-top: 0; }

/* ============================================================
   FAQ ACCORDION — reusable component (documented in /styleguide)
   Collapsible Q&A; one item open at a time (main.js binds .accordion__head).
   Dark theme (di / near-black pages): white questions, muted answers, clay chevron.
   ============================================================ */
.faq-block { margin-top: 200px; }
.faq__head { margin-bottom: 48px; }
.faq__head .eyebrow { margin-bottom: 20px; }
.faq__head .h-72 { color: #fff; }

.accordion { max-width: 900px; }
.accordion__item { border-top: 1px solid rgba(255,255,255,.14); }
.accordion__item:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.accordion__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; width: 100%; padding: 30px 4px; background: none; border: 0; cursor: pointer; text-align: left; }
.accordion__q { font-family: var(--font-head); font-weight: 400; font-size: 22px; line-height: 1.35; letter-spacing: -.44px; color: #fff; transition: color var(--dur) var(--ease); }
.accordion__head:hover .accordion__q, .accordion__item.open .accordion__q { color: var(--c01); }
.accordion__chev { flex: 0 0 auto; margin-top: 9px; color: var(--c01); transition: transform var(--dur) var(--ease); }
.accordion__item.open .accordion__chev { transform: rotate(180deg); }
/* Collapse via max-height so closed items fully hide (no leaking text). */
.accordion__body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.accordion__item.open .accordion__body { max-height: 340px; opacity: 1; }
.accordion__inner { padding: 0 4px 30px; }
.accordion__a { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.65; letter-spacing: -.32px; color: rgba(255,255,255,.72); max-width: 780px; margin: 0; }

@media (max-width: 768px) {
  .faq-block { margin-top: 88px; }
  .faq__head { margin-bottom: 36px; }
  .accordion__head { padding: 24px 2px; gap: 24px; }
  .accordion__q { font-size: 18px; letter-spacing: -.36px; line-height: 1.4; }
  .accordion__chev { margin-top: 6px; }
  .accordion__item.open .accordion__body { max-height: 520px; }
}

/* Our Dental Experts: the 3×408px fixed grid + 192px padding is a @1920 value that
   overflows below 1920 (right column clipped, not centred). Fit + centre the columns. */
@media (min-width: 769px) and (max-width: 1550px) {
  .page-about .de-section .container { padding-inline: 96px; }
  .page-about .de-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .page-about .de-grid > .de-card { width: 100%; }
}
/* Team-detail hero: @1920 fixed widths (475/968) + 196/84 padding overflow below
   1920 - revert to responsive percentages with trimmed padding. */
@media (min-width: 769px) and (max-width: 1900px) {
  .page-team-detail .td-hero__inner { padding-inline: 96px; }
  .page-team-detail .td-hero__text { width: 32%; margin-left: 0; padding-top: 48px; }
  .page-team-detail .td-hero__media { width: 60%; margin-left: auto; }
  .page-team-detail .td-info .container { padding-inline: 96px; }
}

/* Team detail bios: make the interview-style questions bold. */
.td-col p.td-col__q { /* font-weight: 700; */ }

/* Our Team: the @1920 10%/21.875% container padding is unbalanced below 1920. */
@media (min-width: 769px) and (max-width: 1900px) {
  .page-our-team .ot-team .container { padding-inline: 96px; }
}

/* Inclusion & Diversity: the @1920 .page-inclusion hero (196/84 padding + 968px
   media) has no upper bound and overflows below 1920 — fit it to the viewport. */
@media (min-width: 769px) and (max-width: 1900px) {
  .page-inclusion .td-hero__inner { padding-inline: 96px; }
  .page-inclusion .td-hero__text { width: 34%; padding-top: 56px; }
  .page-inclusion .td-hero__media { width: 58%; margin-left: auto; }
  .page-inclusion .td-hero__media img { width: 100%; height: 560px; object-fit: cover; }
  .page-inclusion .td-info .container { padding-inline: 96px; }
}

/* Giving Back: the feature SBS carries big single-para spacing (80px desc
   margin, 64px rule gap) that looks messy with stacked paras+bullets+quote.
   Tighten the rhythm and give the pull-quote real separation + an accent. */
.page-giving .feature__copy { max-width: 540px; }
.page-giving .feature__copy h2 + .feature__rule { margin-bottom: 28px; }
.page-giving .feature__desc { margin-bottom: 22px; max-width: 520px; }
.page-giving .di-bullets { margin-bottom: 26px; }
.page-giving .feature__quote {
  margin: 30px 0; padding: 4px 0 4px 22px; max-width: 520px;
  border-left: 2px solid var(--c01); color: #fff; line-height: 26px;
}
.page-giving .feature__quote em { color: #fff; }

/* Giving Back CTA: Contact Us sits inline next to Book a Free Consultation by
   default; stack it below with a small gap instead. */
.page-giving .cta__content { display: flex; flex-direction: column; align-items: flex-start; }
.page-giving .cta__content .btn + .btn { margin-top: 15px; }

/* ===== Blog: ported live posts (data-driven) ===== */
/* Fit the @1920 container padding to smaller desktops (index + detail). */
@media (min-width: 769px) and (max-width: 1900px) {
  .page-blog .blog-body .container { padding-inline: 96px; }
  .page-blog-detail .bd-body .container { padding-inline: 120px; }
}
/* Injected post body: style raw HTML to match the bd-* article typography. */
.bd-content {
    margin-top: 60px;
    /* max-width: 900px; */
}
.bd-content > *:first-child { margin-top: 0; }
.bd-content p { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 26px; letter-spacing: -.32px; color: #fff; margin: 0 0 20px; }
.bd-content h2 { font-family: var(--font-head); font-weight: 400; font-size: 34px; line-height: 1.15; letter-spacing: -.6px; color: #fff; margin: 48px 0 18px; }
.bd-content h3 { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 26px; letter-spacing: -.32px; color: var(--c01); margin: 32px 0 10px; }
.bd-content h3 strong { font-weight: 600; }
.bd-content ul, .bd-content ol { margin: 0 0 24px; padding-left: 22px; max-width: 820px; }
.bd-content ul { list-style: disc; }
.bd-content ol { list-style: decimal; }
.bd-content li { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 26px; letter-spacing: -.32px; color: #fff; margin-bottom: 8px; padding-left: 4px; }
.bd-content a { color: var(--c01); text-decoration: underline; }
.bd-content strong { font-weight: 600; color: #fff; }
.bd-content img { display: block; width: 100%; max-width: 820px; height: auto; border-radius: 8px; margin: 28px 0; }
@media (max-width: 768px) {
  .bd-content { margin-top: 32px; }
  .bd-content h2 { font-size: 24px; margin: 36px 0 14px; }
}

/* ===== For Dentists: referral forms + downloads ===== */
/* Two links in a card foot (Dental Referrals: online + printable PDF). */

/* Oral surgery info-sheet downloads list on the referral-forms parent. */
.orf-downloads { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; max-width: 980px; }
.orf-downloads li { border-bottom: 1px solid #2a2a2a; }
.orf-downloads li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 2px; color: #fff; text-decoration: none; font: 300 16px/1.4 var(--font-body); letter-spacing: -.32px; transition: color var(--dur) var(--ease); }
.orf-downloads li a::after { content: "\2193"; color: var(--c01); font-size: 18px; }
.orf-downloads li a:hover { color: var(--c01); }
@media (max-width: 768px) { .orf-downloads { grid-template-columns: 1fr; } }

/* Referral form pages */
.referral { padding-top: var(--header-h); }
@media (max-width: 768px) { .referral { padding-top: 83px; } }
.rf-body { padding-block: 40px 0px; }
@media (min-width: 769px) and (max-width: 1900px) { .page-referral .rf-body .container { padding-inline: 96px; } }
.rf-head { max-width: 1100px; }
.rf-head .rf-title { color: #fff; margin: 0; }
.rf-intro { color: var(--ink-muted); font: 300 16px/26px var(--font-body); letter-spacing: -.32px; margin: 24px 0 0; /* max-width: 820px; */ }
.rf-required { color: var(--c01); font: 500 14px/1.4 var(--font-body); margin: 24px 0 0; }
.rf-form { max-width: 1100px; margin-top: 48px; }
.rf-fieldset { border: 0; margin: 0 0 44px; padding: 0; }
.rf-legend { display: block; font-family: var(--font-head); font-weight: 400; font-size: 26px; line-height: 1.2; color: #fff; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid #2a2a2a; width: 100%; }
.rf-field { margin: 0 0 12px; }
.rf-label { display: block; font: 500 14px/1.4 var(--font-body); letter-spacing: -.2px; color: #fff; margin-bottom: 8px; }
.rf-label .req { color: var(--c01); margin-left: 2px; }


.rf-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B46A55' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.rf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rf-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.rf-radios { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.rf-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 28px; }
.rf-radio, .rf-check { display: flex; align-items: flex-start; gap: 10px; color: #fff; font: 300 15px/1.4 var(--font-body); cursor: pointer; }
.rf-radio input, .rf-check input { accent-color: var(--c01); width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; }
.rf-note { color: var(--ink-muted); font: 300 14px/1.6 var(--font-body); margin: 8px 0 0; }
.rf-file { color: #fff; font: 300 15px/1.4 var(--font-body); }
.rf-submit { margin-top: 20px; }
.rf-privacy { color: var(--ink-muted); font: 300 14px/1.5 var(--font-body); margin: 20px 0 0; }
.rf-privacy a { color: var(--c01); }
@media (max-width: 768px) { .rf-grid, .rf-grid--3, .rf-checks { grid-template-columns: 1fr; } }

/* Buttons must never wrap to two lines (the outline dash grows on hover and
   was tipping long labels onto a second line). */
.btn { white-space: nowrap; }

/* Online Referral Forms parent: tidy the feature copy rhythm (the 80px desc
   margins looked messy with stacked intro + bullets + closing paragraph) and
   give the oral-surgery info-sheets section proper breathing room. */
.page-referrals .feature__copy h2 + .feature__rule { margin-bottom: 28px; }
.page-referrals .feature__desc { margin-bottom: 22px; }
.page-referrals .feature .di-bullets { margin: 6px 0 22px; }
.page-referrals .feature__desc:last-child { margin-bottom: 0; }
.orf-info { padding-top: 140px; }
.orf-info .container { padding-inline: var(--side-60); }
@media (max-width: 768px) { .orf-info { padding-block: 56px 0; } }

/* cf-hero (education + costs) uses @1920 fixed flex widths (546 + 968 = 1514px)
   with no upper bound, which overflows below 1920. Fit it to the viewport. */
@media (min-width: 769px) and (max-width: 1900px) {
  .cf-hero__text { flex: 0 1 40%; /* padding-top: 72px; */ }
  .cf-hero__media { flex: 0 1 54%; }
}

/* Education & Training uses cf-hero, which needs a wrapper for nav clearance
   (cf-hero itself only has 36px top padding). */
.edu-clear { padding-top: var(--header-h); }

/* Inner-page SBS consistency: the feature component's media is 960px tall
   (a homepage-scale showcase), which dwarfs the standard treatment inner-page
   di-split square (488px). Scope a smaller feature media to the About-Us /
   For-Dentists content pages only — the homepage keeps its big showcase (and
   has no page wrapper to safely target). */
@media (min-width: 769px) {
  .page-referrals .feature__media,
  .page-giving .feature__media,
  .edu-clear .feature__media,
  .page-lab .feature__media,
  .page-join .feature__media { height: 620px; }
}

/* Location pages: the @1920 loc-* layout (fixed 748px media, wide hero grid)
   has no upper bound and overflows below 1920 — fit it to the viewport. */
@media (min-width: 769px) and (max-width: 1900px) {
  .page-location .loc-hero .container,
  .page-location .loc-intro .container,
  .page-location .loc-why .container,
  .page-location .loc-parking .container,
  .page-location .loc-services .container { max-width: none; padding-inline: 96px; gap: 40px;}
  .page-location .loc-intro__media img,
  .page-location .loc-why__media img { width: 100%; height: auto; }
  .page-location .loc-intro__grid,
  .page-location .loc-why__panel { gap: 48px; }
}

/* Location hero grid: fixed 632px info + 784px map (@1920) overflow at 1440.
   Make the two columns shrinkable so the map stays on-screen. min-width:0 is
   essential — flex items default to min-width:auto (min-content), and the
   Google Map's content otherwise refuses to shrink below its intrinsic size. */
@media (min-width: 769px) and (max-width: 1900px) {
  .page-location .loc-hero__info { flex: 1 1 40%; min-width: 0; padding-top: 8px; }
  .page-location .loc-hero__map { flex: 1 1 54%; min-width: 0; }
}

/* Location pages embed a Google Map whose internal panes can render wider than
   their container and escape overflow:hidden. Clip horizontal overflow at the
   page wrapper (overflow-x:clip keeps vertical flow intact, no scroll container). */
.page-location { overflow-x: clip; }

/* Location intro + why: fixed @1920 columns (748 media + 632/524 body) don't
   shrink, so the text ran off-page (only hidden by overflow-x:clip). Make the
   columns proportional + shrinkable at 1440, and trim the why-panel padding. */
@media (min-width: 769px) and (max-width: 1900px) {
  /* Media sizing: intro sits in the plain container, why/parking in a padded
     card, so match the sizes by giving the card media a larger share + trimming
     its padding (were 625 vs 558 across sections). */
  .page-location .loc-intro__media { flex: 1 1 48%; min-width: 0; }
  .page-location .loc-intro__body { flex: 1 1 46%; min-width: 0; }
  .page-location .loc-why__panel { padding: 0 56px; }
  .page-location .loc-why__body { flex: 1 1 40%; min-width: 0; padding-top: 88px; }
  .page-location .loc-why__media { flex: 1 1 52%; min-width: 0; }
}
/* Space the closing CTA off the last location section (was flush, gap 0). */
.page-location .cta { margin-top: 160px; }
@media (max-width: 768px) { .page-location .cta { margin-top: 88px; } }

/* Location get-directions link sat too tight under the opening hours. */
.page-location .loc-contact__maplink { margin-top: 28px; }
/* Location services grid ("Full-service care under one roof") needs breathing room. */
.loc-treatments { padding-block: 100px; }
@media (max-width: 768px) { .loc-treatments { padding-block: 56px; } }
.loc-treatments[aria-label="Treatments available in Bishop Auckland"] { padding-block: 100px 0; }

/* Location parking/section CTA button sat tight under the paragraph above. */
.page-location .loc-intro__body .btn,
.page-location .loc-why__body .btn { margin-top: 28px; }

/* Booking page: the @1920 bk-form layout (632+632 fixed grid, 196/84 container
   padding) overflows below 1920 — fit it to the viewport. */
@media (min-width: 769px) and (max-width: 1900px) {
  .page-booking .bk-form .container { padding-inline: 96px; }
  .page-booking .bk-reviews .container { padding-inline: 96px; }
  .page-booking .bk-form__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
}

/* Booking note "Queensway Orthodontics website" link — the base <a> is
   color:inherit with no underline, so style it as the accent link. */
.bk-form__note a { color: var(--c01); text-decoration: underline; text-underline-offset: 2px; }
.bk-form__note a:hover { color: var(--c01-deep, #8a4a38); }

/* Legal / footer pages: nav clearance + typography for ported legal copy. */
.legal { padding-top: var(--header-h); }
.legal-content { /* max-width: 860px; */ margin-top: 32px; }
.legal-content h2 { font-family: var(--font-head); font-weight: 400; font-size: 28px; line-height: 1.2; color: #fff; margin: 40px 0 14px; }
.legal-content h3 { font-family: var(--font-body); font-weight: 600; font-size: 18px; color: var(--c01); margin: 28px 0 10px; }
.legal-content p { font: 300 16px/26px var(--font-body); letter-spacing: -.32px; color: var(--ink-muted); margin: 0 0 16px; }
.legal-content b, .legal-content strong { color: #fff; font-weight: 600; }
.legal-content a { color: var(--c01); text-decoration: underline; text-underline-offset: 2px; }
.legal-content ol, .legal-content ul { margin: 0 0 16px; padding-left: 26px; }
.legal-content > ol { list-style: decimal; }
.legal-content ol ol { list-style: lower-alpha; margin: 10px 0; }
.legal-content ul { list-style: disc; }
.legal-content li { font: 300 16px/26px var(--font-body); letter-spacing: -.32px; color: var(--ink-muted); margin-bottom: 10px; }
.legal-content li b { color: #fff; }

/* ===== Cookie consent: blocking top gate ===== */
/* Full-page scrim + scroll lock so a new visitor must action the banner first. */
.cookie-scrim { position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,.72); }
:root.cookie-locked body { overflow: hidden; }
.cookie-consent { position: fixed; left: 16px; right: 16px; top: 16px; z-index: 200; max-width: 900px; margin-inline: auto; background: #141414; border: 1px solid #333; border-radius: 12px; padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 33px; box-shadow: 0 22px 60px rgba(0,0,0,.6); }
.cookie-consent__text { flex: 1 1 300px; margin: 0; font: 300 14px/1.5 var(--font-body); color: #fff; }
.cookie-consent__text a { color: var(--c01); text-decoration: underline; }
.cookie-consent__actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.cookie-consent__btn { padding: 12px 22px; font-size: 14px; white-space: nowrap; }
/* De-emphasise "Essential only" (plain text link) so "Accept all" is the clear
   primary action a visitor is drawn to. */
.cookie-consent__btn--ghost { background: none; border: 0; padding: 12px 4px; color: rgba(255,255,255,.6); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie-consent__btn--ghost:hover { color: #fff; }
@media (max-width: 560px) { .cookie-consent { flex-direction: column; align-items: stretch; } .cookie-consent__text { flex: 0 0 auto; } .cookie-consent__actions { justify-content: center; } }

/* ===== 404 ===== */
.page-notfound .nf {
    padding-top: calc(var(--header-h) + 100px);
    /* padding-bottom: 160px; */
}
.nf__inner { max-width: 940px; }
.nf__eyebrow { color: var(--c01); font: 500 14px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 20px; }
.nf__title { color: #fff; margin: 0; }
.nf__text { color: var(--ink-muted); font: 300 16px/26px var(--font-body); margin: 24px 0 40px; max-width: 520px; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Mobile: stop horizontal scroll from the off-canvas nav menu + full-bleed
   media. overflow-x:clip (not hidden) doesn't create a scroll container, so the
   sticky header still works. */
html, body { overflow-x: clip; }