/* =============================================================================
   Forward Oral Surgery, inner.css (owner: fos-pages). The inner routes: the procedure pages, /meet-dr-nikoyan/, /cases/,
   /patient-registration/, /financial-policy/, /instructions/, /referral-forms/ and /office-address/. Class prefix ix- ; nothing
   here restyles a device of devices.css.
   Light grounds only (paper, white cards, the mist tint); the photo bands (ix-band, the pre-footer) carry a gradient only under their type.
   Photos are colour: no filter, no scrim. Tokens only (tokens.css). One breakpoint: phone to 1023px, desktop from 1024px.
   ========================================================================== */

:root { --ix-pad: calc(var(--pad-sec) * .75); }

/* ---- type used by the inner pages ------------------------------------------------------------------------------- */
.ix-p { margin: 0; max-width: 56ch; font-family: var(--body); font-size: calc(var(--t-p3-size) * 1.1); line-height: 1.55;
  font-weight: 400; letter-spacing: .005em; color: var(--ink); }
.ix-p + .ix-p { margin-top: var(--gap-16); }
.ix-lede { margin: 0; max-width: 36ch; font-family: var(--body); font-size: var(--t-p1-size); line-height: 1.35; font-weight: 400;
  letter-spacing: -.005em; color: var(--ink); }
.ix-lbl { display: block; margin: 0 0 var(--gap-16); font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh);
  font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); color: var(--ink-quiet); }
.ix-h { margin: 0 0 var(--gap-40); }
.ix-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-16) var(--gap-24); }
.ix-acts__t { font-family: var(--body); font-size: var(--t-c3-size); line-height: 1.45; color: var(--ink-quiet); }
.ix-mist.band { background: var(--tint); }

/* every inner band takes the same vertical rhythm */
:is(.ix-intro, .ix-treat, .ix-sol, .ix-two, .ix-steps, .ix-notes-band, .ix-split, .ix-rows, .ix-doctor, .ix-techband,
    .ix-gal, .ix-visit, .ix-areas, .ix-bring, .ix-portal, .ix-forms, .ix-request) { padding-block: var(--ix-pad); }
/* every page ends with the pre-footer photo band (devices.css), so the footer's curve rises over a photo, not over a text band */

/* ---- hero: the full-screen opening ------------------------------------------------------------------------------ */
.ix-hero { display: flex; min-height: 100svh; padding: calc(var(--hdr-h) + var(--gap-24)) 0 var(--gap-24); }
.ix-hero__in { width: 100%; display: flex; flex-direction: column; gap: var(--gap-24); }
.ix-hero__top { display: flex; }
.ix-hero__h { margin: 0; }
/* the display sizes scale with the width; on a short window the headline also yields to the height, so the photo and its card stay on the first screen */
@media (min-width: 1024px) {
  .ix-hero__h.t-dl { font-size: min(var(--t-display-l-size), 21svh); }
  .ix-hero__h.t-d { font-size: min(var(--t-display-size), 17.5svh); }
}
.ix-hero__pic { position: absolute; inset: 0; }
.ix-hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.ix-hero--wide .ix-hero__stage { position: relative; flex: 1 1 auto; margin: 0; min-height: clamp(300px, 38svh, 680px);
  border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }
.ix-hero__card { position: absolute; left: var(--gap-16); bottom: var(--gap-16); width: min(calc(var(--content) * .33), calc(100% - 2 * var(--gap-16)));
  display: grid; gap: var(--gap-24); padding: var(--gap-32); border-radius: var(--r-card); background: var(--white); color: var(--ink); }
.ix-hero__card--r { left: auto; right: var(--gap-16); }
/* the live map: the static map image sits under the embed; the embed takes the pointer only after a click, so a wheel or a finger
   crossing the band scrolls the page instead of zooming the map */
.ix-map { background: var(--tint); }
.ix-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ix-map__open { position: absolute; top: var(--gap-16); right: var(--gap-16); z-index: 2; display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: var(--ink-invert); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .2s; }
.ix-map__open:hover { background: var(--spruce); }
.ix-map__open[hidden] { display: none; }
.ix-map__frame:focus-visible, .ix-map:focus-within .ix-map__frame { outline: 3px solid var(--ink); outline-offset: -3px; }   /* a keyboard user inside the map sees where focus is */
.ix-hero__stage--map { min-height: clamp(360px, 46svh, 720px); }

