/* ==========================================================================
   Lux Lipo — character pass 3 (theme 3.0.0)
   Page composition + the immersion layer: the object stage, the wand, the
   swollen words, the progress rail and the companion canister.
   The skin itself lives in tokens/base/components; this file is the pass.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Heroes
   -------------------------------------------------------------------------- */
.ll-hero-frame, .ll-hero-quiet {
  position: relative;
  overflow: visible;
  background: var(--ll-dark-bg);
  color: var(--ll-cream);
  padding-top: 96px;
}
.ll-hero-frame h1, .ll-hero-quiet h1,
.ll-hero-frame h2, .ll-hero-quiet h2 { color: var(--ll-cream); }
.ll-hero-frame h1 em, .ll-hero-quiet h1 em,
.ll-hero-frame .ll-sub, .ll-hero-quiet .ll-sub { color: var(--ll-copper); }

.ll-hero-frame .ll-frame, .ll-hero-quiet .ll-frame,
.ll-hero-quiet__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: center;
  padding-bottom: 96px;
}
.ll-hero .ll-eyebrow { color: var(--ll-copper); }
.ll-hero h1 { font-size: var(--ll-fs-h1); margin-top: var(--ll-space-head); }
.ll-page--home .ll-hero h1 { font-size: var(--ll-fs-h1-lg); }
.ll-hero .ll-lead { margin-top: var(--ll-space-head); }
.ll-hero .ll-cta-row { margin-top: var(--ll-space-block); }
.ll-hero .ll-cta-note {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: var(--ll-space-head);
  color: var(--ll-on-dark-mute);
}

/* Contact, gallery and finance take their own H1 sizes (§4). */
.ll-page--contacts .ll-hero h1, .ll-page--gallery .ll-hero h1 { font-size: var(--ll-fs-h1-md); }
.ll-page--finance .ll-hero h1 { font-size: var(--ll-fs-h1-sm); }

@media (max-width: 960px) {
  .ll-hero-frame .ll-frame, .ll-hero-quiet .ll-frame, .ll-hero-quiet__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* The quiet page's hero card and its tag. */
.ll-herocard { position: relative; }
.ll-herocard .ll-pic { aspect-ratio: 4 / 5; border-bottom-left-radius: var(--ll-r-corner); }
.ll-tag, .ll-herocard .ll-tag {
  position: absolute;
  z-index: 4;
  right: -24px;
  bottom: 40px;
  background: var(--ll-sand);
  color: var(--ll-ink);
  padding: 16px 20px;
  max-width: 240px;
  box-shadow: var(--ll-e1);
}
.ll-tag .lab, .ll-tag .ll-eyebrow {
  display: block;
  color: var(--ll-copper-deep);
  font-size: var(--ll-fs-micro);
  letter-spacing: var(--ll-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.ll-tag .v, .ll-tag p { font-family: var(--ll-display); font-size: 18px; line-height: 1.25; margin: 0; color: var(--ll-ink); }

/* On a light photo shape the sand tag disappears into it, so it flips to
   espresso: the tag has to read as a separate card sitting over the corner. */
.ll-pic--light + .ll-tag, .ll-pic--copper + .ll-tag { background: var(--ll-espresso); }
.ll-pic--light + .ll-tag .lab, .ll-pic--copper + .ll-tag .lab { color: var(--ll-copper); }
.ll-pic--light + .ll-tag .v, .ll-pic--copper + .ll-tag .v { color: var(--ll-cream); }

/* --------------------------------------------------------------------------
   The object stage
   -------------------------------------------------------------------------- */
.ll-objcol {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  overflow: hidden;      /* the halo is 380px and the ring 340px; a phone column is 350px */
}
.ll-objcol > * { max-width: 100%; }
.ll-objcol .ll-obj, .ll-objcol .ll-stage__obj {
  position: relative;
  animation: ll-float 11s ease-in-out infinite;   /* was 6s; launch fix, 1 Oct: the stage at about half speed */
  z-index: 2;
}
@keyframes ll-float { 50% { transform: translateY(-10px); } }

.ll-objcol::before {              /* the halo */
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 144, 102, .42), rgba(200, 144, 102, .12) 45%, transparent 70%);
  filter: blur(30px);
}
.ll-objcol::after {               /* one ring, not two */
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 1px solid rgba(200, 144, 102, .28);
}
.ll-objcol svg { position: relative; z-index: 2; width: 100%; max-width: 230px; height: auto; }

.ll-readout {
  position: absolute;
  top: 18px; right: 0;
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--ll-fs-micro);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ll-copper); font-weight: 700;
  z-index: 3;
}
.ll-readout b {
  font-family: var(--ll-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0;
  color: var(--ll-cream);
  font-variant-numeric: tabular-nums;
}
.ll-objlabel {
  position: absolute;
  bottom: 0; left: 0;
  font-size: var(--ll-fs-micro);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--ll-copper-light);
  white-space: nowrap;
  z-index: 3;
}

