/* ost_cms: custom CSS v1 */
/* Quiet Cove: per-site Custom CSS v3 (canvas-tolerant selectors + mobile drawer, 2026-10-18).
   v2's rules, rewritten so each matches the same elements on the live
   page and in the /cms editor canvas. The canvas wraps every block as
   div > div.cms-block-frame, wraps each section in .cms-section-shell,
   renders paragraphs as <p>, card titles as <div>, and carries no
   data-cms-richtext or .cms-menu-list, so direct-child rules use
   :is(X, :has(X)) and richtext rules use .cms-b-richtext. Canvas inline
   styles (section padding, card background, shadow, title weight) are
   beaten with !important; live computed styles are unchanged at 1024px
   and up. Below 1024px the menu block is a drawer (QC-13 scrolling-menu
   rules are desktop-only now).
   Literal hex = canvas tones with no skin slot: muted #6E544B,
   soft #E8D7C8, dark #5C3229, onPrimary #FBF6F1. */

/* Fonts shipped with the app; a User Font can't carry weights or
   italics (QC-3). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/assets/quietcove_www/fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/quietcove_www/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/quietcove_www/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap;
  src: url(/assets/quietcove_www/fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/assets/quietcove_www/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/assets/quietcove_www/fonts/jost-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/quietcove_www/fonts/jost-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/quietcove_www/fonts/jost-latin-500-normal.woff2) format("woff2"); }

/* Tokens the skin UI can't set: heading weight 300 (gap 361), canvas
   onPrimary (the skin derives #fff), radius 8px for cards and images
   (gap 362; buttons get their own pill below), and the canvas's
   translucent line colour (QC-6). */
