/* ==========================================================================
   Lux Lipo — components
   Every rule here is ported from the approved mockups (docs/character-v3.html,
   procedure-v1, gallery-v1, contact-v1, finance-v1) and tokenised.
   Class names stay on the theme's ll- vocabulary so the 56 built pages, the
   Build API and the shortcodes keep working unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section heads — H2 left, lede right, baselines aligned
   -------------------------------------------------------------------------- */
.ll-head {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: end;
  margin-bottom: var(--ll-space-block);
}
.ll-head p { color: var(--ll-ink-soft); max-width: 520px; margin: 0; }
.ll-on-dark .ll-head p { color: var(--ll-on-dark-soft); }
@media (max-width: 900px) { .ll-head { grid-template-columns: 1fr; gap: 16px; } }

.ll-two {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.ll-two--rev { grid-template-columns: 7fr 5fr; }
.ll-two > .ll-prose p { max-width: 62ch; }
.ll-split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
@media (max-width: 900px) {
  .ll-two, .ll-two--rev, .ll-split { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Numbered columns (01–04) — the rule above each draws in on reveal
   -------------------------------------------------------------------------- */
.ll-why, .ll-cols, .ll-firstvisit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  list-style: none;
}
.ll-why > *, .ll-cols > *, .ll-firstvisit > * {
  border-top: 1px solid var(--ll-rule);
  padding-top: 20px;
  position: relative;
}
.ll-on-dark .ll-why > *, .ll-on-dark .ll-cols > * { border-top-color: var(--ll-rule-dark); }
/* The copper hairline that draws across the grey rule as the row reveals. */
.ll-why > *::before, .ll-cols > *::before, .ll-firstvisit > *::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--ll-copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--ll-ease);
}
.is-in.ll-why > *::before, .is-in.ll-cols > *::before, .is-in.ll-firstvisit > *::before,
.is-in .ll-why > *::before, .is-in .ll-cols > *::before, .is-in .ll-firstvisit > *::before { transform: scaleX(1); }

