/** Shopify CDN: Minification failed

Line 2463:63 Unexpected "11"

**/
/* ==========================================================================
   Lift Aesthetics Sydney — homepage redesign
   --------------------------------------------------------------------------
   HOMEPAGE ONLY. Every rule here is scoped under .la-home, which is set on the
   section wrappers this file styles. Nothing may leak into a shared template.
   Loaded by the redesign's first section via stylesheet_tag, not by
   theme.liquid — layout/theme.liquid is out of scope (AGENTS.md). Note that
   theme.liquid:98 preloads a custom.css that it never links and that does not
   exist; that is a pre-existing theme bug, not an extension point.
   Palette authority: docs/adr/0004-accessible-palette.md
   Contrast audit:    .scratch/homepage-redesign/issues/06-contrast-audit.md
   Token reference:   docs/design/tokens.md
   ========================================================================== */
/* --------------------------------------------------------------------------
   0. Fonts
   --------------------------------------------------------------------------
   Self-hosted from theme assets, latin subset only. 64.1 KB for three faces,
   against 237 KB for everything the mockup shipped. Ticket 07 / ADR-0005.
   Served from cdn.shopify.com, which theme.liquid already preconnects — a
   third-party font CDN would be an origin we cannot preconnect, because
   theme.liquid is out of scope.
   This file is .css.liquid so asset_url resolves here, matching the theme's
   own font-settings.css.liquid. Reference it WITHOUT the .liquid extension.
   Archivo is a variable font: one file serves every weight 100-900, which is
   why three weights cost nothing over one.
   Great Vibes is deliberately absent. Its only uses in the mockup were the
   logo wordmark — which AGENTS.md says always comes from the Shopify theme,
   never the mockup — and a decorative mask. It was 112 KB, 47% of the
   mockup's font payload, for no shippable text.
   ---------------------------------------------------------------------------
   Archivo and Instrument Serif are licensed under the SIL Open Font License,
   Version 1.1, which permits self-hosting on a commercial site.
     Archivo         Copyright 2020 The Archivo Project Authors
                     https://github.com/Omnibus-Type/Archivo
     Instrument Serif Copyright 2022 The Instrument Serif Project Authors
                     https://github.com/Instrument/instrument-serif
   Full licence texts: docs/licenses/ in the project repository.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo LA';
  font-style: normal;
  font-weight: 100 900;              /* variable */
  font-display: swap;
  src: url(//www.liftclinic.com.au/cdn/shop/t/10/assets/la-archivo-var.woff2?v=122286185488420994721790574330) format('woff2-variations'),
       url(//www.liftclinic.com.au/cdn/shop/t/10/assets/la-archivo-var.woff2?v=122286185488420994721790574330) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Great Vibes, latin only, 28.9 KB. Shipped for the hero intro wordmark after
   the client asked for the mockup's reveal to be mirrored — see ADR-0007. It
   is used for that one element and nothing else; the nav carries the real
   brand mark as an image. */
@font-face {
  font-family: 'Great Vibes LA';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(//www.liftclinic.com.au/cdn/shop/t/10/assets/la-great-vibes.woff2?v=130345407759245968721790574330) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif LA';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(//www.liftclinic.com.au/cdn/shop/t/10/assets/la-instrument-serif.woff2?v=176093838886440501441790574330) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif LA';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(//www.liftclinic.com.au/cdn/shop/t/10/assets/la-instrument-serif-italic.woff2?v=49754301505854499401790574330) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
/* Tokens live at :root, NOT on a wrapper.
   Each Shopify section renders as its own top-level element, so there is no
   single element that contains all seven — a wrapper around one of them leaves
   the other six with every custom property undefined, which renders a section
   with `background: var(--la-grad-areas)` as a blank white screen.
   This file is only ever loaded by the homepage's own sections, so :root here
   cannot reach another template. */
:root {
  /* -- Type -------------------------------------------------------------- */
  /* Suffixed "LA" so these never collide with whatever the theme's global font
     picker is set to. Pipeline's Avenir Next / Ovo still load site-wide; that
     overlap is accepted for now and is ticket 07's remaining open question. */
  --la-font-body: 'Archivo LA', 'Archivo', var(--FONT-STACK-BODY, Helvetica, Arial, sans-serif);
  --la-font-display: 'Instrument Serif LA', 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --la-font-script: 'Great Vibes LA', 'Great Vibes', 'Snell Roundhand', cursive;
  /* -- Surfaces ---------------------------------------------------------- */
  --la-cream: #FFF7F4;            /* page ground */
  --la-white: #FFFFFF;
  --la-blush: #FBDDD3;
  --la-peach: #FFE7D6;
  /* The footer's ground. Same value as --la-ink, declared separately because
     it is a SURFACE here, not a letterform colour — the footer's own ink is
     cream on top of it. ADR-0008. */
  --la-plum-deep: #2B1436;
  /* -- Ink --------------------------------------------------------------- */
  --la-ink: #2B1436;              /* plum, primary        15.81:1 on cream */
  --la-ink-2: #7A4C74;            /* mauve, secondary      6.38:1 on cream */
  --la-ink-3: #5E3F5C;            /* deep mauve            8.48:1 on cream */
  --la-ink-plum-deep: #5A1B47;    /* on white buttons     12.48:1 */
  --la-ink-plum-deepest: #3E1030; /* button hover ink     13.36:1 on peach */
  /* Tertiary ink. Replaces the mockup's lilac #A98BC4, which is 2.77:1 on
     cream and 1.00:1 over the areas gradient — the same luminance as its
     background, i.e. invisible. Verified across every light section: worst
     case 4.51:1 (on the liz gradient's violet end). ADR-0004 fix 2. */
  --la-ink-3-muted: #795C92;      /* 5.28:1 on cream, 4.51:1 worst-case */
  /* -- Accents: FILLS AND GRADIENT STOPS ONLY ---------------------------- */
  /* None of these may be used as a text colour. See --la-*-text below and
     ADR-0004 §2. Coral and teal have no text form at all, by decision. */
  --la-coral: #FF9A5A;
  --la-coral-red: #FF7E6B;
  --la-pink: #F2497E;
  --la-pink-pressed: #E0407F;
  --la-violet: #7C4DFF;
  --la-teal: #22C1C3;
  /* -- Accents: TEXT FORMS ----------------------------------------------- */
  /* Darkened in OKLCH, hue and chroma held. These are the ONLY accent values
     permitted on letterforms. Never use them as a fill — the fill keeps the
     brighter value above, so the design's colour is unchanged where it is not
     carrying text. */
  --la-pink-text: #D62B68;        /* 4.51:1 on cream — was #F2497E at 3.29 */
  --la-pink-text-pressed: #D13173;/* 4.52:1 on cream — was #E0407F at 3.81 */
  --la-violet-text: #7C4DFF;      /* 4.55:1 — passes unchanged */
  /* Deliberately absent: coral and teal. Reaching AA turns them into #B75807
     and #207F80, which are different colours. Keep them off text. */
  /* -- The scrim --------------------------------------------------------- */
  /* Required behind light ink on any saturated gradient. Floors measured in
     ticket 06: areas >= .44, book >= .48. This single value covers both. */
  --la-scrim: rgba(46, 14, 60, .50);
  /* -- CTA gradients ----------------------------------------------------- */
  /* The liz CTA's stops are darkened by OKLCH L-0.07 so white clears AA
     (4.62:1, was 3.48:1). These are BUTTON-SPECIFIC and deliberately do not
     replace --la-pink / --la-violet anywhere else. ADR-0004 fix 4. */
  --la-grad-cta-liz: linear-gradient(90deg, #D92E6A, #6A32E6);
  /* The hero CTA's gradient is untouched — it takes dark ink instead of white,
     which is the cheapest fix in the audit: 2.10:1 -> 4.80:1, no new colour. */
  --la-grad-cta-hero: linear-gradient(90deg, #FF9A5A, #F2497E);
  /* -- Section gradients (unchanged from the mockup) --------------------- */
  --la-grad-hero:    linear-gradient(165deg, #FF9A5A 0%, #F2497E 46%, #7C4DFF 100%);
  --la-grad-words:   linear-gradient(180deg, #FFF7F4 0%, #FFE6EF 55%, #F1E7FF 100%);
  --la-grad-areas:   linear-gradient(135deg, #FF7E6B 0%, #F2497E 38%, #7C4DFF 72%, #22C1C3 100%);
  --la-grad-reel:    linear-gradient(180deg, #F1E7FF 0%, #FFF1E8 60%, #FFF7F4 100%);
  --la-grad-liz:     linear-gradient(200deg, #FFF7F4 0%, #FFE0E9 48%, #E9E4FF 100%);
  --la-grad-reviews: linear-gradient(180deg, #FFF7F4 0%, #FFEDE3 100%);
  --la-grad-book:    linear-gradient(150deg, #7C4DFF 0%, #F2497E 52%, #FF9A5A 100%);
  /* The hero's own scrim, which the mockup already had and tokens.md never
     recorded. Kept distinct from --la-scrim: it is directional, sitting over
     photography rather than a flat gradient. */
  --la-scrim-hero: linear-gradient(180deg, rgba(46,14,60,.60), rgba(46,14,60,.44) 40%, rgba(46,14,60,.72));
}
/* --------------------------------------------------------------------------
   2. Gradient sections
   -------------------------------------------------------------------------- */
/* A section that puts light ink on a saturated gradient. The scrim is a
   pseudo-element rather than a background-blend so the gradient stays
   inspectable and the scrim can be reshaped per section without touching it. */
.la-section--on-gradient {
  position: relative;
  isolation: isolate;
  color: var(--la-cream);
}
.la-section--on-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--la-scrim);
  pointer-events: none;
  z-index: 0;
}
/* Content sits above the scrim. Anything placed directly in a gradient
   section must carry this, or it renders behind the scrim and loses the
   contrast the scrim was added to provide. */
.la-section--on-gradient > * {
  position: relative;
  z-index: 1;
}
/* Opt-out for a section that shapes its own scrim (a localised gradient behind
   the copy column rather than a full-bleed wash). The floor still applies:
   alpha must not fall below .48 anywhere text overlaps. */
.la-section--on-gradient.la-section--custom-scrim::before {
  display: none;
}
/* --------------------------------------------------------------------------
   3. Text colour helpers
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
/* Primary CTA on a light ground — the book section's pattern, and the best
   contrasting element in the design at 12.48:1. */
.la-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--la-white);
  color: var(--la-ink-plum-deep);
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.la-btn:hover,
.la-btn:focus-visible {
  background: var(--la-peach);
  color: var(--la-ink-plum-deepest);   /* 13.36:1 on peach */
}
/* Hero CTA. Dark ink on the untouched coral->pink gradient. Do NOT set this
   to white: white on this gradient is 2.10:1. ADR-0004 fix 4. */
.la-btn--grad-hero {
  background: var(--la-grad-cta-hero);
  color: var(--la-ink);                /* 4.80:1 across the gradient */
}
.la-btn--grad-hero:hover,
.la-btn--grad-hero:focus-visible {
  background: var(--la-grad-cta-hero);
  color: var(--la-ink);
}
/* Liz CTA. White ink, on stops darkened just enough to carry it. Dark ink does
   NOT work here — plum on pink->violet is 3.47:1. ADR-0004 fix 4. */
.la-btn--grad-liz {
  background: var(--la-grad-cta-liz);
  color: var(--la-white);              /* 4.62:1 across the gradient */
}
.la-btn--grad-liz:hover,
.la-btn--grad-liz:focus-visible {
  background: var(--la-grad-cta-liz);
  color: var(--la-white);
}
/* --------------------------------------------------------------------------
   5. Section progress rail
   --------------------------------------------------------------------------
   Fixed to the right edge, hidden until the hero is behind you.

   No single ink survives the whole page — the mockup's lilac is 1.00:1 over
   the areas gradient — so it switches with the section beneath it, the same
   mechanism as the nav. ADR-0004 fix 2. */

.la-rail {
  position: fixed;
  right: clamp(12px, 2vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 118;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.la-rail.is-visible { opacity: 1; pointer-events: auto; }

.la-rail__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.la-rail__item {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Source sets 9px. Held at 11px — same legibility floor as the rest of the
     build, and this is wayfinding, not decoration. */
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--la-ink-3-muted);      /* #795C92 — 4.51:1 worst case on light */
  padding: 4px 0;
}

.la-rail__item[aria-current="true"] { color: var(--la-ink); }

/* Over a gradient section the light inks take over. */
.la-rail.is-on-gradient .la-rail__item { color: var(--la-cream); }
.la-rail.is-on-gradient .la-rail__item[aria-current="true"] { color: var(--la-white); }

/* The mockup hides labels until active. Hiding wayfinding from keyboard users
   is not worth the look, so they are revealed on hover and focus too, and are
   always present for assistive tech. */
.la-rail__label {
  opacity: 0;
  transition: opacity .35s ease;
}

.la-rail__item:hover .la-rail__label,
.la-rail__item:focus-visible .la-rail__label,
.la-rail__item[aria-current="true"] .la-rail__label { opacity: 1; }

.la-rail__dash {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: width .35s ease;
}

.la-rail__item[aria-current="true"] .la-rail__dash { width: 34px; }

/* Hidden where it would overlap content — matched to the width at which the
   nav collapses, not a wider guess. At 1024px it was hiding on exactly the
   ~1000px laptop viewport the reference shows it on. */
@media (max-width: 900px) {
  .la-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .la-rail, .la-rail__label, .la-rail__dash { transition: none; }
}

/* --------------------------------------------------------------------------
   6. Focus
   -------------------------------------------------------------------------- */
/* The mockup defines no focus state anywhere. Every interactive element in the
   redesign gets a visible one; the ring is drawn in both inks so it survives
   light and gradient sections. */
/* Applied to every la-* section element, since they are siblings rather than
   descendants of a common wrapper. */
.la-home {
  font-family: var(--la-font-body);
  font-weight: 300;
  color: var(--la-ink);
}
/* Display serif: every large editorial heading, matching the mockup. */
.la-hero__heading,
.la-words__statement,
.la-words__stat-value,
.la-areas__heading,
.la-liz__ghost,
.la-liz__heading,
.la-book__heading,
.la-book__detail-value,
.la-reel__heading,
.la-reel__card-title,
.la-reel__cta-prompt,
.la-reviews__heading,
.la-reviews__logo {
  font-family: var(--la-font-display);
  font-weight: 400;
}
.la-home :focus-visible {
  outline: 2px solid var(--la-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.la-section--on-gradient :focus-visible {
  outline-color: var(--la-cream);
}
/* --------------------------------------------------------------------------
   7. Motion
   -------------------------------------------------------------------------- */
/* The mockup's word reveal animates ink from rgba(43,20,54,.12) — 1.3:1 — up to
   full plum over scroll. The resting state is compliant; the journey is not.
   Anyone who has asked for less motion gets the resting state immediately. */
@media (prefers-reduced-motion: reduce) {
  .la-home *,
  .la-home *::before,
  .la-home *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
/* --------------------------------------------------------------------------
   8. Reveals
   --------------------------------------------------------------------------
   The one motion primitive shared by both paths. On mobile and under reduced
   motion this is the ONLY animation on the page. JS adds .is-revealed via
   IntersectionObserver; without JS the :not() guard never applies and content
   is simply visible. Content is never hidden by CSS alone. */
.la-home--static [data-la-reveal],
.la-home--choreographed [data-la-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .7s cubic-bezier(.2, .9, .28, 1),
              transform .7s cubic-bezier(.2, .9, .28, 1);
}
[data-la-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .la-home--static [data-la-reveal],
  .la-home--choreographed [data-la-reveal] {
    opacity: 1;
    transform: none;
  }
}
/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.la-hero {
  position: relative;
  background: var(--la-grad-hero);
}
/* MOBILE PATH (default). One screen, natural flow, nothing pinned.
   ADR-0005: mobile gets no scroll choreography of any kind. */
.la-hero__stage {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--la-grad-hero);
}
.la-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* The source's overhang. The drift scales the film 1.22 -> 1.0 and lifts it
   6%, so at the end of the hero the transform is doing nothing to cover the
   stage and inset:0 would show its bottom edge. Only the choreographed path
   transforms this element, so only it needs the bleed. */
.la-home--choreographed .la-hero__media {
  inset: -10%;
  will-change: transform;
  /* THE SCRUB'S OWN VALUE AT p = 0, declared here as well as in JS.

     ScrollTrigger's onUpdate only fires when progress CHANGES, so without this
     the film painted untransformed — scale 1 — for the whole intro, and the
     first scroll notch snapped it to 1.22. The video appeared to zoom IN at
     precisely the moment the design means it to start pulling OUT. Declaring
     the start state in CSS means it is right on the very first frame, before
     the controller has even loaded. */
  transform: translate3d(0, 0, 0) scale(1.22);
}
.la-hero__media-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}
/* ATMOSPHERE — the mockup's orbs and dust, between the media and the scrim.
   Every value here is the design source's. The only departure is the resting
   opacity: the mockup starts the field at .92 and scrubs it to .14, so .14 is
   what the static (mobile / reduced-motion / no-GSAP) path must show. Starting
   at .92 with no scroll to fade it would leave the video permanently washed
   out. The desktop controller sets .92 itself before the first frame. */
.la-hero__orbs {
  position: absolute;
  inset: -20%;
  z-index: 0;
  opacity: .14;
  pointer-events: none;
  will-change: transform, opacity;
}
/* And the colour field's start state, for the same reason — the more visible
   half of that bug. The static resting value above is .14, so until the first
   scroll the field was all but absent and then jumped to .92: the hero did not
   only zoom on that first notch, it bloomed. */
.la-home--choreographed .la-hero__orbs {
  opacity: .92;
  transform: translate3d(0, 0, 0) scale(1.05);
}
.la-hero__orb,
.la-hero__bloom,
.la-hero__ring {
  position: absolute;
  display: block;
  border-radius: 50%;
}
.la-hero__orb { filter: blur(70px); }
.la-hero__orb--coral {
  left: 4%; top: 6%; width: 52vw; height: 52vw;
  background: radial-gradient(circle at 40% 40%, rgba(255,154,90,.95), rgba(255,154,90,0) 68%);
  animation: la-orb-a 7.5s ease-in-out infinite;
}
.la-hero__orb--pink {
  right: 2%; top: 22%; width: 46vw; height: 46vw;
  background: radial-gradient(circle at 55% 45%, rgba(242,73,126,.95), rgba(242,73,126,0) 66%);
  animation: la-orb-b 9s ease-in-out infinite;
}
.la-hero__orb--violet {
  left: 26%; bottom: -6%; width: 58vw; height: 58vw;
  background: radial-gradient(circle at 50% 50%, rgba(124,77,255,.9), rgba(124,77,255,0) 68%);
  animation: la-orb-c 11s ease-in-out infinite;
}
.la-hero__orb--teal {
  right: 22%; top: 2%; width: 30vw; height: 30vw;
  background: radial-gradient(circle at 50% 50%, rgba(34,193,195,.75), rgba(34,193,195,0) 66%);
  animation: la-orb-a 6s ease-in-out infinite reverse;
}
/* The cream swell at the centre — what the wordmark sits in. */
.la-hero__bloom {
  left: 50%; top: 50%;
  width: 70vw; height: 70vw;
  margin: -35vw 0 0 -35vw;
  background: radial-gradient(circle at 50% 50%, rgba(255,231,214,.8), rgba(255,231,214,0) 62%);
  filter: blur(50px);
  animation: la-bloom 3.6s ease-in-out infinite;
}
.la-hero__ring {
  left: 50%; top: 50%;
  width: 44vw; height: 44vw;
  margin: -22vw 0 0 -22vw;
  animation: la-ring 2.8s ease-out infinite;
}
.la-hero__ring--pink   { border: 1px solid rgba(242,73,126,.55); }
.la-hero__ring--violet { border: 1px solid rgba(124,77,255,.5); animation-delay: 1.4s; }
/* The motes: six cream and peach specks drifting up out of the bottom half. */
.la-hero__dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.la-hero__mote {
  position: absolute;
  display: block;
  border-radius: 50%;
  animation: la-mote 4s ease-in-out infinite;
}
.la-hero__mote--1 { left: 14%; bottom: 12%; width: 7px; height: 7px; background: #FFE7D6; filter: blur(1px); animation-duration: 3.4s; }
.la-hero__mote--2 { left: 28%; bottom: 26%; width: 5px; height: 5px; background: #FFF7F4; filter: blur(1px); animation-duration: 4.2s; animation-delay: .5s; }
.la-hero__mote--3 { left: 47%; bottom:  8%; width: 9px; height: 9px; background: #FFD4A8; filter: blur(2px); animation-duration: 5s;   animation-delay: .2s; }
.la-hero__mote--4 { left: 63%; bottom: 32%; width: 6px; height: 6px; background: #FFF7F4; filter: blur(1px); animation-duration: 3.9s; animation-delay: .9s; }
.la-hero__mote--5 { left: 78%; bottom: 16%; width: 8px; height: 8px; background: #FFC2D6; filter: blur(2px); animation-duration: 4.6s; animation-delay: 1.3s; }
.la-hero__mote--6 { left: 89%; bottom: 40%; width: 5px; height: 5px; background: #FFE7D6; filter: blur(1px); animation-duration: 3.6s; animation-delay: 1.8s; }
@keyframes la-orb-a {
  0%   { transform: translate3d(-8%, -4%, 0) scale(1); }
  33%  { transform: translate3d(14%, 10%, 0) scale(1.22); }
  66%  { transform: translate3d(6%, -12%, 0) scale(.92); }
  100% { transform: translate3d(-8%, -4%, 0) scale(1); }
}
@keyframes la-orb-b {
  0%   { transform: translate3d(10%, 6%, 0) scale(1.1); }
  40%  { transform: translate3d(-12%, -8%, 0) scale(.9); }
  70%  { transform: translate3d(-2%, 14%, 0) scale(1.25); }
  100% { transform: translate3d(10%, 6%, 0) scale(1.1); }
}
@keyframes la-orb-c {
  0%   { transform: translate3d(4%, 12%, 0) scale(.95); }
  50%  { transform: translate3d(-14%, -6%, 0) scale(1.3); }
  100% { transform: translate3d(4%, 12%, 0) scale(.95); }
}
@keyframes la-bloom {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.18); opacity: .9; }
}
@keyframes la-ring {
  0%   { transform: scale(.6); opacity: .5; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes la-mote {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .25; }
  50%  { transform: translate3d(14px, -42px, 0) scale(1.5); opacity: .7; }
  100% { transform: translate3d(-6px, -88px, 0) scale(.9); opacity: 0; }
}
/* All of it is motion for its own sake, so reduced motion removes it outright
   rather than slowing it — and that also returns the video unobstructed. */
@media (prefers-reduced-motion: reduce) {
  .la-hero__orbs,
  .la-hero__dust { display: none; }
}
/* Load-bearing for contrast. See ADR-0004 and the note in la-hero.liquid. */
.la-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--la-scrim-hero);
  pointer-events: none;
}
/* Centred on both axes, matching the mockup: the hero copy is a centred
   column over the media, not a bottom-left overlay. */
.la-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(20px, 6vw, 80px);
  max-width: 1100px;
  width: 100%;
  margin-inline: auto;
}
.la-hero__eyebrow {
  margin: 0 0 clamp(18px, 3vh, 30px);
  /* The mockup sets 10.5px. That is below any reasonable floor for a clinic
     whose patients skew older, so the redesign lifts it. Contrast is fine
     either way through the scrim (8.04:1); this is a legibility change. */
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--la-peach);
}
.la-hero__heading {
  margin: 0;
  font-size: clamp(42px, 8vw, 124px);
  line-height: .96;
  letter-spacing: -.025em;
  font-weight: 400;
  color: var(--la-white);
}
/* Each line rises out of its own clip. The padding-bottom / negative-margin
   pair makes the clip box taller than the line without adding leading — the
   design source's construction, and the reason the strokes exist. See the note
   in la-hero.liquid and "THE STROKES" in section 18. */
.la-hero__heading-clip {
  display: block;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.la-hero__heading-clip--accent {
  padding-bottom: .22em;
  margin-bottom: -.22em;
}
.la-hero__heading-line { display: block; }
.la-hero__heading-line--accent {
  font-style: italic;
  color: var(--la-peach);
}
.la-hero__sub {
  margin: clamp(22px, 3.4vh, 34px) auto 0;
  max-width: 34em;
  /* Mockup: clamp(14px,1.4vw,18px). Floor lifted to 16px for the same reason
     as the eyebrow. */
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--la-white);
}
.la-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(30px, 4.5vh, 52px);
}
.la-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;              /* pointer target floor */
  padding: 14px clamp(24px, 3vw, 38px);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Ghost CTA. Cream on the scrimmed hero is 4.73:1. */
.la-hero__cta--ghost {
  color: var(--la-cream);
  border: 1px solid var(--la-cream);
  background: transparent;
}
.la-hero__cta--ghost:hover,
.la-hero__cta--ghost:focus-visible {
  background: var(--la-cream);
  color: var(--la-ink);
}
/* Centred at the foot of the stage, not tucked into a corner. */
.la-hero__cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5vh;
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--la-cream);
  pointer-events: none;
}
.la-hero__cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, rgba(255,247,244,.7), rgba(255,247,244,0));
}
/* DESKTOP PATH. The stage is pinned by ScrollTrigger over --la-hero-scroll of
   scroll distance. Only applied where the choreography actually runs, so the
   tall section never exists on mobile or under reduced motion. */
@media (min-width: 768px) and (pointer: fine) {
  .la-home--choreographed .la-hero {
    height: calc(100svh + var(--la-hero-scroll, 150vh));
  }
  .la-home--choreographed .la-hero__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    justify-content: center;
  }
  /* already absolute and centred; nothing to override on desktop */
}
/* The cue points at scrolling. If nothing scrolls under the hero, hide it. */
@media (prefers-reduced-motion: reduce) {
  .la-hero__cue { display: none; }
}
/* --------------------------------------------------------------------------
   10. Shared section furniture
   -------------------------------------------------------------------------- */
.la-section-pad {
  padding: clamp(72px, 12vh, 140px) clamp(20px, 6vw, 90px);
}
/* Eyebrows. Mockup sets 9.5-10.5px; lifted to a 12px floor for legibility.
   Mauve on every light gradient is 5.45:1 or better. */
.la-eyebrow {
  margin: 0;
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
}
/* --------------------------------------------------------------------------
   11. Approach (words)
   -------------------------------------------------------------------------- */
.la-words {
  position: relative;
  background: var(--la-grad-words);
  color: var(--la-ink);
}
.la-words__stage { padding: clamp(72px, 12vh, 140px) clamp(20px, 6vw, 90px); }
.la-words__inner { max-width: 1320px; margin-inline: auto; }
/* The eyebrow is a rule + label lockup. The rule grows from 0 on desktop as
   the section is entered; on mobile it is simply drawn at full width. */
.la-words__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(28px, 4vw, 56px);
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--la-ink-2);            /* 5.65:1 */
}
.la-words__rule {
  display: block;
  height: 1px;
  width: 96px;
  flex: 0 0 auto;
  background: #F09EC0;
}
.la-home--choreographed .la-words__rule { width: 0; }
.la-words__inner { max-width: 1180px; }
.la-words__stage {
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(72px, 11vh, 110px) clamp(20px, 6vw, 90px) clamp(60px, 9vh, 90px);
}
/* No max-width — the source lets it run to the 1180px container, which is what
   gives it the wide editorial measure. Capping it at 20em was wrapping it far
   narrower than the reference. */
.la-words__statement {
  margin: 0;
  font-size: clamp(26px, 4.4vw, 66px);
  line-height: 1.22;
  letter-spacing: -.012em;
  text-wrap: pretty;
  color: var(--la-ink);              /* 15.81:1 at rest */
}
/* Words are inline-block only so they can be transformed. Static path leaves
   them fully inked — the reveal is a desktop enhancement, never a prerequisite
   for reading. */
.la-words__word { display: inline-block; }
/* Flex-wrap with a min-width, not a fixed 3-column grid: the columns size to
   their content and reflow naturally, which is what the source does. */
.la-words__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 64px);
  margin: clamp(34px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.la-words__stat { min-width: 180px; }
.la-words__stat-value {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  color: var(--la-ink);
}
/* Source sets 12.5px. Held at a 15px floor — the same legibility call made
   across the build, recorded in ticket 06. */
.la-words__stat-body {
  margin: 8px 0 0;
  max-width: 20em;
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--la-ink-3);            /* 7.52:1 */
}
@media (min-width: 768px) {
  .la-words__stats { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) and (pointer: fine) {
  .la-home--choreographed .la-words { height: calc(100svh + var(--la-words-scroll, 120vh)); }
  .la-home--choreographed .la-words__stage {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
}
/* THE WORD REVEAL — resting state.

   Declared in CSS as well as in JS so the statement is already faint on first
   paint. Left to JS alone the paragraph renders at full ink for the frame or
   two before the controller boots, which reads as a flash of the finished
   sentence before it plays.

   --la-words-ink-floor is published by the section from its "Starting ink"
   setting, so this rule and the scrub cannot drift apart. Only the
   choreographed path hides anything: the static path and reduced motion show
   the statement fully inked and never move it. */
.la-home--choreographed .la-words__word {
  color: rgba(43, 20, 54, var(--la-words-ink-floor, .12));
  filter: blur(3px);
  transform: translate3d(0, 14px, 0);
}
/* The proof points are scrubbed on this path, so the shared reveal transition
   would smooth every scroll step into a lag. The reveal rule still supplies
   the hidden resting state; only its easing is dropped. */
.la-home--choreographed [data-la-words-foot] { transition: none; }

/* NO will-change ANYWHERE IN THIS SECTION, deliberately.

   will-change promotes an element to its own composited layer, and text on a
   composited layer loses subpixel antialiasing — it is rasterised with
   grayscale AA instead, which on this pale ground reads as the whole block
   being slightly soft. On a section whose entire point is a 66px serif
   statement, that costs more than the paint it saves, and it compounded the
   blur bug above into "the Approach section looks wrong".

   Nothing here needs the hint: the browser promotes a layer on its own while
   a filter or transform is actually animating, and every one of these
   animations is short. The rail's cards keep theirs — they are images, and
   they are transformed on every frame of a long scrub.
@media (prefers-reduced-motion: reduce) {
  .la-home--choreographed .la-words__word {
    color: var(--la-ink);
    filter: none;
    transform: none;
  }
}
/* --------------------------------------------------------------------------
   12. Areas
   --------------------------------------------------------------------------
   Full-bleed stage: the image fills the viewport, the copy sits over it on the
   left, and panels swap by wiping the next image up. Mirrors the mockup. */
.la-areas {
  position: relative;
  background: var(--la-grad-areas);
  color: var(--la-cream);
}
.la-areas__stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.la-areas__media { position: absolute; inset: 0; z-index: 0; }
.la-areas__img { position: absolute; inset: 0; will-change: clip-path; }
/* img or video — the stage takes either. */
.la-areas__img-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* HORIZONTAL scrim, unlike the other gradient sections: darkest on the left
   where the copy sits, easing off across the image. Cream ink reaches 5.9:1 at
   the left edge. Removing this drops the copy to ~2:1. ADR-0004 fix 1. */
.la-areas__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
              rgba(46, 14, 60, .86),
              rgba(46, 14, 60, .62) 55%,
              rgba(46, 14, 60, .80));
  pointer-events: none;
}
.la-areas__content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(96px, 12vh, 130px) clamp(20px, 6vw, 90px) clamp(72px, 9vh, 90px);
}
.la-areas__inner { width: 100%; max-width: 1180px; margin-inline: auto; }
/* Fixed-height box so swapping panels does not reflow the progress bar.
   `height`, not `min-height`, as in the design source: the panels inside are
   taken out of flow, so nothing else can size this. */
.la-areas__panels { position: relative; height: clamp(300px, 44vh, 440px); }
/* THE PANELS ARE STACKED, one on top of another.

   Without this they sat in normal flow, so all three occupied vertical space
   whatever their opacity: the box grew to ~850px, the visible panel was
   wherever its turn in the stack put it rather than centred, and the 01——03
   progress rule was pushed clean off the bottom of the sticky stage. The
   mobile rule below returns them to flow, which is what mobile wants. */
.la-areas__panel {
  position: absolute;
  inset: 0;
  will-change: transform, opacity, filter;
}
/* Desktop uses the shared full-bleed media, so the per-panel image is mobile
   only. */
.la-areas__panel-img { display: none; }
.la-areas__eyebrow {
  margin: 0;
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--la-peach);
}
.la-areas__heading {
  margin: 18px 0 0;
  font-size: clamp(38px, 6.8vw, 108px);
  line-height: .94;
  letter-spacing: -.025em;
  color: var(--la-cream);
}
.la-areas__text {
  margin: 26px 0 0;
  max-width: 24em;
  font-size: clamp(16px, 1.35vw, 17px);
  line-height: 1.75;
  color: var(--la-white);
}
.la-areas__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 22px;
  color: var(--la-cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 247, 244, .6);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.la-areas__link:hover,
.la-areas__link:focus-visible { border-bottom-color: var(--la-cream); }
.la-areas__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(26px, 3.4vw, 48px);
}
.la-areas__count {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--la-white);
  font-variant-numeric: tabular-nums;
}
.la-areas__track {
  display: block;
  position: relative;
  width: clamp(90px, 16vw, 240px);
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, .5);
}
.la-areas__bar {
  position: absolute;
  inset: 0;
  background: var(--la-peach);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
/* DESKTOP PATH. The section is tall, the stage sticks, and the panel
   choreography scrubs across the difference.

   THIS RULE WAS MISSING. Every other choreographed section had its pair —
   words at 659, liz at 926, reel at 1210 — but areas never got one, so
   `--la-areas-scroll` was set by the section and consumed by nothing. The
   stage stayed `position: relative` at its natural ~1080px, which left
   ScrollTrigger a span of about 300px for all three panels: the wipes fired
   almost simultaneously and the section read as a flicker rather than a hold.
   Every previous attempt to fix the "timing" was retuning fractions of a
   distance that did not exist.

   overflow:hidden stays on the STAGE and must never move up to the section —
   an ancestor with overflow:hidden silently disables position:sticky. Same
   trap as the one noted on .la-liz. */
@media (min-width: 768px) and (pointer: fine) {
  .la-home--choreographed .la-areas {
    height: calc(100svh + var(--la-areas-scroll, 380vh));
  }
  .la-home--choreographed .la-areas__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
  }
  /* The content box is the sticky viewport now, not a min-height guess. */
  .la-home--choreographed .la-areas__content {
    min-height: 0;
    height: 100%;
  }
}
/* MOBILE PATH: no stage, no wipe, no stacking. Each area is its own screenful
   in document order, so all three are reachable by scrolling normally. */
