/* ZS R3 stream XL: Salong Lumen (Growth hair-salon example). ZS's own code. Owned by builder XL; foundation files are not edited and not loaded here
   (the five pages load only this file + r3x-lumen.js; the old legacy example stylesheets are unlinked from THESE pages only).
   Art direction: a treatment-led salon site. Mist ground, one dark green accent, sans-led (Inter 400, tight) with ONE light serif accent (Cormorant 400) per headline.
   Layout grammar: ONE headline over a large warm hair photograph with the oversized `lumen.` wordmark seated on the photograph's base (home hero, G-58 + W-82a), then the numbered treatment index
   (words that summon a picture: G-94 + W-72 + W-101) beside a sticky aside (picture + booking, W-95), phones: the picture + booking card inline at the start of the block and a bottom dock.
   Moving element: the gallery belt with a visible Pausa (W-82b), a static strip with motion off.
   R3 FIX ROUND (panel 2, VALUE_DECREASE): (1) the fold has one headline, the photograph and the wordmark, the index starts below it; (2) the page descends through FIVE chromatic tones
   (mist, lift, sage, pine, graphite), no blend through neutral grey, light sage never against charcoal; (3) every photograph is re-baked with a WARM grade (exempel/salong-lumen/img/lm-*.webp,
   evidence/r3/final2/XL/lumen_warm.py); (4) static state (html:not(.lib-on)) and phones show the picture + booking card inline, sub pages run full width, chapters carry their own picture;
   (5) the dark active index row shares the content grid's left edge; (6) the first phone screen contains the hair photograph at every phone size.
   Rules followed: no divider lines between sections (space + tone planes blended over 140 / 120 / 96 px), lines only inside content (index rows, FAQ rows); hidden start states hang on
   html.lib-on only; html.no-motion and no-JS show the complete composed page; svh always with a vh fallback; every <img> has width/height; flat colour before any gradient.
   R3 FIX ROUND 2 (panel 3, F-18 / F-19 / F-20 / F-32 / F-34 + the +20 percent height target): the card in the aside keeps hours and location only while the dock shows (<= 1023); the closing wordmark is aligned to
   the content grid on both sides and lives on the start page only (sub pages end in the plain footer); the galleri stagger is a 5 / 7 split; pine-band text one step lighter; the ZS bar motion button has one
   constant name + aria-pressed; sub pages in the static state use a hero row (headline + one aside card) and then the full content width; chapters on small landscape screens and the kontakt spread are two-column.
   Class prefix: lm- (this file only). Legacy names kept on kept chrome: .demo-bar .brand-header .menu-toggle #brand-nav .brand-footer .package-note #booking-demo .skip-link. */

