/* SOMA :: LWI site stylesheet
   Deployed to https://soma-lwi-web.netlify.app/site.css
   Loaded by Squarespace Code Injection (header).
   Token block below is MIRRORED in the other site file.
   If you change a token, change it in both. */
/* ============================================================
   SOMA DESIGN TOKENS
   Single source of truth for palette, type, spacing, motion.
   Palette supplied 30 August. Original names were dog-brand
   vocabulary (Collar Blue, Muddy Paws) and are deliberately NOT
   used here. Hex values are exact and must not be changed.
   ============================================================ */

:root {
  /* --- Core palette (exact hex, do not alter) --- */
  --soma-ink:        #0F414C;  /* darkest blue. headings, body on light */
  --soma-primary:    #1E6980;  /* the workhorse. structure, links, buttons */
  --soma-mint:       #8BCCB4;  /* accent. highlights, positive, borders */
  --soma-mist:       #CFE3E2;  /* background. NOT white. the softening layer */
  --soma-gold:       #F1B143;  /* attention. one element at a time. never more */
  --soma-ember:      #DB7F26;  /* warning / behind. sparingly */
  --soma-moss:       #6B7F4C;  /* secondary accent. good on mist */

  /* --- Derived neutrals --- */
  --soma-white:      #FFFFFF;
  --soma-paper:      #F7FBFB;  /* mist at 25%, the default page ground */
  --soma-line:       rgba(15, 65, 76, 0.12);
  --soma-line-soft:  rgba(15, 65, 76, 0.07);
  --soma-veil:       rgba(15, 65, 76, 0.55);

  /* --- Semantic roles --- */
  --soma-bg:              var(--soma-paper);
  --soma-bg-raised:       var(--soma-white);
  --soma-bg-sunken:       var(--soma-mist);
  --soma-text:            var(--soma-ink);
  --soma-text-muted:      rgba(15, 65, 76, 0.68);
  --soma-text-invert:     var(--soma-mist);
  --soma-accent:          var(--soma-primary);
  --soma-accent-hover:    #175567;

  /* --- Contrast rules, from the palette doc ---
     ink + primary  : pass on white AND on mist
     gold + mint    : NEVER carry white text. put ink on them.
     ember on white : large text only, never body copy         */

  /* --- Type scale (fluid, 1.25 minor third) --- */
  --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.19rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.48rem);
  --step-2:  clamp(1.44rem, 1.28rem + 0.80vw, 1.85rem);
  --step-3:  clamp(1.73rem, 1.48rem + 1.24vw, 2.31rem);
  --step-4:  clamp(2.07rem, 1.71rem + 1.83vw, 2.89rem);
  --step-5:  clamp(2.49rem, 1.95rem + 2.68vw, 3.62rem);
  --step-6:  clamp(2.99rem, 2.22rem + 3.83vw, 4.52rem);

  /* --- Spacing rhythm --- */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.625rem;
  --space-l:   2.625rem;
  --space-xl:  4.25rem;
  --space-2xl: 6.875rem;
  --space-3xl: 11rem;

  /* --- Form --- */
  --radius-s:  4px;
  --radius-m:  10px;
  --radius-l:  18px;
  --radius-pill: 999px;

  /* --- Elevation. Tinted, never neutral grey. This is most of
         what separates "expensive" from "template". --- */
  --shadow-s: 0 1px 2px rgba(15,65,76,.06), 0 2px 6px rgba(15,65,76,.05);
  --shadow-m: 0 2px 4px rgba(15,65,76,.05), 0 8px 20px rgba(15,65,76,.08);
  --shadow-l: 0 4px 8px rgba(15,65,76,.05), 0 18px 44px rgba(15,65,76,.11);
  --shadow-xl:0 8px 16px rgba(15,65,76,.05), 0 34px 80px rgba(15,65,76,.14);

  /* --- Motion. Slow and eased reads as considered. Fast and
         linear reads as cheap. --- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  160ms;
  --dur-base:  280ms;
  --dur-slow:  620ms;

  /* --- Layout --- */
  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
}

/* ============================================================
   BASE REFINEMENTS
   Safe on any Squarespace 7.1 site. Nothing here depends on a
   specific block, section id, or template. Everything below
   this block IS site specific.
   ============================================================ */

