/* ==========================================================================
   FAMILY TREE DENTAL — SERVICE DETAIL PAGE
   ---------------------------------------------------------------------------
   Loaded only by /services/<slug>/. Everything shared — the chrome, the
   furniture, the hero, the section rail, the appointment band, the
   testimonials, the clinic panel, the closing call, the treatment rail — is
   in system.css and is NOT repeated here.

   What is left is the five blocks that only a treatment page has:

     05. Overview      the introduction, as an editorial spread
     06. Advantages    the bullet list, promoted
     07. Procedure     the dark chapter, and the timeline in it
     08. Alternatives  the comparison
     13. Questions     the accordion

   The numbering matches system.css's so the two files read as one document.
   ========================================================================== */


/* ==========================================================================
   05. OVERVIEW
   Copy left at a reading measure, photograph right, two glass cards
   straddling its corners, metadata under the copy. The photograph's column
   is deliberately the narrower — the sentences are the reason for the page.
   ========================================================================== */
.sv-overview {
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 4vh, 3rem) var(--sv-pad);
  background: #eef5fd;
}
.sv-overview__inner {
  width: var(--sv-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--sv-gap);
}
.sv-overview__copy .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }
.sv-overview__actions { margin-top: clamp(1.5rem, 3vh, 2rem); }

/* The holding state runs on the same grid but is shorter, so it gets a
   little more air above it rather than sitting against the rail. */
.sv-overview--brief { padding-top: clamp(3rem, 7vh, 5rem); }

/* --- Metadata -------------------------------------------------------------
   Three facts about the treatment, set as a definition list because that is
   what they are. Divided by hairlines rather than boxed — a card here would
   be a third card in a section that already has two.
   -------------------------------------------------------------------------- */
.sv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  margin-top: clamp(1.8rem, 3.6vh, 2.5rem);
  padding-top: clamp(1.25rem, 2.6vh, 1.75rem);
  border-top: 1px solid rgba(120, 170, 225, .3);
}
.sv-meta dt {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.sv-meta dd {
  margin-top: .3rem;
  font-family: var(--f-display);
  font-size: 1.12rem;
  color: var(--c-blue-900);
}

.sv-overview__media { position: relative; }
.sv-overview__frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  aspect-ratio: 4 / 4.4;
  border-radius: var(--sv-r-xl);
  background: linear-gradient(120deg, #f4fafd 0%, #dceaf8 46%, #bcd8f2 100%);
  box-shadow: 0 26px 60px rgba(11, 45, 82, .15);
}
.sv-overview__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
  transition: transform 1.4s var(--ease-soft);
}
.sv-overview__frame:hover img { transform: scale(1.04); }

/* The echo — a second rounded shape offset behind the photograph. The
   homepage's device, reused so both pages frame a picture the same way. */
.sv-overview__echo {
  position: absolute;
  z-index: 1;
  inset: 7% -5% -7% 6%;
  border: 1px solid rgba(120, 170, 225, .45);
  border-radius: calc(var(--sv-r-xl) + 6px);
  pointer-events: none;
}

.sv-float--tl { top: clamp(1rem, 3vw, 2.25rem); left: clamp(-3rem, -3.5vw, -1rem); width: min(15rem, 74%); }
.sv-float--br { right: clamp(-2.5rem, -3vw, -1rem); bottom: clamp(1rem, 3vw, 2.25rem); width: min(14rem, 68%); }


/* ==========================================================================
   06. ADVANTAGES
   ---------------------------------------------------------------------------
   The supplied bullet list, promoted. Each bullet keeps its ORIGINAL sentence
   and gains a number and a pulled keyword above it — the keyword is for
   scanning, the sentence is the content.

   THE HAIRLINE GRID: one background under a 1px-gapped grid draws every
   internal rule at once. No borders to cancel on the edge cells, and no
   double lines where two cells meet.
   ========================================================================== */
.sv-adv {
  position: relative;
  z-index: 1;
  padding-block: var(--sv-pad);
  background: var(--sv-white);
}
.sv-adv__inner { width: var(--sv-shell); margin-inline: auto; }
.sv-adv__head { max-width: 44ch; }
.sv-adv__head .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }

.sv-adv__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  list-style: none;
  background: rgba(120, 170, 225, .28);
  border: 1px solid rgba(120, 170, 225, .28);
  border-radius: var(--sv-r-lg);
  overflow: hidden;
}
.sv-adv__item {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--sv-white);
  transition: background var(--t-med) var(--ease-out);
}
.sv-adv__item:hover { background: #f7fbff; }

.sv-adv__num {
  display: block;
  font-family: var(--f-ui);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--c-blue-300);
  font-variant-numeric: var(--nums-tab);
  transition: color var(--t-med) var(--ease-out);
}
.sv-adv__item:hover .sv-adv__num { color: var(--c-accent); }

.sv-adv__title {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  font-family: var(--f-display);
  font-size: var(--sv-fs-h3);
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--c-blue-900);
}
/* AT BODY SIZE, like every other paragraph on the page. These cells held
   0.95rem — noticeably smaller than the prose immediately above and below
   them, which is part of what read as a change of font. Tested at every
   width first: no cell overflows, they simply grow. */