/* ================================ 0. FONTS ================================ */
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* metric-matched fallbacks (values measured by the foundation, copied here): the swap does not move the page */
@font-face { font-family: "Lumen Sans Fb"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); font-weight: 400; size-adjust: 107%; ascent-override: 90.6%; descent-override: 22.4%; line-gap-override: 0%; }
@font-face { font-family: "Lumen Sans Fb"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); font-weight: 500; size-adjust: 108.2%; ascent-override: 89.6%; descent-override: 22.2%; line-gap-override: 0%; }
@font-face { font-family: "Lumen Serif Fb"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"); font-weight: 400 500; size-adjust: 96.2%; ascent-override: 95.6%; descent-override: 30.1%; line-gap-override: 0%; }

/* ================================ 1. TOKENS ================================ */
.lumen {
  --lm-sans: "Inter", "Lumen Sans Fb", system-ui, sans-serif;
  --lm-serif: "Cormorant Garamond", "Lumen Serif Fb", Georgia, serif;
  /* mist (light ground), graphite (dark planes), one dark green. Contrast on the tone beside each (computed): ink 14.4, ink-2 9.5, ink-3 6.0, green 8.1 on mist;
     gi 14.3, gi-2 9.3, gi-3 6.2, lit 9.0 on graphite */
  --lm-mist: #E4E8E5; --lm-lift: #D5DCD7; --lm-card: #EFF2F0;
  --lm-ink: #151819; --lm-ink-2: #2B3133; --lm-ink-3: #3B4245;
  --lm-graphite: #1D2321; --lm-graphite-2: #2A302E;
  --lm-gi: #EDF0EE; --lm-gi-2: #C9D0CD; --lm-gi-3: #B4BDB9;
  --lm-green: #1E4A3B; --lm-green-2: #163A2E; --lm-lit: #9ACAB3;
  /* R3 fix round (XL): the page descends in FIVE chromatic steps (mist, lift, sage, pine, graphite), every step a green-grey of its own, so no blend ever crosses neutral grey
     and light sage never meets charcoal. Computed on each plane: sage ink 8.9 / ink-2 6.6 / ink-3 5.1 / green 5.0; pine gi 5.6 / gi-2 4.7 / lit 4.4 (large only). */
  --lm-sage: #A9BBAF; --lm-pine: #52665B;
  --lm-zs: #111620;                                   /* the ZS ink bar / package note */
  /* semantic roles, re-scoped inside dark planes */
  --fg: var(--lm-ink); --fg-2: var(--lm-ink-2); --fg-3: var(--lm-ink-3);
  --accent: var(--lm-green); --line: rgba(21, 24, 25, .17); --line-2: rgba(21, 24, 25, .30);
  --surface: var(--lm-card); --bg: var(--lm-mist);
  --lm-ease: cubic-bezier(.25, .46, .45, .94);        /* ease-out-quad: row flood .4 s (W-72, henecon) */
  --lm-ease-q: cubic-bezier(.165, .84, .44, 1);       /* outQuart: rises, label roll */
  --lm-gutter: clamp(20px, 5vw, 72px);
  --lm-gap-col: clamp(40px, 5vw, 88px);
  --lm-aside-w: clamp(300px, 28vw, 420px);
  --lm-fade: 96px;
  --lm-sec: clamp(64px, 7.4vw, 108px);
  --lm-h1: clamp(3.2rem, 1.2rem + 6.6vw, 8.25rem);     /* home: 51 -> 132 */
  --lm-h1s: clamp(2.85rem, 1.3rem + 5.4vw, 6.75rem);   /* sub pages: 46 -> 108 */
  --lm-h2: clamp(2.1rem, 1.35rem + 2.5vw, 4rem);       /* 34 -> 64 */
  --lm-word: clamp(2.5rem, 1.5rem + 3.4vw, 5.25rem);   /* index words: 40 -> 84 */
  color-scheme: light;
}
@media (min-width: 768px) { .lumen { --lm-fade: 120px; } }
@media (min-width: 1100px) { .lumen { --lm-fade: 140px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
html.no-motion { scroll-behavior: auto; }
@media (max-width: 1023px) { html { scroll-padding-bottom: 96px; } }                /* the phone dock never covers a keyboard-focused or anchored element */
body.lumen { margin: 0; background: var(--lm-mist); color: var(--fg); font: 400 17px/1.65 var(--lm-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
.lumen img, .lumen svg { display: block; max-width: 100%; }
.lumen img { height: auto; }
.lumen :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; padding: 0; }
.lumen :where(ol, ul) { list-style: none; }
.lumen :where(a) { color: inherit; }
.lumen :where(button) { font: inherit; color: inherit; }
.lumen :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }   /* RC3 BTN-04: no border-radius here (it turned the pill buttons into rectangles on keyboard focus) */
.lumen ::selection { background: var(--lm-green); color: #F1F5F2; }
.lm-nb { white-space: nowrap; }                                       /* an opening-hours range never breaks after its en dash ("10–" / "18") */
.lm-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================================ 2. CHROME (ZS ink bar, header, skip link) ================================ */
.skip-link { position: fixed; top: -100px; transform: translateY(-100%); left: 12px; z-index: 99; padding: 14px 18px; background: #fff; color: #111; font: 500 15px/1 var(--lm-sans); border-radius: 4px; }
.skip-link:focus { top: 12px; transform: none; }
.demo-bar { position: relative; z-index: 40; background: var(--lm-zs); color: #F3F0EA; font: 500 14px/1.4 var(--lm-sans); letter-spacing: .02em; display: flex; align-items: center; gap: 22px; padding: 4px var(--lm-gutter); min-height: 52px; }
.demo-bar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.demo-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.demo-bar > span { margin-right: auto; }
.demo-bar b { font-weight: 600; color: #D7C29E; margin-left: 4px; }
.demo-bar [hidden] { display: none !important; }
.demo-bar :focus-visible { outline-color: #D7C29E; }
/* P4-064 / 075 / 089 / 096 (round 3b-2): THE demo-bar motion control, the one component all six examples share (XM, evidence/r3/final8/XM/demo_bar_component.css + .js, proven in Smula).
   ONE constant visible label and accessible name ("Pausa rörelse"); aria-pressed="true" = motion is off; the state is DRAWN as a switch (aria-hidden track + knob, thrown = off), never as the
   word ": på"; the whole pill is the 44 x 44 px hit area at every width; with the system's reduced motion the same switch is shown thrown, the button is disabled and the existing words
   "Minskad rörelse" are its title and description. Below 1100 px the bar is set in 14 px. */
.zs-mo { --mo-fg: #F3F0EA; --mo-ink: #0C0C0F; --mo-gold: #D7C29E;
  display: inline-flex; align-items: center; gap: 11px; min-height: 44px; min-width: 44px; padding: 0 14px 0 16px; margin: 0; font: inherit; line-height: 1.2; color: inherit; white-space: nowrap; cursor: pointer;
  background: transparent; border: 1px solid rgba(243, 240, 234, .38); border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.zs-mo:hover { background: rgba(243, 240, 234, .1); }
.zs-mo[aria-pressed="true"] { background: rgba(243, 240, 234, .12); border-color: rgba(243, 240, 234, .62); }
.zs-mo:disabled { opacity: .72; cursor: default; }
.zs-mo[hidden] { display: none; }
.zs-mo:focus-visible { outline: 3px solid var(--mo-fg); outline-offset: 0; border-radius: 999px; }
.zs-mo__sw { position: relative; flex: none; width: 32px; height: 18px; border-radius: 999px; border: 1.5px solid rgba(243, 240, 234, .66); background: transparent; transition: background-color .2s, border-color .2s; }
.zs-mo__sw i { position: absolute; top: 50%; left: 2.5px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--mo-fg); transition: transform .22s cubic-bezier(.25, .46, .45, .94), background-color .2s; }
.zs-mo[aria-pressed="true"] .zs-mo__sw { background: var(--mo-gold); border-color: var(--mo-gold); }
.zs-mo[aria-pressed="true"] .zs-mo__sw i { transform: translateX(14px); background: var(--mo-ink); }
.no-motion .zs-mo__sw, .no-motion .zs-mo__sw i { transition: none; }
@media (prefers-reduced-motion: reduce) { .zs-mo__sw, .zs-mo__sw i { transition: none; } }
@media (max-width: 1099px) { .demo-bar { font-size: 14px; letter-spacing: .005em; gap: 14px; } }
@media (max-width: 719px) {
  .demo-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 4px var(--lm-gutter); line-height: 1.3; min-height: 0; }
  .demo-bar > a:first-child { grid-row: 1; grid-column: 1; }
  .demo-bar > span { grid-row: 1; grid-column: 2; margin: 0; text-align: right; align-self: center; }
  .demo-bar > .zs-mo { grid-row: 2; grid-column: 1; justify-self: start; align-self: center; }
  .demo-bar > a:last-child { grid-row: 2; grid-column: 2; justify-self: end; }
}

.lm-head { position: relative; z-index: 30; background: var(--lm-mist); }
.lm-head__in { max-width: 1560px; margin-inline: auto; padding: 22px var(--lm-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lm-mark { font: 500 clamp(1.7rem, 1.4rem + 1vw, 2.15rem)/1 var(--lm-sans); letter-spacing: -.055em; text-decoration: none; color: var(--fg); display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }
.lm-mark i { font-style: normal; color: var(--accent); }
.lm-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.lm-nav a { font: 400 15px/1 var(--lm-sans); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; position: relative; color: var(--fg-2); }
.lm-nav a:hover { color: var(--fg); }
.lm-nav a[aria-current="page"] { color: var(--fg); }
.lm-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px; background: var(--accent); }
.lm-nav a:last-child { border: 1.5px solid var(--fg); border-radius: 999px; padding: 0 22px; color: var(--fg); min-height: 44px; }
.lm-nav a:last-child[aria-current="page"]::after { display: none; }
@media (hover: hover) { .lm-nav a:last-child:hover { background: var(--fg); color: var(--lm-mist); } }
.menu-toggle { display: none; font: 500 15px/1 var(--lm-sans); background: transparent; border: 0; padding: 0; min-height: 44px; min-width: 44px; align-items: center; gap: 10px; cursor: pointer; color: var(--fg); }
.menu-toggle span { font-size: 20px; line-height: 1; transition: transform .3s var(--lm-ease-q); }
.menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
@media (max-width: 719px) {
  .menu-toggle { display: inline-flex; }
  .js .lm-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--lm-mist); padding: 4px var(--lm-gutter) 28px; z-index: 5; box-shadow: 0 28px 40px -18px rgba(21, 24, 25, .35); counter-reset: lmnav; }
  .js .lm-nav.open { display: flex; }
  .js .lm-nav a { counter-increment: lmnav; font-size: min(clamp(1.9rem, 1.2rem + 3vw, 2.6rem), calc((100vw - 90px) / 6.4)); letter-spacing: -.04em; min-height: 62px; color: var(--fg); justify-content: flex-start; align-self: flex-start; gap: 16px; }
  .js .lm-nav a::before { content: "0" counter(lmnav); font: 500 13px/1 var(--lm-sans); letter-spacing: .02em; color: var(--accent); min-width: 22px; }
  .js .lm-nav a:last-child { border: 0; border-radius: 0; padding: 0; margin-top: 8px; }
  .js .lm-nav a[aria-current="page"] { padding-block: 14px; }   /* b6 fix64: the mark sits under the LAST line of a wrapped label */
  .js .lm-nav a[aria-current="page"]::after { left: 38px; right: 0; width: auto; bottom: 14px; }   /* b6 MN-07: the mark underlines the whole label (the link now hugs its content), not a 28 px dash */
  html:not(.js) .menu-toggle { display: none; }                         /* no-JS: the links stay visible on a row of their own */
  html:not(.js) .lm-head__in { flex-wrap: wrap; }
  html:not(.js) .lm-nav { flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-start; gap: 0 20px; }
  html:not(.js) .lm-nav a:last-child { border: 0; padding: 0; text-decoration: underline; text-underline-offset: .3em; }
}
/* P4-103: on a landscape phone the open menu is two columns, so all four links (and the last one, "Boka & hitta hit") sit above the slim dock without scrolling the page */
@media (max-width: 719px) and (max-height: 520px) and (orientation: landscape) {
  .js .lm-nav.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding-bottom: 16px; }
  .js .lm-nav a { min-height: 52px; font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
  .js .lm-nav a:last-child { margin-top: 0; }
}

/* ================================ 3. TYPE ================================ */
.lm-kick { font: 500 14px/1.3 var(--lm-sans); letter-spacing: .005em; color: var(--fg-2); display: block; }
.lm-kick .lm-n { color: var(--accent); font-feature-settings: "tnum" 1; }
.lm-h1, .lm-h2, .lm-h3 { font-family: var(--lm-sans); font-weight: 400; color: var(--fg); text-wrap: balance; }
.lm-h1 { font-size: var(--lm-h1s); font-size: min(var(--lm-h1s), 16vh); font-size: min(var(--lm-h1s), 16svh); line-height: .96; letter-spacing: -.05em; }   /* short windows keep the ask in the fold */
.lm-h1--home { font-size: var(--lm-h1); font-size: min(var(--lm-h1), 17vh); font-size: min(var(--lm-h1), 17svh); line-height: .94; letter-spacing: -.055em; }
.lm-h2 { font-size: var(--lm-h2); line-height: 1.02; letter-spacing: -.04em; }
.lm-h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; letter-spacing: -.03em; }
.lm-acc { font-family: var(--lm-serif); font-weight: 400; font-style: normal; color: var(--accent); font-size: 1.12em; letter-spacing: -.02em; line-height: .9; }
.lm-lead { font-size: clamp(1.125rem, 1.02rem + .45vw, 1.35rem); line-height: 1.55; color: var(--fg-2); max-width: 36em; text-wrap: pretty; }
.lm-p { color: var(--fg-2); max-width: 38em; text-wrap: pretty; }
.lm-small { font-size: 14px; line-height: 1.5; color: var(--fg-3); }

/* ================================ 4. BUTTONS AND LINKS ================================ */
.lm-btn { --b-bg: transparent; --b-fg: var(--fg); --b-bd: var(--fg); --b-fill: var(--fg); --b-hov: var(--bg);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .85em; min-height: 52px; padding: 0 1.55em;
  border: 1.5px solid var(--b-bd); border-radius: 999px; background: var(--b-bg); color: var(--b-fg); font: 500 16px/1.15 var(--lm-sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; text-align: center;
  transition: color .3s var(--lm-ease), border-color .3s; }
.lm-btn::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--b-fill); transform: translateY(101%); transition: transform .42s var(--lm-ease); z-index: -1; }
.lm-btn .lm-arr { display: inline-block; font-size: 1.05em; line-height: 1; transition: transform .3s var(--lm-ease-q); }
.lm-btn--solid { --b-bg: var(--lm-green); --b-fg: #F1F5F2; --b-bd: var(--lm-green); --b-fill: var(--lm-ink); --b-hov: #F1F5F2; }
.lm-btn--block { display: flex; width: 100%; }
.lm-btn--lg { min-height: 64px; font-size: 18px; padding: 0 2em; }
@media (hover: hover) {
  .lm-btn:hover { color: var(--b-hov); border-color: var(--b-fill); }
  .lm-btn:hover::before { transform: none; }
  .lm-btn:hover .lm-arr { transform: translate(3px, -3px); }
}
.lm-btn:active { transform: scale(.985); }
.lm-link { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font: 500 15px/1.2 var(--lm-sans); color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; text-decoration-color: var(--line-2); transition: text-decoration-color .3s, color .3s; }
.lm-link .lm-arr { display: inline-block; transition: transform .3s var(--lm-ease-q); }
@media (hover: hover) { .lm-link:hover { text-decoration-color: currentColor; } .lm-link:hover .lm-arr { transform: translate(3px, -3px); } }
.lm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

/* ================================ 5. TONE PLANES (blended, no lines) ================================ */
/* A plane is a tone region. It blends INTO itself from the plane above across its own top padding (the blend lives in the padding, so it never lies over text).
   Flat colour first (works everywhere); the eased oklab blend is an enhancement. --lm-from = the tone of the plane above (set per plane, explicitly).
   R3 fix round: the page DESCENDS through five chromatic tones (mist, lift, sage, pine, graphite). Every join is between neighbours, and the one big step (sage -> pine) passes
   through --lm-mid, a tinted midpoint, so a blend never goes through neutral grey ("dirty smoke") and light sage never meets charcoal. */
.lm-plane { --lm-bg: var(--lm-mist); --lm-from: var(--lm-mist); position: relative; background-color: var(--lm-bg); }
.lm-plane--lift { --lm-bg: var(--lm-lift); }
.lm-plane--sage { --lm-bg: var(--lm-sage); --fg-2: var(--lm-ink-2); --fg-3: #343B3E; --accent: #173F31; --line: rgba(21, 24, 25, .22); --line-2: rgba(21, 24, 25, .42); --surface: #BCCBC1; --bg: var(--lm-sage); }
.lm-plane--pine { --lm-bg: var(--lm-pine);
  /* F-32 (panel 3): the 14 px lines on pine measured 4.45-4.49 in rendered pixels (flat 4.57). One step lighter: text 5.2 : 1, accent 5.1 : 1 on #52665B (flat), 5.0+ rendered */
  --fg: var(--lm-gi); --fg-2: #E9EDEA; --fg-3: #E9EDEA; --accent: #D9EFE4; --line: rgba(237, 240, 238, .24); --line-2: rgba(237, 240, 238, .42); --surface: #5E7468; --bg: var(--lm-pine); color: var(--fg); }
.lm-plane--graphite { --lm-bg: var(--lm-graphite);
  --fg: var(--lm-gi); --fg-2: var(--lm-gi-2); --fg-3: var(--lm-gi-3); --accent: var(--lm-lit); --line: rgba(237, 240, 238, .17); --line-2: rgba(237, 240, 238, .34); --surface: var(--lm-graphite-2); --bg: var(--lm-graphite); color: var(--fg); }
.lm-from-mist { --lm-from: var(--lm-mist); } .lm-from-lift { --lm-from: var(--lm-lift); } .lm-from-sage { --lm-from: var(--lm-sage); } .lm-from-pine { --lm-from: var(--lm-pine); } .lm-from-graphite { --lm-from: var(--lm-graphite); }
.lm-fade { --lm-mid: color-mix(in srgb, var(--lm-bg) 50%, var(--lm-from)); padding-top: var(--lm-fade); background-image: linear-gradient(to bottom, var(--lm-from) 0, var(--lm-bg) var(--lm-fade)); background-repeat: no-repeat; }
.lm-plane--pine.lm-from-sage { --lm-mid: #7D9487; }                       /* the tinted midpoint of the one big step: a living sage-green, never grey */
.lm-plane--pine.lm-from-mist, .lm-plane--pine.lm-from-lift { --lm-mid: #97AC9F; }
@supports (background-image: linear-gradient(in oklab to bottom, red, blue)) and (color: color-mix(in oklab, red 50%, blue)) {
  .lm-fade { --lm-mid: color-mix(in oklab, var(--lm-bg) 50%, var(--lm-from));
    background-image: linear-gradient(in oklab to bottom, var(--lm-from) 0,
    color-mix(in oklab, var(--lm-mid) 8%, var(--lm-from)) calc(var(--lm-fade) * .08), color-mix(in oklab, var(--lm-mid) 28%, var(--lm-from)) calc(var(--lm-fade) * .16),
    color-mix(in oklab, var(--lm-mid) 62%, var(--lm-from)) calc(var(--lm-fade) * .3), var(--lm-mid) calc(var(--lm-fade) * .5),
    color-mix(in oklab, var(--lm-bg) 62%, var(--lm-mid)) calc(var(--lm-fade) * .7), color-mix(in oklab, var(--lm-bg) 88%, var(--lm-mid)) calc(var(--lm-fade) * .84),
    color-mix(in oklab, var(--lm-bg) 97%, var(--lm-mid)) calc(var(--lm-fade) * .94), var(--lm-bg) var(--lm-fade)); }
  .lm-plane--pine.lm-from-sage { --lm-mid: #7D9487; }
  .lm-plane--pine.lm-from-mist, .lm-plane--pine.lm-from-lift { --lm-mid: #97AC9F; }
}
.lm-in { max-width: 1560px; margin-inline: auto; padding-inline: var(--lm-gutter); }
.lm-sec { padding-top: var(--lm-sec); }
.lm-sec--first { padding-top: clamp(24px, 3.6vw, 48px); }

/* ================================ 6. WRAP: main column + sticky aside (sub pages) and the services grid (home) ================================ */
.lm-wrap > .lm-in { display: block; }
.lm-aside { display: grid; gap: 12px; }
@media (min-width: 1024px) {
  .lm-wrap > .lm-in, .lm-svc__in { display: grid; grid-template-columns: minmax(0, 1fr) var(--lm-aside-w); column-gap: var(--lm-gap-col); align-items: start; }
  .lm-aside { position: sticky; top: 24px; z-index: 3; align-self: start; }
  .lm-wrap > .lm-in > .lm-aside { margin-top: clamp(24px, 3.6vw, 48px); }
  .lm-main, .lm-svc__main { min-width: 0; }
}
/* phones and tablets: the picture and the booking card are INLINE at the start of the block (a compact card: picture left, the ask right), never hidden */
@media (max-width: 1023px) {
  .lm-svc__in { display: grid; gap: 0; }
  .lm-svc__main { display: contents; }
  .lm-svc__main > .lm-idx-head { order: 1; }
  .lm-svc__in > .lm-aside { order: 2; margin-bottom: clamp(24px, 4vw, 36px); }
  .lm-svc__main > .lm-idx { order: 3; }
  .lm-aside { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 0; align-items: stretch; background: var(--lm-card); border-radius: 2px; overflow: hidden; }
  .lm-aside .lm-stage { min-width: 0; }
  .lm-aside .lm-stage__frame { aspect-ratio: auto; height: 100%; min-height: 188px; max-height: none; border-radius: 0; }
  .lm-aside .lm-stage__cap { display: none; }
  .lm-aside .lm-book { border-radius: 0; align-content: center; padding: 18px 18px 16px; }
  /* F-18 (panel 3): the bottom dock (same breakpoint) already carries "Boka en tid" on every phone and small tablet, so the card keeps only hours and location (no second identical button in one screen) */
  .lm-aside .lm-book > .lm-btn { display: none; }
  .lm-aside .lm-hours { gap: 12px; font-size: 15px; }
  .lm-aside .lm-stage__frame > img:not(:first-child) { display: none; }
  .lm-aside .lm-stage__frame > img:first-child { opacity: 1 !important; transform: none !important; }
  /* home: the stage follows the index only from 1024 up; below that the card carries its own phone picture (the .lm-stage__ph image with its own text alternative) */
  .lm-aside .lm-stage__frame > .lm-stage__ph ~ img, .lm-aside .lm-stage__ph { transform: none; }
  .lm-aside[data-home] .lm-stage__frame > img { display: none; }
  .lm-aside[data-home] .lm-stage__frame > img.lm-stage__ph { display: block; opacity: 1 !important; }
  /* sub pages: the headline block first, the inline picture + booking card second, the rest of the page after them */
  .lm-wrap > .lm-in { display: grid; }
  .lm-wrap > .lm-in > .lm-main { display: contents; }
  .lm-wrap > .lm-in > .lm-main > :first-child { order: 1; }
  .lm-wrap > .lm-in > .lm-main > :not(:first-child) { order: 3; }
  .lm-wrap > .lm-in > .lm-aside { order: 2; margin-bottom: clamp(24px, 4vw, 36px); }
}
@media (max-width: 479px) { .lm-aside { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); } .lm-aside .lm-book { padding: 14px 14px 12px; gap: 12px; } .lm-aside .lm-hours div { grid-template-columns: 1fr; gap: 0; } }
.lm-stage { position: relative; margin: 0; }
.lm-stage__frame { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: calc(100vh - 330px); max-height: calc(100svh - 330px); min-height: 190px; overflow: hidden; background: var(--lm-graphite); border-radius: 2px; }
.lm-stage__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.045); transition: opacity .5s var(--lm-ease), transform 1.25s var(--lm-ease); }
.lm-stage__frame img.is-on { opacity: 1; transform: none; }
.lm-stage__ph { display: none; }
.lm-stage__cap { display: flex; gap: .7em; align-items: baseline; margin-top: 10px; font: 400 14px/1.4 var(--lm-sans); color: var(--fg-2); }
.lm-stage__cap span:first-child { color: var(--accent); font-weight: 500; }
.lm-book { background: var(--lm-card); border-radius: 2px; padding: 20px 22px 18px; display: grid; gap: 14px; color: var(--lm-ink); --fg: var(--lm-ink); --fg-3: var(--lm-ink-3); --accent: var(--lm-green); }
.lm-hours { display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.lm-hours div { display: grid; grid-template-columns: 6.2em 1fr; gap: 10px; }
.lm-hours dt { color: var(--fg-3); }
.lm-hours dd { color: var(--fg); }

/* ================================ 7. HOME HERO: one headline, a large sharp hair photograph, the oversized `lumen.` wordmark seated on its base ================================ */
.lm-hero { --lm-top-h: 138px; --lm-ph: clamp(500px, calc(100vh - var(--lm-top-h) - 150px), 700px); --lm-ph: clamp(500px, calc(100svh - var(--lm-top-h) - 150px), 700px);
  --lm-pw: clamp(250px, min(calc(var(--lm-ph) * .86), 42vw), 640px); padding-bottom: clamp(24px, 3vw, 44px); }
.lm-hero__in { display: grid; gap: 0; }
.lm-hero__copy { display: grid; align-content: start; justify-items: start; }
.lm-hero .lm-kick { margin-bottom: clamp(16px, 2vw, 26px); }
.lm-hero .lm-lead { margin-top: clamp(20px, 2.4vw, 30px); }
.lm-hero__cta { margin-top: clamp(24px, 2.6vw, 36px); }
.lm-hero__stage { position: relative; margin-top: clamp(22px, 4vw, 36px); }
.lm-hero__fig { margin: 0; position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; background: var(--lm-lift); border-radius: 2px; }
.lm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.lm-hero__mark { position: relative; z-index: 2; width: 78%; margin: -8.5% 0 0 auto; color: var(--lm-ink); line-height: 0; pointer-events: none; user-select: none; }
.lm-hero__mark svg { width: 100%; height: auto; overflow: visible; }
.lm-hero__mark text { fill: currentColor; font-family: var(--lm-sans); font-weight: 500; letter-spacing: -.055em; }
.lm-hero__mark .lm-dot { fill: var(--lm-green); }
.lm-hero__sig { display: none; }
/* phones: kicker + headline, THEN the photograph with the wordmark seated on it, then the lead and the ask: a hair photograph is inside the very first screen at every phone size */
@media (max-width: 719px) {
  .lm-hero__in { justify-items: start; }
  .lm-hero__copy { display: contents; }
  .lm-hero .lm-kick { order: 1; margin-bottom: clamp(12px, 3vw, 20px); }
  .lm-hero .lm-h1 { order: 2; }
  .lm-hero__stage { order: 3; width: 100%; margin-top: clamp(16px, 3.4vw, 28px); }
  .lm-hero .lm-lead { order: 4; margin-top: clamp(14px, 3vw, 22px); }
  .lm-hero .lm-hero__cta { order: 5; }
  .lm-hero__fig { aspect-ratio: 5 / 4; }
}
@media (max-width: 479px) { .lm-hero__fig { aspect-ratio: 3 / 2; } .lm-hero__img { object-position: 50% 70%; } }
@media (min-width: 600px) and (max-width: 719px) { .lm-hero__stage { width: min(100%, 560px); justify-self: end; } }
/* P4-103: short portrait phones (about 560-700 px high): the bar, header, headline and photograph are set a little tighter and the photograph is 2 : 1, so the oversized `lumen.` wordmark seated on its base
   ends above the fixed booking dock (it was half hidden by it at 320 x 568) */
@media (max-width: 719px) and (max-height: 700px) and (orientation: portrait) {
  .lm-head__in { padding-block: 6px; }
  .lm-hero .lm-kick { margin-bottom: 8px; }
  .lm-hero .lm-h1 { font-size: min(var(--lm-h1), 8.4vh); font-size: min(var(--lm-h1), 8.4svh); }
  .lm-hero__stage { margin-top: 12px; }
  .lm-hero__fig { aspect-ratio: 2 / 1; }
  .lm-hero__mark { margin-top: -9.5%; }
}
/* from 720 up (tablets, laptops, desktops): copy left, the photograph right, the wordmark seated on the photograph's base (~45 % of its letter height overlaps the picture, the rest hangs below it;
   whole letters, never sliced; no transform, because the reveal owns it) */
@media (min-width: 720px) {
  .lm-hero { padding-top: clamp(14px, 2.4vh, 28px); padding-bottom: 0; }
  .lm-hero__in { grid-template-columns: minmax(0, 1fr) var(--lm-pw); column-gap: clamp(28px, 4vw, 72px); align-items: stretch; }
  .lm-hero__copy { padding-top: clamp(22px, 5.4vh, 64px); grid-template-rows: repeat(4, auto) 1fr; }
  .lm-hero__copy .lm-lead { max-width: 25em; }
  .lm-hero__stage { margin-top: 0; margin-bottom: calc(var(--lm-pw) * .175); }
  .lm-hero__fig { aspect-ratio: 43 / 50; }
  .lm-hero__mark { position: absolute; right: 0; bottom: calc(var(--lm-pw) * -.137); width: 108%; margin: 0; }
  .lm-hero__sig { display: flex; gap: clamp(18px, 2.4vw, 38px); align-self: end; margin: 0; padding-top: 28px; font: 500 13px/1 var(--lm-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
}
@media (min-width: 1024px) {
  .lm-hero__mark { width: 136%; }
}
/* short laptop windows (about 600-700 px high): the photograph still fills the fold (the wordmark may hang below it), and the headline, lead and ask stay inside it */
@media (min-width: 1024px) and (max-height: 700px) {
  .lm-hero .lm-h1 { font-size: min(var(--lm-h1), 14.5vh); font-size: min(var(--lm-h1), 14.5svh); }
  .lm-hero__copy { padding-top: 6px; }
  .lm-hero .lm-kick { margin-bottom: 12px; }
  .lm-hero .lm-lead { margin-top: 14px; }
  .lm-hero__cta { margin-top: 18px; }
}
.lm-top .lm-svc { padding-top: clamp(36px, 5vw, 72px); }
.lm-top { padding-bottom: clamp(24px, 3vw, 44px); }

/* ================================ 8. THE INDEX: numbered treatments, words that summon a picture ================================ */
.lm-idx-sec { padding-top: clamp(20px, 2.6vw, 36px); }
.lm-idx-head { display: grid; gap: 18px; margin-bottom: clamp(24px, 2.8vw, 36px); }
.lm-idx-head .lm-p { max-width: 34em; }
.lm-idx { border-top: 1px solid var(--line-2); }
/* the rows and the dark active band share ONE left and right edge: the content grid (the band no longer starts 15-22 px outside it); the text is inset inside the band */
.lm-idx__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; background-image: linear-gradient(var(--lm-ink), var(--lm-ink)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0%;
  margin-inline: 0; padding-inline: clamp(14px, 1.6vw, 22px); }
.lm-idx.is-live .lm-idx__row { transition: background-size .4s var(--lm-ease), color .4s var(--lm-ease); }
.lm-idx__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); }
.lm-idx__btn { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; width: 100%; text-align: left; background: none; border: 0; padding: clamp(22px, 2.4vw, 32px) 0 6px; cursor: pointer; color: inherit; }
.lm-idx__n { font: 500 14px/1 var(--lm-sans); color: var(--accent); font-feature-settings: "tnum" 1; transition: color .4s; }
.lm-idx__t { font: 400 var(--lm-word)/1.02 var(--lm-sans); letter-spacing: -.045em; display: block; padding-bottom: .04em; }
@media (max-width: 359px) { .lm-idx__t { font-size: min(var(--lm-word), 9.4vw); } }   /* release QA 2026-10-13: at 320 px "Uppsattning" (40 px) ran 36 px into the plus icon */
.lm-idx.is-live .lm-idx__t { transition: transform .4s var(--lm-ease); }
.lm-idx__m { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 4px 18px; flex-wrap: wrap; align-items: baseline; font-size: 15px; line-height: 1.4; color: var(--fg-2); padding: 4px 0 0 calc(2.1rem + 12px); }
.lm-idx__m p:first-child { font-weight: 500; color: var(--fg); font-size: 17px; }
.lm-idx__ic { display: none; position: relative; width: 20px; height: 20px; align-self: center; }
.lm-idx__ic::before, .lm-idx__ic::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 1.5px; background: currentColor; transition: transform .3s var(--lm-ease-q); }
.lm-idx__ic::after { transform: rotate(90deg); }
.lm-idx__panel { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-rows: 1fr; padding-bottom: clamp(22px, 2.4vw, 32px); }
.lm-idx__pi { min-height: 0; overflow: hidden; display: grid; gap: 14px; justify-items: start; padding-left: calc(2.6rem + 12px); }
.lm-idx__pi p { color: var(--fg-2); max-width: 30em; transition: color .4s; }
.lm-idx__pi p.lm-idx__lk { max-width: none; }
.lm-idx__pi img { display: none; }
.lm-idx__row.is-on { background-size: 100% 100%; color: var(--lm-gi); }
.lm-idx__row.is-on .lm-idx__n { color: var(--lm-lit); }
.lm-idx__row.is-on .lm-idx__m, .lm-idx__row.is-on .lm-idx__pi p { color: var(--lm-gi-2); }
.lm-idx__row.is-on .lm-idx__m p:first-child { color: var(--lm-gi); }
.lm-idx__row.is-on .lm-link { color: var(--lm-gi); text-decoration-color: rgba(237, 240, 238, .45); }
.lm-idx__row.is-on .lm-idx__btn:focus-visible, .lm-idx__row.is-on .lm-link:focus-visible { outline-color: var(--lm-lit); }
.lm-idx__row.is-on .lm-idx__t { transform: translateX(.18em); }
.lm-idx__row:not(.is-on) .lm-idx__t { transform: none; }
/* pane mode (>= 1024): descriptions always open, the picture lives in the aside; accordion mode (< 1024): the active row opens its own picture inline */
@media (min-width: 1024px) {
  .lm-idx__btn { padding-top: clamp(20px, 2vw, 28px); padding-bottom: 2px; }
  .lm-idx__m { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; flex-wrap: nowrap; gap: 2px; padding: clamp(20px, 2vw, 28px) 0 0; text-align: right; white-space: nowrap; }
  .lm-idx__panel { grid-row: 2; }
  .lm-idx__pi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; }
  .lm-idx__panel { padding-bottom: clamp(16px, 1.6vw, 24px); }
}
@media (max-width: 1023px) {
  /* P4-148: the accordion collapses ONLY after the script has bound the buttons (it adds .is-bound to the index); with scripts blocked or failed every treatment text and picture stays open and readable,
     and the plus / minus sign (which only means something while the rows collapse) is not drawn. .is-live (added two frames after the first bind) switches the transitions on. */
  .lm-idx.is-bound .lm-idx__ic { display: block; }
  .lm-idx.is-bound .lm-idx__panel { grid-template-rows: 0fr; padding-bottom: 0; }
  .lm-idx.is-live .lm-idx__panel { transition: grid-template-rows .45s var(--lm-ease), padding .45s var(--lm-ease); }
  .lm-idx.is-bound .lm-idx__row.is-on .lm-idx__panel { grid-template-rows: 1fr; padding-bottom: 24px; }
  .lm-idx.is-bound .lm-idx__row.is-on .lm-idx__ic::after { transform: rotate(0); }
  .lm-idx__pi { padding-left: 0; grid-template-columns: minmax(0, 1fr); }
  .lm-idx__pi img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: var(--lm-graphite); }
  .lm-idx__row.is-on .lm-idx__t { transform: none; }
  .lm-idx__btn { grid-template-columns: 2.1rem minmax(0, 1fr) auto; padding-top: 22px; padding-bottom: 8px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .lm-idx__pi { grid-template-columns: minmax(180px, 40%) minmax(0, 1fr); align-items: end; gap: 18px 28px; }
  .lm-idx__pi img { grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
}
html.no-motion .lm-idx__row, html.no-motion .lm-idx__t, html.no-motion .lm-idx__panel { transition: none !important; }
/* without the script the three treatment rows are plain open rows and the FIRST one is marked .is-on in the markup (GM, round 3d): the static page and the reduced-motion page show the same composition (dark band on 01, its picture and caption beside it); the script sets .is-on again with its first bind and moves it */

/* ================================ 9. EDITORIAL (image + words) ================================ */
.lm-ed { display: grid; gap: 28px; padding-bottom: var(--lm-sec); }
.lm-ed__fig img { width: 100%; border-radius: 2px; background: var(--lm-graphite); }
.lm-ed__fig figcaption { margin-top: 10px; font-size: 14px; color: var(--fg-3); }
.lm-ed__txt { display: grid; gap: 18px; align-content: center; }
@media (min-width: 720px) { .lm-ed { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; } }
/* home: the salon picture is a large landscape plate on the lift plane (7 : 5), the words beside it */
.lm-ed-sec { padding-top: calc(var(--lm-fade) + clamp(0px, 1vw, 16px)); }
.lm-ed-sec .lm-ed { padding-bottom: calc(var(--lm-sec) * .9); }
.lm-ed-sec .lm-ed__fig img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 720px) { .lm-ed-sec .lm-ed { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ================================ 10. THE MOVING GALLERY (the Growth moving element) ================================ */
.lm-gal { padding-bottom: clamp(48px, 6vw, 88px); }
.lm-gal.lm-fade { padding-top: calc(var(--lm-fade) + clamp(8px, 2vw, 32px)); }
.lm-gal__head { display: grid; gap: 18px; margin-bottom: clamp(30px, 4vw, 52px); }
.lm-gal__bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.lm-belt { position: relative; --lm-g: clamp(14px, 1.6vw, 24px); --lm-ch: clamp(300px, 27vw, 420px); }
.lm-belt__view { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-inline: var(--lm-gutter); scroll-padding-inline: var(--lm-gutter); }
.lm-belt__view::-webkit-scrollbar { display: none; }
.lm-belt__track { display: flex; gap: var(--lm-g); width: max-content; align-items: flex-end; }
.lm-belt__list { display: flex; gap: var(--lm-g); align-items: flex-end; flex: none; }
.lm-card { flex: none; scroll-snap-align: start; width: calc(var(--lm-ch) * .72); }
.lm-card--tall { width: calc(var(--lm-ch) * .84); }
.lm-card--wide { width: calc(var(--lm-ch) * 1.3); }
.lm-card__img { position: relative; aspect-ratio: var(--ar, 4 / 5); background: var(--lm-graphite-2); border-radius: 2px; overflow: hidden; }
.lm-card__img img { width: 100%; height: 100%; object-fit: cover; }
/* captions move with the belt (fractional translate = soft glyph edges in a still frame): ink on the sage plane (8.9 : 1 flat) and a near-black green numeral (8.8 : 1) keep a still frame above AA (pixel QA measured 4.1-4.9 with the 6.5 : 1 / 5.8 : 1 pair) */
.lm-card figcaption { margin-top: 12px; display: flex; gap: .7em; align-items: baseline; font: 400 15px/1.35 var(--lm-sans); color: var(--fg); }
.lm-card figcaption span { color: #0F2D22; font-weight: 500; font-feature-settings: "tnum" 1; }
/* run mode (JS adds .is-run when motion is allowed): one track, two identical copies, keyframe = -100% - gap so the loop is seamless at every size (W-82b) */
.lm-belt.is-run .lm-belt__view { overflow: hidden; padding-inline: 0; scroll-snap-type: none; }   /* no edge fade while it runs: the belt spans the page, the viewport edge clips it, and a caption crossing a fade lost AA contrast (pixel QA 3.4-4.5 : 1) */
.lm-belt.is-run .lm-belt__track { padding-left: var(--lm-gutter); }
.lm-belt.is-run .lm-belt__list { animation: lm-belt var(--lm-dur, 80s) linear infinite; will-change: transform; }
.lm-belt.is-run.is-paused .lm-belt__list { animation-play-state: paused; }
@keyframes lm-belt { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100% - var(--lm-g)), 0, 0); } }
.lm-belt__clone { display: none; }
.lm-belt.is-run .lm-belt__clone { display: flex; }
.lm-belt:not(.is-run) .lm-belt__view { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.lm-belt:not(.is-run) .lm-belt__view:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lm-ctl { display: inline-flex; align-items: center; gap: 10px; }
.lm-ctl button { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--fg); border-radius: 999px; background: transparent; color: var(--fg); font: 500 15px/1 var(--lm-sans); cursor: pointer; transition: background .3s, color .3s; }
@media (hover: hover) { .lm-ctl button:hover { background: var(--fg); color: var(--bg); } }
/* P4-136: the gallery's own pause control has ONE constant name ("Pausa galleriet", the visible text, so the accessible name equals the label) and aria-pressed carries the state (pressed = the gallery is
   paused), the same contract as R3.toggle / the film controls (R3.toggle itself is not loaded on this self-contained page; the script mirrors it). The state is drawn as an aria-hidden switch (thrown = paused),
   the same idiom as the demo bar, instead of a flipping word or icon. 44 px hit area. */
.lm-ctl .lm-tg { padding: 0 16px 0 18px; gap: 12px; }
.lm-tg__sw { position: relative; flex: none; width: 32px; height: 18px; border-radius: 999px; border: 1.5px solid currentColor; transition: background-color .2s, color .2s; }
.lm-tg__sw i { position: absolute; top: 50%; left: 2.5px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: currentColor; transition: transform .22s var(--lm-ease), background-color .2s; }
.lm-tg[aria-pressed="true"] .lm-tg__sw { background: var(--fg); }
.lm-tg[aria-pressed="true"] .lm-tg__sw i { transform: translateX(14px); background: var(--bg); }
@media (hover: hover) { .lm-ctl .lm-tg:hover .lm-tg__sw { border-color: currentColor; } .lm-ctl .lm-tg[aria-pressed="true"]:hover .lm-tg__sw { background: var(--bg); } .lm-ctl .lm-tg[aria-pressed="true"]:hover .lm-tg__sw i { background: var(--fg); } }
html.no-motion .lm-tg__sw, html.no-motion .lm-tg__sw i { transition: none; }
.lm-ctl .lm-prev, .lm-ctl .lm-next { width: 44px; padding: 0; justify-content: center; }
.lm-ctl .lm-prev[disabled], .lm-ctl .lm-next[disabled] { opacity: .35; cursor: default; }
.lm-ctl [data-lm-step] { display: none; }
.lm-belt-wrap:not(.is-bound) .lm-ctl { display: none; }      /* no controls until the script has bound the gallery (without it the strip simply scrolls) */
.lm-belt-wrap.is-static .lm-ctl [data-lm-step] { display: inline-flex; }
.lm-belt-wrap.is-static .lm-ctl [data-lm-belt-toggle] { display: none; }
.lm-gal__foot { margin-top: clamp(22px, 3vw, 36px); }
html.no-motion .lm-belt .lm-belt__list { animation: none !important; }

/* ================================ 11. FAQ ================================ */
.lm-faq-sec { padding-top: clamp(8px, 2vw, 28px); }
.lm-faq-sec.lm-fade { padding-top: calc(var(--lm-fade) + clamp(8px, 2vw, 28px)); }
.lm-faq { padding-bottom: var(--lm-sec); display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) { .lm-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--lm-gap-col); } .lm-faq__head { position: sticky; top: 32px; align-self: start; } }
.lm-faq__head { display: grid; gap: 16px; align-content: start; }
.lm-faq__list { border-top: 1px solid var(--line-2); }
.lm-faq details { border-bottom: 1px solid var(--line-2); }
.lm-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 14px 0; cursor: pointer; font: 400 clamp(1.15rem, 1.02rem + .6vw, 1.5rem)/1.25 var(--lm-sans); letter-spacing: -.02em; color: var(--fg); }
.lm-faq summary::-webkit-details-marker { display: none; }
.lm-faq summary i { flex: none; position: relative; width: 22px; height: 22px; }
.lm-faq summary i::before, .lm-faq summary i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 1.5px; background: currentColor; transition: transform .3s var(--lm-ease-q); }
.lm-faq summary i::after { transform: rotate(90deg); }
.lm-faq details[open] summary i::after { transform: rotate(0); }
.lm-faq details p { padding: 0 0 26px; max-width: 36em; color: var(--fg-2); }

/* ================================ 12. CLOSING: contact, footer, the giant wordmark ================================ */
.lm-close { padding-bottom: 0; }
.lm-close__grid { display: grid; gap: clamp(32px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); }
@media (min-width: 900px) { .lm-close__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--lm-gap-col); align-items: end; } }
.lm-close__l { display: grid; gap: clamp(18px, 2vw, 26px); align-content: start; }
.lm-close__r { display: grid; gap: 18px; }
.lm-close .lm-hours { font-size: 16px; gap: 14px; }
.lm-close .lm-hours div { grid-template-columns: 7em 1fr; }
.lm-plane--graphite .lm-btn--solid, .lm-plane--pine .lm-btn--solid { --b-bg: var(--lm-lit); --b-fg: var(--lm-ink); --b-bd: var(--lm-lit); --b-fill: var(--lm-gi); --b-hov: var(--lm-ink); }
.lm-close { padding-top: calc(var(--lm-fade) + clamp(12px, 2vw, 32px)); }
.brand-footer { display: grid; gap: clamp(28px, 4vw, 44px); padding-bottom: clamp(36px, 5vw, 60px); }
@media (min-width: 900px) { .brand-footer { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--lm-gap-col) clamp(40px, 5vw, 88px); } .brand-footer .foot-note { grid-column: 1 / -1; } }
.brand-footer .footer-signature { display: grid; gap: 6px; align-content: start; }
.brand-footer .footer-signature p { font: 400 clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)/1.1 var(--lm-serif); color: var(--lm-lit); letter-spacing: -.01em; }
.brand-footer .footer-label { font: 500 14px/1.3 var(--lm-sans); color: var(--fg-3); margin-bottom: 6px; }
.brand-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.brand-footer nav a { font-size: 17px; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; color: var(--fg); }
.brand-footer nav a:hover { color: var(--lm-lit); }
.brand-footer nav a[aria-current="page"] { color: var(--lm-lit); }
.brand-footer .foot-note { font-size: .8125rem; line-height: 1.6; color: var(--fg-2); max-width: 46em; }
/* F-19 (panel 3): the closing wordmark is optically aligned to the content grid on BOTH sides: the stem of the l starts exactly where the footer text starts (the gutter) and the full stop ends
   exactly at the right content edge (the svg viewBox is the measured ink box of the glyphs, x 2.9 .. 995.7), so the 21 px / 24 px page-edge slivers of the full-bleed version are gone */
