/* =============================================================================
   Halden Orthodontics, inner.css (owner: ortho-pages). The seven inner routes: /treatments/, the three treatment pages,
   /about/, /new-patients/ and /orthodontist-irvine/. 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-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); }

/* ---- aligners: who they suit ----------------------------------------------------------------------------------- */
.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(35, 31, 32,.84) 0%, rgba(35, 31, 32,.7) 34%, rgba(35, 31, 32,.3) 58%, rgba(35, 31, 32,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(35, 31, 32,.6) 26%, rgba(35, 31, 32,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); }

/* fix wave 3: a typographic plate where no honest photo of that appliance exists */
.ix-solc__plate { display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 0; background: var(--mist); color: var(--spruce); font-family: var(--display); font-style: italic; font-size: clamp(44px, 4.6vw, 72px); line-height: 1; letter-spacing: -.02em; }

/* =============================================================================
   Hexagon Life Planning Services (builder W2): the service pages, the hub, About, Contact, the landing page, privacy, audit.
   Same tokens, same radii (30 / 22), hairlines, one 1024px breakpoint. No shadows, no glass, no accent bars.
   ========================================================================== */
:is(.ix-brief, .ix-svcs, .ix-idx, .ix-bentoband, .ix-chapters, .ix-pairband, .ix-quote, .ix-dl, .ix-adv, .ix-peopleband,
    .ix-quotesband, .ix-contact, .ix-textband, .ix-audit) { padding-block: var(--ix-pad); }
.ix-related { padding-block: calc(var(--ix-pad) * .55); }
.ix-landing { padding-bottom: var(--ix-pad); }
.ix-num, .ix-idx__n, .ix-tile__n, .ix-ch__n { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--spruce); }

/* ---- hero additions: the kicker, the printed price, the type-only hero, the two equal portraits ---------------------- */
.ix-hero__card .ix-lbl { margin: 0; }
.ix-price { margin: 0; display: grid; gap: var(--gap-8); }
.ix-price .ix-lbl { margin: 0; }
.ix-price__v { display: block; font-family: var(--display); font-size: calc(var(--t-h4-size) * 1.05); line-height: 1; letter-spacing: var(--t-h4-track); }
.ix-hero--type { min-height: 0; padding-bottom: calc(var(--ix-pad) * .5); }
.ix-hero--type .ix-hero__in { gap: var(--gap-48); }
.ix-type__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gap-48); align-items: end; }
.ix-type__foot .ix-lede { max-width: 52ch; }
.ix-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-48); align-items: stretch; }
.ix-duo__pics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-16); align-items: start; }
.ix-duo__fig { position: relative; margin: 0; }
/* One matched pair (FX-D, see FIX-WAVE-v2-2-FXD-DONE.md): each portrait is a square print set in the SAME tint mat, 7.5% of the frame
   on all four sides, so both heads have the same room above them. The mat is the headroom: Melanie's file is a tight 800x800 selfie
   whose hair already reaches its top edge, so no crop of her file can give room; a mat equal on every side does it for both and reads
   as a mounted print. Melanie's whole selfie fills the square window (nothing is cropped from her). Carolyn's 1920x1280 original is
   enlarged inside the same window until her head is exactly as tall as Melanie's and her eyes sit on the same line (head top about 8%,
   eyes about 45%, chin about 81% of the frame, both). All figures are percentages of the frame or of the window, so they hold at
   every width. */
.ix-duo__pic { position: relative; aspect-ratio: 1 / 1; padding: 7.5%; border-radius: var(--r-frame); background: var(--tint); }
.ix-duo__win { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-img); background: var(--tint); }
.ix-duo__win img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ix-duo__fig--carolyn .ix-duo__win img { position: absolute; max-width: none; width: auto; height: var(--cz-h, 172.55%); aspect-ratio: 1920 / 1280;
  left: var(--cz-x, -74.2%); top: var(--cz-y, -14.8%); object-fit: fill; }
.ix-duo__fig { max-width: 430px; }
/* the name sits UNDER each portrait, never over the face (both faces fill the frame) */
.ix-duo__fig .ix-hero__tag { position: static; padding: var(--gap-12) 0 0; border-radius: 0; background: none; gap: var(--gap-4, 4px); }
.ix-duo__fig .ix-hero__name { text-wrap: balance; }
.ix-hero--duo .ix-lede { max-width: 46ch; font-size: var(--t-p2-size); }