.ll-why .n, .ll-cols .n, .ll-firstvisit .n,
.ll-why > *::marker { }
.ll-why .n, .ll-cols .n, .ll-firstvisit .n {
  display: block;
  font-size: 11px;
  letter-spacing: var(--ll-tracking-eyebrow);
  color: var(--ll-copper-deep);
  font-weight: 600;
  margin-bottom: 12px;
}
.ll-on-dark .ll-why .n, .ll-on-dark .ll-cols .n { color: var(--ll-copper); }
.ll-why h3, .ll-cols h3, .ll-firstvisit h3 { margin-bottom: 8px; font-size: 22px; }
.ll-why p, .ll-cols p, .ll-firstvisit p {
  font-size: 15px; color: var(--ll-ink-soft); line-height: 1.55; margin: 0;
}
.ll-on-dark .ll-why p, .ll-on-dark .ll-cols p { color: var(--ll-on-dark-soft); }
@media (max-width: 900px) { .ll-why, .ll-cols, .ll-firstvisit { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* Ordered numbered steps ("How it works") — serif numerals from a counter. */
.ll-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: var(--ll-space-block);
  list-style: none;
  counter-reset: llstep;
}
.ll-steps li { padding-top: 18px; border-top: 1px solid var(--ll-rule); counter-increment: llstep; position: relative; }
.ll-steps li::before {
  content: "0" counter(llstep);
  display: block;
  font-family: var(--ll-body);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--ll-copper-deep);
  font-weight: 700;
  margin-bottom: 10px;
}
.ll-steps li:nth-child(n+10)::before { content: counter(llstep); }
.ll-steps h3, .ll-steps strong {
  font-family: var(--ll-display);
  font-weight: 400;
  font-size: 21px;
  display: block;
  margin: 0 0 6px;
}
.ll-steps p { font-size: 14px; color: var(--ll-ink-soft); line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .ll-steps { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 600px) { .ll-steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Photo shapes (.ll-pic) — flat gradient, one 120px corner or a 150px arch.
   No border, no shadow, no dashed inner frame, no camera badge.
   -------------------------------------------------------------------------- */
.ll-pic {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  font-size: var(--ll-fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, .82);
  background: linear-gradient(160deg, var(--ll-espresso-glow) 0%, var(--ll-espresso) 100%);
  transition: transform var(--ll-hover) var(--ll-ease);
}
.ll-pic--light {
  color: rgba(31, 27, 24, .62);
  background: linear-gradient(160deg, #EAE4DA 0%, #D2C8B9 100%);
}
.ll-pic--copper, .ll-pic--warm {
  color: var(--ll-espresso-deep);
  background: linear-gradient(160deg, #E8CCAF 0%, #C89066 100%);
}
.ll-pic--dark { color: rgba(246, 243, 238, .82); background: linear-gradient(160deg, var(--ll-espresso-glow), var(--ll-espresso-deep)); }

/* One corner only. Every other corner is square — that is the shape language. */
.ll-pic--bl, .ll-pic--hero { border-bottom-left-radius: var(--ll-r-corner); }
.ll-pic--tr, .ll-door__ph { border-top-right-radius: var(--ll-r-corner); }
.ll-pic--arch, .ll-pic--doctor { border-top-left-radius: var(--ll-r-arch); border-top-right-radius: var(--ll-r-arch); }
.ll-pic--round { border-radius: 50%; aspect-ratio: 1; }

.ll-pic__cap {
  position: relative;
  z-index: 1;
  font-size: var(--ll-fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  line-height: 1.35;
}
.ll-pic__cap b { font-weight: 600; }
.ll-pic__cap span { display: none; }      /* the "Photo —" label is retired */
.ll-pic__badge { display: none; }         /* the camera badge is retired */

.ll-pic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ll-pic.is-filled .ll-pic__cap {
  color: var(--ll-cream);
  text-shadow: 0 1px 8px rgba(20, 17, 16, .7);
}
.ll-pic.is-filled::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(20, 17, 16, .55), transparent);
}
.ll-pic.is-filled .ll-pic__img { transition: transform 700ms var(--ll-ease); }
.ll-pic.is-filled:hover .ll-pic__img { transform: scale(1.03); }

/* The clinic trio: big / medium / arch, baselines aligned. */
.ll-clinic {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: 20px;
  align-items: end;
}
.ll-clinic .ll-pic { aspect-ratio: auto; }
.ll-clinic .ll-pic:nth-child(1) { height: 420px; border-bottom-left-radius: var(--ll-r-corner); }
.ll-clinic .ll-pic:nth-child(2) { height: 340px; }
.ll-clinic .ll-pic:nth-child(3) { height: 480px; border-top-left-radius: var(--ll-r-arch); border-top-right-radius: var(--ll-r-arch); }
.ll-clinic .ll-pic:nth-child(n+4) { display: none; }
.ll-clinic__cap {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 14px; font-size: 12px; color: var(--ll-ink-soft); flex-wrap: wrap;
}
@media (max-width: 900px) {
  .ll-clinic { grid-template-columns: 1fr; align-items: stretch; }
  .ll-clinic .ll-pic { height: 300px !important; }
}

/* --------------------------------------------------------------------------
   Doors
   -------------------------------------------------------------------------- */
.ll-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ll-door {
  background: var(--ll-white);
  box-shadow: var(--ll-e1);
  display: flex;
  flex-direction: column;
  transition: transform var(--ll-hover) var(--ll-ease), box-shadow var(--ll-hover) var(--ll-ease);
}
.ll-door:hover { transform: translateY(-6px); box-shadow: var(--ll-e2); }
.ll-door:hover .ll-pic { transform: translateY(-4px); }
.ll-door__ph { aspect-ratio: 16 / 10; }
.ll-door__in { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.ll-door__k {
  display: flex; justify-content: flex-end;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ll-copper-deep); font-weight: 600; margin-bottom: 12px;
}
.ll-door h3 { margin: 0 0 8px; }
.ll-door p { font-size: 15px; color: var(--ll-ink-soft); margin: 0; }
.ll-door__go {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--ll-rule);
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.ll-door__go::after { content: "→"; }
@media (max-width: 900px) { .ll-doors { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   The everyday-treatments list
   -------------------------------------------------------------------------- */
.ll-everyday { border-top: 1px solid var(--ll-rule); display: block; }
.ll-everyday__pic { margin-top: var(--ll-space-head); }
.ll-everyday > a, .ll-everyday .ll-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--ll-rule);
  background: none;
  box-shadow: none;
}
.ll-everyday > a > *, .ll-everyday .ll-card > * {
  transition: transform .25s var(--ll-ease);
}
.ll-everyday > a:hover > *, .ll-everyday .ll-card:hover > * { transform: translateX(8px); }
.ll-everyday > a:hover, .ll-everyday .ll-card:hover { background: none; box-shadow: none; }
.ll-everyday .g { display: none; }
.ll-everyday h3 { margin: 0 0 4px; }
.ll-everyday small, .ll-everyday .m > span:first-child {
  display: block;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ll-copper-deep); font-weight: 600; margin-bottom: 6px;
}
.ll-everyday p { font-size: 15px; color: var(--ll-ink-soft); margin: 0; }
.ll-everyday .m { color: var(--ll-copper-deep); font-size: 18px; }
.ll-everyday .m > span:last-child { font-size: 0; }
.ll-everyday .m > span:last-child::after { content: "↗"; font-size: 18px; }

/* --------------------------------------------------------------------------
   Doctor block
   -------------------------------------------------------------------------- */
.ll-doctor-block { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.ll-doctor-block .ll-pic { aspect-ratio: 4 / 5; }
/* A photo that belongs to a section, not to a band: it sits in the right half
   of the column the copy does not use, so the page keeps its 5fr/7fr rhythm. */
.ll-secpic { margin-top: var(--ll-space-block); }
@media (min-width: 900px) { .ll-secpic { max-width: 46%; margin-left: auto; } }
/* The §03 "What it feels like" frame (-02). The section container is a flex
   column aligned to the start, so the wrapper shrank to its content and the
   46% was only a ceiling: /awake-liposuction/'s handpiece rendered 209px
   wide and read as a stray icon (last look, 30 Sept). It now has a real
   width: full width on phones, the right column at 46% (never under 360px)
   on desktop. Morpheus8's frame is a shape and gets the same box. */
.ll-secpic:has(> .brxe-shortcode > .ll-pic[data-slot$="-02"]),
.ll-secpic:has(> .ll-pic[data-slot$="-02"]) { width: 100%; }
@media (min-width: 900px) {
  .ll-secpic:has(> .brxe-shortcode > .ll-pic[data-slot$="-02"]),
  .ll-secpic:has(> .ll-pic[data-slot$="-02"]) { width: 46%; min-width: 360px; }
}

.ll-credential, .ll-cred {
  margin-top: var(--ll-space-head);
  padding: 16px 20px;
  border-left: 2px solid var(--ll-copper);
  background: var(--ll-white);
  font-size: 15px;
  color: var(--ll-ink-soft);
  max-width: 64ch;
}
.ll-section--sand .ll-credential { background: var(--ll-sand); }
.ll-why--stats { display: flex; gap: 32px; flex-wrap: wrap; margin-top: var(--ll-space-head); }
.ll-why--stats > div { border: 0; padding: 0; }
@media (max-width: 900px) { .ll-doctor-block { grid-template-columns: 1fr; gap: 32px; } }

/* --------------------------------------------------------------------------
   Dark table band (cost)
   -------------------------------------------------------------------------- */
/* 1fr 1fr, not 5fr 7fr: procedure-v1.html's cost band is two equal 548px
   columns, which is what puts Book and "How financing works" side by side
   instead of stacking them. At 5fr 7fr the left column is 453px and the two
   buttons (477px together) wrap. */
.ll-cost, .ll-band__in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ll-table {
  background: rgba(246, 243, 238, .06);
  border: 1px solid var(--ll-rule-dark);
  padding: 8px 28px;
  box-shadow: var(--ll-e2);
}
.ll-table > div {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ll-rule-dark);
  font-size: 15px;
}
.ll-table > div:last-child { border-bottom: 0; }
.ll-table span {
  color: var(--ll-copper);
  font-family: var(--ll-display);
  font-size: 18px;
  text-align: right;
}
@media (max-width: 900px) { .ll-cost, .ll-band__in { grid-template-columns: 1fr; gap: 40px; } }

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.ll-drive__row, .ll-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--ll-space-head); list-style: none; }
.ll-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ll-rule);
  padding: 9px 14px;
  font-size: var(--ll-fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ll-ink-soft);
  border-radius: var(--ll-r-pill);
  background: none;
  cursor: pointer;
  transition: border-color .2s var(--ll-ease), background .2s var(--ll-ease), color .2s var(--ll-ease);
}
.ll-chip:hover { border-color: var(--ll-copper); }
.ll-chip.is-on, .ll-chip[aria-pressed="true"] {
  background: var(--ll-espresso); border-color: var(--ll-espresso); color: var(--ll-cream);
}
.ll-on-dark .ll-chip { border-color: var(--ll-rule-dark); color: var(--ll-on-dark-soft); }
.ll-on-dark .ll-chip:hover { border-color: var(--ll-copper); color: var(--ll-copper-light); }
.ll-chip__mins { color: inherit; opacity: .8; }
.ll-drive__lead { font-size: 15px; color: var(--ll-ink-soft); margin: 0 0 8px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.ll-faq { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }
.ll-faq__item, .ll-faq details { border-bottom: 1px solid var(--ll-rule); padding: 18px 0; }
.ll-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;                 /* HIG: 44pt row */
  font-family: var(--ll-display);
  font-size: 22px;
  line-height: 1.25;
  cursor: pointer;
  color: var(--ll-ink);
}
.ll-faq summary::-webkit-details-marker { display: none; }
.ll-faq summary::after { content: "+"; color: var(--ll-copper-deep); font-family: var(--ll-body); }
.ll-faq details[open] summary::after { content: "–"; }
.ll-faq__body, .ll-faq details p { padding-top: 12px; color: var(--ll-ink-soft); font-size: 15px; }
@media (max-width: 900px) { .ll-faq { grid-template-columns: 1fr; gap: 32px; } }