/* portrait: the headline, lede and calls on the left, the doctor large on the right */
.ix-hero--portrait .ix-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-48); align-items: stretch; }
.ix-hero__txt { display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-40); }
.ix-hero__foot { display: grid; gap: var(--gap-32); }
.ix-hero--portrait .ix-hero__stage { position: relative; margin: 0; min-height: min(78svh, 900px); border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }
.ix-hero--portrait .ix-hero__pic img { object-position: 50% 22%; }
.ix-hero__tag { position: absolute; left: var(--gap-16); bottom: var(--gap-16); display: grid; gap: var(--gap-8); padding: var(--gap-16) var(--gap-24);
  border-radius: var(--r-card); background: var(--white); color: var(--ink); }
.ix-hero__tag .ix-lbl { margin: 0; }
.ix-hero__name { font-family: var(--display); font-size: var(--t-h5-size); line-height: 1; letter-spacing: var(--t-h5-track); }

/* ---- intro: a centred serif statement, two short columns, optional facts and jump links ------------------------- */
.ix-intro__st { margin: 0 auto var(--gap-64); max-width: 24em; text-align: center; line-height: 1; }
.ix-intro__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-48); max-width: 980px; margin: 0 auto; }
.ix-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-24); margin: var(--gap-64) 0 0; padding: 0; list-style: none; }
.ix-fact { position: relative; display: flex; align-items: flex-end; min-height: var(--chip-h); padding: var(--gap-24); border-radius: var(--r-chip);
  background: var(--tint); color: var(--ink); }
.ix-fact p { margin: 0; padding-right: var(--gap-16); font-family: var(--t-p2-family); font-size: var(--t-p2-size); line-height: 1.25; font-weight: var(--t-p2-weight); }
.ix-fact__dot { position: absolute; top: var(--gap-24); right: var(--gap-24); width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--spruce); }
.ix-local { margin: var(--gap-48) auto 0; max-width: 980px; font-family: var(--body); font-size: calc(var(--t-p3-size) * 1.1); line-height: 1.55; color: var(--ink-quiet); }
.ix-local .ulink { margin-left: var(--gap-8); white-space: nowrap; }
.ix-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-16) var(--gap-32); margin-top: var(--gap-48); }

/* ---- treatments hub: one band per treatment -------------------------------------------------------------------- */
.ix-treat__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-64); align-items: center; }
.ix-treat__in--flip .ix-treat__pic { order: 2; }
.ix-treat__pic { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }
.ix-treat__pic img, .ix-split__pic img, .ix-steps__pic img, .ix-gal__pic img, .ix-tcard__pic img { width: 100%; height: 100%; object-fit: cover; }
.ix-treat .ix-h { margin-bottom: var(--gap-24); }
.ix-list { margin: var(--gap-32) 0 var(--gap-40); padding: 0; list-style: none; }
.ix-li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap-24); padding: var(--gap-24) 0; border-top: 1px solid var(--hairline-light); }
.ix-list > .ix-li:last-child { border-bottom: 1px solid var(--hairline-light); }
.ix-li__t, .ix-row__t, .ix-step__t, .ix-note-cell__t, .ix-tcard__t, .ix-card__t, .ix-areas__t { margin: 0; font-size: calc(var(--t-h5-size) * .85); line-height: 1.05; }
.ix-li .ix-p { font-size: var(--t-p3-size); }

/* ---- solution cards: radius 30, a nested 22 photo inset 8px, one height per row -------------------------------------- */
.ix-sol__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-24); margin: 0; padding: 0; list-style: none; }
.ix-sol__grid > li { display: flex; }
.ix-solc { display: flex; flex-direction: column; width: 100%; padding: var(--gap-8); border-radius: var(--r-card); background: var(--white); color: var(--ink); }
.ix-solc__pic { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; background: var(--tint); flex: none; }
.ix-solc__pic img { width: 100%; height: 100%; object-fit: cover; }
.ix-solc__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--gap-16); padding: var(--gap-24) var(--gap-24) var(--gap-24); }
.ix-solc__t { margin: 0; font-family: var(--t-h4-family); font-size: var(--t-h4-size); line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-track); font-weight: 400; }
.ix-solc__d, .ix-solc__p { margin: 0; font-family: var(--body); font-size: var(--t-p3-size); line-height: 1.5; color: var(--ink); }
.ix-solc__d { font-size: calc(var(--t-p3-size) * 1.1); color: var(--ink-quiet); }
.ix-solc__pair { display: grid; gap: var(--gap-16); padding-top: var(--gap-16); }
.ix-solc__pair > div { padding-top: var(--gap-16); border-top: 1px solid var(--hairline-light); }
.ix-solc__pair .ix-lbl { margin-bottom: var(--gap-8); }
.ix-solc__go { margin-top: auto; padding-top: var(--gap-16); }

