/* ==========================================================================
   Cura Dental — inner page sections
   Values transcribed from the Figma page frames.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Manrope — used for the pricing / plan cards in the design
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-display: 'Manrope', var(--font-sans);
}

/* --------------------------------------------------------------------------
   Inner page hero
   -------------------------------------------------------------------------- */

.page-hero {
  padding-top: 80px;
  padding-bottom: 35px;
  text-align: center;
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-hero__title {
  margin-top: 22px;
  max-width: 710px;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.04;
  color: var(--c-ink);
  letter-spacing: -0.4px;
}

/* The design highlights a trailing phrase in terracotta */
.page-hero__title em,
.page-hero__title .accent {
  font-style: normal;
  color: var(--c-terracotta);
}

.page-hero__lead {
  margin-top: 18px;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.58;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Full-width image band (inner pages use the standard 1136 content width)
   -------------------------------------------------------------------------- */

.practice-band--plain::before { display: none; }

.practice-band--plain .media {
  max-width: none;
  height: 420px;
}

.practice-band--h400 .media { height: 400px; }
.practice-band--h460 .media { height: 460px; }

/* --------------------------------------------------------------------------
   Our Story — image beside copy with paired highlight rows
   -------------------------------------------------------------------------- */

.story { padding-block: 80px; }

.story__inner {
  display: flex;
  align-items: center;
  gap: 64px;
}

.story__media {
  flex-shrink: 0;
  width: 460px;
  height: 560px;
}

.story__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.story__title {
  font-size: var(--fs-h2-sm);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-ink);
}

.story__text {
  margin-top: 18px;
  max-width: 567px;
  font-size: var(--fs-body);
  line-height: 1.58;
  color: var(--c-muted);
}

.story__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 27px;
  width: 100%;
}

.story__point {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-body);
  line-height: normal;
  color: var(--c-ink);
}

.story__point-a {
  font-weight: 700;
  flex-shrink: 0;
}

.story__point-b {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 500;
}

.story__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* Portrait photos and video covers keep their top edge in view when the box
   turns landscape on narrow screens, so a person's head is never cropped. */
.story__media img { object-position: 50% 0; }

/* --------------------------------------------------------------------------
   Practice Plan — copy beside a pricing card
   -------------------------------------------------------------------------- */

.plan {
  background: var(--c-cream);
  padding-block: 80px;
}

.plan__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  max-width: 1111px;
  margin-inline: auto;
}

.plan__body {
  width: 547px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.plan__title {
  margin-top: 18px;
  max-width: 381px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.12;
  color: var(--c-ink);
}

.plan__lead {
  margin-top: 16px;
  max-width: 524px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-muted);
}

.plan__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 24px;
  width: 100%;
}

.plan__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: normal;
  color: var(--c-ink);
}

.plan__tick {
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.plan__actions {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* Pricing card */
.price-card {
  width: 477px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 32px;
  border-radius: 8px;
  background: var(--c-white);
  font-family: var(--font-display);
}

.price-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--c-terracotta);
  line-height: normal;
}

.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 10px;
  line-height: normal;
}

.price-card__amount {
  font-size: 44px;
  font-weight: 800;
  color: var(--c-navy);
}

.price-card__period {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-terracotta);
}

.price-card__rule {
  width: 100%;
  height: 1px;
  margin-block: 20px;
  background: var(--c-border);
  border: 0;
}

.price-card__title {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: normal;
  color: var(--c-navy);
}

.price-card__text {
  margin-top: 8px;
  max-width: 392px;
  font-size: var(--fs-small);
  line-height: 1.58;
  color: var(--c-muted);
}

.price-card .btn {
  margin-top: 20px;
  font-family: var(--font-display);
}

/* Outlined navy button used inside the pricing card */
.btn--outline-navy {
  border-color: var(--c-navy);
  color: var(--c-navy);
  background: transparent;
}

.btn--outline-navy:hover {
  background: var(--c-navy);
  color: var(--c-white);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Responsive — inner pages
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .page-hero__title { font-size: 46px; }
  .page-hero__lead { font-size: 17px; }

  .story__inner { gap: 40px; }
  .story__media { width: 380px; height: 480px; }

  .plan__inner { gap: 40px; }
  .plan__body { width: auto; flex: 1 1 0; }
  .price-card { width: 400px; }
}