/* Crisper type. Costs nothing, visible immediately. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Kerning and ligatures on headings. Small detail, reads expensive. */
h1, h2, h3, h4,
.sqs-block-html h1, .sqs-block-html h2, .sqs-block-html h3 {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Stop orphans in body copy. */
p, li { text-wrap: pretty; }

/* Selection in brand color rather than browser default blue. */
::selection { background: var(--soma-mint); color: var(--soma-ink); }

/* Focus rings that look designed rather than defaulted.
   Keyboard users only, so it never shows on mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--soma-primary);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* Buttons: weight, ease, and a lift on hover.
   Squarespace button classes across 7.1 variants. */
.sqs-block-button-element,
.sqs-button-element--primary,
.sqs-button-element--secondary,
.sqs-button-element--tertiary {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.sqs-block-button-element:hover,
.sqs-button-element--primary:hover,
.sqs-button-element--secondary:hover,
.sqs-button-element--tertiary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}
.sqs-block-button-element:active,
.sqs-button-element--primary:active { transform: translateY(0); }

/* Links: an underline that grows instead of appearing.
   Scoped to content areas so nav and buttons are untouched. */
.sqs-block-html a:not(.sqs-block-button-element) {
  text-decoration: none;
  background-image: linear-gradient(var(--soma-primary), var(--soma-primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--dur-base) var(--ease-out);
  padding-bottom: 1px;
}
.sqs-block-html a:not(.sqs-block-button-element):hover {
  background-size: 100% 1.5px;
}

/* Images: kill the hard edge, add a whisper of depth.
   Squarespace image blocks only, not logos or icons. */
.sqs-block-image .sqs-image-shape-container-element,
.sqs-block-image img {
  border-radius: var(--radius-m);
}

/* Smooth anchor scrolling, with an offset so a fixed header
   never covers the target heading. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 6rem; }

/* Respect the user's motion setting. Non-negotiable. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Scroll reveal. Paired with site.js. -------------------
   Elements marked data-soma-reveal fade and rise once, on
   first entry. If JS fails, content is visible anyway. */
[data-soma-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
[data-soma-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
html:not([data-soma-js]) [data-soma-reveal] {
  opacity: 1;
  transform: none;
}

/* ============================================================
   SITE SPECIFIC
   Everything above is shared and safe. Write site work below.
   Keep sections labeled. Delete nothing above without reason.
   ============================================================ */




/* ============================================================
   LWI PASS 2 :: DESIGN
   Written 5 September against the live DOM. Every color and
   selector below was sampled from the rendered site, not
   guessed and not carried over from another project.

   NOTE ON THE TOKENS ABOVE: the SOMA block at the top of this
   file belongs to the TRIBE rebrand and is NOT used here. LWI
   keeps its own identity. The LWI tokens are directly below and
   everything after them uses those.
   ============================================================ */


/* ---- 1. LWI tokens, sampled from the live site -------------
   These five are the entire palette the site actually uses.
   Read off computed styles on the homepage, About, a service
   page and a condition page. Nothing invented.

     cream  #FFF5D9  page ground. themes: white, white-bold,
                     bright-inverse
     teal   #226764  headings, and the ground of theme "black"
     slate  #536C7C  buttons, and the ground of theme "bright"
     navy   #213C4E  ground of theme "dark". the darkest color
                     on the site, so all depth is tinted from it
     stone  #7B949C  ground of theme "light", used on the
                     condition page heroes

   The warm tan in the homepage hero is photographic, the top of
   a full bleed image block. It is not a CSS color and there is
   no token for it. */

:root {
  --lwi-cream: #FFF5D9;
  --lwi-teal:  #226764;
  --lwi-slate: #536C7C;
  --lwi-navy:  #213C4E;
  --lwi-stone: #7B949C;

  /* Lines and veils, tinted from navy so nothing reads grey. */
  --lwi-line:      rgba(33, 60, 78, 0.14);
  --lwi-line-soft: rgba(33, 60, 78, 0.07);
  --lwi-veil:      rgba(33, 60, 78, 0.55);

  /* Depth. Tinted from navy, never neutral, never black.
     A grey drop shadow is the clearest tell of a template. */
  --lwi-shadow-s: 0 1px 2px rgba(33,60,78,.05), 0 2px 6px rgba(33,60,78,.05);
  --lwi-shadow-m: 0 2px 4px rgba(33,60,78,.04), 0 10px 24px rgba(33,60,78,.08);
  --lwi-shadow-l: 0 4px 8px rgba(33,60,78,.04), 0 20px 48px rgba(33,60,78,.11);
  --lwi-shadow-xl:0 8px 16px rgba(33,60,78,.05), 0 38px 88px rgba(33,60,78,.14);

  /* Type. Manrope for display, Nunito Sans for text. Both are
     already loaded by the site. No font is added here.
     The scale is fluid between 390 and 1440. */
  --lwi-text--1: clamp(0.84rem, 0.80rem + 0.17vw, 0.94rem);
  --lwi-text-0:  clamp(1.00rem, 0.95rem + 0.23vw, 1.13rem);
  --lwi-text-1:  clamp(1.13rem, 1.05rem + 0.33vw, 1.31rem);
  --lwi-disp-1:  clamp(1.35rem, 1.20rem + 0.62vw, 1.70rem);
  --lwi-disp-2:  clamp(1.65rem, 1.36rem + 1.18vw, 2.31rem);
  --lwi-disp-3:  clamp(2.10rem, 1.48rem + 2.53vw, 3.52rem);
  --lwi-disp-4:  clamp(2.40rem, 1.55rem + 3.48vw, 4.35rem);

  /* Spacing rhythm, one scale for the whole site. */
  --lwi-sp-2xs: 0.375rem;
  --lwi-sp-xs:  0.625rem;
  --lwi-sp-s:   1rem;
  --lwi-sp-m:   1.625rem;
  --lwi-sp-l:   2.625rem;
  --lwi-sp-xl:  4.25rem;
  --lwi-sp-2xl: 6.5rem;

  --lwi-radius-s: 6px;
  --lwi-radius-m: 12px;
  --lwi-radius-l: 20px;

  --lwi-measure: 64ch;

  /* Motion. Slow and eased. prefers-reduced-motion is already
     handled in the base layer above and is untouched here. */
  --lwi-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lwi-dur:      280ms;
  --lwi-dur-slow: 620ms;
}


/* ---- 2. Price guard ----------------------------------------
   /home, /store, the store product page and /appointments were
   deleted in the editor, so nothing here is load-bearing any
   more. The rules stay as a guard: if a product block or a price
   is ever reintroduced, it does not render.

   Still true, and still worth saying: this is a curtain, not a
   lock. Hiding a price does not stop a purchase. */

.product-price,
.product-price-value,
.productDetails .product-price,
.product-list,
.sqs-add-to-cart-button,
.sqs-add-to-cart-button-wrapper,
.product-purchase-controls-wrapper {
  display: none;
}

/* /inquire keeps the collection id the page had as /services-2.
   The fourth fieldset is the leftover budget range question,
   the only place a dollar figure still exists in the source.
   Bhisham deletes the field in the editor. Until then it does
   not render. */
#collection-6a31d7ca512dbf2eb800d918 .field-list fieldset.field.checkbox:nth-of-type(4) {
  display: none;
}


/* ---- 3. /inquire, template cleanup -------------------------
   The page was an interior design template. Four sections carry
   content that has nothing to do with LWI. Hidden by exact
   section id, scoped to this collection so nothing leaks.

   CURTAIN, NOT A LOCK. The text is still in the page source and
   still indexable. These four sections must be deleted in the
   editor. Ids are listed in the report.

     6a31d7ca512dbf2eb800d91b  "Explore Our Packages"
     6a31d7ca512dbf2eb800d91e  Interior Design marquee
     6a31d7ca512dbf2eb800d921  "Popular"
     6a31d7ca512dbf2eb800d924  "The Atlast Project", New York

   6a31d7ca512dbf2eb800d927 is the form. It stays. */

#collection-6a31d7ca512dbf2eb800d918 [data-section-id="6a31d7ca512dbf2eb800d91b"],
#collection-6a31d7ca512dbf2eb800d918 [data-section-id="6a31d7ca512dbf2eb800d91e"],
#collection-6a31d7ca512dbf2eb800d918 [data-section-id="6a31d7ca512dbf2eb800d921"],
#collection-6a31d7ca512dbf2eb800d918 [data-section-id="6a31d7ca512dbf2eb800d924"] {
  display: none;
}

/* With four sections gone the form is the whole page, so it has
   to carry it. Give it height, center it, and set it on the
   page ground as a panel rather than a stray block. */
#collection-6a31d7ca512dbf2eb800d918 [data-section-id="6a31d7ca512dbf2eb800d927"] > .content-wrapper {
  padding-block: clamp(var(--lwi-sp-xl), 9vw, var(--lwi-sp-2xl));
  min-height: 78vh;
  display: flex;
  align-items: center;
}

#collection-6a31d7ca512dbf2eb800d918 .form-block {
  max-width: 46rem;
  margin-inline: auto;
}

