/* ==========================================================================
   LoomReach redesign 2026 · Direction E "Showroom" · components
   Light showroom: one big stage in the hero, then a catalogue of seven service
   objects on pastel plinths. Rooms (inset rounded fields) carry the colour.
   Soft shadows only under objects. Breakpoints: 600 · 860 · 1024 · 1200.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--lr-bg);
  color: var(--lr-ink);
  font-family: var(--lr-font);
  font-size: var(--lr-fs-body);
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, fieldset { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }
main:focus { outline: none; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--lr-focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--lr-focus-inner);
}

.lr-wrap {
  width: 100%;
  max-width: calc(var(--lr-max) + 2 * var(--lr-pad));
  margin-inline: auto;
  padding-inline: var(--lr-pad);
}
/* inline variant: keeps the text in the line (innerText and screen readers read "1. A rough range") */
.lr-sr-inline { display: inline-block; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lr-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */
.lr-h1 {
  font-size: var(--lr-fs-h1);
  font-weight: 620;
  font-stretch: 104%;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.lr-h2 {
  font-size: var(--lr-fs-h2);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.lr-lead { font-size: var(--lr-fs-lead); line-height: 1.45; color: var(--lr-ink-2); text-wrap: pretty; }
.lr-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9375rem; font-weight: 600; letter-spacing: .005em;
}
.lr-eyebrow__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lr-brand); box-shadow: 0 0 0 3px rgba(255, 90, 54, .18); }
/* dot sits on the first line when the eyebrow wraps on narrow phones */
.lr-eyebrow { align-items: flex-start; }
.lr-eyebrow__dot { margin-top: .42em; }

.lr-link {
  color: var(--lr-link);
  text-decoration: underline;
  text-decoration-color: var(--lr-link-line);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.lr-link:hover { text-decoration-thickness: 3px; }
.lr-link--arrow { font-weight: 600; color: var(--lr-ink); }
.lr-link--arrow span { display: inline-block; transition: transform var(--lr-dur-2) var(--lr-ease); }
.lr-link--arrow:hover span { transform: translateX(3px); }

/* ---------- Buttons: one pill shape everywhere ---------- */
.lr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 0 20px;
  border: 1.5px solid transparent; border-radius: var(--lr-r-pill);
  font-family: var(--lr-font); font-size: 1rem; font-weight: 600; line-height: 1.15;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--lr-dur-1) linear, border-color var(--lr-dur-1) linear;
}
.lr-btn--l { min-height: 54px; padding: 0 26px; font-size: 1.0625rem; }
.lr-btn--s { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.lr-btn--primary { background: var(--lr-brand); color: var(--lr-on-brand); }
.lr-btn--primary:hover { background: var(--lr-brand-hover); }
.lr-btn--secondary { background: transparent; color: var(--lr-ink); border-color: var(--lr-ink); }
.lr-btn--secondary:hover { background: rgba(17, 18, 22, .06); }
.lr-btn--quiet { background: #FFFFFF; color: #111216; border-color: #111216; }
.lr-btn--quiet:hover { background: #F2F0EC; }
.lr-btn__arrow { transition: transform var(--lr-dur-2) var(--lr-ease); }
.lr-btn:hover .lr-btn__arrow { transform: translateX(3px); }
/* On the coral field the action is ink; inside a white panel it is coral again */
.lr-ctx-coral .lr-btn--primary { background: var(--lr-ink); color: #FBFAF7; }
.lr-ctx-coral .lr-btn--primary:hover { background: #2A2B31; }
.lr-ctx-coral .lr-panel .lr-btn--primary { background: var(--lr-brand); color: var(--lr-on-brand); }
.lr-ctx-coral .lr-panel .lr-btn--primary:hover { background: var(--lr-brand-hover); }
.lr-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Skip link ---------- */
.lr-skip {
  position: absolute; left: 12px; top: 12px; z-index: 100;
  padding: 12px 18px; border-radius: var(--lr-r-pill);
  background: var(--lr-ink); color: #FBFAF7; font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.lr-skip:focus { transform: none; }

/* ---------- Cookie banner (top of body, not fixed) ---------- */
.lr-consent-set .lr-cookie { display: none; }
.lr-cookie { background: var(--lr-sand); border-bottom: 1px solid var(--lr-line); font-size: .875rem; line-height: 1.45; }
.lr-cookie__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-block: 10px; }
.lr-cookie__text { flex: 1 1 420px; color: var(--lr-ink-2); }
.lr-cookie__text a { color: var(--lr-ink); text-decoration: underline; text-decoration-color: var(--lr-link-line); text-underline-offset: .18em; }
.lr-cookie__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.lr-cookie__actions .lr-btn { min-width: 132px; }
@media (max-width: 599px) {
  .lr-cookie { font-size: .8125rem; }
  .lr-cookie__inner { padding-block: 8px; gap: 8px; }
  .lr-cookie__actions { width: 100%; }
  .lr-cookie__actions .lr-btn { flex: 1 1 0; min-width: 0; }
}

/* ---------- Header ---------- */
.lr-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--lr-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--lr-dur-2) linear;
}
.lr-header.is-scrolled { border-bottom-color: var(--lr-line); }
.lr-header__bar { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.lr-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lr-ink); font-weight: 650; font-size: 1.125rem; letter-spacing: -.01em; margin-right: auto; padding: 6px 0; }
.lr-logo__mark { flex: none; }
.lr-nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lr-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--lr-r-pill);
  text-decoration: none; font-size: .96875rem; font-weight: 500; color: var(--lr-ink);
}
.lr-nav a:hover { background: rgba(17, 18, 22, .06); }
.lr-nav a[aria-current="page"] { background: rgba(17, 18, 22, .08); }
.lr-header__cta { white-space: nowrap; }
.lr-nav__cta { display: none; }
.lr-narrow-only { display: none; }
.lr-menu-btn {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--lr-ink); border-radius: var(--lr-r-pill); background: transparent; cursor: pointer;
  font-weight: 600; font-size: .9375rem; white-space: nowrap;
}
.lr-menu-btn path { transition: transform var(--lr-dur-2) var(--lr-ease); transform-origin: 9px 9px; }
.is-open .lr-menu-btn__a { transform: translateY(3px) rotate(45deg); }
.is-open .lr-menu-btn__b { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 1023px) {
  .lr-menu-btn { display: inline-flex; }
  .lr-nav { display: none; }
  .lr-header.is-open .lr-nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--lr-bg); border-bottom: 1px solid var(--lr-line);
    padding: 8px var(--lr-pad) 20px;
  }
  /* the open menu is a layer: a scrim dims the page under it, and a tap on the scrim closes the menu */
  .lr-header.is-open .lr-nav::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 100vh;
    background: rgba(17, 18, 22, .32);
  }
  .lr-header.is-open .lr-nav__list { flex-direction: column; gap: 2px; max-width: var(--lr-max); margin-inline: auto; }
  .lr-header.is-open .lr-nav a { width: 100%; min-height: 52px; font-size: 1.125rem; padding: 0 12px; border-radius: var(--lr-r-m); }
  /* the open menu ends with the ways to reach us (the footer's Contact lines), so a phone visitor who
     would rather ring or write finds them without scrolling to the foot of the page */
  .lr-header.is-open .lr-nav__reach {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; margin-top: 10px; padding: 12px 12px 0;
    border-top: 1px solid var(--lr-line); font-size: .9375rem; color: var(--lr-ink-2);
  }
  .lr-header.is-open .lr-nav .lr-nav__reach a {
    width: auto; min-height: 44px; padding: 0; border-radius: 0; font-size: 1rem; font-weight: 600;
    text-decoration: underline; text-decoration-color: var(--lr-link-line); text-decoration-thickness: 2px; text-underline-offset: .2em;
  }
  .lr-header.is-open .lr-nav .lr-nav__reach a:hover { background: none; }
  .lr-header.is-open .lr-nav__reach span { flex-basis: 100%; padding-bottom: 2px; }
}
.lr-nav__reach { display: none; }
@media (max-width: 599px) {
  .lr-header__bar { min-height: 60px; gap: 8px; }
  .lr-wide-only { display: none; }
  .lr-narrow-only { display: inline; }
  .lr-header__cta { padding: 0 16px; }
  .lr-logo { font-size: 1.0625rem; }
  .lr-header.is-open .lr-header__cta { display: none; }
  /* the header button hides while the menu is open, so the menu carries it */
  .lr-header.is-open .lr-nav__cta { display: block; margin-top: 10px; }
  .lr-header.is-open .lr-nav .lr-nav__cta a { justify-content: center; min-height: 54px; border-radius: var(--lr-r-pill); padding: 0 26px; font-size: 1.0625rem; font-weight: 600; background: var(--lr-brand); }
  .lr-header.is-open .lr-nav .lr-nav__cta a:hover { background: var(--lr-brand-hover); }
  /* main buttons are at least 48 px tall on phones */
  .lr-header__cta, .lr-menu-btn, .lr-btn:not(.lr-btn--s) { min-height: 48px; }
}
@media (max-width: 399px) {
  .lr-header__bar { gap: 6px; }
  .lr-logo { gap: 7px; font-size: 1rem; }
  .lr-logo__mark { width: 26px; height: 26px; }
  .lr-header__cta { padding: 0 12px; font-size: .9375rem; }
  .lr-menu-btn { padding: 0 10px; gap: 6px; }
}
/* 320–359 px (a small phone, or a 1280 px screen at 400% zoom): the menu button keeps only its icon, its
   name ("Menu" / "Close menu", switched by site.js) stays for screen readers, and the bar fits (WCAG 1.4.10) */
@media (max-width: 359px) {
  .lr-menu-btn { padding: 0 12px; gap: 0; }
  .lr-menu-btn [data-menu-label] {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- Sections and rooms ---------- */
.lr-section { padding-block: var(--lr-section-y); }
.lr-section--room { padding-block: calc(var(--lr-room-gap) / 2); }
/* a room straight under the page head's stage keeps the same gap as two rooms */
.lr-hero + .lr-section--room { padding-top: var(--lr-room-gap); }
.lr-room {
  /* rooms stop growing at 1600 px, so wide screens keep the composition instead of empty colour */
  margin-inline: max(var(--lr-room-inset), calc((100% - 1600px) / 2));
  border-radius: var(--lr-r-xl);
  padding-block: var(--lr-section-y);
}
.lr-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 1024px) {
  .lr-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--lr-gap); align-items: end; }
  .lr-head__lead { padding-bottom: .3em; }
}
.lr-more { margin-top: 28px; }
/* a block that starts on the lead's track of .lr-head (the 6fr column), so it shares the lead's left edge */
@media (min-width: 1024px) { .lr-on-lead { margin-left: calc((100% - var(--lr-gap)) * 5 / 11 + var(--lr-gap)); } }
/* A section head with its exhibit (one object on a sand plinth, the object that means this section):
   the heading and the lead stacked from the top of the room on the left, the object standing beside them,
   so the text never sinks to the foot of the object's row. Phones: the object at 88 px beside the heading,
   the lead under both. */