.sv-adv__text { margin-top: .7rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-soft); }

/* The last cell. Tinted, so it reads as the end of the list rather than as a
   missing advantage. */
.sv-adv__item--cta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.1rem;
  background: linear-gradient(155deg, #eef5fd 0%, #f7fbff 100%);
}
.sv-adv__item--cta:hover { background: linear-gradient(155deg, #e7f1fd 0%, #f4faff 100%); }
.sv-adv__cta-text {
  font-family: var(--f-display);
  font-size: 1.22rem;
  line-height: 1.32;
  color: var(--c-blue-900);
}
.sv-adv__item--cta .btn { align-self: flex-start; }


/* ==========================================================================
   07. PROCEDURE — the dark chapter
   ---------------------------------------------------------------------------
   The one dark panel on the page, and it is here for rhythm: four light
   sections in a row flatten out, and the treatment itself is the moment that
   earns the change of register.

   THE TIMELINE IS HORIZONTAL ON A DESKTOP and vertical below 980px, and the
   markup does not change between them: the connecting rule is a single
   element scaled on BOTH axes by the reveal, so the same tween draws it
   whichever way round it is.
   ========================================================================== */
.sv-steps {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: var(--hero-inset);
  padding-block: clamp(4rem, 11vh, 8rem);
  color: var(--sv-on-dark);
  border-radius: var(--sv-r-xl);
  background:
    radial-gradient(70% 90% at 88% 6%, rgba(127, 227, 212, .16) 0%, rgba(127, 227, 212, 0) 60%),
    linear-gradient(155deg, var(--sv-navy) 0%, var(--sv-navy-2) 52%, var(--sv-teal) 100%);
}
.sv-steps__glow {
  position: absolute;
  z-index: -1;
  top: -20%; left: -10%;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 114, 214, .34) 0%, rgba(26, 114, 214, 0) 68%);
  pointer-events: none;
}
.sv-steps__inner { width: min(1220px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sv-steps__head { max-width: 46ch; }
.sv-steps__head .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }
.sv-steps__lede {
  max-width: 44ch;
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sv-on-dark-soft);
}

.sv-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2.75rem, 6vh, 4.5rem);
  list-style: none;
}
.sv-step { position: relative; }
.sv-step__marker { display: flex; align-items: center; gap: .75rem; }
.sv-step__dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px; height: 52px;
  font-family: var(--f-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--sv-on-dark-hair);
  border-radius: 50%;
  font-variant-numeric: var(--nums-tab);
  transition: background var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.sv-step:hover .sv-step__dot {
  background: rgba(127, 227, 212, .16);
  border-color: rgba(127, 227, 212, .6);
  transform: translateY(-2px);
}
/* Scaled on BOTH axes by the reveal so the same tween works horizontally
   here and vertically on a phone. */
.sv-step__link {
  display: block;
  flex: 1 1 auto;
  height: 2px;
  background: repeating-linear-gradient(90deg,
              rgba(174, 207, 246, .4) 0 8px,
              rgba(174, 207, 246, 0) 8px 16px);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* Nothing follows the last marker, so its run is a short tail rather than a
   line to a circle that is not there. */
.sv-step__link--end {
  flex: 0 0 clamp(1rem, 3vw, 2.5rem);
  background: linear-gradient(90deg, rgba(174, 207, 246, .4), rgba(174, 207, 246, 0));
}

.sv-step__body { margin-top: clamp(1.1rem, 2.4vw, 1.6rem); }
.sv-step__title {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.2;
  color: #fff;
}
.sv-step__text { margin-top: .6rem; font-size: 0.925rem; line-height: 1.68; color: var(--sv-on-dark-soft); }

.sv-steps__media {
  position: relative;
  overflow: hidden;
  margin-top: clamp(3rem, 7vh, 5rem);
  border-radius: var(--sv-r-lg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}
.sv-steps__media img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: 50% 55%;
  transition: transform 1.6s var(--ease-soft);
}
.sv-steps__media:hover img { transform: scale(1.03); }
.sv-steps__media figcaption {
  position: absolute;
  left: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  max-width: min(30rem, 74%);
  padding: clamp(.9rem, 1.6vw, 1.2rem) clamp(1rem, 1.8vw, 1.4rem);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--glass-brd);
  border-radius: var(--sv-r-md);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
}
.sv-steps__media figcaption span {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--f-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-blue-700);
}


/* ==========================================================================
   08. ALTERNATIVES — the comparison
   ---------------------------------------------------------------------------
   The recommended treatment is stated ONCE, prominently, and sticks to the
   viewport while the alternatives scroll past it — so whatever you are
   comparing, the thing you are comparing it TO is still on screen.
   ========================================================================== */
.sv-alt {
  position: relative;
  z-index: 1;
  padding-block: var(--sv-pad);
  background: var(--sv-ivory);
}
.sv-alt__inner { width: var(--sv-shell); margin-inline: auto; }
.sv-alt__head { max-width: 52ch; }
.sv-alt__head .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }
.sv-alt__lede {
  max-width: 56ch;
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink-soft);
}

