/* Theme "clean" (Marcus 12 Nov, refs: white finance + dental sites). Loaded after theme-balanced.
   White sections everywhere (the one ink band for Scott + reviews stays), cards get a hairline instead of sitting on blue,
   titles in Montserrat caps, body stays Inter. */

/* 1. titles */
/* weight 500 = the hero title's own weight, so no section title looks bolder than the hero (Marcus 12 Nov) */
h1, h2 { font-family: "Montserrat", "Inter", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .005em; line-height: 1.08; }
h2 { font-size: clamp(26px, 2.7vw, 42px); }
/* hero title keeps the hero's own scaling (--fs grows with the room); caps are wider than Inter lowercase,
   so .78 gives the same line width the hero layout was built for (measured 12 Nov: 390px phone = 42px, 1440 = 80px, 2560 = 142px) */
.heroD h1 { font-size: calc(var(--fs) * .78); }
h3, .bn__n strong { font-family: "Montserrat", "Inter", sans-serif; font-weight: 600; }

/* 2. white sections */
.sec--soft, .resultsD, #how, #cost, #comfort, #visit, .comfortD, .comfortD__voices { background: #fff !important; }
:root { --soft: #F2F6F9; }

/* cards: soft light-blue, no outline, no shadow (Marcus 13 Nov: white cards on a white section looked odd).
   The "Have another question?" box and the menu call box stay white with a hairline; pricing has no cards at all. */
.resultsD .bn, #how .tl__card, #how .lz, #comfort .cv, #comfort .rc, .rc, .kindD, #kinds .kindD, .glance li {
  background: #EEF4F9 !important; border: 0 !important; box-shadow: none !important; }
.askD, #questions .askD, .mega__call {
  background: #fff !important; border: 1px solid #E6EBEF; box-shadow: 0 1px 2px rgba(14, 42, 63, .04), 0 18px 40px -34px rgba(14, 42, 63, .35) !important; }
/* the reviews in the dark Scott band stay white (white on dark is fine) */
.scottD .rc, .scottD .scottD__quote { background: #fff !important; border: 0; }
/* small bits that were light blue would vanish on a blue card: make them white */
.rc .rc__av, .resultsD .bn .bn__tag { background: #fff !important; }
.scottD .rc .rc__av { background: #E7F0F7 !important; }
#comfort .comfortD__photo img { background: none !important; }

/* 3. pricing cards + one review. Each card has a real-looking object with no background sitting half above its top edge
   (Marcus 13 Nov, like his reference: "images of things with no background", not photos in boxes). */
.priceCards { list-style: none; padding: 0; margin: clamp(118px, 10.5vw, 156px) auto 0; max-width: 1120px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.priceCards li { position: relative; overflow: visible; padding-top: calc(min(44%, 110px) + 16px); background: none; border: 0; box-shadow: none; } /* no card behind it: white on white looked odd (Marcus 13 Nov) */
.priceCards img { position: absolute; left: 50%; top: 0; width: min(88%, 220px); height: auto; aspect-ratio: 1 / 1; object-fit: contain; display: block; transform: translate(-50%, -50%); pointer-events: none; }
.priceCards b { display: block; padding: 16px 18px 0; font-size: 16.5px; font-weight: 600; text-align: center; }
.priceCards li > span { display: block; padding: 6px 18px 20px; font-size: 14.5px; line-height: 1.5; color: #4a5560; text-align: center; } /* the short sentence (Marcus 12 Nov) */
.priceQuote { max-width: 680px; margin: clamp(32px, 3.5vw, 52px) auto 0; text-align: center; }
.priceQuote blockquote { margin: 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.45; color: #1d1d1d; letter-spacing: -.01em; }
.priceQuote figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .priceCards { grid-template-columns: 1fr 1fr; gap: calc(min(22vw, 110px) + 24px) 14px; margin-top: calc(min(22vw, 110px) + 16px); } .priceCards li { padding-top: calc(min(44%, 110px) + 12px); } .priceCards b { font-size: 15px; padding: 12px 10px 0; } .priceCards li > span { padding: 4px 12px 16px; font-size: 13.5px; } }

/* 4. one even rhythm between sections (Marcus 12 Nov: "so much padding and uneven padding").
   With every section white, two sections' padding stacks into one gap, so each side gets half the gap we want:
   about 128px between sections on a laptop, 152px on big screens, 88px on phones. */
:root { --secY: clamp(44px, 4.4vw, 76px); }
.sec { padding-block: var(--secY); }
.resultsD { padding-bottom: var(--secY); }
.resultsD--page { padding-block: var(--secY) !important; }
.comfortD { padding-top: var(--secY); padding-bottom: var(--secY); }
.pageD { padding-bottom: var(--secY); }
.scottD { padding-block: clamp(60px, 6vw, 100px); } /* the one dark band keeps a little more room inside */
.foot--grid { padding-top: clamp(48px, 4.4vw, 64px); }

/* 5. phone hero, big title (Marcus 13 Nov picked option 1 of the phone mockups): four short lines
   GIVE / YOUR SKIN / A SECOND / CHANCE. at about 52px, and the whole laser in view on the right (it used to run off the edge). */
.brM { display: none; } /* phone-only line breaks inside the hero title */
@media (max-width: 700px) {
  .brM { display: inline; }
  .heroD h1 { font-size: calc(var(--fs) * .97); }
  /* laser on the right, whole and as big as the room allows: its arm may rise beside "CHANCE." but never past the
     line above it ("A SECOND" ends about 98px + 43vw down), so it never crosses a letter on any phone (checked 360-430 wide) */
  .heroD { --ms: .6; --mh: max(200px, min(calc(var(--hh) * .948 * var(--ms)), calc(var(--hh) * .9645 - 98px - 43.1vw)));
    --mx: calc(100vw - var(--mw) - 8px); }
  .heroD__rest { margin-top: calc(var(--hh) - 10px); } /* words start just below the laser's wheels */
  .heroD::after { z-index: 3; } /* the floor fade goes under the laser and bed, so they stay crisp (no haze on the laser) */
}

/* 6. underlines are the laser beam only, no spark at the end (Marcus 12 Nov: "the spark on it looks so weird") */
.heroD .hl::after, .heroD .hl__last::after, .beam::after { display: none !important; }

/* 7. Phone audit (Marcus 13 Nov picks: logo badge on the photo, banner photo below as a card, every title centred,
   both buttons full width, plus four small fixes). */
.visitD__mkBadge { display: none; }
.nw { white-space: nowrap; } /* "cover-up" stays on one line in titles */

/* small fixes, on every screen */
.cv__intro h3 { font-family: "Montserrat", "Inter", sans-serif; text-transform: uppercase; font-weight: 500; letter-spacing: .005em; line-height: 1.1; }
.cv__rule { display: none !important; } /* no little divider line */
.cv__intro h3 ~ p { margin-top: 12px; }
.scottD__facts dd { color: #D9E2E8 !important; } /* the labels under Scott's numbers were dark grey on black */
.faqD .faq details, .sec:not(.sec--soft) .faqD .faq details { background: #fff !important; border: 1px solid #E6EBEF; box-shadow: 0 10px 24px -22px rgba(14, 42, 63, .35); } /* white, not grey */

/* booking banner on phones and small tablets: the photo sits below the words as a rounded card */
@media (max-width: 860px) {
  .ctaD--room { padding-bottom: var(--secY) !important; background: #fff !important; }
  .ctaD__room { width: calc(100% - 2 * var(--gutter)) !important; max-width: none !important; aspect-ratio: 4 / 3 !important; margin: 28px auto 0 !important;
    border-radius: 20px; object-position: 72% 50% !important; scale: 1 !important; transform: none !important; }
}
@media (max-width: 700px) {
  /* Monkey King: a small white badge on the shopfront photo, not a logo floating above the title */
  .visitD__mk { display: none !important; }
  .visitD__shop { position: relative; }
  .visitD__shop figcaption { display: none !important; }
  .visitD__mkBadge { display: block; position: absolute; left: 14px; bottom: 14px; z-index: 3; background: #fff; border-radius: 14px; padding: 8px 14px;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); }
  .visitD__mkBadge img { height: 42px; width: auto; display: block; }

  /* every section title centred (the eyebrow, the title and its short intro); longer text below stays left */
  .opt-d .headD, .opt-d .headC, .headD, .headC, .splitD__words .headD { align-items: center !important; text-align: center !important; margin-inline: auto !important; }
  .opt-d .headD ~ .moreD, .headD ~ .moreD, .splitD__words .headD ~ .moreD, .headC ~ .moreD { text-align: center !important; }
  .comfortD__text > .eyebrow, .comfortD__text > h2, .trioD__words > .eyebrow, .trioD__words > h2,
  .howD__top, .cv__intro, .scottD__me > .eyebrow, .scottD__me > h2, .scottD__me > .lead, .scottD__me > .moreD,
  .storyD__words > .eyebrow, .storyD__words > h2, .visitD__head, .ctaD--room .ctaD__in { text-align: center !important; }
  .visitD__head, .ctaD--room .ctaD__in { align-items: center !important; }
  .ctaD--room .ctaD__in > * { margin-inline: auto; }

  /* button pairs: both full width, one above the other */
  .ctas { flex-direction: column !important; align-items: stretch !important; width: 100%; }
  .ctas .btn { width: 100% !important; justify-content: center !important; }
}

/* 8. the cooling machine, a second card right under the laser card (Marcus 13 Nov picked "1 Panel below"):
   the laser card mirrored so the machine sits on the right; on phones it stacks machine-first, like the laser card. */
#how .lz--cool { margin-top: 24px; grid-template-columns: 1fr .5fr; }
#how .lz--cool .lz__img { order: 2; }
@media (max-width: 700px) {
  #how .lz--cool { grid-template-columns: 1fr; }
  #how .lz--cool .lz__img { order: 0; }
}