/*
 * Home's page layouts (public/home-layouts.js). Drawn only in the page's own theme variables (public/link: --bg, --fg,
 * --muted, --card, --card-border, --accent, --font-display, --font-body, --r-btn/--r-card/--r-media, and the
 * button colour --btn-bg/--btn-fg from Look → Colours), so every theme, colour pick and corner style carries over.
 */
body[data-home-layout] { display: block; }
body[data-home-layout] > .page { display: none; }
html.booting .lx { opacity: 0; }
.lx { transition: opacity .35s ease; }
.lx[hidden] { display: none; }

.lx {
  --lx-max: 1240px;
  --lx-pad: clamp(20px, 5vw, 56px);
  --lx-btn-bg: var(--btn-bg, var(--fg));
  --lx-btn-fg: var(--btn-fg, var(--bg));
  --lx-line: color-mix(in srgb, var(--fg) 14%, transparent);
  --lx-r: min(var(--r-card), 22px);
  --lx-rm: min(var(--r-media), 18px);
  --lx-vh: 100vh;
  width: 100%; min-height: 100vh; color: var(--fg); font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
@supports (height: 100svh) { .lx { --lx-vh: 100svh; } }
.lx a { color: inherit; text-decoration: none; }
.lx h1, .lx h2, .lx h3, .lx p, .lx figure, .lx blockquote, .lx ol, .lx ul { margin: 0; }
.lx-wrap { width: 100%; max-width: var(--lx-max); margin-left: auto; margin-right: auto; padding-left: var(--lx-pad); padding-right: var(--lx-pad); }
/* The page's side margins always win: a part's own top and bottom spacing never takes the words to the screen's edge. */
.lx .lx-wrap { padding-left: var(--lx-pad); padding-right: var(--lx-pad); }
.lx-name, .lx-tagline, .lx-h2, .lx-pkg-name, .lx-about-text p { overflow-wrap: anywhere; }
/* Room for the letters' tails. Theme effects that paint text through its background (Gilded) reach only as far as its
   box, and display faces hang their J, g, y and italics outside it — cut off. The padding takes them in; the matching
   negative margin keeps every layout exactly where it was. */
.lx .lx-name { padding: .14em .14em .26em; margin: -.14em -.14em -.26em; }

/* Type */
.lx-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.lx-h1 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; font-size: clamp(38px, 6vw, 84px); }
.lx-h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: -.005em; font-size: clamp(30px, 4.2vw, 52px); }
.lx-tagline { font-size: clamp(14px, 1.25vw, 16px); line-height: 1.6; color: var(--muted); letter-spacing: .02em; }
.lx-lede { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.75; color: var(--muted); max-width: 560px; }
.lx-placeholder { font-size: 14px; color: var(--muted); font-style: italic; }
.lx-placeholder.center { text-align: center; padding: 40px 0; }
.lx-sec-head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }

/* Buttons and links */
.lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px;
  border-radius: min(var(--r-btn), 999px); background: var(--lx-btn-bg); color: var(--lx-btn-fg) !important; border: 0;
  font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease; cursor: pointer; }
.lx-btn:hover { opacity: .86; }
.lx-btn:active { transform: scale(.98); }
.lx-btn.sm { min-height: 38px; padding: 0 18px; font-size: 11px; }
.lx-btn.ghost { background: transparent; color: var(--fg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 34%, transparent); }
.lx-btn.light { background: #fff; color: #111 !important; }
.lx-btn.ghost.on-media { color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.lx-textlink { font-size: 13px; letter-spacing: .04em; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); padding-bottom: 2px; transition: border-color .2s; }
.lx-textlink:hover { border-color: currentColor; }
.lx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lx-actions.center { justify-content: center; }
.lx-more { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
.lx-more.left { justify-content: flex-start; }

/* Media: a still, and the film over it once it plays */
.lx-media { position: relative; overflow: hidden; background: var(--card); }
.lx-media > img, .lx-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-media > video.lx-film { opacity: 0; transition: opacity .7s ease; }
.lx-media.is-playing > video.lx-film { opacity: 1; }
.lx-media.lx-tap { cursor: zoom-in; }
.lx-media.lx-tap > img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .lx-media.lx-tap:hover > img { transform: scale(1.03); } }
.lx-media.lx-empty { background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--fg) 10%, var(--card))); }
.lx-fill { position: absolute !important; inset: 0; }
.lx-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 48%, rgba(0,0,0,.62) 100%); }
.lx-scrim.soft { background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.55) 100%); }
.lx-scrim.deep { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.82) 100%); }

/* Logo, socials */
.lx-logo { flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--card) center / cover no-repeat;
  display: grid; place-items: center; font: 600 22px var(--font-body); color: var(--muted); }