/* ---- brief: their lead as a serif statement, their paragraphs, and the price card --------------------------------- */
.ix-brief__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gap-64); align-items: start; }
.ix-brief__st { margin: 0 0 var(--gap-40); max-width: 21em; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -.012em; }
.ix-brief__st em { font-style: italic; }
.ix-brief__paras { display: grid; gap: var(--gap-16); max-width: 58ch; }
.ix-brief__paras .ix-p + .ix-p { margin-top: 0; }
.ix-brief__card { position: sticky; top: calc(var(--hdr-h) + var(--gap-24)); display: grid; gap: var(--gap-32); padding: var(--gap-32); border-radius: var(--r-card); background: var(--white); }
.ix-brief__talk { margin: 0; }
.ix-price--big .ix-price__v { font-size: clamp(34px, 3.3vw, 50px); }

/* ---- services ledger: one whole-row link per service -------------------------------------------------------------- */
.ix-svcs__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-48); align-items: end; margin-bottom: var(--gap-48); }
.ix-svcs__top .ix-h { margin-bottom: 0; }
.ix-svcs__lead { max-width: 46ch; }
.ix-svcs__list { margin: 0; padding: 0; list-style: none; }
.ix-svcs__list > li:last-child .ix-svc, .ix-svcs__list > .ix-svc:last-child { border-bottom: 1px solid var(--hairline-light); }
.ix-svc { display: grid; grid-template-columns: 112px 40px minmax(0, 4fr) minmax(0, 5fr) minmax(138px, 2fr) 44px; align-items: center; gap: var(--gap-24);
  padding: var(--gap-24) 0; border-top: 1px solid var(--hairline-light); color: var(--ink); text-decoration: none; transition: background .25s; }
.ix-svc--plain { grid-template-columns: 40px minmax(0, 4fr) minmax(0, 5fr) minmax(138px, 2fr); }
.ix-svc__pic { display: block; aspect-ratio: 4 / 5; border-radius: var(--r-img); overflow: hidden; background: var(--tint); }
.ix-svc__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease, ease); }
a.ix-svc:hover .ix-svc__pic img { transform: scale(1.04); }
.ix-svc__n { font-family: var(--display); font-style: italic; font-size: var(--t-h5-size); color: var(--ink-quiet); }
.ix-svc__t { font-family: var(--display); font-size: clamp(30px, 2.9vw, 44px); line-height: 1; letter-spacing: -.012em; }
.ix-svc__d { display: grid; gap: var(--gap-8); font-family: var(--body); font-size: var(--t-p3-size); line-height: 1.5; color: var(--ink); }
.ix-svc__x { color: var(--ink-quiet); }
.ix-svc__p { justify-self: start; padding: 8px 16px; border: 1px solid var(--hairline-light); border-radius: var(--r-pill); font-family: var(--t-c1-family); font-size: var(--t-c1-size); font-weight: var(--t-c1-weight); white-space: nowrap; }
.ix-svc__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-circle); border: 1px solid var(--hairline-light); transition: background .25s, color .25s; }
.ix-svc__go svg { width: 14px; height: 14px; }
a.ix-svc:hover .ix-svc__go, a.ix-svc:focus-visible .ix-svc__go { background: var(--ink); color: var(--white); }
a.ix-svc:hover .ix-svc__t em { color: var(--spruce); }
.ix-svc--more .ix-svc__t { font-size: clamp(26px, 2.4vw, 36px); }

/* ---- index: a sticky headline, big italic numerals, hairline rows --------------------------------------------------- */
.ix-idx__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-64); align-items: start; }
.ix-idx__side { position: sticky; top: calc(var(--hdr-h) + var(--gap-24)); }
.ix-idx__side .ix-h { margin-bottom: var(--gap-24); }
.ix-idx__lead { max-width: 40ch; }
.ix-idx__list { margin: 0; padding: 0; list-style: none; }
.ix-idx__i { display: grid; grid-template-columns: clamp(64px, 7vw, 104px) minmax(0, 1fr); gap: var(--gap-24); padding: var(--gap-32) 0; border-top: 1px solid var(--hairline-light); }
.ix-idx__list > .ix-idx__i:last-child { border-bottom: 1px solid var(--hairline-light); }
.ix-idx__n { font-size: clamp(40px, 4.4vw, 68px); line-height: .85; }
.ix-idx__t { margin: 0 0 var(--gap-8); font-size: calc(var(--t-h5-size) * .95); line-height: 1.05; }
.ix-idx__close { margin-top: var(--gap-32); color: var(--ink-quiet); }