@media (max-width: 900px) {
  .story__inner,
  .plan__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .story__media {
    width: 100%;
    max-width: 520px;
    height: 420px;
  }

  .story__text,
  .plan__title,
  .plan__lead,
  .price-card__text { max-width: none; }

  .price-card { width: 100%; }
}

@media (max-width: 767px) {
  .page-hero { padding-top: 48px; padding-bottom: 24px; }
  .page-hero__title { font-size: 34px; margin-top: 16px; }
  .page-hero__lead { font-size: 16px; margin-top: 14px; }

  .practice-band--plain .media,
  .practice-band--h400 .media,
  .practice-band--h460 .media { height: 240px; }

  .story { padding-block: 56px; }
  .story__media { height: 300px; }
  .story__points { margin-top: 22px; }

  .story__point {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .plan { padding-block: 56px; }
  .plan__actions { width: 100%; }
  .plan__actions .btn { flex: 1 1 auto; }
  .story__cta { width: 100%; }
  .story__cta .btn { flex: 1 1 auto; }
  .price-card { padding: 24px; }
  .price-card__amount { font-size: 36px; }
}

/* --------------------------------------------------------------------------
   Pricing tiers — three plan cards, the middle one highlighted
   -------------------------------------------------------------------------- */

.tiers { padding-block: 40px; }

.tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  border: 1.5px solid #cccccc;
  border-radius: 8px;
  background: var(--c-white);
  transition: transform var(--dur-hover) var(--ease-soft),
    box-shadow var(--dur-hover) var(--ease-soft);
}

.tier:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -26px rgba(38, 75, 102, 0.5);
}

.tier--featured {
  background: var(--c-navy);
  border-color: var(--c-navy);
}

.tier__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  line-height: normal;
  color: var(--c-terracotta);
}

.tier--featured .tier__label { color: rgba(255, 255, 255, 0.66); }

.tier__name {
  font-size: 24px;
  font-weight: 800;
  line-height: normal;
  color: var(--c-ink);
}

.tier--featured .tier__name { color: var(--c-cream-alt); }

.tier__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 14px;
  line-height: normal;
}

.tier__amount {
  font-size: 44px;
  font-weight: 800;
  color: var(--c-ink);
}

.tier--featured .tier__amount { color: var(--c-cream-alt); }

.tier__period {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.tier--featured .tier__period { color: rgba(255, 255, 255, 0.66); }

.tier__list {
  width: 100%;
  margin-top: 9px;
}

/* Shared tick-list row used by plan tiers and pricing bands */
.tick-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 7px;
  font-weight: 700;
  line-height: normal;
}

.tick-row__mark {
  font-size: var(--fs-label);
  flex-shrink: 0;
  color: var(--c-ink);
}

.tick-row__text {
  font-size: var(--fs-body);
  color: var(--c-navy);
}

.tier--featured .tick-row__mark,
.tier--featured .tick-row__text { color: var(--c-white); }

.tier .btn { margin-top: 20px; }

/* --------------------------------------------------------------------------
   Banding system
   -------------------------------------------------------------------------- */

.bands {
  background: rgba(244, 242, 236, 0.51);
  padding-top: 80px;
  padding-bottom: 44px;
}

.bands__title {
  margin-top: 18px;
  font-size: var(--fs-h2-sm);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-ink);
}

.bands__lead {
  margin-top: 16px;
  max-width: 659px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-muted);
}

.bands__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 14px;
  padding-block: 17px;
}

.band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  border-radius: 8px;
  background: var(--c-white);
  transition: transform var(--dur-hover) var(--ease-soft),
    box-shadow var(--dur-hover) var(--ease-soft);
}

.band:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -26px rgba(38, 75, 102, 0.4);
}

.band__name {
  font-size: 24px;
  font-weight: 800;
  line-height: normal;
  color: var(--c-navy);
}

.band__text {
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-muted);
}

.band__list {
  width: 100%;
  margin-top: 23px;
}

.band .tick-row__mark { color: var(--c-terracotta); }