.lm-giant { display: block; margin: 0; color: var(--lm-gi); line-height: 0; user-select: none; overflow: hidden; text-decoration: none; }
.lm-giant:focus-visible { outline: 2px solid var(--lm-lit); outline-offset: -4px; }
.lm-giant svg { width: 100%; height: auto; }
.lm-giant text { fill: currentColor; font-family: var(--lm-sans); font-weight: 500; }
.lm-giant .lm-dot { fill: var(--lm-lit); }

/* ================================ 13. ZS PACKAGE NOTE (ZS chrome, verbatim text) AND THE BOOKING DIALOG ================================ */
.package-note { background: var(--lm-zs); color: #E6E8EF; padding: calc(var(--lm-fade) * .75) var(--lm-gutter) clamp(52px, 6vw, 76px); display: grid; gap: 28px clamp(40px, 8vw, 120px); font-size: 15px; line-height: 1.6; --lm-bg: var(--lm-zs); --lm-from: var(--lm-graphite); --lm-fade: 96px;
  background-image: linear-gradient(to bottom, var(--lm-graphite) 0, var(--lm-zs) 96px); background-repeat: no-repeat; }
.package-note > div { max-width: 640px; width: 100%; }
@media (min-width: 900px) { .package-note { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: max(var(--lm-gutter), calc((100vw - 1560px) / 2 + var(--lm-gutter))); } }
.package-note .eyebrow { font: 500 13px/1.3 var(--lm-sans); letter-spacing: .13em; text-transform: uppercase; color: #DBBF8C; margin-bottom: 14px; }
.package-note h2 { font: 400 clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem)/1.1 var(--lm-sans); letter-spacing: -.035em; color: #F4F5F8; margin-bottom: 16px; }
.package-note p { color: #BDC5D3; }
.package-note .package-price { font: 600 clamp(2rem, 1.6rem + 1.2vw, 2.75rem)/1 var(--lm-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums proportional-nums; color: #F4F5F8; margin-bottom: 4px; }
.package-note .package-price span { font: 400 14px/1.2 var(--lm-sans); letter-spacing: 0; color: #BDC5D3; margin-left: .4em; }
.package-note .package-price + p { margin-top: 14px; }
.package-note .text-link { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; margin: 8px 22px 0 0; color: #F4F5F8; font-weight: 500; font-size: 15px; text-decoration: underline; text-underline-offset: .32em; text-decoration-thickness: 1px; text-decoration-color: rgba(244, 245, 248, .4); }
.package-note .text-link:hover { text-decoration-color: currentColor; }
.package-note :focus-visible { outline-color: #DBBF8C; }

#booking-demo { border: 0; padding: 0; background: var(--lm-card); color: var(--lm-ink); width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 40px); max-height: calc(100svh - 40px); border-radius: 4px; box-shadow: 0 30px 90px rgba(0, 0, 0, .45); }
#booking-demo::backdrop { background: rgba(14, 17, 19, .72); }
#booking-demo > div { padding: clamp(26px, 5vw, 44px); display: grid; gap: 16px; justify-items: start; }
#booking-demo .eyebrow { font: 500 14px/1.3 var(--lm-sans); color: var(--lm-green); }
#booking-demo h2 { font: 400 clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem)/1.08 var(--lm-sans); letter-spacing: -.04em; text-wrap: balance; }
#booking-demo p { color: var(--lm-ink-2); font-size: 16px; }
#booking-demo .button { display: flex; width: 100%; align-items: center; justify-content: center; gap: .8em; min-height: 54px; border-radius: 999px; background: var(--lm-green); color: #F1F5F2; font: 500 16px/1.15 var(--lm-sans); text-decoration: none; padding: 0 1.5em; margin-top: 6px; }
#booking-demo .button:hover { background: var(--lm-ink); }
#booking-demo .text-link { background: none; border: 0; padding: 0; min-height: 44px; font: 500 15px/1.2 var(--lm-sans); color: var(--lm-ink); text-decoration: underline; text-underline-offset: .32em; text-decoration-thickness: 1px; cursor: pointer; }
#booking-demo :focus-visible { outline: 2px solid var(--lm-green); outline-offset: 3px; }

/* ================================ 14. THE PHONE DOCK (W-95 bottom variant) ================================ */
.lm-dock { display: none; }
@media (max-width: 1023px) {
  .lm-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px var(--lm-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--lm-graphite); color: var(--lm-gi); box-shadow: 0 -14px 28px -10px rgba(21, 24, 25, .32); transition: transform .45s var(--lm-ease-q), opacity .3s, visibility 0s; }
  .lm-dock.is-off { transform: translateY(105%); opacity: 0; visibility: hidden; transition: transform .45s var(--lm-ease-q), opacity .3s, visibility 0s .45s; }
  .lm-dock__t { display: block; font-size: 13px; line-height: 1.35; color: var(--lm-gi-2); min-width: 0; }
  .lm-dock__t b { font-weight: 500; color: var(--lm-gi); font-size: 14px; }
  .lm-dock .lm-btn { --b-bg: var(--lm-lit); --b-fg: var(--lm-ink); --b-bd: var(--lm-lit); --b-fill: var(--lm-gi); --b-hov: var(--lm-ink); min-height: 48px; flex: none; padding: 0 1.4em; }
  .lumen { padding-bottom: 0; }
}
@media (max-width: 359px) { .lm-dock__t { display: none; } .lm-dock .lm-btn { width: 100%; } }
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1023px) { .lm-dock { padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px)); } .lm-dock .lm-btn { min-height: 44px; } }

/* ================================ 15. REVEAL (hidden start states hang on html.lib-on only) ================================ */
/* 3b-2b: the five pages carry no .lm-rise any more (one reveal system per element: the Growth module r3-fx.* with its data-fx tokens, styled for Lumen in r3x-lumen-fx.css); these rules stay as the fallback */
html.lib-on .lm-rise:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.lib-on .lm-rise { transition: opacity .95s var(--lm-ease-q), transform .95s var(--lm-ease-q); transition-delay: calc(var(--i, 0) * 45ms); }
html.lib-on .lm-rise.is-in { opacity: 1; transform: none; }
@keyframes lm-failsafe { to { opacity: 1; transform: none; } }
html.lib-on .lm-rise:not(.is-in) { animation: lm-failsafe .01s linear 2.6s forwards; }
html.no-motion .lm-rise { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
/* P4-135: the hero photograph is the LCP element, so it never has an opacity-0 start state (it used to sit in a .lm-rise figure that stayed invisible until the script added .is-in and then faded for .95 s).
   It is painted at full opacity from the first frame and enters by a transform-only settle (1.06 -> 1, the figure clips it); no script is needed and nothing is hidden if the script fails. */
@keyframes lm-settle { from { transform: scale(1.06); } to { transform: none; } }
html.lib-on .lm-hero__img { animation: lm-settle 1.5s var(--lm-ease-q) both; }
html.no-motion .lm-hero__img { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not(.lib-on) .lm-rise { transition: none; } }
html.no-motion .lm-btn::before, html.no-motion .lm-btn, html.no-motion .lm-btn .lm-arr, html.no-motion .lm-stage__frame img { transition: none !important; }
html.no-motion .lm-stage__frame img { transform: none; }

/* ================================ 16. HOME-SPECIFIC ================================ */
.lm-l { display: block; }
.lm-idx-head { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .lm-idx-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: end; } }
.lm-idx-head__l { display: grid; gap: 14px; }
.lm-idx-head__r { display: grid; gap: 4px; justify-items: start; }
.lm-h2--xl { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6.2rem); line-height: .98; letter-spacing: -.05em; }
.lm-footplane:not(.lm-fade) { padding-top: 0; }
.lm-close__grid--one { grid-template-columns: minmax(0, 1fr); }

/* ================================ 17. SUB PAGES: crumbs, hero, chapters, statement, principles, gallery grid, contact spread ================================ */
.lm-crumbs { display: flex; align-items: center; gap: .6em; font: 400 14px/1.3 var(--lm-sans); color: var(--fg-2); margin-bottom: clamp(10px, 1.4vw, 18px); }
.lm-crumbs a { color: var(--fg-2); text-decoration: none; padding-block: 13px; margin-block: -13px; min-width: 44px; display: inline-flex; align-items: center; }
.lm-crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: .3em; }
.lm-hero2 { display: grid; gap: clamp(16px, 2vw, 26px); padding-bottom: clamp(36px, 4vw, 56px); justify-items: start; }
.lm-hero2 .lm-lead { margin-top: clamp(4px, 1vw, 12px); }
.lm-hero2 .lm-link { margin-top: 4px; }
.lm-label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: clamp(16px, 2vw, 24px); }