/* ---- two cards: who a treatment suits, common problems ----------------------------------------------------------- */
.ix-two__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-24); }
.ix-card { padding: var(--gap-48); border-radius: var(--r-card); background: var(--white); color: var(--ink); }
.ix-card__t { margin-bottom: var(--gap-24); }
.ix-checks { display: grid; margin: 0; padding: 0; list-style: none; }
.ix-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--gap-16); padding: var(--gap-16) 0;
  border-top: 1px solid var(--hairline-light); font-family: var(--body); font-size: calc(var(--t-p3-size) * 1.1); line-height: 1.45; }
.ix-check { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-circle); background: var(--tint); color: var(--spruce); }
.ix-check svg { width: 14px; height: 14px; }
.ix-note { margin: var(--gap-40) 0 0; max-width: 62ch; font-family: var(--body); font-size: calc(var(--t-p3-size) * 1.1); line-height: 1.55; color: var(--ink-quiet); }

/* ---- steps: numbered, with the photo staying beside them -------------------------------------------------------- */
.ix-steps__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-64); align-items: start; }
.ix-steps__side { position: sticky; top: calc(var(--hdr-h) + var(--gap-24)); }
.ix-steps__side .ix-h { margin-bottom: var(--gap-32); }
.ix-steps__pic { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }
.ix-steps__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gap-12); }
/* each step is a white card (the 30px radius), so a run of numbered rows is never bare text on the ground */
.ix-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--gap-24); padding: var(--gap-32); background: var(--white); border-radius: var(--r-card); }
.ix-step__n { font-family: var(--display); font-size: var(--t-h4-size); line-height: .9; letter-spacing: var(--t-h4-track); color: var(--spruce); }
.ix-step__t { margin-bottom: var(--gap-8); }

/* ---- notes: short practical points in a hairline grid ----------------------------------------------------------- */
.ix-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-48); margin: 0; padding: 0; list-style: none; }
.ix-note-cell { padding: var(--gap-32) 0 var(--gap-40); border-top: 1px solid var(--hairline-light); }
.ix-note-cell__t { margin-bottom: var(--gap-12); }

/* one full-bleed photo between the headline and the six cells */
.ix-bleed { margin: 0 0 var(--gap-48); aspect-ratio: 16 / 5; max-height: 560px; width: 100%; overflow: hidden; background: var(--tint); }
.ix-bleed img { width: 100%; height: 100%; object-fit: cover; }
.ix-notes-band--pic .ix-h { margin-bottom: var(--gap-40); }

/* ---- split: a photo and a short text --------------------------------------------------------------------------- */
.ix-split__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-64); align-items: center; }
.ix-split__in--r .ix-split__pic { order: 2; }
.ix-split__pic { margin: 0; aspect-ratio: 5 / 4; border-radius: var(--r-frame); overflow: hidden; background: var(--white); }
.ix-split__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-16) var(--gap-24); margin-top: var(--gap-32); }

/* ---- rows: a serif title left, the text right ------------------------------------------------------------------- */
.ix-rows__list { margin: 0; padding: 0; list-style: none; }
.ix-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gap-48); padding: var(--gap-40) 0; border-top: 1px solid var(--hairline-light); }
.ix-rows__list > .ix-row:last-child { border-bottom: 1px solid var(--hairline-light); }
.ix-row__t { font-size: var(--t-h5-size); }
.ix-row__b { display: grid; justify-items: start; gap: var(--gap-16); }

/* ---- a full-bleed photo band: the statement over the lower part, a gradient only under the type ----------------------- */
.ix-band { position: relative; display: grid; align-content: end; min-height: clamp(520px, 68svh, 760px); padding-block: var(--gap-64) var(--ix-pad);
  overflow: hidden; background: var(--ground-dark); color: var(--ink-invert); }
.ix-band__pic { position: absolute; inset: 0; }
.ix-band__pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.ix-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20,32,31,.84) 0%, rgba(20,32,31,.7) 34%, rgba(20,32,31,.3) 58%, rgba(20,32,31,0) 78%); }
.ix-band__in { position: relative; z-index: 1; }
.ix-band .ix-lbl { color: var(--ink-3-dark); margin-bottom: var(--gap-16); }
.ix-band__h { margin: 0 0 var(--gap-16); color: var(--ink-invert); }
.ix-band__t { margin: 0; max-width: 48ch; font-family: var(--body); font-size: calc(var(--t-p3-size) * 1.15); line-height: 1.5; color: var(--ink-invert); }
/* desktop: the type sits in the right column, over the dark hair of the photo, so the 3D model on the screen stays clear of it */
@media (min-width: 1024px) {
  .ix-band__in { padding-left: 64%; }
  .ix-band__h.split-h { font-size: clamp(36px, 3.6vw, 52px); }
  .ix-band__h.split-h > span { text-align: left; }
}