.sv-alt__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 5vh, 4rem);
}

.sv-alt__lead {
  position: sticky;
  /* Clears the header pill AND the section rail above it — the rail's own
     offset, plus the rail's height, plus a breath. */
  top: calc(var(--hero-inset) + var(--hero-pad) + 62px + 112px);
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  color: #fff;
  border-radius: var(--sv-r-lg);
  background:
    radial-gradient(80% 90% at 84% 8%, rgba(127, 227, 212, .2) 0%, rgba(127, 227, 212, 0) 60%),
    linear-gradient(150deg, var(--c-blue-700) 0%, var(--c-blue-900) 62%, #06213a 100%);
  box-shadow: 0 26px 60px rgba(10, 44, 82, .28);
}
.sv-alt__lead-title {
  margin-top: 1.1rem;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: #fff;
}
.sv-alt__lead-text { margin-top: .9rem; font-size: var(--fs-body); line-height: 1.7; color: var(--sv-on-dark-soft); }
.sv-alt__points {
  margin: 1.4rem 0 1.75rem;
  padding: 1.25rem 0 0;
  list-style: none;
  border-top: 1px solid var(--sv-on-dark-hair);
}
.sv-alt__points li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}
.sv-alt__points li + li { margin-top: .7rem; }
.sv-alt__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 9px; height: 9px;
  background: var(--c-mint);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(127, 227, 212, .16);
}

.sv-alt__others { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.sv-alt__card {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  padding-left: clamp(3.75rem, 6vw, 5.25rem);
  background: var(--sv-white);
  border: 1px solid var(--sv-card-brd);
  border-radius: var(--sv-r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}
.sv-alt__card:hover {
  transform: translateY(-3px);
  border-color: var(--c-blue-300);
  box-shadow: var(--sh-md);
}
.sv-alt__num {
  position: absolute;
  top: clamp(1.5rem, 2.6vw, 2.1rem);
  left: clamp(1.4rem, 2.4vw, 2rem);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  font-family: var(--f-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-blue-700);
  background: rgba(26, 114, 214, .09);
  border-radius: 50%;
}
.sv-alt__card-title {
  font-family: var(--f-display);
  font-size: var(--sv-fs-h3);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--c-blue-900);
}
.sv-alt__card-text { margin-top: .75rem; font-size: var(--fs-body); line-height: 1.7; color: var(--c-ink-soft); }

/* Trade-off tags. A plus and a dash rather than colour alone — colour is not
   available to every reader, and "green means good" does not survive a
   greyscale screenshot. */
.sv-alt__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; list-style: none; }
.sv-alt__tags li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  font-family: var(--f-ui);
  font-size: 0.79rem;
  font-weight: 500;
  border-radius: 100px;
}
.sv-alt__tags li::before { font-weight: 700; }
.sv-alt__tags .is-plus { color: #0d6b53; background: rgba(24, 160, 125, .1); }
.sv-alt__tags .is-plus::before { content: "+"; }
.sv-alt__tags .is-minus { color: #8a5320; background: rgba(255, 107, 44, .1); }
.sv-alt__tags .is-minus::before { content: "–"; }


/* ==========================================================================
   13. QUESTIONS
   ---------------------------------------------------------------------------
   Native <details>/<summary>. With no JS every row still opens, closes and is
   reachable by keyboard; site.js only takes over the height animation and
   closes the sibling that was open.

   THE MARKER IS REMOVED IN THREE DIALECTS — the WebKit pseudo-element, the
   standard list-item route and `list-style: none` — because no single one of
   them covers every engine in use.
   ========================================================================== */
.sv-faq {
  position: relative;
  z-index: 1;
  padding-block: var(--sv-pad);
  background: var(--sv-white);
}
.sv-faq__inner {
  width: var(--sv-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: start;
  gap: var(--sv-gap);
}
.sv-faq__copy .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }
.sv-faq__list { margin-top: clamp(2rem, 4vh, 3rem); }

.sv-faq__item { border-top: 1px solid rgba(120, 170, 225, .35); }
.sv-faq__item:last-of-type { border-bottom: 1px solid rgba(120, 170, 225, .35); }

.sv-faq__q {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.5rem);
  padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
  list-style: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}
.sv-faq__q::-webkit-details-marker { display: none; }
.sv-faq__q::marker { content: ""; }

.sv-faq__n {
  flex: none;
  font-family: var(--f-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--c-blue-300);
  font-variant-numeric: var(--nums-tab);
  transition: color var(--t-fast) var(--ease-out);
}
.sv-faq__qt {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-display);
  font-size: clamp(1.08rem, 0.95rem + 0.6vw, 1.4rem);
  line-height: 1.3;
  color: var(--c-blue-900);
}

/* The plus, drawn from two bars so it becomes a minus by rotating one of
   them. No icon swap, no second glyph, and it transitions. */
.sv-faq__sign {
  position: relative;
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid rgba(120, 170, 225, .5);
  border-radius: 50%;
  transition: background var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}