/* chapters: one treatment each, the aside picture follows the one in view */
.lm-chaps { margin-top: clamp(8px, 1.4vw, 16px); }
.lm-chap { display: grid; gap: 20px; padding: clamp(32px, 4vw, 52px) 0; border-top: 1px solid var(--line-2); scroll-margin-top: 24px; outline: none; }
.lm-chap:last-child { border-bottom: 1px solid var(--line-2); }
.lm-chap__img { display: block; max-width: 540px; }
.lm-chap__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: var(--lm-graphite); }
.lm-chap__no { font: 400 clamp(4.5rem, 3rem + 5vw, 8.5rem)/.78 var(--lm-serif); color: var(--accent); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.lm-chap__body { display: grid; gap: 14px; align-content: start; justify-items: start; min-width: 0; }
.lm-chap__body .lm-p { max-width: 32em; }
.lm-parts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lm-parts li { font: 500 14px/1 var(--lm-sans); padding: 10px 15px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg-2); }
.lm-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin-top: 10px; }
.lm-facts strong { font: 400 clamp(2.2rem, 1.6rem + 2.1vw, 3.5rem)/1 var(--lm-sans); letter-spacing: -.045em; color: var(--fg); }
.lm-facts span { font-size: 17px; color: var(--fg-2); }
@media (min-width: 1024px) {
  .lm-chap { grid-template-columns: max(clamp(96px, 9vw, 150px), calc(clamp(4.5rem, 3rem + 5vw, 8.5rem) - clamp(16px, 2vw, 32px) + 10px)) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 32px); min-height: min(54vh, 480px); }
  .lm-chap__img { display: none; }
  /* static state: no travelling aside, so every chapter carries its own picture */
  html:not(.lib-on) .lm-chap { grid-template-columns: max(clamp(96px, 9vw, 150px), calc(clamp(4.5rem, 3rem + 5vw, 8.5rem) - clamp(16px, 2vw, 32px) + 10px)) minmax(0, 1fr) minmax(260px, 34%); grid-template-areas: "no body img"; align-items: start; min-height: 0; }
  html:not(.lib-on) .lm-chap__no { grid-area: no; } html:not(.lib-on) .lm-chap__body { grid-area: body; }
  html:not(.lib-on) .lm-chap__img { display: block; grid-area: img; max-width: none; }
  html:not(.lib-on) .lm-chap__img img { aspect-ratio: 4 / 3; }
}
@media (max-width: 1023px) { .lm-chap__img { order: -1; } .lm-chap__no { font-size: clamp(3.4rem, 2.6rem + 3vw, 5rem); } .lm-chap { gap: 14px; } }
.lm-note { display: grid; gap: 18px; justify-items: start; padding: clamp(28px, 3.4vw, 44px) 0 clamp(8px, 2vw, 24px); }
.lm-note p { font: 400 clamp(1.25rem, 1.05rem + .8vw, 1.7rem)/1.3 var(--lm-sans); letter-spacing: -.02em; max-width: 24em; color: var(--fg); text-wrap: balance; }