/* The intro sits above the fields and should read as the page
   title, because it now is one. */
#collection-6a31d7ca512dbf2eb800d918 [data-section-id="6a31d7ca512dbf2eb800d927"] .sqs-block-html h1,
#collection-6a31d7ca512dbf2eb800d918 [data-section-id="6a31d7ca512dbf2eb800d927"] .sqs-block-html h2 {
  font-size: var(--lwi-disp-3);
  margin-bottom: var(--lwi-sp-s);
}

/* Form controls. The visible field is painted by Squarespace's
   own form component, and both background-color and border-color
   are set with enough weight that a plain rule loses. Background
   lands with !important; the hairline has to be an inset shadow
   because border-color does not. Verified on the live page. */
#collection-6a31d7ca512dbf2eb800d918 .field-list input,
#collection-6a31d7ca512dbf2eb800d918 .field-list textarea,
#collection-6a31d7ca512dbf2eb800d918 .field-list select {
  background-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: inset 0 0 0 1px var(--lwi-line) !important;
  border-radius: 8px !important;
  color: var(--lwi-navy) !important;
  font-size: var(--lwi-text-0);
  transition: box-shadow var(--lwi-dur) var(--lwi-ease);
}

#collection-6a31d7ca512dbf2eb800d918 .field-list input::placeholder,
#collection-6a31d7ca512dbf2eb800d918 .field-list textarea::placeholder {
  color: rgba(33, 60, 78, 0.45) !important;
}

#collection-6a31d7ca512dbf2eb800d918 .field-list input:focus,
#collection-6a31d7ca512dbf2eb800d918 .field-list textarea:focus,
#collection-6a31d7ca512dbf2eb800d918 .field-list select:focus {
  box-shadow: inset 0 0 0 1px var(--lwi-slate),
              0 0 0 3px rgba(83, 108, 124, 0.16) !important;
  outline: none;
}

#collection-6a31d7ca512dbf2eb800d918 .field-list .title {
  font-size: var(--lwi-text--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

#collection-6a31d7ca512dbf2eb800d918 .field-list > .form-item {
  margin-bottom: var(--lwi-sp-m);
}


/* ---- 4. Type -----------------------------------------------
   The editor used different tags for the same job. Service and
   About pages title with h1 at 68px. Condition pages title with
   h2 at 47px. Same role, two sizes. Everything below makes them
   one system regardless of the tag.

   Sections live in section.region, so :first-of-type is the
   hero on every page. Subheads are h3 sitewide. */

.region .page-section:first-of-type h1,
.region .page-section:first-of-type h2,
.region .page-section:first-of-type .sqs-block-html h1,
.region .page-section:first-of-type .sqs-block-html h2 {
  font-family: Manrope, sans-serif;
  font-size: var(--lwi-disp-4);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: var(--lwi-sp-s);
}