.sv-faq__sign::before,
.sv-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.6px;
  background: var(--c-blue-700);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-med) var(--ease-out),
              background var(--t-med) var(--ease-out);
}
.sv-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.sv-faq__q:hover .sv-faq__n { color: var(--c-accent); }
.sv-faq__q:hover .sv-faq__sign { background: rgba(26, 114, 214, .07); border-color: var(--c-blue-300); }

.sv-faq__item[open] .sv-faq__sign { background: var(--c-blue-500); border-color: var(--c-blue-500); }
.sv-faq__item[open] .sv-faq__sign::before,
.sv-faq__item[open] .sv-faq__sign::after { background: #fff; }
.sv-faq__item[open] .sv-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.sv-faq__item[open] .sv-faq__n { color: var(--c-accent); }

/* site.js animates this element's height; the padding lives on the child so
   the collapse is a clean 0 rather than a 0-plus-padding. */
.sv-faq__panel { overflow: hidden; }
.sv-faq__a { padding: 0 0 clamp(1.25rem, 2.4vw, 1.75rem) calc(0.8rem + 2.6rem); max-width: 66ch; }
.sv-faq__a p { font-size: 0.955rem; line-height: 1.75; color: var(--c-ink-soft); }

.sv-faq__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(1.75rem, 3.4vh, 2.5rem);
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.4vw, 1.75rem);
  background: linear-gradient(150deg, #eef5fd, #f8fbff);
  border-radius: var(--sv-r-lg);
}
.sv-faq__help p { font-size: 0.95rem; line-height: 1.5; color: var(--c-blue-900); }

/* The artwork's own 428:362 again — the caption is set INTO the picture. It
   also sticks, so the image stays beside the question you are reading rather
   than scrolling away at the third answer. */
.sv-faq__media {
  position: sticky;
  top: calc(var(--hero-inset) + var(--hero-pad) + 62px + 112px);
  overflow: hidden;
  aspect-ratio: 428 / 362;
  border-radius: var(--sv-r-xl);
  background: linear-gradient(120deg, #f4fafd, #dceaf8);
  box-shadow: var(--sh-lg);
}
.sv-faq__media img { width: 100%; height: 100%; object-fit: cover; }
.sv-faq__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 114, 214, .16) 0%, rgba(26, 114, 214, 0) 55%);
  pointer-events: none;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .sv-adv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(2rem, 4vw, 3rem); }
  /* Three across means every third marker ends a row: its run would point at
     nothing, so it becomes the short tail instead. */
  .sv-step:nth-child(3n) .sv-step__link,
  .sv-step:last-child .sv-step__link {
    flex: 0 0 clamp(1rem, 3vw, 2.5rem);
    background: linear-gradient(90deg, rgba(174, 207, 246, .4), rgba(174, 207, 246, 0));
  }
}

@media (max-width: 980px) {
  .sv-overview__inner,
  .sv-faq__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.25rem, 6vw, 3.5rem);
  }

  .sv-overview__frame { aspect-ratio: 16 / 11; }
  /* The echo hangs 5% past the photograph's right edge, which is fine while
     that photograph has a gutter beside it. Stacked, the column IS the page
     and those 5% become a horizontal scrollbar. */
  .sv-overview__echo { inset: 5% 2% -5% 2%; }

  .sv-faq__media { position: static; order: 2; max-width: 30rem; }

  .sv-alt__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-alt__lead { position: static; }

  /* --- The timeline turns vertical -------------------------------------
     Same markup, same tween: the marker column becomes the full height of
     the row and the dashed run rotates to join each circle to the one below
     it. The reveal scales BOTH axes, which is why it draws either way. */
  .sv-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sv-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(1rem, 4vw, 1.5rem);
  }
  .sv-step__marker { flex-direction: column; align-items: center; height: 100%; }
  .sv-step__link {
    width: 2px;
    height: auto;
    flex: 1 1 auto;
    min-height: 1.5rem;
    margin: .6rem 0 0;
    transform-origin: 50% 0;
    background: repeating-linear-gradient(180deg,
                rgba(174, 207, 246, .4) 0 8px,
                rgba(174, 207, 246, 0) 8px 16px);
  }
  .sv-step__link--end,
  .sv-step:nth-child(3n) .sv-step__link,
  .sv-step:last-child .sv-step__link {
    flex: 1 1 auto;
    background: repeating-linear-gradient(180deg,
                rgba(174, 207, 246, .4) 0 8px,
                rgba(174, 207, 246, 0) 8px 16px);
  }
  .sv-step:last-child .sv-step__link { display: none; }
  .sv-step__body {
    margin-top: 0;
    padding-bottom: clamp(1.75rem, 5vw, 2.5rem);
    /* Optically centres the title against its circle rather than aligning
       box tops, which reads as the text sitting low. */
    padding-top: calc((52px - 1.5em) / 2);
  }
  .sv-step:last-child .sv-step__body { padding-bottom: 0; }
}