/* ---- about: the doctor, technology, the office ------------------------------------------------------------------ */
.ix-doctor__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-64); align-items: start; }
.ix-doctor__main .ix-p { max-width: 52ch; }
.ix-facts-rows { align-self: center; margin: 0; padding: 0; list-style: none; }
.ix-fact-row { display: grid; gap: var(--gap-8); padding: var(--gap-24) 0; border-top: 1px solid var(--hairline-light); }
.ix-facts-rows > .ix-fact-row:last-child { border-bottom: 1px solid var(--hairline-light); }
.ix-fact-row .ix-lbl { margin: 0; }
.ix-fact-row__v { font-family: var(--display); font-size: var(--t-h5-size); line-height: 1.05; letter-spacing: var(--t-h5-track); }
.ix-tech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-24); margin: 0; padding: 0; list-style: none; }
.ix-tech--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ix-tcard { display: grid; align-content: start; gap: var(--gap-12); padding: var(--gap-8) var(--gap-8) var(--gap-32); border-radius: var(--r-card); background: var(--white); }
.ix-tcard__pic { margin: 0 0 var(--gap-12); aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; background: var(--tint); }
.ix-tcard > :not(.ix-tcard__pic) { margin-inline: var(--gap-24); }
.ix-count { margin-block: 0; font-family: var(--display); font-size: var(--t-h5-size); line-height: 1; color: var(--spruce); }
.ix-count span { font-family: var(--body); font-size: var(--t-c3-size); color: var(--ink-quiet); }
.ix-gal__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-64); align-items: end; }
.ix-gal__pics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-24); align-items: end; }
.ix-gal__pic { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }
.ix-gal__pic--2 { aspect-ratio: 1 / 1; }

/* ---- visit: the facts in two columns (the live map is the hero of the page) ------------------------------------------- */
.ix-visit__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-32); margin-bottom: var(--gap-48); }
.ix-visit__top .ix-h { margin-bottom: 0; }
.ix-visit__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap-64); align-items: start; }
.ix-visit__credit { margin: var(--gap-24) 0 0; font-family: var(--t-c3-family); font-size: var(--t-c3-size); line-height: var(--t-c3-lh); color: var(--ink-quiet); }
.ix-visit__credit a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }   /* a 24px target */
.ix-vlist { margin: 0; }
.ix-vrow { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: var(--gap-16); padding: var(--gap-16) 0; border-top: 1px solid var(--hairline-light); }
.ix-vlist > .ix-vrow:last-child { border-bottom: 1px solid var(--hairline-light); }
.ix-vrow .ix-lbl { margin: 0; padding-top: 2px; }
.ix-vrow dd { margin: 0; font-family: var(--body); font-size: calc(var(--t-p3-size) * 1.1); line-height: 1.45; }
.ix-addr { font-style: normal; }
.ix-hours { display: grid; gap: var(--gap-8); }
.ix-hours__r { display: flex; justify-content: space-between; gap: var(--gap-16); }
.ix-tel { display: inline-flex; align-items: center; min-height: 24px; border-bottom: 1px solid var(--line); }   /* a 24px target */
.ix-areas__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-64); align-items: start; }
.ix-areas__t { margin-bottom: var(--gap-24); }
.ix-tags { margin: 0; padding: 0; list-style: none; }
.ix-tags { display: flex; flex-wrap: wrap; gap: var(--gap-12); }
.ix-tags li { display: inline-flex; align-items: center; height: var(--btn-h); padding: 0 var(--gap-24); border-radius: var(--r-pill); background: var(--white);
  font-family: var(--t-c1-family); font-size: var(--t-c1-size); font-weight: var(--t-c1-weight); letter-spacing: var(--t-c1-track); }

/* ---- new patients: what to bring, the portal band, the forms block ------------------------------------------------ */
.ix-bring__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-64); align-items: start; }
.ix-bring__pay { align-self: center; }
.ix-forms__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-48); align-items: center; }
.ix-forms__txt .ix-h { margin-bottom: var(--gap-24); }
.ix-forms__act { display: flex; justify-content: flex-end; }
/* the portal band: the headline at the t-d size, the standard pill and one line at the right edge on its last baseline */
.ix-portal__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-48); }
.ix-portal__h { margin: 0; }
.ix-portal__side { display: grid; justify-items: start; gap: var(--gap-24); max-width: 30ch; padding-bottom: var(--gap-8); }
.ix-portal__btn { display: flex; }