:root { --heading-weight: 300; --primary-ink: #FBF6F1; --radius: 8px; --qc-line: rgba(92, 50, 41, .2); }
/* Anchors land below the sticky header (QC-9). */
html { scroll-padding-top: 66px; }
/* Body font and ink: composed pages apply neither (QC-1). */
.cms-site { font-family: var(--font-stack, "Jost", system-ui, sans-serif); color: var(--text); -webkit-font-smoothing: antialiased; }

/* Sections: canvas padding and full content width (composer pads are
   fixed 64/48px and measures cap at 720/940px). The canvas sets the
   padding inline, hence !important here and on every later section
   padding rule. */
.cms-main .cms-section { padding: clamp(64px, 9vw, 104px) clamp(20px, 5vw, 64px) !important; }
.cms-section > div { max-width: none !important; }

/* Type scale */
.cms-b-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .3em; color: var(--primary); opacity: 1; }
h2.cms-b-heading, .cms-b-richtext h2 {
  font-size: clamp(33px, 4.6vw, 48px); line-height: 1.1;
  font-weight: var(--heading-weight); font-family: var(--heading-font-stack, inherit); color: var(--text);
}
h3.cms-b-heading { font-family: var(--heading-font-stack, inherit); font-weight: 400; }
.cms-b-paragraph, .cms-b-richtext p { font-weight: 300; line-height: 1.75; color: #6E544B; }
.cms-b-buttons a {
  display: inline-flex !important; align-items: center; min-height: 48px; padding: 0 28px !important;
  font-size: 12px; font-weight: 500 !important; letter-spacing: .2em; text-transform: uppercase; border-radius: 999px !important;
}

/* Header: one row at every width (QC-12). From 1024px the menu sits
   right-aligned beside Book and scrolls sideways if it runs out of room
   (QC-13); below 1024px it is a drawer, see the end of this block. */
.cms-header { position: sticky; top: 0; z-index: 40; }
.cms-s-qc-nav { padding: 10px clamp(16px, 5vw, 64px) !important; border-bottom: 1px solid var(--qc-line); }
.cms-s-qc-nav > div { flex-wrap: nowrap !important; gap: clamp(14px, 3vw, 36px) !important; }
.cms-s-qc-nav > div > :is(.cms-block, :has(.cms-block)) { flex: none !important; }
.cms-menu a { min-height: 44px; font-size: 12px; font-weight: 500 !important; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; color: var(--text) !important; }
.cms-s-qc-nav .cms-b-buttons a { min-height: 44px; padding: 0 clamp(16px, 2vw, 24px) !important; }
.cms-c-qc-nav-logo img { height: clamp(17px, 2.4vw, 26px) !important; width: auto !important; }
@media (min-width: 1024px) {
  .cms-s-qc-nav > div > :is(.cms-b-menu, :has(.cms-b-menu)) { flex: 1 1 auto !important; min-width: 0; }
  .cms-s-qc-nav .cms-menu > ul { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: clamp(18px, 3vw, 34px) !important; }
  .cms-s-qc-nav .cms-menu li:first-child { margin-left: auto; }
}

/* Mobile drawer (menu block "On small screens: Menu button"): below
   1024px the logo sits left, the Menu button and Book are grouped right,
   and the open list drops full-width from the sticky header. The nav is
   made static so the absolutely positioned list anchors to .cms-header. */
@media (max-width: 1023px) {
  .cms-s-qc-nav > div { gap: 8px !important; }
  .cms-s-qc-nav .cms-b-menu { position: static; }
  .cms-s-qc-nav > div > :is(.cms-b-menu, :has(.cms-b-menu)) { margin-left: auto; }
  .cms-s-qc-nav .cms-menu-drawer-toggle {
    position: relative; min-width: 44px; min-height: 44px; margin: 0; padding: 0 40px 0 8px;
    border: 0; border-radius: 4px; background: none; box-shadow: none; cursor: pointer;
    font: 500 11px/1 var(--font-stack, "Jost", system-ui, sans-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--text);
    -webkit-tap-highlight-color: transparent;
  }
  .cms-s-qc-nav .cms-menu-drawer-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  /* Three-line icon (::before) that becomes an X (::before + ::after). */
  .cms-s-qc-nav .cms-menu-drawer-toggle::before, .cms-s-qc-nav .cms-menu-drawer-toggle::after {
    content: ""; position: absolute; right: 12px; top: 50%; width: 18px; box-sizing: border-box;
  }
  .cms-s-qc-nav .cms-menu-drawer-toggle::before {
    height: 12px; margin-top: -6px;
    background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  }
  .cms-s-qc-nav .cms-menu-drawer-toggle::after { height: 2px; margin-top: -1px; background: currentColor; opacity: 0; }
  .cms-s-qc-nav .cms-menu-drawer-toggle[aria-expanded="true"]::before { height: 2px; margin-top: -1px; background: currentColor; transform: rotate(45deg); }
  .cms-s-qc-nav .cms-menu-drawer-toggle[aria-expanded="true"]::after { opacity: 1; transform: rotate(-45deg); }
  /* Open panel: full viewport width under the header; the base styles
     keep it display:none until the toggle adds .is-open. */
  .cms-s-qc-nav .cms-menu > ul {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1; gap: 0 !important;
    max-height: calc(100vh - 72px); overflow-y: auto; padding: 4px clamp(16px, 5vw, 64px) 12px;
    background: var(--bg); border-top: 1px solid var(--qc-line); box-shadow: 0 18px 32px rgba(58, 38, 33, .14);
  }
  .cms-s-qc-nav .cms-menu > ul > li { width: 100%; border-bottom: 1px solid var(--qc-line); }
  .cms-s-qc-nav .cms-menu > ul > li:last-child { border-bottom: 0; }
  .cms-s-qc-nav .cms-menu > ul > li > a { display: flex; width: 100%; min-height: 48px; }
}

/* Hero (first section). */
:is(.cms-main > .cms-section:first-child, .cms-main > .cms-section-shell:first-child > .cms-section) { padding: clamp(44px, 7vw, 80px) clamp(20px, 5vw, 64px) 0 !important; }
:is(.cms-main > .cms-section:first-child, .cms-main > .cms-section-shell:first-child > .cms-section) > div { gap: 30px !important; }
.cms-c-qc-hero-logo { width: 100%; justify-content: center; }
.cms-c-qc-hero-logo img { width: clamp(200px, 40vw, 520px) !important; max-width: 72% !important; height: auto !important; }
.cms-c-qc-hero-title, :is(.cms-main > .cms-section:first-child, .cms-main > .cms-section-shell:first-child > .cms-section) .cms-b-eyebrow {
  font-family: var(--font-stack) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.7 !important;
  letter-spacing: .28em; text-transform: uppercase; color: var(--primary) !important; text-wrap: balance; margin: 0;
}
:is(.cms-main > .cms-section:first-child, .cms-main > .cms-section-shell:first-child > .cms-section) .cms-b-paragraph { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.7; max-width: 34em; }
.cms-c-qc-hero-ctas a { min-height: 50px; padding: 0 32px !important; font-size: 13px; }
/* Second button as the secondary (outline) variant (QC-4). */
.cms-c-qc-hero-ctas > a:nth-of-type(2) { background-color: transparent !important; color: var(--primary) !important; border: 1px solid var(--primary) !important; }
/* Hero image: arched top, canvas height (gaps 356, 364). */
.cms-c-qc-arch-top {
  height: clamp(280px, 48vw, 560px) !important; aspect-ratio: auto !important; margin-top: clamp(16px, 4vw, 40px);
  border-radius: clamp(140px, 40vw, 600px) clamp(140px, 40vw, 600px) 0 0 !important;
}
/* Photo placeholders take the canvas's frame colour until photos land. */
div.cms-b-image { background: #E8D7C8 !important; border: 0 !important; }
div.cms-c-qc-arch-portrait { background: var(--bg) !important; }

/* Tagline band: dark tone (gap 363), Cormorant caps. */
.cms-main .cms-s-qc-tagline-band { padding: 22px clamp(20px, 5vw, 64px) !important; background-color: #5C3229 !important; }
.cms-c-qc-tagline { max-width: none !important; }
.cms-c-qc-tagline p {
  font-family: var(--heading-font-stack, inherit); font-size: clamp(15px, 2vw, 20px); line-height: 1.2;
  letter-spacing: .26em; text-transform: uppercase; text-align: center; margin: 0; color: #FBF6F1;
}
.cms-c-qc-tagline strong { font-weight: 400; }

/* Treatments: heading left, intro right (>=800px), canvas cards. The
   heading is a richtext h2, so the grid places the richtext block. */
#services > div { gap: 16px !important; }
#services .cms-b-paragraph { line-height: 1.7; }
#services h2 { font-size: clamp(35px, 5vw, 52px); line-height: 1.06; }
#services .cms-b-cards { margin-top: 36px; }
@media (min-width: 800px) {
  #services > div { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px clamp(20px, 5vw, 64px) !important; align-items: end !important; }
  #services > div > :is(.cms-b-eyebrow, :has(.cms-b-eyebrow)) { grid-area: 1 / 1; }
  #services > div > :is(.cms-b-richtext, :has(.cms-b-richtext)) { grid-area: 2 / 1; }
  #services > div > :is(.cms-b-paragraph, :has(.cms-b-paragraph)) { grid-area: 1 / 2 / 3 / 3; }
  #services > div > :is(.cms-b-cards, :has(.cms-b-cards)) { grid-column: 1 / -1; }
}
/* Cards collapse like the canvas grid (QC-8). */
.cms-b-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; gap: 20px !important; width: 100%; }
.cms-b-cards > * { background: var(--bg) !important; border: 0 !important; padding: 30px 26px !important; gap: 14px !important; box-shadow: 0 1px 0 var(--qc-line) !important; }
/* Card title: an h3 live, a div in the canvas (inline weight 500). */
.cms-b-cards > * > :is(h3, div:not(:last-child)) { font-family: var(--heading-font-stack, inherit); font-weight: 400 !important; font-size: 27px !important; line-height: 1.15 !important; }
/* Card body: keep the price-line spacing (QC-7). */
.cms-b-cards > * > div:last-child { white-space: pre-wrap; font-weight: 300; font-size: 15px; line-height: 1.65; color: #6E544B; }

/* Hot stone + About: the canvas's two-up grid (gap 360). */
#hotstone > div, #about > div {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 6vw, 72px) !important; align-items: center !important;
}
#hotstone > div > :is(.cms-block, :has(.cms-block)), #about > div > :is(.cms-block, :has(.cms-block)) { width: auto !important; max-width: none !important; }
#about > div > :is(.cms-c-qc-arch-portrait, :has(.cms-c-qc-arch-portrait)) { width: min(100%, 420px) !important; }
#hotstone .cms-b-image { height: clamp(300px, 45vw, 520px) !important; aspect-ratio: auto !important; }
.cms-c-qc-hotstone-text > * + *, .cms-c-qc-about-text > * + * { margin-top: 22px; }
.cms-c-qc-hotstone-text > p:first-child, .cms-c-qc-about-text > p:first-child {
  font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: var(--primary);
}
.cms-b-richtext > p:first-child strong { font-weight: inherit; }
.cms-c-qc-hotstone-text p, .cms-c-qc-about-text p { font-size: 17px; }
.cms-c-qc-about-text > p, #book .cms-b-paragraph { color: var(--text); }
.cms-c-qc-hotstone-text ul { list-style: none; padding: 0; border-top: 1px solid var(--qc-line); }
.cms-c-qc-hotstone-text li { padding: 14px 0; border-bottom: 1px solid var(--qc-line); font-weight: 300; font-size: 15px; line-height: normal; }
/* About portrait: arch, square-ish bottom, 420:520 (gaps 356, 364). */
.cms-c-qc-arch-portrait {
  justify-self: center;
  border-radius: 210px 210px 8px 8px !important; aspect-ratio: 420 / 520 !important;
}
/* Qualifications callout (richtext blockquote). */
.cms-c-qc-about-text blockquote {
  background: var(--surface); border-radius: 8px; padding: 22px 24px; border: 0;
  font-style: normal; font-weight: 300; font-size: 15px; line-height: 1.65; color: #6E544B;
}
.cms-c-qc-about-text blockquote strong {
  display: block; margin-bottom: 8px; line-height: normal; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--primary);
}

/* Testimonials (hidden until real reviews). */
.cms-c-qc-testimonial-intro p {
  font-family: var(--heading-font-stack, inherit); font-style: italic; font-size: clamp(27px, 3.8vw, 40px);
  text-align: center; color: var(--primary); margin: 0;
}
.cms-s-qc-testimonials > div > .cms-b-quote { flex: 1 1 260px !important; }

/* Gift vouchers 7a: canvas spacing, no gap above the card. */
:is(.cms-main > .cms-section:has(+ .cms-s-qc-giftcard-section), .cms-main > .cms-section-shell:has(+ .cms-section-shell > .cms-s-qc-giftcard-section) > .cms-section) { padding-top: clamp(56px, 8vw, 88px) !important; padding-bottom: 0 !important; }
:is(.cms-main > .cms-section:has(+ .cms-s-qc-giftcard-section), .cms-main > .cms-section-shell:has(+ .cms-section-shell > .cms-s-qc-giftcard-section) > .cms-section) > div { gap: 18px !important; }
:is(.cms-main > .cms-section:has(+ .cms-s-qc-giftcard-section), .cms-main > .cms-section-shell:has(+ .cms-section-shell > .cms-s-qc-giftcard-section) > .cms-section) h2 { font-size: clamp(30px, 4.2vw, 44px); }
:is(.cms-main > .cms-section:has(+ .cms-s-qc-giftcard-section), .cms-main > .cms-section-shell:has(+ .cms-section-shell > .cms-s-qc-giftcard-section) > .cms-section) .cms-b-paragraph { font-size: 16px; max-width: 620px; }
/* 7b: the section's own inner row is the dark card, so logo and caption
   share one panel with no seam (gap 360). */
.cms-main .cms-s-qc-giftcard-section { padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 88px) !important; }
.cms-s-qc-giftcard-section > div {
  width: min(100%, 460px); aspect-ratio: 460 / 290; margin: 0 auto !important; justify-content: center;
  gap: 22px !important; background: #5C3229; border-radius: 8px; box-shadow: 0 18px 40px rgba(58, 38, 33, .2);
}
.cms-c-qc-giftcard-logo img { width: 220px !important; height: auto !important; }
.cms-c-qc-giftcard-caption { font-size: 11px; letter-spacing: .34em; color: #FBF6F1; }

/* FAQ: heading left, rule-separated questions right (>=800px).
   Static, always open: no accordion block (gap 358). */
#faq > div { gap: 0 !important; }
#faq > div > :is(h2, :has(h2)) { margin: 14px 0 clamp(36px, 6vw, 72px); }
#faq h2, #book h2 { line-height: 1.08; }
#faq h3 { font-size: clamp(20px, 2.4vw, 24px); line-height: normal; border-top: 1px solid var(--qc-line); padding-top: 22px; width: 100%; }
#faq > div > :is(.cms-b-paragraph, :has(.cms-b-paragraph)) { font-size: 16px; padding: 14px 0 22px; width: 100%; }
#faq > div > :last-child { border-bottom: 1px solid var(--qc-line); }
@media (min-width: 800px) {
  #faq > div { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 clamp(36px, 6vw, 72px) !important; align-items: start !important; }
  #faq > div > :is(.cms-b-eyebrow, :has(.cms-b-eyebrow)) { grid-area: 1 / 1; }
  #faq > div > :is(h2, :has(h2)) { grid-area: 1 / 1 / span 10 / 2; margin: 32px 0 0; }
  #faq > div > :is(h3, :has(h3)), #faq > div > :is(.cms-b-paragraph, :has(.cms-b-paragraph)) { grid-column: 2; }
}

/* Book: canvas column width; contact rows (label, value, arrow). */
#book > div { gap: 22px !important; }
#book > div > * { max-width: 620px; }
#book .cms-b-richtext { width: 100%; }
#book ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--qc-line); }
#book li { border-bottom: 1px solid var(--qc-line); }
#book li a {
  display: block; position: relative; padding: 18px 34px 18px 0; line-height: normal;
  color: var(--text); text-decoration: none; font-size: clamp(15px, 3.8vw, 18px); overflow-wrap: anywhere;
}
#book li a::after { content: "\2192"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 18px; }
#book li strong { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--primary); }
/* About + Book: the canvas's soft tone. */
.cms-s-qc-soft-bg[class] { background-color: #E8D7C8 !important; }

/* Footer: dark tone (gap 363), canvas grid and bottom bar. */
.cms-footer .cms-section { background-color: #5C3229 !important; color: #FBF6F1; }
.cms-s-qc-footer { padding: clamp(56px, 7vw, 80px) clamp(20px, 5vw, 64px) 56px !important; }
.cms-s-qc-footer > div {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 48px !important; align-items: start !important;
}
.cms-s-qc-footer > div > :is(.cms-block, :has(.cms-block)) { width: auto !important; max-width: none !important; }
.cms-c-qc-footer-logo img { width: 240px !important; max-width: 100% !important; height: auto !important; }
.cms-c-qc-footer-col > p:first-child { margin-bottom: 10px; line-height: normal; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #E8D7C8; }
.cms-c-qc-footer-col > p + p { font-weight: 300; font-size: 15px; line-height: 1.7; color: #FBF6F1; }
.cms-s-qc-footer-bar { padding: 0 clamp(20px, 5vw, 64px) 32px !important; }
.cms-s-qc-footer-bar > div { border-top: 1px solid rgba(251, 246, 241, .2); padding: 28px 0 56px; gap: 12px 24px !important; }
.cms-s-qc-footer-bar > div > :is(.cms-block, :has(.cms-block)) { width: auto !important; max-width: none !important; }
.cms-s-qc-footer-bar p { font-size: 13px; font-weight: 300; line-height: 1.5; color: #E8D7C8; }