/* The readout card and the stage label stay inside the stage (PROMPT-POLISH
   §2). The aside clips — the 380px halo needs it on a 350px phone column — so
   anything hung past its box is simply cut: the card ran 24px past the right
   edge and lost the ends of its words, and the label sat 6px below the box.
   The card now aligns to the stage's right edge and wraps; the aside keeps a
   strip at the bottom for the label. `.ll-objcol > *` already caps width at
   100%, which is why the card was 392px, not the 240px the base rule asks. */
/* The hero card's tag sits clear above the photo caption. Once captions
   moved in 56px to clear the curved corner, a long one ("The door, 3800B S
   Caraway Rd, Suite 8" on /contacts/) ran under the tag at 40px. */
.ll-herocard .ll-tag { bottom: 56px; }
.ll-objcol { padding-bottom: 28px; }
.ll-objcol .ll-tag { left: auto; right: 0; max-width: 100%; }
.ll-objcol .ll-tag .v { white-space: normal; overflow: visible; text-overflow: clip; }

@media (max-width: 700px) {
  .ll-objcol::before { width: 300px; height: 300px; }
  .ll-objcol::after  { width: 280px; height: 280px; }
}
@media (max-width: 960px) {
  .ll-objcol { min-height: 380px; }
  .ll-tag, .ll-herocard .ll-tag { right: 0; }
}

/* --------------------------------------------------------------------------
   The ticker
   -------------------------------------------------------------------------- */
/* Full-bleed: the ticker is a band, and a band that stops at the content
   gutter reads as a mistake. */
.ll-ticker {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: 100vw;
  background: var(--ll-espresso-deep);
  color: var(--ll-on-dark-soft);
  font-family: var(--ll-display);
  font-size: 20px;
  overflow: hidden;
  padding: 18px 0;
  white-space: nowrap;
  border-top: 1px solid rgba(200, 144, 102, .22);
}
.ll-ticker__row { display: inline-block; animation: ll-tick 48s linear infinite; }
.ll-ticker span { margin: 0 28px; }
.ll-ticker i { font-style: normal; color: var(--ll-copper); }
@keyframes ll-tick { to { transform: translateX(-50%); } }
/* HIG: no infinite motion the reader cannot stop. */
.ll-ticker:hover .ll-ticker__row { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ll-ticker__row { animation: none; } }

/* A section whose only job is to hold a full-bleed band carries no padding of
   its own, or the band floats in a stripe of cream. */
.ll-section--flush { padding-block: 0; }

/* The curved seam is retired with the cocoa skin — dark bands meet cream
   with a clean edge now. The element stays so built pages do not shift. */
.ll-seam { display: none; }

/* --------------------------------------------------------------------------
   The frame page: rail + companion canister
   -------------------------------------------------------------------------- */
.ll-rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: rgba(31, 27, 24, .08);
  z-index: var(--ll-z-rail);
  opacity: 0;
  transition: opacity .4s;
}
.ll-rail i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ll-copper);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .12s linear;
}
.ll-rail.is-on { opacity: 1; }