/* Headings below the hero. h2 outside the first section and h3
   everywhere are the same rank in practice. */
.region .page-section:not(:first-of-type) h2,
.region h3,
.region .sqs-block-html h3 {
  font-family: Manrope, sans-serif;
  font-size: var(--lwi-disp-2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.region h4,
.region .sqs-block-html h4 {
  font-family: Manrope, sans-serif;
  font-size: var(--lwi-disp-1);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Body. Was 16px on the service pages and 23px on the condition
   pages. One size, one measure, everywhere. */
.region .sqs-block-html p,
.region .sqs-block-html li {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--lwi-text-0);
  line-height: 1.62;
  max-width: var(--lwi-measure);
}

.region .sqs-block-html p + p {
  margin-top: var(--lwi-sp-s);
}

.horizontal-alignment--center .sqs-block-html p,
.horizontal-alignment--center .sqs-block-html li {
  margin-inline: auto;
}

/* Lists read as a considered set rather than browser bullets. */
.region .sqs-block-html ul {
  list-style: none;
  padding-left: 0;
}

.region .sqs-block-html ul > li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--lwi-sp-2xs);
}

.region .sqs-block-html ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.42;
}


/* ---- 5. Vertical rhythm ------------------------------------
   Section padding is set per section in the editor and drifts
   between page types. One scale, applied everywhere, so every
   page breathes the same. */

/* Squarespace writes section padding inline, so a plain rule
   loses on most pages. Measured before this landed: 0, 47.5,
   57.6, 95 and 104px doing the same job on different pages.
   !important is the only way to make one rhythm hold.

   Heroes are deliberately excluded. Their height is a custom
   section height set in the editor and several of them are
   already tall and near empty. Forcing padding into those made
   the condition page hero grow from 859 to 1115px, which is
   worse, not better. So the rhythm applies below the fold and
   the hero keeps whatever the editor gave it. */
.region .page-section:not(:first-of-type) > .content-wrapper {
  padding-block: clamp(3.5rem, 6vw, var(--lwi-sp-2xl)) !important;
}

/* The footer is compact on purpose. */
.sections .page-section[data-section-theme="bright-inverse"] > .content-wrapper {
  padding-block: var(--lwi-sp-l);
}

.sections .page-section[data-section-theme="bright-inverse"] .sqs-block-html p {
  max-width: none;
  font-size: var(--lwi-text--1);
  line-height: 1.7;
}


/* ---- 6. Depth ----------------------------------------------
   Every shadow on the site tinted from navy. */

.sqs-block-image .sqs-image-shape-container-element,
.sqs-block-image img {
  box-shadow: var(--lwi-shadow-m);
}

.region .sqs-block-button-element:hover,
.region .sqs-button-element--primary:hover {
  box-shadow: var(--lwi-shadow-m);
}


/* ---- 7. Images ---------------------------------------------
   Consistent radius on content images. The header logo is an
   image too and must not be rounded, so it is excluded. */

.region .sqs-block-image .sqs-image-shape-container-element,
.region .sqs-block-image img,
.region .sqs-block-image .sqs-image-content {
  border-radius: var(--lwi-radius-m);
  overflow: hidden;
}

.header-title-logo img,
.header-title-logo .sqs-image-shape-container-element,
.header-menu img {
  border-radius: 0 !important;   /* logo must never round */
  box-shadow: none !important;
}

/* A slow settle on content images. */
.region .sqs-block-image img {
  transition: transform var(--lwi-dur-slow) var(--lwi-ease),
              box-shadow var(--lwi-dur-slow) var(--lwi-ease);
}


/* ---- 8. Motion ---------------------------------------------
   280ms to 620ms, eased out. Reduced motion is honored by the
   base layer above, which is left alone. */

.region a,
.region .sqs-block-button-element {
  transition: color var(--lwi-dur) var(--lwi-ease),
              background-color var(--lwi-dur) var(--lwi-ease),
              box-shadow var(--lwi-dur) var(--lwi-ease),
              transform var(--lwi-dur) var(--lwi-ease);
}


/* ---- 9. The booking embed ----------------------------------
   The Arketa embed is a 640px iframe inside a cropped wrapper
   with inline styles. The wrapper needs specificity, not
   !important, except where Squarespace forces a value.

   THE REAL PROBLEM, now fixed. The block sits in a 26 column
   fluid engine grid placed at grid-column: 2 / 6, which is
   about 212px wide at 1440. That is true on twelve of the
   thirteen embed pages. Only the homepage is placed full width.

   I reported last pass that CSS could not correct this. That was
   wrong. Every one of those grids contains exactly one child, so
   widening the block cannot collide with a neighbor. Verified on
   all thirteen pages before writing this. */

.fluid-engine > .fe-block:has(#book) {
  grid-column: 2 / 26 !important;  /* beats the per block grid-area rule Squarespace writes */
}

.sqs-block-code #book {
  max-width: 620px !important;     /* beats the inline max-width:480px */
  width: 100%;
  margin-inline: auto;
}

.sqs-block-code #book > div {
  max-width: 100% !important;      /* beats the inline max-width:460px */
  /* Squarespace forces border-radius:0 on code block children
     with !important, so this has to match it to land. */
  border-radius: var(--lwi-radius-l) !important;
  overflow: hidden !important;     /* keeps the crop working with the radius */
  /* Replaces an inline pure black shadow. */
  box-shadow: var(--lwi-shadow-l) !important;
  border: 1px solid var(--lwi-line-soft);
}