.band__price {
  margin-top: 20px;
  font-size: 44px;
  font-weight: 800;
  line-height: normal;
  color: var(--c-navy);
}

/* --------------------------------------------------------------------------
   Treatment fee table
   -------------------------------------------------------------------------- */

.fees { padding-block: 80px; }

.fees__title {
  margin-top: 18px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.08;
  color: var(--c-ink);
}

.fee-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: separate;
  border-spacing: 0;
}

/* The header reads as one continuous cream pill across both columns. */
.fee-table__head th {
  padding: 16px 24px;
  background: var(--c-cream);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--c-navy);
  text-align: left;
}

.fee-table__head th:first-child { border-radius: 20px 0 0 20px; }

.fee-table__head th:last-child {
  border-radius: 0 20px 20px 0;
  text-align: right;
}

.fee-table tbody td {
  padding: 18px 24px;
  font-size: var(--fs-body);
  color: var(--c-ink);
  border-top: 1px solid var(--c-border);
}

.fee-table tbody tr:first-child td { border-top: 0; }

.fee-table__name { font-weight: 500; }

.fee-table__price {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.fees__note {
  margin-top: 18px;
  font-size: var(--fs-small);
  line-height: 1.58;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Finance / "Care that fits your budget"
   -------------------------------------------------------------------------- */

.finance {
  padding-top: 36px;
  padding-bottom: 95px;
}

.finance__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
}

.finance__media {
  flex-shrink: 0;
  width: 504px;
  height: 520px;
}

.finance__body {
  width: 529px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.finance__title {
  margin-top: 18px;
  font-size: var(--fs-h2-sm);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-ink);
}

.finance__lead {
  margin-top: 16px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-muted);
}

.finance__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
  width: 100%;
}

.finance__cta { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Responsive — Plans & Fees
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .tiers__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .bands__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }

  .finance__inner { gap: 40px; }
  .finance__media { width: 420px; height: 460px; }
  .finance__body { width: auto; flex: 1 1 0; }
}

@media (max-width: 900px) {
  .finance__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .finance__media {
    width: 100%;
    max-width: 520px;
    height: 400px;
  }
}

@media (max-width: 767px) {
  .tiers { padding-block: 24px; }
  .tier { padding: 24px; }
  .tier__amount { font-size: 36px; }

  .bands { padding-top: 56px; padding-bottom: 32px; }
  .band { padding: 24px; }
  .band__price { font-size: 36px; }

  .fees { padding-block: 56px; }
  .fee-table__head th { padding: 14px 16px; }
  .fee-table tbody td { padding: 15px 16px; font-size: 15px; }

  .finance { padding-top: 24px; padding-bottom: 56px; }
  .finance__media { height: 300px; }
}

/* --------------------------------------------------------------------------
   Contact — enquiry form beside practice detail cards
   -------------------------------------------------------------------------- */

.enquiry { padding-block: 71px; }

.enquiry__inner {
  display: flex;
  align-items: flex-start;
  gap: 37px;
}

.enquiry__form {
  width: 572px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.enquiry__details {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Form controls */
.form { width: 100%; margin-top: 20px; }

.form__field { margin-bottom: 4px; }

.form__label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--c-ink);
}

.form__input,
.form__textarea {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(38, 75, 102, 0.12);
  border-radius: 6px;
  background: #fafafa;
  font-size: var(--fs-small);
  line-height: normal;
  color: var(--c-ink);
  transition: border-color 320ms var(--ease-gentle), box-shadow 320ms var(--ease-gentle);
}

.form__textarea {
  height: 120px;
  padding: 16px;
  resize: vertical;
  line-height: 1.5;
}

.form__input::placeholder,
.form__textarea::placeholder { color: var(--c-muted); }

.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px rgba(38, 75, 102, 0.1);
}

.form__submit { margin-top: 16px; }
.form__submit .btn { width: 100%; }