/* statement (om): scroll-inked, words dim -> ink */
.lm-statement { font: 400 clamp(1.5rem, 1rem + 1.9vw, 2.6rem)/1.14 var(--lm-sans); letter-spacing: -.035em; color: var(--fg); max-width: 21em; text-wrap: balance; margin-top: clamp(4px, 1vw, 14px); }
html.lib-on .lm-statement .lm-w { color: #586064; transition: color .35s var(--lm-ease); }
html.lib-on .lm-statement .lm-w.is-lit { color: var(--lm-ink); }
.lm-plate { margin: 0; }
.lm-plate img { width: 100%; border-radius: 2px; background: var(--lm-graphite); aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) { .lm-plate img { aspect-ratio: 16 / 7; object-position: 50% 62%; } }
.lm-plate figcaption { margin-top: 10px; font-size: 14px; color: var(--fg-3); }
/* P4-066 (om): the salon plate is only sharp when it is not stretched past its 1920 px source on a 2x screen (the static full-width state put it at 1296 css px = 2592 device px). In the static state from 1024 up
   the plate and the hair detail now sit side by side as ONE diptych (8 / 4 columns, plate cropped to 16 : 9 so the floor goes first), 840 css px wide, and the words follow beneath; elsewhere the pair is plain blocks. */
@media (min-width: 1024px) {
  html:not(.lib-on) .lm-wrap .lm-pair { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(14px, 2.2vw, 30px); row-gap: clamp(40px, 4.6vw, 68px); align-items: stretch; padding-top: clamp(28px, 3.4vw, 48px); padding-bottom: calc(var(--lm-sec) * .9); }
  html:not(.lib-on) .lm-wrap .lm-pair .lm-plate { grid-column: 1; grid-row: 1; }
  html:not(.lib-on) .lm-wrap .lm-pair .lm-plate img { aspect-ratio: 16 / 9; object-position: 50% 36%; }
  html:not(.lib-on) .lm-wrap .lm-pair .lm-ed { display: contents; }
  html:not(.lib-on) .lm-wrap .lm-pair .lm-ed__fig { grid-column: 2; grid-row: 1; margin: 0; position: relative; min-height: 0; }
  html:not(.lib-on) .lm-wrap .lm-pair .lm-ed__fig img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }   /* the plate sets the row height, the detail fills it */
  html:not(.lib-on) .lm-wrap .lm-pair .lm-ed__txt { grid-column: 1 / -1; grid-row: 2; max-width: 44em; }
}
.lm-prin { border-top: 1px solid var(--line-2); margin-top: clamp(28px, 3.4vw, 44px); }
.lm-prin article { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(20px, 3vw, 48px); align-items: start; padding: clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--line-2); }
.lm-prin__n { font: 400 min(clamp(3.4rem, 2.2rem + 4vw, 6.5rem), clamp(54.4px, 35.2px + 4vw, 104px))/.8 var(--lm-serif); color: var(--accent); letter-spacing: -.03em; font-variant-numeric: lining-nums; min-width: 1.3em; }
.lm-prin h3 { margin-bottom: 8px; }
.lm-prin p { color: var(--fg-2); max-width: 30em; }
.lm-prin-sec { padding-bottom: var(--lm-sec); }
.lm-prin-sec > .lm-kick { margin-bottom: 14px; }   /* b6 fix64: the kicker had no air above its heading */