.sqs-block-code #book iframe {
  width: 100%;
}

/* The crop window is a hard 460px. On a narrow viewport the
   Arketa fields stack and the form grows, so the window is
   raised below 640px. Only ever increased, never reduced, so
   this cannot cut a Submit button that was previously visible. */
@media (max-width: 640px) {
  .sqs-block-code #book > div {
    height: 540px !important;      /* beats the inline height:460px */
  }
}

/* The section holding the form gets real air so the panel reads
   as placed rather than pasted. */
.region .page-section:has(#book) > .content-wrapper {
  padding-block: clamp(var(--lwi-sp-xl), 8vw, var(--lwi-sp-2xl));
}


/* ---- 10. Call to action hierarchy --------------------------
   Reverted last pass on the belief that Squarespace painted the
   fill from per block !important rules. That was wrong. There
   are no per block button rules and the page carries a single
   !important in total. The fill comes from

     .primary-button-style-solid .sqs-button-element--primary
       { background-color: var(--primaryButtonBackgroundColor) }

   in the versioned site stylesheet, with no !important, so it is
   beatable. Confirmed on the live page before shipping.

   Ranking happens in site.js, which tags repeats of the SAME
   label with data-lwi-cta="secondary". A label used once is left
   alone, so the four different service buttons on /services-1
   stay a set of equals. The button beside the booking form is
   always primary.

   Border width is controlled elsewhere by the component, so the
   outline is drawn with an inset shadow instead of a border. */

/* Every secondary CTA on the site sits on a shape block card,
   and there are exactly two card colors: stone #7B949C and
   cream #FFF5D9. Checked on all seven condition pages. Navy
   reads clearly on both, so one rule covers every case and no
   theme conditional is needed.

   A first attempt used slate, which vanished on the stone
   cards. Navy was chosen after looking at it rendered. */

.region a.sqs-block-button-element[data-lwi-cta="secondary"] {
  background-color: transparent !important;  /* beats the solid button style rule */
  color: var(--lwi-navy) !important;
  box-shadow: inset 0 0 0 1.5px var(--lwi-navy) !important;
}

.region a.sqs-block-button-element[data-lwi-cta="secondary"]:hover {
  background-color: var(--lwi-navy) !important;
  color: var(--lwi-cream) !important;
  box-shadow: inset 0 0 0 1.5px var(--lwi-navy), var(--lwi-shadow-s) !important;
  transform: none;
}

/* The primary keeps the only lift on the page. */
.region a.sqs-block-button-element:not([data-lwi-cta="secondary"]):hover {
  transform: translateY(-2px);
}


/* ---- 11. Mobile --------------------------------------------
   At 390 the condition pages stack up to eight full width
   buttons. Cap and center them so a column of pills stops
   reading as a wall. */

@media (max-width: 640px) {
  .region .sqs-block-button-container {
    justify-content: center;
  }

  .region a.sqs-block-button-element {
    max-width: 20rem;
    width: 100%;
    margin-inline: auto;
  }

  /* Tighter rhythm on small screens so pages do not become a
     scroll of empty bands. */
  .region .page-section > .content-wrapper {
    padding-block: var(--lwi-sp-l);
  }

  .region .page-section:first-of-type > .content-wrapper {
    padding-block: var(--lwi-sp-xl);
  }

  .region .sqs-block-html p,
  .region .sqs-block-html li {
    max-width: none;
  }
}


/* ---- 12. Nutrition, program treatment ----------------------
   /nutrition-coaching, collection 6a28a1f7bd5bd91c3965e839.

   The Blitz copy is written and sits in the report. It cannot be
   added from here, because body copy is editor work. This is the
   treatment it drops into: an h3 becomes a program title, the
   list under it becomes an included-items set, and a pair of
   adjacent blocks reads as two shapes of one program rather
   than two loose paragraphs. Safe on the page as it stands. */

#collection-6a28a1f7bd5bd91c3965e839 .region .sqs-block-html h3 {
  padding-bottom: var(--lwi-sp-xs);
  border-bottom: 1px solid var(--lwi-line);
  margin-bottom: var(--lwi-sp-m);
}

#collection-6a28a1f7bd5bd91c3965e839 .region .sqs-block-html ul > li {
  padding-left: 1.75rem;
  margin-bottom: var(--lwi-sp-xs);
  line-height: 1.55;
}

/* A ring rather than a dot, so an included-items list reads as
   inclusions rather than bullets. */
#collection-6a28a1f7bd5bd91c3965e839 .region .sqs-block-html ul > li::before {
  width: 9px;
  height: 9px;
  top: 0.55em;
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
  opacity: 0.5;
}

/* Two column inclusions above 768, where the list is long. */
@media (min-width: 768px) {
  #collection-6a28a1f7bd5bd91c3965e839 .region .sqs-block-html ul {
    columns: 2;
    column-gap: var(--lwi-sp-xl);
  }
  #collection-6a28a1f7bd5bd91c3965e839 .region .sqs-block-html ul > li {
    break-inside: avoid;
  }
}


/* ============================================================
   LWI PASS 3 :: REVAMP
   Upscale, polished, established. Same palette, same five
   tokens, nothing new invented.

   Read the note at the top of pass 2 first. The constraint that
   shapes this whole pass: the homepage is three content
   sections, a hero, the booking form and three testimonials.
   There is no services content on it to style. Putting the
   services in front of a first time visitor is an editor job
   and it is named in the report.
   ============================================================ */