@media (max-width: 560px) {
  .sv-adv__list { grid-template-columns: minmax(0, 1fr); }
  .sv-overview__media { display: flex; flex-direction: column; gap: .9rem; }
  .sv-faq__a { padding-left: 0; }
  .sv-faq__q { gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-overview__frame img,
  .sv-steps__media img { transition: none; }
  .sv-overview__frame:hover img,
  .sv-steps__media:hover img,
  .sv-alt__card:hover { transform: none; }
}

@media print {
  .sv-faq__panel { height: auto !important; }
  .sv-steps,
  .sv-alt__lead { color: #000 !important; background: none !important; }
  .sv-step__title,
  .sv-alt__lead-title { color: #000 !important; }
  .sv-step__text,
  .sv-alt__lead-text,
  .sv-alt__points li,
  .sv-steps__lede { color: #333 !important; }
}


/* ==========================================================================
   14. THE ARTICLE, AS EDITORIAL
   ---------------------------------------------------------------------------
   THE CONTENT IS BLOCKS, SO THE DESIGN HAS TO BE. Sections 05–08 above were
   authored against a bespoke markup vocabulary the migrated content does not
   emit — every treatment now arrives as the block editor's own h2 / p / list /
   figure, because that is what the practice's original pages contain and what
   an editor can edit. Styling the blocks directly is what makes one system
   serve all fifteen without a single service-specific rule.

   NOTHING HERE INVENTS STRUCTURE. A list becomes a grid of cards only where
   the original has a list; an image becomes a full-width moment only where the
   original has an image. A treatment whose source is four plain paragraphs
   stays four plain paragraphs — set larger, with more air, and revealed on
   scroll. Less content, stronger presentation.
   ========================================================================== */
.sv-prose-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(4rem, 11vh, 8rem);
  background:
    radial-gradient(52% 38% at 88% 4%, rgba(127, 227, 212, .16) 0%, rgba(127, 227, 212, 0) 62%),
    radial-gradient(46% 34% at 4% 62%, rgba(110, 178, 244, .14) 0%, rgba(110, 178, 244, 0) 64%),
    linear-gradient(180deg, var(--sv-ivory) 0%, #f4f9ff 100%);
}

/* THE COLUMN IS WIDER THAN THE MEASURE. The container carries the full
   editorial width so headings and figures can use it, while running text is
   held to a readable measure inside it — that difference is what stops the
   page reading as one narrow strip of text. */
/* SCOPED TO THE SECTION ON PURPOSE. wordpress.css holds `.sv-prose` to a
   46rem reading column and is enqueued after this file, so a bare `.sv-prose`
   here loses on source order at equal specificity. Naming the section both
   wins the cascade and says where the wider treatment applies. */
.sv-prose-section .sv-prose {
  position: relative;
  width: min(68rem, 100% - 2 * var(--gutter));
  margin-inline: auto;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: rgba(11, 45, 82, .8);
}

.sv-prose-section .sv-prose > p,
.sv-prose-section .sv-prose > ul,
.sv-prose-section .sv-prose > ol {
  max-width: 100%;      /* the measure — around 62 characters */
  margin-inline: auto;
}
.sv-prose-section .sv-prose > * + * { margin-top: 1.35em; }

/* THE OPENING PARAGRAPH IS THE LEDE. First in the flow, so it is set larger
   and darker — the one typographic promotion that needs no extra markup and
   no extra words.

   AT THE LEDE SIZE, not above it. These sections are never the top of a
   treatment page — the hero and the overview are already above them — so a
   paragraph set larger here than the page's own lede read as a different
   font rather than as a promotion. That is the mismatch the client saw. */
.sv-prose-section .sv-prose > p:first-of-type {
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--sv-navy-2);
}

/* --- Headings: the section breaks the source already has ------------------ */
.sv-prose-section .sv-prose > h2,
.sv-prose-section .sv-prose > h3 {
  position: relative;
  max-width: 22ch;
  margin-inline: auto;
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: clamp(1.1rem, 2.4vh, 1.7rem);
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--c-ink);
  text-align: left;
}
.sv-prose-section .sv-prose > h2 { max-width: 18ch; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }
.sv-prose-section .sv-prose > h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }

/* The drawn rule the rest of the site uses above a section title. */
.sv-prose-section .sv-prose > h2::before,
.sv-prose-section .sv-prose > h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(2.5rem, 5vw, 4rem);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-accent), rgba(255, 107, 44, 0));
}
/* A heading immediately after another needs no second rule. */
.sv-prose-section .sv-prose > h2 + h3 { margin-top: 1.4em; }

/* Align the heading block with the measure below it. */
.sv-prose-section .sv-prose > h2,
.sv-prose-section .sv-prose > h3 { margin-left: max(0px, calc((100% - 40em) / 2)); margin-right: auto; }

/* --- Figures: the visual moments the source supplies ---------------------- */
/* Wider than the measure, so an image is a beat in the page rather than an
   illustration inside a column. */
.sv-prose-section .sv-prose > figure,
.sv-prose-section .sv-prose > .wp-block-image {
  width: min(100%, 54rem);
  margin: clamp(2.5rem, 6vh, 4rem) auto;
}
.sv-prose-section .sv-prose figure img,
.sv-prose-section .sv-prose .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sv-r-xl);
  box-shadow: 0 24px 60px rgba(11, 45, 82, .16), 0 60px 120px rgba(11, 45, 82, .08);
}