.ll-companion {
  position: fixed;
  right: clamp(16px, 3vw, 48px);
  bottom: 120px;
  z-index: var(--ll-z-object);
  width: 140px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0;
  transform: translateY(24px) scale(.9);
  transition: opacity .5s var(--ll-ease), transform .5s var(--ll-ease);
  pointer-events: none;
}
.ll-companion.is-on { opacity: 1; transform: none; }
.ll-companion::before {
  content: "";
  position: absolute; inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 144, 102, .28), transparent 68%);
  filter: blur(14px);
  z-index: -1;
}
/* HIG: a persistent element does not float. Only the hero canister does. */
.ll-companion svg { animation: none; }
.ll-companion__readout {
  font-size: var(--ll-fs-micro);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ll-copper-deep); font-weight: 700;
  display: flex; align-items: baseline; gap: 6px;
}
.ll-companion__readout b {
  font-family: var(--ll-display); font-weight: 400; font-size: 22px;
  letter-spacing: 0; color: var(--ll-ink); font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .ll-companion { width: 84px; bottom: 64px; right: 10px; }
  .ll-companion svg { width: 72px; height: 104px; }
  .ll-companion__readout b { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   The wand
   -------------------------------------------------------------------------- */
.ll-wandlayer { position: fixed; inset: 0; pointer-events: none; z-index: var(--ll-z-wand); }
.ll-wandlayer--hero { position: absolute; inset: 0; z-index: 6; }
.ll-wandlayer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ll-wand {
  position: absolute;
  left: 0; top: 0;
  width: 118px; height: 22px;
  transform: translate(-999px, -999px);
  transform-origin: 8px 11px;
  will-change: transform;
  opacity: 0;
}
.ll-wandlayer--hero .ll-wand { opacity: 1; }
.ll-wand.is-on { opacity: 1; }
.ll-wand .grip {
  position: absolute; left: 0; top: 0;
  width: 58px; height: 22px; border-radius: 11px;
  background: linear-gradient(180deg, #E8CCAF, #AD7550 70%, #6B4D38);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.ll-wand .grip i { position: absolute; top: 7px; width: 2px; height: 8px; background: rgba(31, 27, 24, .45); border-radius: 1px; }
.ll-wand .grip i:nth-child(1) { left: 22px; }
.ll-wand .grip i:nth-child(2) { left: 29px; }
.ll-wand .grip i:nth-child(3) { left: 36px; }
.ll-wand .cannula {
  position: absolute; left: 56px; top: 9px;
  width: 62px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ll-cream), var(--ll-copper-light));
}
.ll-wand .pull {
  position: absolute; left: 112px; top: 3px;
  width: 18px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 144, 102, .7), rgba(200, 144, 102, 0) 70%);
  opacity: 0; transform: scale(.4);
  transition: opacity .3s, transform .3s;
}
.ll-wand.is-sucking .pull { opacity: 1; transform: scale(1.2); }
.ll-beads circle { fill: var(--ll-copper); filter: drop-shadow(0 0 4px rgba(200, 144, 102, .8)); }

/* --------------------------------------------------------------------------
   The swollen words
   -------------------------------------------------------------------------- */
.wm {
  display: inline-block;
  font-family: var(--ll-display);
  font-style: italic;
  color: var(--ll-copper-deep);
  font-size: 1.6em;
  line-height: .9;
  letter-spacing: .03em;
  transform-origin: 50% 70%;
  transition: font-size 1.1s var(--ll-ease), color 1.1s, letter-spacing 1.1s;
}
.ll-on-dark .wm, .ll-hero .wm { color: var(--ll-copper-light); font-size: 1.75em; letter-spacing: .04em; }
.wm.done {
  font-size: 1em;
  font-style: normal;
  font-family: inherit;
  color: inherit;
  letter-spacing: 0;
}
@keyframes ll-fluidpulse {
  0% { filter: brightness(1); } 40% { filter: brightness(1.35); } 100% { filter: brightness(1); }
}
.ll-pulse { animation: ll-fluidpulse .9s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .wm { font-size: 1em; font-style: normal; font-family: inherit; color: inherit; letter-spacing: 0; }
  .ll-wandlayer { display: none; }
  .ll-objcol .ll-obj { animation: none; }
}
@media (max-width: 900px) {
  .ll-wand { width: 88px; }
  .ll-wand .cannula { width: 36px; left: 52px; }
  .ll-wand .pull { left: 84px; }
  .ll-readout { top: auto; bottom: 34px; right: auto; left: 0; }
  /* :not(.done) matters. Without it this rule sits after `.wm.done` at equal
     specificity and wins, so a word the wand has already taken stays swollen
     for the rest of the visit. */
  .wm:not(.done), .ll-hero .wm:not(.done) { font-size: 1.35em; }
}