.lr-head--obj { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(20px, 4vw, 64px); row-gap: 16px; align-items: start; }
.lr-head__text { display: grid; gap: 16px; align-content: start; max-width: 44rem; }
.lr-head--obj .lr-exhibit { width: clamp(168px, 15vw, 208px); }
@media (max-width: 599px) {
  .lr-head--obj { grid-template-columns: minmax(0, 1fr) 88px; column-gap: 14px; }
  .lr-head--obj .lr-head__text { display: contents; }
  .lr-head--obj .lr-h2 { grid-column: 1; grid-row: 1; align-self: center; }
  .lr-head--obj .lr-exhibit { grid-column: 2; grid-row: 1; }
  .lr-head--obj .lr-lead { grid-column: 1 / -1; }
}

/* ==========================================================================
   HP2-01 · Hero stage
   ========================================================================== */
.lr-hero { padding-top: 8px; }
.lr-stage {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(36px, 5.5vw, 88px) clamp(28px, 4vw, 72px);
  background:
    radial-gradient(55% 75% at 76% 58%, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(112deg, #FFD9C7 0%, #FFE2D5 34%, #E3F3F8 64%, #A6E8FF 100%);
}
.lr-stage::before { /* the showroom floor: a lighter band with a soft horizon the objects stand on */
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 14%, rgba(255, 255, 255, .5) 100%);
}
.lr-hero__grid { display: grid; gap: clamp(24px, 4vw, 40px); align-items: center; }
.lr-hero__copy { display: grid; justify-items: start; gap: 20px; max-width: 640px; }
.lr-hero__copy .lr-h1 { margin-top: 2px; }
.lr-hero__sub { font-size: var(--lr-fs-lead); line-height: 1.45; color: var(--lr-ink-2); max-width: 36em; text-wrap: pretty; }
.lr-hero__copy .lr-actions { margin-top: 6px; }
.lr-reassure { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 500; color: var(--lr-ink-2); }
.lr-reassure__icon { flex: none; }
.lr-hero__supplier { font-size: .9375rem; }
.lr-hero__supplier .lr-link { color: var(--lr-ink); font-weight: 600; }
.lr-hero__scene { position: relative; }
.lr-hero__spot { /* contact shadow: the cluster stands on the floor */
  position: absolute; left: 6%; right: 2%; bottom: 7%; height: 24%;
  background: radial-gradient(closest-side, rgba(17, 18, 22, .26), rgba(17, 18, 22, 0));
  filter: blur(10px);
}
.lr-hero__img { position: relative; width: 100%; height: auto; }

@media (min-width: 860px) and (max-width: 1199px) {
  .lr-hero .lr-h1 { font-size: clamp(2.75rem, 1.2rem + 3.2vw, 3.375rem); }
  /* wider copy column: both buttons stay on one line and the subtitle keeps to four lines */
  .lr-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .lr-hero__copy .lr-actions { flex-wrap: nowrap; }
  .lr-hero__copy .lr-actions .lr-btn { padding-inline: 20px; }
  .lr-hero__img { width: 128%; max-width: none; margin-left: -14%; }
}
@media (min-width: 860px) {
  .lr-hero__scene { align-self: end; }
}
@media (min-width: 1200px) {
  .lr-stage { min-height: min(720px, calc(100svh - 110px)); display: flex; align-items: center; }
}
/* 1280 px and up: a lower stage (less padding above the eyebrow and under the buttons), so on a 900 px
   screen the first line of every key fact shows above the fold, with the cookie banner too */
@media (min-width: 1280px) {
  .lr-hero:not(.lr-page-head) .lr-stage { min-height: min(636px, calc(100svh - 190px)); padding-block: 40px 32px; }
}
@media (min-width: 1200px) {
  .lr-stage > .lr-wrap { flex: 1; }
  /* the copy column is just wide enough for a three-line H1; the scene takes everything else */
  .lr-hero__grid { grid-template-columns: minmax(0, 36.5rem) minmax(0, 1fr); }
  /* the cluster is the big scene: it fills the right side and bleeds into the room padding */
  .lr-hero__scene { margin-bottom: -16px; }
  .lr-hero__img { width: 116%; max-width: none; margin-left: -10%; }
}
@media (max-width: 599px) {
  .lr-room { margin-inline: 0; border-radius: 24px; }
  .lr-hero { padding-top: 0; }
  .lr-stage { margin-inline: 0; border-radius: 0 0 var(--lr-r-xl) var(--lr-r-xl); padding-top: 28px; }
  .lr-hero__copy { gap: 16px; }
  .lr-hero__copy .lr-actions { width: 100%; }
  .lr-hero__copy .lr-actions .lr-btn { flex: 1 1 100%; }
  .lr-hero__img { width: 108%; max-width: none; margin-left: -4%; }
}

/* ==========================================================================
   HP2-02 · Key facts
   ========================================================================== */
.lr-facts { padding-block: clamp(24px, 3.4vw, 40px) calc(var(--lr-section-y) * .55); }
/* Four short facts, not a feature grid: one editorial strip under the stage. A 2 px ink rule over
   each fact, the phrase large, the line under it; no icons, no tokens, no tinted cards. */
.lr-facts__grid { display: grid; column-gap: clamp(20px, 3vw, 40px); }
.lr-fact { display: grid; row-gap: 6px; align-content: start; padding: 16px 0 18px; border-top: 2px solid var(--lr-ink); }
.lr-fact__big { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); font-weight: 600; font-stretch: 104%; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.lr-fact__text { font-size: 1rem; line-height: 1.5; color: var(--lr-muted); text-wrap: pretty; }
@media (max-width: 599px) {
  .lr-fact { border-top-width: 1px; border-top-color: var(--lr-line); padding: 14px 0 16px; }
  .lr-fact:first-child { border-top: 2px solid var(--lr-ink); }
  .lr-fact__big { font-size: 1.3125rem; }
}
@media (min-width: 600px) {
  .lr-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr-fact { padding: 18px 0 22px; row-gap: 10px; }
}
@media (min-width: 1200px) {
  /* each fact spans two rows of one shared grid, so the four lines under the titles start on one line */
  .lr-facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .lr-fact { grid-row: span 2; grid-template-rows: subgrid; }
}

/* Ceramic sphere: the sequence token only (order matters). Two sizes: 56 px for page-level
   sequences, 32 px inside a card or panel; colours in order coral, mint, sky, ink. Unordered items
   never get a sphere: they use the mono index chip, or nothing. */

/* ==========================================================================
   HP2-03 · The showroom: seven service objects
   ========================================================================== */
.lr-build { padding-top: calc(var(--lr-section-y) * .6); }
.lr-svc-grid { display: grid; gap: var(--lr-gap); }
.lr-svc {
  position: relative; display: flex; flex-direction: column;
  padding: 8px; border-radius: var(--lr-r-xl);
  background: var(--lr-surface); border: 1px solid var(--lr-line);
  transition: border-color var(--lr-dur-2) linear;
}
.lr-svc:hover { border-color: #CFC9BE; }
.lr-svc__plinth {
  --plinth: linear-gradient(180deg, #FFEDE5 0%, #FFD9C7 100%);
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 188px; border-radius: calc(var(--lr-r-xl) - 7px); overflow: hidden; isolation: isolate;
  background: var(--plinth);
}
.lr-svc__plinth::before { /* back-wall light */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%);
}
.lr-svc__plinth::after { /* contact shadow under the object */
  content: ""; position: absolute; left: 50%; bottom: 9%; width: 54%; height: 13%; z-index: 0;
  background: var(--lr-obj-floor);
  transform: translateX(-50%);
  transition: transform var(--lr-dur-3) var(--lr-ease), opacity var(--lr-dur-3) var(--lr-ease);
}
.lr-svc--sky .lr-svc__plinth { --plinth: linear-gradient(180deg, #E9F8FE 0%, #B5ECFF 100%); }
.lr-svc--mint .lr-svc__plinth { --plinth: linear-gradient(180deg, #E8FBF3 0%, #C3F3E0 100%); }
.lr-svc__plinth picture { position: relative; z-index: 1; height: 92%; aspect-ratio: 1; transition: transform var(--lr-dur-3) var(--lr-ease); }
.lr-svc__obj { width: 100%; height: 100%; object-fit: contain; }
.lr-svc__num {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 3px 10px; border-radius: var(--lr-r-pill); background: rgba(255, 255, 255, .92);
  font-family: var(--lr-font-mono); font-size: .75rem; line-height: 1.5; color: var(--lr-ink);
}
.lr-svc__body { display: flex; flex-direction: column; flex: 1; padding: 18px 14px 14px; }
.lr-svc__more { margin-top: auto; }
.lr-svc__title { font-size: var(--lr-fs-h3); font-weight: 600; font-stretch: 102%; line-height: 1.18; letter-spacing: -.015em; text-wrap: balance; }
.lr-svc__title a { text-decoration: none; color: var(--lr-ink); }
.lr-svc__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--lr-r-xl); }
.lr-svc__title a:hover { text-decoration: underline; text-decoration-color: var(--lr-link-line); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.lr-svc__title a:focus-visible { outline: none; box-shadow: none; }
.lr-svc__title a:focus-visible::after { outline: 3px solid var(--lr-focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lr-focus-inner); }
.lr-svc__get { margin-top: 10px; font-size: 1.0625rem; line-height: 1.5; color: var(--lr-ink); text-wrap: pretty; }
.lr-svc__label {
  padding-top: 18px;
  font-family: var(--lr-font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted);
}
.lr-svc__label::before { content: ""; display: block; height: 0; border-top: 1.5px dashed var(--lr-line); margin-bottom: 14px; }
/* short "For example" lists inside a card: one neutral dot everywhere (never the card's tint) */
.lr-svc__ex { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 8px; }
.lr-svc__ex li { position: relative; padding-left: 18px; font-size: .9375rem; line-height: 1.45; color: var(--lr-ink-2); }
.lr-svc__ex li::before {
  content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lr-ink-2);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lr-svc:hover .lr-svc__plinth picture { transform: translateY(-6px); }
  .lr-svc:hover .lr-svc__plinth::after { transform: translateX(-50%) scale(.86); opacity: .7; }
}

/* Phones: the showroom stays a showroom. The seven cards are one row that scrolls sideways
   (scroll snap), each about 280 px wide with its object 200 px tall on the plinth, then the title and
   the one line. The next card always peeks in at the right edge, so the row reads as "more to see".
   The examples live on Services; the homepage keeps the one line per service. */
@media (max-width: 599px) {
  /* ul.lr-svc-grid[role=list] outranks the list reset (ul[role="list"] { padding: 0 }), so the row keeps its 16 px gutter */
  ul.lr-svc-grid[role="list"] {
    grid-auto-flow: column; grid-auto-columns: min(280px, calc(100vw - 2 * var(--lr-pad) - 52px)); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--lr-pad) * -1); padding: 4px var(--lr-pad) 10px; scroll-padding-inline: var(--lr-pad);
  }
  .lr-svc-grid::-webkit-scrollbar { display: none; }
  .lr-svc { scroll-snap-align: start; border-radius: 24px; }
  .lr-svc__plinth { height: 220px; border-radius: 17px; }
  .lr-svc__plinth picture { height: 200px; }
  .lr-svc__title a::after { border-radius: 24px; }
  .lr-svc__body { padding: 16px 12px 14px; }
  .lr-svc__get { font-size: 1rem; line-height: 1.45; }
  .lr-svc__more { display: none; }
  .lr-strip { padding: 18px 20px; gap: 10px; }
  .lr-build__rows { gap: 12px; margin-top: 12px; }
}

@media (min-width: 600px) {
  .lr-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* each card spans four rows of the grid so titles, lines and examples align across a row */
  .lr-svc { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .lr-svc__body { display: contents; }
  .lr-svc__plinth { height: 220px; }
  .lr-svc__title { margin: 20px 18px 0; }
  .lr-svc__get { margin: 10px 18px 0; }
  .lr-svc__more { margin: 0 18px; padding-bottom: 18px; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  /* the seventh object gets a wide plinth beside its text */
  .lr-svc:last-child { grid-column: 1 / -1; grid-row: auto; display: flex; flex-direction: row; }
  .lr-svc:last-child .lr-svc__plinth { flex: 0 0 44%; height: auto; min-height: 280px; }
  .lr-svc:last-child .lr-svc__plinth picture { height: 230px; }
  .lr-svc:last-child .lr-svc__body { display: flex; flex-direction: column; justify-content: center; padding: 10px 10px 4px 14px; }
  .lr-svc:last-child .lr-svc__more { margin-top: 0; }
}
@media (min-width: 1200px) {
  .lr-svc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lr-svc { grid-column: span 3; }
  .lr-svc:nth-child(-n+3) { grid-column: span 4; }
  .lr-svc:nth-child(-n+3) .lr-svc__plinth { height: 288px; }
  .lr-svc:nth-child(-n+3) .lr-svc__title { margin-inline: 22px; }
  .lr-svc:nth-child(-n+3) .lr-svc__get { margin-inline: 22px; }
  .lr-svc:nth-child(-n+3) .lr-svc__more { margin-inline: 22px; padding-bottom: 22px; }
  .lr-svc:nth-child(-n+3) .lr-svc__title { font-size: 1.625rem; }
}

/* Two strips under the showroom */
/* Two statements under the showroom: rows on an ink rule with the coral tick (as the roles of HP2-04), both
   titles links to their section on Services, no glyph tiles and no tinted panels */
.lr-build__rows { display: grid; gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(32px, 4vw, 48px); }
.lr-strip { display: grid; gap: 6px; padding-block: 18px 20px; border-top: 1px solid var(--lr-line); }
.lr-strip:last-child { border-bottom: 1px solid var(--lr-line); }
.lr-strip__title { font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.lr-strip__text { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); text-wrap: pretty; }
@media (min-width: 860px) {
  .lr-build__rows { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lr-strip { padding-block: 22px 4px; border-top: 2px solid var(--lr-ink); }
  .lr-strip:last-child { border-bottom: 0; }
}

/* ==========================================================================
   HP2-04 · Who we work with
   ========================================================================== */
.lr-who { padding-top: 0; }
/* Three roles on hairlines, not persona cards and not numbered: the coral tick marks each row (.lr-tick) */
.lr-roles { display: grid; column-gap: clamp(24px, 3vw, 48px); }
.lr-role { display: grid; row-gap: 6px; align-content: start; padding-block: 18px 20px; border-top: 1px solid var(--lr-line); }
.lr-role:last-child { border-bottom: 1px solid var(--lr-line); }
.lr-role p { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); }
.lr-role__title { font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
@media (min-width: 768px) {
  .lr-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lr-role { row-gap: 10px; padding-block: 22px 4px; border-top: 2px solid var(--lr-ink); }
  .lr-role:last-child { border-bottom: 0; }
}
/* Sequence nodes: the ceramic sphere with an ink outline, so it reads on every room, coral included.
   Colours in order: coral, mint, sky, ink. In a coral or mint room the ink node is an outline only. */
.lr-part__node, .lr-step__node, .lr-price__node, .lr-next__n {
  --c: var(--lr-brand);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 46%),
    var(--c);
  box-shadow: inset 0 -3px 6px rgba(17, 18, 22, .14), 0 6px 12px -6px rgba(17, 18, 22, .4);
  border: 1.5px solid var(--lr-ink);
}
.lr-ctx-coral .lr-step__node--ink, .lr-ctx-mint .lr-step__node--ink,
.lr-ctx-coral .lr-next__n--ink, .lr-ctx-mint .lr-next__n--ink { --c: #FFFFFF; color: #111216; border-width: 2px; }

/* "You might need us if": each line is a link to the matching service, its plinth in that card's colour */
.lr-needs { margin-top: clamp(36px, 4.5vw, 56px); }
.lr-needs__title { font-family: var(--lr-font-mono); font-size: .8125rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted); margin-bottom: 16px; }
.lr-needs__list { display: grid; gap: 10px; }
.lr-need {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 8px 18px 8px 8px; border-radius: var(--lr-r-l);
  background: var(--lr-surface); border: 1px solid var(--lr-line);
  font-size: 1rem; line-height: 1.4; font-weight: 500;
  transition: border-color var(--lr-dur-2) linear;
}
.lr-need:hover { border-color: #CFC9BE; }
.lr-need:active { background: #F7F5F1; }
/* the row is a link: a chevron in a sand disc says so (an icon, not a "→" caption) */
.lr-need__go {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border-radius: 50%;
  background: var(--lr-sand); color: var(--lr-ink); transition: background-color var(--lr-dur-2) linear, color var(--lr-dur-2) linear, transform var(--lr-dur-2) var(--lr-ease);
}
.lr-need:hover .lr-need__go { background: var(--lr-ink); color: #FBFAF7; }
@media (prefers-reduced-motion: no-preference) { .lr-need:hover .lr-need__go { transform: translateX(2px); } }
/* the eighth cell of the two-column grid: the way to every service, so no row runs on alone */
.lr-need--all { justify-content: space-between; padding-left: 22px; background: transparent; border-style: dashed; border-color: rgba(17, 18, 22, .28); font-weight: 600; }
@media (max-width: 859px) { .lr-need--all { display: none; } }
.lr-need a { color: var(--lr-ink); text-decoration: none; }
.lr-need a::after { content: ""; position: absolute; inset: 0; border-radius: var(--lr-r-l); }
.lr-need a:hover { text-decoration: underline; text-decoration-color: var(--lr-link-line); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.lr-need a:focus-visible { outline: none; box-shadow: none; }
.lr-need a:focus-visible::after { outline: 3px solid var(--lr-focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lr-focus-inner); }
.lr-need__thumb {
  --plinth: linear-gradient(180deg, #FFEDE5 0%, #FFD9C7 100%);
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: var(--plinth);
}
.lr-need__thumb--sky { --plinth: linear-gradient(180deg, #E9F8FE 0%, #B5ECFF 100%); }
.lr-need__thumb--mint { --plinth: linear-gradient(180deg, #E8FBF3 0%, #C3F3E0 100%); }
.lr-need__thumb--sand { --plinth: linear-gradient(180deg, #F7F5F1 0%, #ECE8E0 100%); }
.lr-need__thumb picture { width: 86%; height: 86%; }
.lr-need__thumb img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 860px) {
  .lr-needs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 599px) {
  .lr-need { gap: 12px; padding-right: 14px; font-size: .96875rem; }
  .lr-need__thumb { width: 56px; height: 56px; border-radius: 14px; }
}

/* ==========================================================================
   HP2-05 · Systems we have built (sand gallery)
   White cases on the same off-white as the C case renders, so each render
   reads as an object on its plinth, not a pasted photo.
   ========================================================================== */
.lr-case { border-radius: var(--lr-r-xl); background: var(--lr-surface); border: 1px solid var(--lr-line); padding: 8px; }
/* Every case cover stands on the same sand plinth (#F3F1ED, the ground of the C case renders):
   a C render is shown whole (contain) with its edge feathered into the plinth, a transparent
   service object stands on it with a contact shadow. Tints are for rooms, never for covers. */
.lr-case__media {
  position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--lr-r-xl) - 7px); background: #F3F1ED; aspect-ratio: 4 / 3;
}
.lr-case__media picture { width: 100%; height: 100%; }
.lr-case__media img {
  width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
}
@media (min-width: 600px) and (max-width: 1023px) { .lr-case--feature .lr-case__media { aspect-ratio: 16 / 9; } }
/* a transparent service object on the same sand plinth */
.lr-case__media--plinth::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%);
}
.lr-case__media--plinth::after {
  content: ""; position: absolute; left: 50%; bottom: 9%; width: 36%; height: 11%; z-index: 0;
  background: var(--lr-obj-floor); transform: translateX(-50%);
}
.lr-case__media--plinth picture { position: relative; z-index: 1; width: auto; height: 82%; aspect-ratio: 1; }
.lr-case__media--plinth img { -webkit-mask-image: none; mask-image: none; }
.lr-case__intro { padding: 22px 16px 16px; display: grid; gap: 12px; justify-items: start; }
.lr-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: var(--lr-r-pill); border: 1px solid rgba(17, 18, 22, .18); background: var(--lr-surface);
  font-family: var(--lr-font-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--lr-ink);
}
.lr-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lr-mint); box-shadow: 0 0 0 1px rgba(17, 18, 22, .25); }
.lr-case__title { font-size: clamp(1.375rem, 1.1rem + .9vw, 2rem); font-weight: 600; font-stretch: 103%; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.lr-case--item .lr-case__title { font-size: var(--lr-fs-h3); }
.lr-case__text { color: var(--lr-ink-2); font-size: 1.0625rem; line-height: 1.55; max-width: 38em; text-wrap: pretty; }
.lr-case--item .lr-case__text { font-size: 1rem; }

/* Three connected systems: sphere nodes joined by an ink rod (the sequence language of the site) */
.lr-case__parts { --pg: 0px; display: grid; gap: var(--pg); padding: 0 16px 10px; }
.lr-part { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; padding-block: 12px; }
.lr-part__node {
  position: relative; z-index: 2;
  grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-weight: 650; font-size: .875rem; color: #111216;
}
.lr-part__node--mint { --c: var(--lr-mint); }
.lr-part__node--sky { --c: var(--lr-sky); }
.lr-part__title { font-size: 1.125rem; font-weight: 600; line-height: 1.25; margin: 4px 0 6px; }
.lr-part p { color: var(--lr-ink-2); font-size: .96875rem; line-height: 1.55; }
.lr-part:not(:last-child)::after { /* vertical rod from this node to the next */
  content: ""; position: absolute; left: 15px; top: 44px; bottom: -12px; width: 2px; border-radius: 1px;
  background: var(--lr-ink);
}
/* every case title leads to its entry on Work: the title is the link (COPY_V2 §5.1). On the two item
   cards and on the three parts the link covers the card; the feature title links its own text. */
.lr-case__link { color: var(--lr-ink); text-decoration: underline; text-decoration-color: rgba(17, 18, 22, .22); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.lr-case__link:hover { text-decoration-color: var(--lr-link-line); }
.lr-case--item { position: relative; transition: border-color var(--lr-dur-2) linear; }
.lr-case--item:hover { border-color: #CFC9BE; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lr-case--item .lr-case__media picture, .lr-case--feature .lr-case__media picture, .lr-entry .lr-case__media picture { transition: transform var(--lr-dur-3) var(--lr-ease); }
  .lr-case--item:hover .lr-case__media picture, .lr-case--feature:has(.lr-case__link:hover) .lr-case__media picture,
  .lr-entry:has(.lr-entry__title:hover) .lr-case__media picture, .lr-entry:hover .lr-case__media picture { transform: translateY(-6px); }
  .lr-case--item:hover .lr-case__media--plinth::after { transform: translateX(-50%) scale(.86); opacity: .7; }
}
.lr-case__link--card::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--lr-r-xl); }
.lr-part .lr-case__link--card::after { border-radius: var(--lr-r-l); }
.lr-case__link--card:focus-visible { outline: none; box-shadow: none; }
.lr-case__link--card:focus-visible::after { outline: 3px solid var(--lr-focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lr-focus-inner); }
.lr-case-pair { display: grid; gap: var(--lr-gap); margin-top: var(--lr-gap); }
.lr-work__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; margin-top: 32px; }
.lr-work__ref { color: var(--lr-ink-2); font-size: 1.0625rem; max-width: 40em; }

@media (min-width: 860px) {
  .lr-case-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr-case__parts { --pg: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 0 0; }
  .lr-part { display: block; padding: 22px; border-radius: var(--lr-r-l); background: #F7F5F1; }
  .lr-part__node { margin-bottom: 14px; }
  .lr-part__title { margin-top: 0; }
  /* one rod from the first node's centre to the last one's, drawn over the card grounds and under the
     nodes (the same rod as HP2-07), so it reads as the rod joining the three systems, not as a dash in a gap */
  .lr-part:not(:last-child)::after { display: none; }
  .lr-case__parts { position: relative; isolation: isolate; }
  .lr-case__parts::before {
    content: ""; position: absolute; z-index: 1; left: 38px; top: 45px; width: calc((100% + var(--pg)) * 2 / 3); height: 2px;
    background: var(--lr-ink);
  }
}
@media (min-width: 1024px) {
  .lr-case--feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lr-case--feature .lr-case__media { grid-row: 1; }
  .lr-case--feature .lr-case__intro { align-content: center; padding: 28px 36px; gap: 16px; }
  .lr-case--feature .lr-case__parts { grid-column: 1 / -1; }
  .lr-case--item .lr-case__intro { padding: 24px 24px 20px; }
}
.lr-case--item .lr-case__media { aspect-ratio: 16 / 9; }
@media (max-width: 599px) {
  .lr-case--feature .lr-case__media { aspect-ratio: 16 / 10; }
  .lr-case-pair {
    grid-auto-flow: column; grid-auto-columns: min(300px, calc(100vw - 2 * var(--lr-pad) - 44px)); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--lr-pad) * -1); padding: 2px var(--lr-pad) 8px; scroll-padding-inline: var(--lr-pad);
  }
  .lr-case-pair::-webkit-scrollbar { display: none; }
  .lr-case-pair > .lr-case { scroll-snap-align: start; }
  .lr-case-pair .lr-case__intro { padding: 18px 12px 14px; }
}

/* ==========================================================================
   HP2-06 · Who you'll be working with (peach room)
   ========================================================================== */
.lr-team { display: grid; gap: 32px; }
.lr-team__head { display: grid; gap: 18px; align-content: start; justify-items: start; }
.lr-team__head .lr-lead { color: var(--lr-ink-2); }
.lr-team__cta { margin-top: 6px; }
/* phones: the list shows its first items, then a button for the rest (site.js [data-more-btn]) */
.lr-more-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 14px; padding: 0 18px 0 12px;
  border: 1.5px solid var(--lr-ink); border-radius: var(--lr-r-pill); background: #FFFFFF; color: var(--lr-ink);
  font-weight: 600; font-size: 1rem; cursor: pointer;
}
.lr-more-btn::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background:
    linear-gradient(var(--lr-ink), var(--lr-ink)) center / 10px 2px no-repeat,
    linear-gradient(var(--lr-ink), var(--lr-ink)) center / 2px 10px no-repeat, var(--lr-sand);
}
.lr-more-btn[hidden] { display: none; }
.is-clipped[data-more-keep="2"] > :nth-child(n + 3), .is-clipped[data-more-keep="4"] > :nth-child(n + 5) { display: none; }
.is-clipped[data-more-keep="2"] > :nth-child(2) { border-bottom: 1px solid rgba(17, 18, 22, .12); }
.lr-needs .lr-more-btn { margin-top: 12px; }
.lr-checks + .lr-more-btn { justify-self: start; margin-top: 2px; }
.lr-checks.is-clipped[data-more-keep="4"] > :nth-child(4) { border-bottom: 0; }
.lr-points { display: grid; }
/* points on hairlines: unordered, so no number; the coral tick on the rule marks each row (.lr-tick) */
.lr-point { display: block; padding-block: 20px; border-top: 1px solid rgba(17, 18, 22, .12); }
.lr-point:last-child { border-bottom: 1px solid rgba(17, 18, 22, .12); }
.lr-point__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 4px; }
.lr-point p { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); }
@media (min-width: 1024px) {
  .lr-team { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); }
  /* the head column stays beside the list while it scrolls (a stretched grid item cannot stick) */
  .lr-team__head { position: sticky; top: 96px; align-self: start; }
  .lr-point { padding-block: 22px; }
  /* HP2-06: the supplier-pack button follows the points in the DOM (phones read the points first);
     on wide screens it sits under the head, which then no longer sticks */
  .lr-team--cta { grid-template-areas: "head points" "head cta"; grid-template-rows: auto 1fr; }
  .lr-team--cta .lr-team__head { grid-area: head; }
  .lr-team--cta .lr-points { grid-area: points; }
  .lr-team--cta .lr-team__cta { grid-area: cta; align-self: start; margin-top: 24px; }
}