/* Honeypot — hidden from people, visible to bots */
.form__pot {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__notice {
  width: 100%;
  margin-bottom: 16px;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: var(--fs-small);
  line-height: 1.55;
}

.form__notice--ok {
  background: rgba(38, 75, 102, 0.08);
  color: var(--c-navy);
}

.form__notice--error {
  background: rgba(172, 78, 53, 0.1);
  color: var(--c-terracotta);
}

/* Detail cards */
.detail-card {
  padding: 24px;
  border-radius: 8px;
  background: #f9f8f5;
}

.detail-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: var(--c-ink);
  margin-bottom: 4px;
}

.detail-card__body {
  font-size: 15px;
  line-height: 1.58;
  color: var(--c-muted);
}

.detail-card__body a {
  transition: color var(--dur-hover) var(--ease-gentle);
}

.detail-card__body a:hover { color: var(--c-navy); }

.detail-card .btn { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Find Us — three-up gallery on navy
   -------------------------------------------------------------------------- */

.findus {
  background: var(--c-navy);
  padding-block: 80px;
}

.findus__title {
  margin-top: 18px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-white);
  text-align: center;
}

.findus__lead {
  margin-top: 16px;
  max-width: 720px;
  font-size: var(--fs-body);
  line-height: 1.58;
  color: var(--c-white);
  text-align: center;
}

.findus__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.findus__grid .media { height: 300px; }

@media (max-width: 900px) {
  .enquiry__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .enquiry__form { width: 100%; }
}

@media (max-width: 767px) {
  .enquiry { padding-block: 48px; }

  .findus { padding-block: 56px; }
  .findus__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
  .findus__grid .media { height: 220px; }
}

/* --------------------------------------------------------------------------
   NHS — notice bar, cream bands, treatment link list
   -------------------------------------------------------------------------- */

.note-bar {
  background: var(--c-cream);
  padding-block: 24px;
}

.note-bar__text {
  font-size: var(--fs-small);
  line-height: 1.58;
  color: var(--c-navy);
  text-align: center;
}

/* NHS band cards sit on a soft cream rather than white */
.bands--nhs {
  background: transparent;
  padding-top: 43px;
  padding-bottom: 52px;
}

.bands--nhs .band { background: rgba(244, 242, 236, 0.49); }

.bands--nhs .section-head { align-items: center; text-align: center; }
.bands--nhs .bands__title { text-align: center; }
.bands--nhs .bands__lead { max-width: none; text-align: center; }
.bands--nhs .bands__grid { margin-top: 12px; }

/* Treatment link list */
.linklist-section {
  background: #f9f8f5;
  padding-block: 80px;
}

.linklist-section__title {
  margin-top: 18px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.08;
  color: var(--c-ink);
}

.linklist-section__lead {
  margin-top: 16px;
  font-size: var(--fs-body);
  line-height: 1.58;
  color: var(--c-muted);
}

.linklist { margin-top: 36px; }

.linklist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  border-top: 1px solid #e0e0e0;
  transition: padding-inline 520ms var(--ease-soft);
}

.linklist__row:first-child { border-top: 0; }

.linklist__row:hover { padding-inline: 8px; }

.linklist__title {
  font-size: var(--fs-step-title);
  font-weight: 700;
  line-height: normal;
  color: var(--c-ink);
}

.linklist__text {
  margin-top: 5px;
  font-size: var(--fs-small);
  line-height: normal;
  color: var(--c-muted);
}

.linklist__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink);
}

.linklist__action span { transition: transform var(--dur-hover) var(--ease-soft); }
.linklist__row:hover .linklist__action span { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Referral form
   -------------------------------------------------------------------------- */

.referral { padding-block: 71px; }

.referral__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.referral__title {
  margin-top: 18px;
  font-size: var(--fs-h2-sm);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-ink);
}

.referral__lead {
  margin-top: 16px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   News index
   -------------------------------------------------------------------------- */

.news { padding-block: 60px 80px; }

.news__featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 72px;
}

.news__featured .media { height: 380px; }

.article-card { display: block; }

.article-card .media { height: 240px; }

.article-card__meta {
  margin-top: 16px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-terracotta);
}

.article-card__title {
  margin-top: 8px;
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-ink);
  transition: color var(--dur-hover) var(--ease-gentle);
}

.article-card:hover .article-card__title { color: var(--c-navy); }

.article-card__excerpt {
  margin-top: 8px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-muted);
}