/* --------------------------------------------------------------------------
   Procedure page sections
   -------------------------------------------------------------------------- */
.fsec, .ll-frame__copy > section { padding-block: var(--ll-section-y-sm); }
.ll-frame__copy > section:nth-of-type(even) { background: transparent; }
.ll-section--sand, .fsec--sand { background: var(--ll-sand); }

/* The frame wrapper is a plain column now: the rail is fixed, so nothing needs
   a reserved gutter. */
.ll-frame { display: block; }
.ll-frame__copy { display: block; }
.ll-frame__copy .fsec > .ll-container { max-width: var(--ll-content); }

/* --------------------------------------------------------------------------
   Phone: the fold decides the bounce
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .ll-hero-frame, .ll-hero-quiet { padding-top: 0; }
  .ll-hero-frame .ll-frame, .ll-hero-quiet .ll-frame, .ll-hero-quiet__grid {
    padding-top: 24px;
    padding-bottom: 36px;
    gap: 24px;
  }
  .ll-hero .ll-eyebrow { font-size: 11px; letter-spacing: .2em; }
  .ll-hero h1, .ll-page--home .ll-hero h1 { font-size: 40px; line-height: 1.02; margin-top: 12px; }
  .ll-hero .ll-sub { font-size: 40px; line-height: 1.02; }
  .ll-hero .ll-lead { margin-top: 14px; font-size: 15px; }
  .ll-hero .ll-lead .more { display: none; }
  .ll-hero .ll-cta-row { margin-top: var(--ll-space-head); gap: 10px; }
  .ll-hero .ll-cta-note { margin-top: var(--ll-space-head); gap: 16px; }
  .ll-objcol { min-height: 300px; margin-top: 8px; }
  .ll-table { padding: 4px 18px; }
  .ll-table > div { gap: 10px; font-size: 14px; align-items: baseline; flex-wrap: wrap; }
  .ll-table span { font-size: 16px; }
  .ll-ticker { font-size: 18px; }
  .ll-tag, .ll-herocard .ll-tag { position: static; max-width: none; margin-top: var(--ll-space-head); display: block; }
  /* nowrap at 15px made this 378px in a 350px column — the body was 398px
     wide and `overflow-x: hidden` hid it from the gate. 11px fits; wrapping
     means it fits whatever the copy says. */
  .ll-objlabel {
    position: static;
    display: block;
    margin-top: 10px;
    text-align: center;
    letter-spacing: .2em;
    white-space: normal;
    max-width: 100%;
  }

  /* The answer card exists for AI quoting; the fold is for her. It moves below
     the CTA row so Book sits at ≤ 520px. .ll-hero IS the copy column — the
     rule used to target a child that does not exist, so nothing reordered. */
  .ll-hero { display: flex; flex-direction: column; }
  .ll-hero > *            { order: 2; }
  .ll-hero > .ll-hero__crumb { order: 0; }
  .ll-hero > .ll-eyebrow  { order: 0; }
  .ll-hero > h1, .ll-hero > .brxe-heading { order: 1; }
  .ll-hero > .ll-hero__lead   { order: 2; }
  .ll-hero > .brxe-shortcode  { order: 3; }
  .ll-hero > .ll-hero__answer { order: 5; }
  .ll-hero .ll-answer { margin-top: var(--ll-space-head); padding: 16px 18px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   HIG pass (16 Sept, corrected 19 Sept)
   28pt hit regions on inline links · 44pt summaries · no infinite motion on
   persistent elements · no motion across a primary control (see wand.js: the
   phone home hero runs no wand flight).

   THE 11px FLOOR IS A MINIMUM, NOT A RESIZE.
   Theme 3.0.0 set `font-size: max(11px, 1em)` on this whole list. In a
   font-size declaration `1em` is the PARENT's size, so every eyebrow, chip,
   readout, numeral and caption on the site rendered at 15–17px. That is what
   wrapped the hero trust strip onto three lines, stacked the drive chips into
   a column, clipped the jump bar at 1440 and pushed the stage label 8px past
   the right edge of a 390 phone.

   Only five rules ever sat under 11px — hero eyebrow 9, hero strip 10, readout
   10, companion readout 9, before/after corner labels 10 — and those are 11px
   now. Everything else keeps the size it was designed at. Do not reintroduce
   the max().
   -------------------------------------------------------------------------- */

/* --- 11px: eyebrows, keys, numerals, captions, chips, micro-labels --------- */
.ll-eyebrow,
.ll-cta-note, .ll-cta-note span,
.ll-readout, .ll-companion__readout,
.ll-objlabel,
.ll-chip, .ll-breadcrumb, .ll-crumb,
.ll-pic, .ll-pic__cap,
.ll-timeline__label,
.ll-nap .k, .ll-open-now,
.ll-why .n, .ll-cols .n, .ll-firstvisit .n,
.ll-steps li::before, .ll-path .n, .ll-stepline .n,
.ll-finder__steps, .ll-finder__step,
.ll-everyday small, .ll-door__k,
.ll-ba__side,
.ll-reviews footer,
.ll-gallery__filters .ll-chip,
.ll-sticky-cta a,
.ll-footer__title { font-size: 11px; }

/* --- 12px: the slightly larger links and captions -------------------------- */
.ll-jump a,
.ll-door__go,
.ll-card__more, .ll-related a::after,
.ll-ba__cap, .ll-ba__note,
.ll-reviews__note,
.ll-clinic__cap { font-size: 12px; }

/* --- 13px: the proof strip and the gallery count --------------------------- */
.ll-proof__count, .ll-proof a, .ll-proof__stars,
.ll-gallery__count { font-size: 13px; }

/* --- the display numerals these labels sit beside -------------------------- */
.ll-readout b { font-size: 28px; }
.ll-companion__readout b { font-size: 22px; }
.ll-proof__score { font-size: 30px; }

/* 28pt hit regions on inline links, without touching the type. */
.ll-prose a, .ll-section p a, .ll-lead a, .ll-timeline__text a, .ll-reviews__note a {
  position: relative;
}
.ll-prose a::after, .ll-section p a::after, .ll-lead a::after,
.ll-timeline__text a::after, .ll-reviews__note a::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -8px;
}