/* --------------------------------------------------------------------------
   "Is this you?" — two bordered columns
   -------------------------------------------------------------------------- */
.ll-isthisyou { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 14px; }
.ll-isthisyou > div { padding: 26px 30px; border-left: 2px solid var(--ll-copper); }
.ll-isthisyou > div + div { border-left-color: var(--ll-rule); }
.ll-isthisyou h3, .ll-isthisyou .ll-eyebrow {
  font-family: var(--ll-display);
  font-size: 20px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ll-ink);
  margin: 0 0 12px;
}
.ll-isthisyou p { font-size: 15px; color: var(--ll-ink-soft); line-height: 1.65; margin: 0; }
@media (max-width: 900px) {
  .ll-isthisyou { grid-template-columns: 1fr; }
  .ll-isthisyou > div + div { border-left-color: var(--ll-copper); margin-top: var(--ll-space-head); }
}

/* --------------------------------------------------------------------------
   Related treatments
   -------------------------------------------------------------------------- */
.ll-related, .ll-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: var(--ll-space-block); list-style: none; }
.ll-related li { display: flex; }
.ll-related a, .ll-card--service {
  background: var(--ll-white);
  box-shadow: var(--ll-e1);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: transform var(--ll-hover) var(--ll-ease), box-shadow var(--ll-hover) var(--ll-ease);
  font-family: var(--ll-display);
  font-size: 22px;
  color: var(--ll-ink);
}
.ll-section--sand .ll-related a, .ll-section--sand .ll-card--service { background: var(--ll-cream); }
.ll-related a:hover, .ll-card--service:hover { transform: translateY(-4px); box-shadow: var(--ll-e2); }
.ll-related a::after, .ll-card__more {
  content: "Read about it →";
  margin-top: var(--ll-space-head);
  font-family: var(--ll-body);
  font-size: 11px;
  letter-spacing: var(--ll-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ll-copper-deep);
}
.ll-card--service h3 { margin: 10px 0 8px; }
.ll-card--service p { font-family: var(--ll-body); font-size: 15px; color: var(--ll-ink-soft); }
.ll-card--service .ll-eyebrow { margin-bottom: 4px; }
@media (max-width: 900px) { .ll-related, .ll-grid--3 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   The answer card, breadcrumb, notice, callout
   -------------------------------------------------------------------------- */
.ll-answer {
  background: rgba(246, 243, 238, .07);
  border-left: 2px solid var(--ll-copper);
  padding: 22px 26px;
  margin-top: var(--ll-space-head);
  max-width: 640px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ll-on-dark-soft);
}
:not(.ll-on-dark) > .ll-answer,
:not(.ll-on-dark) .ll-answer { background: var(--ll-white); color: var(--ll-ink-soft); }
.ll-on-dark .ll-answer { background: rgba(246, 243, 238, .07); color: var(--ll-on-dark-soft); }