.lx-logo.sm { width: 34px; height: 34px; font-size: 12px; }
.lx-logo.md { width: 64px; height: 64px; font-size: 20px; }
.lx-logo.lg { width: 92px; height: 92px; font-size: 28px; }
.lx-logo.ring { box-shadow: 0 0 0 4px var(--bg); }
.lx-socials { display: flex; gap: 10px; justify-content: center; }
.lx-socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--lx-line); transition: background-color .2s; }
.lx-socials a:hover { background: var(--card); }
.lx-socials svg { width: 17px; height: 17px; fill: currentColor; }
.lx-socials.sm a { width: 34px; height: 34px; }
.lx-socials.sm svg { width: 15px; height: 15px; }
.lx-socials.on-media a { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.lx-socials.on-media a:hover { background: rgba(255,255,255,.12); }
.lx-social-add { font-size: 13px; color: var(--muted); padding: 8px 4px; }

/* The top bar */
.lx-top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: var(--lx-max); margin: 0 auto; padding: 22px var(--lx-pad); }
.lx-top.over { position: absolute; top: 0; left: 0; right: 0; color: #fff; }
.lx-top.center { flex-direction: column; gap: 14px; padding-top: 30px; }
.lx-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.lx-brand-name { font-family: var(--font-display); font-size: 19px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-top.center .lx-brand { flex-direction: column; gap: 10px; }
.lx-top.center .lx-brand-name { font-size: 15px; letter-spacing: .3em; text-transform: uppercase; font-family: var(--font-body); font-weight: 500; }
.lx-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.lx-nav-link { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; transition: opacity .2s; }
.lx-nav-link:hover { opacity: 1; }
@media (max-width: 640px) {
  .lx-top:not(.center) .lx-nav-link { display: none; }
  .lx-top:not(.center) .lx-brand-name { font-size: 17px; }
}

/* About, qualify, your sections, the invitation, the footer */
.lx-about { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); }
.lx-about-text { display: flex; flex-direction: column; gap: 18px; }
.lx-about-p { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.8; color: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.lx-about-lead { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.38; }
.lx-about.centered { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.lx-about.centered .lx-about-text { max-width: 760px; align-items: center; }
.lx-about.split { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.lx-about.split .lx-about-text { max-width: 560px; }
.lx-about-media { aspect-ratio: 4 / 5; border-radius: var(--lx-rm); }
@media (min-width: 860px) { .lx-about.split { grid-template-columns: 5fr 6fr; } .lx-about.split.noimg { grid-template-columns: 1fr; justify-items: center; text-align: center; } .lx-about.split.noimg .lx-about-text { align-items: center; } }
.lx-about.columns .lx-about-text { display: block; column-count: 1; column-gap: 56px; }
.lx-about.columns .lx-about-text > * { margin-bottom: 18px; break-inside: avoid; }
@media (min-width: 900px) { .lx-about.columns .lx-about-text { column-count: 2; } }
.lx-about.plain { padding-top: 56px; padding-bottom: 0; }

.lx-qualify { padding: clamp(64px, 9vw, 120px) 0; background: var(--card); }
.lx-qualify-in { display: grid; gap: 28px; }
.lx-qualify-body { display: flex; flex-direction: column; gap: 16px; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.8; max-width: 640px; }
@media (min-width: 900px) { .lx-qualify-in { grid-template-columns: 5fr 7fr; gap: 80px; } }

/* Your own Text sections, in each layout's own way (home-layouts.js stories). */
.lx-stories-in { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 104px); }
.lx-story { display: flex; flex-direction: column; gap: 18px; }
.lx-story-title { font-family: var(--font-display); font-weight: 400; line-height: 1.12; font-size: clamp(28px, 3.6vw, 46px); }
.lx-story-body { display: flex; flex-direction: column; gap: 16px; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.8;
  color: color-mix(in srgb, var(--fg) 80%, var(--bg)); }
/* center: a quiet column, set apart by a short rule. */
.lx-stories.center { padding: clamp(72px, 10vw, 130px) 0; }
.lx-stories.center .lx-story { max-width: 700px; margin: 0 auto; align-items: center; text-align: center; }
.lx-stories.center .lx-story::before { content: ''; width: 36px; height: 1px; background: currentColor; opacity: .4; margin-bottom: 10px; }
/* left: Price List's own column, under its hairlines. */
.lx-stories.left { padding-top: 56px; }
.lx-stories.left .lx-story { padding-top: 28px; border-top: 1px solid var(--lx-line); }
.lx-stories.left .lx-story-title { font-size: clamp(24px, 2.4vw, 32px); }
/* split: the heading on the left, the words on the right, like Are We Right For You. */
.lx-stories.split { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--lx-line); }
@media (min-width: 900px) { .lx-stories.split .lx-story { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; } }
.lx-stories.split .lx-story-body { max-width: 640px; }
/* editorial: Lookbook's — a large italic heading over two columns of text. */
.lx-stories.editorial { padding: clamp(56px, 8vw, 110px) 0; }
.lx-stories.editorial .lx-story { padding-top: 22px; border-top: 1px solid var(--fg); }
.lx-stories.editorial .lx-story-title { font-style: italic; font-size: clamp(34px, 5vw, 68px); line-height: 1.02; letter-spacing: -.015em; }
.lx-stories.editorial .lx-story-body { display: block; columns: 1; column-gap: 56px; }
.lx-stories.editorial .lx-story-body p { margin-bottom: 16px; break-inside: avoid; }
@media (min-width: 900px) { .lx-stories.editorial .lx-story-body { columns: 2; } }
/* card: the link-in-bio layouts — short and centred. */
.lx-stories.card { width: 100%; max-width: 460px; margin: 0 auto; padding: 26px 22px 6px; }
.lx-stories.card .lx-stories-in { gap: 28px; }
.lx-stories.card .lx-story { align-items: center; text-align: center; gap: 10px; }
.lx-stories.card .lx-story-title { font-size: 24px; }
.lx-stories.card .lx-story-body { font-size: 14.5px; line-height: 1.7; gap: 10px; }

/* Your own Offers (home-layouts.js offers): an announcement in the layout's own type, never a pasted-in ticket. */
.lx-offer { position: relative; display: flex; flex-direction: column; gap: 22px; }
.lx-offer-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lx-offer-title { font-family: var(--font-display); font-weight: 400; line-height: 1.1; font-size: clamp(26px, 3vw, 40px); overflow-wrap: anywhere; }
.lx-offer-body { font-size: 15px; line-height: 1.7; color: color-mix(in srgb, var(--fg) 78%, var(--bg)); max-width: 560px; }
.lx-offer-side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.lx-offer-code { display: inline-flex; align-items: baseline; gap: 10px; min-height: 50px; padding: 0 18px; border-radius: min(var(--r-btn), 999px);
  background: transparent; color: var(--fg); border: 1px dashed color-mix(in srgb, var(--fg) 45%, transparent); cursor: pointer; font-family: var(--font-body); }
.lx-offer-code small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.lx-offer-code b { font-size: 15px; letter-spacing: .12em; font-weight: 600; }
.lx-offer-ends { flex-basis: 100%; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lx-offer.ended { opacity: .5; }
/* band: a hairline-ruled band across the page; spotlight fills it with the card colour. */
.lx-offers.band { padding: clamp(40px, 6vw, 72px) 0; }
.lx-offers.band .lx-offers-in { display: flex; flex-direction: column; gap: 20px; }
.lx-offers.band .lx-offer { padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--lx-line); border-bottom: 1px solid var(--lx-line); }
.lx-offers.band .lx-offer.spotlight { border: 0; padding: clamp(30px, 4.4vw, 56px); border-radius: var(--lx-r); background: var(--card); }
@media (min-width: 860px) {
  .lx-offers.band .lx-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; }
  .lx-offers.band .lx-offer-side { justify-content: flex-end; max-width: 380px; }
  .lx-offers.band .lx-offer-ends { text-align: right; }
}
/* inset: Price List — under its name, between hairlines. */
.lx-offers.inset { padding: 32px 0 0; }
.lx-offers.inset .lx-offer { padding: 26px 0; border-bottom: 1px solid var(--lx-line); }
.lx-offers.inset .lx-offer.spotlight { padding: 26px; border: 0; border-radius: var(--lx-r); background: var(--card); }
.lx-offers.inset .lx-offer-title { font-size: clamp(24px, 2.4vw, 32px); }
/* editorial: Lookbook — a printed notice: large italic words beside a rule. */
.lx-offers.editorial { padding-top: clamp(40px, 6vw, 72px); }
.lx-offers.editorial .lx-offer { padding-left: clamp(18px, 3vw, 36px); border-left: 1px solid var(--fg); }
.lx-offers.editorial .lx-offer-title { font-style: italic; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; }
/* card: link-in-bio — one compact, centred card. */
.lx-offers.card { width: 100%; max-width: 460px; margin: 0 auto; padding: 22px 20px 0; }
.lx-offers.card .lx-offers-in { display: flex; flex-direction: column; gap: 12px; }
.lx-offers.card .lx-offer { align-items: center; text-align: center; gap: 16px; padding: 24px 20px; border-radius: min(var(--r-card), 20px);
  border: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent); }