@media (max-width: 767px), (pointer: coarse) {
  .la-areas__stage { min-height: 0; }
  .la-areas__media { display: none; }
  /* The section gradient is now the backdrop, so it needs the standard scrim
     rather than the horizontal one built for a photograph. */
  .la-areas__scrim {
    background: var(--la-scrim);
  }
  .la-areas__content {
    min-height: 0;
    display: block;
    padding: clamp(56px, 8vh, 80px) clamp(20px, 6vw, 90px);
  }
  .la-areas__panels { height: auto; }
  /* Back into flow: on mobile the three areas are three screenfuls in reading
     order, not a stack that something scrubs between. */
  .la-areas__panel {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    padding-bottom: clamp(48px, 8vh, 72px);
  }
  .la-areas__panel-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
  }
  .la-areas__panel-img-el { width: 100%; height: 100%; object-fit: cover; display: block; }
  .la-areas__progress { display: none; }
}
/* --------------------------------------------------------------------------
   13. Dr Liz
   --------------------------------------------------------------------------
   overflow:hidden belongs on the STAGE, never the section — on the section it
   silently disables the stage's position:sticky. */
.la-liz {
  position: relative;
  background: var(--la-grad-liz);
  color: var(--la-ink);
}
.la-liz__stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(72px, 12vh, 120px) 0;
}
/* Behind everything. Outlined, not filled: transparent text with a hairline
   stroke, which is what makes it read as a watermark rather than a heading. */