/* The home hero's lede carries `ll-answer` as well, so one paragraph is both
   the copy she reads and the block an engine quotes. It must still look like a
   lede: no card, no rule, no padding. */
.ll-lead.ll-answer {
  background: none;
  border-left: 0;
  padding: 0;
  margin-top: var(--ll-space-head);
  max-width: 620px;
  font-size: var(--ll-fs-lede);
  color: var(--ll-on-dark-soft);
}

.ll-breadcrumb, .ll-crumb {
  font-size: var(--ll-fs-micro);
  letter-spacing: var(--ll-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ll-copper-deep);
}
.ll-on-dark .ll-breadcrumb, .ll-on-dark .ll-crumb { color: rgba(232, 204, 175, .7); }
.ll-on-dark .ll-breadcrumb a:hover { color: var(--ll-copper-light); }
.ll-breadcrumb a, .ll-crumb a { position: relative; }
.ll-breadcrumb a::after, .ll-crumb a::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -8px;
}

.ll-notice {
  border-left: 2px solid var(--ll-copper);
  background: var(--ll-white);
  padding: 24px 28px;
  margin-top: 8px;
}
.ll-notice h3 { font-size: 22px; margin: 0 0 10px; }
.ll-notice p { margin: 0; color: var(--ll-ink-soft); font-size: 15px; }

/* --------------------------------------------------------------------------
   The jump bar (procedure pages)
   -------------------------------------------------------------------------- */
.ll-jump {
  position: sticky;
  top: var(--ll-header-h);
  z-index: var(--ll-z-jump);
  background: var(--ll-cream);
  border-bottom: 1px solid var(--ll-rule);
}
.ll-jump .ll-container {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  padding-block: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ll-jump .ll-container::-webkit-scrollbar { display: none; }
.ll-jump a {
  flex: 0 0 auto;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ll-ink-soft);
  white-space: nowrap;
  padding-block: 8px;          /* HIG: 28pt hit region without changing the type */
}
.ll-jump a:hover, .ll-jump a.is-on { color: var(--ll-copper-deep); }
@media (max-width: 900px) { .ll-jump { top: var(--ll-header-h-sm); } }

/* --------------------------------------------------------------------------
   The privacy block (dark band, four numbered claims)
   -------------------------------------------------------------------------- */
