/* VENDORED from design-concepts/APPROVED/shared/sets/B.css by scripts/gen/vendor-board.mjs. Do not edit: check-vendored-board.mjs re-derives this file and FAILS on drift. Transforms: board font folder -> /fonts/; board set assets -> /images/. */ /* APPROVED copy (TASK-CO1, 2026-10-16) of design-concepts/variant-V2-the-mark/modules/B.css: the frozen design reference for Phase 2 ([R25], GATE 1.5 R-24). Edit nothing here; a change is a new ruling. */ /* V2 The Mark (set B): the 12 homepage modules (TASK-W2, 2026-10-16). Every selector is scoped to [data-variant="B"] (shared/CONTRACT.md 4). Same identity as V1 (the team's tokens: navy --ink, cream, bronze the ONE accent, Instrument Serif + Manrope, Lucide 1.5); the page is built from the logo's construction (brand guide p11): - the AXIS OF TIME: one bronze hairline (1 px, 40%) at the same x on every cream chapter (--li2-ax = the wrap's content edge); text sits one indent to its right (--li2-in). It pauses on navy bands, starts under the hero's loop and ends in the closing band's loop. - the SEAMLESS LOOP: the submark drawn once in the hero and again as the axis's end cap (.li2-loop). - the PROTECTIVE MEMBRANE: every photograph sits in a plate with an inner ivory ring and opens from a clip-path inset (.li2-plate). Grounds (WORLD-BRIEF field 6): hero cream + footage plate · why cream · proof navy · booking cream-hi · routing cream · conditions cream-hi · providers cream · payment cream-hi strip · gallery cream · locations navy · FAQ cream · CTA navy with the loop end cap. Motion is GSAP only (B.js); CSS transitions are hover / press / open state only. Never #000. */ /* =========================================================== shared within B */ [data-variant="B"] { position: relative; --li2-in: 0px; --li2-mark: 44px; --li2-ax: calc(max(0px, (100% - var(--maxw)) / 2) + var(--gut)); --li2-axis-c: rgba(183,139,91,.4); --li2-h2: clamp(2.5rem, 1.75rem + 3.2vw, 4.3rem); } @media (min-width: 768px) { [data-variant="B"] { --li2-in: clamp(1.75rem, .9rem + 2.4vw, 3rem); --li2-mark: 52px; } } [data-variant="B"] .li2-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); padding-left: calc(var(--gut) + var(--li2-in)); } [data-variant="B"] .li-eyebrow + h2 { margin-top: 1.15rem; } [data-variant="B"] h2 .li-em { font-style: italic; color: var(--bronze-dk); } /* the axis of time (one segment per cream chapter; B.js draws it with the scroll) */ [data-variant="B"] .li2-axis { display: none; } @media (min-width: 768px) { [data-variant="B"] .li2-axis { display: block; position: absolute; top: 0; bottom: 0; left: var(--li2-ax); width: 1px; margin-left: -.5px; background: var(--li2-axis-c); transform-origin: 50% 0; pointer-events: none; z-index: 0; } } /* the L+I loop: the filled submark (rest state) under its centreline trace (drawn by B.js) */ [data-variant="B"] .li2-loop { position: relative; display: inline-block; flex: none; width: var(--li2-mark); height: var(--li2-mark); color: var(--bronze); } [data-variant="B"] .li2-loop-fill, [data-variant="B"] .li2-loop-trace { position: absolute; inset: 0; width: 100%; height: 100%; } [data-variant="B"] .li2-loop-trace { opacity: 0; overflow: visible; } /* the membrane plate: inner ivory ring, soft tinted depth; B.js opens it from a clip-path inset */ [data-variant="B"] .li2-plate { position: relative; margin: 0; } [data-variant="B"] .li2-plate-in { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--sand); isolation: isolate; } [data-variant="B"] .li2-plate-img { display: block; width: 100%; height: 100%; object-fit: cover; } [data-variant="B"] .li2-plate-in::after { content: ""; position: absolute; inset: 10px; z-index: 2; border: 1px solid rgba(252,250,244,.46); border-radius: calc(var(--r-l) - 10px); pointer-events: none; } [data-variant="B"] .li2-plate-cap { margin-top: .85rem; font-size: .84rem; color: var(--ink-62); line-height: 1.5; } /* =========================================================== 1. HERO "Daylight" (cream page, footage plate, the loop) */ [data-variant="B"].li2-hero { background: var(--cream); color: var(--ink); min-height: calc(100vh - var(--li-announce-h, 38px)); min-height: calc(100svh - var(--li-announce-h, 38px)); overflow: clip; isolation: isolate; } /* the hero starts under the announcement bar, so it clears only the island: --li-head-clear minus the bar */ [data-variant="B"] .li2-hero-in { position: relative; z-index: 2; padding-top: calc(var(--li-head-clear) - var(--li-announce-h, 38px) + clamp(1.25rem, 4vh, 2.75rem)); padding-bottom: clamp(2.5rem, 7vh, 4.5rem); } [data-variant="B"] .li2-hero-copy { position: relative; } [data-variant="B"] .li2-hero-axis { display: none; } [data-variant="B"] .li2-hero-kicker { position: relative; display: flex; align-items: center; gap: .85rem; min-height: var(--li2-mark); } /* [R36] / R-12: the exact H1 as the small super-headline, first heading in the hero */ [data-variant="B"] .li2-hero-h1 { font-family: var(--f-b); font-size: var(--s-super); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1.35; color: var(--ink); } [data-variant="B"] .li2-hero-display { font-family: var(--f-d); font-weight: 400; font-size: var(--s-6); line-height: .97; letter-spacing: -.018em; color: var(--ink); margin-top: clamp(1.1rem, 2.2vw, 1.6rem); } [data-variant="B"] .li2-hero-display .li2-line-mask { padding-bottom: .1em; margin-bottom: -.1em; } [data-variant="B"] .li2-hero-lede { max-width: 46ch; margin-top: clamp(1.2rem, 2.2vw, 1.7rem); color: var(--ink-72); font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height: 1.6; } [data-variant="B"] .li2-hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(1.6rem, 2.8vw, 2.2rem); } [data-variant="B"] .li2-hero-proof { margin-top: clamp(1.2rem, 2vw, 1.7rem); } /* the footage plate: the real 2025 clip in a warm neutral grade, opened like the membrane (rounded on the page side, bleeding off the edge) */ [data-variant="B"] .li2-hero-plate { position: relative; z-index: 1; overflow: hidden; background: var(--sand); isolation: isolate; } [data-variant="B"] .li2-hero-media { position: absolute; inset: 0; } [data-variant="B"] .li2-hero-poster, [data-variant="B"] .li2-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; filter: saturate(.8) sepia(.12) contrast(1.02); } [data-variant="B"] .li2-hero-video { opacity: 0; } [data-variant="B"] .li2-hero-grade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(244,238,225,.10) 0%, rgba(183,139,91,.10) 55%, rgba(29,56,91,.16) 100%); } [data-variant="B"] .li2-hero-ring { position: absolute; inset: 12px; z-index: 2; pointer-events: none; border: 1px solid rgba(252,250,244,.5); border-radius: calc(var(--r-xl) - 12px); } /* the axis's caption: the practice's own line */ [data-variant="B"] .li2-hero-cap { position: absolute; z-index: 3; margin: 0; font-family: var(--f-d); font-style: italic; color: var(--bronze-dk); line-height: 1; } [data-variant="B"] .li2-hero-cap span { display: inline-block; } /* motion armed: the display line waits for SplitText; the lede waits for the Daylight timeline (reduced motion / no JS: all static) */ [data-variant="B"]:is(.li-motion *) .li2-hero-display { visibility: hidden; } [data-variant="B"]:is(.li-motion *) .li2-hero-lede { opacity: 0; } @media (min-width: 768px) { [data-variant="B"] .li2-hero-kicker .li2-loop--hero { position: absolute; left: calc(-1 * var(--li2-in)); top: 50%; translate: -50% -50%; } [data-variant="B"] .li2-hero-axis { display: block; position: absolute; left: calc(-1 * var(--li2-in)); top: calc(var(--li2-mark) + .6rem); width: 1px; height: 200vh; margin-left: -.5px; background: var(--li2-axis-c); transform-origin: 50% 0; pointer-events: none; } } @media (min-width: 1024px) { [data-variant="B"] .li2-hero-copy { width: min(100%, calc(56vw - max(0px, (100vw - var(--maxw)) / 2) - var(--gut) - var(--li2-in) - 2rem)); } /* a landscape plate from the display line to the call row, bleeding off the right edge: the 1300 x 600 clip shows ~58% of its width at 0.83x (sharp), not a tall crop of it */ [data-variant="B"] .li2-hero-plate { position: absolute; left: 56%; right: 0; top: 27%; bottom: 15%; border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: 0 30px 70px -40px rgba(29,56,91,.45); } [data-variant="B"] .li2-hero-ring { right: 0; border-right: 0; border-radius: calc(var(--r-xl) - 12px) 0 0 calc(var(--r-xl) - 12px); } /* the caption runs up the axis in the margin (1280+, where the margin can hold it; 1024 to 1279 it rests: the footer carries the line) */ [data-variant="B"] .li2-hero-cap { left: calc(var(--li2-ax) - 1.85rem); bottom: clamp(2.5rem, 7vh, 4.5rem); font-size: 1.05rem; writing-mode: vertical-rl; rotate: 180deg; } } @media (min-width: 1024px) and (max-width: 1279.98px) { [data-variant="B"] .li2-hero-cap { display: none; } } /* =========================================================== 2. WHY US (intro, mission, the room opens, three reasons) */ [data-variant="B"].li2-why { background: var(--cream); padding-block: var(--sp-open); overflow-x: clip; } [data-variant="B"] .li2-intro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: 2rem; align-items: start; } [data-variant="B"] .li2-intro-h { font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; max-width: 12.5ch; } [data-variant="B"] .li2-intro-body { display: grid; gap: 1.3rem; padding-top: clamp(0rem, 10vw, 9.5rem); } [data-variant="B"] .li2-intro-body p { color: var(--ink-72); line-height: 1.8; max-width: 60ch; } [data-variant="B"] .li2-intro-body strong { color: var(--ink); } /* the mission: a double-bezel card on the cream page (TASTE section 3) */ [data-variant="B"] .li2-mission { margin-top: clamp(4rem, 7vw, 6.5rem); padding: .6rem; border-radius: var(--r-xl); background: rgba(29,56,91,.035); border: 1px solid var(--ink-09); } [data-variant="B"] .li2-mission-in { display: grid; grid-template-columns: auto minmax(0, .85fr) minmax(0, 1fr); column-gap: clamp(1.6rem, 4vw, 4rem); row-gap: 1.4rem; align-items: start; padding: clamp(2.2rem, 5vw, 4.4rem); border-radius: calc(var(--r-xl) - .6rem); background: var(--cream-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh-1); } [data-variant="B"] .li2-mission-mark { width: 46px; height: 46px; margin-top: .35rem; } [data-variant="B"] .li2-mission-h { font-size: clamp(2rem, 1.5rem + 1.9vw, 3.2rem); line-height: 1.06; letter-spacing: -.01em; max-width: 12ch; } [data-variant="B"] .li2-mission-text { color: var(--ink-72); font-size: clamp(1.05rem, .98rem + .35vw, 1.24rem); line-height: 1.72; } [data-variant="B"] .li2-mission-text strong { color: var(--ink); } /* the room opens: BASE = the static final frame (no JS, reduced motion, below 1024): heading halves at rest above the full plate */ [data-variant="B"] .li2-room { position: relative; z-index: 1; margin-top: clamp(4.5rem, 8vw, 7rem); } [data-variant="B"] .li2-room-stage { display: flex; flex-direction: column; gap: clamp(1.8rem, 3.6vw, 2.8rem); width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); padding-left: calc(var(--gut) + var(--li2-in)); } [data-variant="B"] .li2-room-h { order: -1; display: flex; flex-direction: column; font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; } [data-variant="B"] .li2-room-l, [data-variant="B"] .li2-room-r { display: block; } [data-variant="B"] .li2-room-r { padding-left: clamp(1.5rem, 9vw, 9rem); font-style: italic; color: var(--bronze-dk); } [data-variant="B"] .li2-room-media { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--sand); aspect-ratio: 16 / 8.4; isolation: isolate; } [data-variant="B"] .li2-room-fill { position: absolute; inset: 0; } [data-variant="B"] .li2-room-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 62%; transform-origin: 50% 50%; } [data-variant="B"] .li2-room-ring { position: absolute; inset: 12px; z-index: 2; pointer-events: none; border: 1px solid rgba(252,250,244,.55); border-radius: calc(var(--r-xl) - 12px); } [data-variant="B"] .li2-room-cap { position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 3; font-size: .78rem; font-weight: 600; color: var(--ink); background: rgba(252,250,244,.92); border-radius: var(--r-pill); padding: .42rem .95rem; box-shadow: var(--sh-1); } /* LIVE (motion allowed, 1024+): a full-viewport stage that B.js pins; the photo is laid out at its final size and clipped to a card */ @media (min-width: 1024px) { [data-variant="B"]:is(.li-motion *) .li2-room-stage { position: relative; display: grid; place-items: center; height: 100vh; height: 100svh; max-width: none; padding: 0; overflow: hidden; background: var(--cream); } /* the photo is centred a little below the middle (the island floats over the stage top); the card is 300 x 220 at rest */ [data-variant="B"]:is(.li-motion *) .li2-room-media { position: absolute; left: 50%; top: calc(50% + 2.2rem); translate: -50% -50%; width: min(92vw, 1240px); height: min(74svh, 680px); aspect-ratio: auto; clip-path: inset(calc(50% - 110px) calc(50% - 150px) round 28px); } /* the heading halves sit either side of the card: the photo opens and the words make room for it */ [data-variant="B"]:is(.li-motion *) .li2-room-h { position: absolute; inset: 0; z-index: 2; order: 0; flex-direction: row; align-items: center; justify-content: center; column-gap: calc(300px + 4.4rem); padding-top: 4.4rem; font-size: clamp(2.3rem, 1.3rem + 2.3vw, 3.5rem); line-height: 1.06; pointer-events: none; } [data-variant="B"]:is(.li-motion *) .li2-room-l, [data-variant="B"]:is(.li-motion *) .li2-room-r { flex: none; width: calc(50% - 150px - 2.2rem); padding-left: 0; } [data-variant="B"]:is(.li-motion *) .li2-room-l { text-align: right; } } /* the three reasons: numbered rows on the axis */ [data-variant="B"] .li2-why-points { margin-top: clamp(4rem, 7vw, 6.5rem); } [data-variant="B"] .li2-points { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ink-16); } [data-variant="B"] .li2-point { display: grid; grid-template-columns: 4rem minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: .8rem; align-items: baseline; padding: clamp(1.7rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--ink-16); } [data-variant="B"] .li2-point-n { font-family: var(--f-d); font-style: italic; font-size: 1.7rem; line-height: 1; color: var(--bronze); } [data-variant="B"] .li2-point-h { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.15rem); line-height: 1.14; max-width: 18ch; } [data-variant="B"] .li2-point-b { color: var(--ink-72); line-height: 1.8; max-width: 58ch; } [data-variant="B"] .li2-point-b strong { color: var(--ink); } [data-variant="B"] .li2-why-cta { margin-top: clamp(2rem, 3.4vw, 2.8rem); } /* =========================================================== 3. PROOF WALL "In their words" (navy; the axis pauses) */ [data-variant="B"].li2-proof { background: var(--ink); color: var(--cod); padding-block: var(--sp-open); overflow-x: clip; } [data-variant="B"] .li2-proof-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.6rem 3rem; } [data-variant="B"] .li2-proof-h { color: var(--cream); font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; max-width: 12ch; } [data-variant="B"] .li2-proof-h .li-em { color: var(--bronze); } [data-variant="B"] .li2-proof-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; } [data-variant="B"] .li2-proof-rating { display: inline-flex; align-items: center; gap: .7rem; color: var(--cod); font-weight: 500; border-bottom: 1px solid rgba(239,227,206,.3); padding-bottom: 2px; transition: border-color .3s var(--ease); } [data-variant="B"] .li2-proof-rating:hover { border-color: var(--cod); } [data-variant="B"] .li2-pending { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cod); border: 1px dashed rgba(239,227,206,.45); border-radius: var(--r-pill); padding: .3rem .75rem; } /* the ink-in quote */ [data-variant="B"] .li2-ink { position: relative; margin: clamp(3.5rem, 6vw, 5.5rem) 0 0; max-width: 60rem; } [data-variant="B"] .li2-ink-glyph { position: absolute; left: -.06em; top: -.42em; font-family: var(--f-d); font-size: clamp(7rem, 5rem + 6vw, 11rem); line-height: 1; color: var(--bronze); opacity: .5; pointer-events: none; } [data-variant="B"] .li2-ink-bq { margin: 0; position: relative; } [data-variant="B"] .li2-ink-q { font-family: var(--f-d); font-size: clamp(1.7rem, 1.1rem + 2.1vw, 3rem); line-height: 1.22; letter-spacing: -.006em; color: var(--cream); text-indent: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); } [data-variant="B"] .li2-ink-q .li2-word { text-indent: 0; } [data-variant="B"] .li2-ink-who { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: clamp(1.6rem, 3vw, 2.3rem); } [data-variant="B"] .li2-ink-n { font-family: var(--f-d); font-size: 1.35rem; color: var(--cream); } [data-variant="B"] .li2-ink-src { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); transition: color .3s var(--ease); } [data-variant="B"] .li2-ink-src:hover { color: var(--cream); } /* the calm rail: the other four reviews, a thin progress line instead of dots */ [data-variant="B"] .li2-rail { margin-top: clamp(3.5rem, 6vw, 5rem); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 1.4rem) / 3); gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .2rem .1rem .4rem; outline-offset: 4px; } [data-variant="B"] .li2-rail::-webkit-scrollbar { display: none; } [data-variant="B"] .li2-rev { scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.6rem, 2.2vw, 2.1rem); border-radius: var(--r-l); background: rgba(239,227,206,.05); border: 1px solid var(--line-dark); box-shadow: inset 0 1px 0 rgba(239,227,206,.06); } [data-variant="B"] .li2-rev-q { margin: 0; } [data-variant="B"] .li2-rev-q p { color: rgba(239,227,206,.86); font-size: .96rem; line-height: 1.75; } [data-variant="B"] .li2-rev-who { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: .6rem; } [data-variant="B"] .li2-rev-av { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--cream); background: linear-gradient(140deg, var(--teal), var(--bronze-dk)); font-family: var(--f-d); font-size: 1rem; } [data-variant="B"] .li2-rev-meta { display: flex; flex-direction: column; gap: .2rem; } [data-variant="B"] .li2-rev-n { font-family: var(--f-d); font-size: 1.15rem; line-height: 1.1; color: var(--cream); } [data-variant="B"] .li2-rev-src { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); } [data-variant="B"] .li2-rev-src:hover { color: var(--cream); } [data-variant="B"] .li2-rail-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.8rem; } [data-variant="B"] .li2-rail-bar { position: relative; display: block; flex: 1 1 14rem; max-width: 24rem; height: 1px; background: var(--line-dark); overflow: hidden; } [data-variant="B"] .li2-rail-fill { position: absolute; inset: 0; background: var(--bronze); transform-origin: 0 50%; transform: scaleX(.75); } [data-variant="B"] .li2-proof-note { font-size: .84rem; color: var(--mist); } /* =========================================================== 4. BOOKING RAIL (cream-hi; the axis becomes the timeline) */ [data-variant="B"].li2-book { background: var(--cream-hi); padding-block: var(--sp-open); border-top: 1px solid var(--ink-09); } [data-variant="B"] .li2-book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } [data-variant="B"] .li2-book-h { font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; max-width: 11ch; } [data-variant="B"] .li2-book-lead { margin-top: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink-72); line-height: 1.75; max-width: 44ch; } /* the steps sit ON the axis: the list's left edge is the axis (one indent back), the dots are centred on it */ [data-variant="B"] .li2-steps { position: relative; list-style: none; padding: 0; margin: 1.2rem 0 0 calc(-1 * var(--li2-in)); } [data-variant="B"] .li2-step { position: relative; font-size: clamp(1.4rem, 1.15rem + .75vw, 1.8rem); padding: 1.05rem 0 1.05rem var(--li2-in); } [data-variant="B"] .li2-step::after { content: ""; position: absolute; left: var(--li2-in); right: 0; bottom: 0; height: 1px; background: var(--ink-09); } [data-variant="B"] .li2-step-dot { position: absolute; left: 0; top: calc(1.05rem + .6em); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 0 5px var(--cream-hi); z-index: 1; } [data-variant="B"] .li2-step-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--bronze); opacity: 0; } [data-variant="B"] .li2-step-t { display: block; font-family: var(--f-d); line-height: 1.2; color: var(--ink); max-width: 24ch; } [data-variant="B"] .li2-assure { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .8rem; } [data-variant="B"] .li2-assure li { display: flex; gap: .75rem; align-items: flex-start; color: var(--ink-72); line-height: 1.6; font-size: .96rem; } [data-variant="B"] .li2-assure svg { width: 20px; height: 20px; flex: none; color: var(--bronze-dk); margin-top: .1rem; } [data-variant="B"] .li2-book-proof { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--ink-09); } @media (min-width: 1024px) { [data-variant="B"] .li2-book-host { position: sticky; top: calc(var(--li-head-clear) - var(--li-announce-h, 38px) + .5rem); } } /* =========================================================== 5. ENTITY ROUTING (numbered index, one real plate per hub, the elevated three) */ [data-variant="B"].li2-route { background: var(--cream); padding-block: var(--sp-open); overflow-x: clip; } [data-variant="B"] .li2-route-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 1.6rem clamp(2.5rem, 6vw, 6rem); align-items: end; } [data-variant="B"] .li2-route-h { font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; max-width: 12ch; } [data-variant="B"] .li2-route-intro { color: var(--ink-72); line-height: 1.8; max-width: 46ch; } [data-variant="B"] .li2-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3rem, 5vw, 4.5rem); border-top: 1px solid var(--ink-16); } [data-variant="B"] .li2-index-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1.2rem 1.2rem 1.35rem 0; text-align: left; border-bottom: 1px solid var(--ink-16); transition: color .3s var(--ease); } [data-variant="B"] .li2-index-tab::after { content: ""; position: absolute; left: 0; right: 1.2rem; bottom: -1px; height: 2px; background: var(--bronze); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--eout); } [data-variant="B"] .li2-index-n { font-family: var(--f-d); font-style: italic; font-size: 1.25rem; line-height: 1; color: var(--ink-40); transition: color .3s var(--ease); } [data-variant="B"] .li2-index-l { font-family: var(--f-d); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.2; color: var(--ink-72); transition: color .3s var(--ease); } [data-variant="B"] .li2-index-tab:hover .li2-index-l { color: var(--ink); } [data-variant="B"] .li2-index-tab.is-active .li2-index-n { color: var(--bronze); } [data-variant="B"] .li2-index-tab.is-active .li2-index-l { color: var(--ink); } [data-variant="B"] .li2-index-tab.is-active::after { transform: scaleX(1); } [data-variant="B"] .li2-hubs { margin-top: clamp(2.4rem, 4vw, 3.4rem); } [data-variant="B"] .li2-hub { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; } [data-variant="B"] .li2-hub + .li2-hub { margin-top: 4.5rem; } [data-variant="B"]:is(.js *) .li2-hub + .li2-hub { margin-top: 0; } [data-variant="B"] .li2-hub[hidden] { display: none; } [data-variant="B"] .li2-hub-plate .li2-plate-in { aspect-ratio: 4 / 4.7; } [data-variant="B"] .li2-hub-plate .li2-plate-img { object-position: 60% 45%; } [data-variant="B"] .li2-hub-h { font-size: clamp(2rem, 1.55rem + 1.6vw, 2.9rem); line-height: 1.1; letter-spacing: -.008em; } [data-variant="B"] .li2-hub-h a { transition: color .3s var(--ease); } [data-variant="B"] .li2-hub-h a:hover { color: var(--bronze-dk); } [data-variant="B"] .li2-hub-body { margin-top: 1.1rem; color: var(--ink-72); line-height: 1.8; max-width: 52ch; } [data-variant="B"] .li2-hub-items { margin-top: clamp(1.8rem, 3vw, 2.4rem); border-top: 1px solid var(--ink-16); } [data-variant="B"] .li2-hub-item { display: grid; gap: .6rem; justify-items: start; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--ink-16); } [data-variant="B"] .li2-hub-item-h { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); line-height: 1.16; } [data-variant="B"] .li2-hub-item p { color: var(--ink-62); font-size: .95rem; line-height: 1.7; max-width: 58ch; } /* the elevated three */ [data-variant="B"] .li2-elev { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; margin-top: clamp(5rem, 9vw, 8rem); padding-top: clamp(4rem, 7vw, 6rem); border-top: 1px solid var(--ink-16); } [data-variant="B"] .li2-elev-h { font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.9rem); line-height: 1.05; letter-spacing: -.012em; max-width: 13ch; } [data-variant="B"] .li2-elev-head > p { margin-top: 1.3rem; color: var(--ink-72); line-height: 1.8; max-width: 50ch; } [data-variant="B"] .li2-elev-plate { margin-top: clamp(2rem, 3.4vw, 2.8rem); } [data-variant="B"] .li2-elev-plate .li2-plate-in { aspect-ratio: 16 / 10; } [data-variant="B"] .li2-elev-plate .li2-plate-img { object-position: 62% 50%; } [data-variant="B"] .li2-elev-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-16); } [data-variant="B"] .li2-elev-item { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1.3rem; padding: clamp(1.7rem, 2.8vw, 2.3rem) 0; border-bottom: 1px solid var(--ink-16); } [data-variant="B"] .li2-elev-ic { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; color: var(--teal); border: 1px solid rgba(183,139,91,.45); } [data-variant="B"] .li2-elev-ic svg { width: 22px; height: 22px; } [data-variant="B"] .li2-elev-b { display: grid; gap: .7rem; justify-items: start; } [data-variant="B"] .li2-elev-item-h { font-size: clamp(1.5rem, 1.25rem + .7vw, 1.9rem); line-height: 1.14; } [data-variant="B"] .li2-elev-item-h a { transition: color .3s var(--ease); } [data-variant="B"] .li2-elev-item-h a:hover { color: var(--bronze-dk); } [data-variant="B"] .li2-elev-b p { color: var(--ink-62); font-size: .96rem; line-height: 1.72; max-width: 56ch; } /* =========================================================== 6. CONDITION ROUTER (cream-hi; a type-led index) */ [data-variant="B"].li2-cond { background: var(--cream-hi); padding-block: var(--sp-open); border-block: 1px solid var(--ink-09); } [data-variant="B"] .li2-cond-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 1.6rem clamp(2.5rem, 6vw, 6rem); align-items: end; } [data-variant="B"] .li2-cond-h { font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; max-width: 15ch; } [data-variant="B"] .li2-cond-intro { color: var(--ink-72); line-height: 1.8; max-width: 48ch; } [data-variant="B"] .li2-cond-list { list-style: none; margin: clamp(3rem, 5vw, 4.5rem) 0 0; padding: 0; border-top: 1px solid var(--ink-16); } [data-variant="B"] .li2-cond-row { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 1rem; align-items: center; padding: clamp(1.9rem, 3.2vw, 2.7rem) 0; border-bottom: 1px solid var(--ink-16); } [data-variant="B"] .li2-cond-n { font-family: var(--f-d); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--bronze); } [data-variant="B"] .li2-cond-name { font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); line-height: 1; letter-spacing: -.014em; } [data-variant="B"] .li2-cond-name a { transition: color .4s var(--ease); } [data-variant="B"] .li2-cond-name a:hover, [data-variant="B"] .li2-cond-row:focus-within .li2-cond-name a { color: var(--bronze-dk); } [data-variant="B"] .li2-cond-b { display: grid; gap: .8rem; justify-items: start; } [data-variant="B"] .li2-cond-b p { color: var(--ink-72); font-size: .98rem; line-height: 1.75; max-width: 54ch; } [data-variant="B"] .li2-cond-rule { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--eout); } [data-variant="B"] .li2-cond-row:hover .li2-cond-rule, [data-variant="B"] .li2-cond-row:focus-within .li2-cond-rule { transform: scaleX(1); } [data-variant="B"] .li2-cond-all { margin-top: clamp(2.2rem, 3.6vw, 3rem); } /* =========================================================== 7. PROVIDERS "Physician-led" */ [data-variant="B"].li2-doc { background: var(--cream); padding-block: var(--sp-open); overflow-x: clip; } [data-variant="B"] .li2-doc-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 3rem clamp(3rem, 7vw, 7.5rem); align-items: center; } [data-variant="B"] .li2-doc-media { position: relative; } [data-variant="B"] .li2-doc-plate .li2-plate-in { aspect-ratio: .78; border-radius: var(--r-xl); background: linear-gradient(150deg, #E8DCC6, #CBB083); } [data-variant="B"] .li2-doc-plate .li2-plate-in::after { border-radius: calc(var(--r-xl) - 10px); } [data-variant="B"] .li2-doc-plate .li2-plate-img { object-position: 50% 16%; } [data-variant="B"] .li2-doc-tag { position: absolute; right: clamp(-2.6rem, -2.6vw, -1rem); bottom: clamp(1.6rem, 3vw, 2.6rem); z-index: 2; padding: 1.05rem 1.4rem 1.15rem; border-radius: var(--r-m); background: var(--cream-hi); border: 1px solid var(--ink-09); box-shadow: var(--sh-2); } [data-variant="B"] .li2-doc-name { font-family: var(--f-d); font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); line-height: 1.1; color: var(--ink); } [data-variant="B"] .li2-doc-role { margin-top: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-dk); } [data-variant="B"] .li2-doc-h { font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; max-width: 12ch; } [data-variant="B"] .li2-doc-line { margin-top: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink-72); font-size: clamp(1rem, .96rem + .2vw, 1.1rem); line-height: 1.8; max-width: 54ch; } [data-variant="B"] .li2-doc-act { margin-top: clamp(1.8rem, 3vw, 2.4rem); } /* =========================================================== 8. PAYMENT STRIP (cream-hi, ruled) */ [data-variant="B"].li2-pay { background: var(--cream-hi); padding-block: var(--sp-open); border-block: 1px solid var(--ink-09); } [data-variant="B"] .li2-pay .li-pay-head .li-eyebrow + .li-pay-h { margin-top: .1rem; } [data-variant="B"] .li2-pay .li-pay-h { font-size: clamp(2.1rem, 1.6rem + 1.9vw, 3.2rem); } /* =========================================================== 9. GALLERY (the walkthrough strip of eight real rooms) */ [data-variant="B"].li2-gal { background: var(--cream); padding-block: var(--sp-open); overflow-x: clip; } [data-variant="B"] .li2-gal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.6rem 2rem; } [data-variant="B"] .li2-gal-h { font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; max-width: 13ch; } [data-variant="B"] .li2-gal-paddles { display: flex; gap: .6rem; } [data-variant="B"] .li2-paddle { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--ink-16); background: var(--cream-hi); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } [data-variant="B"] .li2-paddle:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); } [data-variant="B"] .li2-paddle:active { transform: scale(.96); } [data-variant="B"] .li2-paddle svg { width: 18px; height: 18px; } [data-variant="B"] .li2-gal-strip { position: relative; z-index: 1; display: flex; gap: clamp(1rem, 1.6vw, 1.4rem); margin-top: clamp(2.6rem, 4.5vw, 3.6rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: -4px; padding: .2rem var(--gut) .4rem calc(max(0px, (100% - var(--maxw)) / 2) + var(--gut) + var(--li2-in)); scroll-padding-left: calc(max(0px, (100% - var(--maxw)) / 2) + var(--gut) + var(--li2-in)); } [data-variant="B"] .li2-gal-strip::-webkit-scrollbar { display: none; } [data-variant="B"] .li2-stop { flex: none; width: min(340px, 74vw); margin: 0; scroll-snap-align: start; } [data-variant="B"] .li2-stop--wide { width: min(560px, 86vw); } [data-variant="B"] .li2-stop .li2-plate-in { height: clamp(300px, 30vw, 440px); } [data-variant="B"] .li2-stop .li2-plate-in { transition: box-shadow .5s var(--ease); } [data-variant="B"] .li2-stop:hover .li2-plate-in { box-shadow: 0 22px 44px -30px rgba(29,56,91,.55); } [data-variant="B"] .li2-stop-cap { display: flex; align-items: baseline; gap: .8rem; margin-top: 1rem; font-size: .86rem; line-height: 1.5; color: var(--ink-72); max-width: 36ch; } [data-variant="B"] .li2-stop-n { flex: none; font-family: var(--f-d); font-style: italic; font-size: 1.2rem; line-height: 1; color: var(--bronze); } [data-variant="B"] .li2-gal-bar { position: relative; display: block; max-width: 24rem; height: 1px; margin-top: clamp(1.8rem, 3vw, 2.4rem); background: var(--ink-16); overflow: hidden; } [data-variant="B"] .li2-gal-fill { position: absolute; inset: 0; background: var(--bronze); transform-origin: 0 50%; transform: scaleX(.3); } /* =========================================================== 10. LOCATIONS "Visit" (navy; the axis pauses) */ [data-variant="B"].li2-loc { background: var(--ink); color: var(--cod); padding-block: var(--sp-open); } [data-variant="B"] .li2-loc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: start; } [data-variant="B"] .li2-loc-h { color: var(--cream); font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; max-width: 11ch; } [data-variant="B"] .li2-loc-h .li-em { color: var(--bronze); } [data-variant="B"] .li2-loc-body { color: var(--mist); margin: 1.4rem 0 1.8rem; line-height: 1.75; max-width: 44ch; font-size: 1.06rem; } [data-variant="B"] .li2-loc-notes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); } [data-variant="B"] .li2-loc-notes li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line-dark); color: var(--cod); font-size: 1.06rem; line-height: 1.6; } [data-variant="B"] .li2-loc-n { font-family: var(--f-d); font-style: italic; font-size: 1.3rem; line-height: 1.2; color: var(--bronze); } [data-variant="B"] .li2-loc-side { padding-top: .4rem; } [data-variant="B"] .li2-loc-disc { margin-top: 1.2rem; font-size: .82rem; color: var(--mist); } /* =========================================================== 11. FAQ (the heading holds its column) */ [data-variant="B"].li2-faq { background: var(--cream); padding-block: var(--sp-open); } [data-variant="B"] .li2-faq-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: 2.4rem clamp(2.5rem, 6vw, 6rem); align-items: start; } [data-variant="B"] .li2-faq-h { font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; max-width: 9ch; } [data-variant="B"] .li2-faq .li-faq { max-width: none; margin: 0; } @media (min-width: 1024px) { [data-variant="B"] .li2-faq-head { position: sticky; top: calc(var(--li-head-clear) - var(--li-announce-h, 38px) + 1.5rem); } } /* =========================================================== 12. CTA BAND (navy; the axis closes in the loop) */ [data-variant="B"].li2-cta { background: var(--ink); color: var(--cod); padding-block: var(--sp-open); overflow-x: clip; border-bottom: 1px solid var(--line-dark); } [data-variant="B"] .li2-cta-axis { display: none; } [data-variant="B"] .li2-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 3rem clamp(2.5rem, 6vw, 6rem); align-items: start; } [data-variant="B"] .li2-cta-copy { position: relative; } [data-variant="B"] .li2-loop--cap { --li2-mark: 64px; display: block; margin-bottom: 1.6rem; } [data-variant="B"] .li2-cta-h { color: var(--cream); font-size: var(--li2-h2); line-height: 1.04; letter-spacing: -.012em; max-width: 11ch; } [data-variant="B"] .li2-cta-sub { margin-top: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--mist); font-size: clamp(1rem, .96rem + .25vw, 1.12rem); line-height: 1.75; max-width: 42ch; } [data-variant="B"] .li2-cta-act { margin-top: clamp(1.8rem, 3.2vw, 2.6rem); } [data-variant="B"] .li2-cta-plate .li2-plate-in { aspect-ratio: 5 / 4.4; border-radius: var(--r-xl); } [data-variant="B"] .li2-cta-plate .li2-plate-in::after { border-radius: calc(var(--r-xl) - 10px); } [data-variant="B"] .li2-cta-plate .li2-plate-img { object-position: 30% 55%; } @media (min-width: 768px) { [data-variant="B"] .li2-cta-axis { display: block; position: absolute; top: 0; left: var(--li2-ax); width: 1px; margin-left: -.5px; height: var(--sp-open); background: rgba(183,139,91,.7); transform-origin: 50% 0; pointer-events: none; } [data-variant="B"] .li2-loop--cap { position: absolute; left: calc(-1 * var(--li2-in)); top: 0; translate: -50% 0; margin: 0; } [data-variant="B"] .li2-cta-copy { padding-top: calc(64px + 1.6rem); } } /* =========================================================== responsive */ @media (max-width: 1023.98px) { /* hero: copy, then the footage plate full width (the caption sits on it) */ [data-variant="B"].li2-hero { min-height: 0; } [data-variant="B"] .li2-hero-in { padding-bottom: clamp(1.6rem, 4vw, 2.6rem); } [data-variant="B"] .li2-hero-plate { z-index: 3; height: clamp(220px, 52vw, 460px); border-radius: var(--r-l) var(--r-l) 0 0; } [data-variant="B"] .li2-hero-ring { inset: 10px 10px 0; border-bottom: 0; border-radius: calc(var(--r-l) - 10px) calc(var(--r-l) - 10px) 0 0; } [data-variant="B"] .li2-hero-cap { left: calc(var(--gut) + .4rem); bottom: 1.1rem; font-size: 1rem; } [data-variant="B"] .li2-hero-cap span { background: rgba(252,250,244,.92); color: var(--ink); border-radius: var(--r-pill); padding: .4rem .9rem .45rem; box-shadow: var(--sh-1); } [data-variant="B"] .li2-intro { grid-template-columns: minmax(0, 1fr); } [data-variant="B"] .li2-intro-body { padding-top: 0; } [data-variant="B"] .li2-mission-in { grid-template-columns: minmax(0, 1fr); } [data-variant="B"] .li2-rail { grid-auto-columns: calc((100% - 1.4rem) / 2); } [data-variant="B"] .li2-book-grid { grid-template-columns: minmax(0, 1fr); } [data-variant="B"] .li2-route-head, [data-variant="B"] .li2-cond-head { grid-template-columns: minmax(0, 1fr); } [data-variant="B"] .li2-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-variant="B"] .li2-hub { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); } [data-variant="B"] .li2-elev { grid-template-columns: minmax(0, 1fr); } [data-variant="B"] .li2-cond-row { grid-template-columns: 3rem minmax(0, 1fr); } [data-variant="B"] .li2-cond-b { grid-column: 2; } [data-variant="B"] .li2-doc-grid { grid-template-columns: minmax(0, 1fr); } [data-variant="B"] .li2-doc-media { max-width: 460px; } [data-variant="B"] .li2-loc-grid { grid-template-columns: minmax(0, 1fr); } [data-variant="B"] .li2-faq-grid { grid-template-columns: minmax(0, 1fr); } [data-variant="B"] .li2-cta-grid { grid-template-columns: minmax(0, 1fr); } [data-variant="B"] .li2-cta-plate { max-width: 560px; } } @media (max-width: 767.98px) { /* hero at 390: H1 (with the loop inline), display, lede, Book, tel and the rating above the mobile bar; the footage plate below */ [data-variant="B"] .li2-hero-in { padding-top: calc(var(--li-head-clear) - var(--li-announce-h, 38px) + 1.1rem); padding-bottom: 1.6rem; } [data-variant="B"] .li2-hero-kicker { gap: .7rem; } [data-variant="B"] .li2-hero-h1 { letter-spacing: .14em; } [data-variant="B"] .li2-hero-display { margin-top: .85rem; } [data-variant="B"] .li2-hero-lede { font-size: 1.04rem; margin-top: .95rem; } [data-variant="B"] .li2-hero-actions { margin-top: 1.35rem; gap: .65rem; } [data-variant="B"] .li2-hero-actions .li-btn { width: 100%; justify-content: space-between; min-height: 3.2rem; } [data-variant="B"] .li2-hero-proof { margin-top: 1.05rem; } [data-variant="B"] .li2-hero-plate { height: 236px; border-radius: 0; } [data-variant="B"] .li2-hero-ring { inset: 10px; border: 1px solid rgba(252,250,244,.5); border-radius: calc(var(--r-l) - 8px); } [data-variant="B"] .li2-hero-poster, [data-variant="B"] .li2-hero-video { object-position: 64% 45%; } /* why us at 390: the room plate opens with the scroll (B.js), the heading halves stagger in from opposite sides */ [data-variant="B"] .li2-mission { padding: .45rem; } [data-variant="B"] .li2-mission-in { padding: 2rem 1.4rem; } [data-variant="B"] .li2-room-media { aspect-ratio: 4 / 4.2; margin-inline: calc(-1 * var(--gut)); border-radius: var(--r-l); } [data-variant="B"] .li2-room-img { object-position: 64% 60%; } [data-variant="B"] .li2-room-r { padding-left: 2.2rem; } [data-variant="B"] .li2-room-cap { left: 1rem; right: 1rem; bottom: 1rem; text-align: center; } [data-variant="B"] .li2-point { grid-template-columns: minmax(0, 1fr); } /* proof at 390: the quote is the chapter; the rail shows one card and a peek */ [data-variant="B"] .li2-proof-meta { align-items: flex-start; } [data-variant="B"] .li2-ink-q { text-indent: 2.2rem; font-size: 1.6rem; line-height: 1.26; } [data-variant="B"] .li2-ink-glyph { font-size: 6.5rem; } [data-variant="B"] .li2-rail { grid-auto-columns: 86%; gap: 1rem; } /* booking at 390: the timeline keeps its own short axis */ [data-variant="B"] .li2-steps { margin-left: 0; } [data-variant="B"] .li2-steps::before { content: ""; position: absolute; left: .45rem; top: 1.4rem; bottom: 1.4rem; width: 1px; margin-left: -.5px; background: var(--li2-axis-c); } [data-variant="B"] .li2-step { padding-left: 2.2rem; } [data-variant="B"] .li2-step::after { left: 2.2rem; } [data-variant="B"] .li2-step-dot { left: .45rem; } [data-variant="B"] .li2-index { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } [data-variant="B"] .li2-index-tab { padding-right: .6rem; } [data-variant="B"] .li2-hub { grid-template-columns: minmax(0, 1fr); } [data-variant="B"] .li2-hub-plate .li2-plate-in { aspect-ratio: 4 / 3; } [data-variant="B"] .li2-elev-item { grid-template-columns: minmax(0, 1fr); gap: 1rem; } [data-variant="B"] .li2-cond-row { grid-template-columns: minmax(0, 1fr); row-gap: .8rem; } [data-variant="B"] .li2-cond-b { grid-column: 1; } [data-variant="B"] .li2-doc-tag { right: 1rem; left: auto; bottom: 1rem; } [data-variant="B"] .li2-doc-act .li-btn, [data-variant="B"] .li2-why-cta .li-btn, [data-variant="B"] .li2-cta-act .li-btn { width: 100%; justify-content: space-between; white-space: normal; } [data-variant="B"] .li2-stop .li2-plate-in { height: 300px; } [data-variant="B"] .li2-gal-paddles { display: none; } [data-variant="B"] .li2-loc-notes li { grid-template-columns: 2.4rem minmax(0, 1fr); } }