.article-card__more { margin-top: 14px; }

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
}

.news__featured .article-card__title { font-size: var(--fs-h2-sm); line-height: 1.12; }
.news__featured .article-card__excerpt { font-size: var(--fs-body); line-height: 1.6; }

/* Newsletter */
.newsletter {
  background: var(--c-cream);
  padding-block: 72px;
}

.newsletter__inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.newsletter__title {
  margin-top: 18px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.12;
  color: var(--c-ink);
}

.newsletter__lead {
  margin-top: 16px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-muted);
}

.newsletter__form {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  margin-top: 28px;
}

.newsletter__form .form__input { flex: 1 1 0; background: var(--c-white); }
.newsletter__form .btn { flex-shrink: 0; }

.newsletter__note {
  margin-top: 14px;
  font-size: var(--fs-label);
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Single article
   -------------------------------------------------------------------------- */

.article-head {
  padding-top: 60px;
  padding-bottom: 40px;
  text-align: center;
}

.article-head__inner {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-head__title {
  margin-top: 18px;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-ink);
  letter-spacing: -0.3px;
}

.article-head__meta {
  margin-top: 18px;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.article-divider {
  height: 1px;
  background: var(--c-border);
}

.article-hero { padding-block: 0; }

.article-hero .media {
  max-width: 1032px;
  margin-inline: auto;
  height: 420px;
}

.article-body { padding-block: 64px 40px; }

.article-body__inner {
  max-width: 720px;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-ink);
}

.article-body__inner > * + * { margin-top: 24px; }

.article-body__inner h2 {
  margin-top: 44px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}

.article-body__inner h3 {
  margin-top: 36px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.article-body__inner ul,
.article-body__inner ol {
  padding-left: 22px;
  list-style: disc;
}

.article-body__inner ol { list-style: decimal; }
.article-body__inner li + li { margin-top: 10px; }

.article-body__inner a {
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body__inner blockquote {
  padding-left: 24px;
  border-left: 3px solid var(--c-terracotta);
  font-size: 19px;
  line-height: 1.6;
  color: var(--c-muted);
}

.article-body__inner img { border-radius: var(--r-card); }

.related { padding-block: 56px 80px; }

.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Responsive — remaining pages
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .news__grid,
  .related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .referral__inner { grid-template-columns: 1fr; gap: 40px; }
  .news__featured { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
  .news__featured .media { height: 280px; }
  .news__featured .article-card__title { font-size: 28px; }
}

@media (max-width: 767px) {
  .linklist-section { padding-block: 56px; }
  .linklist { margin-top: 24px; }

  .linklist__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-block: 18px;
  }

  .linklist__row:hover { padding-inline: 0; }

  .referral { padding-block: 48px; }
  .bands--nhs { padding-block: 32px 40px; }

  .news { padding-block: 40px 56px; }
  .news__toolbar { margin-bottom: 28px; }
  .news__grid,
  .related__grid { grid-template-columns: 1fr; gap: 32px; }

  .newsletter { padding-block: 56px; }
  .newsletter__form { flex-direction: column; }
  .newsletter__form .btn { width: 100%; }

  .article-head { padding-top: 40px; padding-bottom: 28px; }
  .article-head__title { font-size: 30px; }
  .article-hero .media { height: 240px; }
  .article-body { padding-block: 40px 24px; }
  .article-body__inner { font-size: 16px; }
  .article-body__inner h2 { font-size: 23px; margin-top: 32px; }
  .related { padding-block: 40px 56px; }
}

/* --------------------------------------------------------------------------
   Treatment detail
   -------------------------------------------------------------------------- */

.treatment-hero { padding-block: 64px; }

.treatment-hero__inner {
  display: flex;
  align-items: center;
  gap: 64px;
}

.treatment-hero__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.treatment-hero__title {
  margin-top: 22px;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.04;
  color: var(--c-ink);
  letter-spacing: -0.4px;
}

.treatment-hero__lead {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.58;
  color: var(--c-muted);
}

.treatment-hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.treatment-hero__media {
  flex-shrink: 0;
  width: 554px;
  height: 540px;
}

/* Per-treatment framing (Treatments → "Hero image framing"): the hero panel is
   wider than the featured image, so the edge to keep in view is chosen on the
   treatment rather than with a site-wide rule. */
.treatment-hero__media--top img { object-position: 50% 0; }
.treatment-hero__media--bottom img { object-position: 50% 100%; }

/* Overview beside benefits */
.involves {
  background: #f9f8f5;
  padding-top: 59px;
  padding-bottom: 24px;
}

.involves__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  max-width: 1028px;
  margin-inline: auto;
}

.involves__overview {
  width: 657px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.involves__title {
  margin-top: 6px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.12;
  color: var(--c-ink);
}

.involves__text {
  margin-top: 18px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-muted);
}

.involves__text > * + * { margin-top: 16px; }

.involves__benefits {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.involves__benefits-title {
  margin-top: 7px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.12;
  color: var(--c-ink);
}

.involves__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  width: 100%;
}

.involves__cta { margin-top: 33px; }

/* Treatment archive grid reuses the homepage treatment cards */
.treatment-archive { padding-block: 60px 80px; }

@media (max-width: 1024px) {
  .treatment-hero__title { font-size: 44px; }
  .treatment-hero__media { width: 440px; height: 460px; }
  .involves__overview { width: auto; flex: 1.4 1 0; }
  .involves__inner { gap: 40px; }
}

@media (max-width: 900px) {
  .treatment-hero__inner,
  .involves__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .treatment-hero__media {
    order: -1;
    width: 100%;
    max-width: 554px;
    height: 400px;
  }

  .involves__overview { width: auto; }
}

@media (max-width: 767px) {
  .treatment-hero { padding-block: 40px; }
  .treatment-hero__title { font-size: 34px; margin-top: 16px; }
  .treatment-hero__lead { font-size: 16px; margin-top: 16px; }
  .treatment-hero__actions { width: 100%; margin-top: 24px; }
  .treatment-hero__actions .btn { flex: 1 1 auto; }
  .treatment-hero__media { height: 300px; }

  .involves { padding-top: 40px; padding-bottom: 16px; }
  .involves__title { font-size: 26px; }
  .involves__benefits-title { font-size: 22px; }

  .treatment-archive { padding-block: 40px 56px; }
}

/* --------------------------------------------------------------------------
   Flex-column overflow guard
   --------------------------------------------------------------------------
   In a column flex container, a text child sizes to its max-content width
   (capped only by its own max-width), which can exceed the container on narrow
   screens and push content outside the viewport. Anchoring these children to
   100% width lets each element's own max-width do the capping instead, at
   every breakpoint.
   -------------------------------------------------------------------------- */

/* Centred intros */
.hero__inner > *,
.section-head > *,
.page-hero__inner > *,
.newsletter__inner > * {
  width: 100%;
  margin-inline: auto;
}

/* Left-aligned bodies */
.split__body > *,
.story__body > *,
.plan__body > *,
.finance__body > *,
.enquiry__form > *,
.involves__overview > *,
.involves__benefits > *,
.treatment-hero__body > *,
.referral__inner > * > * {
  width: 100%;
}

/* Long unbroken strings (emails, URLs) must never widen a column */
.site-footer__detail,
.detail-card__body,
.article-body__inner {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Before & After — centred intro over a two-up grid
   -------------------------------------------------------------------------- */

.beforeafter {
  padding-top: 35px;
  padding-bottom: 80px;
}

.beforeafter__title {
  margin-top: 18px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-ink);
  text-align: center;
}

.beforeafter__lead {
  margin-top: 16px;
  max-width: 720px;
  font-size: var(--fs-body);
  line-height: 1.58;
  color: var(--c-muted);
  text-align: center;
}

/* Cases: two side by side; three or more scroll as a carousel (see app.js) */
.beforeafter__cases {
  position: relative;
  margin-top: 46px;
}

.beforeafter__track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.beforeafter__cases--single .beforeafter__track {
  grid-template-columns: minmax(0, 556px);
  justify-content: center;
}

.beforeafter__cases--carousel .beforeafter__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.beforeafter__cases--carousel .beforeafter__track::-webkit-scrollbar { display: none; }

.beforeafter__cases--carousel .ba-case {
  flex: 0 0 calc((100% - 24px) / 2);
  scroll-snap-align: start;
}

/* A single case: before photo under an after photo clipped from the divider rightwards */
.ba-case { margin: 0; }

.ba-case__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 556 / 360;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-cream);
  user-select: none;
  -webkit-user-select: none;
}