/* ---- the request form: the form device is made for dark grounds, so it is re-toned here for paper ----------------- */
.ix-request__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-64); align-items: start; }
.ix-request__txt .ix-h { margin-bottom: var(--gap-24); }
.ix-form .field input, .ix-form .field textarea { border-color: color-mix(in srgb, var(--ink) 55%, var(--ground)); background: var(--white); color: var(--ink); }
.ix-form .field input:focus, .ix-form .field textarea:focus { border-color: var(--ink); }
.ix-form .field input:focus-visible, .ix-form .field textarea:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
.ix-form .field label { color: var(--ink-quiet); }
.ix-form .field input[aria-invalid="true"], .ix-form .field textarea[aria-invalid="true"] { border-color: var(--err, #B3261E); }
.ix-form .field__err { color: var(--err, #B3261E); }
.ix-form .radios legend { color: var(--ink-quiet); }
.ix-form .radio input { color: var(--ink); }
.ix-form .radio input:focus-visible { outline-color: var(--ink); }
.ix-form .form-note { color: var(--ink); }
.ix-form .form-noscript, .ix-form .form__demo { color: var(--ink-quiet); }
.ix-form .form__submit:hover:not([disabled]) { background: var(--ink); color: var(--white); }

/* =============================================================================
   phones (to 1023px): one column, the headline left-aligned, photos in their own frame above the text
   ========================================================================== */
@media (max-width: 1023px) {
  :root { --ix-pad: 64px; }
  /* a split headline reads as one sentence on a phone: a forced break would strand a word */
  .ix-h.split-h { display: block; margin-bottom: var(--gap-24); }
  .ix-h.split-h > span { display: inline; text-align: left; }
  .ix-portal__h.split-h { display: grid; }
  .ix-portal__h.split-h > span { display: block; }
  .ix-lede { max-width: none; }

  .ix-hero { min-height: 0; padding-top: calc(var(--hdr-h) + var(--gap-16)); }
  .ix-hero__h { font-size: clamp(46px, 14.4vw, 72px); }
  .ix-hero .ix-hero__h > span { text-align: left; }
  .ix-hero--wide .ix-hero__stage { display: grid; gap: var(--gap-12); min-height: 0; border-radius: 0; overflow: visible; background: none; }
  .ix-hero--wide .ix-hero__pic { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--tint); }
  .ix-hero__pic img { object-position: var(--posm, var(--pos, 50% 50%)); }
  .ix-hero__stage--map { min-height: 0; }
  .ix-hero__card, .ix-hero__card--r { position: static; width: auto; padding: var(--gap-24); }
  .ix-hero--portrait .ix-hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--gap-32); }
  .ix-hero__txt { gap: var(--gap-24); }
  .ix-hero--portrait .ix-hero__stage { min-height: 0; aspect-ratio: 4 / 5; border-radius: var(--r-card); }

  .ix-intro__st { margin-bottom: var(--gap-40); text-align: left; }
  .ix-intro__cols { grid-template-columns: 1fr; gap: var(--gap-16); max-width: none; }
  .ix-facts { grid-template-columns: 1fr 1fr; gap: var(--gap-12); margin-top: var(--gap-40); }
  .ix-fact { min-height: 0; padding: var(--gap-16); padding-top: var(--gap-40); }
  .ix-fact__dot { top: var(--gap-16); right: var(--gap-16); }
  .ix-jump { justify-content: flex-start; gap: var(--gap-12) var(--gap-24); margin-top: var(--gap-32); }

  .ix-treat__in, .ix-split__in, .ix-steps__in, .ix-doctor__in, .ix-gal__in, .ix-areas__in, .ix-bring__in,
  .ix-forms__in, .ix-request__in { grid-template-columns: minmax(0, 1fr); gap: var(--gap-32); }
  .ix-treat__in--flip .ix-treat__pic, .ix-split__in--r .ix-split__pic { order: 0; }
  .ix-treat__pic { aspect-ratio: 4 / 3; border-radius: var(--r-card); }
  .ix-split__pic { border-radius: var(--r-card); }
  .ix-li { grid-template-columns: minmax(0, 1fr); gap: var(--gap-8); }

  .ix-sol__grid { grid-template-columns: minmax(0, 1fr); }
  .ix-solc__body { padding: var(--gap-24) var(--gap-16) var(--gap-16); }
  .ix-bleed { aspect-ratio: 4 / 3; margin-bottom: var(--gap-32); }
  /* a phone shows the photo first, fading into the dark ground, and the type under it, so a long line never hides the picture */
  .ix-band { display: block; min-height: 0; padding: 0 0 var(--ix-pad); }
  .ix-band::after { display: none; }
  .ix-band__pic { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .ix-band__pic img { object-position: var(--posm, 50% 55%); }
  .ix-band__pic::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, var(--ground-dark) 0%, rgba(20,32,31,.6) 26%, rgba(20,32,31,0) 62%); }
  .ix-band__in { margin-top: calc(var(--gap-48) * -1); }
  .ix-band__h.split-h { font-size: clamp(36px, 11vw, 56px); }
  .ix-visit__top { display: grid; justify-content: stretch; align-items: start; gap: var(--gap-24); margin-bottom: var(--gap-32); }
  .ix-visit__cols { grid-template-columns: minmax(0, 1fr); }
  .ix-tech--2 { grid-template-columns: minmax(0, 1fr); }
  .ix-portal__row { display: grid; gap: var(--gap-24); }
  .ix-local { margin-top: var(--gap-32); }
  .ix-two__grid { grid-template-columns: minmax(0, 1fr); }
  .ix-card { padding: var(--gap-24); }
  .ix-steps__side { position: static; }
  .ix-steps__pic { border-radius: var(--r-card); }
  .ix-step { grid-template-columns: 48px minmax(0, 1fr); gap: var(--gap-16); padding: var(--gap-24) var(--gap-16); }
  .ix-notes { grid-template-columns: minmax(0, 1fr); }
  .ix-row { grid-template-columns: minmax(0, 1fr); gap: var(--gap-16); padding: var(--gap-32) 0; }
  .ix-tech { grid-template-columns: minmax(0, 1fr); }
  .ix-gal__pics { gap: var(--gap-12); }
  .ix-gal__pic { border-radius: var(--r-card); }
  .ix-vrow { grid-template-columns: 6em minmax(0, 1fr); }
  .ix-forms__act { justify-content: flex-start; }
}