/* ---- 13. Header --------------------------------------------
   The nav is the only place on the homepage where a visitor can
   see what LWI actually offers, because the Services and
   Conditions folders hold the real list. So the dropdown is
   treated as a real menu rather than an afterthought. */

/* Uppercase and extra letterspacing were tried here and taken
   back out. They widened the nav by 62px, which pushed it onto
   a second row at 1440 and 1372 and collided with the page
   title on /inquire. The nav sits in a fixed row beside a 682px
   logo and has no width to spare.

   So the type is left as the site sets it and only the
   interaction is refined. */
.header-nav-item a,
.header-nav .header-nav-folder-title {
  position: relative;
  padding-bottom: 3px;
}

/* An underline that grows from the left instead of appearing.
   Squarespace ships its own active underline, so this draws
   below the text with a pseudo element and does not fight it. */
.header-nav-item--collection a::after,
.header-nav-folder-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width var(--lwi-dur) var(--lwi-ease);
}

.header-nav-item--collection a:hover::after,
.header-nav-item--folder:hover .header-nav-folder-title::after {
  width: 100%;
}

/* The dropdown. This is the services list, so it gets the
   treatment of a menu: a real panel, tinted depth, room to
   breathe, and rows big enough to read at a glance. */
.header-nav-folder-content {
  background: var(--lwi-cream);
  border: 1px solid var(--lwi-line-soft);
  border-radius: var(--lwi-radius-m);
  box-shadow: var(--lwi-shadow-l);
  padding: var(--lwi-sp-s) var(--lwi-sp-2xs);
  min-width: 15rem;
}

.header-nav-folder-item a {
  display: block;
  padding: 0.55rem 0.9rem;
  border-radius: var(--lwi-radius-s);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: var(--lwi-text-0);
  transition: background-color var(--lwi-dur) var(--lwi-ease),
              color var(--lwi-dur) var(--lwi-ease);
}

.header-nav-folder-item a::after { content: none; }  /* no underline inside the panel */

.header-nav-folder-item a:hover {
  background: rgba(33, 60, 78, 0.06);
  color: var(--lwi-navy);
}


/* ---- 14. Hero ----------------------------------------------
   The homepage headline is cream over the light top of a
   photograph and it washes out. The image block sits at
   z-index 1 and the text at 4, verified in the DOM, so a scrim
   at 2 sits above the photo and below the type without
   touching either.

   Scoped to the first section so a content image further down
   a page is never darkened. */

.region .page-section:first-of-type .fluid-engine > .fe-block:has(.sqs-block-image) {
  position: relative;
}

.region .page-section:first-of-type .fluid-engine > .fe-block:has(.sqs-block-image)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--lwi-radius-m);
  background: linear-gradient(
    to bottom,
    rgba(33, 60, 78, 0.16) 0%,
    rgba(33, 60, 78, 0.10) 30%,
    rgba(33, 60, 78, 0.34) 100%
  );
}

/* Hero type. The headline ran the full width of the grid, which
   is why it read as a banner rather than a statement. */
.region .page-section:first-of-type h1,
.region .page-section:first-of-type h2 {
  max-width: 20ch;
  margin-inline: auto;
  text-shadow: 0 1px 24px rgba(33, 60, 78, 0.28);
}

/* Left aligned heroes keep their alignment. */
.region .page-section:first-of-type .horizontal-alignment--left h1,
.region .page-section:first-of-type .horizontal-alignment--left h2 {
  margin-inline: 0;
}

/* The one button above the fold should carry weight. */
.region .page-section:first-of-type a.sqs-block-button-element {
  padding-inline: 2.75rem;
  letter-spacing: 0.07em;
  box-shadow: var(--lwi-shadow-m);
}

.region .page-section:first-of-type a.sqs-block-button-element:hover {
  box-shadow: var(--lwi-shadow-l);
}


/* ---- 15. The services page ---------------------------------
   /services-1, collection 6a2dba16ba8bd24e6392c473.

   This is the page that answers "what do you actually do", and
   it was four thin outline pills in a row on a navy field with
   600px of dead space under them. The four blocks sit at grid
   columns 2/8, 8/14, 14/20 and 20/26, one row, so they can be
   made into a proper card set without touching the layout.

   The names are all the page has. It carries no description of
   any service, and that is body copy, which is editor work. */

#collection-6a2dba16ba8bd24e6392c473 .fluid-engine > .fe-block:has(.sqs-block-button) {
  min-height: 150px;
  display: flex;
}

#collection-6a2dba16ba8bd24e6392c473 .sqs-block-button,
#collection-6a2dba16ba8bd24e6392c473 .sqs-block-button .sqs-block-content,
#collection-6a2dba16ba8bd24e6392c473 .sqs-block-button-container {
  width: 100%;
  height: 100%;
}

#collection-6a2dba16ba8bd24e6392c473 a.sqs-block-button-element {
  display: flex;
  /* Centered, not bottom aligned. There is no description above
     the label, so anchoring it low left an empty box with a
     stranded name in it. */
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--lwi-sp-m);
  border-radius: var(--lwi-radius-l) !important;  /* Squarespace pills these to 300px */
  background-color: rgba(255, 245, 217, 0.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 245, 217, 0.30);
  color: var(--lwi-cream) !important;
  font-size: var(--lwi-disp-1);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  white-space: normal;
  transition: background-color var(--lwi-dur) var(--lwi-ease),
              box-shadow var(--lwi-dur) var(--lwi-ease),
              transform var(--lwi-dur) var(--lwi-ease);
}