/* gallery page: a staggered contact sheet, four figures, captions with numerals */
.lm-gg-plane { padding-top: clamp(0px, 1vw, 12px); }
.lm-gg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px) clamp(14px, 2.2vw, 30px); padding-bottom: clamp(24px, 3vw, 40px); }
.lm-gfig { grid-column: 1 / -1; min-width: 0; }
.lm-gfig img { width: 100%; border-radius: 2px; background: var(--lm-graphite); }
.lm-gfig figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; margin-top: 14px; align-items: baseline; }
.lm-gfig figcaption > span { font: 500 14px/1 var(--lm-sans); color: var(--accent); font-feature-settings: "tnum" 1; }
.lm-gfig h2 { font: 400 clamp(1.4rem, 1.15rem + .9vw, 1.9rem)/1.12 var(--lm-sans); letter-spacing: -.03em; }
.lm-gfig p { grid-column: 2; color: var(--fg-2); font-size: 16px; max-width: 28em; }
/* F-20 (panel 3): the stagger is TIGHT. A 5 / 7 split (portrait left, landscape right at 4 : 3) makes the right plate only ~95 px shorter than the left one at 1440 (was 370 px: a blank field above
   plates 02 and 04), and it hangs from the foot of the row so the offset reads as one deliberate step. Phones above 599 px use the same split in two columns (the blank half-screens of the
   stacked version are gone); below 600 px every plate is full width. */