/* ==========================================================================
   HP2-07 · What a project looks like (four nodes on one rod)
   ========================================================================== */
.lr-steps { position: relative; display: grid; gap: 28px; }
.lr-step { position: relative; padding-left: 80px; min-height: 56px; }
.lr-step:not(:last-child)::after { /* the rod, node to node: it ends on the last node */
  content: ""; position: absolute; left: 26px; top: 56px; bottom: -28px; width: 4px;
  background: var(--lr-ink);
}
.lr-step__node {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font-size: 1.375rem; font-weight: 650; color: #111216; border: 2px solid var(--lr-ink);
}
.lr-step__node--mint { --c: var(--lr-mint); }
.lr-step__node--sky { --c: var(--lr-sky); }
.lr-step__node--ink { --c: #111216; color: #FBFAF7; }
.lr-step__title { font-size: var(--lr-fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; padding-top: 12px; margin-bottom: 8px; text-wrap: balance; }
.lr-step__text { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); }
.lr-step__get {
  margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--lr-line);
  font-size: .9375rem; line-height: 1.45; color: var(--lr-muted);
}
.lr-step__k { font-family: var(--lr-font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lr-ink); margin-right: 4px; }
/* phones: the four steps are one sideways row of cards (scroll snap, the next card peeks in), the rod
   running from node to node across the card tops, as on wide screens */