/* ---- bento: white tiles of one radius, the first one wide on the tint ----------------------------------------------- */
.ix-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-16); margin: 0; padding: 0; list-style: none; }
.ix-tile { display: grid; align-content: start; gap: var(--gap-16); padding: var(--gap-40); border-radius: var(--r-card); background: var(--white); }
.ix-tile--wide { grid-column: 1 / -1; grid-template-columns: clamp(64px, 7vw, 104px) minmax(0, 1fr); column-gap: var(--gap-24); background: var(--tint); padding-block: var(--gap-48); }
.ix-tile--wide .ix-tile__t { font-size: clamp(30px, 3vw, 46px); line-height: 1.02; letter-spacing: -.012em; font-family: var(--display); }
.ix-tile--wide .ix-p { grid-column: 2; }
.ix-tile__n { font-size: var(--t-h5-size); line-height: 1; }
.ix-tile--wide .ix-tile__n { font-size: clamp(40px, 4.4vw, 68px); line-height: .85; grid-row: 1 / span 2; }
.ix-tile__t { margin: 0; font-size: calc(var(--t-h5-size) * .95); line-height: 1.05; }
.ix-bento__close { margin-top: var(--gap-32); color: var(--ink-quiet); }

/* ---- chapters: three large white cards with an oversized numeral --------------------------------------------------- */
.ix-chs { display: grid; gap: var(--gap-16); margin: 0; padding: 0; list-style: none; }
.ix-ch { display: grid; grid-template-columns: clamp(72px, 10vw, 150px) minmax(0, 1fr); gap: var(--gap-32); padding: var(--gap-48); border-radius: var(--r-card); background: var(--white); }
.ix-ch__n { font-size: clamp(72px, 9vw, 140px); line-height: .8; }
.ix-ch__t { margin: 0 0 var(--gap-16); max-width: 22em; font-family: var(--display); font-weight: 400; font-size: var(--t-h4-size); line-height: 1.05; letter-spacing: var(--t-h4-track); }
.ix-ch__close { margin-top: var(--gap-32); color: var(--ink-quiet); }

/* ---- pair: two large white cards ---------------------------------------------------------------------------------- */
.ix-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-24); margin: 0; padding: 0; list-style: none; }
.ix-pc { display: grid; align-content: start; gap: var(--gap-16); padding: var(--gap-48); border-radius: var(--r-card); background: var(--white); }
.ix-pc__t { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-h4-size); line-height: 1.05; letter-spacing: var(--t-h4-track); }

/* ---- quote: one client's words on a tint panel -------------------------------------------------------------------- */
.ix-quote__in { padding: var(--gap-64) var(--gap-48); border-radius: var(--r-frame); background: var(--tint); }
.ix-quote__f { display: grid; gap: var(--gap-32); max-width: 52rem; margin: 0; }
.ix-quote__q { margin: 0; font-family: var(--display); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.14; letter-spacing: -.01em; }
.ix-quote__q p { margin: 0; }
.ix-quote__c { display: grid; gap: var(--gap-8); }
.ix-quote__n { font-family: var(--t-c1-family); font-size: var(--t-c1-size); font-weight: var(--t-c1-weight); }
.ix-quote__role { font-family: var(--t-c2-family); font-size: var(--t-c2-size); color: var(--ink-quiet); }

/* ---- related pages and further reading ----------------------------------------------------------------------------- */
.ix-rel__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gap-48); align-items: start; }
.ix-rel__h { margin: 0; font-size: var(--t-h5-size); }
.ix-rel { margin: 0; padding: 0; list-style: none; }
.ix-rel__a { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-16); min-height: 56px; padding: var(--gap-16) 0; border-top: 1px solid var(--hairline-light);
  color: var(--ink); text-decoration: none; font-family: var(--display); font-size: calc(var(--t-h5-size) * .95); line-height: 1.1; transition: color .2s; }
.ix-rel > li:last-child .ix-rel__a { border-bottom: 1px solid var(--hairline-light); }
.ix-rel__a:hover { color: var(--spruce); }
.ix-rel__go svg { width: 14px; height: 14px; }
.ix-related--art .ix-rel__a { font-size: calc(var(--t-h5-size) * .85); }

/* ---- download and adviser panels ----------------------------------------------------------------------------------- */
.ix-dl__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-48); align-items: center; }
.ix-dl__card { display: grid; justify-items: start; gap: var(--gap-24); padding: var(--gap-48); border-radius: var(--r-card); background: var(--white); }
.ix-dl__fmt { display: grid; place-items: center; width: 72px; height: 96px; border: 1px solid var(--hairline-light); border-radius: 12px; font-family: var(--t-c1-family); font-size: 14px; letter-spacing: 0; }
.ix-dl__name { margin: 0; font-family: var(--display); font-size: var(--t-h4-size); line-height: 1.05; letter-spacing: var(--t-h4-track); }
.ix-adv__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-48); align-items: center; padding: var(--gap-64) var(--gap-48); border-radius: var(--r-frame); background: var(--tint); }
.ix-adv__in .ix-h { margin-bottom: 0; }
.ix-adv__b { display: grid; justify-items: start; gap: var(--gap-24); }