.la-liz__ghost {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  display: flex;
  gap: .35em;
  white-space: nowrap;
  font-family: var(--la-font-display);
  font-size: clamp(96px, 18vw, 260px);
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(43, 20, 54, .16);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
/* position:relative is what lifts the content above the ghost. */
.la-liz__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 5vw, 80px);
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 90px);
}
.la-liz__portrait {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 5;
  max-height: 70vh;
  overflow: hidden;
  background: #F3D3DF;
}
.la-liz__portrait-el { width: 100%; height: 100%; object-fit: cover; display: block; }
.la-liz__eyebrow {
  margin: 0 0 20px;
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--la-ink-2);
}
.la-liz__heading {
  margin: 0;
  font-size: clamp(36px, 5.6vw, 80px);
  line-height: 1;
  letter-spacing: -.022em;
}
.la-liz__heading-name { font-style: italic; }
.la-liz__text {
  margin: 26px 0 0;
  max-width: 33em;
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.78;
  color: #43264F;
}
.la-liz__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: clamp(28px, 4vh, 44px);
}
.la-liz__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px clamp(24px, 3vw, 38px);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.la-liz__cta--quiet {
  color: var(--la-ink);
  border: 1px solid rgba(43, 20, 54, .45);
}
.la-liz__cta--quiet:hover,
.la-liz__cta--quiet:focus-visible { background: var(--la-ink); color: var(--la-cream); }
@media (min-width: 768px) {
  .la-liz__inner { grid-template-columns: 1fr 1fr; align-items: center; }
}
@media (min-width: 768px) and (pointer: fine) {
  .la-home--choreographed .la-liz { height: calc(100svh + var(--la-liz-scroll, 90vh)); }
  .la-home--choreographed .la-liz__stage { position: sticky; top: 0; height: 100svh; }
}
/* --------------------------------------------------------------------------
   14. Bookings
   --------------------------------------------------------------------------
   Auto height on every device. This is the conversion point — it is never a
   scroll stage, on any breakpoint. */