@media (max-width: 599px) {
  /* the wrapper scrolls (a keyboard stop with its name only while it does: site.js [data-scroll-region]) */
  .lr-steps-scroll {
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--lr-pad) * -1); padding: 2px var(--lr-pad) 10px; scroll-padding-inline: var(--lr-pad);
  }
  .lr-steps-scroll::-webkit-scrollbar { display: none; }
  .lr-process .lr-steps {
    grid-auto-flow: column; grid-auto-columns: min(282px, calc(100vw - 2 * var(--lr-pad) - 44px)); gap: 12px;
    width: max-content; isolation: isolate;
  }
  .lr-process .lr-step {
    scroll-snap-align: start; padding: 86px 18px 18px; border-radius: var(--lr-r-l);
    background: var(--lr-surface); border: 1px solid var(--lr-line);
  }
  .lr-process .lr-step__node { left: 18px; top: 18px; z-index: 2; }
  .lr-process .lr-step:not(:last-child)::after { z-index: 1; left: 46px; top: 44px; bottom: auto; width: calc(100% + 12px); height: 4px; }
  .lr-process .lr-step__title { padding-top: 0; }
}
.lr-process__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 40px; padding: 18px 22px; border-radius: var(--lr-r-l); background: var(--lr-surface); border: 1px solid var(--lr-line); }
.lr-process__line { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.lr-process__line svg { flex: none; }
@media (min-width: 1024px) {
  /* four columns on a subgrid: titles, texts and the "You get" lines line up across the rod */
  .lr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--lr-gap); row-gap: 0; }
  .lr-step { display: grid; grid-row: span 3; grid-template-rows: subgrid; padding-left: 0; padding-top: 80px; }
  .lr-step:not(:last-child)::after { left: 56px; top: 26px; bottom: auto; width: calc(100% + var(--lr-gap) - 56px); height: 4px; }
  .lr-step__title { padding-top: 0; }
  .lr-step__get { align-self: start; }
}

/* ==========================================================================
   HP2-08 · What you get at the end (mint room)
   ========================================================================== */