/* Each photo is a layer; the layer's --wf/--hf (displayed size as a fraction of
   the frame) and --fx/--fy (focus point) come from cura_beforeafter_layer_style(),
   so the full photo is masked by the frame rather than cropped on disk. */
.ba-case__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ba-case__layer--after { clip-path: inset(0 0 0 var(--ba-pos)); }

.ba-case__img {
  position: absolute;
  left: calc(50% - var(--fx, 0.5) * var(--wf, 1) * 100%);
  top: calc(50% - var(--fy, 0.5) * var(--hf, 1) * 100%);
  width: calc(var(--wf, 1) * 100%);
  max-width: none;
  height: auto;
}

.ba-case__pill {
  position: absolute;
  top: 16px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.24px;
  line-height: normal;
  color: var(--c-navy-deep);
  pointer-events: none;
}

.ba-case__pill--before { left: 16px; }
.ba-case__pill--after { right: 16px; }

.ba-case__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: var(--c-white);
  pointer-events: none;
}

.ba-case__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 4px 14px rgba(24, 54, 75, 0.22);
  color: var(--c-navy);
}

.ba-case__handle svg { width: 18px; height: 18px; }

/* The range input is the control: it covers the frame invisibly, so mouse drag,
   touch and the arrow keys all move the divider. */