@media (min-width: 600px) {
  .lm-gg { gap: clamp(32px, 4.4vw, 64px) clamp(14px, 2.2vw, 30px); }
  .lm-gfig--a { grid-column: 1 / span 5; } .lm-gfig--b { grid-column: 6 / span 7; align-self: end; }
  .lm-gfig--c { grid-column: 1 / span 5; } .lm-gfig--d { grid-column: 6 / span 7; align-self: end; }
  .lm-gfig--a img, .lm-gfig--c img { aspect-ratio: 4 / 5; object-fit: cover; }
  .lm-gfig--b img, .lm-gfig--d img { aspect-ratio: 4 / 3; object-fit: cover; }
}
.lm-gal-ctx { color: var(--fg-3); font-size: 14px; max-width: 40em; padding-bottom: var(--lm-sec); }

/* contact spread (W-90): the booking line as the big move, a numbered ledger of the treatments, hours as display type */
.lm-k-hero { display: grid; gap: clamp(28px, 4vw, 48px); padding-bottom: clamp(40px, 5vw, 72px); }
.lm-k-hero__l { display: grid; gap: clamp(16px, 2vw, 26px); justify-items: start; align-content: start; }
.lm-k-hero .lm-actions { margin-top: 6px; }
.lm-k-hero__fig img { width: 100%; border-radius: 2px; background: var(--lm-graphite); }
@media (min-width: 960px) { .lm-k-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--lm-gap-col); align-items: center; } }
.lm-caption { font-size: 14px; color: var(--fg-3); max-width: 34em; }
.lm-k-led { padding-bottom: var(--lm-sec); }
.lm-k-led__list { border-top: 1px solid var(--line-2); margin-top: clamp(18px, 2vw, 26px); }
.lm-k-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding: clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 22px); margin-inline: calc(-1 * clamp(14px, 1.6vw, 22px)); text-decoration: none; position: relative; min-height: 72px; color: var(--fg);
  background-image: linear-gradient(var(--lm-ink), var(--lm-ink)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0%; transition: background-size .4s var(--lm-ease), color .4s var(--lm-ease); }
.lm-k-row::after { content: ""; position: absolute; left: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); bottom: 0; height: 1px; background: var(--line-2); }
.lm-k-row__n { font: 500 14px/1 var(--lm-sans); color: var(--accent); transition: color .4s; }
.lm-k-row__t { font: 400 clamp(1.8rem, 1.3rem + 2.2vw, 3.3rem)/1.05 var(--lm-sans); letter-spacing: -.04em; transition: transform .4s var(--lm-ease); }
.lm-k-row__m { display: grid; justify-items: end; font-size: 15px; line-height: 1.35; color: var(--fg-2); text-align: right; white-space: nowrap; transition: color .4s; }
.lm-k-row__m p:first-child { font-weight: 500; color: var(--fg); font-size: 17px; transition: color .4s; }
@media (hover: hover) {
  .lm-k-row:hover { background-size: 100% 100%; color: var(--lm-gi); }
  .lm-k-row:hover .lm-k-row__n { color: var(--lm-lit); } .lm-k-row:hover .lm-k-row__m, .lm-k-row:hover .lm-k-row__m p:first-child { color: var(--lm-gi); }
  .lm-k-row:hover .lm-k-row__t { transform: translateX(.18em); }
}
.lm-k-row:focus-visible { background-size: 100% 100%; color: var(--lm-gi); outline-color: var(--lm-green); outline-offset: -3px; }
.lm-k-row:focus-visible .lm-k-row__n { color: var(--lm-lit); } .lm-k-row:focus-visible .lm-k-row__m, .lm-k-row:focus-visible .lm-k-row__m p:first-child { color: var(--lm-gi); }
@media (max-width: 559px) { .lm-k-row { grid-template-columns: 2rem minmax(0, 1fr); } .lm-k-row__m { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start; gap: 14px; } }
.lm-k-prac { display: grid; gap: clamp(32px, 4vw, 48px); padding-bottom: var(--lm-sec); }
.lm-k-prac > div:first-child { display: grid; gap: 14px; }   /* b6 fix64: kicker over heading rhythm */
.lm-k-prac__grid { display: grid; gap: clamp(28px, 4vw, 44px); }
@media (min-width: 760px) { .lm-k-prac__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lm-gap-col); } }
.lm-k-prac h3 { font: 500 14px/1.3 var(--lm-sans); color: var(--fg-3); margin-bottom: 10px; }
.lm-k-prac__big { font: 400 min(clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem), calc((100vw - 48px) / 6.9))/1.08 var(--lm-sans); letter-spacing: -.04em; color: var(--fg); text-wrap: balance; }
.lm-k-prac .lm-small { margin-top: 12px; max-width: 28em; }

/* ================================ 17b. FIX ROUND 2 (panel 3): sub-page layout in the static state, chapters on small landscape screens, the kontakt spread ================================ */
/* STATIC STATE (reduced motion, no JS) at >= 1024: nothing travels, so the aside is ONE card beside the headline (photograph 5 : 4 + hours) and the body runs the full content width.
   Before, the sticky aside left the right third of the page empty for 1700 px (om, behandlingar), and at 1024 the squeezed three-column chapter pushed its headline into its own picture. */
@media (min-width: 1024px) {
  html:not(.lib-on) .lm-wrap > .lm-in > .lm-main { display: contents; }
  html:not(.lib-on) .lm-wrap > .lm-in > .lm-main > * { grid-column: 1 / -1; }
  html:not(.lib-on) .lm-wrap > .lm-in > .lm-main > :first-child { grid-column: 1; grid-row: 1; }
  html:not(.lib-on) .lm-wrap > .lm-in > .lm-aside { grid-column: 2; grid-row: 1; position: static; }
  html:not(.lib-on) .lm-wrap { --lm-aside-w: clamp(340px, 35vw, 540px); }
  html:not(.lib-on) .lm-wrap .lm-stage__frame { aspect-ratio: 4 / 3; }
  html:not(.lib-on) .lm-wrap > .lm-in > .lm-main > :nth-child(2) { margin-top: clamp(28px, 3.4vw, 48px); }
  /* full width means wider pictures: keep them in proportion (plate 21 : 8, the portrait beside its words at 4 / 11 columns) so the page does not grow */
  html:not(.lib-on) .lm-wrap .lm-plate img { aspect-ratio: 21 / 8; }
  html:not(.lib-on) .lm-wrap .lm-ed { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  html:not(.lib-on) .lm-wrap .lm-ed__fig img { aspect-ratio: 1 / 1; object-fit: cover; }
}
/* chapters (behandlingar) on landscape phones and small tablets: picture left, numeral + words right (was one tall column: +26 percent over LC-R2 at 844x390) */
@media (min-width: 640px) and (max-width: 1023px) {
  .lm-chap { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: clamp(20px, 3.4vw, 36px); row-gap: 10px; align-items: start; }
  .lm-chap__img { order: 0; max-width: none; grid-column: 1; grid-row: 1 / span 2; }
  .lm-chap__img img { aspect-ratio: 4 / 5; }
  .lm-chap__no { grid-column: 2; grid-row: 1; align-self: end; }
  .lm-chap__body { grid-column: 2; grid-row: 2; }
}
/* kontakt: the headline + picture spread from 720 (was 960), the treatment ledger and the practical block side by side from 1024 (the page was +45 percent over LC-R2 at every width above 767) */
@media (min-width: 720px) {
  .lm-k-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, var(--lm-gap-col)); align-items: center; }
}
.lm-k-duo { display: grid; gap: 0; }
@media (max-width: 1023px) { .lm-k-led { padding-bottom: calc(var(--lm-sec) * .5); } .lm-k-hero { padding-bottom: clamp(28px, 4vw, 44px); } }
@media (min-width: 1024px) {
  .lm-k-duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--lm-gap-col); align-items: start; }
  .lm-k-duo .lm-k-led, .lm-k-duo .lm-k-prac { padding-bottom: var(--lm-sec); }
  .lm-k-prac { gap: clamp(24px, 3vw, 36px); }
  .lm-k-prac__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.6vw, 32px); }
  .lm-k-prac__big { font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.6rem); }
}
/* the pine band hands over to the graphite footer through the footer's own blend, so it needs less bottom padding of its own */
.lm-close__grid { padding-bottom: clamp(40px, 5vw, 64px); }
.lm-faq-sec .lm-faq { padding-bottom: clamp(40px, 5vw, 64px); }