/* ---- about: two people of one size, bios in full; reviews ---------------------------------------------------------- */
.ix-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-64); margin: 0; padding: 0; list-style: none; }
.ix-person { display: grid; align-content: start; gap: var(--gap-16); padding-top: var(--gap-32); border-top: 1px solid var(--hairline-light); scroll-margin-top: calc(var(--hdr-h) + var(--gap-24)); }
.ix-person .ix-lbl { margin: 0; }
.ix-person__n { margin: 0 0 var(--gap-8); font-family: var(--display); font-weight: 400; font-size: var(--t-h4-size); line-height: 1.05; letter-spacing: var(--t-h4-track); }
.ix-person .ix-p + .ix-p { margin-top: 0; }
.ix-qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-48); margin: 0; padding: 0; list-style: none; }
.ix-qs__i { display: grid; align-content: space-between; gap: var(--gap-24); padding-top: var(--gap-24); border-top: 1px solid var(--hairline-light); }
.ix-qs__q { margin: 0; font-family: var(--display); font-size: clamp(21px, 1.8vw, 27px); line-height: 1.22; }
.ix-qs__q p { margin: 0; }
.ix-qs__n { margin: 0; font-family: var(--t-c1-family); font-size: var(--t-c1-size); font-weight: var(--t-c1-weight); }
.ix-qs__links { display: flex; flex-wrap: wrap; gap: var(--gap-16) var(--gap-40); margin-top: var(--gap-48); }

/* ---- contact, landing, privacy ------------------------------------------------------------------------------------- */
.ix-contact__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-64); align-items: start; }
.ix-contact__head .ix-h { margin-bottom: var(--gap-24); }
.ix-contact .ix-vlist .ix-split__act { margin-top: var(--gap-12); }
.ix-form .radios { display: flex; flex-wrap: wrap; gap: var(--gap-8) var(--gap-16); margin-bottom: var(--gap-16); }
.ix-form .radios legend { width: 100%; margin-bottom: var(--gap-8); }
.ix-land__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-64); align-items: start; padding-top: calc(var(--hdr-h) + var(--gap-40)); }
.ix-land__txt { display: grid; gap: var(--gap-24); }
.ix-land__txt .ix-lbl, .ix-land__txt .ix-hero__h { margin: 0; }
.ix-land__txt .ix-lede { max-width: 52ch; }
.ix-land__sub { margin: 0; font-family: var(--display); font-size: var(--t-h5-size); line-height: 1.1; }
.ix-land__who { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--gap-24); align-items: end; margin: var(--gap-24) 0 0; }
.ix-land__who figcaption { display: grid; gap: var(--gap-8); }
.ix-land__who .ix-lbl { margin: 0; }
.ix-land__pic { aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--tint); }
.ix-land__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.ix-land__cred { font-family: var(--body); font-size: var(--t-p3-size); color: var(--ink-quiet); }
.ix-land__card { position: sticky; top: calc(var(--hdr-h) + var(--gap-24)); display: grid; gap: var(--gap-24); padding: var(--gap-32); border-radius: var(--r-card); background: var(--white); }
.ix-land__ch { margin: 0; }
.ix-land__tel { margin: 0; }
.ix-text__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-64); align-items: start; }
.ix-text__main { display: grid; gap: var(--gap-24); }
.ix-text__main .ix-p + .ix-p { margin-top: 0; }