.ba-case__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}

.ba-case__frame:has(.ba-case__range:focus-visible) {
  outline: 2px solid var(--c-navy);
  outline-offset: 3px;
}

.ba-case__caption {
  margin-top: 14px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-muted);
  text-align: center;
}

.beforeafter__arrow {
  position: absolute;
  top: calc(var(--ba-frame-h, 360px) / 2);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color var(--dur-hover) var(--ease-gentle), color var(--dur-hover) var(--ease-gentle), opacity var(--dur-hover) var(--ease-gentle);
}

.beforeafter__arrow svg { width: 20px; height: 20px; }
.beforeafter__arrow:hover { border-color: var(--c-navy); color: var(--c-navy); }
.beforeafter__arrow[disabled] { opacity: 0.35; cursor: default; }
.beforeafter__arrow--prev { left: -64px; }
.beforeafter__arrow--next { right: -64px; }

.beforeafter__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.beforeafter__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(38, 75, 102, 0.25);
  cursor: pointer;
  transition: width var(--dur-hover) var(--ease-gentle), background-color var(--dur-hover) var(--ease-gentle);
}

.beforeafter__dot.is-active {
  width: 28px;
  background: var(--c-navy);
}

.beforeafter__note {
  margin-top: 28px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-muted);
  text-align: center;
}

@media (max-width: 1279px) {
  .beforeafter__arrow--prev { left: 8px; }
  .beforeafter__arrow--next { right: 8px; }
}

/* --------------------------------------------------------------------------
   Practice Gallery — three-up on navy, left-aligned intro
   -------------------------------------------------------------------------- */

.gallery {
  background: var(--c-navy);
  padding-block: 80px;
}

.gallery__title {
  margin-top: 18px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-white);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.gallery__grid .media { height: 300px; }

/* --------------------------------------------------------------------------
   News categories row
   -------------------------------------------------------------------------- */

.categories {
  padding-top: 20px;
  padding-bottom: 40px;
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Tiles are scoped to the section because WordPress also puts a "category"
   class on <body> on category archives. */
.categories .category { display: block; }

.categories .category .media { height: 124px; }

.category__label {
  margin-top: 12px;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: normal;
  color: var(--c-ink);
  text-align: center;
  transition: color var(--dur-hover) var(--ease-gentle);
}

.categories .category:hover .category__label { color: var(--c-navy); }

/* The category the visitor is currently viewing */
.categories .category.is-current .media {
  outline: 2px solid var(--c-navy);
  outline-offset: 3px;
}

.categories .category.is-current .category__label {
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Category archive — count and reset link, empty state, pagination */
.news__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 36px;
}

.news__count {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-muted);
}