.ll-privacy { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.ll-privacy__list { display: grid; gap: 0; margin-top: 4px; }
.ll-privacy__list > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ll-rule-dark);
  align-items: start;
}
.ll-privacy__list > div:last-child { border-bottom: 0; }
.ll-privacy__list b {
  font-family: var(--ll-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--ll-copper);
  line-height: 1;
  min-width: 34px;
}
.ll-privacy__list p { margin: 0; font-size: 15px; color: var(--ll-on-dark-soft); line-height: 1.6; }
.ll-privacy__list strong { display: block; font-weight: 600; color: var(--ll-cream); margin-bottom: 4px; font-size: 15px; }
@media (max-width: 900px) { .ll-privacy { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Reviews (Google, filtered to one treatment)
   -------------------------------------------------------------------------- */
.ll-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 14px; }
.ll-reviews blockquote {
  margin: 0;
  background: var(--ll-white);
  box-shadow: var(--ll-e1);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ll-reviews .stars { color: var(--ll-copper); letter-spacing: .24em; font-size: 13px; }
.ll-reviews p { margin: 0; font-family: var(--ll-display); font-size: 21px; line-height: 1.45; color: var(--ll-ink); }
.ll-reviews footer {
  font-size: var(--ll-fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ll-ink-soft);
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ll-rule);
}
.ll-reviews__note { margin-top: var(--ll-space-head); font-size: 12px; color: var(--ll-ink-soft); }
@media (max-width: 900px) { .ll-reviews { grid-template-columns: 1fr; } }

/* The hero proof strip. */
.ll-proof {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px;
  border: 1px solid rgba(246, 243, 238, .2);
  border-radius: var(--ll-r);
  margin-top: var(--ll-space-head);
  max-width: 540px;
}
.ll-proof__score { font-family: var(--ll-display); font-size: 30px; color: var(--ll-copper); line-height: 1; }
.ll-proof__stars { color: var(--ll-copper); letter-spacing: .18em; font-size: 13px; }
.ll-proof__count { font-size: 13px; color: var(--ll-on-dark-soft); }
.ll-proof a { color: var(--ll-copper-light); font-weight: 600; font-size: 13px; border-bottom: 1px solid rgba(232, 204, 175, .4); position: relative; }
.ll-proof a::after { content: ""; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -8px; }
.ll-proof--none { display: block; font-size: 13px; color: var(--ll-on-dark-soft); }
@media (max-width: 700px) { .ll-proof { padding: 12px 16px; gap: 12px; } .ll-proof__score { font-size: 26px; } }

/* --------------------------------------------------------------------------
   Before / after
   -------------------------------------------------------------------------- */
.ll-ba { margin: 0; }
.ll-ba__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--ll-e1);
  --x: 58%;
  touch-action: pan-y;
}
.ll-ba__side {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 18px;
  font-size: var(--ll-fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}
.ll-ba__side--before { background: linear-gradient(160deg, var(--ll-espresso-glow), var(--ll-espresso-deep)); color: rgba(246, 243, 238, .85); }
.ll-ba__side--after {
  background: linear-gradient(160deg, #EAE4DA, #D2C8B9);
  color: rgba(31, 27, 24, .66);
  clip-path: inset(0 0 0 var(--x));
  justify-content: flex-end;
}
.ll-ba__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ll-ba__side span { position: relative; z-index: 1; }
.ll-ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--x);
  width: 2px; background: var(--ll-copper); pointer-events: none;
}
.ll-ba__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ll-copper); box-shadow: var(--ll-e2);
}
.ll-ba__handle::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 14px; height: 14px;
  border-left: 2px solid var(--ll-espresso-deep);
  border-top: 2px solid var(--ll-espresso-deep);
  z-index: 1;
}
.ll-ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.ll-ba__range:focus-visible ~ .ll-ba__handle { outline: 2px solid var(--ll-copper); outline-offset: 4px; }
.ll-ba__cap {
  margin-top: 12px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--ll-ink-soft);
}
.ll-ba__cap b { font-weight: 600; color: var(--ll-ink); }
.ll-ba__note { margin-top: 10px; font-size: 12px; color: var(--ll-ink-soft); }

.ll-ba-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: var(--ll-space-block); }
.ll-ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: var(--ll-space-block); }
.ll-ba-empty {
  background: var(--ll-white);
  box-shadow: var(--ll-e1);
  padding: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center;
  margin-top: 8px;
}
.ll-section--sand .ll-ba-empty { background: var(--ll-cream); }
.ll-ba-empty h3 { font-size: clamp(24px, 1.6rem + .6vw, 30px); margin: 10px 0 0; }
.ll-ba-empty p { color: var(--ll-ink-soft); margin: 14px 0 0; max-width: 56ch; font-size: 15px; }
.ll-ba-empty .ll-cta-row { margin-top: 0; }
@media (max-width: 900px) { .ll-ba-row, .ll-ba-grid { grid-template-columns: 1fr 1fr; } .ll-ba-empty { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 600px) { .ll-ba-row, .ll-ba-grid { grid-template-columns: 1fr; } }

.ll-gallery__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--ll-space-block); }
.ll-gallery__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
.ll-gallery__row .ll-eyebrow { min-width: 120px; }
.ll-gallery__count { margin-top: var(--ll-space-head); font-size: 13px; color: var(--ll-ink-soft); }

.ll-lightbox {
  position: fixed; inset: 0; z-index: var(--ll-z-lightbox);
  background: rgba(20, 17, 16, .94);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.ll-lightbox.is-on { display: flex; }
.ll-lightbox__inner { max-width: 620px; width: 100%; }
.ll-lightbox__close {
  position: absolute; top: 18px; right: 20px;
  background: none; border: 1px solid rgba(246, 243, 238, .3);
  color: var(--ll-cream); width: 44px; height: 44px;
  border-radius: var(--ll-r); font-size: 20px; cursor: pointer;
}
.ll-lightbox .ll-ba__cap { color: var(--ll-on-dark-soft); }
.ll-lightbox .ll-ba__cap b { color: var(--ll-cream); }
.ll-lightbox .ll-cta-row { margin-top: var(--ll-space-head); }

/* --------------------------------------------------------------------------
   Recovery timeline — five dots on a hairline
   -------------------------------------------------------------------------- */
/* One column per milestone, whatever the count: a fixed five-column grid
   wrapped a six-milestone timeline onto a second row, which broke the line
   the dots are supposed to sit on. */
.ll-timeline__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--ll-space-block);
  position: relative;
  list-style: none;
}
.ll-timeline__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 46px;
  height: 1px; background: var(--ll-rule);
}
.ll-timeline__step { position: relative; padding: 0 20px 0 0; }
.ll-timeline__label {
  display: block;
  font-size: var(--ll-fs-micro);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ll-copper-deep); font-weight: 700;
}
.ll-timeline__dot {
  display: block;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ll-cream);
  border: 2px solid var(--ll-copper);
  margin: 20px 0 22px;
  position: relative; z-index: 1;
  transition: background .4s, box-shadow .4s;
}
.ll-timeline__step.is-lit .ll-timeline__dot,
.ll-timeline__step.is-reached .ll-timeline__dot { background: var(--ll-copper); box-shadow: 0 0 0 6px rgba(200, 144, 102, .18); }
.ll-timeline__head { display: block; font-family: var(--ll-display); font-size: 19px; margin: 0 0 8px; }
.ll-timeline__step.is-lit .ll-timeline__head,
.ll-timeline__step.is-reached .ll-timeline__head { color: var(--ll-copper-deep); }
.ll-timeline__text { display: block; font-size: 14px; color: var(--ll-ink-soft); line-height: 1.55; }
@media (max-width: 900px) {
  .ll-timeline__track { grid-auto-flow: row; grid-auto-columns: auto; }
  .ll-timeline__track::before { display: none; }
  .ll-timeline__step { padding: 18px 0 18px 26px; border-left: 1px solid var(--ll-rule); }
  .ll-timeline__dot { position: absolute; left: -7px; top: 22px; margin: 0; }
}