@media (max-width: 700px) {
  .ll-hero .ll-eyebrow { letter-spacing: .2em; }
  .ll-readout b { font-size: 24px; }
  .ll-proof__score { font-size: 26px; }
}

/* ==========================================================================
   3.0.13 — layout by rule (PROMPT-LAUNCH-FIX §1c)
   Measured at 1920 on 1 Oct: headings and their body columns started on
   different pixels, the FAQ zig-zagged under its heading, the heading-to-body
   gap was five different numbers, the "Is this you" text sat 32px in from its
   heading, and short sections read as slabs. Each fix below is a rule for
   every page, not a patch for one.
   ========================================================================== */

/* 1 · Two-column sections top-align. The heading block's top edge (eyebrow
   included) and every other column's top edge are the same pixel: start
   alignment, and no column or first child brings a top margin of its own.
   .ll-head was bottom-aligned (baselines) and the cost band and doctor block
   were centred, which is what put the body 24–134px off the heading. */
.ll-head, .ll-cost, .ll-doctor-block, .ll-two, .ll-split, .ll-finder-block { align-items: start; }
.ll-head > *, .ll-cost > *, .ll-doctor-block > * { margin-top: 0; padding-top: 0; }
.ll-head > * > :first-child, .ll-cost > * > :first-child,
.ll-doctor-block > * > :first-child { margin-top: 0; }

/* 3 · Heading → body is one token. The head's bottom margin IS the gap, so
   whatever follows the head starts flush: no 14px on the "Is this you" grid,
   no 40px on the steps list, no 22px on the credential line stacked on top. */
.ll-head { margin-bottom: var(--ll-space-h2body); }
.ll-head + *, .ll-head + * > :first-child,
.ll-head + * > :first-child > :first-child { margin-top: 0; }
.ll-two > * + * { margin-top: var(--ll-space-h2body); }
.ll-section h2 + .ll-lead, .ll-band h2 + .ll-lead,
.ll-section h2 + p, .ll-band h2 + p { margin-top: var(--ll-space-h2body); }
@media (max-width: 600px) { :root { --ll-space-h2body: 16px; } }

/* A section photo (-03 "Who performs it") sits BESIDE the copy from the
   eyebrow down, not under it and off to the right. The trailing 1fr row
   takes whatever height the photo needs beyond the copy, so the copy rows
   keep their own spacing. The -02 "What it feels like" frame keeps its
   3.0.11 position under the copy (PROMPT-LAUNCH-FIX §1b). */