.la-book {
  background: var(--la-grad-book);
  overflow: hidden;
}

.la-book__glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 120vw;
  height: 60vh;
  transform: translate(-50%, -40%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .34), transparent 65%);
  pointer-events: none;
  z-index: 1;
}
.la-book__inner {
  position: relative;
  max-width: 1020px;
  margin-inline: auto;
  padding: clamp(72px, 11vh, 132px) clamp(20px, 6vw, 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.la-book__eyebrow {
  margin: 0;
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--la-peach);            /* 4.81:1 through the scrim */
}
.la-book__heading {
  margin: 26px 0 0;
  font-size: clamp(40px, 9vw, 132px);
  line-height: .96;
  letter-spacing: -.03em;
  color: var(--la-cream);            /* 5.42:1 through the scrim */
}
.la-book__heading-accent {
  display: block;
  font-style: italic;
  color: var(--la-peach);
}
.la-book__text {
  margin: 30px 0 0;
  max-width: 30em;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  color: var(--la-white);            /* 5.73:1 through the scrim */
}
/* The page's primary action. White ground, deep plum ink: 12.48:1. */
.la-book__cta {
  margin-top: clamp(34px, 4.5vw, 56px);
  min-height: 56px;
  padding: 22px clamp(30px, 4.5vw, 60px);
  font-size: clamp(13px, 1.1vw, 14px);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 26px 60px rgba(52, 16, 66, .28);
}
.la-book__cta-arrow { font-size: 16px; letter-spacing: 0; }
.la-book__phone {
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--la-cream);
}
/* The only route to a Saturday appointment, per the copy beneath it. It must
   be unmistakably a link and must actually dial. */
.la-book__phone-link {
  color: var(--la-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  padding-bottom: 2px;
  white-space: nowrap;
}
.la-book__phone-link:hover,
.la-book__phone-link:focus-visible { border-bottom-color: var(--la-white); }
.la-book__phone-note { color: var(--la-peach); }
.la-book__details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 6vw, 80px);
  width: 100%;
  margin: clamp(40px, 6vw, 76px) 0 0;
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, .32);
}
.la-book__detail-label {
  margin: 0;
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--la-cream);
}
.la-book__detail-value {
  margin: 12px 0 0;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.3;
  color: var(--la-white);
}
/* --------------------------------------------------------------------------
   15. Treatment rail (reel)
   --------------------------------------------------------------------------
   Ported measurement-for-measurement from the design source. The stage is a
   centred column of head / track / counter, each full-bleed with the same
   6vw side padding — NOT a centred 1320px container, which is what pushed the
   heading into the middle of the screen. */
.la-reel {
  position: relative;
  background: var(--la-grad-reel);
  color: var(--la-ink);
}
.la-reel__stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(56px, 8vh, 96px);
}
/* Heading left, sub right, aligned on their baselines. Full width. */
.la-reel__head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 clamp(20px, 6vw, 90px) clamp(20px, 3vw, 42px);
}
.la-reel__head-main { flex: 0 1 auto; }
.la-reel__eyebrow {
  margin: 0;
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--la-ink-2);            /* 5.65:1 */
}
.la-reel__heading {
  margin: 12px 0 0;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 400;
}
.la-reel__sub {
  flex: 0 1 26em;
  max-width: 26em;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--la-ink-3);            /* 7.52:1 */
}
/* MOBILE: a real swipeable scroller. Desktop turns overflow off and drives it
   with a transform instead. */
.la-reel__track {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.la-reel__list {
  display: flex;
  gap: clamp(16px, 2vw, 30px);
  margin: 0;
  padding: 0 clamp(20px, 6vw, 90px);
  list-style: none;
}
/* MOBILE: width drives height via the 3:4 media, and the page scrolls, so
   nothing has to fit a screen. Desktop inverts this — see the note there. */
.la-reel__item {
  flex: 0 0 clamp(230px, 25vw, 360px);
  scroll-snap-align: start;
}
.la-reel__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.la-reel__card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--la-blush);
}
.la-reel__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .9, .28, 1);
}
.la-reel__card:hover .la-reel__card-img,
.la-reel__card:focus-visible .la-reel__card-img { transform: scale(1.04); }
.la-reel__card-foot {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.la-reel__card-index {
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: .16em;
  color: var(--la-ink-2);            /* 5.65:1 */
}
/* Two lines are reserved whether or not this title needs them.
   The design source's names are one word each ("Aviva", "Laser"); the real
   treatment names are the live site's and several run to two lines, so a
   caption that sizes itself leaves the cards on ragged baselines and makes the
   height the card needs depend on which card it is. */
.la-reel__card-title {
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.25;
  min-height: 2.5em;                 /* exactly two lines at 1.25 */
  color: var(--la-ink);              /* 14.01:1 */
}
/* The consultation card: a gradient panel with the prompt at the top and the
   link at the bottom, INSIDE the card. It has no caption underneath — it is an
   invitation, not a twelfth treatment. */
.la-reel__cta-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: clamp(22px, 2.4vw, 34px);
  background: linear-gradient(150deg, #FFD4A8, #FFA6C4 60%, #C9B4FF);
}
.la-reel__cta-prompt {
  margin: 0;
  font-family: var(--la-font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.2;
  color: var(--la-ink);              /* 12.1:1 at the lightest stop */
}
.la-reel__cta-link {
  align-self: flex-start;
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--la-ink);
  border-bottom: 1px solid var(--la-ink);
  padding-bottom: 5px;
}
/* "01 / 11" then a rule that fills as the rail advances. */
.la-reel__counter {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(22px, 3vw, 42px) clamp(20px, 6vw, 90px) 0;
}
.la-reel__counter-label {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--la-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.la-reel__counter-track {
  position: relative;
  flex: 1;
  height: 1px;
  background: #F3D3DF;
  overflow: hidden;
}
.la-reel__counter-bar {
  position: absolute;
  inset: 0;
  background: var(--la-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
@media (min-width: 768px) and (pointer: fine) {
  .la-home--choreographed .la-reel { height: calc(100svh + var(--la-reel-scroll, 220vh)); }
  .la-home--choreographed .la-reel__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    /* No vertical padding, as in the design source. The stage is a fixed
       screen with three rows in it; padding here is 112-192px taken straight
       out of the card, which is what was pushing the captions past the bottom
       edge. Side padding stays on each row, as the source has it. */
    padding-block: 0;
  }
  /* Native overflow off: the transform drives it, and the two would fight. */
  .la-home--choreographed .la-reel__track {
    overflow: hidden;
    scroll-snap-type: none;
  }
  /* HEIGHT DRIVES WIDTH on desktop, the reverse of the mobile rule above.

     The stage is exactly one screen and cannot scroll, so the card has to fit
     what is left after the head, the caption and the counter — sizing it from
     `25vw` and hoping is what clipped the two-line captions. The controller
     measures the leftover and publishes it as --la-reel-media; the 3:4 ratio
     then gives the width, and the cap keeps a card from growing past the
     source's 360px on a tall, narrow window.

     The fallback matters: if the script does not run, 40vh is the old
     behaviour, which is wrong only for two-line captions rather than broken. */
  .la-home--choreographed .la-reel {
    --la-reel-media-h: min(var(--la-reel-media, 40vh), calc(clamp(230px, 25vw, 360px) * 4 / 3));
  }
  /* The ITEM carries the width, not the media. Sizing the media alone and
     leaving the item at `auto` lets the caption set the card's width, so a
     long treatment name stops wrapping and the card grows wider than its own
     picture. */
  .la-home--choreographed .la-reel__item {
    flex: 0 0 calc(var(--la-reel-media-h) * 3 / 4);
  }
  .la-home--choreographed .la-reel__card-media,
  .la-home--choreographed .la-reel__cta-panel {
    width: 100%;
    height: var(--la-reel-media-h);
    aspect-ratio: auto;
  }
}
/* --------------------------------------------------------------------------
   16. Reviews
   --------------------------------------------------------------------------
   Head is full-bleed with the same 6vw padding as the other sections, not a
   centred container. The widget supplies its own review markup; section 19
   skins it to the card spec below. The logo row is a marquee. */

.la-reviews {
  position: relative;
  background: var(--la-grad-reviews);
  color: var(--la-ink);
  overflow: hidden;
}

.la-reviews__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(72px, 10vh, 100px) 0 clamp(56px, 8vh, 80px);
}

.la-reviews__head { padding: 0 clamp(20px, 6vw, 90px); }

.la-reviews__eyebrow {
  margin: 0;
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--la-ink-2);            /* 5.93:1 */
}

.la-reviews__heading {
  margin: 12px 0 0;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -.02em;
}

.la-reviews__widget {
  margin-top: clamp(28px, 4vw, 56px);
  padding: 0 clamp(20px, 6vw, 90px);
  min-height: 120px;
}

/* Brand marquee. The track is duplicated in markup so the loop is seamless;
   it drifts with scroll rather than on a timer. */
.la-reviews__logos {
  overflow: hidden;
  margin: clamp(32px, 4vw, 60px) 0 0;
  padding: 0;
  list-style: none;
}

.la-reviews__logos-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.la-reviews__logos-set {
  display: flex;
  align-items: center;
  gap: clamp(34px, 5vw, 80px);
  padding-right: clamp(34px, 5vw, 80px);
}

.la-reviews__logo {
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--la-ink-2);            /* 5.93:1 */
}

@media (prefers-reduced-motion: reduce) {
  .la-reviews__logos-track { transform: none !important; }
}

/* --------------------------------------------------------------------------
   17. Navigation — homepage only
   --------------------------------------------------------------------------
   ADR-0006. The shared header is hidden HERE and only here; sections/header
   .liquid is untouched and still renders on the other 33 templates.
   Scoped to body.template-index as a belt-and-braces guard. This stylesheet is
   only loaded by the homepage's own sections anyway, but the guard means that
   if it is ever linked from somewhere else, it cannot blank that page's nav. */
/* Shopify wraps every static section in an id of the form
   #shopify-section-NAME, which is a contract rather than an internal class
   name the theme might rename. */