/* --- Lists: cards, but only because the source has list items ------------- */
.sv-prose-section .sv-prose > ul,
.sv-prose-section .sv-prose > ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  max-width: 54rem;
  padding-left: 0;
  list-style: none;
}
.sv-prose-section .sv-prose > ul li,
.sv-prose-section .sv-prose > ol li {
  position: relative;
  margin: 0;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.5rem) 2.9rem;
  font-size: .99rem;
  line-height: 1.6;
  color: rgba(11, 45, 82, .82);
  background: #fff;
  border-radius: var(--sv-r-lg);
  box-shadow: 0 1px 2px rgba(11, 45, 82, .05), 0 10px 26px rgba(11, 45, 82, .07);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.sv-prose-section .sv-prose > ul li:hover,
.sv-prose-section .sv-prose > ol li:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 45, 82, .13); }

/* A drawn mark, not a bullet glyph. */
.sv-prose-section .sv-prose > ul li::before {
  content: "";
  position: absolute;
  top: 1.55em;
  left: 1.35rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
}
/* AN ORDERED LIST COUNTS ITS OWN ITEMS — the numbers are the source's own
   sequence, never a sequence invented for the design. */
.sv-prose-section .sv-prose > ol { counter-reset: ftd-step; }
.sv-prose-section .sv-prose > ol li { counter-increment: ftd-step; }
.sv-prose-section .sv-prose > ol li::before {
  content: counter(ftd-step, decimal-leading-zero);
  position: absolute;
  top: 1.05rem;
  left: 1.2rem;
  font-family: var(--f-display);
  font-size: .95rem;
  color: var(--c-accent);
}

/* --- Entrance ------------------------------------------------------------- */
/* site.js arms these; the start state is written here so there is never a
   frame of finished layout before the script runs, and `.no-js` releases them
   if it never does. */
.sv-prose-section .sv-prose > * { opacity: 0; }
.no-js .sv-prose > * { opacity: 1; }

@media (max-width: 980px) {
  .sv-prose-section .sv-prose > h2,
  .sv-prose-section .sv-prose > h3 { margin-left: 0; max-width: none; }
  .sv-prose-section .sv-prose > p,
  .sv-prose-section .sv-prose > ul,
  .sv-prose-section .sv-prose > ol { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-prose-section .sv-prose > * { opacity: 1; }
}

/* The opening spread's list. Drawn marks rather than bullets, matching the
   advantages grid's, so a list in the introduction and a list in the grid read
   as the same kind of thing at two different scales. */
.sv-overview__list {
  margin-top: clamp(1.2rem, 2.6vh, 1.8rem);
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: .7rem;
}
.sv-overview__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}
.sv-overview__list li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
}

/* ==========================================================================
   THE SPREAD WITH NO ILLUSTRATION OF ITS OWN
   ---------------------------------------------------------------------------
   Seven of the fifteen treatments have no image inside their opening section.
   The hero already carries the featured photograph, so repeating it here is
   what made these pages read as a pasted-in second hero.

   The first attempt simply dropped the picture and left the copy in one
   column — which looked worse: a full-width heading over a narrow paragraph,
   with half the section empty. So the composition changes instead of merely
   losing a column. The heading takes the left, the prose takes the right, and
   the section becomes a proper editorial split with no picture in it at all.
   ========================================================================== */
.sv-overview--solo .sv-overview__inner {
  grid-template-columns: minmax(0, 1fr);
}

.sv-overview--solo .sv-overview__copy {
  display: block;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  max-width: none;
}

/* NO CHARACTER CAP ON THIS COLUMN. The masked heading puts every word in an
   inline-block inside a `.line` that clips its overflow, so a column narrower
   than the longest word does not wrap that word — it cuts it in half.
   A 16ch cap here rendered "Procedure" as "Procedur". The grid decides the
   column width; the type steps down to suit it. */
.sv-overview--solo .sv-overview__head { max-width: none; }
.sv-overview--solo .sv-overview__head .sv-h2 {
  font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.5rem);
  line-height: 1.08;
}
.sv-overview--solo .sv-overview__head .sv-h2 { margin-top: clamp(.8rem, 2vh, 1.2rem); }

.sv-overview--solo .sv-overview__body > * + * { margin-top: 1.1em; }
.sv-overview--solo .sv-lede {
  max-width: 46em;
  /* The measure changes here, not the size — a second lede value 0.3px away
     from the first was a difference nobody could intend and everybody could
     see once it sat next to the other one. */
  line-height: var(--lh-body);
}
.sv-overview--solo .sv-p,
.sv-overview--solo .sv-overview__list { max-width: 46em; }

/* A hairline down the gutter, drawn rather than bordered, so the two columns
   are related without a box around either. */
.sv-overview--solo .sv-overview__copy { position: relative; }
.sv-overview--solo .sv-overview__body { position: relative; padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.sv-overview--solo .sv-overview__body::before {
  content: "";
  position: absolute;
  top: .35rem;
  bottom: .35rem;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(120, 170, 225, .7), rgba(120, 170, 225, 0));
}