.lr-own { display: grid; gap: 40px; }
.lr-own__copy { display: grid; gap: 18px; align-content: start; }
.lr-own__copy .lr-lead { color: #34363D; }
.lr-checks { display: grid; gap: 12px; margin-top: 10px; }
.lr-checks li { position: relative; padding-left: 36px; font-size: 1.0625rem; line-height: 1.5; }
.lr-checks li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 24px; height: 24px; border-radius: 50%;
  background: #FBFAF7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.4 L10.4 15.6 L17 8.8' fill='none' stroke='%23111216' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
  border: 1.5px solid #111216;
}
/* A longer list of short facts: the same check, two columns from 600 px, hairlines between rows */
.lr-checklist { gap: 0; margin-top: 28px; }
.lr-checklist li { padding-block: 14px; border-top: 1px solid var(--lr-line); font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--lr-ink); text-wrap: pretty; }
.lr-checklist li::before { top: calc(14px + .1em); }
@media (min-width: 600px) {
  .lr-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .lr-checklist li:nth-last-child(-n+2):nth-child(odd), .lr-checklist li:last-child { border-bottom: 1px solid var(--lr-line); }
}
@media (max-width: 599px) { .lr-checklist li:last-child { border-bottom: 1px solid var(--lr-line); } }
.lr-own__side { display: grid; gap: 28px; align-content: start; }
.lr-own__fig { border-radius: var(--lr-r-xl); padding: clamp(16px, 2.4vw, 28px); display: grid; gap: 20px; }
.lr-seg { display: none; justify-self: start; padding: 4px; border-radius: var(--lr-r-pill); background: var(--lr-sand); gap: 4px; }
.js .lr-seg { display: inline-flex; }
.lr-seg__btn {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--lr-r-pill); background: transparent; cursor: pointer;
  font-weight: 600; font-size: .9375rem; color: var(--lr-ink);
}
.lr-seg__btn[aria-pressed="true"] { background: var(--lr-ink); color: #FBFAF7; }
.lr-diag { display: grid; gap: 0; align-items: center; }
.lr-diag__org, .lr-diag__us { border-radius: 18px; padding: 16px 18px; }
.lr-diag__org { background: var(--lr-mint-tint); border: 2px solid var(--lr-ink); }
.lr-diag__label { font-family: var(--lr-font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-ink); margin-bottom: 10px; }
.lr-diag__items { list-style: none; padding: 0; display: grid; gap: 8px; }
.lr-diag__items li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 500; }
.lr-diag__tick {
  flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--lr-ink);
  background: var(--lr-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3 L8.5 13.2 L14.5 7' fill='none' stroke='%23111216' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.lr-diag__run { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(17, 18, 22, .3); font-size: .875rem; font-weight: 600; }
.lr-diag__pulse { width: 10px; height: 10px; border-radius: 50%; background: #0A7A5A; box-shadow: 0 0 0 3px rgba(10, 122, 90, .2); }
.lr-diag__rod { position: relative; height: 32px; width: 4px; margin-left: 40px; background: var(--lr-ink); border-radius: 2px; }
.lr-diag__cut { display: none; }
.lr-diag__us { border: 2px dashed var(--lr-ink); background: #FFFFFF; }
.lr-diag__state { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--lr-r-pill); font-size: .875rem; font-weight: 600; }
.lr-diag__state--day { background: var(--lr-sand); }
.lr-diag__state--leave { display: none; background: var(--lr-stop-tint); color: var(--lr-stop); }
.lr-diag[data-state="leave"] .lr-diag__state--day { display: none; }
.lr-diag[data-state="leave"] .lr-diag__state--leave { display: inline-flex; }
.lr-diag[data-state="leave"] .lr-diag__rod { background: repeating-linear-gradient(180deg, #868892 0 4px, transparent 4px 9px); }
.lr-diag[data-state="leave"] .lr-diag__cut { display: block; position: absolute; left: 50%; top: 50%; width: 20px; height: 4px; background: var(--lr-stop); transform: translate(-50%, -50%) rotate(-30deg); border-radius: 2px; }
.lr-diag[data-state="leave"] .lr-diag__us { border-style: dotted; border-color: #868892; }
.lr-own__cap { font-size: .9375rem; line-height: 1.5; color: var(--lr-muted); }
.lr-own__move { display: grid; gap: 10px; }
.lr-own__h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; }
.lr-own__move p { color: #34363D; }
.lr-own__move .lr-link--arrow { color: #111216; }
@media (min-width: 600px) {
  .lr-diag { grid-template-columns: minmax(0, 1.5fr) 44px minmax(0, 1fr); }
  .lr-diag__rod { width: auto; height: 4px; margin-left: 0; }
  .lr-diag[data-state="leave"] .lr-diag__rod { background: repeating-linear-gradient(90deg, #868892 0 4px, transparent 4px 9px); }
  .lr-diag[data-state="leave"] .lr-diag__cut { width: 4px; height: 20px; }
}
@media (min-width: 1024px) {
  .lr-own { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 5vw, 80px); }
}
/* phones: the drawing repeats the list beside it, so only its caption stays (its words carry the same meaning) */
@media (max-width: 599px) {
  .lr-own__fig.lr-panel { padding: 0; background: transparent; }
  .lr-own__fig .lr-seg, .lr-own__fig .lr-diag { display: none; }
}

/* ==========================================================================
   HP2-09 · What if something goes wrong?
   ========================================================================== */
.lr-wrong__grid { display: grid; gap: 28px; }
/* the head: H2 and the exhibit (c-key-slot: an integration that is safe to retry) on the shared sand plinth */
.lr-wrong__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; align-content: start; }
.lr-wrong__more { margin-top: 24px; }
.lr-risk { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding-block: 22px; border-top: 1px solid var(--lr-line); }
.lr-risk:last-child { border-bottom: 1px solid var(--lr-line); }
.lr-risk__glyph { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; }
/* one neutral tile for every risk; the ink tile only for "night or weekend", so the colour means something */
.lr-risk__glyph--sand { background: var(--lr-sand); }
.lr-risk__glyph--ink { background: var(--lr-ink); }
.lr-risk__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 4px; }
.lr-risk p { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); }
/* HP2-09 on phones: each risk is a disclosure (title row, the answer on tap); from 600 px it stays open
   and the summary is a plain title row (site.js data-fold="600" data-fold-lock) */
.lr-risk.lr-risk--fold { display: block; padding-block: 0; }
.lr-risk__s { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; min-height: 64px; padding-block: 12px; cursor: pointer; list-style: none; }
.lr-risk__s::-webkit-details-marker { display: none; }
.lr-risk__s .lr-risk__glyph { width: 40px; height: 40px; border-radius: 12px; }
.lr-risk__s .lr-risk__glyph svg { width: 24px; height: 24px; }
.lr-risk__s .lr-risk__title { margin: 0; font-size: 1.0625rem; }
.lr-risk__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--lr-sand); }
.lr-risk__icon::before, .lr-risk__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--lr-ink); transform: translate(-50%, -50%); }
.lr-risk__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.lr-risk__d[open] .lr-risk__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.lr-risk__d > p { padding: 0 0 18px 54px; }
@media (min-width: 600px) {
  /* the glyph hangs in the left column; the title and the answer share the text column */
  .lr-risk.lr-risk--fold { position: relative; padding-left: 70px; }
  .lr-risk__s { display: block; min-height: 0; padding: 22px 0 4px; cursor: default; }
  .lr-risk__s .lr-risk__glyph { position: absolute; left: 0; top: 22px; width: 52px; height: 52px; border-radius: 16px; }
  .lr-risk__s .lr-risk__glyph svg { width: 28px; height: 28px; }
  .lr-risk__s .lr-risk__title { font-size: 1.1875rem; }
  .lr-risk__icon { display: none; }
  .lr-risk__d > p { padding: 0 0 22px; }
}
@media (min-width: 1024px) {
  .lr-risk.lr-risk--fold { padding-left: 82px; }
  .lr-risk__s { padding-top: 24px; }
  .lr-risk__s .lr-risk__glyph { top: 24px; }
  .lr-risk__d > p { padding-bottom: 24px; }
}
@media (min-width: 1024px) {
  .lr-wrong__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); }
  .lr-wrong__head { position: sticky; top: 96px; align-self: start; grid-template-columns: minmax(0, 1fr); }
  .lr-wrong__head .lr-exhibit { width: 240px; margin-top: 32px; }
  .lr-risk { grid-template-columns: 64px minmax(0, 1fr); padding-block: 24px; }
}

/* ==========================================================================
   HP2-10 · How we charge (sky room)
   ========================================================================== */
.lr-charge__steps { display: grid; gap: 14px; isolation: isolate; }
.lr-price { position: relative; padding: 26px; border-radius: var(--lr-r-l); background: #FFFFFF; }
.lr-price__title { font-size: 1.3125rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; margin-bottom: 8px; }
.lr-price__node {
  position: relative; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: .875rem; font-weight: 650; letter-spacing: 0; color: #111216;
}
.lr-charge__steps li:nth-child(2) .lr-price__node { --c: var(--lr-mint); }
.lr-charge__steps li:nth-child(3) .lr-price__node { --c: var(--lr-sky); }
.lr-price p { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); }
/* phones: the node beside the title, and one rod running behind the cards from node to node */
.lr-charge__steps .lr-price { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; }
.lr-charge__steps .lr-price__node { grid-row: span 2; }
.lr-charge__steps .lr-price__title { margin-top: 3px; }
.lr-charge__steps .lr-price:not(:last-child)::after { /* node centre to the next node's centre, over the card grounds */
  content: ""; position: absolute; z-index: 1; left: 41px; top: 42px; width: 2px; height: calc(100% + 14px);
  background: var(--lr-ink);
}
.lr-charge__lower { display: grid; gap: 14px; margin-top: 14px; align-items: start; }
.lr-price--support { background: #FFFFFF; }
.lr-factors { padding: 26px; border-radius: var(--lr-r-l); background: rgba(255, 255, 255, .55); }
.lr-factors__title { font-family: var(--lr-font-mono); font-size: .8125rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
/* plain text with hairlines: nothing here looks like a button or a filter chip */
.lr-factors__list { display: grid; }
.lr-factors__list li { padding: 9px 0; border-top: 1px solid rgba(17, 18, 22, .12); font-size: 1rem; font-weight: 500; line-height: 1.4; }
.lr-factors__list li:last-child { border-bottom: 1px solid rgba(17, 18, 22, .12); }
.lr-charge__terms { display: grid; gap: 6px; margin-top: 28px; font-size: 1rem; color: var(--lr-ink-2); }
.lr-charge__terms p:last-child { margin-top: 12px; }
@media (min-width: 860px) {
  .lr-charge__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lr-gap); }
  .lr-charge__steps .lr-price { display: block; }
  .lr-charge__steps .lr-price__node { margin-bottom: 14px; }
  .lr-charge__steps .lr-price__title { margin-top: 0; }
  /* one rod from the first node's centre to the last one's, over the card grounds and under the nodes */
  .lr-charge__steps { position: relative; }
  .lr-charge__steps .lr-price:not(:last-child)::after { display: none; }
  .lr-charge__steps::before {
    content: ""; position: absolute; z-index: 1; left: 42px; top: 41px; width: calc((100% + var(--lr-gap)) * 2 / 3); height: 2px;
    background: var(--lr-ink);
  }
  .lr-charge__lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--lr-gap); margin-top: var(--lr-gap); }
  .lr-factors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .lr-factors__list li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid rgba(17, 18, 22, .12); }
}

/* ==========================================================================
   HP2-11 · Questions you may have
   ========================================================================== */
.lr-faq__grid { display: grid; gap: 24px; }
.lr-q { border-top: 1px solid var(--lr-line); }
.lr-faq__list { border-bottom: 1px solid var(--lr-line); }
.lr-q__s {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding-block: 16px; cursor: pointer; list-style: none;
  font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
}
.lr-q__s::-webkit-details-marker { display: none; }
.lr-q__s:hover .lr-q__text { text-decoration: underline; text-decoration-color: var(--lr-link-line); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.lr-q__icon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lr-sand); }
.lr-q__icon::before, .lr-q__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--lr-ink); transform: translate(-50%, -50%); transition: transform var(--lr-dur-2) var(--lr-ease); }
.lr-q__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.lr-q[open] .lr-q__icon { background: var(--lr-brand); }
.lr-q[open] .lr-q__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.lr-q__a { padding-bottom: 22px; max-width: 46em; }
@media (max-width: 599px) { .lr-q__s { min-height: 56px; padding-block: 12px; font-size: 1.125rem; } }
.lr-q__a p { color: var(--lr-ink-2); }
@media (min-width: 1024px) {
  .lr-faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); }
}