.lx-offers.card .lx-offer.spotlight { border: 0; background: var(--card); }
.lx-offers.card .lx-offer-text { align-items: center; }
.lx-offers.card .lx-offer-title { font-size: 26px; }
.lx-offers.card .lx-offer-body { font-size: 14px; }
.lx-offers.card .lx-offer-side { justify-content: center; }
.lx-offers.card .lx-offer-side .lx-btn { flex: 1 1 100%; }
.lx-bioposter > .lx-offers.card, .lx-bioposter > .lx-stories.card { padding-top: 32px; }

.lx-close { position: relative; padding: clamp(72px, 10vw, 130px) var(--lx-pad); text-align: center; border-top: 1px solid var(--lx-line); overflow: hidden; }
.lx-close-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 640px; margin: 0 auto; }
.lx-close .lx-lede { margin: 0 auto 8px; }
.lx-close.has-media { color: #fff; border-top: 0; min-height: min(70vh, 620px); display: grid; place-items: center; }
.lx-close.has-media .lx-eyebrow, .lx-close.has-media .lx-lede { color: rgba(255,255,255,.82); }
.lx-close-media { position: absolute !important; inset: 0; }
.lx-close.has-media::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.48); pointer-events: none; }

.lx-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px 56px; text-align: center; border-top: 1px solid var(--lx-line); }
.lx-foot-name { font-family: var(--font-display); font-size: 18px; letter-spacing: .04em; }
.lx-foot-note { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* Packages */
/* Packages: by how many there are (home-layouts.js n1–n5, 5 = five or more), never one left alone on a row —
   a phone swipes through them in one row; wider screens wrap them into rows centred under each other
   (two across on a tablet, three on a computer; four are two by two). */
.lx-pk-grid { --lx-gap: clamp(20px, 2.6vw, 32px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lx-gap); }
.lx-pk-grid > .lx-pkg { width: 100%; }
@media (max-width: 759px) {
  .lx-pk-grid:not(.n1) { flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--lx-pad)); padding: 2px var(--lx-pad) 8px; scroll-padding: 0 var(--lx-pad); -webkit-overflow-scrolling: touch; }
  .lx-pk-grid:not(.n1)::-webkit-scrollbar { display: none; }
  .lx-pk-grid:not(.n1) > .lx-pkg { flex: none; width: min(84%, 340px); scroll-snap-align: start; }
  /* (Room after the last card — some browsers drop a scroller's end padding.) */
  .lx-pk-grid:not(.n1)::after { content: ''; flex: 0 0 calc(var(--lx-pad) - 12px); }
}
@media (min-width: 760px) { .lx-pk-grid:not(.n1) > .lx-pkg { width: calc((100% - var(--lx-gap)) / 2); } }
@media (min-width: 1080px) { .lx-pk-grid.n3 > .lx-pkg, .lx-pk-grid.n5 > .lx-pkg { width: calc((100% - 2 * var(--lx-gap)) / 3); } }
.lx-pkg { position: relative; display: flex; flex-direction: column; background: var(--bg); border-radius: var(--lx-r); overflow: hidden;
  box-shadow: 0 0 0 1px var(--lx-line); }
.lx-pkg.featured { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 40%, transparent), 0 24px 60px -30px rgba(0,0,0,.35); }
.lx-pkg-pic { aspect-ratio: 3 / 2; }
.lx-pk-grid.n1 > .lx-pkg { max-width: 520px; }
.lx-pkg-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 26px); flex: 1; }
.lx-pkg-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
.lx-pkg-price { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lx-pkg-days { font-size: 12px; color: var(--muted); }
.lx-pkg-blurb { font-size: 14.5px; line-height: 1.7; color: color-mix(in srgb, var(--fg) 78%, var(--bg));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lx-inc { list-style: none; padding: 14px 0 0; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--lx-line); }
.lx-inc li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; line-height: 1.45; }
.lx-inc em { font-style: normal; color: var(--muted); white-space: nowrap; }
.lx-pkg-actions { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.lx-pkg-actions .lx-textlink { align-self: center; }
.lx-badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 11px; border-radius: 999px; background: var(--bg); color: var(--fg);
  font: 600 10px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.lx-badge.inline { position: static; display: inline-block; vertical-align: middle; margin-left: 8px; background: var(--card); }
.lx-pkg > .lx-badge.inline { align-self: flex-start; margin: 22px 0 -6px clamp(22px, 2.4vw, 30px); }
.lx-pk-grid.quiet .lx-pkg { background: transparent; }
.lx-pk-empty { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 44px 24px;
  border-radius: var(--lx-r); border: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent); color: var(--muted); max-width: 560px; margin: 0 auto; }
.lx-pk-empty b { color: var(--fg); font-family: var(--font-display); font-weight: 400; font-size: 22px; }