/* the OpenStreetMap fallback image behind the live map is calmed, as the home map card is */
.ix-map > img { filter: saturate(.5); }

/* =============================================================================
   Forward Oral Surgery additions (fos-pages): the guide, docs, toc, fine print, doctor seal, office tour, missions, pay opener,
   emergency block and the cases page (before and after sliders). Same tokens, same 1024px breakpoint.
   ========================================================================== */
:is(.ix-guide, .ix-docs, .ix-emerg, .ix-tour, .ix-ba, .ix-cgs) { padding-block: var(--ix-pad); }
.ix-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ix-split__in--solo { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.ix-split__pic--doc { aspect-ratio: auto; max-width: 520px; justify-self: center; border: 1px solid var(--hairline-light); background: var(--white); }
.ix-split__pic--doc img { height: auto; object-fit: contain; }
.ix-rows__intro { margin: 0 0 var(--gap-40); max-width: 70ch; }
.ix-card__act { margin-top: var(--gap-24); }
.ix-card .ix-p + .ix-p { margin-top: var(--gap-16); }

/* guide: a sticky heading at the left, the text in plain blocks at the right */
.ix-guide__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gap-64); align-items: start; }
.ix-guide__side { position: sticky; top: calc(var(--hdr-h) + var(--gap-24)); }
.ix-guide__side .ix-h { margin-bottom: var(--gap-24); }
.ix-guide__pic { margin: var(--gap-32) 0 0; aspect-ratio: 4 / 3; border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }
.ix-guide__pic img { width: 100%; height: 100%; object-fit: cover; }
.ix-guide__body { display: grid; gap: var(--gap-16); min-width: 0; }
.ix-guide__body .ix-p { max-width: 64ch; }
.ix-guide__body .ix-p + .ix-p { margin-top: 0; }
.ix-g__h { margin: var(--gap-24) 0 0; padding-top: var(--gap-24); border-top: 1px solid var(--hairline-light); font-size: calc(var(--t-h5-size) * .85); line-height: 1.05; font-weight: 400; }
.ix-guide__body > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ix-g__lead { margin: 0; max-width: 24em; line-height: 1.1; }
.ix-g__note { margin: 0; max-width: 64ch; padding: var(--gap-24); border-radius: var(--r-card); background: var(--white); font-family: var(--body); font-size: var(--t-p3-size); line-height: 1.5; }
.ix-g__act { margin: var(--gap-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--gap-16) var(--gap-24); align-items: center; }
.ix-guide .ix-checks li { max-width: 64ch; }

/* docs: a hairline row per download or outside form */
.ix-docs__list { margin: 0; padding: 0; list-style: none; }
.ix-doc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; gap: var(--gap-32); align-items: center; padding: var(--gap-32) 0; border-top: 1px solid var(--hairline-light); }
.ix-docs__list > .ix-doc:last-child { border-bottom: 1px solid var(--hairline-light); }
.ix-doc__t { margin: 0; font-size: var(--t-h5-size); line-height: 1.05; font-weight: 400; }
.ix-doc__b .ix-p { font-size: var(--t-p3-size); }
.ix-doc__act { display: flex; justify-content: flex-end; }