/* --------------------------------------------------------------------------
   Contact + finance
   -------------------------------------------------------------------------- */
.ll-nap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--ll-space-block); border-top: 1px solid var(--ll-rule); }
.ll-nap > div { padding: 28px 30px 28px 0; border-right: 1px solid var(--ll-rule); }
.ll-nap > div:last-child { border-right: 0; }
.ll-nap .k { display: block; font-size: var(--ll-fs-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--ll-copper-deep); font-weight: 700; }
.ll-nap p { margin: 12px 0 0; font-family: var(--ll-display); font-size: 21px; line-height: 1.35; }
.ll-nap small { display: block; margin-top: 8px; font-size: 13px; color: var(--ll-ink-soft); font-family: var(--ll-body); }
.ll-nap a { color: var(--ll-ink); position: relative; }
.ll-nap a::after { content: ""; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -8px; }

.ll-map {
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, var(--ll-espresso-glow), var(--ll-espresso-deep));
  box-shadow: var(--ll-e1);
  display: flex; align-items: flex-end; padding: 22px;
  color: rgba(246, 243, 238, .72);
  font-size: var(--ll-fs-micro); letter-spacing: .16em; text-transform: uppercase;
  border-bottom-left-radius: var(--ll-r-corner);
  overflow: hidden;
}
.ll-map { position: relative; }
/* At 21:9 a phone-width panel is 150px tall, too short for the two controls
   and the caption; a min-height would instead stretch its width through the
   aspect ratio. Phones get a taller frame. */
@media (max-width: 700px) { .ll-map { aspect-ratio: 4 / 3 !important; } }
.ll-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
/* Click-to-load controls, centred in the frame; gone once the map is in. */
.ll-map__ctl {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-transform: none; letter-spacing: 0;
}
.ll-map__show { width: auto; }
.ll-map__open { color: var(--ll-cream); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ll-map__open:hover { color: var(--ll-copper-light); }
.ll-map__cap { position: relative; z-index: 1; }
.ll-map.is-loaded .ll-map__ctl, .ll-map.is-loaded .ll-map__cap { display: none; }

.ll-hours-table { margin-top: 8px; }
.ll-hours-table > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--ll-rule); font-size: 15px;
}
.ll-hours-table > div:last-child { border-bottom: 0; }
.ll-hours-table b { font-weight: 600; }
.ll-open-now {
  color: var(--ll-copper-deep); font-weight: 700;
  font-size: var(--ll-fs-micro); letter-spacing: .16em; text-transform: uppercase;
}
.ll-on-dark .ll-open-now { color: var(--ll-copper); }

.ll-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: var(--ll-space-block); }
.ll-path { background: var(--ll-white); box-shadow: var(--ll-e1); padding: 30px; display: flex; flex-direction: column; }
.ll-path .n { font-size: var(--ll-fs-micro); letter-spacing: .24em; color: var(--ll-copper-deep); font-weight: 700; }
.ll-path h3 { font-size: 24px; margin: 12px 0 10px; }
.ll-path p { margin: 0 0 22px; color: var(--ll-ink-soft); font-size: 15px; line-height: 1.6; }
.ll-path .ll-btn { margin-top: auto; }

.ll-stepline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: var(--ll-space-block); }
.ll-stepline > div { border-top: 1px solid var(--ll-rule); padding-top: 18px; }
.ll-stepline .n { display: block; font-size: var(--ll-fs-micro); letter-spacing: .24em; color: var(--ll-copper-deep); font-weight: 700; margin-bottom: 10px; }
.ll-stepline h3 { font-size: 20px; margin: 0 0 8px; }
.ll-stepline p { margin: 0; font-size: 14px; color: var(--ll-ink-soft); line-height: 1.6; }