@media (max-width: 900px) {
  .sv-overview--solo .sv-overview__copy { grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 3vw, 1.5rem); }
  .sv-overview--solo .sv-overview__head { max-width: none; }
  .sv-overview--solo .sv-overview__body { padding-left: 0; }
  .sv-overview--solo .sv-overview__body::before { display: none; }
}


/* ==========================================================================
   THE DARK CHAPTER, RECOMPOSED
   ---------------------------------------------------------------------------
   It was a 1220px band holding a 44ch paragraph, so roughly sixty per cent of
   a very dark rectangle was empty by construction — and `padding-block` scaled
   with the viewport, so the taller the screen the emptier it got. Three
   changes: the container narrows, the height comes from the content instead of
   the viewport, and the copy sits in a real column beside the chapter's own
   illustration.

   `.sv-steps__media` was already written in this stylesheet and no template
   had ever emitted it — the same orphan the treatment cards turned out to be.
   It is emitted now, for the four chapters whose source supplies a picture.
   ========================================================================== */
.sv-steps {
  /* Content-driven. The old value was clamp(4rem, 11vh, 8rem). */
  padding-block: clamp(3rem, 6vh, 4.75rem);
}

.sv-steps__inner {
  width: min(1120px, 100% - 2 * var(--gutter));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* THE MEASURE IS THE COLUMN'S, NOT A CHARACTER CAP. The 44ch/46ch caps are
   what emptied the right-hand side; the grid holds the copy near 520px, which
   is the readable width this section was always meant to have. */
.sv-steps__copy { max-width: 34rem; }
.sv-steps__head { max-width: none; }
.sv-steps__lede {
  max-width: none;
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
}
.sv-steps__lede + .sv-steps__lede { margin-top: 1.1em; }

/* --- The illustration ----------------------------------------------------- */
.sv-steps__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--sv-r-xl);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .34);
}
.sv-steps__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Clinical illustrations are drawings on white; letting one bleed to the
     panel edge reads as a hole cut in the dark rather than a picture on it. */
  background: #fff;
}

/* --- No illustration of its own ------------------------------------------- */
/* Centred, and narrower still. A single column left-aligned in a wide dark
   band is the empty rectangle this whole section was fixing. */
.sv-steps--solo .sv-steps__inner {
  grid-template-columns: minmax(0, 1fr);
  width: min(760px, 100% - 2 * var(--gutter));
  justify-items: center;
  text-align: center;
}
.sv-steps--solo .sv-steps__copy { max-width: 46rem; }
.sv-steps--solo .sv-steps__head { display: flex; flex-direction: column; align-items: center; }
.sv-steps--solo .sv-steps__lede { text-align: left; }

@media (max-width: 900px) {
  /* Text first, illustration second — the words explain the picture. */
  .sv-steps__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 2.25rem); }
  .sv-steps__copy { max-width: none; }
  .sv-steps { padding-block: clamp(2.5rem, 5vh, 3.5rem); }
  .sv-steps--solo .sv-steps__head { align-items: flex-start; }
  .sv-steps--solo .sv-steps__inner { text-align: left; justify-items: stretch; }
}


/* ==========================================================================
   THE GALLERY — a section whose source carries more than one photograph
   ---------------------------------------------------------------------------
   Teeth Whitening's procedure section has three photographs of the trays.
   Stacked down a prose column they read as three afterthoughts; laid out as a
   set, with the first given the wide cell, they read as one sequence — which
   is what they are. The number of pictures is the source's, so the grid is
   built to take two, three or more without a rule per case.
   ========================================================================== */
.sv-gallery {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 7vh, 5.5rem);
  background: var(--sv-white);
}
.sv-gallery__inner {
  width: var(--sv-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  /* The set spans both rows, so row 2 absorbs its extra height and the copy
     stays tucked under the heading instead of being pushed to the middle of
     the column. */
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.sv-gallery__head { grid-column: 1; }
.sv-gallery__head .sv-h2 { margin-top: clamp(.9rem, 2vh, 1.4rem); }
.sv-gallery__copy { grid-column: 1; align-self: start; max-width: 34rem; margin-top: clamp(.8rem, 2vh, 1.2rem); }
.sv-gallery__copy > * + * { margin-top: 1em; }

/* The set occupies the right column and spans both once stacked. */
.sv-gallery__set {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1rem);
}
/* The first picture leads: full width of the set, and taller. */
.sv-gallery__fig--lead { grid-column: 1 / -1; }
/* An odd one out at the end takes the full width too, so the set never ends
   on a lone half-width cell with a hole beside it. */
/* An ODD count leaves a lone cell at the end only when there is nothing to
   pair it with. Three is a lead over a pair — the natural reading — so only a
   five-picture set widens its last. */
.sv-gallery__set[data-figs="5"] .sv-gallery__fig:last-child { grid-column: 1 / -1; }

.sv-gallery__fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--sv-r-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 45, 82, .06), 0 14px 34px rgba(11, 45, 82, .1);
}
.sv-gallery__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.sv-gallery__fig--lead img { aspect-ratio: 16 / 9; }
.sv-gallery__fig:not(.sv-gallery__fig--lead) img { aspect-ratio: 4 / 3; }
.sv-gallery__fig:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .sv-gallery__inner { grid-template-columns: minmax(0, 1fr); }
  .sv-gallery__head,
  .sv-gallery__copy,
  .sv-gallery__set { grid-column: 1; }
  .sv-gallery__set { grid-row: auto; }
  .sv-gallery__copy { max-width: none; }
}