/* How booking works */
.lx-steps { padding: clamp(48px, 6vw, 80px) 0; background: var(--card); }
.lx-steps.quiet { background: transparent; border-top: 1px solid var(--lx-line); border-bottom: 1px solid var(--lx-line); }
.lx-steps .lx-eyebrow { text-align: center; margin-bottom: 28px; }
.lx-steps-row { list-style: none; padding: 0; display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .lx-steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }
.lx-steps-row li { display: flex; flex-direction: column; gap: 6px; }
.lx-step-n { font-family: var(--font-display); font-size: 30px; line-height: 1; color: color-mix(in srgb, var(--fg) 34%, transparent); }
.lx-steps-row b { font-family: var(--font-display); font-weight: 400; font-size: 21px; }
/* On a phone: the number beside its words, not above them. */
@media (max-width: 819px) {
  .lx-steps-row li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; row-gap: 4px; }
  .lx-step-n { grid-row: span 2; font-size: 26px; }
}
.lx-steps-row span:last-child { font-size: 14.5px; line-height: 1.7; color: var(--muted); }

/* Captions, strips, trios */
.lx-cap { display: flex; gap: 14px; align-items: baseline; padding-top: 12px; font-size: 13px; }
.lx-cap-n { font-size: 11px; letter-spacing: .2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.lx-cap-t { color: color-mix(in srgb, var(--fg) 80%, var(--bg)); }
.lx-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--lx-pad) 6px; scrollbar-width: none; }
.lx-strip::-webkit-scrollbar { display: none; }
.lx-strip-item { flex: none; width: min(62vw, 300px); aspect-ratio: 4 / 5; border-radius: var(--lx-rm); scroll-snap-align: start; }
.lx-trio { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-trio .lx-media { aspect-ratio: 3 / 4; border-radius: var(--lx-rm); }

/* ---- Collections ------------------------------------------------------- */
.lx-col-heromedia { aspect-ratio: 4 / 3; border-radius: var(--lx-rm); }
@media (min-width: 760px) { .lx-col-heromedia { aspect-ratio: 21 / 9; max-height: 60vh; width: 100%; } }
.lx-col-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(12px, 2vw, 24px); }
.lx-col-intro .lx-tagline { max-width: 520px; }
.lx-col-pk { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(48px, 7vw, 88px); }
.lx-col-pk .lx-sec-head { margin-bottom: clamp(24px, 3.4vw, 40px); }

/* ---- Price List -------------------------------------------------------- */
.lx-pl { display: grid; grid-template-columns: 1fr; }
.lx-pl-side { position: relative; height: 50vh; height: calc(var(--lx-vh) * .5); }
.lx-pl-media { position: absolute !important; inset: 0; }
.lx-pl-body { padding: clamp(32px, 5vw, 64px) var(--lx-pad) 0; display: flex; flex-direction: column; gap: 0; }
.lx-pl-head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; border-bottom: 1px solid var(--lx-line); }
.lx-pl-head .lx-h1 { font-size: clamp(40px, 5vw, 72px); }
.lx-pl-list { padding: 36px 0 28px; display: flex; flex-direction: column; gap: 24px; }
.lx-pl-rows { display: flex; flex-direction: column; gap: 28px; }
.lx-pl-row { display: flex; flex-direction: column; gap: 6px; }
.lx-pl-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-pl-line { display: flex; align-items: baseline; gap: 14px; }
.lx-pl-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; }
.lx-leader { flex: 1; min-width: 24px; border-bottom: 1px dotted color-mix(in srgb, var(--fg) 45%, transparent); transform: translateY(-6px); }
.lx-pl-price { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); white-space: nowrap; }
.lx-pl-blurb { font-size: 14.5px; line-height: 1.75; color: color-mix(in srgb, var(--fg) 78%, var(--bg)); max-width: 560px; }
.lx-pl-inc { font-size: 12.5px; letter-spacing: .04em; line-height: 1.8; color: var(--muted); }
.lx-pl-row > .lx-textlink { align-self: flex-start; margin-top: 4px; }
.lx-pl-note { font-size: 13px; font-style: italic; color: var(--muted); }
.lx-pl-work { padding-top: 48px; display: flex; flex-direction: column; gap: 20px; }
.lx-pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lx-pl-grid .lx-media { aspect-ratio: 1; border-radius: var(--lx-rm); }
.lx-pl .lx-foot { margin-top: 48px; align-items: flex-start; text-align: left; padding-left: 0; padding-right: 0; }
.lx-pl .lx-foot .lx-socials { justify-content: flex-start; }
@media (min-width: 960px) {
  .lx-pl { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .lx-pl-side { position: sticky; top: 0; align-self: start; height: 100vh; height: var(--lx-vh); }
  .lx-pl-body { padding: clamp(48px, 6vw, 88px) clamp(40px, 6vw, 110px) 0; max-width: 820px; }
}

/* ---- Reserve ----------------------------------------------------------- */
.lx-rs-hero { position: relative; height: 70vh; height: calc(var(--lx-vh) * .7); min-height: 460px; color: #fff; overflow: hidden; }
.lx-rs-cap { position: absolute; left: 0; right: 0; bottom: clamp(120px, 16vh, 170px); display: flex; flex-direction: column; gap: 14px; z-index: 2; }
.lx-rs-cap .lx-tagline { color: rgba(255,255,255,.85); max-width: 520px; }
.lx-rs-card { position: relative; z-index: 3; width: calc(100% - 2 * clamp(12px, 3vw, 40px)); max-width: 1120px; margin: -88px auto 0;
  background: var(--bg); border-radius: calc(var(--lx-r) + 6px); padding: clamp(24px, 4vw, 48px); box-shadow: 0 40px 100px -40px rgba(0,0,0,.45); }
.lx-rs-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(20px, 3vw, 32px); }
.lx-rs-feature { box-shadow: none !important; background: transparent; }
@media (min-width: 860px) {
  .lx-rs-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: stretch; }
  .lx-rs-feature .lx-pkg-pic { aspect-ratio: auto; min-height: 320px; border-radius: var(--lx-rm); }
  .lx-rs-feature .lx-pkg-body { padding: 8px 0; }
  .lx-rs-feature .lx-inc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
}
.lx-rs-feature .lx-pkg-pic { border-radius: var(--lx-rm); }
.lx-rs-feature .lx-pkg-body { padding-left: 0; padding-right: 0; }
.lx-rs-feature .lx-pkg-name { font-size: clamp(28px, 2.8vw, 36px); }
.lx-rs-also { margin: clamp(28px, 4vw, 40px) 0 10px; }
.lx-rs-list { display: flex; flex-direction: column; border-top: 1px solid var(--lx-line); }
.lx-rs-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 20px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lx-line); transition: background-color .2s; }
.lx-rs-row:hover .lx-rs-arrow { transform: translateX(4px); }
.lx-rs-thumb { width: 64px; height: 64px; border-radius: min(var(--r-media), 10px); }
.lx-rs-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lx-rs-t b { font-family: var(--font-display); font-weight: 400; font-size: 21px; }
.lx-rs-t small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-rs-price { font-size: 14px; white-space: nowrap; }
.lx-rs-arrow { transition: transform .2s; color: var(--muted); }
@media (max-width: 520px) { .lx-rs-row { grid-template-columns: 52px minmax(0, 1fr) auto; } .lx-rs-thumb { width: 52px; height: 52px; } .lx-rs-arrow { display: none; } }
.lx-rs-card .lx-pk-empty { margin-bottom: 24px; }
.lx-steps.quiet { margin-top: clamp(48px, 6vw, 80px); }
.lx-rs-work { padding-bottom: clamp(48px, 7vw, 88px); }