/* toc: the jump links of a long page, one quiet row under the hero */
.ix-toc { padding-block: var(--gap-24); border-bottom: 1px solid var(--hairline-light); }
.ix-toc__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-16) var(--gap-40); }
.ix-toc .ix-lbl { margin: 0; }
.ix-toc__nav { display: flex; flex-wrap: wrap; gap: var(--gap-12) var(--gap-32); }

/* fine print: a thin band with a short notice and, where they have one, a certified-provider badge */
.ix-finep { padding-block: var(--gap-40); }
.ix-fine__in { display: flex; align-items: center; gap: var(--gap-32); }
.ix-fine { margin: 0; max-width: 90ch; font-family: var(--body); font-size: var(--t-c3-size); line-height: 1.55; color: var(--ink-quiet); }
.ix-fine__badge { margin: 0; flex: none; width: 75px; }
.ix-fine__badge img { width: 100%; height: auto; }

/* doctor: the board seal sits under his facts */
.ix-seal { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--gap-12); padding: var(--gap-24) 0; border-top: 1px solid var(--hairline-light); border-bottom: 1px solid var(--hairline-light); }
.ix-seal .ix-lbl { margin: 0; }
.ix-seal__fig { margin: 0; width: 175px; max-width: 100%; }
.ix-seal__fig img { width: 100%; height: auto; }

/* office tour (2 x 2) and missions (3 across) */
.ix-tour__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-64); align-items: end; margin-bottom: var(--gap-48); }
.ix-tour__head .ix-h { margin-bottom: 0; }
.ix-tour__pics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-24); }
.ix-tour__pic { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }
.ix-tour__pic img, .ix-mis__pic img { width: 100%; height: 100%; object-fit: cover; }
.ix-mis__pics { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gap-16); align-items: start; }
.ix-mis__pic { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--white); }
.ix-mis__pic--2, .ix-mis__pic--4 { margin-top: var(--gap-40); }

/* pay: the opener of the financial-policy page */
.ix-pay { display: flex; min-height: 78svh; padding: calc(var(--hdr-h) + var(--gap-48)) 0 var(--ix-pad); }
.ix-pay__in { width: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-64); }
.ix-pay__h { margin: 0; }
@media (min-width: 1024px) { .ix-pay__h.t-dl { font-size: min(var(--t-display-l-size), 21svh); } }
.ix-pay__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-48); padding-top: var(--gap-32); border-top: 1px solid var(--hairline-light); }
.ix-pay__txt { max-width: 46ch; }
.ix-pay__txt .ix-lbl { margin-bottom: var(--gap-12); }
.ix-pay__act { justify-content: flex-end; }

/* contact and emergency */
.ix-soc { margin-right: var(--gap-24); }
.ix-emerg__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-64); align-items: center; }
.ix-emerg__txt .ix-h { margin-bottom: 0; }
.ix-emerg__p { margin: 0 0 var(--gap-32); max-width: 24em; line-height: 1.15; }