/* ==========================================================================
   HP2-12 · Final CTA and form (coral room, white panel)
   ========================================================================== */
#start:focus { outline: none; }
.lr-start__grid { display: grid; gap: 28px; }
.lr-start__copy { display: grid; gap: 18px; align-content: start; }
.lr-start__copy .lr-lead { color: var(--lr-ink); }
/* DOM order follows COPY_V2: heading, form, alternatives, then what happens next */
.lr-start__next { display: grid; gap: 18px; align-content: start; }
.lr-next__title { font-family: var(--lr-font-mono); font-size: .8125rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.lr-next { display: grid; gap: 16px; }
.lr-next__step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
.lr-next__step:not(:last-child)::after { /* the same ink rod as every other sequence, node to node */
  content: ""; position: absolute; left: 15px; top: 32px; bottom: -16px; width: 2px; background: var(--lr-ink);
}
.lr-next__n { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #111216; font-weight: 650; font-size: .875rem; }
.lr-next__n--mint { --c: var(--lr-mint); }
.lr-next__n--sky { --c: var(--lr-sky); }
.lr-next__h { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; margin: 5px 0 2px; }
.lr-next__step p { font-size: .96875rem; line-height: 1.5; }
.lr-start__panel { border-radius: var(--lr-r-xl); padding: clamp(20px, 3vw, 40px); }
.lr-start__alt { font-size: .96875rem; line-height: 1.6; padding-block: 16px; border-block: 1px solid rgba(17, 18, 22, .28); }
.lr-start__alt .lr-link { color: var(--lr-ink); text-decoration-color: var(--lr-ink); font-weight: 600; }
@media (min-width: 1024px) {
  .lr-start__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 72px);
    grid-template-areas: "copy panel" "alt panel" "next panel"; grid-template-rows: auto auto 1fr;
  }
  .lr-start__copy { grid-area: copy; }
  .lr-start__panel { grid-area: panel; }
  .lr-start__alt { grid-area: alt; align-self: start; }
  .lr-start__next { grid-area: next; }
}

