/* Design changes from designs A and B (2026-10-26), copied to lab/site/assets/lab-design.css by tools/build-lab.js on lab and staging builds (not production yet),
   after lab-polish; the hooks (.lx-*) come from tools/lab-design.js. Text sizes and weights stay ours, except the
   stand-alone links below. Revert: tag ground-zero. */

/* Stand-alone underlined links ("See everything we do →"): design A's colour and weight, and A's 15px when that is larger
   (lab-design.js writes the size and weight rules, never smaller or lighter than ours). On a dark band only the weight
   and the size change: the colour stays ours. */
html a.lx-ql:not(.lx-ql-dark){color:#2B3229!important;transition:color .24s,border-color .24s!important}
html a.lx-ql:not(.lx-ql-dark):hover{color:#4C5B48!important;border-bottom-color:#4C5B48!important}

/* Design A's card icons (its own set, assets/lab-icons.svg), in our green; the cards keep their own look */
html svg.lx-i{display:inline-block;flex:none;fill:currentColor;color:#4C5B48;vertical-align:middle;pointer-events:none}
html .lx-has-i{position:relative}
html .lp-dark svg.lx-i,html [style*="background:#4C5B48"] svg.lx-i,html [style*="background: rgb(76, 91, 72)"] svg.lx-i{color:#CBD3C0}
/* step cards: level with the numeral, at the card's right edge (lab-design.js sets top and right) */
html svg.lx-step-i{position:absolute;width:28px;height:28px}
/* cards, tiles and boxes: the top right corner */
html svg.lx-tile-i{position:absolute;top:24px;right:24px;width:24px;height:24px}
html .lx-has-i:has(> svg.lx-tile-i) > :is(h2,h3):first-child,html .lx-has-i:has(> svg.lx-tile-i) > span:first-child{padding-right:36px}
/* rows (home "What we do", Start here "what to bring"): the icon to the left of the title */
html .lx-row-i.lx-row-i{padding-left:44px!important}
html .lx-row-i > svg.lx-crow-i,html .lx-row-i > svg.lx-li-i{position:absolute;left:0;top:30px;width:22px;height:22px}
html .lx-row-i > svg.lx-li-i{left:34px;top:32px;width:24px;height:24px}
html .lx-row-i:has(> svg.lx-li-i){padding-left:78px!important}
/* tool tags (What we do) and "At a glance" labels: before the words */
html .lx-tool,html .lx-gl{display:inline-flex!important;align-items:center;gap:8px}
html svg.lx-tool-i{width:16px;height:16px}
html .lx-gl{gap:10px}
html svg.lx-gl-i{width:18px;height:18px}

/* Light sections alternate, design B's rhythm in our own tone: every second light section (after the hero, dark bands
   skipped) takes the light veil Results already alternates with. lab-design.js picks them. */
html body section.lx-paper{background-color:rgba(247,243,237,.55)!important}

/* The home statement ("We are not here to sell you services and products…"): larger and in quotation marks (the marks
   are drawn here, the words are unchanged); the opening mark hangs in the margin. Phones keep their size. */
@media (min-width:961px){html body .lx-statement > p[style]{font-size:clamp(24px,calc(2.8vw - 4.3px),34px)!important}}   /* follows the column's width: three lines */
html body .lx-statement > p::before{content:"\201C";margin-left:-.42em}
html body .lx-statement > p::after{content:"\201D"}

/* Photos (Higgsfield, in the Spa's own look: no full faces, nothing clinical), from tools/lab-images */
/* the wide band between Start here and What we do on the home page (build-lab.js adds it): the real room in the mirror */
html .lx-band{position:relative;margin:0;height:clamp(220px,30vw,520px);overflow:hidden;background:#D9CFC3;border-bottom:1px solid #CDC2B4}
/* anchored low so the live-edge slab and its brackets always show; the tip of the arch is what gets trimmed */
html .lx-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 88%}
/* the hero tagline on the band: left, over the empty sunlit wall, a cream tint that fades out before the slab begins.
   It leaves the hero (one place for it); phones keep it in the hero's own strip (lab-polish) and the band shows the photo only. */
html .lx-band::before{content:"";position:absolute;inset:0 auto 0 0;width:min(52%,760px);z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,243,237,.82) 0%,rgba(247,243,237,.7) 45%,rgba(247,243,237,0) 100%)}
html .lx-band-quote{position:absolute;z-index:2;left:max(48px,calc((100% - 1180px) / 2));top:50%;transform:translateY(-50%);width:min(36%,528px);margin:0;
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(26.4px,2.4vw,38.4px);line-height:1.3;letter-spacing:-.005em;color:#2B3229;text-wrap:balance}
html body #top .lp-hero-line{display:none!important}
@media (max-width:600px){html .lx-band::before,html .lx-band-quote{display:none}}

/* the home hero, a little motion when the page opens: the room photo settles from slightly larger; the headline rises line
   by line (below), then the label, words and buttons fade up one after another (once); while scrolling the photo drifts a
   touch slower than the page (lab-design.js). Off for anyone who asks for reduced motion (the head script never sets
   .lx-motion then). */
/* the photo rests at 108% so the scroll drift (at most 4% of its height) never shows the frame's edge. It keeps its own
   layer before, during and after the settle (without one the browser redrew it when the settle ended, a visible step). The
   settle is short (1.3s, 112% to 108%): a long slow ending moved the photo less than a pixel a frame, which showed as steps */
@keyframes lx-settle{from{transform:scale(1.12)}to{transform:scale(1.08)}}
@keyframes lx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.lx-motion body #top img.lp-hero{will-change:transform;backface-visibility:hidden;animation:lx-settle 1.3s cubic-bezier(.25,.8,.35,1) both}
/* the rest of the hero column waits for the headline (html.lx-h1, lab-design.js) */
html.lx-motion:not(.lx-h1) body #top:has(img.lp-hero) > div:first-child > :not(h1){opacity:0}
html.lx-motion.lx-h1 body #top:has(img.lp-hero) > div:first-child > :not(h1){animation:lx-rise .8s cubic-bezier(.22,.61,.36,1) both}
html.lx-motion.lx-h1 body #top:has(img.lp-hero) > div:first-child > :nth-child(3){animation-delay:.36s}
html.lx-motion.lx-h1 body #top:has(img.lp-hero) > div:first-child > :nth-child(4){animation-delay:.5s}
html.lx-motion.lx-h1 body #top:has(img.lp-hero) > div:first-child > :nth-child(n+5){animation-delay:.62s}

/* Headings rise line by line (design B's text effect): an aria-hidden copy of the same words, one masked line at a time,
   rises over the heading and then goes away; the heading itself is never split, so screen readers read it whole. The
   page's first heading when it opens, section headings and the band tagline as they scroll into view (lab-design.js).
   Sizes stay ours. Off for reduced motion (the head script never sets .lx-rv then). */
/* the first heading waits, hidden, until its copy is ready (the head script shows it after 1.5s whatever happens) */
html.lx-rv:not(.lx-h1) body h1:not(header *, footer *, .sqb *, .hcs *, #nslc-drawer *){opacity:0}
html.lx-rv [data-lx-rv]{opacity:0}
html [data-lx-split]:not(.lx-band-quote){position:relative}
html body .lx-splitting.lx-splitting,html body .lx-splitting.lx-splitting > :not(.lx-lines),html body .lx-splitting.lx-splitting > :not(.lx-lines) *{color:transparent!important}
/* 1px wider than the heading: a heading sized exactly to its words would otherwise wrap its copy on a rounding error */
html .lx-lines{position:absolute;inset:0 -1px 0 0;pointer-events:none;display:block;box-sizing:border-box}
html .lx-lines .lx-l{display:block;overflow:hidden;white-space:nowrap;padding-bottom:.16em;margin-bottom:-.16em}
html .lx-lines .lx-li{display:inline-block;transform:translateY(110%);transition:transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--l,0) * 90ms)}
html .lx-lines.go .lx-li{transform:none}
@media print{html.lx-rv [data-lx-rv],html.lx-rv body h1{opacity:1!important}}

/* the Start here and What things cost heroes: the photo in the right column, the box overlapping its lower edge (our
   rounded corners, not an arch) */
html .lx-hero2.lx-hero2{grid-template-rows:auto auto;align-items:start!important}
html .lx-hero2 > :first-child{grid-row:1 / span 2;align-self:center}
html .lx-hero2 > .lx-hero-pic{grid-column:2;grid-row:1;justify-self:end;width:74%;margin:0;aspect-ratio:4/5;border-radius:16px;overflow:hidden;box-shadow:0 2px 4px rgba(43,50,41,.06),0 22px 44px -24px rgba(43,50,41,.5)}
html .lx-hero2 > .lx-hero-pic.lx-sq{aspect-ratio:1/1;width:76%}
html .lx-hero2 > .lx-hero-pic img{display:block;width:100%;height:100%;object-fit:cover}
html .lx-hero2 > .lx-hero-box.lx-hero-box{grid-column:2;grid-row:2;justify-self:start;width:min(86%,460px);margin-top:-120px!important;position:relative;z-index:2}
@media (max-width:960px){
  html .lx-hero2 > :first-child{grid-row:auto}
  html .lx-hero2 > .lx-hero-pic,html .lx-hero2 > .lx-hero-box.lx-hero-box{grid-column:auto;grid-row:auto}
  html .lx-hero2 > .lx-hero-pic{width:84%}
  html .lx-hero2 > .lx-hero-box.lx-hero-box{width:92%;margin-top:-72px!important}
}
/* What we do, "The two everyone already knows": a photo across the top of each card */
html .lx-picard.lx-picard{overflow:hidden}
html .lx-picard > .lx-card-pic{margin:-44px -40px 12px;aspect-ratio:3/2;overflow:hidden}   /* margins set by lab-design.js from the card padding */
html .lx-picard > .lx-card-pic img{display:block;width:100%;height:100%;object-fit:cover}
/* these cards are links: on hover the photo eases in a little (only the photo moves, so the text stays sharp), on top of
   the card's shadow and green edge and the green "More about" link */
@media (hover:hover){
  html .lx-picard{cursor:pointer}
  html .lx-picard > .lx-card-pic img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
  html .lx-picard:hover > .lx-card-pic img{transform:scale(1.04)}
}
/* the rows: a photo under the section heading that follows the row the pointer is on (soft crossfade); not on phones */
html .lx-rowpic{position:relative;margin:24px 0 0;width:min(330px,100%);aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#D9CFC3;box-shadow:0 1px 2px rgba(43,50,41,.05),0 14px 28px -18px rgba(43,50,41,.35)}
html .lx-rowpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s cubic-bezier(.22,.61,.36,1)}
html .lx-rowpic img.on{opacity:1}
@media (max-width:960px),(hover:none){html .lx-rowpic{display:none}}
/* home "What we do": the rows stretch so the last one ends level with the bottom of the photo beside them */
@media (min-width:961px) and (hover:hover){
  html body .lx-spread.lx-spread{align-items:stretch!important}
  html body .lx-spread > :has(> .lx-rowpic){align-self:start}
  html body .lx-spread-rows.lx-spread-rows{display:flex!important;flex-direction:column}
  html body .lx-spread-rows > .lx-row-i{flex:1 0 auto}
}

/* The home "What we do" rows: design B's row hover, a soft fill behind the row that reaches 16px past its edges (square,
   0.18s), in our tones (lighter on the parchment, deeper on the light band). Mouse and trackpad only. */
@media (hover:hover){
  html body .lx-row-i:has(> svg.lx-crow-i){position:relative;isolation:isolate}
  html body .lx-row-i:has(> svg.lx-crow-i)::after{content:"";position:absolute;inset:-1px -16px 0;z-index:-1;background:transparent;transition:background-color .18s ease;pointer-events:none}
  html body .lx-row-i:has(> svg.lx-crow-i):hover::after{background:rgba(247,243,237,.75)}
  html body section.lx-paper .lx-row-i:has(> svg.lx-crow-i):hover::after{background:rgba(217,207,195,.45)}
}

/* "The people" photos on the home page: a smaller, softer shadow than lab-polish's photo lift, so the names under them
   sit with the picture instead of under a floating card */
html body #faces .lp-media.lp-media.lp-media{box-shadow:0 1px 2px rgba(43,50,41,.05),0 10px 20px -14px rgba(43,50,41,.28)}

/* Contact-style info lists (CALL OR TEXT / EMAIL / WHERE / HOURS) were cramped: more room per row, larger icons.
   The Contact page list, the WHERE / HOURS / REACH US blocks on the green Book bands, and the Book page's block. */
html body .ch-facts .fact.fact{padding-top:18px!important;padding-bottom:18px!important}
html body span.lp-ico > svg:not(.lx-i){width:16px;height:16px}
html body a.lp-ilink > svg{width:16px;height:16px}
html body section div:has(> .lp-info[style*="gap"]):not(.lp-bookinfo){gap:24px!important}
html body .lp-info[style*="gap: 5px"],html body .lp-info[style*="gap:5px"]{gap:9px!important}
html body .lp-info[style*="padding-bottom: 18px"],html body .lp-info[style*="padding-bottom:18px"]{padding-bottom:24px!important}
html body .lp-bookinfo.lp-bookinfo{row-gap:18px!important}

/* Our own card hover (user: just enough to feel interactive, not flat), the smooth way lab-polish already does it for link
   cards: the deeper shadow lives on the card's ::after layer (lab-polish) and only fades in, and the edge firms a little;
   no card moves (a 1px move snapped between screen pixels and looked choppy, and a moving card's text goes soft for a
   moment; animating the shadow itself repainted the card every frame). Link cards keep lab-polish's green edge, rows their tint;
   the shop and before/after tiles keep the hover they already have. Mouse and trackpad only. */
@media (hover:hover){
  /* the ::after shadow sits at z-index -1 inside the card's own stacking context (lab-polish isolates every card); the
     fade runs on the GPU */
  html body .lp-card::after,html body .lp-box::after{will-change:opacity}
  /* no card moves on hover, link cards included (lab-polish lifted them 2px on their own layer: the text went soft for a
     moment while it moved); and no own layer for them either, so their text stays sharp */
  html body .lp-card.lp-link.lp-link,html body .lp-box.lp-link.lp-link{will-change:auto!important;backface-visibility:visible!important}
  html body .lp-card.lp-link.lp-link:hover,html body .lp-box.lp-link.lp-link:hover{transform:none!important}
  html body .lp-card.lp-card.lp-card:not(.lp-link):hover,html body .lp-box.lp-box.lp-box:not(.lp-link):hover{box-shadow:var(--lp-lift)!important;border-color:rgba(185,173,156,.95)!important}
  html body .lp-card:not(.lp-link):hover::after,html body .lp-box:not(.lp-link):hover::after{opacity:1}
}

/* The nav's current-page bar: 1.25px (user, 2026-10-26; shell.js draws it 2px on every build), the same thickness at the
   top of the page and once the header compacts on scroll. Drawn as a border, not a filled box: a filled box's edges are
   rounded to whole screen pixels wherever it lands (so it looked thicker in the scrolled position on a 125% screen);
   a border's width is rounded once and stays the same everywhere. */
html header .curpage::after{height:0!important;background:none!important;border-top:1.25px solid #4C5B48}
/* screens scaled 120-159% (Windows laptops at 125%/150%): 1.25px would round down to one screen pixel, so ask for the
   nearest whole count instead, two screen pixels */
@media (min-resolution:1.2dppx) and (max-resolution:1.59dppx){html header .curpage::after{border-top-width:1.67px}}

/* The footer: the layout of design B's footer (https://nslc-design-b.sharmaankur05.workers.dev) in our
   own colours and fonts: a dark base in our ink #2B3229 (B's was a darker moss), our light text #F1EFE7 and sage labels
   #CBD3C0, Karla throughout (B set the address and numbers in DM Mono), our round social buttons (B's were square).
   Left: the logo, the address, phone and email with their icons, the social buttons. Right: the same 13 links, numbered
   01-13, in two columns with hairlines. tools/build-lab.js adds the hooks to the footer on lab and staging builds (.lf-foot,
   .lf-logo, .lf-pin, .lf-reach, .lf-ico, .lf-links); the links and their order are unchanged. Revert: tag ground-zero. */
html footer.lf-foot[style]{font-size:14.5px!important;display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start!important;gap:48px clamp(32px,5vw,96px)!important;
  background:#2B3229!important;color:#CBD3C0!important;border-top:0!important;padding:72px max(48px,calc((100% - 1180px) / 2)) 56px!important;box-shadow:0 100vh 0 100vh #2B3229!important}
html footer.lf-foot .foot-id{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:20px!important}
/* the logo at the header's own size (52px, 44px on phones), as it is before the header compacts on scroll */
html footer.lf-foot .lf-logo{display:block;height:52px;width:auto;max-width:none;filter:brightness(0) invert(.93) sepia(.12);opacity:.92}
/* two columns for the copyright and the address, phone and email: the © and the icons in a 14px column, the words 8px
   after it, so every line of text starts at the same place (user, 2026-10-27) */
html footer.lf-foot .fid{display:grid!important;grid-template-columns:14px minmax(0,1fr);column-gap:8px;align-items:center;color:#CBD3C0!important;line-height:24px!important}
html footer.lf-foot .lf-copy{text-align:center}
html footer.lf-foot .fid-t{display:contents!important}
html footer.lf-foot .fid-c{display:none!important}
/* the address, the phone and the email: one list, each line 24px apart, the icons in one column */
html footer.lf-foot .fid-a{grid-column:1/-1;display:flex!important;align-items:flex-start;gap:8px;margin-top:0;line-height:24px!important}
/* each icon sits beside its line's first line of text (5px = half of 24 - 14), also when the address wraps */
html footer.lf-foot :is(.lf-pin,.lf-ico){width:14px;height:14px;margin-top:5px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html footer.lf-foot .lf-reach{display:flex;flex-direction:column;gap:0;margin-top:-20px}
html footer.lf-foot .lf-reach a{display:inline-flex;align-items:flex-start;gap:8px;line-height:24px;color:#CBD3C0!important;text-decoration:none;transition:color .18s ease}
html footer.lf-foot .lf-reach a:hover,html footer.lf-foot .lf-reach a:focus-visible{color:#fff!important;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
html footer.lf-foot .soc-row{gap:8px!important}
html footer.lf-foot a.soc{width:40px!important;height:40px!important;flex:0 0 40px!important;border:1px solid rgba(241,239,231,.22)!important;background:transparent!important;color:#F1EFE7!important;transition:background-color .18s ease,color .18s ease,border-color .18s ease!important}
html footer.lf-foot a.soc:hover,html footer.lf-foot a.soc:focus-visible{background:#F1EFE7!important;color:#2B3229!important;border-color:#F1EFE7!important}
html footer.lf-foot a.soc svg{width:18px!important;height:18px!important;stroke-width:1.5}
html footer.lf-foot .lf-links{display:block!important;columns:2;gap:0 48px!important;counter-reset:lf;border-top:1px solid rgba(241,239,231,.16);padding-top:8px}
html footer.lf-foot .lf-links a{font-size:15px;counter-increment:lf;display:flex!important;align-items:baseline;gap:14px;break-inside:avoid;padding:10px 0!important;border-bottom:1px solid rgba(241,239,231,.16);color:#F1EFE7!important;text-decoration:none;transition:color .18s ease}
html footer.lf-foot .lf-links a::before{content:counter(lf,decimal-leading-zero);font-family:Karla,system-ui,-apple-system,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:#CBD3C0;min-width:22px}
html footer.lf-foot .lf-links a:hover,html footer.lf-foot .lf-links a:focus-visible{color:#fff!important;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
html footer.lf-foot :focus-visible{outline-color:#F1EFE7!important}
/* phones: the two halves stack (the links keep their two columns); room at the bottom for the floating Book button */
@media (max-width:720px){
  html footer.lf-foot.lf-foot[style]{grid-template-columns:minmax(0,1fr)!important;gap:36px!important;padding:56px 20px 96px!important}
  /* the links stay in two columns, each one wraps inside its own column rather than run into the next */
  html footer.lf-foot .lf-links{gap:0 20px!important}
  html footer.lf-foot .lf-links a{padding:13px 0!important;gap:10px;min-width:0;overflow-wrap:anywhere}
}
@media (max-width:600px){html footer.lf-foot .lf-logo{height:44px}}

/* Reading progress (design B): a 2px green line on the lower edge of the header (of the section bar under it, where there
   is one), filling as the page scrolls; on pages with more than three sections. lab-design.js adds it to the body, never
   inside the header: the header belongs to the design pages' runtime, which crashed the page when it found our line in
   there. --hdrh is the header's live height (nav.js), --lx-sb the section bar's (lab-design.js). */
html .lx-progress{position:fixed;left:0;right:0;top:calc(var(--hdrh,81px) + var(--lx-sb,0px) - 2px);height:2px;background:#4C5B48;transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none;z-index:21}
@supports (animation-timeline:scroll()){
  html .lx-progress{animation:lx-progress linear both;animation-timeline:scroll(root)}
  @keyframes lx-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}