/* Option 4: Scott's room, layered. Loads after c.css (editorial sections) and swaps the type to Inter. */
:root { --font: "Inter", system-ui, sans-serif; --ink: #121212; --muted: #5b5b5b; --accent: #0B6AA6; --accent-dark: #095889; --star: #0B6AA6; }
/* Ocean blue (brand accent): main buttons, the call button and the review stars. White text on it = 5.8:1. */
.opt-d .btn--dark, .opt-d .btn--nav { background: var(--accent); color: #fff; }
.opt-d .btn--dark:hover, .opt-d .btn--nav:hover { background: var(--accent-dark); }
.opt-d .stars { color: var(--accent); }
h1, h2, h3 { font-weight: 500; letter-spacing: -.03em; }
h2 { letter-spacing: -.035em; }

/* Nav: dark words over the soft room, a white bar once scrolled */
.nav--clear { position: fixed; left: 0; right: 0; top: 0; color: var(--ink); transition: background-color .3s ease, box-shadow .3s ease; }
.nav--clear.is-solid { background: #fff; box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .4); }
.nav--clear .brand__sub { color: #4a4a4a; }
.nav--clear .nav__links a { opacity: 1; }

/* ---------- Hero: the room in four planes ----------
   back  = the empty room (wall + floor)
   h1    = the headline, sitting in the room
   mid   = the laser and its floor shadow, in front of the headline
   front = the treatment bed, nearest the camera
   The planes share one box the size of the photo, so the laser and the bed stay on the floor. */
.heroD {
  --hh: max(660px, 100svh);
  --sw: max(100vw, calc(var(--hh) * 1.7917));
  --sh: calc(var(--sw) / 1.7917);
  --fs: clamp(52px, min(7.1vw, calc(var(--hh) * .126)), 200px); /* grows with the room on big screens */
  --ms: .9; /* the laser a touch smaller than in the photo */
  /* laser height: never more than 82% of the screen, so on wide windows it doesn't tower into the menu */
  --mh: min(calc(var(--sh) * .948242 * var(--ms)), calc(var(--hh) * .82));
  --mw: calc(var(--mh) * .5263); /* the laser's own width:height */
  /* the laser's arm lands over the end of "chance." */
  /* laser just past "chance.": the arm crosses the blue underline, not a letter (Marcus 10 Nov) */
  --mx: clamp(calc(100vw * .42), calc(var(--gutter) + var(--fs) * 8.15 - var(--mw) * .46), calc(100vw - var(--mw) * .92));
  /* where the words start: about a sixth of the way down, so the block sits balanced in the room
     (the wall is soft-focus now, so its tile lines no longer need dodging). Line two lands on the laser's arm. */
  --ct: max(110px, calc(var(--hh) * .17));
  position: relative; height: var(--hh); overflow: hidden; isolation: isolate; background: #bdbcbc;
}
.heroD__plane { position: absolute; right: 0; bottom: 0; width: var(--sw); height: var(--sh); pointer-events: none; will-change: transform; transform-origin: 50% 60%; }
.heroD__settle { position: absolute; inset: 0; transform-origin: 50% 60%; }
.heroD__plane img { position: absolute; display: block; max-width: none; }
.heroD__room { inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The wall and the bed are soft-focus in their files (like a camera focused on the laser), so the words sit on calm
   grey with no veins behind them. No overlay. The laser stays sharp. */
.heroD__back { z-index: 1; }
.heroD__mid { z-index: 4; }
.heroD__front { z-index: 5; }

/* scaled about its wheels, so it stays on the floor at any size */
.heroD__mach { position: absolute; bottom: 3.5482%; width: var(--mw); height: var(--mh); left: calc(var(--mx) - 100vw + var(--sw)); transform-origin: 50% 100%; }
.heroD__mach .m { left: 0; top: 0; width: 100%; height: auto; }
.heroD__mach .s { left: .196%; top: 86.198%; width: 100.457%; height: 17.542%; }

/* the bed sits a little lower than in the photo, so it never crowds the buttons */
.heroD__bed { left: 0; top: 64.81%; width: 35.52%; height: auto; transform: translateY(var(--bed-drop, 20%)); } /* lower than in the photo, clear of the buttons */

/* the headline ends just above the tile seam, so the seam runs through the gap, never through words */
.heroD__copy { position: absolute; left: var(--gutter); right: var(--gutter); top: var(--ct); }
.heroD h1 { position: relative; z-index: 3; color: var(--ink); font-size: var(--fs); line-height: 1; letter-spacing: -.045em; font-weight: 500; will-change: transform; transform-origin: 0 50%; }
.heroD h1 .ln { display: block; white-space: nowrap; } /* line two may run past the container, under the arm */
/* "second chance." gets the logo's laser: an Ocean blue beam underneath (thin on the left, fuller to the right)
   that ends in the eight-point spark. It draws in after the words rise. Works across a line break on phones. */
.heroD .hl {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 3.7L100 0V10L0 6.3Z' fill='%230B6AA6'/%3E%3C/svg%3E")
    left bottom .09em / calc(100% - .2em) .075em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.heroD .hl::after {
  content: ""; display: inline-block; width: .44em; height: .44em; margin-left: .02em; vertical-align: -.35em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%230B6AA6' points='50,0 52.5,44 69.1,30.9 56,47.5 100,50 56,52.5 69.1,69.1 52.5,56 50,100 47.5,56 30.9,69.1 44,52.5 0,50 44,47.5 30.9,30.9 47.5,44'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-anim .heroD .hl { background-size: 0 .075em; }
.hero-anim .heroD .hl::after { opacity: 0; transform: scale(0) rotate(-60deg); }
.hero-ready .heroD .hl { background-size: calc(100% - .2em) .075em; transition: background-size 1.1s cubic-bezier(.6, 0, .2, 1) 1s; }
.hero-ready .heroD .hl::after { opacity: 1; transform: none; transition: opacity .25s ease 2s, transform .7s cubic-bezier(.2, 1.5, .4, 1) 2s; }
.heroD__rest { position: relative; z-index: 6; margin-top: clamp(26px, 3.3vh, 44px); will-change: transform; color: var(--ink); }
.heroD .lead { color: #222; font-size: clamp(17px, 1.15vw, 21px); max-width: 36ch; }
.heroD .ctas { margin-top: 30px; }
.heroD .btn--ghost { color: var(--ink); border-color: rgba(18, 18, 18, .3); }
.heroD .btn--ghost:hover { border-color: var(--ink); }
.heroD__proof { margin-top: 22px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; color: #222; }
.heroD__proof strong { color: var(--ink); }

/* Entrance: the room settles, the bed slides in, the words rise. Only when the hero script runs. */
.hero-anim .heroD__back .heroD__settle,
.hero-anim .heroD__mid .heroD__settle { transform: scale(1.06); }
.hero-anim .heroD__front .heroD__settle { transform: translate(-5%, 9%) scale(1.05); }
.hero-anim .heroD h1 .ln { opacity: 0; transform: translateY(36px); }
.hero-anim .heroD__rest > * { opacity: 0; transform: translateY(18px); }
.hero-ready .heroD__settle { transform: none !important; transition: transform 1.9s cubic-bezier(.16, .7, .2, 1); }
.hero-ready .heroD__front .heroD__settle { transition-duration: 1.6s; transition-delay: .05s; }
.hero-ready .heroD h1 .ln { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, .7, .2, 1); }
.hero-ready .heroD h1 .ln:nth-child(1) { transition-delay: .25s; }
.hero-ready .heroD h1 .ln:nth-child(2) { transition-delay: .4s; }
.hero-ready .heroD__rest > * { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s cubic-bezier(.16, .7, .2, 1); }
.hero-ready .heroD__rest > :nth-child(1) { transition-delay: .65s; }
.hero-ready .heroD__rest > :nth-child(2) { transition-delay: .78s; }
.hero-ready .heroD__rest > :nth-child(3) { transition-delay: .9s; }

/* Laptops: a smaller laser keeps its arm below the menu */
@media (max-width: 1560px) { .heroD { --ms: .84; } }

/* Phones: the scene keeps its layers; the headline sits above the laser (its arm would hide whole letters at this size)
   and tucks in beside the arm. The words and buttons follow on white. */
@media (max-width: 700px) {
  .heroD { --hh: max(560px, 80svh); --sw: calc(var(--hh) * 1.7917); --fs: min(13.8vw, 58px); --ms: .75;
    --mx: calc(100vw + 10px - var(--mw)); height: auto; background: #fff; }
  .heroD__plane { right: auto; bottom: auto; top: 0; left: calc(var(--sw) * -.24); height: var(--hh); }
  .heroD__mach { left: calc(var(--mx) + var(--sw) * .24); }
  .heroD__bed { --bed-drop: 14%; }
  .heroD__copy { position: static; }
  .heroD h1 { position: absolute; left: var(--gutter); right: var(--gutter); top: 88px; letter-spacing: -.04em; }
  .heroD h1 .ln { white-space: normal; }
  /* below the scene, on white */
  .heroD__rest { margin-top: var(--hh); padding: 26px var(--gutter) 8px; background: #fff; }
  .heroD .lead { font-size: 17px; color: #303030; }
  .heroD .ctas { margin-top: 22px; }
  .heroD__proof { margin-top: 18px; }
}

/* ---------- The laser: what it does for you. One clean photo of the laser, then three plain answers, each with its
   own photo and a real review. Nothing floats over the laser, so nothing reads like a parts diagram. ---------- */
.laserD { margin-top: clamp(88px, 10vw, 150px); }
.laserD .headC h2 { text-wrap: balance; }
.laserD .headC .lead { max-width: 58ch; }
.laserD__body { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 104px); align-items: center; margin-top: clamp(36px, 4vw, 56px); }
.laserD__machine { margin: 0; display: flex; flex-direction: column; align-items: center; position: relative; }
.laserD__machine::before { content: ""; position: absolute; left: 18%; right: 14%; bottom: 34px; height: 30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, .07) 60%, transparent); filter: blur(4px); }
.laserD__machine img { position: relative; height: clamp(380px, 36vw, 540px); width: auto; }
.laserD__machine figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }
.laserD__rows { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(30px, 3vw, 44px); }
.laserD__row { display: grid; grid-template-columns: 132px 1fr; gap: 26px; align-items: start; }
.laserD__row img { width: 132px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.laserD__row h3 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 6px; }
.laserD__row > div > p { color: #333; font-size: 17px; line-height: 1.6; }
.laserD__proof { margin: 14px 0 0; }
.laserD__proof p { font-size: 15px; line-height: 1.5; color: #444; }
.laserD__proof footer { margin-top: 6px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.laserD__proof .stars .ic { width: 13px; height: 13px; }
.laserD__spec { margin-top: clamp(40px, 4vw, 56px); text-align: center; font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) {
  .laserD__body { grid-template-columns: 1fr; }
  .laserD__machine img { height: 380px; }
}
@media (max-width: 520px) {
  .laserD__row { grid-template-columns: 92px 1fr; gap: 16px; }
  .laserD__row img { width: 92px; border-radius: 12px; }
  .laserD__row h3 { font-size: 19px; }
  .laserD__row > div > p { font-size: 16px; }
  .laserD__spec { text-align: left; }
}

/* ---------- Does it hurt? The Zimmer cooler on its own, then honest reviews. A light, cool-blue band. ---------- */
.comfortD { background: #EDF4F9; }
.comfortD__in { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 104px); align-items: center; }
.comfortD__photo { margin: 0; }
.comfortD__photo img { width: 100%; max-width: 460px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 24px 52px -26px rgba(11, 60, 100, .45); }
.comfortD__photo figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.comfortD__text h2 { font-size: clamp(36px, 4vw, 60px); }
.comfortD__text .lead { margin-top: 18px; color: #2c2c2c; max-width: 52ch; }
.comfortD__text h3 { margin-top: clamp(28px, 3vw, 40px); font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.comfortD__text h3 + p { margin-top: 8px; color: #333; max-width: 52ch; }
.comfortD__quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(48px, 5vw, 72px); }
.comfortD__quote { margin: 0; padding: 26px 26px 22px; background: #fff; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 36px -22px rgba(11, 60, 100, .35); }
.comfortD__quote p { font-size: 17px; line-height: 1.55; color: #222; }
.comfortD__quote footer { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.comfortD__quote .stars .ic { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .comfortD__in { grid-template-columns: 1fr; }
  .comfortD__photo img { max-width: 100%; aspect-ratio: 4 / 3.4; }
  .comfortD__quotes { grid-template-columns: 1fr; }
}

/* ---------- Site pages ---------- */
/* menu: seven page links; tighter spacing so they fit on laptops before the phone menu takes over (960px) */
.opt-d .nav__links { gap: clamp(16px, 1.9vw, 30px); font-size: 14.5px; }
.nav--site { background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.moreD { margin-top: 28px; }
.moreD--center { text-align: center; }
.moreD .link { color: var(--accent); }
.moreD .link .ic { width: 16px; height: 16px; }

/* page header: breadcrumb, H1, the short answer (what AI answers quote), buttons; optional picture on the right */
.pageD { padding-block: clamp(36px, 5vw, 80px) clamp(48px, 6vw, 96px); }
.pageD__in { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.pageD__in--media { grid-template-columns: 1.15fr .85fr; }
.crumbs { display: flex; gap: 10px; font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; }
.pageD h1 { font-size: clamp(38px, 4.6vw, 72px); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; max-width: 18ch; }
.pageD__answer { margin-top: 24px; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.55; color: #262626; max-width: 46ch; }
.pageD .ctas { margin-top: 32px; }
.pageD .btn--ghost { color: var(--ink); border-color: rgba(18, 18, 18, .3); }
.pageD__media { margin: 0; justify-self: end; width: 100%; max-width: 460px; }
.pageD__media img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 26px 56px -28px rgba(0, 0, 0, .35); }
.pageD__media--cut { max-width: 300px; justify-self: center; }
.pageD__media--cut img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .14)); }
.pageD__media--wide { max-width: 560px; }
.pageD__media--quote { max-width: 520px; }
.pageD__media--quote .bigquote p { font-size: clamp(30px, 3.2vw, 48px); max-width: none; text-align: left; margin: 0; }
.pageD__media--quote .bigquote footer { justify-content: flex-start; }

.headD { margin-bottom: clamp(28px, 3vw, 44px); max-width: 760px; }
.headD h2 { font-size: clamp(30px, 3.2vw, 48px); text-wrap: balance; }
.headD .lead { margin-top: 14px; }
.gridD { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 22px; }
.quotesD { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.quotesD:first-child, .headD + .quotesD { margin-top: 0; }
.quotesD .comfortD__quote { background: #fff; }
.sec:not(.sec--soft) .quotesD .comfortD__quote { box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 16px 36px -24px rgba(0, 0, 0, .35); }
.wordsD { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.wordsD blockquote { margin: 0; }
.wordsD p { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.45; letter-spacing: -.015em; color: #1d1d1d; }
.wordsD footer { margin-top: 12px; font-size: 14px; color: var(--muted); }
.faqD { max-width: 860px; }
.faqD .faq details { background: #fff; }
.sec:not(.sec--soft) .faqD .faq details { background: var(--soft); }
.faqD .faq details p .link { color: var(--accent); margin-left: 6px; }
.faqD .faq details p .link .ic { width: 15px; height: 15px; }
.ctaD__in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ctaD h2 { font-size: clamp(32px, 3.6vw, 54px); }
.ctaD .lead { margin-top: 14px; max-width: 54ch; }
.ctaD .ctas { justify-content: center; margin-top: 28px; }
.ctaD .btn--ghost { color: var(--ink); border-color: rgba(18, 18, 18, .3); }
.visitD { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.visitD h2 { font-size: clamp(28px, 2.6vw, 40px); margin-bottom: 18px; }
.visitD .ctas { margin-top: 28px; }
.visitD .btn--ghost { color: var(--ink); border-color: rgba(18, 18, 18, .3); }
.detailsD { margin: 28px 0 0; display: grid; gap: 16px; }
.detailsD div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.detailsD dt { font-weight: 600; } .detailsD dd { margin: 0; color: #333; }
.visitD__map .map { width: 100%; aspect-ratio: 4 / 3.2; border: 0; border-radius: 20px; }
.foot__pages { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 22px; padding-bottom: 6px; font-size: 14.5px; }
.foot__pages a { text-decoration: none; color: var(--muted); } .foot__pages a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 900px) {
  .pageD__in--media { grid-template-columns: 1fr; }
  .pageD__media { justify-self: start; max-width: 100%; }
  .pageD__media--cut { max-width: 220px; justify-self: center; }
  .quotesD, .wordsD, .visitD { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .detailsD div { grid-template-columns: 1fr; gap: 2px; } }

/* Results straight after the hero */
.resultsD { padding-top: clamp(56px, 6vw, 96px); }
.resultsD .headC { margin-bottom: clamp(20px, 2vw, 28px); }
.resultsD .railC { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .heroD__plane, .heroD h1, .heroD__rest { will-change: auto; }
}

/* ---------- Before / after pairs: one system for every result on the site ----------
   Two matching 4:5 frames cut from InkOff's posts (crop only), our own Before / After chips,
   the number of sessions in bold, then their caption word for word. */
.ba { margin: 0; }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 18px; overflow: hidden; background: #e9e9e7; isolation: isolate; }
.ba__side { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.ba__side img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba__chip {
  position: absolute; left: 10px; top: 10px; padding: 5px 11px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: .01em;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .35);
}
.ba__chip--after { background: var(--accent); color: #fff; }
.ba figcaption { margin-top: 14px; }
.ba__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ba__facts strong { font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.ba__facts span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ba__cap { margin-top: 6px; font-size: 15px; line-height: 1.5; color: #444; max-width: 46ch; }
.ba__pair--one { display: block; aspect-ratio: 8 / 5; }
.ba__pair--one img { display: block; width: 100%; height: 100%; object-fit: cover; }

.railBA { gap: 24px; }
.railBA .ba { width: clamp(300px, 31vw, 480px); }
.gridBA { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 44px 26px; }

/* Results straight after the hero: a heading that says what these are */
.resultsD__head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 10px clamp(24px, 4vw, 72px); text-align: left; }
.resultsD .resultsD__head { margin-bottom: clamp(28px, 3vw, 40px); }
.resultsD__head .eyebrow { grid-column: 1 / -1; }
.resultsD__head h2 { margin: 0; }
.resultsD__head .lead { margin: 0; max-width: 46ch; justify-self: end; color: var(--muted); }

/* Hero: what and where, above the headline (part of the h1 for search; sits above it so the big words don't move) */
.heroD__kick {
  position: absolute; left: 0; bottom: calc(100% + clamp(14px, 1.6vh, 22px)); display: block; white-space: nowrap;
  font-size: clamp(13px, .95vw, 16px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #2c2c2c; line-height: 1.2;
}
.heroD__dot { color: var(--accent); margin: 0 .35em; }
.hero-anim .heroD__kick { opacity: 0; transform: translateY(12px); }
.hero-ready .heroD__kick { opacity: 1; transform: none; transition: opacity .8s ease .1s, transform .9s cubic-bezier(.16, .7, .2, 1) .1s; }
.heroD__proof { font-size: 16px; gap: 10px; }
.heroD__proof .stars .ic { width: 19px; height: 19px; }

/* What do you want removed? Three cards, each opens its page */
.kindsD { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.kindD { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.kindD .ba__pair { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.kindD .ba__side { aspect-ratio: 4 / 5; }
.kindD:hover .ba__pair { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .45); }
.kindD h3 { margin-top: 20px; font-size: clamp(21px, 1.6vw, 25px); letter-spacing: -.02em; }
.kindD p { margin-top: 8px; color: #444; font-size: 15.5px; line-height: 1.5; flex: 1; }
.kindD .link { margin-top: 14px; color: var(--accent); font-weight: 600; }
.kindD .link .ic { width: 16px; height: 16px; transition: transform .3s ease; }
.kindD:hover .link .ic { transform: translateX(3px); }
.kindD .ba__pair--one { aspect-ratio: 8 / 5; }

/* Meet Scott + reviews, one trust section */
.trustD__reviews { margin-top: clamp(64px, 7vw, 104px); }
.trustD__reviews .headC { text-align: center; }
.trustD__reviews h2 { font-size: clamp(26px, 2.4vw, 36px); }

/* Cost: the free consultation until Scott's prices are in */
.costD .headC { max-width: 760px; margin-inline: auto; }
.costD .ctas { justify-content: center; }
.costD .ctas { margin-top: 26px; }
.costD .btn--ghost { color: var(--ink); border-color: rgba(18, 18, 18, .3); }
.costD .quotesD { margin-top: clamp(32px, 3.5vw, 48px); }

@media (max-width: 900px) {
  .kindsD { grid-template-columns: 1fr; gap: 40px; }
  .resultsD__head { grid-template-columns: 1fr; }
  .resultsD__head .lead { justify-self: start; }
}
@media (max-width: 700px) {
  .railBA .ba { width: 86vw; }
  .ba__chip { left: 8px; top: 8px; font-size: 11.5px; padding: 4px 9px 5px; }
  .heroD__kick { position: static; margin-bottom: 7px; font-size: 12px; letter-spacing: .07em; }
  .heroD__addr { display: none; }
  .heroD h1 { top: 75px; }
  .resultsD .arrows { display: none; }
  .resultsD .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .resultsD .filters::-webkit-scrollbar { display: none; }
  .resultsD .filters button { flex: 0 0 auto; }
}
.opt-d .foot { border-top: 0; }
.quotesD > :only-child { grid-column: 1 / -1; max-width: 680px; }

/* ---------- Homepage results: big numbers (option 3). 3 x 2 grid; on phones one swipe row, then "See all". ---------- */
.bnGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 4vw, 60px) clamp(20px, 2vw, 30px); }
.bn { margin: 0; }
.bn__n { display: grid; grid-template-columns: auto 1fr auto; align-items: end; column-gap: 12px; border-top: 1.5px solid var(--ink); padding-top: 16px; margin-bottom: 18px; }
.bn__n strong { font-size: clamp(60px, 5.4vw, 88px); font-weight: 500; letter-spacing: -.055em; line-height: .82; }
.bn__n > span:not(.bn__tag) { display: flex; flex-direction: column; font-size: 17px; font-weight: 500; line-height: 1.25; padding-bottom: 2px; }
.bn__n em { font-style: normal; font-size: 14.5px; font-weight: 400; color: var(--muted); }
.bn__tag { align-self: end; justify-self: end; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; background: var(--soft); color: #333; }
.bn__tag--removal { background: #EDF4F9; color: var(--accent-dark); }
.bn figcaption { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #444; }
.bnMore { margin-top: clamp(40px, 4vw, 56px); text-align: center; }
.bnMore .btn { color: var(--ink); border-color: rgba(18, 18, 18, .3); }
.bnMore .btn .ic { width: 18px; height: 18px; }
@media (max-width: 1000px) and (min-width: 701px) { .bnGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .bnWrap { padding-inline: 0; }
  .bnGrid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .bnGrid::-webkit-scrollbar { display: none; }
  .bnGrid::after { content: ""; flex: 0 0 1px; }
  .bn { flex: 0 0 84vw; scroll-snap-align: start; }
  .bn__n strong { font-size: 64px; }
  .bnMore { margin-top: 28px; text-align: left; }
  .bnMore .btn { width: 100%; justify-content: center; }
}

/* ---------- Homepage results carousel: the big-number cards drift past; drag or swipe them ---------- */
.mq { overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); } /* without JS: a plain scroll row */
.mq::-webkit-scrollbar { display: none; }
.mq__track { display: flex; gap: clamp(18px, 2vw, 30px); width: max-content; }
.mq .bn { flex: 0 0 auto; width: clamp(290px, 27vw, 400px); }
.mq img { -webkit-user-drag: none; user-select: none; }
.mq--js { overflow: hidden; padding-inline: 0; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.mq--js.is-drag { cursor: grabbing; }
.mq--js .mq__track { will-change: transform; }
.mq--js.is-drag img { pointer-events: none; }
@media (min-width: 900px) {
  .mq--js { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
}
.mqCtrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(32px, 3.5vw, 48px); }
.mqCtrl .btn { color: var(--ink); border-color: rgba(18, 18, 18, .3); }
.mqCtrl .btn .ic { width: 18px; height: 18px; }
.mqCtrl__toggle {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 999px; border: 1.5px solid rgba(18, 18, 18, .18);
  background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.mqCtrl__toggle:hover { border-color: var(--ink); }
.mqCtrl__toggle .ic { width: 18px; height: 18px; }
.mqCtrl__toggle[aria-pressed="false"] .ic--fill { display: none; }
.mqCtrl__toggle[aria-pressed="true"] .ic:not(.ic--fill) { display: none; }
@media (max-width: 700px) {
  .mq .bn { width: 78vw; }
  .mq__track { gap: 16px; }
  .mqCtrl .btn { flex: 1; justify-content: center; }
}

/* Stacked pair (eyebrows): Before strip above After strip, same footprint as a side-by-side pair */
.ba__pair--stack { grid-template-columns: 1fr; }
.ba__pair--stack .ba__side, .kindD .ba__pair--stack .ba__side { aspect-ratio: 16 / 5; }
.ba__by { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.pageD__media--pair .ba__pair { box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 26px 56px -28px rgba(0, 0, 0, .35); border-radius: 24px; }
.pageD__media--pair .ba__pair img { border-radius: 0; box-shadow: none; height: 100%; }
.pageD__media--pair figcaption { margin-top: 14px; font-size: 14.5px; color: var(--muted); }

/* Scott's own words (his replies under his Instagram posts) */
.scottSays { margin: 22px 0 6px; padding-left: 18px; border-left: 3px solid var(--accent); }
.scottSays p { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.4; letter-spacing: -.015em; color: var(--ink); }
.scottSays footer { margin-top: 8px; font-size: 14px; color: var(--muted); }
.scottSays--center { border-left: 0; padding-left: 0; margin: 18px auto 14px; max-width: 30ch; }
.scottSays--center p { font-size: clamp(22px, 2vw, 30px); }

/* ---------- Results section on the brand kit (Marcus 10 Nov). Mist background, white cards, Ink type;
   Ocean blue only as the accent: the label, the logo's laser under "after", the session numbers, the After chips,
   the main button. (A full blue band was too much: "I asked to use accents".) Controls grouped in the centre. ---------- */
.resultsD { background: #F5F5F4; padding-block: clamp(72px, 7vw, 112px); }
.resultsD .resultsD__head { display: block; text-align: center; margin-bottom: clamp(36px, 4vw, 52px); }
.resultsD .resultsD__head > * { max-width: 780px; margin-inline: auto; }
.resultsD .resultsD__head .eyebrow { color: var(--accent); }
.resultsD .resultsD__head h2 { color: var(--ink); font-size: clamp(36px, 4vw, 60px); }
.resultsD .resultsD__head .lead { color: #5B5B5B; margin: 18px auto 0; max-width: 54ch; justify-self: auto; }
.resultsD .mq .bn {
  width: clamp(290px, 23vw, 350px); background: #fff; color: var(--ink); border-radius: 22px; padding: 18px 18px 20px;
  border: 1px solid #E8E8E6; box-shadow: 0 1px 2px rgba(18, 18, 18, .04), 0 18px 36px -26px rgba(18, 18, 18, .28);
}
.resultsD .bn__n { border-top: 0; padding-top: 2px; margin-bottom: 14px; }
.resultsD .bn__n strong { color: var(--accent); font-size: clamp(52px, 4vw, 66px); }
.resultsD .bn__n em { color: #5B5B5B; }
.resultsD .ba__pair { border-radius: 14px; }
.resultsD .bn figcaption { color: #333; font-size: 14.5px; }
.resultsD .mq__track { padding-block: 4px 24px; } /* room for the card shadows */
.resultsD .mqCtrl { justify-content: center; gap: 12px; margin-top: clamp(16px, 2vw, 24px); }
.resultsD .mqCtrl .btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.resultsD .mqCtrl .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.resultsD .mqCtrl__toggle { border-color: rgba(18, 18, 18, .2); color: var(--ink); background: #fff; }
.resultsD .mqCtrl__toggle:hover { border-color: var(--ink); }

/* The logo's laser under a word (as under "second chance." in the hero): Ocean beam, thin to full, ending in the spark */
.beam {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 3.7L100 0V10L0 6.3Z' fill='%230B6AA6'/%3E%3C/svg%3E")
    left bottom .06em / calc(100% - .2em) .07em no-repeat;
  padding-bottom: .04em;
}
.beam::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .02em; vertical-align: -.36em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%230B6AA6' points='50,0 52.5,44 69.1,30.9 56,47.5 100,50 56,52.5 69.1,69.1 52.5,56 50,100 47.5,56 30.9,69.1 44,52.5 0,50 44,47.5 30.9,30.9 47.5,44'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 700px) {
  .resultsD .mq .bn { width: 80vw; padding: 14px 14px 16px; }
  .resultsD .bn__n strong { font-size: 56px; }
  .resultsD .resultsD__head { text-align: left; }
  .resultsD .resultsD__head .lead { margin-left: 0; }
  .resultsD .mqCtrl .btn { flex: 1; justify-content: center; }
}

/* Pills (Before / After chips, Removal / Fading tags): fixed height, text centred on its cap height, equal space above and below */
.ba__chip, .bn__tag {
  display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 2px 10px 0; line-height: 1;
} /* 2px on top offsets the room Inter keeps under the letters (browsers snap text to whole pixels): measured centred */
.bn__tag { height: 26px; padding: 0 11px; }
@media (max-width: 700px) { .ba__chip { height: 22px; padding: 1px 9px 0; } .bn__tag { padding: 0 11px 1px; } }
/* measured at 1x, 2x and phone 3x: letters sit within 1/3 px of centre (lab/results/chipcheck.mjs) */
/* no faded edges (they washed out the outer cards); the row starts in line with the page text */
.resultsD .mq--js { -webkit-mask-image: none; mask-image: none; }
.mq--js .mq__track { padding-left: var(--gutter); }
/* wide screens: the row runs edge to edge (no page-margin gap on the left); phones keep it in line with the text */
@media (min-width: 701px) { .mq--js .mq__track { padding-left: 0; } }
.mq--js .mq__track { backface-visibility: hidden; }

/* ---------- The laser underline, glowing (Marcus 10 Nov: "it's LASER after all", Ocean + soft glow) ----------
   One SVG per beam: a soft Ocean glow, an even Ocean core that fades in from the left (no tapered wedge, which
   drew unevenly), and a pale hot centre that brightens toward the spark. The spark glows too.
   Used under "second chance." (hero, draws in on load) and any .beam word. Works across line breaks on phones. */
:root {
  --beam: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%2040'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='c'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%230B6AA6'%20stop-opacity='0'/%3E%3Cstop%20offset='.18'%20stop-color='%230B6AA6'/%3E%3Cstop%20offset='.8'%20stop-color='%231679BD'/%3E%3Cstop%20offset='1'%20stop-color='%234FB0EE'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='h'%20x1='0'%20x2='1'%3E%3Cstop%20offset='.25'%20stop-color='%23E6F5FF'%20stop-opacity='0'/%3E%3Cstop%20offset='1'%20stop-color='%23E6F5FF'%20stop-opacity='.95'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='w'%20x1='0'%20x2='1'%3E%3Cstop%20offset='0'%20stop-color='%230B6AA6'%20stop-opacity='0'/%3E%3Cstop%20offset='.35'%20stop-color='%230B6AA6'%20stop-opacity='.315'/%3E%3Cstop%20offset='1'%20stop-color='%232C8FD8'%20stop-opacity='.45'/%3E%3C/linearGradient%3E%3Cfilter%20id='b'%20x='-.1'%20y='-2'%20width='1.2'%20height='5'%3E%3CfeGaussianBlur%20stdDeviation='6%204.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect%20x='0'%20y='16.5'%20width='1000'%20height='7'%20fill='url(%23w)'%20filter='url(%23b)'/%3E%3Crect%20x='0'%20y='17.5'%20width='1000'%20height='5'%20rx='2.5'%20fill='url(%23c)'/%3E%3Crect%20x='0'%20y='19.17'%20width='1000'%20height='1.67'%20fill='url(%23h)'/%3E%3C/svg%3E");
  --spark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-60%20-60%20220%20220'%3E%3Cdefs%3E%3Cfilter%20id='s'%20x='-1'%20y='-1'%20width='3'%20height='3'%3E%3CfeGaussianBlur%20stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle%20cx='50'%20cy='50'%20r='26'%20fill='%232C8FD8'%20opacity='.45'%20filter='url(%23s)'/%3E%3Cpolygon%20fill='%230B6AA6'%20points='50,0%2052.5,44%2069.1,30.9%2056,47.5%20100,50%2056,52.5%2069.1,69.1%2052.5,56%2050,100%2047.5,56%2030.9,69.1%2044,52.5%200,50%2044,47.5%2030.9,30.9%2047.5,44'/%3E%3Ccircle%20cx='50'%20cy='50'%20r='6'%20fill='%23E6F5FF'/%3E%3C/svg%3E");
}
.heroD .hl, .beam {
  background: var(--beam) left bottom -.1em / calc(100% - .16em) .4em no-repeat;
  /* slice: when the words wrap (phones) it's one beam running across both lines, fading in once, hot at the spark */
  -webkit-box-decoration-break: slice; box-decoration-break: slice; padding-bottom: 0;
}
.heroD .hl::after, .beam::after {
  content: ""; display: inline-block; width: .62em; height: .62em; margin-left: -.14em; vertical-align: -.457em; /* centred on the beam (measured) */
  background: var(--spark) center / contain no-repeat;
}
.hero-anim .heroD .hl { background-size: 0 .4em; }
.hero-ready .heroD .hl { background-size: calc(100% - .16em) .4em; transition: background-size 1.1s cubic-bezier(.6, 0, .2, 1) 1s; }

/* ---------- Phones (Marcus 10 Nov: "mobile looks messy, cut off") ---------- */
.mqCtrl__short { display: none; }
@media (max-width: 700px) {
  /* Call / Text: a solid bar along the bottom edge (the floating pill let page text show around and through it) */
  .opt-d .callbar {
    left: 0; right: 0; bottom: 0; border-radius: 0; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; box-shadow: 0 -1px 0 #E8E8E6, 0 -12px 28px -20px rgba(18, 18, 18, .35);
  }
  .opt-d .callbar .btn--ghost { background: #fff; color: var(--ink); border-color: rgba(18, 18, 18, .25); }
  .opt-d .foot { padding-bottom: calc(56px + 76px); } /* the footer clears the bar */
  /* every section heading starts on the left, the same way, all the way down */
  .opt-d .headC { align-items: flex-start; text-align: left; }
  .opt-d .scottC { align-items: flex-start; text-align: left; }
  .opt-d .scottC .bigquote p { margin-inline: 0; }
  .opt-d .scottC .bigquote footer { justify-content: flex-start; }
  .opt-d .trustD__reviews .headC { text-align: left; }
  .opt-d .costD .ctas { justify-content: flex-start; }
  .opt-d .scottSays--center { margin-left: 0; }
}
@media (max-width: 420px) {
  /* "See all 27 results" so the button and the pause button fit side by side on small phones */
  .mqCtrl__long { display: none; }
  .mqCtrl__short { display: inline; }
  .resultsD .mqCtrl .btn { padding-inline: 18px; }
}

/* ---------- "Does it hurt?" (Marcus 10 Nov: the three boxes looked cheap; he liked GPT's concept).
   Scott's quote leads. Reviews in a deeper pale-blue band: label column, one featured quote with a large Ocean
   quote mark, two smaller quotes, thin Ocean rules between; the words that answer the question get a plain
   Ocean underline (not the laser line: "don't use the laser underline for everything"). ---------- */
.comfortD { padding-bottom: 0; }
.comfortD__photo figcaption { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.comfortD__text .scottSays--lead { margin-top: 22px; }
.comfortD__text .scottSays--lead p { font-size: clamp(20px, 1.6vw, 25px); }
.comfortD__voices { margin-top: clamp(64px, 7vw, 104px); background: #E4EEF6; padding-block: clamp(56px, 6vw, 92px); }
.cvGrid { display: grid; grid-template-columns: .85fr 1.55fr 1fr 1fr; align-items: stretch; }
.cvGrid > * { padding-inline: clamp(20px, 2.4vw, 40px); }
.cvGrid > * + * { border-left: 1px solid rgba(11, 106, 166, .2); }
.cvGrid > :first-child { padding-left: 0; }
.cvGrid > :last-child { padding-right: 0; }
.cv__intro .eyebrow { color: var(--accent); }
.cv__intro h3 { font-size: clamp(26px, 2.3vw, 36px); font-weight: 500; letter-spacing: -.025em; line-height: 1.12; }
.cv__rule { display: block; width: 44px; height: 2px; background: var(--accent); margin: 22px 0 18px; }
.cv__intro p:last-child { color: #5B5B5B; font-size: 15px; line-height: 1.5; }
.cv { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; }
.cv p { font-size: 17px; line-height: 1.55; color: #222; }
.cv p::before { content: "\201C"; }
.cv p::after { content: "\201D"; }
.cv--feat p { font-size: clamp(22px, 1.8vw, 30px); line-height: 1.32; letter-spacing: -.015em; color: var(--ink); }
.cv--feat p::before { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 96px; line-height: .8; height: 46px; color: var(--accent); }
.cv mark { background: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-skip-ink: none; }
.cv--feat mark { text-decoration-thickness: 3px; }
.cv footer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; color: var(--muted); }
.cv footer b { color: var(--ink); font-weight: 600; }
.cv .stars .ic { width: 14px; height: 14px; }
@media (max-width: 1000px) {
  .cvGrid { grid-template-columns: 1fr 1fr; gap: 0; }
  .cv__intro { grid-column: 1 / -1; padding: 0 0 28px !important; border: 0 !important; }
  .cv--feat { grid-column: 1 / -1; padding: 28px 0 !important; border-left: 0 !important; border-top: 1px solid rgba(11, 106, 166, .2); }
  .cv:not(.cv--feat) { padding-top: 28px; border-top: 1px solid rgba(11, 106, 166, .2); }
  .cv:not(.cv--feat):nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .cvGrid { grid-template-columns: 1fr; }
  .cv:not(.cv--feat) { padding-inline: 0 !important; border-left: 0 !important; }
}
.cv footer { flex-direction: column; align-items: flex-start; gap: 6px; } /* stars above the name: the three bottoms line up */
@media (max-width: 1000px) { .cv:not(.cv--feat) { padding-bottom: 28px; } .comfortD__voices { padding-bottom: clamp(28px, 4vw, 56px); } }

/* ---------- "Does it hurt?" reviews as cards, inside the same comfort section (Marcus 10 Nov: no dividers,
   no separate blue band; it should read as one section with the machine above). ---------- */
.comfortD { padding-bottom: clamp(72px, 8vw, 120px); }
.comfortD__voices { background: none; margin-top: clamp(56px, 6vw, 88px); padding-block: 0; }
.cvGrid { grid-template-columns: .8fr 1.5fr 1fr 1fr; gap: clamp(14px, 1.4vw, 22px); align-items: stretch; }
.cvGrid > *, .cvGrid > * + * { border-left: 0; padding-inline: 0; }
.cv__intro { padding-right: clamp(8px, 1.5vw, 24px) !important; align-self: center; }
.cv {
  background: #fff; border-radius: 22px; padding: clamp(24px, 2.2vw, 34px) !important;
  box-shadow: 0 1px 2px rgba(18, 18, 18, .04), 0 22px 44px -30px rgba(11, 106, 166, .45);
}
.cv--feat { padding: clamp(28px, 2.6vw, 42px) !important; }
@media (max-width: 1000px) {
  .cvGrid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cv__intro { grid-column: 1 / -1; padding: 0 0 8px !important; border: 0 !important; }
  .cv--feat { grid-column: 1 / -1; border-top: 0 !important; }
  .cv:not(.cv--feat) { border-top: 0 !important; border-left: 0 !important; }
}
@media (max-width: 600px) {
  .cvGrid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) { .cvGrid .cv:not(.cv--feat) { padding: 24px !important; } .cvGrid .cv--feat { padding: 28px !important; } }
@media (min-width: 601px) and (max-width: 1000px) { .cvGrid .cv:not(.cv--feat) { padding: 26px !important; } }
/* all three review cards the same (Marcus: the featured one's bigger text looked off): equal width, equal type,
   each with the Ocean quote mark */
.cvGrid { grid-template-columns: .8fr 1fr 1fr 1fr; }
.cvGrid .cv, .cvGrid .cv--feat { padding: clamp(24px, 2.2vw, 32px) !important; }
.cv p, .cv--feat p { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.5; letter-spacing: -.005em; color: #1f1f1f; }
.cv p::before, .cv--feat p::before { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: .8; height: 32px; color: var(--accent); }
.cv--feat mark { text-decoration-thickness: 2px; }
@media (max-width: 1000px) { .cvGrid .cv--feat { grid-column: auto; } .cv__intro { grid-column: 1 / -1; } .cvGrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cvGrid { grid-template-columns: 1fr; } .cvGrid .cv, .cvGrid .cv--feat { padding: 24px !important; } }

/* ---------- "What do you want removed?" (Marcus 10 Nov: photos oddly shaped; picked matching pairs; "more
   interesting"). Every card is the same side-by-side pair at the same height. The After photo slides open and takes
   over most of the card: once as each card scrolls in (one after another), and wider on hover. The photos are never
   laid over each other (they weren't shot lined up). Reduced motion: a still 50/50 pair. ---------- */
.kindD .ba__pair, .kindD .ba__pair--stack {
  display: flex; aspect-ratio: 3 / 2; gap: 3px; border-radius: 20px; overflow: hidden; background: #e9e9e7;
}
.kindD .ba__side { flex: 1 1 0; min-width: 0; aspect-ratio: auto !important; height: 100%; position: relative;
  transition: flex-grow 1.1s cubic-bezier(.65, 0, .25, 1); }
.kindD .ba__side img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.kindD .ba__chip { transition: opacity .4s ease; }
.js-reveal .kindD.is-in .ba__side:last-child { flex-grow: 1.3; transition-delay: .55s; }
.kindsD .kindD:nth-child(2).is-in .ba__side:last-child { transition-delay: .8s; }
.kindsD .kindD:nth-child(3).is-in .ba__side:last-child { transition-delay: 1.05s; }
@media (hover: hover) {
  .kindD:hover .ba__side:last-child, .js-reveal .kindD.is-in:hover .ba__side:last-child { flex-grow: 2.4; transition-delay: 0s; transition-duration: .7s; }
  .kindD:hover .ba__side:first-child .ba__chip { opacity: 0; }
}
.kindD:hover .ba__pair { transform: none; box-shadow: 0 26px 46px -30px rgba(0, 0, 0, .5); }
.kindD h3 { font-size: clamp(22px, 1.7vw, 27px); }
.kindD .link { display: inline-flex; align-items: center; gap: 10px; }
.kindD .link .ic { width: 34px; height: 34px; padding: 8px; border-radius: 999px; border: 1.5px solid rgba(11, 106, 166, .35);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.kindD:hover .link .ic { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .kindD .ba__side { transition: none; } }
/* hover opens whichever photo you point at (Marcus: "the before should also zoom in depending on what side you
   hover"); pointing at the card's text opens the After. The opened photo zooms in slightly. */
.kindD .ba__side img { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .kindD:has(.ba__side:first-child:hover) .ba__side:first-child { flex-grow: 2.4; transition-delay: 0s; transition-duration: .7s; }
  .kindD:has(.ba__side:first-child:hover) .ba__side:last-child { flex-grow: 1; transition-delay: 0s; transition-duration: .7s; }
  .kindD:has(.ba__side:first-child:hover) .ba__side:first-child .ba__chip { opacity: 1; }
  .kindD:has(.ba__side:first-child:hover) .ba__side:last-child .ba__chip { opacity: 0; }
  .kindD .ba__side:hover img,
  .kindD:hover:not(:has(.ba__side:first-child:hover)) .ba__side:last-child img { transform: scale(1.06); }
}

/* ---------- Google reviews look like Google (Marcus 10 Nov): Google-yellow stars and Google's own G next to
   every review, so the page isn't only black, white and blue. Ocean stays the brand accent everywhere else. ---------- */
:root { --star: #FBBC04; }
.opt-d .stars { color: var(--star); }
.g-logo { width: 1em; height: 1em; flex: 0 0 auto; display: inline-block; vertical-align: -.14em; }
.gtag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); }
.gtag .g-logo { width: 14px; height: 14px; }
.who { font-weight: 600; color: var(--ink); }
.heroD__proof .g-logo { width: 18px; height: 18px; margin-right: 2px; }
.gHead { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; }
.gHead .g-logo { width: .9em; height: .9em; }
.gHead .stars .ic { width: .62em; height: .62em; }
.gHead__n { color: var(--ink); }
@media (max-width: 700px) { .gHead { justify-content: flex-start; } }

/* ---------- "What to expect" timeline (option A, "kinda more timeline") ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.howD__top { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.howD__top .eyebrow { color: var(--accent); }
.howD__top h2 { font-size: clamp(38px, 4vw, 60px); }
.howD__top .lead { margin-top: 16px; color: #5B5B5B; max-width: 40ch; }
.howD__vid { margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: #ddd; box-shadow: 0 30px 60px -40px rgba(18, 18, 18, .5); }
.howD__vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl { position: relative; list-style: none; padding: 0; margin: clamp(56px, 6vw, 88px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tl__track { position: absolute; left: 0; top: 27px; width: 100%; height: 2px; background: rgba(11, 106, 166, .16); border-radius: 2px; z-index: 0; }
.tl__fill { position: absolute; inset: 0; background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px rgba(11, 106, 166, .35); }
.tl__step { position: relative; z-index: 1; display: flex; flex-direction: column; }
.tl__node {
  width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; font-weight: 600; font-size: 16px;
  background: var(--accent); color: #fff; border: 2px solid var(--accent); box-shadow: 0 0 0 6px #F5F5F4;
  transition: background-color .45s ease, color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2, 1.4, .4, 1);
}
.tl__card { margin-top: 18px; flex: 1; background: #fff; border-radius: 22px; padding: 22px 24px 26px;
  box-shadow: 0 1px 2px rgba(18, 18, 18, .04), 0 22px 44px -32px rgba(11, 106, 166, .45); transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease; }
.tl__when { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tl__card h3 { margin-top: 6px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.tl__card p:last-child { margin-top: 8px; font-size: 15px; line-height: 1.55; color: #444; }
/* scroll-driven: steps the line hasn't reached yet are outlined */
.tl--js .tl__step:not(.is-on) .tl__node { background: #fff; color: var(--accent); transform: scale(.92); }
.tl--js .tl__step.is-on .tl__node { box-shadow: 0 0 0 6px #F5F5F4, 0 0 0 11px rgba(11, 106, 166, .14); }
.tl--js .tl__step:not(.is-on) .tl__card { transform: translateY(8px); box-shadow: 0 1px 2px rgba(18, 18, 18, .04); }
/* Scott's laser card */
.lz { margin-top: clamp(48px, 5vw, 72px); background: #fff; border-radius: 28px; display: grid; grid-template-columns: .5fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 3vw, 48px) clamp(28px, 4vw, 64px); box-shadow: 0 1px 2px rgba(18, 18, 18, .04), 0 22px 44px -32px rgba(11, 106, 166, .45); }
.lz__img { margin: 0; justify-self: center; }
.lz__img img { max-height: 380px; width: auto; filter: drop-shadow(0 20px 18px rgba(0, 0, 0, .12)); }
.lz .eyebrow { color: var(--accent); }
.lz h3 { font-size: clamp(26px, 2.3vw, 36px); font-weight: 500; letter-spacing: -.025em; }
.lz__pts { margin-top: 22px; display: grid; gap: 18px; list-style: none; padding: 0; }
.lz__pts li { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center; }
.lz__pts img { width: 76px; height: 76px; object-fit: cover; border-radius: 16px; background: #eee; }
.lz__pts b { display: block; font-size: 17px; font-weight: 600; }
.lz__pts span { display: block; margin-top: 3px; color: #444; font-size: 15px; line-height: 1.5; }
.lz__spec { margin-top: 20px; font-size: 13px; color: #5B5B5B; }
.lz .moreD { margin-top: 18px; text-align: left; }
@media (max-width: 1000px) and (min-width: 701px) { .tl { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }
@media (max-width: 700px) {
  .howD__top { grid-template-columns: 1fr; gap: 26px; }
  .tl { grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
  .tl__step { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
  .tl__node { width: 48px; height: 48px; font-size: 15px; }
  .tl__card { margin-top: 0; padding: 18px 20px 20px; }
  .lz { grid-template-columns: 1fr; padding: 24px; }
  .lz__img img { max-height: 260px; }
}
@media (max-width: 1000px) and (min-width: 701px) { .tl__track { display: none; } }

/* each number pops with a soft ring as the line reaches it */
@keyframes tlPop { 0% { transform: scale(.92); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes tlRing { 0% { box-shadow: 0 0 0 6px #F5F5F4, 0 0 0 6px rgba(11, 106, 166, .45); } 100% { box-shadow: 0 0 0 6px #F5F5F4, 0 0 0 22px rgba(11, 106, 166, 0); } }
.tl--js .tl__step.is-on .tl__node { animation: tlPop .55s cubic-bezier(.2, .7, .2, 1), tlRing .9s ease-out; }
.tl--js .tl__step.is-on .tl__card { transition-delay: .05s; }

/* ---------- Meet Scott + reviews (Marcus 10 Nov: the same quote twice, no Scott, giant grey review slabs).
   Scott and three facts on the left, the HONEST quote once as a feature card, a Google rating bar, then review cards
   in the same style as the pain reviews (Olivia's left out of the rail so nothing repeats). ---------- */
.scottD__top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.scottD__me .eyebrow { color: var(--accent); }
.scottD__me h2 { font-size: clamp(38px, 4vw, 60px); }
.scottD__me .lead { margin-top: 16px; color: #3a3a3a; max-width: 46ch; }
.scottD__facts { margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px clamp(24px, 3vw, 48px); }
.scottD__facts div { border-left: 2px solid var(--accent); padding-left: 14px; }
.scottD__facts dt { font-size: clamp(30px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.scottD__facts dd { margin: 8px 0 0; font-size: 14px; line-height: 1.35; color: #5B5B5B; max-width: 16ch; }
.scottD__me .moreD { margin-top: 26px; text-align: left; }
.scottD__quote {
  margin: 0; position: relative; background: #F5F5F4; border-radius: 28px; padding: clamp(32px, 4vw, 60px);
}
.scottD__mark { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 110px; line-height: .75; height: 54px; color: var(--accent); }
.scottD__quote p { font-size: clamp(30px, 3vw, 46px); line-height: 1.12; letter-spacing: -.025em; color: var(--ink); }
.scottD__quote mark { background: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.scottD__quote footer { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; color: var(--muted); }
.scottD__bar { margin-top: clamp(56px, 6vw, 88px); margin-bottom: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.scottD__bar .gHead { font-size: clamp(24px, 2.2vw, 34px); font-weight: 500; letter-spacing: -.025em; justify-content: flex-start; }
.scottD__bar .link { color: var(--accent); font-weight: 600; }
.railRv { gap: 18px; padding-bottom: 22px; }
.rv { margin: 0; width: clamp(290px, 26vw, 380px); display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  background: #fff; border: 1px solid #E8E8E6; border-radius: 22px; padding: clamp(24px, 2.2vw, 32px);
  box-shadow: 0 1px 2px rgba(18, 18, 18, .04), 0 18px 36px -30px rgba(18, 18, 18, .35); }
.rv p { font-size: 16.5px; line-height: 1.55; color: #1f1f1f; }
.rv p::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 60px; line-height: .8; height: 30px; color: var(--accent); }
.rv p::after { content: "\201D"; }
.rv footer { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14px; color: var(--muted); }
.rv .stars .ic { width: 14px; height: 14px; }
.rail-ctrl--end { justify-content: flex-end; margin-top: 8px; }
@media (max-width: 900px) {
  .scottD__top { grid-template-columns: 1fr; }
  .scottD__facts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .scottD__facts { gap: 12px 14px; }
  .scottD__facts dt { font-size: 28px; }
  .scottD__facts dd { font-size: 12.5px; }
  .scottD__quote p { font-size: 30px; }
  .rv { width: 82vw; }
  .scottD__bar { margin-bottom: 18px; }
}
.rv__by { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }

/* review row stays inside the page width (Marcus: "not even contained, running off the right"): three whole cards
   at a time on desktop, two on tablets, one on phones; the arrows page through */
.railRv { padding-inline: 0; scroll-padding-inline: 0; gap: 18px; overflow-y: visible; }
.railRv .rv { width: calc((100% - 36px) / 3); }
@media (max-width: 1000px) { .railRv .rv { width: calc((100% - 18px) / 2); } }
@media (max-width: 700px) { .railRv .rv { width: 100%; } }

/* Cost (Marcus: "sounds dumb, sound more professional, don't quote Scott exactly"): a plain lead and four facts */
.costD .headC .lead { max-width: 58ch; color: #3a3a3a; }
.costD__pts { list-style: none; padding: 0; margin: clamp(8px, 1vw, 16px) auto 0; max-width: 1080px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.costD__pts li { background: #fff; border-radius: 18px; padding: 20px 22px; border-top: 3px solid var(--accent); box-shadow: 0 1px 2px rgba(18, 18, 18, .04), 0 16px 32px -28px rgba(18, 18, 18, .35); }
.costD__pts b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.costD__pts span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: #4a4a4a; }
.costD__ctas { justify-content: center; margin-top: clamp(28px, 3vw, 40px); }
.costD__ctas .btn--ghost { color: var(--ink); border-color: rgba(18, 18, 18, .3); }
@media (max-width: 900px) { .costD__pts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .costD__ctas { justify-content: flex-start; } }
@media (max-width: 420px) { .costD__pts { grid-template-columns: 1fr; } }

.costD__pts { max-width: none; }
.costD__pts li { border-top: 0; padding: 22px 24px; }
.costD__pts b::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--accent); margin-bottom: 14px; }
@media (max-width: 420px) { .costD__pts { grid-template-columns: 1fr 1fr; gap: 10px; } .costD__pts li { padding: 16px 14px; } .costD__pts b { font-size: 15.5px; } .costD__pts span { font-size: 13.5px; } }

/* ---------- Cards (Marcus picked GPT's sheet ideas 1 and 8, 11 Nov) ---------- */
/* 1. Fact cards: a thin Ocean icon in a soft blue circle, then the title and one line */
.costD__pts li { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 26px 24px; border: 1px solid #ECECEA; }
.costD__pts b::before { content: none; display: none; }
.costD__ic { width: 54px; height: 54px; border-radius: 999px; background: #E7F0F7; color: var(--accent); display: grid; place-items: center; margin-bottom: 18px; }
.costD__ic .ic { width: 24px; height: 24px; stroke-width: 1.6; }
.costD__pts b { font-size: 18px; }
.costD__pts span:last-child { margin-top: 6px; }
/* 8. Review cards, the same everywhere: initial avatar, stars, name + Google G, then the words */
.rc {
  margin: 0; background: #fff; border: 1px solid #ECECEA; border-radius: 22px; padding: clamp(22px, 2vw, 30px);
  box-shadow: 0 1px 2px rgba(18, 18, 18, .04), 0 18px 36px -30px rgba(18, 18, 18, .35);
  display: flex; flex-direction: column; gap: 18px; text-align: left;
}
.rc__head { display: flex; align-items: center; gap: 14px; }
.rc__av { width: 48px; height: 48px; border-radius: 999px; background: #E7F0F7; color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 19px; flex: 0 0 auto; }
.rc__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rc__meta .stars .ic { width: 15px; height: 15px; }
.rc__by { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; font-size: 14px; color: var(--muted); }
.rc__by .who { font-weight: 600; color: var(--ink); }
.rc p, .cv.rc p, .cv--feat.rc p, .rv.rc p { font-size: 16.5px; line-height: 1.55; color: #1f1f1f; letter-spacing: 0; }
.rc p::before, .rc p::after { content: none !important; display: none !important; }
.rc mark { background: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-skip-ink: none; }
.cvGrid .rc { justify-content: flex-start; }
.quotesD .rc { height: 100%; }
@media (max-width: 700px) {
  .costD__ic { width: 44px; height: 44px; margin-bottom: 12px; }
  .costD__ic .ic { width: 21px; height: 21px; }
  .rc__av { width: 42px; height: 42px; font-size: 17px; }
  .rc p { font-size: 16px; }
}
.costD__pts .costD__ic { display: grid; place-items: center; margin-top: 0; font-size: 0; line-height: 0; }
.rv.rc, .cv.rc { justify-content: flex-start; }
.costD__pts .costD__ic { color: var(--accent); }
.costD__pts b { line-height: 1.25; }
@media (max-width: 420px) { .costD__pts b { font-size: 16px; } }

/* ---------- Questions (11 Nov, option 3): all answers showing, two columns, then a call strip ---------- */
.qaD { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(40px, 5vw, 88px); max-width: 1320px; margin-inline: auto; }
.qaD h3 { display: flex; gap: 14px; align-items: flex-start; font-size: 20px; margin: 0 0 10px; }
.qaD h3 i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 13px/30px var(--font-ui, Inter, sans-serif); text-align: center; font-style: normal; margin-top: -2px; }
.qaD p { margin: 0 0 0 44px; color: var(--muted); max-width: 60ch; }
.askD { margin: 56px auto 0; max-width: 1320px; display: flex; align-items: center; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; padding: 24px 28px; border-radius: 22px; background: #EDF4F9; }
.askD p { margin: 0; font-size: 19px; }
.askD .ctas { margin: 0; flex-wrap: wrap; }
#questions .moreD { text-align: center; }

/* ---------- Visit (11 Nov, option 3): Monkey King logo, shopfront + tap-to-open map, where / when / book ---------- */
.visitD__mk { display: block; width: 150px; height: auto; margin: 0 auto 18px; }
.visitD__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.visitD__shop { margin: 0; border-radius: 22px; overflow: hidden; position: relative; aspect-ratio: 4 / 3; }
.visitD__shop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visitD__shop figcaption { position: absolute; left: 16px; bottom: 16px; background: #fff; color: var(--ink); font-weight: 600; font-size: 15px; padding: 10px 16px; border-radius: 999px; }
.mapD { position: relative; display: block; overflow: hidden; border-radius: 22px; background: #e9eef1; aspect-ratio: 4 / 3; isolation: isolate; }
/* Google's place box sits in the frame's top-left: push it above the visible area (map credits stay at the bottom) */
.mapD iframe { position: absolute; left: 0; top: -170px; width: 100%; height: calc(100% + 170px); border: 0; pointer-events: none; }
.mapD__chip { position: absolute; left: 16px; bottom: 34px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); font-weight: 600; font-size: 15px; padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .45); transition: background .2s ease, color .2s ease; }
.mapD__chip .ic { width: 18px; height: 18px; color: var(--accent); }
.mapD:hover .mapD__chip, .mapD:focus-visible .mapD__chip { background: var(--accent); color: #fff; }
.mapD:hover .mapD__chip .ic, .mapD:focus-visible .mapD__chip .ic { color: #fff; }
.visitD__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 44px; }
.visitD__facts h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 19px; }
.visitD__facts h3 .ic { color: var(--accent); width: 22px; height: 22px; }
.visitD__facts p { margin: 0; color: var(--muted); }
.visitD__facts .hours { margin: 0; font-size: 16px; }
.visitD__facts .hours div { max-width: none; }
.visitD__facts .ctas { margin-top: 14px; flex-wrap: wrap; }
.visitD__small { margin-top: 8px !important; font-size: 15px; }
#visit .moreD { text-align: center; margin-top: 36px; }
@media (max-width: 860px) {
  .qaD, .visitD__pair, .visitD__facts { grid-template-columns: 1fr; }
  .qaD { gap: 32px; }
  .qaD h3 { font-size: 18px; }
  .askD { padding: 22px; }
  .askD p { font-size: 17px; }
  .askD .ctas .btn, .visitD__facts .ctas .btn { flex: 1 1 auto; justify-content: center; }
  .visitD__mk { width: 120px; margin: 0 0 16px; }
  .mapD__chip { bottom: 30px; font-size: 14px; padding: 9px 14px; }
  #questions .moreD, #visit .moreD { text-align: left; }
}

/* ---------- Header: mega menu "C" (desktop) + picture drawer (phone), 11 Nov ---------- */
.megaBtn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.megaBtn .ic { width: 16px; height: 16px; transition: transform .2s ease; }
.megaBtn[aria-expanded="true"] { color: var(--accent); }
.megaBtn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nav--mega.mega-open { background: #fff; box-shadow: none; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-radius: 0 0 24px 24px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); padding: 24px 0 30px; }
.mega[hidden] { display: none; }
.mega__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(28px, 3vw, 48px); align-items: start; }
.mega .eyebrow { color: var(--accent); margin-bottom: 8px; }
.mega__links { display: grid; gap: 4px; }
.mega__links a { display: grid; gap: 2px; padding: 10px 12px; margin-inline: -12px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .15s ease; }
.mega__links a:hover, .mega__links a:focus-visible, .mega__links a[aria-current="page"] { background: var(--soft); }
.mega__links b { font-size: 18px; font-weight: 600; }
.mega__links span { color: var(--muted); font-size: 15px; }
.navPic { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 14px; overflow: hidden; background: #eee; }
.navPic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.navPic--one { grid-template-columns: 1fr; }
.navPic i { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 600; font-style: normal; background: rgba(255, 255, 255, .92); color: var(--ink); padding: 3px 8px; border-radius: 999px; }
.navPic i.r { left: auto; right: 8px; background: var(--accent); color: #fff; }
.mega__show { display: block; text-decoration: none; color: inherit; }
.navPic--big { aspect-ratio: 5 / 4; }
.mega__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; }
.mega__cap b { font-size: 17px; font-weight: 600; }
.mega__cap span { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 15px; }
.mega__cap .ic { width: 16px; height: 16px; }
.mega__call { display: grid; gap: 10px; padding: 24px; border-radius: 20px; background: #EDF4F9; }
.mega__call p { margin: 0; }
.mega__call .btn { justify-content: center; min-height: 46px; font-size: 15px; }
.navRate { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--muted); }
.navRate .g-logo { width: 18px; height: 18px; }
.navRate .stars { display: inline-flex; color: #FBBC05; }
.navRate .stars .ic { width: 15px; height: 15px; }
.navRate b { color: var(--ink); }
.mega__call .navRate { margin-top: 4px; }
.menu--drawer { display: none; }
@media (min-width: 961px) { .menu--drawer { display: none !important; } }
@media (max-width: 960px) {
  .mega { display: none !important; }
  .menu.menu--drawer {
    position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 0; border-radius: 0; box-shadow: none;
    background: #fff; transform: translateX(100%); transition: transform .32s ease, visibility 0s linear .32s; visibility: hidden;
  }
  .menu.menu--drawer.is-open { transform: none; visibility: visible; transition: transform .32s ease; }
  .drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px var(--gutter-base, 20px); min-height: 68px; }
  .drawer__top .brand { padding: 0; }
  .menu--drawer .drawer__x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--soft); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
  .drawer__x .ic { width: 20px; height: 20px; }
  .drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gutter-base, 20px) 16px; }
  .drawer__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 8px 0 4px; }
  .menu--drawer a.drawer__row { display: grid; grid-template-columns: 64px 1fr 18px; gap: 14px; align-items: center; padding: 8px 0; font-size: 17px; font-weight: 600; }
  .drawer__row .navPic { width: 64px; height: 64px; border-radius: 12px; }
  .drawer__row > .ic { width: 18px; height: 18px; color: #9a9a9a; }
  .drawer__plain { margin-top: 14px; display: grid; }
  .menu--drawer .drawer__plain a { font-size: 22px; font-weight: 600; padding: 9px 0; }
  .drawer__foot { display: grid; gap: 10px; padding: 14px var(--gutter-base, 20px) calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 24px -20px rgba(0, 0, 0, .25); }
  .drawer__foot .navRate { justify-content: center; }
  .menu--drawer .drawer__foot .btn { margin: 0; width: 100%; justify-content: center; min-height: 50px; font-size: 16px; }
  .menu-open, .menu-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .menu.menu--drawer { transition: none !important; } }
@media (max-width: 960px) { .menu--drawer .drawer__foot .btn { display: flex; align-items: center; gap: 10px; padding: 0 20px; } .menu--drawer .drawer__foot .btn .ic { width: 20px; height: 20px; } }

/* ---------- Footer with icons (11 Nov) ---------- */
.foot--grid { padding-block: 64px 28px; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 64px); align-items: start; }
.foot__brand p { margin-top: 16px; max-width: 34ch; color: var(--muted); }
.foot__h { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink) !important; margin: 0 0 14px; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot__col a, .foot__row { display: inline-flex; align-items: flex-start; gap: 12px; color: var(--ink); text-decoration: none !important; line-height: 1.35; }
.foot__col small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.foot__ic { flex: none; width: 32px; height: 32px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(18, 18, 18, .08); display: grid; place-items: center; color: var(--accent); transition: background .2s ease, color .2s ease, transform .2s ease; }
.foot__ic .ic { width: 16px; height: 16px; }
.foot__col a:hover .foot__ic, .foot__col a:focus-visible .foot__ic { background: var(--accent); color: #fff; transform: translateY(-1px); }
.foot__col a:hover { color: var(--accent); }
.foot__pagelist { gap: 8px !important; }
.foot__pagelist a { color: var(--muted); position: relative; }
.foot__pagelist a:hover { color: var(--ink); }
.foot__base { margin-top: 44px; padding-top: 18px; }
.foot__base .small { color: var(--muted); font-size: 13px; }
@media (max-width: 960px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; gap: 32px; } .foot__pagelist { grid-template-columns: 1fr 1fr; } }

/* ---------- Hover (11 Nov): a laser line under menu links, lifts on cards, zoom on photos ---------- */
.nav--mega .nav__links > a, .nav--mega .megaBtn { position: relative; }
.nav--mega .nav__links > a::after, .nav--mega .megaBtn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(11, 106, 166, 0), var(--accent) 35%, #7cc0ec 100%);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.nav--mega .nav__links > a:hover::after, .nav--mega .nav__links > a:focus-visible::after, .nav--mega .megaBtn:hover::after, .nav--mega .megaBtn[aria-expanded="true"]::after { transform: scaleX(1); }
.nav--mega .megaBtn::after { right: 20px; }
.mega__links b { transition: transform .2s ease, color .2s ease; }
.mega__links a:hover b, .mega__links a:focus-visible b { transform: translateX(4px); color: var(--accent); }
.mega__show .navPic img, .visitD__shop, .kindD .ba__side img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.mega__show:hover .navPic img { transform: scale(1.04); }
.mega__show:hover .mega__cap span .ic, .kindD:hover .link .ic, .moreD a:hover .ic { transform: translateX(4px); }
.mega__cap span .ic, .kindD .link .ic, .moreD a .ic { transition: transform .2s ease; }
.opt-d .btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.opt-d .btn--dark:hover, .opt-d .btn--nav:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(11, 106, 166, .7); }
.opt-d .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.kindD { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.kindD:hover { transform: translateY(-4px); }
.kindD:hover .ba__side img { transform: scale(1.04); }
.kindD .ba__side { overflow: hidden; }
.drawer__row:active, .menu--drawer .drawer__plain a:active { opacity: .6; }

/* ---------- Scroll (11 Nov): a laser sweep across before/afters, a beam before each section label, drifting photos ---------- */
.kindD .ba__pair, .bn .ba__pair { position: relative; }
.kindD .ba__pair::after, .bn .ba__pair::after {
  content: ""; position: absolute; top: -2%; bottom: -2%; left: 0; width: 18%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(124, 192, 236, 0), rgba(124, 192, 236, .5) 45%, #fff 50%, rgba(124, 192, 236, .5) 55%, rgba(124, 192, 236, 0));
  mix-blend-mode: screen; transform: translateX(-120%);
}
.js-reveal .kindD.is-in .ba__pair::after { animation: inkSweep 1.3s cubic-bezier(.4, 0, .2, 1) .25s 1 both; }
.kindD:hover .ba__pair::after, .bn:hover .ba__pair::after { animation: inkSweep2 1.1s cubic-bezier(.4, 0, .2, 1) 1 both; }
@keyframes inkSweep { 0% { opacity: 0; transform: translateX(-120%); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(620%); } }
@keyframes inkSweep2 { 0% { opacity: 0; transform: translateX(-120%); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(620%); } }
.kindsD .kindD:nth-child(2) { transition-delay: .08s; } .kindsD .kindD:nth-child(3) { transition-delay: .16s; }
.opt-d [data-reveal] .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.opt-d [data-reveal] .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(11, 106, 166, .15), var(--accent)); flex: none; }
.js-reveal .opt-d [data-reveal] .eyebrow::before, .js-reveal [data-reveal] .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .7, .2, 1) .15s; }
.js-reveal [data-reveal].is-in .eyebrow::before { transform: scaleX(1); }
.driftIn { scale: 1.1; will-change: transform; }
.visitD__shop { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .kindD .ba__pair::after, .bn .ba__pair::after { display: none; }
  .driftIn { scale: 1; }
  .kindD, .kindD:hover, .kindD:hover .ba__side img, .mega__show:hover .navPic img { transform: none !important; }
}
.js-reveal .kindD.is-in:hover, .kindD:hover { transform: translateY(-4px); transition-delay: 0s; }
@media (max-width: 560px) { .foot--grid .brand__logo { height: 46px; } }

/* ---------- Phone hero fills the first screen (Marcus 11 Nov) ---------- */
@media (max-width: 700px) {
  /* site.js sets --hh so the room + the words panel end exactly at the Call/Text bar; this is the no-JS fallback */
  .heroD .lead { font-size: 16px; line-height: 1.5; }
  .heroD__rest { padding: 20px var(--gutter) 18px; }
  .heroD .ctas { margin-top: 16px; }
  .heroD .ctas .btn--dark { width: 100%; justify-content: center; }
  .heroD .ctas .btn--ghost { display: none; } /* results start right below; the bar already has Call and Text */
  .heroD__proof { margin-top: 14px; }
  /* one laser line, under "chance." only (two lines of underline looked busy) */
  .heroD .hl { background: none; }
  .heroD .hl::after { display: none; }
  .heroD .hl__last { background: var(--beam) left bottom -.1em / calc(100% - .16em) .4em no-repeat; }
  .heroD .hl__last::after { content: ""; display: inline-block; width: .62em; height: .62em; margin-left: -.14em; vertical-align: -.457em; background: var(--spark) center / contain no-repeat; }
  .hero-anim .heroD .hl__last { background-size: 0 .4em; }
  .hero-ready .heroD .hl__last { background-size: calc(100% - .16em) .4em; transition: background-size 1.1s cubic-bezier(.6, 0, .2, 1) 1s; }
}
@media (max-width: 700px) {
  .heroD { --ms: .56; }
  .heroD__proof { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; font-size: 14.5px; white-space: nowrap; }
  .heroD__proof .stars .ic { width: 15px; height: 15px; }
}
/* Phone hero, words ON the room (Marcus 11 Nov): the room's floor colour continues under the words, with a soft fade
   from the photo into it, so the whole first screen reads as one scene. */
@media (max-width: 700px) {
  .heroD { background: #DBDAD7; }
  .heroD::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--hh) - 150px); height: 150px; z-index: 6; pointer-events: none;
    background: linear-gradient(180deg, rgba(219, 218, 215, 0), rgba(219, 218, 215, .85) 60%, #DBDAD7); }
  .heroD__rest { position: relative; z-index: 7; background: transparent; margin-top: calc(var(--hh) - 56px); }
  .heroD .lead { color: #262626; }
}
/* "Does it hurt?" photo on phones: the cooler sits left of centre in its photo, so aim the crop at it */
@media (max-width: 900px) { .comfortD__photo img { object-position: 47% 62%; } }

/* ---------- Quick wins from ChatGPT's review (11 Nov) ---------- */
/* hero: the reason line and the rating were drowned by the headline */
@media (min-width: 701px) {
  .heroD .lead { font-size: clamp(19px, 1.3vw, 24px); color: #1f1f1f; max-width: 34ch; }
  .heroD__proof { font-size: 17.5px; gap: 10px; }
  .heroD__proof .stars .ic { width: 21px; height: 21px; }
  .heroD__proof .g-logo { width: 22px; height: 22px; }
}
/* small text up a step: captions, reviews, cards, footer */
.bn figcaption, .resultsD .bn figcaption { font-size: 16px; line-height: 1.5; }
.rc p, .cv.rc p, .cv--feat.rc p, .rv.rc p { font-size: 17.5px; }
.kindD p, .tl__card p, .costD__pts span, .lz__pts p, .lz__pts span { font-size: 16.5px; }
.foot--grid { font-size: 16px; }
.foot__col small { font-size: 14.5px; }
.foot__pagelist { font-size: 15.5px; }
.foot__base .small { font-size: 14px; }
.comfortD__photo figcaption { font-size: 13px; }
/* FAQ page: a wider reading column in the middle, not a narrow one on the left */
.faqD--wide { max-width: 980px; margin-inline: 0; }

/* ---------- ChatGPT's remaining wins (11 Nov) ---------- */
/* results: three whole cards across a laptop screen, bigger */
.resultsD .mq .bn { width: clamp(300px, calc((min(100vw, 1440px) - 2 * var(--gutter-base) - 48px) / 3.15), 470px); }
.resultsD .bn__n strong { font-size: clamp(56px, 4.4vw, 72px); }
/* cost: consultation + button straight under the heading, the four details as a quieter row below */
.costD__ctas--first { justify-content: center; margin: 0 0 clamp(28px, 3vw, 40px); }
.costD__pts--small li { padding: 18px 18px 20px; }
.costD__pts--small b { font-size: 16px; }
.costD__pts--small span { font-size: 15px; }
/* tattoo removal page: a real before/after where the laser used to be */
.pageD__media--pair { margin: 0; }
.pageD__media--pair .ba__pair { border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(14, 42, 63, .06), 0 24px 48px -30px rgba(14, 42, 63, .5); }
.pageD__media--pair figcaption { margin-top: 14px; font-size: 15.5px; color: var(--muted); max-width: 52ch; }
.pageD__media--pair figcaption b { color: var(--accent); margin-right: 4px; }
/* Meet Scott: two roomier columns of reviews with bigger text */
.quotesD--reviews { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; max-width: 1100px; margin-inline: auto; }
.quotesD--reviews .rc p { font-size: 18px; line-height: 1.6; }
@media (max-width: 760px) { .quotesD--reviews { grid-template-columns: 1fr !important; } }

/* ---------- Scott's photo (restored from his old poster, 11 Nov) ---------- */
.scottD__visual { position: relative; padding: 0 0 36px 36px; }
.scottD__photo { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .6); }
.scottD__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block; }
.scottD__quote--over { position: absolute; left: 0; bottom: 0; max-width: min(340px, 70%); margin: 0; padding: 22px 24px; }
.scottD__quote--over p { font-size: clamp(20px, 1.6vw, 26px) !important; line-height: 1.25; }
.scottD__quote--over .scottD__mark { font-size: 46px; height: 24px; }
.pageD__media--scott { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -32px rgba(14, 42, 63, .55); }
.pageD__media--scott img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block; }
@media (max-width: 860px) { .scottD__visual { padding: 0 0 28px 16px; } .scottD__quote--over { max-width: 80%; padding: 18px 20px; } }
/* the review card sits over his coat, not over the laser on the tattoo */
.scottD__visual { padding: 0 36px 36px 0; }
.scottD__quote--over { left: auto; right: 0; }
@media (max-width: 860px) { .scottD__visual { padding: 0 16px 28px 0; } }
/* tattoo removal page: the before/after as two tall photos, about the height of the text beside it */
.pageD__media--tall { width: 100%; max-width: 560px; justify-self: end; }
.pageD__media--tall .ba__pair { aspect-ratio: auto !important; height: auto !important; }
.pageD__media--tall .ba__side { aspect-ratio: 4 / 5; height: auto !important; }
.pageD__media--tall .ba__side img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .scottD__visual { padding: 0; }
  .scottD__quote--over { position: relative; right: auto; bottom: auto; margin: -36px 12px 0 auto; max-width: 88%; }
  .scottD__quote--over p { font-size: 21px !important; }
}

/* ---------- Filling empty space (11 Nov): words beside one picture; the consultation band on his room ---------- */
.splitD { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.splitD .wordsD { grid-template-columns: 1fr !important; gap: 22px; }
.splitD__pic { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 1px 2px rgba(14, 42, 63, .06), 0 26px 52px -30px rgba(14, 42, 63, .5); }
.splitD__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.splitD__pic--cryo img { object-position: 47% 62%; }
.pageD__media--gear img { aspect-ratio: 4 / 5; object-fit: cover; }
.ctaD--room { position: relative; overflow: hidden; isolation: isolate; background: #DCD9DA !important; min-height: clamp(420px, 34vw, 560px); display: flex; align-items: center; }
.ctaD__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; z-index: -1; }
.ctaD--room .ctaD__in { text-align: left; align-items: flex-start; max-width: none; }
.ctaD--room .ctaD__in > * { max-width: 520px; }
.ctaD--room .ctaD__in .ctas { justify-content: flex-start; }
.ctaD--room h2, .ctaD--room .lead { color: #121212 !important; }
@media (max-width: 860px) {
  .splitD { grid-template-columns: 1fr; gap: 28px; }
  .ctaD--room { display: block; min-height: 0; padding-bottom: 0; }
  .ctaD__room { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; object-position: 78% 50%; order: 2; margin-top: 28px; }
  .ctaD--room { display: flex; flex-direction: column; }
  .ctaD--room .ctaD__in { order: 1; }
}
.ctaD--room > .wrap { width: 100%; }
/* the whole laser shows at the band's height (no cropping its arm or wheels); its soft wall fades into the band colour */
@media (min-width: 861px) {
  .ctaD--room { background: #D6D4D7 !important; }
  .ctaD__room { left: auto; right: 0; width: auto; max-width: 78%; height: 100%; aspect-ratio: 2752 / 1536; object-fit: cover; object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
}

/* ---------- Inner-page tops (Marcus 11 Nov, option 1): words and picture 50/50, headline a step smaller ---------- */
@media (min-width: 961px) {
  .pageD__in--media { grid-template-columns: 1fr 1fr; align-items: center; }
  .pageD h1 { font-size: clamp(36px, 3.4vw, 54px); }
  .pageD__answer { font-size: 18px; max-width: 46ch; }
  .pageD__in--media .pageD__media { max-width: 640px; justify-self: stretch; }
  .pageD { padding-bottom: clamp(40px, 4vw, 64px); }
}

/* ---------- Before and after header (ChatGPT's layout, Marcus 11 Nov): laser left, words centred, Scott right ---------- */
.resultsD { padding-top: 0 !important; }
.resultsD__stage { position: relative; padding-top: clamp(56px, 6vw, 96px); padding-bottom: 8px; overflow: hidden; }
.resultsD__stage .resultsD__head { position: relative; z-index: 2; display: flex !important; flex-direction: column; align-items: center !important; text-align: center !important; max-width: 760px; }
.resultsD__stage .resultsD__head .lead { margin: 16px auto 0 !important; max-width: 54ch; }
.resultsD__laser { position: absolute; left: max(-40px, calc((100vw - 1440px) / 2 - 20px)); bottom: -14%; height: 112%; width: auto; z-index: 1; filter: drop-shadow(0 30px 30px rgba(14, 42, 63, .18)); pointer-events: none; }
.resultsD__scott { position: absolute; right: 0; top: 0; height: 100%; width: min(36vw, 620px); object-fit: cover; object-position: 72% 30%; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
.trustRow { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 32px; }
.trustRow li { display: flex; align-items: center; gap: 10px; text-align: left; }
.trustRow li > svg { width: 24px; height: 24px; flex: none; color: var(--accent); }
.trustRow .g-logo { width: 24px; height: 24px; }
.trustRow b { font-size: 16px; color: var(--ink); margin-right: 6px; }
.trustRow small { display: block; font-size: 13.5px; color: var(--muted); }
.trustRow .stars { display: inline-flex; color: #FBBC05; vertical-align: -2px; } .trustRow .stars .ic { width: 14px; height: 14px; }
@media (max-width: 1100px) { .resultsD__laser { opacity: .35; } .resultsD__scott { opacity: .35; } }
@media (max-width: 760px) { .resultsD__laser, .resultsD__scott { display: none; } .trustRow { gap: 12px 20px; } }
.resultsD__stage .resultsD__head { width: min(640px, 92vw); max-width: none !important; padding-inline: 0 !important; margin-inline: auto !important; }
.resultsD__laser { height: min(112%, 600px); left: max(-30px, calc((100vw - 1500px) / 2)); }
.resultsD__scott { width: min(32vw, 600px); }
@media (max-width: 760px) {
  .trustRow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
  .trustRow li { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .trustRow b { font-size: 14.5px; margin: 0; display: block; }
  .trustRow small { font-size: 12px; line-height: 1.3; }
  .trustRow .stars { display: none; }
}
/* the laser in its room, fading into the band, the same way as Scott's photo on the right */
.resultsD__laser--room { left: 0 !important; bottom: auto !important; top: 0; height: 100% !important; width: min(32vw, 600px); object-fit: cover; object-position: 96% 50%; filter: none;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 42%); mask-image: linear-gradient(270deg, transparent 0, #000 42%); }
/* laser further to the left edge, clear of the words (Marcus 11 Nov) */
.resultsD__laser--room { left: -9vw !important; width: min(38vw, 680px); object-position: 100% 50%; }

/* ---------- Service page template (preview 11 Nov) ---------- */
/* drag-to-compare before/after */
.cmp { margin: 0; justify-self: stretch; max-width: 560px; }
.cmp__box { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #e9e9e7; box-shadow: 0 1px 2px rgba(14, 42, 63, .06), 0 26px 52px -30px rgba(14, 42, 63, .55); touch-action: pan-y; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.cmp__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cmp__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 0 18px rgba(124, 192, 236, .8); pointer-events: none; }
.cmp__knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45); }
.cmp__knob .ic { width: 22px; height: 22px; }
.cmp__tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255, 255, 255, .95); color: var(--ink); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.cmp__tag--after { left: auto; right: 14px; background: var(--accent); color: #fff; }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.cmp__range:focus-visible + * , .cmp__box:focus-within .cmp__knob { outline: 3px solid var(--accent); outline-offset: 2px; }
.cmp figcaption { margin-top: 14px; font-size: 15.5px; color: var(--muted); max-width: 52ch; }
.cmp figcaption b { color: var(--accent); margin-right: 4px; }
/* at a glance: big numbers that count up */
.glance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: center; }
.glance li { display: grid; gap: 6px; padding: 26px 16px; border-radius: 20px; background: #EDF4F9; }
.glance b { font-size: clamp(40px, 4.4vw, 64px); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--accent); }
.glance span { color: var(--muted); font-size: 15.5px; }
.glance b span { color: inherit; font-size: inherit; }
/* results rail on a service page keeps its own padding */
.resultsD--page { padding-block: clamp(72px, 7vw, 112px) !important; }
/* comfort strip: image | words | image */
.trioD__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.trioD__words { text-align: center; display: flex; flex-direction: column; align-items: center; }
.trioD__words .eyebrow { color: var(--accent); }
.trioD__words .scottSays { text-align: left; margin-top: 18px; }
.trioD__pic { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 1px 2px rgba(14, 42, 63, .06), 0 26px 52px -30px rgba(14, 42, 63, .5); }
.trioD__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.trioD__pic:hover img { transform: scale(1.04); }
.js-reveal .trioD__pic:first-child { transform: translateX(-28px); } .js-reveal .trioD__pic:last-child { transform: translateX(28px); }
.js-reveal .trioD__pic.is-in { transform: none; }
/* reviews rise in one after another */
.rise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.js-reveal .rise .rc { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js-reveal .rise.is-in .rc { opacity: 1; transform: none; }
.js-reveal .rise.is-in .rc:nth-child(2) { transition-delay: .12s; } .js-reveal .rise.is-in .rc:nth-child(3) { transition-delay: .24s; }
.rise .rc { background: #fff; box-shadow: 0 1px 2px rgba(14, 42, 63, .06), 0 18px 40px -26px rgba(14, 42, 63, .5); }
@media (max-width: 860px) {
  .glance { grid-template-columns: 1fr 1fr; gap: 12px; }
  .trioD__in { grid-template-columns: 1fr 1fr; }
  .trioD__words { grid-column: 1 / -1; order: -1; }
  .rise { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .js-reveal .trioD__pic, .js-reveal .rise .rc { transform: none !important; opacity: 1 !important; } }
.cmp { max-width: 480px !important; }
.glance b.glance__word { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; align-self: center; }
.glance li { align-content: center; }

/* ---------- Remaining motion (11 Nov) ---------- */
/* the results header photos slide in from their own side */
.js-reveal [data-slide] { opacity: 0; transition: opacity 1s ease, translate 1.1s cubic-bezier(.2, .7, .2, 1); }
.js-reveal [data-slide="left"] { translate: -48px 0; }
.js-reveal [data-slide="right"] { translate: 48px 0; }
.js-reveal [data-slide].is-in { opacity: 1; translate: 0 0; }
/* Scott's review card slides up over his photo */
.js-reveal .scottD__visual .scottD__quote--over { opacity: 0; translate: 0 34px; transition: opacity .8s ease .35s, translate .9s cubic-bezier(.2, .7, .2, 1) .35s; }
.js-reveal .scottD__visual.is-in .scottD__quote--over { opacity: 1; translate: 0 0; }
/* items inside a block come in one after another: cost facts, questions, results grids, review grids, FAQ lists */
.js-reveal .costD__pts li, .js-reveal .qaD__item, .js-reveal .gridBA > *, .js-reveal .quotesD[data-reveal] > .rc, .js-reveal .faqD .faq details {
  opacity: 0; translate: 0 22px; transition: opacity .6s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
.js-reveal .costD__pts.is-in li, .js-reveal .qaD.is-in .qaD__item, .js-reveal .gridBA.is-in > *, .js-reveal .quotesD[data-reveal].is-in > .rc, .js-reveal .faqD.is-in .faq details { opacity: 1; translate: 0 0; }
.js-reveal :is(.costD__pts li, .qaD__item, .gridBA > *, .quotesD[data-reveal] > .rc, .faqD .faq details):nth-child(2) { transition-delay: .07s; }
.js-reveal :is(.costD__pts li, .qaD__item, .gridBA > *, .quotesD[data-reveal] > .rc, .faqD .faq details):nth-child(3) { transition-delay: .14s; }
.js-reveal :is(.costD__pts li, .qaD__item, .gridBA > *, .quotesD[data-reveal] > .rc, .faqD .faq details):nth-child(4) { transition-delay: .21s; }
.js-reveal :is(.costD__pts li, .qaD__item, .gridBA > *, .quotesD[data-reveal] > .rc, .faqD .faq details):nth-child(5) { transition-delay: .28s; }
.js-reveal :is(.costD__pts li, .qaD__item, .gridBA > *, .quotesD[data-reveal] > .rc, .faqD .faq details):nth-child(n+6) { transition-delay: .35s; }
/* the laser sweep on every results-page before/after when you hover it */
.gridBA .ba__pair { position: relative; }
.gridBA .ba__pair::after { content: ""; position: absolute; top: -2%; bottom: -2%; left: 0; width: 18%; pointer-events: none; opacity: 0; transform: translateX(-120%);
  background: linear-gradient(90deg, rgba(124, 192, 236, 0), rgba(124, 192, 236, .5) 45%, #fff 50%, rgba(124, 192, 236, .5) 55%, rgba(124, 192, 236, 0)); mix-blend-mode: screen; }
.gridBA > *:hover .ba__pair::after { animation: inkSweep2 1.1s cubic-bezier(.4, 0, .2, 1) 1 both; }
/* the booking band's laser drifts (the photo is cropped by the band, so a little scale keeps its edges hidden) */
.ctaD__room[data-drift] { scale: 1.08; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-slide], .js-reveal .scottD__visual .scottD__quote--over, .js-reveal .costD__pts li, .js-reveal .qaD__item, .js-reveal .gridBA > *, .js-reveal .quotesD[data-reveal] > .rc, .js-reveal .faqD .faq details { opacity: 1 !important; translate: none !important; }
  .gridBA .ba__pair::after { display: none; } .ctaD__room[data-drift] { scale: 1; }
}

/* 11 Nov (Marcus: "centre the titles, feels so random"): every title that sits ABOVE its content is centred,
   the same as the homepage ones. Titles that sit BESIDE a photo (split rows, What to expect, Scott, the booking band) stay left. */
.headD { margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.headD .lead { max-width: 58ch; }
.splitD__words .headD { margin-inline: 0; align-items: flex-start; text-align: left; }
.headD + .faqD { margin-inline: auto; max-width: 820px; }
.headD ~ .moreD { text-align: center; }
.splitD__words .headD ~ .moreD { text-align: left; }
@media (max-width: 700px) {
  /* phones: every heading starts on the left, all the way down (as before) */
  .opt-d .headD { align-items: flex-start; text-align: left; margin-inline: 0; }
  .opt-d .headD ~ .moreD { text-align: left; }
}
/* a short last row of results sits in the middle, under the centred title */
.gridBA { display: flex; flex-wrap: wrap; justify-content: center; }
.gridBA > * { flex: 0 1 calc((100% - 52px) / 3); min-width: 0; }
@media (max-width: 1060px) { .gridBA > * { flex-basis: calc((100% - 26px) / 2); } }
@media (max-width: 640px) { .gridBA > * { flex-basis: 100%; } }
/* Visit page: each detail row leads with a line icon in a soft blue circle */
.visitD__h { display: flex; align-items: center; gap: 14px; }
.visitD__h .ic { width: 30px; height: 30px; color: var(--accent); }
.detailsD--ic { gap: 20px; margin-top: 34px; }
.detailsD--ic div { grid-template-columns: 44px 120px 1fr; align-items: start; gap: 0 16px; }
.detailsD__ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 106, 166, .09); color: var(--accent); }
.detailsD__ic .ic { width: 20px; height: 20px; }
.detailsD--ic dt, .detailsD--ic dd { padding-top: 10px; }
@media (max-width: 520px) {
  .detailsD--ic div { grid-template-columns: 44px 1fr; gap: 0 14px; }
  .detailsD--ic .detailsD__ic { grid-row: span 2; }
  .detailsD--ic dt { padding-top: 2px; } .detailsD--ic dd { padding-top: 2px; grid-column: 2; }
}
/* Visit page hours: day on the left, time hard right, same width as the detail rows */
.visitD .visitD__h + .hours { max-width: 520px; margin-top: 18px; }
.visitD .visitD__h + .hours div { display: flex; justify-content: space-between; gap: 16px; max-width: none; }
.visitD .visitD__h + .hours dd { text-align: right; margin: 0; }
/* results header photos (Marcus 11 Nov: "this fade isnt even"): mirror images of each other.
   Same width, both flush to their edge, same inner fade, and both soften at the top and bottom too. */
.resultsD__stage .resultsD__laser--room, .resultsD__stage .resultsD__scott { top: 0 !important; bottom: auto !important; height: 100% !important; width: min(31vw, 620px) !important; filter: none; }
.resultsD__stage .resultsD__laser--room { left: 0 !important; object-position: 100% 50%;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.resultsD__stage .resultsD__scott { right: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 1600px) and (min-width: 1101px) { .resultsD__stage .resultsD__head { width: min(580px, 41vw) !important; } .resultsD__stage .trustRow { flex-wrap: nowrap; gap: 14px 22px; } .resultsD__stage .trustRow li { white-space: nowrap; } }
/* 12 Nov: Scott's real portraits are tall; frame his face in the wide boxes, and the shopfront shows its whole sign */
.scottD__photo img, .pageD__media--scott img { object-fit: cover; object-position: 50% 24%; }
.comfortD__photo img, .trioD__pic img { object-fit: cover; object-position: 50% 30%; }
.visitD__shop img { object-position: 50% 20%; }
@media (max-width: 700px) { .comfortD__photo img { aspect-ratio: 4 / 5; height: auto !important; width: 100%; object-position: 50% 45%; } }
/* the Scott shopfront: less zoom so the whole sign stays in */
.visitD__shop .driftIn { scale: 1.03; }
.visitD__shop img { object-position: 50% 30%; }
/* 12 Nov (Marcus: "do that fade thing like the landing"): the Does it hurt band is built like the Before and after header.
   Both photos sit flush to the screen edges, full height, and fade into the band toward the words. */
@media (min-width: 901px) {
  .trioD { position: relative; overflow: hidden; min-height: clamp(460px, 36vw, 600px); display: flex; align-items: center; }
  .trioD__in { display: block; position: static; width: 100%; }
  .trioD__words { position: relative; z-index: 2; width: min(560px, 40vw); margin-inline: auto; }
  .trioD__pic { position: absolute; top: 0; height: 100%; width: min(31vw, 620px); aspect-ratio: auto; border-radius: 0; box-shadow: none; z-index: 1; }
  .trioD__pic:first-child { left: 0;
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
    mask-image: linear-gradient(270deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .trioD__pic:last-child { right: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .trioD__pic:hover img { transform: none; }
  .trioD__pic:first-child img { object-position: 40% 30%; }
}
@media (min-width: 901px) and (max-width: 1100px) { .trioD__pic { opacity: .4; } }
@media (min-width: 901px) {
  .trioD__pic:first-child img { object-position: 40% 0; }
  .trioD { padding-top: clamp(40px, 4vw, 64px); }
}
@media (min-width: 901px) and (max-width: 1600px) { .trioD__words { width: min(480px, 36vw); } }
/* homepage Does it hurt: Scott's photo runs to the left screen edge and fades into the band, like the Before and after header */
@media (min-width: 901px) {
  .comfortD { overflow: hidden; }
  .comfortD__in { position: relative; min-height: clamp(480px, 38vw, 620px); }
  .comfortD__photo { align-self: stretch; }
  .comfortD__photo img { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: calc(50vw - 50% + 40%); height: 100% !important; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; object-position: 40% 0;
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
    mask-image: linear-gradient(270deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .comfortD__photo figcaption { display: none; }
  .comfortD__text { position: relative; z-index: 2; }
}
@media (min-width: 901px) {
  .comfortD__in { min-height: clamp(580px, 46vw, 740px); }
  .comfortD__photo img { width: calc(50vw - 50% + 36%); object-position: 45% 45%; }
}

/* About: Scott's story + why clients trust him (12 Nov) */
.storyD { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.storyD .lead { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.65; color: #2b2b2b; max-width: none; }
.trustD { margin-top: clamp(20px, 2.4vw, 36px); }
.trustD__quote { max-width: 560px; margin: clamp(24px, 3vw, 44px) auto 0; }
.trustD__quote { text-align: center; }
.trustD__quote blockquote { margin: 0; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.45; letter-spacing: -.015em; color: #1d1d1d; }
.trustD__quote figcaption { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 700px) { .costD__pts.trustD { grid-template-columns: 1fr; } .costD__pts.trustD li { padding: 20px 22px; } .trustD__quote { text-align: left; } }

/* About story, take 2 (Marcus 12 Nov: option 1 layout, smiling photo). Overrides the first take above. */
.storyD { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; max-width: 1180px; margin: 0 auto; text-align: left; }
.storyD__pic { margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; }
.storyD__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; display: block; }
.storyD__words .eyebrow { margin-bottom: 10px; }
.storyD__words h2 { text-align: left; margin: 0 0 18px; }
.storyD__text { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.7; color: #333; margin: 0; }
.storyD__pts { list-style: none; padding: 0; margin: clamp(28px, 3vw, 40px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.storyD__pts li { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-content: start; }
.storyD__ic { grid-row: span 2; width: 44px; height: 44px; border-radius: 999px; background: #E7F0F7; color: var(--accent); display: grid; place-items: center; }
.storyD__ic .ic { width: 21px; height: 21px; stroke-width: 1.6; }
.storyD__pts b { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.storyD__pts li > span:last-child { font-size: 15px; line-height: 1.5; color: #555; margin-top: 3px; }
.storyD__quote { grid-column: 1 / -1; text-align: center; margin: clamp(20px, 3vw, 48px) auto 0; max-width: 760px; }
.storyD__quote blockquote { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.4; letter-spacing: -.02em; color: #1d1d1d; }
.storyD__quote figcaption { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 860px) { .storyD { grid-template-columns: 1fr; } .storyD__pts { grid-template-columns: 1fr; gap: 20px; } .storyD__quote { text-align: left; } }

/* Homepage result cards: short status instead of the quoted Instagram caption (Marcus 12 Nov) */
.bn figcaption.bn__status { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; font-style: normal; color: #1d1d1d; line-height: 1.3; }
.bn figcaption.bn__status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 99px; background: var(--accent); }

/* Homepage Does it hurt, take 2 (Marcus 12 Nov picked "fades only into the text"): photo fills the left half
   top to bottom of the band, only its right edge melts into the text. */
@media (min-width: 901px) {
  .comfortD { padding-top: 0; }
  .comfortD__in { min-height: clamp(560px, 36vw, 700px); }
  .comfortD__photo img { top: 0; bottom: 0; width: 50vw; object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 72%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
}

/* ---------- Contact form on /visit/#message (14 Nov): words left, the form right; one column on phones ---------- */
.formD { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5.5vw, 96px); align-items: start; }
.formD__intro h2 { margin-bottom: 16px; }
.formD__intro .lead { color: #394B57; }
.formD__alt { margin: 22px 0 0; display: flex; gap: 10px; align-items: flex-start; color: #394B57; font-size: 16.5px; line-height: 1.5; }
.formD__alt .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); flex: none; }
.formD__alt a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.formD__alt a:hover { text-decoration: underline; }
.formD__form { display: grid; gap: 22px; min-width: 0; }
.fd { display: grid; gap: 8px; min-width: 0; }
.fd__l { font-weight: 600; font-size: 15px; color: var(--ink); padding: 0; }
.fd input[type="text"], .fd input[type="tel"], .fd input[type="email"], .fd textarea {
  width: 100%; box-sizing: border-box; margin: 0; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background: #fff;
  border: 1px solid #CBD7E1; border-radius: 14px; padding: 13px 16px; min-height: 52px;
  transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none; }
.fd textarea { min-height: 136px; resize: vertical; line-height: 1.55; }
.fd textarea::placeholder { color: #8695A1; }
.fd input:hover, .fd textarea:hover { border-color: #9FB5C6; }
.fd input:focus, .fd textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11, 106, 166, .18); }
.fd [aria-invalid="true"] { border-color: #B42318 !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.fd__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.fd__row .fd__hint { grid-column: 1 / -1; }
.fd__hint { margin: 0; font-size: 14px; line-height: 1.45; color: #5B6770; }
.fd__topics { border: 0; padding: 0; margin: 0; min-width: 0; }
.fd__topics legend { margin-bottom: 10px; }
/* the four choices as an even 2 x 2 grid (a row of 3 + 1 on its own looked loose; one per line on phones looked ragged) */
.fd__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chip { position: relative; display: flex; min-width: 0; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip > span { display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; line-height: 1.25; min-height: 46px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #CBD7E1;
  background: #fff; font-size: 15px; font-weight: 500; color: var(--ink); transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.chip:hover > span { border-color: #9FB5C6; }
.chip input:checked + span { border-color: var(--accent); background: #EEF4F9; color: var(--accent-dark); }
.chip input:focus-visible + span { outline: 3px solid rgba(11, 106, 166, .35); outline-offset: 2px; }
.fd__files { display: grid; gap: 10px; min-width: 0; }
.drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px; border: 1.5px dashed #A9C0D1; border-radius: 16px; background: #fff; transition: border-color .15s ease, background-color .15s ease; }
.drop.is-over { border-color: var(--accent); background: #EEF4F9; }
.drop__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.drop__btn { cursor: pointer; color: var(--ink); border-color: rgba(18, 18, 18, .3); min-height: 48px; }
.drop__btn .ic { width: 20px; height: 20px; color: var(--accent); }
.drop__input:focus-visible + .drop__btn { outline: 3px solid rgba(11, 106, 166, .35); outline-offset: 2px; }
.drop__or { color: #5B6770; font-size: 15px; }
@media (hover: none) { .drop__or { display: none; } }
.thumbs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.thumbs:empty { display: none; }
.thumb { display: grid; grid-template-columns: 52px minmax(0, 1fr) 36px; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border-radius: 14px; background: #EEF4F9; }
.thumb__pic { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #DCE8F1; display: grid; place-items: center; }
.thumb__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb__pic .ic { width: 22px; height: 22px; color: var(--accent); }
.thumb__txt { display: grid; min-width: 0; }
.thumb__name { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb__size { font-size: 13px; color: #5B6770; }
.thumb__x { width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.thumb__x .ic { width: 16px; height: 16px; }
.thumb__x:hover, .thumb__x:focus-visible { background: var(--accent); color: #fff; }
/* the spam trap: bots fill every field; display:none so Chrome's autofill never fills it for a real person */
.fd__trap { display: none !important; }
.fd__err { margin: 0; padding: 12px 16px; border-radius: 12px; background: #FDEEEC; color: #8A1C12; font-size: 15px; line-height: 1.45; }
.fd__err[hidden], .fd__progress[hidden], .formD__done[hidden], .formD__form[hidden] { display: none; }
.fd__progress { display: grid; gap: 8px; }
.fd__bar { display: block; height: 8px; border-radius: 99px; background: #E3ECF3; overflow: hidden; }
.fd__bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .25s linear; }
.fd__ptext { font-size: 14px; color: #394B57; }
.fd__send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.fd__privacy { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: #5B6770; max-width: 44ch; }
.fd__privacy .ic { width: 17px; height: 17px; margin-top: 1px; flex: none; color: var(--accent); }
/* while uploading: fields fade and stop taking clicks (not the chips' own radio dots: those stay invisible) */
.formD__form.is-sending .fd input, .formD__form.is-sending .fd textarea, .formD__form.is-sending .chip > span, .formD__form.is-sending .drop, .formD__form.is-sending .thumb__x { opacity: .6; }
.formD__form.is-sending .fd, .formD__form.is-sending .chip, .formD__form.is-sending .drop, .formD__form.is-sending .thumb__x { pointer-events: none; }
.formD__form.is-sending [data-submit] { pointer-events: none; opacity: .75; }
.formD__done { grid-column: 2; display: grid; justify-items: start; gap: 10px; padding: clamp(28px, 3vw, 44px); border-radius: 22px; background: #EEF4F9; outline: none; }
.formD__done h3 { margin: 6px 0 0; font-size: clamp(22px, 1.8vw, 28px); }
.formD__done p { margin: 0; color: #394B57; font-size: 17px; line-height: 1.55; max-width: 48ch; }
.formD__check { width: 52px; height: 52px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.formD__check .ic { width: 26px; height: 26px; stroke-width: 2.4; }
/* the booking band and the homepage Visit box: a quiet link to the form under Call / Text (a third pill wrapped onto its own row) */
.visitD__msg, .ctaD__msg, .visitD__facts .visitD__msg { margin: 20px 0 0; }
.ctaD__msg .link { color: var(--accent); }
.ctaD__msg .link .ic { width: 18px; height: 18px; }
.visitD__msg .link { color: var(--accent); }
.visitD__msg .link .ic { width: 18px; height: 18px; }
.sentD__in { max-width: 720px; margin: 0 auto; display: grid; justify-items: center; text-align: center; gap: 18px; padding-block: clamp(40px, 6vw, 96px); }
.sentD__in h1 { font-size: clamp(32px, 3.4vw, 52px); margin: 0; }
.sentD__in .ctas { justify-content: center; margin: 8px 0 0; }
@media (max-width: 900px) {
  .formD { grid-template-columns: 1fr; gap: 28px; }
  .formD__done { grid-column: auto; }
}
@media (max-width: 560px) {
  .fd__row { grid-template-columns: 1fr; }
  .fd__send .btn { width: 100%; }
  .drop { padding: 12px; }
  .drop__btn { width: 100%; }
}

/* ---------- More treatments (14 Nov): two menu groups, icon tiles, "Coming soon", 2–3 step timelines,
   homepage links to the other treatments, a Treatments footer column, wrapping form choices ---------- */
.mega__in { grid-template-columns: minmax(0, 9fr) minmax(0, 3.3fr); }
.mega__groups { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: clamp(24px, 2.4vw, 40px); align-items: start; }
.mega__side { display: grid; gap: 16px; align-content: start; }
.mega__side .mega__call { padding: 20px; gap: 8px; }
.mega__side .mega__call .btn { min-height: 44px; }
@media (max-width: 1239px) { .mega__show { display: none; } }
.soonTag { display: inline-block; vertical-align: .2em; margin-left: 8px; padding: 4px 9px; border-radius: 999px; background: #EDF4F9; color: var(--accent-dark); font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; font-style: normal; white-space: nowrap; }
.soonTag--page { margin: 0 0 16px; vertical-align: baseline; font-size: 12px; padding: 6px 11px; }
.pageD__soon { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; color: var(--accent-dark); font-weight: 500; max-width: 46ch; }
.pageD__soon .ic { width: 20px; height: 20px; margin-top: 3px; }
@media (max-width: 960px) { .drawer__label--next { margin-top: 20px; } }
@media (min-width: 701px) {
  .tl--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; margin-inline: auto; }
  .tl--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) and (min-width: 701px) { .tl--n3 .tl__track { display: block; } }
@media (min-width: 1101px) { .foot__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .7fr); column-gap: clamp(24px, 3vw, 48px); } }
@media (max-width: 1100px) and (min-width: 961px) { .foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }
.fd__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.fd__chips .chip { flex: 0 1 auto; }
.fd__chips .chip > span { white-space: nowrap; padding-inline: 18px; }
.mega__cap b span { display: inline; color: inherit; font-size: inherit; font-weight: inherit; }
@media (max-width: 560px) {
  .fd__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd__chips .chip > span { white-space: normal; padding-inline: 12px; }
  .fd__chips .chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* three facts (Meet Scott on the new pages): three columns, the last one full width on phones */
.glance:has(> li:last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
@media (max-width: 860px) { .glance:has(> li:last-child:nth-child(3)) { grid-template-columns: 1fr 1fr; } .glance > li:last-child:nth-child(3) { grid-column: 1 / -1; } }
/* Menu in three groups, a picture + name per treatment (Marcus picked option 2, 14 Nov) */
.mega__groups--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__pics { display: grid; gap: 4px; align-content: start; }
.megaPic { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 10px; margin-inline: -10px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .15s ease; }
.megaPic:hover, .megaPic:focus-visible { background: var(--soft); }
.megaPic .navPic { width: 60px; height: 60px; border-radius: 12px; }
.megaPic b { font-size: 17px; font-weight: 600; line-height: 1.3; transition: color .2s ease; }
.megaPic:hover b, .megaPic:focus-visible b { color: var(--accent); }
.mega__hurt { margin-top: 4px; font-weight: 600; justify-self: start; }
.megaPic .soonTag { display: block; width: fit-content; margin: 5px 0 0; vertical-align: baseline; }
@media (max-width: 1239px) { .mega__pics .eyebrow { font-size: 12px; letter-spacing: .08em; } }
/* the carbon cream on the facial page (14 Nov) */
.productD { margin: clamp(44px, 5vw, 72px) auto 0; max-width: 360px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.productD img { width: 100%; height: auto; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 24px 48px -28px rgba(0, 0, 0, .35); }
.productD figcaption { color: var(--muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 700px) { .productD { max-width: 240px; } }
/* the treatment dropdown in the contact form (14 Nov), styled like the text fields, with its own arrow */
.fd select { width: 100%; box-sizing: border-box; margin: 0; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6AA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px 18px;
  border: 1px solid #CBD7E1; border-radius: 14px; padding: 13px 48px 13px 16px; min-height: 52px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none; }
.fd select:hover { border-color: #9FB5C6; }
.fd select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11, 106, 166, .18); }
.fd select:has(option[value=""]:checked) { color: #8695A1; }
.fd select option, .fd select optgroup { color: var(--ink); }
.formD__form.is-sending .fd select { opacity: .6; }
/* Homepage cards: all 8 treatments in one grid (Marcus picked option 1, 14 Nov) */
.kindD__pic { margin: 0; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: #e9e9e7; }
.kindD__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.kindD:hover .kindD__pic img { transform: scale(1.04); }
.kindsD--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kindsD--8 .kindD h3 { font-size: clamp(19px, 1.35vw, 22px); }
.kindsD--8 .kindD p { font-size: 15px; }
@media (max-width: 1100px) and (min-width: 701px) {
  .kindsD--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .kindsD--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kindsD--8 .kindD p, .kindsD--8 .kindD .link { display: none; }
  .kindsD--8 .kindD h3 { font-size: 16px; margin-top: 10px; }
  .kindsD--8 .kindD { padding: 8px 8px 12px !important; }
  .kindsD--8 .kindD .ba__pair, .kindsD--8 .kindD__pic { border-radius: 14px; aspect-ratio: 1 / 1; }
}
.kindD h3 { overflow-wrap: break-word; hyphens: manual; }
/* ---------- Homepage cards: one motion for all eight (Marcus 14 Nov: "scroll efffects an animations arent consistent now").
   Every card fades up in column order, then the laser sweep crosses its picture; before/afters also slide their After
   photo open, single pictures settle from a slight zoom. Hover: every card lifts, the sweep replays, the picture zooms. ---------- */
.kindD__pic { position: relative; }
.kindD__pic::after {
  content: ""; position: absolute; top: -2%; bottom: -2%; left: 0; width: 18%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(124, 192, 236, 0), rgba(124, 192, 236, .5) 45%, #fff 50%, rgba(124, 192, 236, .5) 55%, rgba(124, 192, 236, 0));
  mix-blend-mode: screen; transform: translateX(-120%);
}
.js-reveal .kindD.is-in .kindD__pic::after { animation: inkSweep 1.3s cubic-bezier(.4, 0, .2, 1) .25s 1 both; }
.kindD:hover .kindD__pic::after { animation: inkSweep2 1.1s cubic-bezier(.4, 0, .2, 1) 1 both; }
.js-reveal .kindD .kindD__pic img { transform: scale(1.08); transition: transform 1.5s cubic-bezier(.2, .7, .2, 1) .55s; }
.js-reveal .kindD.is-in .kindD__pic img { transform: none; }
.kindD:hover .kindD__pic img, .js-reveal .kindD.is-in:hover .kindD__pic img { transform: scale(1.05); transition-delay: 0s; transition-duration: 1s; }
/* column order: 4 across on computers, 2 across below 1100px; the sweep and the After slide follow their card */
.kindsD--8 .kindD:nth-child(4n+1) { transition-delay: 0s; }
.kindsD--8 .kindD:nth-child(4n+2) { transition-delay: .1s; }
.kindsD--8 .kindD:nth-child(4n+3) { transition-delay: .2s; }
.kindsD--8 .kindD:nth-child(4n+4) { transition-delay: .3s; }
.js-reveal .kindsD--8 .kindD:nth-child(4n+2).is-in :is(.ba__pair, .kindD__pic)::after { animation-delay: .35s; }
.js-reveal .kindsD--8 .kindD:nth-child(4n+3).is-in :is(.ba__pair, .kindD__pic)::after { animation-delay: .45s; }
.js-reveal .kindsD--8 .kindD:nth-child(4n+4).is-in :is(.ba__pair, .kindD__pic)::after { animation-delay: .55s; }
.js-reveal .kindsD--8 .kindD.is-in .ba__side:last-child { transition-delay: .55s; }
.js-reveal .kindsD--8 .kindD:nth-child(4n+2).is-in .ba__side:last-child, .js-reveal .kindsD--8 .kindD:nth-child(4n+2) .kindD__pic img { transition-delay: .65s; }
.js-reveal .kindsD--8 .kindD:nth-child(4n+3).is-in .ba__side:last-child, .js-reveal .kindsD--8 .kindD:nth-child(4n+3) .kindD__pic img { transition-delay: .75s; }
.js-reveal .kindsD--8 .kindD:nth-child(4n+4).is-in .ba__side:last-child, .js-reveal .kindsD--8 .kindD:nth-child(4n+4) .kindD__pic img { transition-delay: .85s; }
@media (max-width: 1100px) {
  .kindsD--8 .kindD:nth-child(odd) { transition-delay: 0s; }
  .kindsD--8 .kindD:nth-child(even) { transition-delay: .1s; }
  .js-reveal .kindsD--8 .kindD:nth-child(n).is-in :is(.ba__pair, .kindD__pic)::after { animation-delay: .25s; }
  .js-reveal .kindsD--8 .kindD:nth-child(even).is-in :is(.ba__pair, .kindD__pic)::after { animation-delay: .35s; }
  .js-reveal .kindsD--8 .kindD:nth-child(n).is-in .ba__side:last-child, .js-reveal .kindsD--8 .kindD:nth-child(n) .kindD__pic img { transition-delay: .55s; }
  .js-reveal .kindsD--8 .kindD:nth-child(even).is-in .ba__side:last-child, .js-reveal .kindsD--8 .kindD:nth-child(even) .kindD__pic img { transition-delay: .65s; }
}
.kindD:hover, .js-reveal .kindD.is-in:hover { transition-delay: 0s !important; }
.kindD:hover .kindD__pic img { transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .kindD__pic::after { display: none; }
  .js-reveal .kindD .kindD__pic img, .kindD:hover .kindD__pic img { transform: none !important; transition: none !important; }
}