/* Form */
.lr-form { display: grid; gap: 22px; }
.lr-form__row { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lr-field { display: grid; gap: 6px; align-content: start; }
.lr-label { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--lr-ink); padding: 0; }
.lr-opt { font-weight: 400; color: var(--lr-muted); }
.lr-help { font-size: .875rem; line-height: 1.45; color: var(--lr-muted); }
.lr-error { display: flex; gap: 8px; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--lr-stop); }
.lr-error::before { content: ""; flex: none; width: 4px; border-radius: 2px; background: var(--lr-stop); }
.lr-input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--lr-line-strong); border-radius: var(--lr-r-s); background: #FFFFFF;
  font: inherit; font-size: 1rem; color: var(--lr-ink);
  transition: border-color var(--lr-dur-1) linear;
}
.lr-input--area { min-height: 132px; resize: vertical; line-height: 1.5; }
.lr-input:hover { border-color: var(--lr-ink-2); }
.lr-input:focus-visible { border-color: var(--lr-ink); }
.lr-input[aria-invalid="true"] { border-color: var(--lr-stop); border-width: 2px; }
.lr-chips__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lr-chips__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.lr-chips__chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--lr-line-strong); border-radius: var(--lr-r-pill); background: #FFFFFF;
  font-size: .9375rem; font-weight: 500; cursor: pointer; user-select: none;
}
.lr-chips__chip:hover { border-color: var(--lr-ink); }
.lr-chips__input:checked + .lr-chips__chip { background: var(--lr-ink); border-color: var(--lr-ink); color: #FBFAF7; }
.lr-chips__input:checked + .lr-chips__chip::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.3 L5.6 10.2 L11.5 3.9' fill='none' stroke='%233DE0A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.lr-chips__input:focus-visible + .lr-chips__chip { outline: 3px solid var(--lr-focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lr-focus-inner); }
.lr-form__privacy { font-size: .9375rem; color: var(--lr-muted); }
/* Supplier-pack mode (site.js): when the pack arrives, and how to send a questionnaire file */
.lr-form__paper {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--lr-r-s);
  background: var(--lr-mint-tint); font-size: .9375rem; line-height: 1.5; color: var(--lr-ink);
}
.lr-form__paper::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--lr-ink);
  background: var(--lr-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2 L7.7 11.8 L13 6.3' fill='none' stroke='%23111216' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.lr-form__paper > span { min-width: 0; overflow-wrap: anywhere; }
.lr-form__paper .lr-link { font-weight: 600; }
.lr-form__tips { border-top: 1px solid var(--lr-line); padding-top: 4px; }
.lr-form__tips-s {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 600; color: var(--lr-ink);
}
.lr-form__tips-s::-webkit-details-marker { display: none; }
.lr-form__tips-s::after {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--lr-ink);
  background: linear-gradient(var(--lr-ink), var(--lr-ink)) center / 10px 2px no-repeat, linear-gradient(var(--lr-ink), var(--lr-ink)) center / 2px 10px no-repeat;
}
.lr-form__tips[open] .lr-form__tips-s::after { background: linear-gradient(var(--lr-ink), var(--lr-ink)) center / 10px 2px no-repeat; }
.lr-form__tips-body { display: grid; gap: 8px; padding: 2px 0 6px; font-size: .9375rem; line-height: 1.5; color: var(--lr-ink-2); }
.lr-form__tips-body ol { display: grid; gap: 6px; padding-left: 1.3em; margin: 0; }
.lr-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lr-form__submit .lr-btn { min-width: 160px; }
.lr-form__under { font-size: .9375rem; color: var(--lr-muted); }
.lr-form__summary { padding: 18px 20px; border: 2px solid var(--lr-stop); border-radius: var(--lr-r-m); background: #FFFFFF; }
.lr-form__summary:focus { outline: 3px solid var(--lr-focus-outer); outline-offset: 2px; }
.lr-form__summary-title { font-size: 1.1875rem; font-weight: 650; color: var(--lr-stop); margin-bottom: 8px; }
.lr-form__summary-list { padding-left: 1.1em; display: grid; gap: 4px; }
.lr-form__summary-list a { color: var(--lr-stop); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.lr-form__proto { padding: 18px 20px; border: 2px solid var(--lr-ink); border-radius: var(--lr-r-m); background: var(--lr-mint-tint); display: grid; gap: 4px; }
.lr-form__proto:focus { outline: 3px solid var(--lr-focus-outer); outline-offset: 2px; }
@media (max-width: 599px) {
  .lr-form__submit .lr-btn { width: 100%; }
}

/* ---------- Prototype note ---------- */
.lr-proto-note { padding-block: 28px 8px; }
.lr-proto-note:focus { outline: none; }
.lr-proto-note:target .lr-proto-note__box, .lr-proto-note:focus .lr-proto-note__box { border-color: var(--lr-ink); border-style: solid; }
.lr-proto-note__box { padding: 20px 24px; border-radius: var(--lr-r-l); border: 1.5px dashed var(--lr-line-strong); background: var(--lr-surface); font-size: .9375rem; color: var(--lr-ink-2); display: grid; gap: 6px; }
.lr-proto-note__title { font-family: var(--lr-font-mono); font-size: .8125rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-ink); }

/* ==========================================================================
   HP2-13 · Footer
   ========================================================================== */
.lr-footer { margin-top: 32px; padding-block: clamp(48px, 6vw, 80px) 32px; background: var(--lr-sand); border-radius: var(--lr-r-xl) var(--lr-r-xl) 0 0; }
.lr-footer__top { display: grid; gap: 40px; }
.lr-footer__brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.lr-footer__blurb { font-size: .96875rem; line-height: 1.55; color: var(--lr-ink-2); max-width: 30em; }
.lr-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (max-width: 599px) { .lr-footer__contact { grid-column: 1 / -1; } }
.lr-footer__h { font-family: var(--lr-font-mono); font-size: .75rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted); margin-bottom: 12px; }
.lr-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.lr-footer__col a { display: inline-flex; align-items: center; min-height: 32px; font-size: .9375rem; text-decoration: none; color: var(--lr-ink); }
.lr-footer__col a:hover { text-decoration: underline; text-decoration-color: var(--lr-link-line); text-underline-offset: .2em; }
.lr-footer__hours { font-size: .9375rem; color: var(--lr-ink-2); padding-top: 4px; line-height: 1.45; }
.lr-footer__base { display: grid; gap: 8px; margin-top: 48px; padding-top: 24px; border-top: 1px solid #DCD8CF; font-size: .875rem; color: var(--lr-muted); }
.lr-footer-legal a { color: var(--lr-ink); text-decoration: underline; text-underline-offset: .18em; }
.lr-nowrap { white-space: nowrap; }
.lr-linkbtn { padding: 0; border: 0; background: none; cursor: pointer; font-size: .875rem; color: var(--lr-ink); text-decoration: underline; text-underline-offset: .18em; min-height: 24px; }
@media (min-width: 860px) {
  .lr-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Phones: the three link groups fold under their headings (site.js puts a button in each heading, the
   accordion pattern) and Contact stays open, so the footer is about half a screen, not one and a half.
   Without the script every link shows. */
.lr-footer__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--lr-ink);
}
.lr-footer__toggle::after {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--lr-ink);
  background: linear-gradient(var(--lr-ink), var(--lr-ink)) center / 10px 2px no-repeat, linear-gradient(var(--lr-ink), var(--lr-ink)) center / 2px 10px no-repeat;
}
.lr-footer__toggle[aria-expanded="true"]::after { background: linear-gradient(var(--lr-ink), var(--lr-ink)) center / 10px 2px no-repeat; }
@media (max-width: 599px) {
  .lr-footer { padding-top: 36px; }
  .lr-footer__top { gap: 24px; }
  .lr-footer__nav { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lr-footer__col[data-foot-fold] { border-top: 1px solid #DCD8CF; }
  .lr-footer__col.is-folding .lr-footer__h { margin-bottom: 0; }
  .lr-footer__col.is-folding ul { padding-bottom: 12px; }
  .lr-footer__contact { padding-top: 18px; border-top: 1px solid #DCD8CF; }
  .lr-footer__contact ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
  .lr-footer__contact .lr-footer__hours { flex-basis: 100%; }
  .lr-footer__base { margin-top: 28px; padding-top: 18px; font-size: .8125rem; }
}
@media (min-width: 1200px) {
  .lr-footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; }
}

/* ==========================================================================
   Page head · every inner page (Services, Work, How we work, How we charge,
   About, Security). One top padding and one copy rhythm, and the copy column
   starts at the top of the stage, so the H1 lands at the same height on every
   page. A page whose H1 repeats its menu label has no eyebrow (COPY_V2_PAGES §1.6):
   .lr-page-head--plain keeps the eyebrow's room empty instead.
   ========================================================================== */
.lr-page-head .lr-stage { min-height: 0; padding-block: var(--lr-head-top) clamp(32px, 4vw, 64px); }
.lr-page-head .lr-stage > .lr-wrap { align-self: flex-start; }
.lr-page-head .lr-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
.lr-page-head .lr-hero__copy { gap: var(--lr-copy-gap); min-width: 0; grid-template-columns: minmax(0, 1fr); }
.lr-page-head .lr-otp { min-width: 0; max-width: min(100%, 38rem); }
.lr-page-head--plain .lr-hero__copy { padding-top: var(--lr-eyebrow-slot); }
.lr-stage--cool {
  background:
    radial-gradient(50% 70% at 78% 52%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(112deg, #CFF1FD 0%, #E6F6FA 40%, #FFE7DC 72%, #FFD3BF 100%);
}
@media (min-width: 1200px) { .lr-page-head .lr-otp { display: none; } }
.lr-page-head .lr-lead { color: var(--lr-ink-2); max-width: 34em; }
.lr-page-head__scene picture { position: relative; }
.lr-page-head__scene img { width: 100%; margin-left: 0; }
.lr-page-head .lr-hero__scene { align-self: center; margin-bottom: 0; }
@media (min-width: 860px) {
  .lr-page-head .lr-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ==========================================================================
   How we work page (and the Security page, which shares its rail and column)
   ========================================================================== */
/* "On this page" in a page head: a printed index, not a tag cloud. Two fixed columns read
   down then across (--rows per page), a mono number and the label on a hairline; every link is
   on show at every width, nothing hides in a sideways scroll. */
.lr-otp { margin-top: 8px; width: 100%; max-width: 38rem; }
.lr-otp__title { font-family: var(--lr-font-mono); font-size: .75rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-ink-2); margin-bottom: 8px; }
.lr-otp__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 4), auto); grid-auto-flow: column;
  column-gap: clamp(16px, 3vw, 32px); border-top: 1px solid rgba(17, 18, 22, .16);
}
.lr-otp__list li { display: flex; min-width: 0; }
.lr-otp__list a {
  flex: 1; display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 11px 0;
  border-bottom: 1px solid rgba(17, 18, 22, .16);
  font-size: .9375rem; font-weight: 500; line-height: 1.35; text-decoration: none; color: var(--lr-ink);
}
.lr-otp__list a:hover { text-decoration: underline; text-decoration-color: var(--lr-link-line); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.lr-otp__n { flex: none; min-width: 2ch; font-family: var(--lr-font-mono); font-size: .75rem; color: var(--lr-ink-2); }
@media (max-width: 599px) {
  .lr-otp__list a { padding: 10px 0; font-size: .875rem; gap: 8px; }
}

.lr-hww { display: grid; gap: 0; }
.lr-rail { display: none; }
@media (min-width: 1200px) {
  .lr-hww { grid-template-columns: 220px minmax(0, 1fr); column-gap: clamp(64px, 8vw, 128px); }
  .lr-rail { display: block; }
  .lr-rail__inner { position: sticky; top: 96px; padding-top: var(--lr-section-y); }
  .lr-rail__title { font-family: var(--lr-font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted); margin-bottom: 12px; }
  .lr-rail__list { display: grid; gap: 2px; border-left: 2px solid var(--lr-line); }
  .lr-rail__list a { display: flex; gap: 10px; align-items: baseline; padding: 8px 14px; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; font-size: .9375rem; color: var(--lr-ink-2); }
  .lr-rail__list a:hover { color: var(--lr-ink); }
  .lr-rail__list a[aria-current="location"] { border-left-color: var(--lr-brand); color: var(--lr-ink); font-weight: 600; }
}
/* one measure for every block in the column, so the right edge never jumps;
   below 1200 px there is no rail, so the column sits in the middle of the page */
.lr-hww__body { min-width: 0; max-width: 46rem; }
@media (max-width: 1199px) { .lr-hww__body { margin-inline: auto; } }
.lr-hsec { padding-block: var(--lr-section-y) 0; scroll-margin-top: 80px; }
.lr-doc--inline { display: inline-flex; vertical-align: middle; margin-left: 6px; padding-block: 3px; }
.lr-card--doc { display: grid; gap: 14px; align-content: start; }
.lr-card.lr-card--night { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; margin-top: 28px; background: var(--lr-sand); border-color: transparent; }
.lr-hsec__kicker { display: flex; margin-bottom: 16px; }
.lr-hsec__kicker .lr-step__node { position: static; width: 56px; height: 56px; font-size: 1.375rem; border-width: 2px; }
@media (max-width: 599px) { .lr-hsec__kicker .lr-step__node { width: 48px; height: 48px; font-size: 1.25rem; } }
.lr-hsec .lr-h2 { max-width: 20em; margin-bottom: 22px; }
.lr-prose { display: grid; gap: 16px; }
/* Section head with an exhibit: one object on a sand plinth (the ground of the C renders),
   at the top of the section's right column. Only where the object means this section;
   never a tinted tile inside a tinted room. On phones it stays, at 88 px beside the heading,
   so each section keeps its object without adding height. */
.lr-hsec__head { display: grid; gap: 20px; align-items: start; margin-bottom: 22px; }
.lr-hsec__head .lr-h2 { margin-bottom: 0; }
.lr-hsec__head .lr-lead { margin-top: 16px; margin-bottom: 0; }
.lr-exhibit {
  --plinth: linear-gradient(180deg, #F7F5F1 0%, #ECE8E0 100%);
  position: relative; display: grid; place-items: center; width: clamp(168px, 28vw, 240px); aspect-ratio: 1;
  border-radius: var(--lr-r-xl); overflow: hidden; isolation: isolate;
  background: var(--plinth);
}
.lr-exhibit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); }
/* on the sand gallery the plinth is a shade lighter, so it still reads as its own block */
.lr-ctx-sand .lr-exhibit { --plinth: linear-gradient(180deg, #FFFFFF 0%, #F7F5F1 100%); box-shadow: inset 0 0 0 1px rgba(17, 18, 22, .06); }
.lr-exhibit::after { content: ""; position: absolute; left: 50%; bottom: 10%; width: 54%; height: 12%; background: var(--lr-obj-floor); transform: translateX(-50%); }
.lr-exhibit picture { position: relative; z-index: 1; width: 84%; height: 84%; }
.lr-exhibit img { width: 100%; height: 100%; object-fit: contain; }
/* an opaque C render (light ground) multiplied into the sand plinth: no box, the render's own shadow */
/* the whole render, its ground multiplied into the sand and its edge feathered (as on the case covers),
   so it has no box */
.lr-exhibit--opaque picture { z-index: auto; display: grid; place-items: center; width: 118%; height: auto; } /* no stacking context of its own, so the multiply reaches the plinth */
.lr-exhibit--opaque img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
}
.lr-exhibit--opaque::after { display: none; }
@media (min-width: 600px) {
  .lr-hsec__head { grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; }
  /* a heading with no lead beside its object: a smaller exhibit, the heading on its middle line */
  .lr-hsec__head--short { align-items: center; }
  .lr-hsec__head--short .lr-exhibit { width: clamp(136px, 13vw, 168px); }
}
@media (max-width: 599px) {
  .lr-exhibit, .lr-head--obj .lr-exhibit { width: 88px; border-radius: 18px; }
  .lr-exhibit::after { bottom: 8%; }
  .lr-hsec__head { display: grid; grid-template-columns: minmax(0, 1fr) 88px; column-gap: 14px; align-items: start; }
}
.lr-prose p { color: var(--lr-ink-2); }
.lr-doc {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 6px 12px 6px 8px; border-radius: var(--lr-r-s); background: var(--lr-surface); border: 1px solid var(--lr-line);
  font-family: var(--lr-font-mono); font-size: .8125rem; color: var(--lr-ink);
}
.lr-doc svg { flex: none; }
.lr-pair { display: grid; gap: var(--lr-gap); margin-top: 28px; }
@media (min-width: 860px) { .lr-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the work as plain rows beside the one card that is a deliverable */
.lr-pair--deliver { gap: 28px; align-items: start; }
.lr-pair__plain .lr-card__title { margin-bottom: 12px; }
.lr-pair__plain .lr-ticks li { font-size: 1rem; color: var(--lr-ink-2); }
@media (min-width: 860px) { .lr-pair--deliver { column-gap: 32px; } }
.lr-card__foot { margin-top: 2px; padding-top: 14px; border-top: 1.5px dashed rgba(17, 18, 22, .2); font-weight: 500; }
.lr-card .lr-card__foot { color: var(--lr-ink); }
.lr-card { padding: 24px; border-radius: var(--lr-r-l); background: var(--lr-surface); border: 1px solid var(--lr-line); }
.lr-card__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 8px; }
.lr-card p, .lr-card li { font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); }
.lr-card--peach { background: var(--lr-peach-tint); border-color: transparent; }
.lr-card--sky { background: var(--lr-sky-tint); border-color: transparent; }
.lr-card--mint { background: var(--lr-mint-tint); border-color: transparent; }
/* Unordered statements as a plain list: rows on hairlines with the coral tick on each rule, the same mark as
   .lr-tick. The site has two list marks only: this tick for statements, the check circle for what you get. */
.lr-ticks { list-style: none; padding: 0; display: grid; }
.lr-ticks > li { position: relative; padding: 11px 0 12px; border-top: 1px solid var(--lr-line); line-height: 1.5; text-wrap: pretty; }
.lr-ticks > li:last-child { border-bottom: 1px solid var(--lr-line); }
.lr-ticks > li::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 20px; height: 3px; border-radius: 0 0 2px 2px;
  background: var(--lr-brand);
}
.lr-note-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; padding: 16px 20px; border-radius: var(--lr-r-m); background: var(--lr-sand); font-weight: 500; }
.lr-note-line svg { flex: none; margin-top: 2px; }

.lr-table-wrap { margin-top: 32px; border-radius: var(--lr-r-l); border: 1px solid var(--lr-line); background: var(--lr-surface); overflow-x: auto; }
.lr-table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.lr-table caption { text-align: left; padding: 20px 20px 8px; font-size: 1.1875rem; font-weight: 600; color: var(--lr-ink); }
.lr-table th, .lr-table td { text-align: left; vertical-align: top; padding: 12px 20px; border-top: 1px solid var(--lr-line); }
.lr-table thead th { font-family: var(--lr-font-mono); font-size: .75rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--lr-muted); border-top: 0; }
.lr-table tbody th { font-weight: 600; color: var(--lr-ink); }
.lr-table td { color: var(--lr-ink-2); }
.lr-table td:last-child { font-family: var(--lr-font-mono); font-size: .8125rem; color: var(--lr-ink); white-space: nowrap; }
@media (max-width: 599px) {
  .lr-table th, .lr-table td { padding: 10px 12px; }
  .lr-table caption { padding: 16px 12px 6px; }
  .lr-table td:last-child { white-space: normal; }
}
/* Phones: each row becomes a card. The table keeps explicit ARIA roles in the markup,
   because display:block drops the native table semantics. A cell's data-label becomes
   its mono label; a .lr-table__doc cell becomes a chip under the row's name. */