@media (max-width: 900px) {
  .ll-nap, .ll-paths, .ll-stepline { grid-template-columns: 1fr; }
  .ll-nap > div { border-right: 0; border-bottom: 1px solid var(--ll-rule); padding-right: 0; }
  .ll-nap > div:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   The finder
   The routing lives in inc/finder.php (12 concerns, richer than the mockup's);
   only the look is ported. Steps are hidden with the `hidden` attribute, so
   nothing here may set an unconditional display on .ll-finder__step.
   -------------------------------------------------------------------------- */
.ll-finder-block {
  background: var(--ll-white);
  box-shadow: var(--ll-e1);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ll-finder-block h2 { font-size: clamp(30px, 1.8rem + 1.2vw, 44px); }
.ll-finder-block > div:first-child > p { color: var(--ll-ink-soft); font-size: 15px; }
.ll-finder-block .ll-cta-row { margin-top: var(--ll-space-head); }

.ll-finder__step { display: block; }
.ll-finder__step[hidden] { display: none; }
.ll-finder__q {
  font-family: var(--ll-display);
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--ll-ink);
}
.ll-finder__q::before {
  content: attr(data-k);
  display: block;
  font-family: var(--ll-body);
  font-size: var(--ll-fs-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ll-copper-deep);
  font-weight: 700;
  margin-bottom: 10px;
}
.ll-finder__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--ll-space-head); }
.ll-finder__chip {
  border: 1px solid var(--ll-rule);
  background: var(--ll-cream);
  padding: 16px 18px;
  text-align: left;
  font: inherit;
  font-size: 15px;
  color: var(--ll-ink);
  cursor: pointer;
  border-radius: var(--ll-r);
  min-height: 52px;
  transition: border-color .2s var(--ll-ease), transform .2s var(--ll-ease);
}
.ll-finder__chip:hover { border-color: var(--ll-copper); transform: translateY(-2px); }
.ll-finder__chip small { display: block; margin-top: 4px; font-size: 12px; color: var(--ll-ink-soft); }
/* Step 1: four large path tiles, each with its one-line description. */
.ll-finder__path { text-align: left; padding: 20px 22px; min-height: 104px; }
.ll-finder__path b { display: block; font-family: var(--ll-display); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--ll-ink); }
.ll-finder__path small { margin-top: 8px; font-size: 13px; line-height: 1.45; }
.ll-finder__result { border-top: 1px solid var(--ll-rule); padding-top: 22px; }
.ll-finder__cards h3 { font-size: 28px; margin: 10px 0 8px; }
.ll-finder__cards p { color: var(--ll-ink-soft); font-size: 15px; }
.ll-finder__cards .ll-cta-row, .ll-finder__result .ll-cta-row { margin-top: var(--ll-space-head); }
.ll-finder__back {
  background: none; border: 0; font: inherit;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ll-ink-soft); cursor: pointer;
  padding: 8px 0; margin-bottom: 14px; min-height: 28px;
}
.ll-finder__back:hover { color: var(--ll-copper-deep); }
@media (max-width: 900px) {
  .ll-finder-block { grid-template-columns: 1fr; }
  .ll-finder__chips { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   The sticky bar (phones)
   -------------------------------------------------------------------------- */
.ll-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%; max-width: 100vw;
  z-index: var(--ll-z-sticky);
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--ll-espresso-deep);
  border-top: 1px solid rgba(200, 144, 102, .3);
}
.ll-sticky-cta a {
  padding: 16px 8px;
  text-align: center;
  font-size: var(--ll-fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ll-cream);
  min-height: 53px;
  display: flex; align-items: center; justify-content: center;
  width: auto;
}
.ll-sticky-cta a.is-primary { background: var(--ll-copper); color: var(--ll-espresso-deep); }
@media (max-width: 900px) {
  .ll-sticky-cta { display: grid; }
  body { padding-bottom: 53px; }
}

/* --------------------------------------------------------------------------
   Blog archive pagination
   -------------------------------------------------------------------------- */
.ll-blog .pagination, .ll-blog .navigation { margin-top: var(--ll-space-block); }
.ll-blog .nav-links {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--ll-rule);
}
.ll-blog .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--ll-rule); border-radius: var(--ll-r);
  font-size: var(--ll-fs-micro); letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ll-ink-soft);
  transition: border-color .2s var(--ll-ease), color .2s var(--ll-ease);
}
.ll-blog .page-numbers:hover { border-color: var(--ll-copper); color: var(--ll-copper-deep); }
.ll-blog .page-numbers.current { background: var(--ll-espresso); border-color: var(--ll-espresso); color: var(--ll-cream); }
.ll-blog .screen-reader-text { position: absolute; left: -9999px; }

/* --------------------------------------------------------------------------
   Close band
   -------------------------------------------------------------------------- */
.ll-section--close { background: var(--ll-dark-bg); color: var(--ll-cream); }
.ll-section--close h2 { color: var(--ll-cream); font-size: clamp(38px, 2.4rem + 3vw, 80px); }
.ll-section--close p { color: var(--ll-on-dark-soft); }
.ll-section--close .ll-cta-row { margin-top: var(--ll-space-head); }

/* --------------------------------------------------------------------------
   Captions clear the curved corner (PROMPT-POLISH §3). With a 120px
   bottom-left radius the curve is still 54px in at the caption's bottom edge
   (20px up), so a caption starting at the 20px padding lost its first letter
   ("EEK BY WEEK"). The clinic trio had 46px, which still nicked it by a
   pixel or two; every curved-corner frame now gets 56px.
   -------------------------------------------------------------------------- */