body.template-index #shopify-section-header,
body.template-index #shopify-section-announcement {
  display: none !important;
}
/* Our pill is fixed, so the page needs no header spacing reserved. */
body.template-index .main-content { padding-top: 0; margin-top: 0; }
.la-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  width: auto;
  max-width: calc(100% - 24px);
  transition: transform .45s cubic-bezier(.22, .9, .28, 1),
              opacity .35s ease;
}
/* Hidden while scrolling down, back on the first upward movement. The mockup
   does this; it keeps the bar out of the way of a full-bleed stage without
   putting the booking CTA more than one gesture away. */
.la-nav.is-hidden {
  transform: translateX(-50%) translateY(-160%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .la-nav { transition: none; }
}
/* Design v5's two inks, set here rather than borrowed from the page tokens:
   the warm-palette override further down remaps --la-ink and --la-cream for
   the sections, and the nav follows the design source, not that remap. */
:root {
  --la-nav-ink: #1F1E1C;
  --la-nav-paper: #FCFAF7;
}
/* Measurements are the mockup's, read from the export — except the height,
   which the logo now sets. See the note in la-nav.liquid. */
.la-nav__bar {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 20px);
  padding: 7px 8px 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(31, 30, 28, .12);
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(26px) saturate(1.8);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 10px 30px rgba(31, 30, 28, .09);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
  color: var(--la-nav-ink);
}
/* Over a dark section: the hero film, areas and the footer.
   v5's own values — a pale glass at .12 with paper ink. The old palette needed
   a plum veil here (ADR-0007) because cream ink over the coral and pink
   gradients measured 1.83:1. Those gradients are gone; every section this
   class now applies to is genuinely dark, and the hero carries its own dark
   band across the top 110px, which is where the bar sits.
   --la-nav-veil is kept as the escape hatch: raise it to darken the glass if a
   lighter film is ever swapped into the hero. */
:root { --la-nav-veil: 0; }
.la-nav--on-dark .la-nav__bar {
  background:
    linear-gradient(rgba(31, 30, 28, var(--la-nav-veil)), rgba(31, 30, 28, var(--la-nav-veil))),
    rgba(252, 250, 247, .12);
  border-color: rgba(252, 250, 247, .28);
  color: var(--la-nav-paper);
  backdrop-filter: blur(26px) saturate(1.8);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 10px 34px rgba(31, 30, 28, .14),
              inset 0 1px 0 rgba(255, 255, 255, .18);   /* top highlight */
}
/* Not a substitute for contrast and not counted as one, but it helps where the
   film behind the bar has a bright patch. */
.la-nav--on-dark .la-nav__link,
.la-nav--on-dark .la-nav__cta,
.la-nav--on-dark .la-nav__cart {
  text-shadow: 0 1px 3px rgba(31, 30, 28, .45);
}
.la-nav__logo { display: flex; align-items: center; flex: 0 0 auto; line-height: 0; }
/* Height comes from the section's `logo_height`, inline on the img. No cap
   here: the old 34px max-height is what made the stacked mark look crushed. */
.la-nav__logo img {
  display: block;
  max-height: none;
  object-fit: contain;
  /* One file for either ink. brightness(0) takes any single-colour mark —
     the client supplied black and white versions — to black. */
  filter: brightness(0);
  transition: filter .4s ease;
}
.la-nav--on-dark .la-nav__logo img { filter: brightness(0) invert(1); }
.la-nav__logo-text {
  font-family: var(--la-font-display);
  font-size: 20px;
  color: currentColor;
}
.la-nav__links {
  display: flex;
  align-items: center;
  /* Stretched to the bar's full inner height so a panel's `top: 100%` means
     the bottom of the BAR, not the bottom of a link that is now centred in a
     much taller pill. */
  align-self: stretch;
  gap: clamp(2px, .6vw, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.la-nav__item { position: relative; align-self: stretch; display: flex; align-items: center; }
.la-nav__links { gap: clamp(2px, .5vw, 10px); }
.la-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  border: 0;
  background: transparent;
  color: currentColor;
  /* Mockup sets 10.5px. Lifted to 12px — this is the primary navigation of a
     clinic site whose patients skew older. */
  font: inherit;
  /* The mockup's 10.5px, as asked. Small for a clinic audience — raised as its
     own finding in ticket 06 — so it is a variable rather than a literal. */
  font-size: var(--la-nav-size, 10.5px);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
}
:root { --la-nav-size: 10.5px; }
.la-nav__link:hover { background: rgba(31, 30, 28, .08); }
.la-nav--on-dark .la-nav__link:hover { background: rgba(252, 250, 247, .2); }
.la-nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.la-nav__chev {
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
/* v5's panel: a wide glass card centred under the PILL, not under the link
   that opened it. The item gives up its positioning so the panel's containing
   block is .la-nav itself (fixed, and exactly the bar's size on desktop), and
   11px of air below it is v5's gap. */
.la-nav__item--has-panel { position: static; }
.la-nav__panel {
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, calc(100vw - 24px));
  padding: 26px clamp(20px, 2.4vw, 34px) 28px;
  border-radius: 24px;
  border: 1px solid rgba(252, 250, 247, .5);
  background: rgba(252, 250, 247, .94);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 22px 60px rgba(31, 30, 28, .18);
  color: var(--la-nav-ink);
  text-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  transition: opacity .3s ease, transform .3s ease;
}
/* v5 fades the card down into place. @starting-style gives the same entrance
   off the `hidden` toggle; browsers without it simply show the panel. */
@starting-style {
  .la-nav__panel:not([hidden]) { opacity: 0; transform: translate(-50%, -12px); }
}
@media (prefers-reduced-motion: reduce) {
  .la-nav__panel { transition: none; }
}
.la-nav__panel--narrow { width: min(560px, calc(100vw - 24px)); padding: 22px clamp(20px, 2.4vw, 32px) 24px; }
.la-nav__panel-label {
  margin: 0 0 6px;
  font-size: 9.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #7E604B;                    /* 5.5:1 on the panel */
}
.la-nav__panel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px clamp(24px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.la-nav__panel-list + .la-nav__panel-label { margin-top: 18px; }
.la-nav__panel-link {
  display: block;
  padding: 7px 0;
  color: var(--la-nav-ink);
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
}
.la-nav__panel-link:hover { color: #7E604B; }
.la-nav__panel-all {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 5px;
  border-bottom: 1px solid #A07D62;
  color: var(--la-nav-ink);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.la-nav__panel-all:hover { color: #7E604B; }
.la-nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.la-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: currentColor;
  font-size: var(--la-nav-size, 10.5px);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.la-nav__cta { transition: background .35s ease, color .35s ease, border-color .35s ease; }
.la-nav__cta:hover { background: var(--la-nav-ink); border-color: var(--la-nav-ink); color: var(--la-nav-paper); text-shadow: none; }
.la-nav--on-dark .la-nav__cta:hover { background: var(--la-nav-paper); border-color: var(--la-nav-paper); color: var(--la-nav-ink); }
.la-nav__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  min-width: 40px;
  padding: 0 8px;
  border-radius: 999px;
  color: currentColor;
  font-size: var(--la-nav-size, 10.5px);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.la-nav__cart-label { display: none; }   /* the count alone carries it */
.la-nav__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0;
}
@media (min-width: 1200px) {
  .la-nav__cart-label { display: inline; }
}
.la-nav__cart:hover { background: rgba(31, 30, 28, .08); }
.la-nav--on-dark .la-nav__cart:hover { background: rgba(252, 250, 247, .2); }
.la-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}
.la-nav__burger-bar { display: block; height: 1px; background: currentColor; }
/* Out of flow and full width. In flow it took the PILL's width — under 200px
   on a phone once the logo was in it — and wrapped every treatment name over
   three lines. */
.la-nav__drawer {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 24px);
  max-width: 520px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(252, 250, 247, .5);
  background: rgba(252, 250, 247, .97);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 22px 60px rgba(31, 30, 28, .18);
  color: var(--la-nav-ink);
  text-shadow: none;
  max-height: 70svh;
  overflow-y: auto;
}
.la-nav__drawer-list,
.la-nav__drawer-sub { margin: 0; padding: 0; list-style: none; }
.la-nav__drawer-link,
.la-nav__drawer-sublink,
.la-nav__drawer-cta {
  display: block;
  min-height: 48px;
  padding: 13px 10px;
  color: var(--la-nav-ink);
  text-decoration: none;
  font-size: 15px;
}
.la-nav__drawer-sublink { padding-left: 26px; font-size: 14px; color: #5E5B57; }   /* 6.5:1 on the drawer */
.la-nav__drawer-cta {
  margin-top: 10px;
  text-align: center;
  border: 1px solid var(--la-nav-ink);
  border-radius: 999px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 13px;
}
/* Skip link. theme.liquid has its own, but it targets #MainContent, which sits
   BEFORE this nav in the document — so it does not actually skip the nav. This
   one does. The small redundancy is worth it. */
.la-nav__skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 600;
  padding: 12px 18px;
  background: var(--la-ink);
  color: var(--la-cream);
  text-decoration: none;
}
.la-nav__skip:focus {
  left: 12px;
  top: 12px;
}
/* Below the desktop breakpoint the links collapse into the drawer. */
@media (max-width: 900px) {
  .la-nav__links { display: none; }
  .la-nav__burger { display: flex; }
  .la-nav__cta { display: none; }
}
@media (min-width: 901px) {
  .la-nav__drawer { display: none; }
}
/* --------------------------------------------------------------------------
   18. Hero intro reveal
   --------------------------------------------------------------------------
   Mirrors design v5. A white veil in `mix-blend-mode: screen`: screen leaves
   the backdrop unchanged wherever the veil is black, so every black element
   inside punches a hole through to the hero. The logo and the light sweeps
   are both just black shapes. v5's ripple rings and tan brush strokes were
   taken out after the lead dev's review (2026-10-02); see la-hero.liquid.
   Values are the design's, read from the source rather than eyeballed.

   The hero UNDERNEATH is the lead dev's (the warm-palette block at the end of
   this file), not v5's: decided 2026-10-01. Only the opening is v5's. */
/* FIXED and full-viewport, not confined to the hero.
   It previously sat inside .la-hero__stage, which has `isolation: isolate`, so
   it covered the hero and nothing else — the nav and the third-party widgets
   were outside it entirely. Fixed positioning at a high z-index puts it over
   the whole page.
   One honest limit: third-party widgets that set their own very high z-index
   (the chat bubble, the reviews popup) can still sit above this. We do not
   control their stacking. */
.la-hero__veil {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #FFFFFF;               /* v5. Not --la-cream, which is remapped */
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;                        /* armed by JS; see the note below */
  will-change: opacity, transform;
  /* The exit. Declared HERE, not on the lifting class, or there is nothing to
     transition from when the armed class comes off. Transitions do not run on
     the first style resolution, so arming still shows the veil instantly. */
  transition: opacity var(--la-exit-fade) ease var(--la-exit-fade-in),
              transform var(--la-exit) var(--la-exit-ease);
}
/* Never shown unless JS is running and has taken responsibility for lifting
   it. A script failure must not leave a white sheet over the hero. */
.la-home--intro-armed .la-hero__veil { opacity: 1; }
/* THE EXIT — one staged choreography, not a crossfade.
   ---------------------------------------------------------------------------
   Asked for after a review against beautyinstem.com, whose loader is the
   reference for "smooth". Three things make that one work:

     1. The mask GROWS PAST THE VIEWPORT rather than dissolving where it stands.
     2. The phases OVERLAP. Nothing finishes before the next thing begins.
     3. Long, soft eases. Nothing snappy.

   The motion itself is the design source's: the logo scales to `1 + ewp*17`
   and turns -2.4deg across the first third of the hero. The design drives that
   from scroll; here it is a timed state class (homepage-redesign.js, HOLD and
   EXIT) so the intro also resolves for a visitor who never scrolls, and so it
   runs on mobile, where there is no GSAP. */
:root {
  /* ORDER MATTERS MORE THAN OVERLAP HERE.

     Nothing that is under the veil may fade IN while the veil is still
     opaque. A white sheet in `screen` does not hide what is beneath it, it
     washes it — so pale text coming up underneath does not read as text
     arriving, it reads as specks and tick marks in the middle of the reveal.
     So the veil goes first, and the copy waits until it is nearly clear. */
  --la-exit: 2s;                     /* the logo opening out */
  --la-exit-ease: cubic-bezier(.22, .61, .36, 1);   /* a sine.out, near enough */
  --la-exit-fade: 1s;                /* the veil's own fade: .55s -> 1.55s */
  --la-exit-fade-in: .55s;           /* which does not start until it is open */
  --la-exit-copy: 1.5s;              /* the copy waits for the sheet to go */
}
/* The sheet drifts; the logo does the real move. */
.la-home--intro-lifting .la-hero__veil { transform: scale(1.35); }
.la-hero__veil-word {
  transition: transform var(--la-exit) var(--la-exit-ease);
}
.la-home--intro-lifting .la-hero__veil-word {
  transform: rotate(-2.4deg) scale(17);
}
/* Freeze the breathing rather than removing it: `animation: none` snaps the
   mark back to scale(1) at whatever point the cycle had reached. */
.la-home--intro-lifting .la-hero__veil-mark { animation-play-state: paused; }
/* The sweeps go early — at 17x they would smear into bands. */
.la-home--intro-lifting .la-hero__veil-sweep {
  opacity: 0;
  transition: opacity .5s ease;
}
/* The nav joins the copy, not the veil. Scoped to the lift so the nav's own
   hide-on-scroll transition is untouched afterwards. */
.la-home--intro-lifting .la-nav {
  transition: opacity 1s ease var(--la-exit-copy);
}
/* The nav is hidden for the whole intro and arrives with the hero copy.
   The design source keeps it visible over the reveal; that is a departure we
   make deliberately — the client asked for the intro to cover everything, and
   a bar floating over the title card reads as chrome that forgot to leave.

   TWO classes, not one. `intro-pending` is set by la-nav's own inline script
   before this bar is parsed, which is the only way to stop it painting for a
   frame first — la-hero renders later and its arming class arrives too late.
   `intro-armed` then carries it for the rest of the intro. Both are cleared on
   a timeout if the controller never runs, so the bar cannot be lost. */
.la-home--intro-pending .la-nav,
.la-home--intro-armed .la-nav {
  opacity: 0;
  pointer-events: none;
}
/* No transition while pending: the bar must be hidden on the first frame, not
   fade out from visible. */
.la-home--intro-pending .la-nav { transition: none; }
.la-nav { transition: opacity .7s ease .2s; }
/* The hero copy is HIDDEN during the intro, not merely behind it — all of it,
   heading included. Under `screen` a white veil leaves white text exactly
   white, so the headline would read straight through the logo's holes.
   visibility as well as opacity, for the same reason: a part-faded line still
   ghosts.

   SPECIFICITY IS DELIBERATE: (0,3,1). The warm-palette block at the end of
   this file pins the hero copy visible with `html body .la-hero
   [data-la-reveal]` at (0,2,2), which beat the old (0,2,0) selectors here and
   left the copy showing through the veil. Scoped to the armed class, so a JS
   failure leaves the copy visible. */
html.la-home--intro-armed .la-hero :is(.la-hero__eyebrow, .la-hero__heading, .la-hero__sub, .la-hero__actions, .la-hero__cue) {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  visibility: hidden;
}
/* The copy arrives once the sheet is nearly gone, lightly staggered top to
   bottom as v5's does. Scoped to the lifting class: the intro owns the timing
   while it is lifting, the reveal system everywhere else. */
html.la-home--intro-lifting .la-hero :is(.la-hero__eyebrow, .la-hero__heading, .la-hero__sub, .la-hero__actions, .la-hero__cue) {
  --la-copy-at: var(--la-exit-copy);
  transition: opacity 1s ease var(--la-copy-at),
              transform 1.1s var(--la-exit-ease) var(--la-copy-at),
              visibility 0s linear var(--la-copy-at);
}
html.la-home--intro-lifting .la-hero .la-hero__heading { --la-copy-at: calc(var(--la-exit-copy) + .08s); }
html.la-home--intro-lifting .la-hero .la-hero__sub     { --la-copy-at: calc(var(--la-exit-copy) + .18s); }
html.la-home--intro-lifting .la-hero .la-hero__actions { --la-copy-at: calc(var(--la-exit-copy) + .26s); }
html.la-home--intro-lifting .la-hero .la-hero__cue     { --la-copy-at: calc(var(--la-exit-copy) + .4s); }
@media (prefers-reduced-motion: reduce) {
  .la-hero :is(.la-hero__eyebrow, .la-hero__heading, .la-hero__sub, .la-hero__actions, .la-hero__cue) {
    transition: none;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}
/* The logo box. v5's own sizing: the width of the viewport on a phone, three
   quarters of its height on a short landscape screen, and never wider than
   700px. Its height follows the image. */
.la-hero__veil-word {
  position: relative;
  display: block;
  width: min(84vw, 78vh, 700px);
  will-change: transform;
}
/* Entrance, then a slow continuous breath. */
.la-hero__veil-mark {
  display: block;
  animation: la-word-in .95s cubic-bezier(.2, .9, .28, 1) both,
             la-word-breathe 3.4s ease-in-out .95s infinite;
}
.la-hero__veil-mark img {
  display: block;
  width: 100%;
  height: auto;
  /* black = a hole in the veil. Takes either supplied file, black or white. */
  filter: brightness(0);
  user-select: none;
  -webkit-user-drag: none;
}
/* Light sweeps: a wide soft pass with a narrow hard one just behind it. */
.la-hero__veil-sweep {
  position: absolute;
  top: -20%;
  left: 0;
  height: 140%;
  animation: la-mask-sweep 2.4s cubic-bezier(.5, 0, .3, 1) infinite;
}
.la-hero__veil-sweep--wide {
  width: 26%;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.6) 45%, rgba(0,0,0,0));
  filter: blur(28px);
}
.la-hero__veil-sweep--thin {
  width: 9%;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.85), rgba(0,0,0,0));
  filter: blur(8px);
  animation-delay: .08s;
}
@keyframes la-word-in {
  0%   { opacity: 0; transform: translate3d(0, 60px, 0) scale(.82); filter: blur(30px); }
  45%  { opacity: 1; filter: blur(6px); }
  70%  { transform: translate3d(0, 0, 0) scale(1.045); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes la-word-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@keyframes la-mask-sweep {
  0%   { transform: translateX(-80%) skewX(-16deg); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateX(180%) skewX(-16deg); opacity: 0; }
}
/* The reveal is entirely motion, so reduced motion removes it rather than
   slowing it. */
@media (prefers-reduced-motion: reduce) {
  .la-hero__veil { display: none !important; }
}
/* --------------------------------------------------------------------------
   19. Reviewability widget
   --------------------------------------------------------------------------
   Overrides, not a replacement. The widget loads its own stylesheet, which
   supplies the layout; these rules re-skin it to the redesign.
   Scoped under .la-reviews so they beat the widget's own single-class rules on
   specificity, whichever order the two stylesheets land in.
   Class names are the real ones, read out of widgetAdv.min.js. An earlier pass
   targeted `.revwid-widget` and `.revwid-container`, which the widget never
   emits. If a rule here stops applying, check the loader again before assuming
   the CSS is at fault. */
.la-reviews .revwid-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  font-family: var(--la-font-body);
}
@media (min-width: 768px) {
  .la-reviews .revwid-reviews { grid-template-columns: repeat(3, 1fr); }
}
.la-reviews .revwid-review,
.la-reviews .revwid-box {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--la-white);
  padding: clamp(26px, 2.6vw, 40px);
  margin: 0;
  border: 1px solid var(--la-blush);
  border-radius: 0;
  box-shadow: none;
}
.la-reviews .revwid-review-content,
.la-reviews .revwid-review-full-text,
.la-reviews .revwid-text {
  flex: 1;
  margin: 0;
  font-family: var(--la-font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.45;
  color: var(--la-ink);              /* 16.72:1 on white */
}
.la-reviews .revwid-block-quote-author {
  display: block;
  margin: 0;
  font-family: var(--la-font-body);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--la-ink-2);            /* 6.74:1 on white */
}
/* Stars carry the rating, so they are meaningful rather than decorative and
   take the AA-passing pink. The mockup's #E0407F is 4.03:1 on white. */