.news__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 8px 0 24px;
}

.news__empty .lead { max-width: 560px; }

.news .pagination { margin-top: 56px; }

.news .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.news .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink);
  transition: border-color var(--dur-hover) var(--ease-gentle), color var(--dur-hover) var(--ease-gentle);
}

.news a.page-numbers:hover { border-color: var(--c-navy); color: var(--c-navy); }

.news .page-numbers.current {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   Holding page
   -------------------------------------------------------------------------- */

.holding {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px var(--gutter);
  background: var(--c-navy-deep);
  overflow: hidden;
}

.holding__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.holding__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
}

.holding__inner {
  position: relative;
  z-index: 2;
  width: 660px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.holding__inner > * { max-width: 100%; }

.holding__logo {
  display: block;
  width: 231px;
  height: 74px;
  margin-bottom: 40px;
}

.holding__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.holding__title {
  margin-top: 20px;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.04;
  color: var(--c-white);
  letter-spacing: -0.4px;
}

.holding__lead {
  margin-top: 20px;
  max-width: 582px;
  font-size: var(--fs-body);
  line-height: 1.58;
  color: var(--c-white);
}

.holding__form {
  display: flex;
  gap: 10px;
  margin-top: 34px;
}

.holding__form .form__input {
  width: 320px;
  height: 54px;
  padding-inline: 20px;
  border: 0;
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.09);
  color: var(--c-white);
  font-size: var(--fs-small);
}

.holding__form .form__input::placeholder { color: rgba(255, 255, 255, 0.65); }

.holding__form .form__input:focus {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.holding__form .btn {
  width: 163px;
  height: 54px;
  padding-block: 0;
  flex-shrink: 0;
}

.holding__contact {
  margin-top: 28px;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  color: #cccccc;
}

.holding__contact strong { font-weight: 900; color: var(--c-white); }
.holding__contact a { transition: color var(--dur-hover) var(--ease-gentle); }
.holding__contact a:hover { color: var(--c-white); }
.holding__contact-gap { display: inline-block; width: 40px; }

.holding__whatsapp {
  width: 260px;
  height: 50px;
  margin-top: 37px;
  padding-block: 0;
}

.holding__emergency {
  width: 260px;
  margin-top: 22px;
  padding: 18px 22px;
  font-size: var(--fs-label);
  letter-spacing: 0.13px;
}

/* Decorative arches flanking the content */
.holding__arch {
  position: absolute;
  top: 210px;
  width: 190px;
  height: 440px;
  border-radius: 95px 95px 16px 16px;
  overflow: hidden;
  background: #1e3c52;
  z-index: 1;
}

.holding__arch--left { left: 70px; }
.holding__arch--right { right: 70px; }

.holding__arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.holding__arch--right img { object-position: right center; }

@media (max-width: 1200px) {
  .holding__arch { display: none; }
}

@media (max-width: 767px) {
  .beforeafter { padding-top: 24px; padding-bottom: 56px; }
  .beforeafter__cases { margin-top: 32px; }
  .beforeafter__track { grid-template-columns: 1fr; gap: 16px; }
  .beforeafter__cases--carousel .ba-case { flex-basis: 100%; }
  .beforeafter__arrow { width: 40px; height: 40px; }

  .gallery { padding-block: 56px; }
  .gallery__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
  .gallery__grid .media { height: 220px; }

  .categories { padding-bottom: 32px; }
  .categories__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .categories .category .media { height: 96px; }
  .category__label { font-size: 14px; }

  .holding { padding: 56px var(--gutter); }
  .holding__logo { width: 180px; height: 58px; margin-bottom: 28px; }
  .holding__title { font-size: 34px; }
  .holding__form { flex-direction: column; width: 100%; max-width: 340px; }
  .holding__form .form__input,
  .holding__form .btn { width: 100%; }
  .holding__contact-gap { display: block; height: 6px; width: auto; }
  .holding__whatsapp,
  .holding__emergency { width: 100%; max-width: 300px; }
}