/* cases: the opener, the before and after sliders (the D20 device), single figures and the groups */
.ix-cases { padding: calc(var(--hdr-h) + var(--gap-48)) 0 var(--gap-48); }
.ix-cases__h { margin: 0 0 var(--gap-48); }
@media (min-width: 1024px) { .ix-cases__h.t-dl { font-size: min(var(--t-display-l-size), 21svh); } }
.ix-cases__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap-32) var(--gap-48); }
.ix-cases__note { margin: 0; max-width: 40ch; font-family: var(--body); font-size: var(--t-c3-size); line-height: 1.5; color: var(--ink-quiet); }
.ix-cases__nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--gap-16) var(--gap-32); }
.ix-ba__grid, .ix-cg__grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-40) var(--gap-24); }
.ix-ba__grid > li, .ix-cg__grid > li { min-width: 0; }
.ba-fig, .ix-single { margin: 0; display: grid; gap: var(--gap-12); }
.ba { position: relative; overflow: hidden; border-radius: var(--r-frame); aspect-ratio: var(--fr, 4 / 3); background: var(--tint); --pos: 50%; }
.ba > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__after img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: var(--ink-invert); pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%); pointer-events: none; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__range:focus-visible + .ba__knob { outline: 2px solid var(--ink-invert); outline-offset: 3px; border-radius: var(--r-circle); }
.ba__lbl { position: absolute; bottom: var(--gap-16); padding: var(--gap-8) var(--gap-12); border-radius: var(--r-pill); background: var(--anchor); color: var(--ink-invert); pointer-events: none; }
.ba__lbl--b { left: var(--gap-16); }
.ba__lbl--a { right: var(--gap-16); }
.ix-single__pic { border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }
.ix-single__pic img { display: block; width: 100%; height: auto; }
.ix-cap { margin: 0; font-family: var(--body); font-size: var(--t-c3-size); line-height: 1.45; color: var(--ink-quiet); }
.ix-cgs .ix-h { margin-bottom: var(--gap-24); }
.ix-cg { margin-top: var(--gap-48); padding-top: var(--gap-48); border-top: 1px solid var(--hairline-light); }
.ix-cg__head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gap-48); margin-bottom: var(--gap-32); align-items: start; }
.ix-cg__t { margin: 0; }
.ix-cg__grid { grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); align-items: start; }
.ix-cg__grid + .ix-cg__grid { margin-top: var(--gap-40); }
.ix-cg__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ix-cg__grid .ba-fig, .ix-cg__grid .ix-single { width: 100%; }
/* one slider and one composite side by side (Dental implants); a composite after a row of sliders is a feature row: figure at most at its own width, caption beside it */
.ix-cg__duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-24) var(--gap-48); align-items: center; }
.ix-cg__duo > div { min-width: 0; }
.ix-cg__duo .ba-fig { margin-inline: auto; width: 100%; }
.ix-cg__duo .ix-single { width: 100%; }
.ix-cg__feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-24) var(--gap-48); align-items: center; margin-top: var(--gap-48); }
.ix-cg__feat .ix-single { width: 100%; }
.ix-cg__head + .ix-cg__feat { margin-top: 0; }
.ix-cg__featcap { margin: 0; max-width: 14em; line-height: 1.1; }
.ix-split__pic--cap { justify-self: center; width: 100%; }

/* procedure cards: a long one-word title (Apicoectomy, Extractions) must fit its card at 1024 to 1200 wide, so the title yields to the width */
.ix-solc__t { font-size: clamp(30px, 3.9vw, var(--t-h4-size)); overflow-wrap: break-word; }

/* tablet widths: two cards across, so the small card pictures (500 and 576 px files) are never drawn past their own width */
@media (min-width: 600px) and (max-width: 1023px) {
  .ix-sol__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* a very narrow phone (320): a long button label gives up some padding instead of leaving the column */
@media (max-width: 359px) {
  :is(.ix-g__act, .ix-split__act, .ix-doc__act, .ix-acts) .pill { max-width: 100%; padding-inline: var(--gap-16); gap: var(--gap-12); }
}

@media (max-width: 1023px) {
  .ix-guide__in, .ix-emerg__in, .ix-tour__head, .ix-cg__head { grid-template-columns: minmax(0, 1fr); gap: var(--gap-32); }
  .ix-guide__side { position: static; }
  .ix-doc { grid-template-columns: minmax(0, 1fr); gap: var(--gap-16); padding: var(--gap-24) 0; }
  .ix-doc__act { justify-content: flex-start; }
  .ix-toc__in { gap: var(--gap-12) var(--gap-24); }
  .ix-fine__in { flex-direction: column; align-items: flex-start; gap: var(--gap-16); }
  .ix-tour__pics { gap: var(--gap-12); }
  .ix-tour__pic { border-radius: var(--r-card); }
  .ix-mis__pics { grid-template-columns: minmax(0, 1fr); gap: var(--gap-12); }
  .ix-mis__pic--2, .ix-mis__pic--4 { margin-top: 0; }
  .ix-pay { min-height: 0; padding-top: calc(var(--hdr-h) + var(--gap-24)); }
  .ix-pay__h { font-size: clamp(46px, 14.4vw, 72px); }
  .ix-pay .ix-pay__h > span, .ix-cases__h > span { text-align: left; display: block; }
  .ix-pay__row { flex-direction: column; align-items: flex-start; }
  .ix-pay__act { justify-content: flex-start; }
  .ix-cases { padding-top: calc(var(--hdr-h) + var(--gap-24)); }
  .ix-cases__h { font-size: clamp(46px, 14.4vw, 72px); }
  .ix-ba__grid, .ix-cg__grid, .ix-cg__grid--3 { grid-template-columns: minmax(0, 1fr); }
  .ix-cg__duo, .ix-cg__feat { grid-template-columns: minmax(0, 1fr); gap: var(--gap-24); }
  .ix-cg__feat { margin-top: var(--gap-32); }
  .ix-cg__featcap { font-size: var(--t-p3-size); line-height: 1.45; font-family: var(--body); color: var(--ink-quiet); max-width: none; }
  .ix-cg__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-16) var(--gap-12); }
  .ix-split__pic--doc { max-width: none; }
  .ix-facts--3 { grid-template-columns: minmax(0, 1fr); }
}