@media (min-width: 901px) {
  .ll-section > .ll-container:has(> .ll-secpic .ll-pic:not([data-slot$="-02"])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: repeat(5, auto) 1fr;
    column-gap: 64px;
    align-items: start;
  }
  .ll-section > .ll-container:has(> .ll-secpic .ll-pic:not([data-slot$="-02"])) > * { grid-column: 1; }
  .ll-section > .ll-container:has(> .ll-secpic .ll-pic:not([data-slot$="-02"])) > .ll-secpic {
    grid-column: 2; grid-row: 1 / -1; margin: 0; max-width: none;
  }
}

/* A heading with no .ll-head wrapper (Related treatments) follows the same
   token: the body wrapper takes the gap, its first child brings none. */
.ll-container > h2 + * { margin-top: var(--ll-space-h2body); }
.ll-container > h2 + * > :first-child { margin-top: 0; }
.ll-finder-block > div:first-child > h2 + p { margin-top: var(--ll-space-h2body); }

/* A head that stacks (phones, tablets, and the one-column heads on desktop)
   puts the token between the heading and its lede, and an empty second
   column takes no row at all, so it cannot double the gap. The old 64px
   column gap became an 86px row gap on the stacked heads. */
.ll-head { row-gap: var(--ll-space-h2body); }
.ll-head > :empty { display: none; }

/* The doctor portrait fills the height of the copy beside it (never under
   380px) instead of standing 567px tall next to 232px of text at 1280. The
   frame crops from the top, where the face is. */
@media (min-width: 901px) {
  .ll-doctor-block { align-items: stretch; }
  .ll-doctor-block > .ll-pic { aspect-ratio: auto !important; height: auto; min-height: 380px; }
  .ll-doctor-block > .ll-pic .ll-pic__img { object-position: 50% 18%; }
  .ll-doctor-block > div { align-self: start; }
}

/* 2 · The FAQ is a heading column beside one list, both starting on the same
   pixel, and the section contains it: no fixed height, no negative margin.
   It was a 5fr/7fr grid under the heading that the questions zig-zagged
   across, which is why the accordion never lined up with anything. */
.ll-faq { display: block; }
.ll-faq > details:first-child { padding-top: 0; }
.ll-faq > details:last-child { margin-bottom: 0; }
@media (min-width: 901px) {
  .ll-section > .ll-container:has(> .ll-head + .brxe-shortcode > .ll-faq) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 64px;
    align-items: start;
  }
  .ll-container:has(> .ll-head + .brxe-shortcode > .ll-faq) > .ll-head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--ll-space-h2body);
    margin-bottom: 0;
    /* The heading travels with a long list instead of sitting above an
       empty column: it is the list's label all the way down. */
    position: sticky;
    top: calc(var(--ll-header-h) + 64px + var(--ll-space-block));
  }
  .ll-faq > details:first-child > summary { align-items: flex-start; }
}

/* 4 · "Is this you": the card's left edge is the heading's left edge. The
   rule is the card's top edge, inside its padding, instead of a left border
   that pushed the text 32px in from everything above it. */
.ll-isthisyou { gap: clamp(28px, 4vw, 64px); margin-top: 0; }
.ll-isthisyou > div, .ll-isthisyou > div + div {
  padding: var(--ll-space-card) 0 0;
  border-left: 0;
  border-top: 2px solid var(--ll-copper);
  margin-top: 0;
}
.ll-isthisyou > div + div { border-top-color: var(--ll-rule); }
@media (max-width: 900px) {
  .ll-isthisyou { row-gap: var(--ll-space-block); }
  .ll-isthisyou > div + div { border-top-color: var(--ll-copper); }
}

/* 5 · A table under a paragraph gets the block gap (the insurance table sat
   flush against its paragraph). */
.ll-container > .brxe-text + .brxe-shortcode > .ll-table { margin-top: var(--ll-space-block); }

/* 6 · Short sections pair up at >= 1280: Results beside Risks, and "What it
   feels like" beside "Where people come from" (only while "What it feels
   like" has no photograph; with one it is already a full two-column
   section). The DOM keeps the template order; the grid only places the
   pairs side by side. order = pair-2 tier x 10 + pair-1 tier, so the two
   pairs compose on a page that has both. */