@media (max-width: 599px) {
  .lr-table--cards, .lr-table--cards tbody, .lr-table--cards tr, .lr-table--cards th, .lr-table--cards td { display: block; width: auto; }
  .lr-table--cards caption { display: block; }
  .lr-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lr-table--cards tbody tr { display: flex; flex-direction: column; padding: 16px 16px 14px; }
  .lr-table--cards tbody tr + tr { border-top: 1px solid var(--lr-line); }
  .lr-table--cards tbody th { width: auto; padding: 0 0 8px; border: 0; font-size: 1.0625rem; }
  .lr-table--cards td, .lr-table--cards td:last-child { padding: 6px 0 0; border: 0; font-family: inherit; font-size: inherit; color: var(--lr-ink-2); white-space: normal; }
  .lr-table--cards td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--lr-font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lr-muted);
  }
  .lr-table--cards td.lr-table__doc { order: -1; align-self: flex-start; margin: 0 0 4px; padding: 3px 10px; border-radius: var(--lr-r-pill); background: var(--lr-sand); font-family: var(--lr-font-mono); font-size: .8125rem; color: var(--lr-ink); }
  .lr-table--cards tbody th { order: -2; }
}
.lr-table-foot { display: grid; gap: 14px; margin-top: 18px; }
.lr-table-foot .lr-small { font-size: .9375rem; color: var(--lr-muted); max-width: 40em; }

/* Response times: plain type on a rule, no tiles; the critical one is the larger figure, nothing else */
.lr-resp { display: grid; gap: 4px var(--lr-gap); margin-top: 28px; }
.lr-resp__tile { display: grid; gap: 8px; align-content: start; padding: 16px 0 18px; border-top: 1px solid var(--lr-line); }
.lr-resp__tile--key { border-top: 2px solid var(--lr-ink); }
.lr-resp__big { font-size: clamp(1.5rem, 1.3rem + .7vw, 1.875rem); font-weight: 600; font-stretch: 104%; line-height: 1.05; letter-spacing: -.02em; }
.lr-resp__tile--key .lr-resp__big { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); letter-spacing: -.03em; }
.lr-resp__tile p:not(.lr-resp__big) { font-size: 1rem; line-height: 1.5; color: var(--lr-ink-2); }
@media (min-width: 600px) {
  .lr-resp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .lr-resp__tile { border-top-width: 2px; border-top-color: var(--lr-ink); }
}
.lr-facts-list { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 28px; }
.lr-facts-list li { padding: 14px 0; border-top: 1px solid var(--lr-line); color: var(--lr-ink-2); }
.lr-facts-list li:last-child { border-bottom: 1px solid var(--lr-line); }

.lr-ownbox { border-radius: var(--lr-r-xl); padding: clamp(24px, 4vw, 48px); }
.lr-ownbox .lr-lead { color: #34363D; max-width: 36em; }
.lr-ownbox .lr-hsec__head { margin-bottom: 28px; }
/* the lead sits under the heading, beside the object, so the head has no empty band (phones: under both) */
.lr-hsec__head--lead .lr-ownbox__lead { margin-top: 18px; }
@media (max-width: 599px) {
  .lr-hsec__head--lead > div:first-child { display: contents; }
  .lr-hsec__head--lead .lr-hsec__kicker { grid-column: 1; grid-row: 1; margin-bottom: 12px; }
  .lr-hsec__head--lead .lr-h2 { grid-column: 1; grid-row: 2; }
  .lr-hsec__head--lead .lr-exhibit { grid-column: 2; grid-row: 1 / span 2; }
  .lr-hsec__head--lead .lr-ownbox__lead { grid-column: 1 / -1; grid-row: 3; margin-top: 2px; }
}
.lr-dl { display: grid; gap: 0; }
.lr-dl__row { display: grid; gap: 4px; padding-block: 16px; border-top: 1px solid rgba(17, 18, 22, .2); }
.lr-dl__row:last-child { border-bottom: 1px solid rgba(17, 18, 22, .2); }
.lr-dl dt { font-weight: 650; }
.lr-dl dd { color: #34363D; }
@media (min-width: 860px) { .lr-dl__row { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } }
.lr-ownbox__close { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.lr-ownbox__close p:first-child { font-weight: 650; font-size: 1.125rem; }
.lr-ownbox .lr-link--arrow { color: #111216; text-decoration-color: #111216; }

/* Title and text on a hairline row (unordered: the coral tick), on the same tracks as "What you own":
   the How we work column's one row language for scenarios and rules */
.lr-rows { display: grid; margin-top: 28px; border-bottom: 1px solid var(--lr-line); }
.lr-row { display: grid; gap: 4px; padding-block: 16px 18px; border-top: 1px solid var(--lr-line); }
.lr-row__k { font-size: 1.0625rem; font-weight: 650; line-height: 1.35; letter-spacing: -.005em; }
.lr-row p { color: var(--lr-ink-2); }
@media (min-width: 860px) { .lr-row { grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; } }
/* the things the client already holds: the check (what you get), in columns, no panel and no pills */
.lr-inventory { margin-top: 32px; }
.lr-inventory__title { font-family: var(--lr-font-mono); font-size: .8125rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted); margin-bottom: 4px; }
.lr-inventory__list { margin-top: 10px; gap: 12px 24px; }
.lr-inventory__list li { font-weight: 500; }
@media (min-width: 600px) { .lr-inventory__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Closing call to action on inner pages: a showroom close ----------
   The page's one coral field. Left: the heading, the lead, the buttons and the reply promise.
   Right: the envelope (obj-envelope: contacting us) standing straight on the coral, with its contact
   shadow and a pool of light under it; no plinth, so there is no tile in the room. On phones the
   envelope sits beside the heading at 108 px and adds no height. */
.lr-close { margin-top: var(--lr-section-y); }
/* after a plain section (its own bottom padding already gives the air): the same 124 px to the coral as on every page */
.lr-close--flush { margin-top: 0; }
.lr-close .lr-room { position: relative; overflow: hidden; isolation: isolate; }
.lr-close .lr-lead { color: var(--lr-ink); max-width: 32em; }
.lr-close__inner::after { content: ""; display: table; clear: both; }
.lr-close__copy > * + * { margin-top: 18px; }
.lr-close__copy .lr-actions { margin-top: 24px; }
.lr-close .lr-reassure { color: var(--lr-ink); }
.lr-close__obj { position: relative; float: right; width: 108px; margin: -10px -8px 6px 14px; }
.lr-close__obj::before { /* light from above, falling on the coral where the envelope stands */
  content: ""; position: absolute; left: -30%; right: -30%; top: 6%; bottom: -26%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
}
.lr-close__obj::after { /* contact shadow */
  content: ""; position: absolute; left: 16%; right: 14%; bottom: 14%; height: 10%; z-index: -1;
  background: radial-gradient(closest-side, rgba(17, 18, 22, .32), rgba(17, 18, 22, 0)); filter: blur(2px);
}
.lr-close__obj img { position: relative; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .lr-close__obj img { transition: transform var(--lr-dur-3) var(--lr-ease); }
  .lr-close .lr-room:hover .lr-close__obj img { transform: translateY(-6px) rotate(-2deg); }
}
@media (min-width: 860px) {
  .lr-close__inner {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px);
    align-items: center; min-height: 300px;
  }
  .lr-close__inner::after { display: none; }
  .lr-close__copy { display: grid; justify-items: start; gap: 18px; }
  .lr-close__copy > * + * { margin-top: 0; }
  .lr-close__copy .lr-actions { margin-top: 8px; }
  .lr-close__obj { float: none; grid-column: 2; grid-row: 1; justify-self: center; width: clamp(220px, 21vw, 280px); margin: 0; }
  .lr-close__copy { grid-column: 1; grid-row: 1; }
}

/* ---------- Unordered lists on hairlines: the coral tick ----------
   Numbers are kept for sequences (ceramic spheres) and navigation indices ("On this page", the rails,
   the showroom 01–07). An unordered row gets no number: a short coral tick on its rule marks it. */
.lr-tick { position: relative; }
.lr-tick::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 20px; height: 3px; border-radius: 0 0 2px 2px;
  background: var(--lr-brand);
}

/* ---------- A page sequence in a navigation index (How we work): the section's sphere colour, then its number ---------- */
.lr-seqdot { display: inline-flex; align-items: center; gap: 7px; font-family: var(--lr-font); font-size: .875rem; font-weight: 600; color: var(--lr-ink); }
.lr-seqdot::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--lr-ink); background: var(--c, var(--lr-brand));
}
.lr-seqdot--mint { --c: var(--lr-mint); }
.lr-seqdot--sky { --c: var(--lr-sky); }
.lr-seqdot--ink { --c: var(--lr-ink); }

/* ==========================================================================
   Founder photo frame (homepage strip, About, Contact card)
   Empty and neutral on a sand plinth until the owner supplies a real photo:
   no silhouette, no illustration, no generated face, only the words "Photo to come".
   ========================================================================== */
.lr-photo {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; isolation: isolate;
  border-radius: var(--lr-r-xl);
  background: linear-gradient(180deg, #F7F5F1 0%, #ECE8E0 100%);
}
.lr-photo::before { /* back-wall light, as on every plinth */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%);
}
.lr-photo__frame {
  position: absolute; inset: 9%; display: grid; place-items: center;
  border: 1.5px dashed rgba(17, 18, 22, .34); border-radius: calc(var(--lr-r-xl) - 10px);
}
/* never smaller than 12 px: in the small frames the two words wrap onto two lines */
.lr-photo__label {
  padding: 0 4px; text-align: center; overflow-wrap: anywhere;
  font-family: var(--lr-font-mono); font-size: .75rem; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--lr-muted);
}

/* ==========================================================================
   Prototype only: lines that wait for the owner's confirmation
   (codes in COPY_V2 §0.6 and COPY_V2_PAGES §0.4–0.5). The public build leaves them out
   (hidden in the markup, fallback wording in place). ?pending=1, the owner's review build,
   shows them with a dashed outline so nobody mistakes them for confirmed facts.
   ========================================================================== */
.lr-pending [data-owner], .lr-pending [data-owner-swap] {
  outline: 1.5px dashed var(--lr-link); outline-offset: 3px;
}
.lr-proto-note__owner { margin-top: 8px; }
/* inside a sentence or a heading, a dashed underline instead, so a wrapped line keeps one clean mark */
.lr-pending span[data-owner], .lr-pending span[data-owner-swap] {
  outline: 0; text-decoration: underline dashed var(--lr-link); text-decoration-thickness: 1.5px; text-underline-offset: .18em;
}

/* ---------- Reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}