.ll-pic--bl, .ll-pic--hero, .ll-herocard .ll-pic,
.ll-clinic .ll-pic:nth-child(1), .ll-map { padding-left: 56px; }

/* Home before/after row, compact (PROMPT-POLISH §3b). Same 4:5 frame — a
   squashed ratio would crop the photographs — at roughly half the height:
   two 300px pairs side by side from 820px, one 260px pair per row below. */
.ll-ba-row.ll-ba-row--compact { grid-template-columns: repeat(2, minmax(0, 300px)); gap: 22px; }
@media (max-width: 819px) {
  .ll-ba-row.ll-ba-row--compact { grid-template-columns: minmax(0, 260px); justify-content: center; }
}
/* At 260–300px the default 58% split leaves ~120px of the after side, and
   "AFTER · 3 MONTHS" lost its first letters. Compact pairs open at 46% with
   a tighter label; the full-size rows are unchanged. */
.ll-ba-row--compact .ll-ba__frame { --x: 46%; }
.ll-ba-row--compact .ll-ba__side { padding: 12px; letter-spacing: .04em; }
.ll-ba__more { margin-top: 12px; font-size: 14px; font-weight: 600; }
.ll-ba__more a { color: var(--ll-copper-deep); }

/* ==========================================================================
   Launch fix, 1 Oct — spacing by rule, and layouts that close up
   ========================================================================== */

/* Same-background neighbours share one band of padding. Two cream sections
   used to stack 112 + 112 = 224px of nothing between them; now the second
   one starts where the first one's padding ends. A change of background
   keeps both paddings, because the colour change is the break. */
.ll-section:not(.ll-section--sand):not(.ll-section--cream2):not(.ll-band--dark):not(.ll-on-dark):not(.ll-section--close):not(.ll-section--flush)
  + .ll-section:not(.ll-section--sand):not(.ll-section--cream2):not(.ll-band--dark):not(.ll-on-dark):not(.ll-section--close):not(.ll-section--flush),
.ll-section--sand + .ll-section--sand,
.ll-section--cream2 + .ll-section--cream2,
.ll-band--dark + .ll-band--dark { padding-top: 0; }

/* The closing band and the footer are both dark: one gap, not two. */
.ll-section--close { padding-bottom: var(--ll-space-block); }

/* A text-only two-column block is one column at a reading measure, not a
   heading marooned beside a paragraph with a half-empty column under it. */
.ll-two, .ll-two--rev { display: block; max-width: calc(var(--ll-measure) + 8ch); }
.ll-two > * + * { margin-top: var(--ll-space-head); }
.ll-two > .ll-prose p { max-width: var(--ll-measure); }
.ll-head { margin-bottom: var(--ll-space-block); }

/* Frames that are not there leave no hole (empty slots render nothing). */
.ll-secpic:not(:has(.ll-pic)) { display: none; }
.ll-hero-quiet__grid > .brxe-shortcode:not(:has(*)) { display: none; }
.ll-hero-quiet__grid:not(:has(.ll-herocard)) { grid-template-columns: minmax(0, 1fr); }
.ll-hero-quiet__grid:not(:has(.ll-herocard)) > .ll-hero { max-width: 820px; }
.ll-clinic--n2 { grid-template-columns: 5fr 4fr; }
/* One photograph spans the row as a band rather than sitting at half width
   beside an empty half. */
.ll-clinic--n1 { grid-template-columns: minmax(0, 1fr); }
.ll-clinic--n1 .ll-pic:nth-child(1) { height: clamp(260px, 30vw, 420px); }
.ll-doors--text .ll-door__in { padding-top: var(--ll-space-card); }
.ll-split > div:first-child:not(:has(.ll-pic)) .ll-lead { margin-bottom: 0; }
@media (max-width: 900px) {
  .ll-clinic--n2, .ll-clinic--n1 { grid-template-columns: 1fr; }
}

/* The cost band (and any other .ll-band) is padded from the scale. It never
   had padding of its own: since it moved into a shortcode outside a section,
   its eyebrow and its buttons sat on the band's edges (visible in 3.0.11). */
.ll-band { padding-block: var(--ll-space-section); }

/* The footer follows the closing band on every page; its own top padding
   stacked on the band's and left 124px of dark between them. */
.ll-footer { padding-top: var(--ll-space-block); }

/* The section after the ticker strip: the ticker is the break, so the next
   section does not also need a full band of padding above it. */
.ll-section--flush + .ll-section { padding-top: var(--ll-space-block); }

/* Text layouts with a short column beside a long one become one column at a
   reading measure (PROMPT-LAUNCH-FIX §1b). The privacy claims sit in a 2x2
   grid under their introduction; the everyday list runs under its heading. */
@media (min-width: 901px) {
  .ll-privacy { grid-template-columns: minmax(0, 1fr); }
  .ll-privacy > :first-child { max-width: var(--ll-measure); }
  .ll-privacy__list { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); }
  .ll-split { grid-template-columns: minmax(0, 1fr); max-width: 900px; gap: var(--ll-space-block); }
}
@media (min-width: 901px) {
  .ll-privacy__list > div, .ll-privacy__list > div:last-child { border-bottom: 0; border-top: 1px solid var(--ll-rule-dark); }
}