/* ---- Gallery Wall ------------------------------------------------------ */
.lx-wall-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(40px, 6vw, 72px); }
.lx-wall-head .lx-h1 { font-size: clamp(44px, 8vw, 112px); }
.lx-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.lx-pill { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: min(var(--r-btn), 999px); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 30%, transparent); transition: background-color .2s; }
.lx-pill:hover { background: var(--card); }
.lx-pill.primary { background: var(--lx-btn-bg); color: var(--lx-btn-fg); box-shadow: none; }
.lx-wall { padding: 0 clamp(12px, 2vw, 24px); }
.lx-wall-grid { column-count: 2; column-gap: clamp(8px, 1.2vw, 16px); }
@media (min-width: 900px) { .lx-wall-grid { column-count: 3; } }
@media (min-width: 1600px) { .lx-wall-grid { column-count: 4; } }
.lx-wall-item { break-inside: avoid; margin-bottom: clamp(8px, 1.2vw, 16px); border-radius: min(var(--r-media), 12px); }

/* ---- Screening --------------------------------------------------------- */
.lx-sc-hero { position: relative; height: 100vh; height: var(--lx-vh); min-height: 560px; color: #fff; overflow: hidden; background: #000; }
.lx-sc-cap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 0 var(--lx-pad); }
.lx-sc-cap .lx-eyebrow { color: rgba(255,255,255,.75); }
.lx-sc-cap .lx-h1 { font-size: clamp(40px, 7vw, 104px); letter-spacing: .01em; }
.lx-sc-cap .lx-tagline { color: rgba(255,255,255,.82); max-width: 520px; }
.lx-sc-go { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.lx-sc-go::after { content: ''; width: 1px; height: 40px; background: rgba(255,255,255,.6); }
.lx-sc-list { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 128px); padding-top: clamp(80px, 11vw, 150px); padding-bottom: clamp(80px, 11vw, 140px); max-width: 1320px; }
.lx-sc-frame { aspect-ratio: 16 / 9; border-radius: min(var(--r-media), 8px); }
.lx-sc-meta { display: flex; align-items: center; gap: 18px; padding-top: 18px; }
.lx-sc-title { flex: 1; font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); }
.lx-sc-play { flex: none; background: none; border: 0; color: var(--fg); cursor: pointer; padding: 8px 0; font: 500 11px var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px; }
.lx-sc-play::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.lx-sc-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); }
.lx-sc-photos .lx-media { aspect-ratio: 3 / 2; border-radius: min(var(--r-media), 8px); }

/* ---- Lookbook ---------------------------------------------------------- */
.lx-lb-mast { display: grid; gap: 22px; padding-top: clamp(40px, 7vw, 96px); align-items: end; }
.lx-lb-mast .lx-h1 { font-size: clamp(52px, 11vw, 168px); line-height: .92; letter-spacing: -.025em; }
.lx-lb-aside { display: flex; flex-direction: column; gap: 18px; max-width: 360px; }
.lx-lb-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.lx-rule { height: 1px; background: var(--fg); opacity: .8; margin-top: 18px; }
@media (min-width: 900px) { .lx-lb-mast { grid-template-columns: minmax(0, 1fr) 320px; } .lx-rule { grid-column: 1 / -1; } }
.lx-lb { display: flex; flex-direction: column; gap: clamp(56px, 9vw, 130px); padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); }
.lx-lb-spread { display: grid; gap: clamp(14px, 2.4vw, 32px); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.lx-lb-pic { border-radius: min(var(--r-media), 6px); }
.lx-lb-spread.s0 .f0 { grid-column: 1 / span 7; } .lx-lb-spread.s0 .f0 .lx-lb-pic { aspect-ratio: 4 / 5; }
.lx-lb-spread.s0 .f1 { grid-column: 9 / span 4; margin-top: 30%; } .lx-lb-spread.s0 .f1 .lx-lb-pic { aspect-ratio: 3 / 4; }
.lx-lb-spread.s1 .f0 { grid-column: 1 / -1; } .lx-lb-spread.s1 .f0 .lx-lb-pic { aspect-ratio: 16 / 9; }
.lx-lb-spread.s2 .f0 { grid-column: 2 / span 5; margin-top: 12%; } .lx-lb-spread.s2 .f0 .lx-lb-pic { aspect-ratio: 3 / 4; }
.lx-lb-spread.s2 .f1 { grid-column: 7 / span 6; } .lx-lb-spread.s2 .f1 .lx-lb-pic { aspect-ratio: 4 / 5; }
@media (max-width: 640px) {
  .lx-lb-spread.s0 .f0 { grid-column: 1 / -1; } .lx-lb-spread.s0 .f1 { grid-column: 4 / -1; margin-top: 0; }
  .lx-lb-spread.s1 .f0 .lx-lb-pic { aspect-ratio: 4 / 3; }
  .lx-lb-spread.s2 .f0 { grid-column: 1 / span 7; margin-top: 30%; } .lx-lb-spread.s2 .f1 { grid-column: 8 / -1; }
}
.lx-lb-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.3; text-align: center; max-width: 900px; margin: 0 auto; padding: 0 4%; }