@media (min-width: 1280px) {
  #brx-content:has(> #sec-results):has(> #sec-risks),
  #brx-content:has(> #sec-what-it-feels-like):has(> #sec-where-people-come-from):not(:has(> #sec-what-it-feels-like .ll-pic)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #brx-content:has(> #sec-results):has(> #sec-risks) > *,
  #brx-content:has(> #sec-what-it-feels-like):has(> #sec-where-people-come-from):not(:has(> #sec-what-it-feels-like .ll-pic)) > * {
    /* Span and order come from custom properties the pair rules set, so the
       two pairs' selectors never compete on specificity. */
    grid-column: var(--ll-span, 1 / -1);
    order: calc(var(--ll-o2, 0) * 10 + var(--ll-o1, 0));
  }

  /* Pair 1: Results | Risks */
  #brx-content:has(> #sec-results):has(> #sec-risks) > #sec-results ~ * { --ll-o1: 2; }
  #brx-content:has(> #sec-results):has(> #sec-risks) > #sec-results,
  #brx-content:has(> #sec-results):has(> #sec-risks) > #sec-results ~ #sec-risks {
    --ll-o1: 1; --ll-span: auto; align-self: start; padding-top: 0;
  }
  /* The section after Risks now follows the cost band: its top padding comes back. */
  #brx-content:has(> #sec-results):has(> #sec-risks) > #sec-risks + .ll-section { padding-top: var(--ll-space-section); }

  /* Pair 2: What it feels like | Where people come from */
  #brx-content:has(> #sec-what-it-feels-like):has(> #sec-where-people-come-from):not(:has(> #sec-what-it-feels-like .ll-pic)) > #sec-what-it-feels-like ~ * { --ll-o2: 2; }
  #brx-content:has(> #sec-what-it-feels-like):has(> #sec-where-people-come-from):not(:has(> #sec-what-it-feels-like .ll-pic)) > #sec-what-it-feels-like,
  #brx-content:has(> #sec-what-it-feels-like):has(> #sec-where-people-come-from):not(:has(> #sec-what-it-feels-like .ll-pic)) > #sec-what-it-feels-like ~ #sec-where-people-come-from {
    --ll-o2: 1; --ll-span: auto; align-self: start; padding-top: 0;
  }

  /* A paired section's container is half the page column: the left one keeps
     the page's left edge, the right one its right edge, 64px between. */
  #brx-content:has(> #sec-results):has(> #sec-risks) > #sec-results > .ll-container,
  #brx-content:has(> #sec-what-it-feels-like):has(> #sec-where-people-come-from):not(:has(> #sec-what-it-feels-like .ll-pic)) > #sec-what-it-feels-like > .ll-container {
    max-width: calc(var(--ll-content) / 2); margin-left: auto; margin-right: 0; padding-right: 32px;
  }
  #brx-content:has(> #sec-results):has(> #sec-risks) > #sec-risks > .ll-container,
  #brx-content:has(> #sec-what-it-feels-like):has(> #sec-where-people-come-from):not(:has(> #sec-what-it-feels-like .ll-pic)) > #sec-where-people-come-from > .ll-container {
    max-width: calc(var(--ll-content) / 2); margin-left: 0; margin-right: auto; padding-left: 32px;
  }
  #brx-content > :is(#sec-results, #sec-risks, #sec-what-it-feels-like, #sec-where-people-come-from) .ll-head { grid-template-columns: minmax(0, 1fr); }
}

/* The /contacts/ waiting-area frame (CONTACT-02) beside "Where we are". */
@media (min-width: 901px) {
  .ll-secpic:has(.ll-pic[data-slot="CONTACT-02"]) { width: clamp(300px, 34vw, 453px); }
}

/* "How it works", five steps: one row of five at >= 1280; three over two from
   601 to 1279 (a six-track grid, the last two spanning half each) so step 05
   never sits alone on a row. Phones keep the single-column list. Four-step
   lists are unchanged: four across, two by two below 900. */
@media (min-width: 1280px) {
  .ll-steps:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 1279px) {
  .ll-steps:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ll-steps:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .ll-steps:has(> li:nth-child(5):last-child) > li:nth-child(n+4) { grid-column: span 3; }
}