.la-reviews .revwid-icon-star,
.la-reviews .revwid-icon-star-half {
  color: var(--la-pink-text);        /* 4.51:1; source uses #E0407F at 4.03 */
  letter-spacing: .3em;
}
.la-reviews .revwid-icon-star-empty { color: rgba(43, 20, 54, .22); }
.la-reviews .revwid-pagination { grid-column: 1 / -1; }
.la-reviews .revwid-pagination-list {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
}
.la-reviews .revwid-pagination-link,
.la-reviews .revwid-pagination-arrow {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(43, 20, 54, .28);
  border-radius: 0;
  background: transparent;
  color: var(--la-ink);
  font-size: 13px;
}
.la-reviews .revwid-pagination-link.revwid-is-active,
.la-reviews .revwid-pagination-link:hover {
  background: var(--la-ink);
  color: var(--la-cream);
}
/* Third-party markup does not inherit our focus ring automatically. */
.la-reviews .revwid-reviews :focus-visible {
  outline: 2px solid var(--la-ink);
  outline-offset: 3px;
}
/* --------------------------------------------------------------------------
   20. Footer — homepage only
   --------------------------------------------------------------------------
   ADR-0008, which mirrors ADR-0006 for the nav. The shared footer is hidden
   HERE and only here; sections/footer.liquid is untouched and still renders on
   the other 33 templates. Scoped to body.template-index as a belt-and-braces
   guard, exactly as the header rule above is: this stylesheet is only loaded
   by the homepage's own sections, but if it were ever linked from elsewhere it
   must not blank that page's footer.

   CONTRAST. Everything here sits on plum #2B1436, where the mockup's own
   palette passes without substitution — unlike --la-ink-3-muted, which exists
   because #A98BC4 is 2.77:1 on cream. Measured on #2B1436:
     #FFF7F4  cream    15.65:1
     #E3CFE0  blush    11.24:1
     #A98BC4  mauve     5.65:1
   So the lilac is used as-is here and nowhere else. */
body.template-index #shopify-section-footer {
  display: none !important;
}

.la-footer {
  position: relative;
  background: var(--la-plum-deep);
  color: var(--la-cream);
  padding: clamp(56px, 7vw, 92px) clamp(20px, 6vw, 90px) 0;
  overflow: hidden;
}
/* The gradient hairline. Same stops as the page's progress bar, which is what
   ties the footer back to the sections above it. */
.la-footer__hairline {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--la-coral), var(--la-pink) 55%, var(--la-violet));
}
.la-footer__inner { max-width: 1320px; margin-inline: auto; }

/* auto-fit rather than a fixed four-column grid: the column count is a content
   decision (blocks), and the columns must reflow on their own when the client
   adds or removes one. */
.la-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.la-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.la-footer__logo { display: inline-flex; align-self: flex-start; }
/* The theme's logo is a dark mark on a light ground, so on plum it has to be
   lifted or it is invisible. Same treatment the nav gives it over a dark
   section (.la-nav--on-dark), except the footer's ground is always dark. */
.la-footer__logo img {
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
/* Only reached when no logo is set. The mockup's Great Vibes wordmark is the
   fallback's model, not the default — see the note at the top of the section. */
.la-footer__logo-text {
  font-family: var(--la-font-script);
  font-size: 38px;
  line-height: 1.1;
  color: var(--la-cream);
}
.la-footer__blurb {
  margin: 0;
  max-width: 26em;
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.75;
  color: #E3CFE0;                    /* 11.24:1 */
}
/* The one filled control in the footer. White ink on the page gradient is
   4.62:1 at the darkened stops used for the liz CTA; the raw stops are 2.10:1,
   so this reuses the accessible gradient rather than the decorative one. */
.la-footer__cta {
  align-self: flex-start;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--la-grad-cta-liz);
  color: var(--la-white);
  font-size: clamp(11px, .95vw, 12px);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.22, .9, .28, 1), filter .35s ease;
}
.la-footer__cta:hover {
  color: var(--la-white);
  transform: translate3d(0, -2px, 0);
  filter: brightness(1.08);
}