/* ---- Bio Card ---------------------------------------------------------- */
.lx-biocard { position: relative; padding: clamp(16px, 4vh, 48px) 14px; min-height: 100vh; }
.lx-bc-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lx-bc-bg .lx-media { filter: blur(44px) saturate(1.1); transform: scale(1.25); background: transparent; }
.lx-bc-bg::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 58%, transparent); }
.lx-bc-card { position: relative; z-index: 1; width: 100%; max-width: 460px; margin: 0 auto; background: var(--bg); border-radius: calc(var(--lx-r) + 8px);
  overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.4), 0 0 0 1px var(--lx-line); }
.lx-bc-cover { aspect-ratio: 16 / 11; }
.lx-bc-id { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0 24px; margin-top: -46px; position: relative; z-index: 2; }
.lx-bc-name { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; margin-top: 6px; }
.lx-bc-id .lx-tagline { font-size: 14px; max-width: 340px; }
.lx-bc-id .lx-socials { margin-top: 4px; }
.lx-bc-links { display: flex; flex-direction: column; gap: 10px; padding: 26px 20px 8px; }
.lx-bc-link { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 20px; border-radius: min(var(--r-btn), 20px);
  box-shadow: inset 0 0 0 1px var(--lx-line); background: var(--bg); transition: background-color .2s, transform .2s; }