#collection-6a2dba16ba8bd24e6392c473 a.sqs-block-button-element:hover {
  background-color: rgba(255, 245, 217, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 245, 217, 0.55), var(--lwi-shadow-l);
  transform: translateY(-4px);
}

/* The heading above the cards, and the caption below. */
#collection-6a2dba16ba8bd24e6392c473 .region .page-section:first-of-type h1,
#collection-6a2dba16ba8bd24e6392c473 .region .page-section:first-of-type h2,
#collection-6a2dba16ba8bd24e6392c473 .sqs-block-html h1,
#collection-6a2dba16ba8bd24e6392c473 .sqs-block-html h2 {
  max-width: 22ch;
  text-shadow: none;
}


/* ---- 16. Testimonials --------------------------------------
   Three blockquotes in a row on the teal band. They were set at
   body size with the attribution looking like another sentence.
   A quote should not read like a paragraph. */

/* The pass 2 body rule is .region .sqs-block-html p, which is
   more specific than .region blockquote p, so the quote type
   has to match that weight to land. */
.region .sqs-block-html blockquote p {
  font-family: Manrope, sans-serif;
  font-size: var(--lwi-disp-1);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  max-width: 34ch;
}

/* Quote paragraphs align to each other, not to the block. The
   pass 2 centering rule adds margin-inline:auto to every p in a
   centered block, which left the attribution floating under a
   left aligned quote. */
.region .sqs-block-html blockquote p {
  margin-inline: 0;
}

/* The attribution is the last paragraph in the quote. */
.region .sqs-block-html blockquote p:last-child {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--lwi-text--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: var(--lwi-sp-s);
}

/* A quote mark set as decoration, not as content. Kept in flow
   rather than absolutely positioned: the three quote blocks sit
   on different grid rows, and an absolute mark drifted away
   from its own text. */
.region .sqs-block-html blockquote::before {
  content: "\201C";
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 3.25rem;
  line-height: 0.7;
  height: 0.7em;
  margin-bottom: var(--lwi-sp-xs);
  opacity: 0.22;
  pointer-events: none;
}


/* ---- 17. Cards on the condition pages ----------------------
   The shape blocks behind each condition are the only card
   surface on the site. They were hard rectangles. */

.region .sqs-block-shape .sqs-block-content > * ,
.region [class*="shape-block"] {
  border-radius: var(--lwi-radius-l);
}

.region .sqs-block-shape {
  filter: drop-shadow(0 10px 26px rgba(33, 60, 78, 0.10));
}


/* ---- 18. Footer --------------------------------------------
   Four labels over four values. It reads as a set of fields, so
   it is set like one: quiet labels, confident values. */

.sections .page-section[data-section-theme="bright-inverse"] .sqs-block-html p:first-child {
  font-size: var(--lwi-text--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--lwi-sp-2xs);
}

.sections .page-section[data-section-theme="bright-inverse"] .sqs-block-html p:last-child {
  font-size: var(--lwi-text-0);
  opacity: 0.95;
}


/* ---- 19. Reveal on scroll :: NOT USED ----------------------
   Turned on in this pass and turned back off in this pass. The
   reason is written at the selector list in site.js. Short
   version: on /inquire it left the page title and intro
   invisible in the viewport, and copy that does not appear is
   worse than copy that does not animate. */

/* ============================================================
   LWI PASS 4 :: HOMEPAGE STRUCTURE
   Styling for the three staged sections built in site.js, plus
   the form treated as the close of the page.

   These sections are staged, not native. The note at the top of
   the homepage block in site.js explains what that costs. When
   they are rebuilt in the editor this block still applies, as
   long as the class names come with them.
   ============================================================ */


/* ---- 20. Staged section shell ------------------------------ */

.lwi-staged-section {
  position: relative;
}

.lwi-staged-section > .section-border > .section-background {
  position: absolute;
  inset: 0;
}

/* Grounds are set here rather than inherited from the theme
   attribute, so these sections do not depend on a Squarespace
   rule that could be re-themed in the editor. */
.lwi-services-section > .section-border > .section-background,
.lwi-steps-section > .section-border > .section-background {
  background: var(--lwi-cream);
}

.lwi-conditions-section > .section-border > .section-background {
  background: var(--lwi-stone);
}

.lwi-staged-section > .content-wrapper {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 6vw, var(--lwi-sp-2xl)) !important;
}

.lwi-shell {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.lwi-section-title {
  font-family: Manrope, sans-serif;
  font-size: var(--lwi-disp-2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--lwi-teal);
  margin: 0 0 var(--lwi-sp-l);
  text-wrap: balance;
}

.lwi-conditions-section .lwi-section-title {
  color: var(--lwi-cream);
}


/* ---- 21. Section A. Services ------------------------------- */

.lwi-service-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lwi-sp-m);
}

.lwi-service-card {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--lwi-line-soft);
  border-radius: var(--lwi-radius-l);
  padding: var(--lwi-sp-m);
  box-shadow: var(--lwi-shadow-s);
  transition: box-shadow var(--lwi-dur) var(--lwi-ease),
              transform var(--lwi-dur) var(--lwi-ease);
}