.la-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.la-footer__col-head {
  margin: 0;
  font-family: var(--la-font-body);
  font-size: clamp(11px, .9vw, 12px);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #A98BC4;                    /* 5.65:1 on plum */
}
.la-footer__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.la-footer__link {
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.5;
  color: var(--la-cream);
  text-decoration: none;
  transition: color .3s ease;
}
.la-footer__link:hover { color: var(--la-peach); }
.la-footer__address {
  margin: 0;
  font-family: var(--la-font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3;
  color: var(--la-cream);
}
.la-footer__hours {
  margin: 6px 0 0;
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.7;
  color: #E3CFE0;
}

/* The standing regulatory notice. Australian cosmetic-medicine advertising is
   regulated; CONTEXT.md carries the rules. The export sets it at 12px — held
   at a 14px floor here, the same call made across the build in ticket 06. */
.la-footer__regulatory {
  margin: clamp(44px, 5vw, 68px) 0 0;
  max-width: 70em;
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 1.8;
  color: #A98BC4;
}

.la-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(20px, 3vw, 44px);
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(26px, 3vw, 38px);
  padding: 26px 0 clamp(30px, 4vw, 42px);
  border-top: 1px solid rgba(255, 247, 244, .18);
  font-size: clamp(11px, .9vw, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A98BC4;
}
.la-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.la-footer__legal-link {
  color: #A98BC4;
  text-decoration: none;
  transition: color .3s ease;
}
.la-footer__legal-link:hover { color: var(--la-cream); }
.la-footer__copy { color: #A98BC4; }
.la-footer__top {
  color: var(--la-cream);
  text-decoration: none;
  transition: color .3s ease;
}
.la-footer__top:hover { color: var(--la-peach); }

/* On a phone the legal row's three parts sit on their own lines rather than
   trying to justify across a 320px screen. */
@media (max-width: 600px) {
  .la-footer__legal { justify-content: flex-start; }
}
/* --------------------------------------------------------------------------
   21. Scrubbed reveals — desktop only
   --------------------------------------------------------------------------
   Elements that carry BOTH [data-la-reveal] and a section's own scrub hook.

   The reveal attribute is what gives them a hidden resting state and what
   makes them appear at all on mobile, where there is no GSAP. On the
   choreographed path their section writes opacity and transform inline every
   frame, and inline styles beat the .is-revealed class rule — but the
   TRANSITION declared alongside it does not go away, so every scrub step was
   being eased over .7s. That reads as lag, not smoothing. Dropping the
   transition here leaves the scrub as the only thing moving them.

   Specificity note: these are (0,2,0), the same as
   `.la-home--choreographed [data-la-reveal]`, and they are later in the file.
   That is deliberate and load-bearing — see the architecture note in the
   handoff about the reveal system outranking ad-hoc rules. */
   No will-change on either, for the reason set out in section 11: both lists
   are headings and body copy, and promoting text to its own layer swaps
   subpixel antialiasing for grayscale and makes it read as slightly soft. */
.la-home--choreographed [data-la-liz-el],
.la-home--choreographed [data-la-book-el] {
  transition: none;
}
/* The portrait parallaxes +-7% inside its frame, so it needs the source's
   overhang or the frame's blush background shows at the edge of the travel.
   The static path keeps the plain 100% fit — it never moves. */
.la-home--choreographed .la-liz__portrait-el {
  position: absolute;
  inset: -10% 0;
  height: 120%;
  will-change: transform;
}
.la-home--choreographed .la-liz__ghost,
.la-home--choreographed [data-la-book-glow] { will-change: transform, opacity; }
/* The rail's cards are transformed per frame from their measured position. */
.la-home--choreographed .la-reel__item { will-change: transform, opacity; }
/* --------------------------------------------------------------------------
   22. Page chrome — progress bar and grain
   --------------------------------------------------------------------------
   Both are the mockup's (`data-bar`, `data-grain`) and neither had been
   ported. Rendered by la-nav, which owns the other page-wide furniture.

   Z-ORDER follows the source, where the grain (125) sits ABOVE the header
   (122) and the bar (130) above everything. The nav is at 500 here, so the
   two are placed either side of it. Both are pointer-events:none, so nothing
   above the nav can swallow a click on it. */
.la-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 520;
  pointer-events: none;
}
.la-progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--la-coral), var(--la-pink) 55%, var(--la-violet));
  will-change: transform;
}
/* The grain is what stops the gradients reading as flat CSS — a 160px tile of
   desaturated fractal noise multiplied over the page. One inline data URI, no
   script, no request.

   The export's own copy of this SVG does not work: the Claude Design runtime
   mangles camelCase SVG attributes and ships `sc-camel-base-frequency` and
   `sc-camel-num-octaves`, which feTurbulence ignores. The real names are used
   here. Anyone diffing this against the export will find it does not match —
   that is the point. */
.la-grain {
  position: fixed;
  inset: 0;
  z-index: 510;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}
/* Print has no use for either, and the grain would waste toner on every page. */
@media print {
  .la-progress,
  .la-grain { display: none; }
}
/* --------------------------------------------------------------------------
   23. The persistent clinic mark
   --------------------------------------------------------------------------
   Client request: their own logo stays visible the whole way down the page.
   The bar cannot carry that — it hides on scroll down by design — so this is a
   separate fixed mark in the top-left corner.

   Quiet on purpose. At full strength a logo pinned over every section competes
   with the section that is actually being read; at 75% it registers as a
   watermark and gets out of the way. Full strength on hover, since at that
   point it is being treated as a control. */
.la-brand {
  position: fixed;
  top: 14px;
  /* Matches the section rail's inset on the right, so the two corners balance
     instead of one sitting tighter than the other. */
  left: clamp(12px, 2vw, 34px);
  z-index: 495;            /* under the bar (500), over the page */
  display: block;
  line-height: 0;
  opacity: var(--la-brand-opacity, .75);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, .9, .28, 1);
}
.la-brand:hover {
  opacity: 1;
  transform: translate3d(0, -2px, 0);
}
.la-brand img {
  display: block;
  width: auto;
  /* Scales down on a phone, where the corner is a far bigger share of the
     screen and the mark would otherwise crowd the bar. All three terms carry
     the same 1.5x the client asked for, so it is bigger everywhere rather than
     only at the width they happened to be looking at. */
  height: clamp(51px, 10.5vw, var(--la-brand-size, 78px));
}
/* The theme's logo is a dark mark on a light ground. Over a dark section it
   needs lifting, exactly as .la-nav--on-dark does for the bar — and driven
   from that same observer, so the two can never disagree. */
.la-brand--on-dark img { filter: brightness(0) invert(1); }

/* HIDDEN FOR THE WHOLE INTRO, arriving with the hero copy.
   The title card is the brand moment; a second mark sitting in the corner
   through it reads as chrome that forgot to leave. Same two-class guard the
   bar uses — `intro-pending` is set before this element is parsed, so it never
   paints for a frame first. */
.la-home--intro-pending .la-brand,
.la-home--intro-armed .la-brand {
  opacity: 0;
  pointer-events: none;
}
.la-home--intro-pending .la-brand { transition: none; }
.la-home--intro-lifting .la-brand {
  transition: opacity 1s ease var(--la-exit-copy);
}
/* THE ONE BAND WHERE IT CANNOT SIT: 901px - 1199px.

   The bar is centred and content-driven. Measured, it is 914px wide in its
   full desktop layout, and the mark needs about 128px of clearance on the left
   (34px inset + 78px mark + a 16px gap). Half the leftover width only exceeds
   that from ~1170px up, so the 1200px floor still clears it by 15px:

     viewport   1000   1100   1200   1280   1512
     clearance    43     93    143    183    299

   So between 901 and 1199 the pill runs straight over the mark. Below 901 the
   links and CTA collapse into the drawer, the pill shrinks to a logo and a
   burger, and there is room again — which is why this is a band and not a
   floor. Overlapping chrome is worse than a mark that steps aside. */
@media (min-width: 901px) and (max-width: 1199px) {
  .la-brand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .la-brand { transition: none; }
}
@media print {
  .la-brand { display: none; }
}

/* Lift warm palette and video hero: September 28, 2026. */
/* Candidate palette. Replace the matching neutral tokens, rather than
   permanently stacking a second theme override in the Shopify stylesheet. */
:root {
  --lift-ivory: oklch(97.8% .009 68);
  --lift-paper: oklch(99.1% .004 68);
  --lift-stone: oklch(91.7% .025 58);
  --lift-tan: oklch(70.1% .055 48);
  --lift-ink: oklch(30.7% .025 48);
  --lift-muted: oklch(51% .031 48);
  --la-cream: var(--lift-ivory) !important;
  --la-white: var(--lift-paper) !important;
  --la-blush: var(--lift-stone) !important;
  --la-peach: oklch(92.9% .025 58) !important;
  --la-plum-deep: var(--lift-ink) !important;
  --la-ink: var(--lift-ink) !important;
  --la-ink-2: var(--lift-muted) !important;
  --la-ink-3: oklch(45% .027 48) !important;
  --la-ink-3-muted: var(--lift-muted) !important;
  --la-ink-plum-deep: var(--lift-ink) !important;
  --la-ink-plum-deepest: oklch(25% .02 48) !important;
  --la-coral: var(--lift-tan) !important;
  --la-coral-red: oklch(65% .061 43) !important;
  --la-pink: oklch(65% .061 43) !important;
  --la-pink-pressed: oklch(55% .058 43) !important;
  --la-violet: var(--lift-muted) !important;
  --la-teal: oklch(68% .035 60) !important;
  --la-pink-text: oklch(46% .055 43) !important;
  --la-pink-text-pressed: oklch(35% .04 43) !important;
  --la-violet-text: oklch(46% .04 48) !important;
  --la-grad-cta-liz: var(--lift-ink) !important;
  --la-grad-cta-hero: var(--lift-paper) !important;
  --la-grad-hero: var(--lift-ink) !important;
  --la-grad-words: var(--lift-paper) !important;
  --la-grad-areas: oklch(33% .025 48) !important;
  --la-grad-reel: var(--lift-stone) !important;
  --la-grad-liz: var(--lift-ivory) !important;
  --la-grad-reviews: var(--lift-paper) !important;
  --la-grad-book: oklch(90.4% .029 58) !important;
}
html body .la-areas__img-el,
html body .la-liz__portrait-el { filter: none; }
html body .la-reel__cta-panel { background: oklch(84% .04 54); }
html body .la-book__heading-accent { color: oklch(46% .055 43); }
html body .la-footer { background: var(--lift-ink); }
html body { background: var(--lift-ivory); }
html body .la-words__rule { background: var(--lift-tan); }
html.la-home--choreographed .la-words__word { color: rgba(57,43,36,var(--la-words-ink-floor,.12)); }
html body .la-words__stat { border-color: var(--lift-stone); }
html body .la-areas__scrim { background: linear-gradient(90deg, rgb(30 24 21 / .72), rgb(30 24 21 / .1)); }
html body .la-liz__ghost { color: var(--lift-tan); opacity: .18; }
html body .la-liz__portrait { box-shadow: none; }
html body .la-liz__text { color: var(--lift-muted); }
html body .la-reel__counter-track { background: var(--lift-tan); }
html body .la-book { color: var(--lift-ink); }
html body .la-book::before, html body .la-book__glow { display: none; }
html body .la-book :is(.la-book__eyebrow,.la-book__heading,.la-book__text,.la-book__phone,.la-book__details,.la-book__detail-label,.la-book__detail-value,.la-book__phone-link) { color: var(--lift-ink); }
html body .la-book__phone-note { color: var(--lift-muted); }
html body .la-book__phone-link { border-color: var(--lift-tan); }
html body .la-book__details { border-color: var(--lift-tan); }
html body .la-book__cta { background: var(--lift-ink); color: var(--lift-paper); box-shadow: none; }
html body .la-footer__hairline { background: var(--lift-tan); }
html body .la-footer :is(.la-footer__blurb,.la-footer__hours,.la-footer__regulatory,.la-footer__copyright) { color: var(--lift-stone); }
html body .la-footer :is(.la-footer__link,.la-footer__col-head,.la-footer__address,.la-footer__top,.la-footer__legal a) { color: var(--lift-paper); }
html body .la-footer__cta { color: var(--lift-paper); border: 1px solid var(--lift-tan); background: transparent; }
html body .la-footer__logo img { width: 135px; height: auto !important; filter: none; }