.lx-bc-link:hover { background: var(--card); }
.lx-bc-link:active { transform: scale(.99); }
.lx-bc-link.primary { background: var(--lx-btn-bg); color: var(--lx-btn-fg); box-shadow: none; }
.lx-bc-lt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lx-bc-lt b { font-size: 15px; font-weight: 600; }
.lx-bc-lt small { font-size: 12.5px; opacity: .7; }
.lx-bc-arrow { opacity: .6; }
.lx-bc-work { padding: 26px 20px 4px; }
.lx-bc-workhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.lx-bc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lx-bc-grid .lx-media { aspect-ratio: 1; border-radius: min(var(--r-media), 8px); }
.lx-bc-foot { padding: 22px 20px 26px; text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ---- Bio Poster -------------------------------------------------------- */
.lx-bp-hero { position: relative; min-height: 100vh; min-height: var(--lx-vh); color: #fff; overflow: hidden; background: #000; display: flex; align-items: flex-end; justify-content: center; }
.lx-bp-in { position: relative; z-index: 2; width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 120px 20px max(36px, env(safe-area-inset-bottom)); }
.lx-bp-in .lx-logo.ring { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.lx-bp-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 9vw, 48px); line-height: 1.04; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.lx-bp-in .lx-tagline { color: rgba(255,255,255,.85); font-size: 14.5px; }
.lx-bp-links { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.lx-bp-link { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 20px; border-radius: min(var(--r-btn), 999px);
  background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: .04em; transition: background-color .2s; }
.lx-bp-link:hover { background: rgba(255,255,255,.22); }
.lx-bp-link.primary { background: #fff; color: #111; box-shadow: none; }
.lx-bp-in .lx-socials { margin-top: 10px; }
.lx-bp-work { padding: 48px 0 24px; }
.lx-bp-workhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; max-width: 760px; }
.lx-bp-work .lx-strip { justify-content: safe center; }

/* ---- Signature --------------------------------------------------------- */
.lx-sg-hero { position: relative; height: 100vh; height: var(--lx-vh); min-height: 560px; color: #fff; overflow: hidden; background: #000; }
.lx-sg-cap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 80px var(--lx-pad) 0; }
.lx-sg-cap .lx-h1 { font-size: clamp(44px, 8vw, 120px); text-shadow: 0 2px 40px rgba(0,0,0,.25); }
.lx-sg-cap .lx-tagline { color: rgba(255,255,255,.88); max-width: 540px; }
.lx-sg-cap .lx-actions { margin-top: 14px; }
.lx-sg-work { padding-bottom: clamp(72px, 10vw, 130px); }
.lx-sg-grid { display: grid; gap: clamp(8px, 1.2vw, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-sg-grid .lx-media { border-radius: min(var(--r-media), 10px); aspect-ratio: 4 / 5; }
.lx-sg-grid .g0 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
/* Six: the large piece and four on a phone (the sixth would sit alone). */
@media (max-width: 859px) { .lx-sg-grid.n6 .g5 { display: none; } }
@media (min-width: 860px) {
  .lx-sg-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lx-sg-grid .g0 { grid-column: 1 / span 8; grid-row: span 2; aspect-ratio: auto; }
  .lx-sg-grid .g1, .lx-sg-grid .g2 { grid-column: span 4; aspect-ratio: 4 / 3.2; }
  .lx-sg-grid .g3, .lx-sg-grid .g4, .lx-sg-grid .g5 { grid-column: span 4; aspect-ratio: 4 / 5; }
  .lx-sg-grid.n1 .g0 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 21 / 9; }
}
.lx-sg-pk { padding-bottom: clamp(80px, 11vw, 140px); }

/* ---- Unfold ------------------------------------------------------------ */
.lx-uf-hero { position: sticky; top: 0; height: 100vh; height: var(--lx-vh); min-height: 520px; overflow: hidden; color: #fff; background: #000; z-index: 0; }
.lx-uf-heromedia { will-change: transform; transform-origin: 50% 40%; }
.lx-uf-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.lx-uf-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  padding: 0 var(--lx-pad) clamp(56px, 10vh, 110px); will-change: transform, opacity; }
.lx-uf-cap .lx-h1 { font-size: clamp(46px, 9vw, 136px); }
.lx-uf-cap .lx-tagline { color: rgba(255,255,255,.85); max-width: 520px; }
.lx-uf-cue { width: 1px; height: 48px; margin-top: 18px; background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,0)); }
.lx-uf-panel { position: relative; z-index: 1; background: var(--bg); border-radius: 28px 28px 0 0; margin-top: -28px; box-shadow: 0 -30px 60px -30px rgba(0,0,0,.35); }
.lx-uf-panel .lx-about { padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(96px, 16vh, 180px); }
.lx-uf-spacer { height: 16vh; }
.lx-uf-reveal, .lx-uf-reel, .lx-uf-stack, .lx-uf-pkempty, .lx .on-panel, .lx-uf-close, .lx-unfold .lx-foot { position: relative; z-index: 1; background: var(--bg); }
.lx-uf-reveal { height: 260vh; }
.lx-uf-pin { position: sticky; top: 0; height: 100vh; height: var(--lx-vh); overflow: hidden; }
.lx-uf-rmedia { will-change: clip-path; clip-path: inset(16% 22% round 22px); background: transparent; }
.lx-uf-rmedia > img, .lx-uf-rmedia > video { will-change: transform; transform: scale(1.18); }
.lx-uf-rmedia > img { transition: none; }
.lx-uf-rcap { position: absolute; left: 0; right: 0; bottom: clamp(48px, 9vh, 96px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 0 var(--lx-pad); color: #fff; opacity: 0; pointer-events: none; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.lx-uf-rcap .lx-eyebrow { color: rgba(255,255,255,.8); }
.lx-uf-reel { height: 300vh; }
.lx-uf-reel .lx-uf-pin { display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4vh, 40px); }
.lx-uf-reelhead { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; max-width: none; }
.lx-uf-track { display: flex; gap: clamp(14px, 2vw, 28px); padding: 0 var(--lx-pad); width: max-content; will-change: transform; }
.lx-uf-card { flex: none; width: min(74vw, 420px); }
.lx-uf-cardmedia { aspect-ratio: 4 / 5; border-radius: var(--lx-rm); max-height: 66vh; }
.lx-uf-stack { padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(80px, 14vh, 160px); }
.lx-uf-deck { display: flex; flex-direction: column; gap: 28px; max-width: 980px; margin: 0 auto; }
.lx-uf-pkg { position: sticky; top: calc(9vh + var(--i) * 18px); transform-origin: 50% 0; will-change: transform; background: var(--bg); }
@media (min-width: 820px) {
  .lx-uf-pkg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 440px; }
  .lx-uf-pkg .lx-pkg-pic { aspect-ratio: auto; }
}
.lx-uf-pkempty { padding: 80px var(--lx-pad); }
/* On a phone each card stays short enough to read whole before the next one covers it. */
@media (max-width: 819px) {
  .lx-uf-pkg .lx-pkg-pic { aspect-ratio: 16 / 9; }
  .lx-uf-pkg .lx-pkg-blurb { -webkit-line-clamp: 3; }
  .lx-uf-pkg .lx-pkg-body { gap: 10px; padding: 20px; }
}
@media (max-height: 680px) { .lx-uf-pkg { position: relative; top: auto; } }
.lx-uf-close.has-media .lx-close-media { inset: -14% 0; }
/* Unfold, held still (Reduce motion): the same panels without the movement. */
.lx-unfold.lx-still .lx-uf-hero { position: relative; }
.lx-unfold.lx-still .lx-uf-reveal, .lx-unfold.lx-still .lx-uf-reel { height: auto; }
.lx-unfold.lx-still .lx-uf-pin { position: relative; height: auto; overflow: visible; padding: 64px 0; }
.lx-unfold.lx-still .lx-uf-reveal .lx-uf-pin { height: 80vh; }
.lx-unfold.lx-still .lx-uf-rmedia { clip-path: none; }
.lx-unfold.lx-still .lx-uf-rmedia > img, .lx-unfold.lx-still .lx-uf-rmedia > video { transform: none; }
.lx-unfold.lx-still .lx-uf-rcap { opacity: 1; }
.lx-unfold.lx-still .lx-uf-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
.lx-unfold.lx-still .lx-uf-card { scroll-snap-align: start; }
.lx-unfold.lx-still .lx-uf-pkg { position: relative; top: auto; }

/* ---- In the editor --------------------------------------------------------
   Full-bleed parts keep their square edges and their outline inside the screen; the floating Edit buttons sit
   inside their part. */
body.arranging .lx .lx-bleed[data-edit], body.arranging .lx .lx-col-heromedia[data-edit] { border-radius: var(--lx-rm); }
body.arranging .lx .lx-bleed[data-edit] { border-radius: 0; outline-offset: -4px; }
body.arranging .lx [data-edit="work"], body.arranging .lx [data-edit="packages"] { outline-offset: 8px; }
.lx .lx-edit { position: absolute; top: auto; right: auto; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; padding: 7px 14px; font-size: 12px; }
.lx-pl-side .lx-edit, .lx-uf-hero .lx-edit { bottom: auto; top: 18px; }
.lx-rs-hero .lx-edit { bottom: 140px; }

/* ==== Fit and finish: phones, tablets, computers ==========================================================
   Buttons never run past the screen or sit at odd widths: a pair shares one width, and on a phone stacks full width
   (up to 360px, centred); long words wrap inside a button rather than off the page. */
.lx-btn { max-width: 100%; text-align: center; }
.lx-actions .lx-btn { min-width: 200px; }
@media (max-width: 560px) {
  .lx-btn { white-space: normal; line-height: 1.3; padding: 14px 22px; letter-spacing: .14em; }
  .lx-btn.sm { white-space: nowrap; padding: 0 16px; }
  .lx-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .lx-actions.center, .lx-close .lx-actions, .lx-sg-cap .lx-actions { margin-left: auto; margin-right: auto; }
  .lx-actions .lx-btn { min-width: 0; width: 100%; }
  .lx-pl-body > .lx-actions { margin-top: 4px; }
}
@media (max-width: 380px) {
  .lx { --lx-pad: 18px; }
  .lx-btn { letter-spacing: .1em; padding-left: 18px; padding-right: 18px; }
  .lx-btn.sm { padding: 0 14px; font-size: 10.5px; }
  .lx-h1 { font-size: 36px; }
}

/* The top bar: the brand gives way (its name trims) before the Inquire button does; the centred bar's links wrap
   onto a second line rather than off the screen. */
.lx-top .lx-nav { flex: none; }
.lx-top.center .lx-nav { flex-wrap: wrap; justify-content: center; row-gap: 10px; max-width: 100%; }
@media (max-width: 380px) { .lx-top:not(.center) .lx-brand .lx-logo.sm { display: none; } }

/* Gallery Wall's links: on a phone one even column (the first filled), never ragged rows. */
@media (max-width: 560px) {
  .lx-pills { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 340px; }
  .lx-pill { justify-content: center; min-height: 48px; }
}

/* Screening: on a phone the play button is just its triangle in a ring, so the film's title keeps the room. */
.lx-sc-play { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 560px) {
  .lx-sc-meta { gap: 14px; }
  .lx-sc-play { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 34%, transparent); }
  .lx-sc-play::before { margin-left: 3px; }
  .lx-sc-play-t { display: none; }
  .lx-sc-title { font-size: 19px; }
}

/* Offers on a phone: the code and the button each a full, even row. */
@media (max-width: 560px) {
  .lx-offer-side { flex-direction: column; align-items: stretch; gap: 10px; }
  .lx-offer-code { justify-content: center; }
  .lx-offers.band .lx-offer-ends, .lx-offers.card .lx-offer-ends { text-align: center; }
}

/* Swipe rows end with the same room they start with. */
.lx-strip::after { content: ''; flex: 0 0 calc(var(--lx-pad) - 12px); }

/* Price List on a phone: the price drops under a long name instead of squeezing it. */
@media (max-width: 420px) {
  .lx-pl-line { flex-wrap: wrap; row-gap: 4px; }
  .lx-pl-name { flex: 1 1 100%; }
  .lx-leader { display: none; }
}

/* Reserve's lead collection on a tablet keeps its photo beside its words only when there's room for both. */
@media (min-width: 860px) and (max-width: 1023px) { .lx-rs-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } }

/* Edit pills sit inside their part (on a full-width part they'd hang off the screen). */
.lx .edit-tag:not(.lx-edit) { top: 8px; right: 8px; }
/* The centred bar (Collections): a long studio name wraps onto a second line rather than trimming. */
.lx-top.center .lx-brand { max-width: 100%; }
.lx-top.center .lx-brand-name { white-space: normal; text-align: center; line-height: 1.5; }

/* Bio Card on a phone: the card is the whole screen — edge to edge and at least full height, no blurred border
   (a phone has no room to spare). The floating card on its blurred wash is for wider screens. */
@media (max-width: 560px) {
  .lx-biocard { padding: 0; }
  .lx-bc-bg { display: none; }
  .lx-bc-card { max-width: none; min-height: 100vh; min-height: var(--lx-vh); border-radius: 0; box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom); }
}

/* Bio Card on a tablet and computer: a wider card, with roomier insides and a wider, shorter cover so it doesn't
   grow tall with it. */
@media (min-width: 561px) {
  .lx-bc-card { max-width: 600px; }
  .lx-bc-cover { aspect-ratio: 16 / 9; }
  .lx-bc-links { padding: 30px 36px 8px; gap: 12px; }
  .lx-bc-work { padding: 30px 36px 4px; }
  .lx-bc-grid { gap: 8px; }
  .lx-bc-card .lx-offers.card, .lx-bc-card .lx-stories.card { max-width: none; padding-left: 36px; padding-right: 36px; }
  .lx-bc-id .lx-tagline { max-width: 420px; }
}
@media (min-width: 1000px) {
  .lx-bc-card { max-width: 700px; }
  .lx-bc-name { font-size: 36px; }
  .lx-bc-links, .lx-bc-work { padding-left: 48px; padding-right: 48px; }
  .lx-bc-card .lx-offers.card, .lx-bc-card .lx-stories.card { padding-left: 48px; padding-right: 48px; }
}

/* Price List on a phone: each collection is its name (and price) and description — what's included waits for the
   Pricing Guide. */
@media (max-width: 560px) {
  .lx-pl-inc { display: none; }
  .lx-pl-blurb { -webkit-line-clamp: 3; }
}

/* In the editor: a section you've hidden stays on the page faded (visitors don't see it), so a tap brings it back. */
body.arranging .lx .lx-off { opacity: .32; filter: grayscale(.6); transition: opacity .2s; }
body.arranging .lx .lx-off:hover { opacity: .6; }

/* ---- In the editor: what can be tapped, and the lines between sections ---------------------------------------
   Outlines sit just inside each section (a full-width section's outside edge is off the screen), and each section
   gets a line above it — its name and + — as on the Custom layout, with room around it. */
body.arranging .lx [data-edit^="ls:"], body.arranging .lx [data-edit^="x:"], body.arranging .lx .lx-qualify-in[data-edit],
body.arranging .lx .lx-bc-links[data-edit], body.arranging .lx .lx-bp-links[data-edit], body.arranging .lx .lx-pills[data-edit] { outline-offset: -6px; outline-width: 2px; }
body.arranging .lx .lx-bleed[data-edit], body.arranging .lx .lx-uf-reveal[data-edit], body.arranging .lx .lx-uf-reel[data-edit] { outline-offset: -8px; }
.lx-bar { position: relative; z-index: 4; margin: 0; padding: 18px var(--lx-pad); background: var(--bg); }
.lx-bar .arrange-knob span { max-width: 220px; }
.lx-pl-body > .lx-bar, .lx-bc-card > .lx-bar { padding-left: 0; padding-right: 0; }
.lx-bc-card > .lx-bar { padding-left: 20px; padding-right: 20px; }
/* (Unfold's panel no longer tucks under the film while editing, so its line has room.) */
body.arranging .lx-uf-panel { margin-top: 0; }

/* The dashed outline (home-layouts.js addRings): on the innermost part under the pointer, and on the part being
   edited — its own layer, above the part's photos and backgrounds. Replaces the outline itself inside layouts. */
body.arranging .lx [data-edit] { outline: none !important; }
.lx-ring { position: absolute; z-index: 7; pointer-events: none; border: 2px dashed var(--muted); border-radius: inherit;
  opacity: 0; transition: opacity .18s ease; }
.lx-ring.in { inset: 6px; border-radius: max(0px, calc(var(--lx-r) - 6px)); }
.lx-ring.out { inset: -6px; }
.lx-bleed > .lx-ring.in, .lx-uf-reveal > .lx-ring.in, .lx-uf-reel > .lx-ring.in { border-radius: 0; inset: 8px; }
body.arranging .lx [data-edit].lx-hover > .lx-ring { opacity: .85; }
body.arranging .lx [data-edit].lx-picked > .lx-ring { opacity: 1; border-color: var(--fg); }

/* The big headers are tappable as a whole in the editor (their photo or film) — they keep their own position:
   pinned (Price List on a computer, Unfold) or laid over the page. */
body.arranging .lx .lx-uf-hero[data-edit] { position: sticky; }
@media (min-width: 960px) { body.arranging .lx .lx-pl-side[data-edit] { position: sticky; } }
body.arranging .lx .lx-bleed[data-edit], body.arranging .lx .lx-uf-hero[data-edit], body.arranging .lx .lx-pl-side[data-edit] { border-radius: 0; }
.lx-uf-hero > .lx-ring.in, .lx-pl-side > .lx-ring.in { border-radius: 0; inset: 8px; }