/* ---- the website audit --------------------------------------------------------------------------------------------- */
.ix-aud__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gap-64); align-items: start; }
.ix-aud__nav { position: sticky; top: calc(var(--hdr-h) + var(--gap-24)); }
.ix-aud__nav ol { margin: 0; padding: 0; list-style: none; }
.ix-aud__nl { display: block; padding: var(--gap-12) 0; border-top: 1px solid var(--hairline-light); color: var(--ink); text-decoration: none; font-family: var(--body); font-size: var(--t-p3-size); }
.ix-aud__nl:hover { color: var(--spruce); }
.ix-aud__part { padding-bottom: var(--gap-64); scroll-margin-top: calc(var(--hdr-h) + var(--gap-24)); }
.ix-aud__ok, .ix-aud__list, .ix-aud__first { margin: 0; padding: 0; list-style: none; }
.ix-aud__ok li { display: grid; grid-template-columns: auto minmax(0, 1fr); 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.05); line-height: 1.5; }
.ix-aud__list > li, .ix-aud__first > li { display: grid; gap: var(--gap-12); padding: var(--gap-24) 0; border-top: 1px solid var(--hairline-light); }
.ix-aud__t { margin: 0; font-family: var(--display); font-weight: 400; font-size: calc(var(--t-h5-size) * .95); line-height: 1.1; }
.ix-aud__p { margin: 0; max-width: 62ch; font-family: var(--body); font-size: calc(var(--t-p3-size) * 1.05); line-height: 1.55; }
.ix-aud__new { margin: 0; max-width: 62ch; padding: var(--gap-16) var(--gap-24); border-radius: var(--r-img); background: var(--tint); font-family: var(--body); font-size: calc(var(--t-p3-size) * 1.05); line-height: 1.55; }
.ix-aud__main code, .ix-aud__first code { padding: 1px 6px; border-radius: 6px; background: var(--tint); font-family: inherit; font-size: inherit; font-weight: 600; }

/* =============================================================================  phones (to 1023px)  */
@media (max-width: 1023px) {
  .ix-type__foot, .ix-duo, .ix-brief__in, .ix-svcs__top, .ix-idx__in, .ix-rel__in, .ix-dl__in, .ix-adv__in, .ix-contact__in, .ix-land__in,
  .ix-text__in, .ix-aud__in { grid-template-columns: minmax(0, 1fr); gap: var(--gap-32); }
  .ix-duo__pics { gap: var(--gap-12); }
  .ix-duo__fig .ix-hero__tag { padding: var(--gap-8) 0 0; }
  .ix-duo__fig .ix-hero__name { font-size: 20px; }
  .ix-brief__card, .ix-idx__side, .ix-land__card, .ix-aud__nav { position: static; }
  .ix-svc { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "pic t" "pic d" "pic p"; gap: var(--gap-8) var(--gap-16); align-items: start; }
  .ix-svc--plain { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "d" "p"; }
  .ix-svc__pic { grid-area: pic; }
  .ix-svc__t { grid-area: t; font-size: 30px; }
  .ix-svc__d { grid-area: d; }
  .ix-svc__p { grid-area: p; }
  .ix-svc__n, .ix-svc__go { display: none; }
  .ix-idx__i { grid-template-columns: 52px minmax(0, 1fr); gap: var(--gap-16); }
  .ix-bento, .ix-pair, .ix-people, .ix-qs { grid-template-columns: minmax(0, 1fr); }
  .ix-people { gap: var(--gap-48); }
  .ix-tile, .ix-pc { padding: var(--gap-24); }
  .ix-tile--wide { grid-template-columns: 52px minmax(0, 1fr); padding-block: var(--gap-32); }
  .ix-ch { grid-template-columns: minmax(0, 1fr); gap: var(--gap-8); padding: var(--gap-32) var(--gap-24); }
  .ix-ch__n { font-size: 64px; }
  .ix-quote__in, .ix-adv__in { padding: var(--gap-40) var(--gap-24); border-radius: var(--r-card); }
  .ix-dl__card { padding: var(--gap-32) var(--gap-24); }
  .ix-land__in { padding-top: calc(var(--hdr-h) + var(--gap-16)); }
  .ix-land__who { grid-template-columns: 112px minmax(0, 1fr); }
  .ix-qs__links { margin-top: var(--gap-32); }
}

/* the credit line of a CC BY photo shown in a hero: a quiet caption under the frame */
.ix-credit { margin: var(--gap-12) 0 0; font-family: var(--t-c3-family); font-size: var(--t-c3-size); line-height: var(--t-c3-lh); color: var(--ink-quiet); }

/* W1b: at laptop widths the price pill may wrap inside its column instead of running past the screen edge */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ix-svc__p { white-space: normal; max-width: 100%; }
}

/* W1b: the two plain numbered lists (the consultation page's service list and the commitment index) are white cards, not bare text rows */
.ix-svcs__list--plain { display: grid; gap: var(--gap-12); }
.ix-svcs__list--plain .ix-svc, .ix-svcs__list--plain > li:last-child .ix-svc { background: var(--white); border: 0; border-radius: 22px; padding: var(--gap-24) var(--gap-32); }
.ix-idx__list { display: grid; gap: var(--gap-12); }
.ix-idx__i, .ix-idx__list > .ix-idx__i:last-child { background: var(--white); border: 0; border-radius: 22px; padding: var(--gap-24) var(--gap-32); }
@media (max-width: 720px) {
  .ix-svcs__list--plain .ix-svc, .ix-idx__i { padding: var(--gap-24); }
}