/* ================================ 18. WIDE AND SHORT WINDOWS ================================ */
@media (min-width: 1900px) {
  .lumen { --lm-h1: 9.5rem; --lm-h1s: 7.5rem; --lm-h2: 4.6rem; --lm-word: 6.2rem; --lm-aside-w: 440px; --lm-gutter: 96px; }
  .lm-in, .lm-head__in { max-width: 1800px; }
  body.lumen { font-size: 18px; }
  .lm-lead { font-size: 1.5rem; }
}
/* landscape phones and any short phone window: ZS bar on one row, a two-column hero (headline, lead and ask left, the hair photograph right), a slim dock; the page is never only chrome */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1023px) {
  .demo-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; min-height: 48px; padding: 2px var(--lm-gutter); font-size: 14px; }
  .demo-bar > a:first-child, .demo-bar > span, .demo-bar > a:last-child, .demo-bar > .zs-mo { grid-row: auto; grid-column: auto; justify-self: auto; }
  .demo-bar > span { margin: 0 auto 0 0; padding: 0; text-align: left; }
  .lm-head__in { padding-block: 6px; }
  .lm-mark { min-height: 44px; font-size: 1.6rem; }
  .lm-sec--first { padding-top: 10px; }
  .lm-hero { padding-bottom: 14px; }
  .lm-hero__in { grid-template-columns: minmax(0, 1fr) minmax(150px, 31%); column-gap: 28px; align-items: start; }
  .lm-hero__copy { display: grid; align-content: start; justify-items: start; padding-top: 0; grid-template-rows: none; }
  .lm-hero__sig { display: none; }
  .lm-hero__in { align-items: start; }
  .lm-hero .lm-kick { margin-bottom: 4px; font-size: 13px; }
  .lm-hero .lm-h1 { font-size: clamp(2.1rem, 11.5vh, 3.6rem); font-size: clamp(2.1rem, 11.5svh, 3.6rem); }
  .lm-hero .lm-lead { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
  .lm-hero .lm-hero__cta { margin-top: 8px; display: flex; }
  .lm-hero .lm-btn { min-height: 44px; }
  .lm-hero__stage { margin-top: 0; margin-bottom: 0; width: 100%; justify-self: stretch; order: 0; }
  /* P4-065: the photograph ends above the slim dock (bar 48 + header 56 + 14 above it + dock 56 + 6 air), so the dock never cuts it */
  .lm-hero__fig { aspect-ratio: auto; height: clamp(150px, calc(100vh - 186px), 300px); height: clamp(150px, calc(100svh - 186px), 300px); }
  .lm-hero__mark { display: none; }
  .lm-h1 { font-size: clamp(2.2rem, 13.5vh, 3.8rem); font-size: clamp(2.2rem, 13.5svh, 3.8rem); }
  .lm-hero2 { gap: 8px; padding-bottom: 20px; }
  .lm-k-hero { padding-bottom: 28px; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .lm-stage__frame { max-height: calc(100vh - 380px); max-height: calc(100svh - 380px); min-height: 150px; }
  .lm-book { padding: 14px 18px 12px; gap: 10px; }
}

/* b6 G3: Lumen route back to ZS */
/* EU-06: the way back to ZS ("Be om en kostnadsfri skiss") is the same filled pill as on the other five examples; the other two links stay text links */
.package-note .text-link[href="/kontakt"] { min-height: 52px; padding: 0 26px; margin-top: 12px; border-radius: 999px; background: #dcbc7e; color: #0c0c0f; font-weight: 600; text-decoration: none; transition: background-color .3s ease; }
@media (hover: hover) { .package-note .text-link[href="/kontakt"]:hover { background: #ecd29c; } }
.package-note .text-link[href="/kontakt"]:focus-visible { outline: 2px solid #f3f0ea; outline-offset: 3px; }
@media (max-width: 420px) { .package-note .text-link[href="/kontakt"] { display: flex; justify-content: center; width: 100%; margin-right: 0; } }

/* b6 G4 TYP-10: no one-word last lines */
p, li, figcaption { text-wrap: pretty; }

/* b6 TYP-08: demo bar type family */
@media (min-width: 1100px) { .demo-bar { font-size: 13px; } }

/* b6 text 200 %: wrap, never cut off */
:where(h1, h2, h3, h4, p, li, dd, dt, figcaption, summary, label, td, th, .r3-display, .r3-lead, .r3-body, .r3-small) { overflow-wrap: anywhere; }

/* b6 HEAD-WRAP */
@media (max-width: 699px) { .lm-head .lm-head__in { flex-wrap: wrap; row-gap: 4px; } }

/* b6 DOCK-WRAP */
@media (max-width: 699px) { .lm-dock { flex-wrap: wrap; row-gap: 8px; } .lm-dock .lm-btn { flex: 1 1 auto; white-space: normal; text-align: center; min-width: 0; } }

/* b6 HEADINGS-200 */
@media (max-width: 699px) { .lm-idx__t { font-size: min(var(--lm-word), 11.2vw, calc((100vw - 161px) / 5.4)); overflow-wrap: anywhere; } }
@media (max-width: 359px) { .lm-idx__t { font-size: min(var(--lm-word), 9.4vw); } }

/* b6 fix1 MN-07 */
@media (max-width: 719px) { .js .lm-nav a:last-child[aria-current="page"]::after { display: block; } }

/* b6 fix5 MN-07 landscape */
@media (max-width: 719px) and (max-height: 520px) and (orientation: landscape) { .js .lm-nav a { justify-self: start; } }

/* b6 fix11 MSG-06 */
.lm-stage__cap [data-lm-stage-n]:empty { display: none; }

/* b6 fix24 MSG-06 belt window */
.lm-belt.is-run .lm-belt__view { max-width: 1500px; margin-inline: auto; }

/* b6 fix36 MIDWORD Lumen index at 320-359 */
@media (max-width: 359px) { .lm-idx__t { font-size: min(var(--lm-word), 9.4vw, calc((100vw - 161px) / 5.4)); } }

/* b6 fix53 treatment index, enlarged text */
.lm-idx { container: lmidx / inline-size; }
@container lmidx (max-width: 48rem) {
  .lm-idx__m { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; padding: 4px 0 0 calc(2.1rem + 12px); text-align: left; white-space: normal; }
  .lm-idx__panel { grid-row: 3; }
}

/* b6 fix64 headings by window */
/* b6 fix64 headings by window: sized to fit the window so a larger text size never cuts a word; the global overflow-wrap:anywhere stays as the last resort */
@media (max-width: 479px) {
  .lm-h2, .lm-h3, .lm-acc { overflow-wrap: normal; }
}
@media (max-width: 699px) and (min-height: 521px) {
  .lm-h1 { font-size: min(var(--lm-h1s), 16svh, calc((100vw - 2 * var(--lm-gutter)) / 4.5)); }
  .lm-h1--home { font-size: min(var(--lm-h1), 17svh, calc((100vw - 2 * var(--lm-gutter)) / 4.5)); }
}
@media (max-width: 699px) {
  .lm-h2 { font-size: min(var(--lm-h2), calc((100vw - 2 * var(--lm-gutter)) / 5.5), 11vw); }
  .lm-h3 { font-size: min(clamp(1.5rem, 1.2rem + 1vw, 2.1rem), calc((100vw - 2 * var(--lm-gutter)) / 5.6), 7.5vw); }
  .lm-k-row__t { font-size: min(clamp(1.8rem, 1.3rem + 2.2vw, 3.3rem), calc((100vw - 2 * var(--lm-gutter) - 2.4rem - 24px) / 5.5)); }
  .lm-idx__t { font-size: min(var(--lm-word), 11.2vw, calc((100vw - 145px - 1.1rem) / 5.4)); }
}
#booking-demo h2:focus { outline: none; box-shadow: none; }   /* b6 fix64: the heading takes focus when the dialog opens (it is not a control) */

/* b6 fix77 lumen */
/* b6 fix77 lumen: the closing h2--xl keeps its own size (it is 41.6 px at 320-414, 100 %); the window cap only binds where it would not fit (larger text) */
@media (max-width: 699px) {
  .lm-h2.lm-h2--xl { font-size: min(clamp(2.6rem, 1.4rem + 4.6vw, 6.2rem), calc((100vw - 2 * var(--lm-gutter)) / 5.5), 14vw); }
}
/* the opening-hours separator is its own element and goes away when the two ranges stack (container query in em of the hours element: the one-line text is 11.3 em) */
.lm-hours dd, .lm-k-prac__big { container-type: inline-size; }
@container (max-width: 11.34em) { .lm-hours .lm-sep { display: none; } .lm-hours .lm-nb { display: block; } }
@container (max-width: 10.34em) { .lm-k-prac__big .lm-sep { display: none; } .lm-k-prac__big .lm-nb { display: block; } }
/* the big hours line never runs past its cell at larger text: cell based size cap (the cell is the container) */
.lm-k-prac__grid > div { container-type: inline-size; }
@media (max-width: 1023px) { @container (max-width: 24rem) { .lm-k-prac__big { font-size: min(clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem), calc((100vw - 48px) / 6.9), 15cqi); } } }
@media (min-width: 1024px) { @container (max-width: 24rem) { .lm-k-prac__big { font-size: min(clamp(1.7rem, 1.1rem + 1.7vw, 2.6rem), 15cqi); } } }
/* the footer signature never wraps (a trailing dot / one-word line) */
.brand-footer .footer-signature p { white-space: nowrap; font-size: min(clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem), calc((100vw - 2 * var(--lm-gutter)) / 8.6)); }
/* the booking dialog's only close control stays in view when the dialog scrolls (landscape phones, larger text) */
#booking-demo { overflow-x: hidden; scroll-padding-bottom: 72px; }
#booking-demo .text-link[data-close] { position: sticky; bottom: 6px; justify-self: start; background: none; box-shadow: none; z-index: 1; }
#booking-demo .text-link[data-close]::before { content: ""; position: absolute; z-index: -1; left: -60px; right: -100vw; top: -8px; bottom: -12px; background: var(--lm-card); }

/* b6 fix87 lumen */
/* b6 fix87 lumen */
.lm-chap__no { white-space: nowrap; overflow-wrap: normal; }
.package-note .package-price { display: flex; flex-wrap: wrap; align-items: baseline; }
.skip-link:focus { max-width: calc(100vw - 24px); }

/* b6 fix93 lumen */
/* b6 fix93 lumen: the home accent word is capped by its column */
#ed-h { container-type: inline-size; }
#ed-h .lm-acc { font-size: min(1.12em, 26cqi); }

/* b6 f2 cta lumen */
/* b6 f2 cta (owner 2026-10-25, soften the edge): the booking dialog's call-to-action is pinned directly above the pinned close bar, so the pill is never cut by the bar's hard top edge at any scroll position; the paper field and a 14 px fade for the scrolling TEXT are painted by the close control's ::after UNDER the CTA (z-index 2), the CTA itself is never faded or overpainted. Not scrolled or scrolled to the end: nothing is pinned, nothing changes. */
#booking-demo { --cta-h: 54px; --cta-gap: 16px; --cta-fade: 14px; --cta-bar-top: 8px; scroll-padding-bottom: 0; }   /* (the earlier 72 px scroll padding scrolled the dialog on the first Tab to lift the CTA out from under the bar; the pinned CTA never sits under it, so a Tab no longer moves the text) */
#booking-demo .button { position: sticky; bottom: calc(6px + 44px + var(--cta-gap)); z-index: 2; min-height: var(--cta-h); }
#booking-demo .text-link[data-close]::after { content: ""; position: absolute; z-index: -1; left: -60px; right: -100vw; bottom: calc(100% + var(--cta-bar-top)); height: calc(var(--cta-gap) + var(--cta-h) - var(--cta-bar-top) + var(--cta-fade)); background: linear-gradient(to bottom, transparent, var(--lm-card) var(--cta-fade)); pointer-events: none; }