.lwi-service-card:hover {
  box-shadow: var(--lwi-shadow-l);
  transform: translateY(-3px);
}

.lwi-service-name {
  font-family: Manrope, sans-serif;
  font-size: var(--lwi-disp-1);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 var(--lwi-sp-xs);
}

.lwi-service-name a {
  color: var(--lwi-teal);
  text-decoration: none;
  background-image: linear-gradient(var(--lwi-teal), var(--lwi-teal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--lwi-dur) var(--lwi-ease);
}

.lwi-service-card:hover .lwi-service-name a,
.lwi-service-name a:focus-visible {
  background-size: 100% 1.5px;
}

.lwi-service-copy {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--lwi-text-0);
  line-height: 1.6;
  color: var(--lwi-navy);
  opacity: 0.86;
  margin: 0;
}


/* ---- 22. Section B. What we treat --------------------------
   Quiet precise links, not bullets. A hairline under each one
   and a mark that slides in on hover. */

.lwi-condition-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--lwi-sp-xl);
}

.lwi-condition-item {
  border-bottom: 1px solid rgba(255, 245, 217, 0.28);
  margin: 0;
  padding: 0;
}

.lwi-condition-item::before { content: none; }  /* not a bullet */

.lwi-condition-item a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: var(--lwi-sp-s) 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--lwi-text-1);
  line-height: 1.35;
  color: var(--lwi-cream);
  text-decoration: none;
  transition: color var(--lwi-dur) var(--lwi-ease),
              padding-left var(--lwi-dur) var(--lwi-ease);
}

.lwi-condition-item a::after {
  content: "\2192";
  margin-left: auto;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--lwi-dur) var(--lwi-ease),
              transform var(--lwi-dur) var(--lwi-ease);
}

.lwi-condition-item a:hover,
.lwi-condition-item a:focus-visible {
  padding-left: 0.5rem;
  color: var(--lwi-navy);
}

.lwi-condition-item a:hover::after,
.lwi-condition-item a:focus-visible::after {
  opacity: 0.75;
  transform: translateX(0);
}


/* ---- 23. Section C. What happens next ----------------------
   The most considered thing on the page. This is the section
   that has to make the practice read as established, so it gets
   the most structure: a numeral set as quiet architecture, a
   rule that ties the three together, and real depth. */

.lwi-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lwi-sp-m);
  counter-reset: none;
}

.lwi-step {
  position: relative;
  background: var(--lwi-cream);
  border: 1px solid var(--lwi-line-soft);
  border-radius: var(--lwi-radius-l);
  padding: var(--lwi-sp-l) var(--lwi-sp-m) var(--lwi-sp-m);
  box-shadow: var(--lwi-shadow-m);
  margin: 0;
  transition: box-shadow var(--lwi-dur) var(--lwi-ease),
              transform var(--lwi-dur) var(--lwi-ease);
}

.lwi-step::before { content: none; }  /* not a bullet */

.lwi-step:hover {
  box-shadow: var(--lwi-shadow-xl);
  transform: translateY(-3px);
}

/* A hairline across the top of each card, so the three read as
   one sequence rather than three separate boxes. */
.lwi-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--lwi-sp-m);
  right: var(--lwi-sp-m);
  height: 2px;
  background: var(--lwi-slate);
  opacity: 0.5;
  border-radius: 0 0 2px 2px;
}

.lwi-step-num {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: var(--lwi-disp-3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--lwi-slate);
  opacity: 0.32;
  margin-bottom: var(--lwi-sp-s);
}

.lwi-step-name {
  font-family: Manrope, sans-serif;
  font-size: var(--lwi-disp-1);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--lwi-teal);
  margin: 0 0 var(--lwi-sp-xs);
  text-wrap: balance;
}

.lwi-step-copy {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--lwi-text-0);
  line-height: 1.6;
  color: var(--lwi-navy);
  opacity: 0.86;
  margin: 0;
}


/* ---- 24. The form as the close -----------------------------
   The booking form is now the last thing on the page before the
   footer, so it is set as a band rather than another stripe of
   cream: dark ground, generous air, the white Arketa panel
   reading as the one thing left to do.

   Nothing inside the embed is touched. */

/* Squarespace paints .section-background from the section theme
   with enough weight that a plain rule loses even at this
   specificity, so this has to match it. */
.region .page-section:has(#book) > .section-border > .section-background {
  background-color: var(--lwi-navy) !important;
}

.region .page-section:has(#book) > .content-wrapper {
  padding-block: clamp(var(--lwi-sp-xl), 9vw, calc(var(--lwi-sp-2xl) * 1.2)) !important;
}


/* ---- 25. Homepage structure, responsive -------------------- */

@media (max-width: 1024px) {
  .lwi-service-grid { grid-template-columns: repeat(2, 1fr); }
  .lwi-step-list    { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .lwi-service-grid   { grid-template-columns: 1fr; gap: var(--lwi-sp-s); }
  .lwi-condition-list { grid-template-columns: 1fr; column-gap: 0; }
  .lwi-step-list      { gap: var(--lwi-sp-s); }

  .lwi-service-card,
  .lwi-step { padding: var(--lwi-sp-m); }

  .lwi-step-num { font-size: var(--lwi-disp-2); }

  .lwi-staged-section > .content-wrapper {
    padding-block: var(--lwi-sp-l) !important;
  }
}