/* The full-width header that stood here was replaced on 2026-10-01 by design
   v5's floating pill, which section 17 draws. What remains is page chrome. */
/* Keep the floating review teaser from covering the hero's actions.
   The full reviews section and the teaser below the hero remain available. */
body.template-index.lift-hero-visible .gfs-popup-052018 { display: none !important; }
html body :is(.la-brand, .la-grain, .la-rail) { display: none; }
html body .la-progress__fill { background: var(--lift-tan); }
html body .la-home :is(a,button):focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }


/* Candidate refinement for Copy of Homepage Redesign (165443698917).
   Merge with the existing neutral override after checking the current draft.
   The original Shopify section structure and display fonts are retained. */

/* A full-height, natural-colour opening. Keep faces clear above the copy. */
html body .la-home.la-hero { color: var(--lift-paper); height: 100svh; min-height: 600px; }
html body .la-hero .la-hero__stage {
  position: relative; top: auto; height: 100svh; min-height: 600px;
  display: flex; justify-content: flex-end; background: var(--lift-ink);
}
html body .la-hero .la-hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  border-radius: 0; transform: none !important; will-change: auto;
}
html body .la-hero__media-el { filter: none; object-fit: cover; }
html body :is(.la-hero__orbs, .la-hero__dust) { display: none; }
html body .la-hero__scrim {
  display: block;
  background: linear-gradient(180deg, rgb(30 24 21 / .54), transparent 22%),
    linear-gradient(0deg, rgb(30 24 21 / .78), rgb(30 24 21 / .22) 42%, transparent 70%);
}
html body .la-hero__inner {
  width: 100%; max-width: none; margin: 0;
  align-items: flex-start; text-align: left;
  padding: 150px 5.5vw 9vh;
}
html body .la-hero__eyebrow {
  color: var(--lift-paper); font-size: 11px;
  letter-spacing: .17em; margin: 0 0 22px;
}
html body .la-hero__heading {
  color: var(--lift-paper); font-size: clamp(54px, 5.8vw, 90px);
  line-height: 1.02; letter-spacing: -.025em; max-width: 900px;
}
html body .la-hero__heading-line--accent { color: var(--lift-paper); }
html body .la-hero__sub {
  color: var(--lift-paper); font-size: 15px; line-height: 1.7;
  max-width: 42ch; margin: 24px 0 0;
}
html body .la-hero__actions { justify-content: flex-start; margin-top: 28px; gap: 28px; }
html body .la-hero__cta { font-size: 11px; letter-spacing: .08em; padding: 18px 24px; }
html body .la-btn--grad-hero {
  background: var(--lift-paper); color: var(--lift-ink);
  border: 1px solid var(--lift-paper); border-radius: 0;
}
html body .la-btn--grad-hero:hover { background: var(--lift-stone); color: var(--lift-ink); }
html body .la-hero__cta--ghost {
  color: var(--lift-paper); border: 0; border-bottom: 1px solid rgb(255 250 245 / .65);
  padding-inline: 0; background: transparent;
}
html body .la-hero__cta--ghost:hover { color: var(--lift-paper); background: transparent; border-color: currentColor; }
html body .la-hero__cue { color: var(--lift-paper); left: auto; right: 5.5vw; bottom: 9vh; transform: none; }

@media (max-width: 900px) {
  html body .la-hero__inner { padding-inline: 5vw; }
  html body .la-hero__heading { font-size: clamp(52px, 7.8vw, 72px); }
}
@media (max-width: 650px) {
  html body .la-home.la-hero { height: auto; min-height: 620px; }
  html body .la-hero .la-hero__stage { height: 100svh; min-height: 620px; padding-top: 0; }
  html body .la-hero .la-hero__media { position: absolute; inset: 0; height: 100%; width: 100%; margin: 0; }
  html body .la-hero__inner { padding: 125px 24px max(50px, 7svh); }
  html body .la-hero__eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 18px; }
  html body .la-hero__heading { font-size: clamp(43px, 11.2vw, 68px); }
  html body .la-hero__sub { font-size: 14px; line-height: 1.6; margin-top: 20px; max-width: 33ch; }
  html body .la-hero__actions { gap: 22px; margin-top: 24px; }
  html body .la-hero__cta { font-size: 10px; padding: 16px 20px; }
  html body .la-hero__cta--ghost { padding-inline: 0; }
  html body .la-hero__cue { display: none; }
}


html body .la-hero [data-la-reveal] { opacity: 1; transform: none; }

/* Lift opening refinement, 1 October 2026 — its header grid removed with the
   header itself; the hero and chrome rules stay. */
html body.template-index .la-progress { display: none; }
html body.template-index .la-hero__scrim {
  background: linear-gradient(180deg,rgb(33 27 23 / .65),rgb(33 27 23 / .62) 110px,transparent 33%),
    linear-gradient(0deg,rgb(33 27 23 / .74),rgb(33 27 23 / .12) 48%,transparent 72%);
}
html body.template-index .la-hero__heading-line { transition: none; }
html body.template-index .la-hero__inner { z-index: 2; }

/* Homepage cream palette — 7 October 2026. Scoped to the homepage. */
html body.template-index {
  --lift-paper: #fffdf9;
  --lift-ivory: #f8f4ed;
  --lift-stone: #eee7dc;
  --lift-ink: #332b25;
  --lift-muted: #64584e;
  --la-grad-areas: #f8f4ed !important;
  --la-grad-reel: #f8f4ed !important;
  --la-grad-book: #eee7dc !important;
}
html body.template-index :is(.la-areas,.la-footer) {
  background: var(--lift-ivory); color: var(--lift-ink);
}
html body.template-index .la-reel__cta-panel { background: #eee7dc; }
html body.template-index .la-reel__counter-track { background: #cfc4b6; }
html body.template-index .la-nav .la-nav__bar,
html body.template-index .la-nav.la-nav--on-dark .la-nav__bar {
  color: var(--lift-ink) !important; background: rgba(255,253,249,.96) !important;
  border-color: rgba(100,88,78,.23) !important; text-shadow: none;
  box-shadow: 0 4px 24px rgba(51,43,37,.06) !important;
}
html body.template-index .la-nav .la-nav__logo img,
html body.template-index .la-nav.la-nav--on-dark .la-nav__logo img { filter: brightness(0) !important; }
html body.template-index :is(.la-nav__link,.la-nav__cta,.la-nav__cart) { color: var(--lift-ink); text-shadow: none; }
html body.template-index :is(.la-nav__link,.la-nav__cart):hover { background: #eee7dc; }
html body.template-index .la-nav__cta { border-color: #9a8b7c; }
html body.template-index .la-nav__cta:hover { color: var(--lift-paper) !important; background: var(--lift-ink); border-color: var(--lift-ink); }
html body.template-index .la-footer { border-top: 1px solid #d8cfc3; }
html body.template-index .la-footer__hairline { background: #d8cfc3; height: 1px; }
html body.template-index .la-footer :is(.la-footer__blurb,.la-footer__hours,.la-footer__regulatory,.la-footer__copyright,.la-footer__copy,.la-footer__legal) { color: var(--lift-muted); }
html body.template-index .la-footer :is(.la-footer__link,.la-footer__col-head,.la-footer__address,.la-footer__top,.la-footer__legal a,.la-footer__logo-text) { color: var(--lift-ink); }
html body.template-index .la-footer__logo img { filter: brightness(0); }
html body.template-index .la-footer__cta { color: var(--lift-paper); background: var(--lift-ink); border-color: var(--lift-ink); }
html body.template-index .la-footer__legal { border-color: #d8cfc3; }
html body.template-index .la-footer :is(.la-footer__link,.la-footer__top,.la-footer__legal a):hover { text-decoration: underline; text-underline-offset: 4px; }
html body.template-index .la-reviews__logos { padding-block: 28px; border-top: 1px solid #e3dcd2; border-bottom: 1px solid #e3dcd2; }
html body.template-index .la-reviews__logo { display: flex; align-items: center; justify-content: center; width: 170px; height: 64px; flex-shrink: 0; }
html body.template-index .la-reviews__logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0); opacity: .8; }
html body.template-index .la-home :is(a,button):focus-visible { outline: 2px solid var(--lift-ink); outline-offset: 5px; }
@media (max-width: 767px), (pointer: coarse) {
  html body.template-index .la-areas__scrim { background: var(--lift-ivory); }
  html body.template-index .la-areas__panel-img { background: var(--lift-paper); }
  html body.template-index :is(.la-areas__eyebrow,.la-areas__heading,.la-areas__text,.la-areas__link,.la-areas__count) { color: var(--lift-ink); }
  html body.template-index .la-areas__link { border-color: var(--lift-muted); }
  html body.template-index .la-reviews__logo { width: 135px; height: 52px; }
}

/* Charcoal typography and a consistent storefront footer — 7 October 2026. */
html body .liz-page {
  --liz-ink: #363636;
  --liz-paper: #fdfcfb;
  --liz-muted: #686868;
  --liz-sand: #eeebe7;
  --liz-button: #ded6ce;
}
html body .liz-page .liz-button { color: #363636; }
html body .liz-page .liz-button:hover { background: #d0c7be; border-color: #d0c7be; }
html body .liz-page .liz-rule { background: #d0c7be; }
html body .liz-page :is(.liz-biography,.liz-profile-section) { background: #fdfcfb; color: #363636; border-color: #dedad5; }
html body .liz-page :is(.liz-consult,.liz-profile-section--sand) { background: #eeebe7; }
html body .liz-page .liz-biography-role { color: #686868; }
html body .liz-page :is(.liz-biography-header,.liz-biography-registration) { border-color: #dedad5; }
html body .lh {
  --paper: #fdfcfb; --ink: #363636; --muted: #686868;
  --line: #d8d4cf; --tint: #eeebe7;
}
html body .lh-experience { --ink: #363636; --plum: #363636; --violet: #363636; }
html body .lt {
  --lt-paper: #fdfcfb; --lt-ink: #363636; --lt-muted: #686868;
  --lt-line: #d8d4cf; --lt-tint: #eeebe7; --lt-accent: #555555;
}
html body :is(.lh-button,.lt-button):hover { background: #4c4c4c; }
html body .lh-catalog input { background: #f3f1ee; }
html body :is(.lh,.lt) :is(a,button,input,summary):focus-visible { outline-color: #363636; }
/* Shared with the homepage: solid cream, dark logo, charcoal links and CTA. */
html body footer.la-home.la-footer {
  --la-ink: #363636; --la-ink-2: #64605b;
  background: #f8f4ed !important; color: #363636 !important;
  border-top: 1px solid #d8cfc3;
}
html body footer.la-footer .la-footer__hairline { height: 1px; background: #d8cfc3; }
html body footer.la-footer .la-footer__logo img { width: 135px; height: auto !important; filter: brightness(0); }
html body footer.la-footer :is(.la-footer__logo-text,.la-footer__link,.la-footer__col-head,.la-footer__address,.la-footer__top,.la-footer__legal a) { color: #363636 !important; }
html body footer.la-footer :is(.la-footer__blurb,.la-footer__hours,.la-footer__regulatory,.la-footer__copy,.la-footer__copyright,.la-footer__legal) { color: #64605b !important; }
html body footer.la-footer .la-footer__cta { background: #363636; color: #fffdf9; border: 1px solid #363636; }
html body footer.la-footer .la-footer__cta:hover { background: #4c4c4c; color: #fffdf9; }
html body footer.la-footer .la-footer__legal { border-color: #d8cfc3; }
html body footer.la-footer :is(.la-footer__link,.la-footer__top,.la-footer__legal a):hover { text-decoration: underline; text-underline-offset: 4px; }
html body footer.la-footer a:focus-visible { outline: 2px solid #363636; outline-offset: 5px; }