/* ==========================================================================
   THE STATEMENT — a heading and a paragraph or two
   ---------------------------------------------------------------------------
   These were falling through to plain prose, which is where a page of short
   answers went flat. The asymmetric split gives a short section the same
   deliberate look the opening spread has, and alternating the ground keeps a
   run of them from reading as one long block.
   ========================================================================== */
.sv-statement {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.75rem, 6vh, 4.5rem);
  background: var(--sv-white);
}
.sv-statement--alt {
  background:
    radial-gradient(48% 40% at 90% 8%, rgba(127, 227, 212, .14) 0%, rgba(127, 227, 212, 0) 62%),
    linear-gradient(180deg, #f5f9fd 0%, #eef5fd 100%);
}

.sv-statement__inner {
  width: min(1120px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(1.5rem, 5vw, 4.5rem);
}

/* A SECTION HEADING IS A SECTION HEADING. This one carried a size of its own —
   37.8px against the 53.6px every other section uses at 1440 — and on Sedation
   Dentistry that put "Oral Sedation" and "Nitrous Oxide" side by side at two
   different sizes with two different margins above them. They are peers: two
   ways the practice offers the same treatment, one after the other. The gap
   between them was the spacing the practice reported.

   The measure stays narrow here, and only the top margin is this section's
   own — the size comes from the shared scale like everywhere else. */
.sv-statement__head .sv-h2 {
  margin-top: clamp(1rem, 2vh, 1.5rem);
}

.sv-statement__body { position: relative; padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.sv-statement__body > * + * { margin-top: 1em; }
/* The same drawn gutter the solo spread uses, so the two relate. */
.sv-statement__body::before {
  content: "";
  position: absolute;
  top: .35rem;
  bottom: .35rem;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(120, 170, 225, .7), rgba(120, 170, 225, 0));
}

@media (max-width: 900px) {
  .sv-statement__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(.9rem, 3vw, 1.4rem); }
  .sv-statement__body { padding-left: 0; }
  .sv-statement__body::before { display: none; }
}

/* Any picture the opening section supplied beyond the one promoted into the
   spread's own column. Set as a small row under the copy so it belongs to the
   words above it rather than floating loose. */
.sv-overview__extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: clamp(.6rem, 1.4vw, 1rem);
  margin-top: clamp(1.4rem, 3vh, 2rem);
}
.sv-overview__extra-fig {
  margin: 0;
  overflow: hidden;
  border-radius: var(--sv-r-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 45, 82, .06), 0 12px 28px rgba(11, 45, 82, .09);
}
.sv-overview__extra-fig img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   FLAT IMAGES — client change document
   ---------------------------------------------------------------------------
   "Please remove all image and image-container shadow effects so the images
   look clean and flat."

   This lives here rather than in system.css because this file is enqueued
   AFTER it, and the elevation being removed is declared in this file — a
   matching selector in system.css loses on source order and the shadows stay.
   Cards are untouched: a card is a surface, not an image.
   ========================================================================== */
.sv-overview .sv-overview__frame,
.sv-overview .sv-overview__extra-fig,
.sv-gallery .sv-gallery__fig,
.sv-steps .sv-steps__media,
.sv-prose-section .sv-prose figure,
.sv-prose-section .sv-prose .wp-block-image img {
  box-shadow: none;
}

/* "Just fix the spacing and formatting of 'Crowns, Onlays & Inlays' and
   'Caring Hands. Confident Smiles.'"  (SV-CRW-01 / SV-BRD-01)

   The strapline was sitting 12px under an 80px display title — its own
   margin is 18px, and the title's line box eats a third of that. At this
   size the two read as one crowded block instead of a title and its line.
   Roughly double the separation, still fluid, and the desktop and mobile
   ends move together. */
.sv-hero__tag { margin-top: clamp(1.35rem, 3.2vh, 2.15rem); }

/* "No 1 is not visible."  (NUM-01 — doc L49, L72, L88)
   The client marked the empty space where 01 should be, on three separate
   pages. It was never missing from the markup: .sv-alt__num renders
   rgb(15,79,150) on the lead card's rgb(26,114,214) — a contrast ratio of
   1.7:1, which is a dark blue numeral on a medium blue card. Present in the
   DOM, invisible to a reader, which is exactly what "not visible" means and
   why an opacity/visibility check found nothing wrong.

   The numerals on the white cards keep the blue they have; only the one on
   the dark lead card needs to be light. */
.sv-alt__lead .sv-alt__num {
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .16);
}