/* /clinic-builder: the 3D clinic builder page (14 Oct 2026; own look 23 Oct 2026). Loaded after styles.css. Prefix: cb-
   The builder's look: "plan paper" (lilac-tinted paper with a fine drawing grid), square-ish corners, films framed with
   corner ticks like a drawing sheet. The tokens, the paper, the film frame, the homepage section and the top button live in stage.py's styles.css block. */

/* hero: words on the left, the street-to-reception film on the right */
.cb-hero { padding: 150px 0 96px; overflow: hidden; }
.cb-hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cb-hero h1 { font-size: clamp(42px, 5.4vw, 76px); color: var(--aubergine); margin-bottom: 26px; max-width: 11ch; }
.cb-hero .in-short { background: rgba(255, 255, 255, 0.55); }
.cb-hero-actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 30px 0 20px; }
.cb-start {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 22px 34px; border-radius: var(--cb-radius);
  background: var(--aubergine); color: var(--cream);
  font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 60, 'opsz' 144;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.01em; line-height: 1;
  text-decoration: none; box-shadow: 0 24px 50px -22px rgba(45, 27, 78, 0.55);
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
@media (hover: hover) and (pointer: fine) { .cb-start:hover { background: var(--royal); transform: translateY(-3px); box-shadow: 0 30px 60px -24px rgba(91, 42, 140, 0.6); } }
.cb-start:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; }
.cb-start .arrow { font-family: 'Manrope', sans-serif; font-size: 0.8em; transition: transform var(--transition); }
@media (hover: hover) and (pointer: fine) { .cb-start:hover .arrow { transform: translateX(6px); } }
.cb-hero-link { display: inline-block; color: var(--royal); font-weight: 700; font-size: 15px; padding: 12px 0; border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: rgba(91, 42, 140, 0.35); transition: text-decoration-color var(--transition); }
.cb-hero-link:hover { text-decoration-color: var(--royal); }
.cb-start-note { font-size: 14px; color: var(--slate); max-width: 52ch; line-height: 1.55; margin-top: 6px; }
.cb-start-note strong { color: var(--aubergine); font-weight: 700; }

/* the hero film's frame (the shared film frame, pause button and tokens are in styles.css: stage.py) */
.cb-clip-frame--hero { border-radius: var(--cb-radius); box-shadow: 0 50px 100px -50px rgba(26, 15, 46, 0.7), 0 0 0 8px rgba(255, 255, 255, 0.45); }

/* what it is */
.cb-plain { max-width: 720px; margin-top: 28px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.cb-plain + .cb-plain { margin-top: 14px; }
.cb-plain a { color: var(--royal); font-weight: 600; }

/* room films */
.cb-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 22px; margin-top: 44px; }
.cb-gallery .cb-clip.wide { grid-column: 1 / -1; }
.cb-gallery .cb-clip.wide .cb-clip-frame { aspect-ratio: 21 / 9; }
.cb-pic-note { font-size: 13.5px; color: var(--slate); margin-top: 22px; }

/* the walkthrough band */
.cb-band { background: var(--aubergine); color: var(--cream); }
.cb-band .section-eyebrow { color: var(--lilac); }
.cb-band .section-title { color: var(--cream); }
.cb-band .section-intro { color: rgba(248, 245, 240, 0.78); max-width: 760px; }
.cb-film { position: relative; margin-top: 44px; border-radius: var(--cb-radius); overflow: hidden; background: var(--cb-paper); aspect-ratio: 16 / 9; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6); }
/* 24 Oct 2026: the walkthrough's plan is the near-square 8-room clinic. Centred over the play button it lost its bottom rooms,
   so on wider screens the plan fills the height on the left and the button sits in the space to its right; phones stack them */
.cb-plan { position: absolute; inset: 0; display: grid; place-items: center; padding: 3.5% 38% 3.5% 4%; transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: var(--cb-paper);
  background-image: linear-gradient(var(--cb-grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--cb-grid-fine) 1px, transparent 1px);
  background-size: 24px 24px; }
.cb-plan svg { width: auto; height: 100%; max-width: 100%; max-height: 100%; filter: drop-shadow(0 18px 40px rgba(45, 27, 78, 0.14)); }
.cb-plan-tag { position: absolute; left: 22px; top: 18px; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--royal); font-weight: 700; }
.cb-play {
  position: absolute; left: 81%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 14px; padding: 16px 28px 16px 18px; border-radius: var(--cb-radius); border: none; cursor: pointer;
  background: var(--aubergine); color: var(--cream); font-family: inherit; font-weight: 700; font-size: 16px; letter-spacing: 0.01em; white-space: nowrap;
  box-shadow: 0 20px 40px -18px rgba(45, 27, 78, 0.7); transition: background-color var(--transition), transform var(--transition), opacity 0.3s;
}
.cb-play:hover { background: var(--royal); transform: translate(-50%, calc(-50% - 2px)); }
.cb-play:active { transform: translate(-50%, -50%) scale(0.98); transition-duration: 0.08s; }
.cb-play .cb-play-ic { width: 42px; height: 42px; border-radius: 6px; background: var(--cream); display: grid; place-items: center; color: var(--aubergine); flex: none; }
.cb-play .cb-play-ic::before { content: ''; display: block; width: 0; height: 0; border-left: 14px solid currentColor; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.cb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--aubergine-deep); opacity: 0; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1); }
.cb-film.is-playing .cb-video { opacity: 1; pointer-events: auto; }
.cb-film.is-playing .cb-plan, .cb-film.is-playing .cb-play { opacity: 0; pointer-events: none; }
.cb-film-line { font-size: 13.5px; color: rgba(248, 245, 240, 0.65); margin-top: 14px; }
.cb-film-line a { color: var(--lilac); }

.cb-get { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 40px; margin-top: 44px; max-width: none; }
.cb-get li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(248, 245, 240, 0.16); font-size: 15.5px; line-height: 1.6; color: rgba(248, 245, 240, 0.86); }
.cb-get li::before { content: ''; width: 9px; height: 5px; margin-top: 9px; background: none; border-radius: 0; box-shadow: none; border-left: 2px solid var(--lilac); border-bottom: 2px solid var(--lilac); transform: rotate(-45deg); }
.cb-get strong { color: var(--cream); font-weight: 700; }

/* prices: four cards across, each its own colour, square-ish corners (his ask 23 Oct 2026) */
.cb-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; align-items: stretch; }
.cb-tier {
  --t-bg: #EDE4F6; --t-ink: var(--aubergine); --t-soft: rgba(45, 27, 78, 0.72); --t-rule: rgba(45, 27, 78, 0.16);
  --t-btn: var(--aubergine); --t-btn-ink: var(--cream); --t-btn-hover: var(--royal); --t-tick: var(--royal);
  position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: var(--cb-radius);
  background: var(--t-bg); color: var(--t-ink); border: 1px solid var(--t-rule);
}
.cb-tier--medium { --t-bg: var(--lilac); --t-ink: var(--aubergine-deep); --t-soft: rgba(26, 15, 46, 0.8); --t-rule: rgba(26, 15, 46, 0.18); }
.cb-tier--large { --t-bg: var(--royal); --t-ink: var(--cream); --t-soft: rgba(248, 245, 240, 0.84); --t-rule: rgba(248, 245, 240, 0.2);
  --t-btn: var(--cream); --t-btn-ink: var(--aubergine); --t-btn-hover: var(--lilac); --t-tick: var(--lilac); }
.cb-tier--quote { --t-bg: var(--aubergine); --t-ink: var(--cream); --t-soft: rgba(248, 245, 240, 0.8); --t-rule: rgba(248, 245, 240, 0.16);
  --t-btn: var(--lilac); --t-btn-ink: var(--aubergine-deep); --t-btn-hover: var(--cream); --t-tick: var(--lilac); }
.cb-tier-name { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 60, 'opsz' 144; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; color: var(--t-ink); }
.cb-tier-size { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-soft); margin-top: 8px; min-height: 3.2em; line-height: 1.45; text-wrap: balance; }
.cb-tier-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--t-rule); min-height: 92px; }
.cb-tier-num { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 30, 'opsz' 144; font-size: clamp(52px, 4.6vw, 68px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.cb-tier-num sup { font-size: 0.42em; vertical-align: top; margin-right: 2px; top: 0.3em; position: relative; }
.cb-tier-num--word { font-size: clamp(36px, 3.2vw, 46px); letter-spacing: -0.02em; }
.cb-tier-gst { font-size: 13px; font-weight: 600; color: var(--t-soft); }
.cb-tier-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-soft); margin-top: 18px; }
.cb-tier-get { list-style: none; display: grid; gap: 9px; margin: 12px 0 24px; }
/* the tick sits in the padding, not a grid column: a grid split "Standard, High-end and Overseas-sourced" into overlapping boxes (24 Oct 2026) */
.cb-tier-get li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; color: var(--t-ink); }
.cb-tier-get li::before { content: ''; position: absolute; left: 0; top: 6px; width: 9px; height: 5px; border-left: 2px solid var(--t-tick); border-bottom: 2px solid var(--t-tick); transform: rotate(-45deg); }
.cb-tier-btn {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-radius: 6px;
  background: var(--t-btn); color: var(--t-btn-ink); font-weight: 700; font-size: 15px; text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.cb-tier-btn:hover { background: var(--t-btn-hover); }
.cb-tier-btn:active { transform: scale(0.97); transition: transform 0.1s ease-out; }
.cb-tier--large .cb-tier-btn:hover, .cb-tier--quote .cb-tier-btn:hover { color: var(--aubergine-deep); }
.cb-tier-btn .arrow { transition: transform var(--transition); }
.cb-tier-btn:hover .arrow { transform: translateX(4px); }
.cb-tier--large :focus-visible, .cb-tier--quote :focus-visible { outline-color: var(--lilac); }
.cb-tier-note { font-size: 14px; color: var(--slate); margin-top: 22px; max-width: 760px; line-height: 1.6; }

/* send your plans */
.cb-send { background: var(--aubergine-deep); color: var(--cream); }
.cb-send .section-eyebrow { color: var(--lilac); }
.cb-send .section-title { color: var(--cream); }
.cb-send .section-intro { color: rgba(248, 245, 240, 0.78); max-width: 720px; }
.cb-send-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 50px; margin-top: 36px; align-items: start; }
.cb-form { display: grid; gap: 14px; }
.cb-form .field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: rgba(248, 245, 240, 0.78); margin-bottom: 7px; }
.cb-form .field input, .cb-form .field select, .cb-form .field textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--cb-radius); border: 1.5px solid rgba(248, 245, 240, 0.4);
  background: rgba(248, 245, 240, 0.06); color: var(--cream); font-family: inherit; font-size: 16px;
  transition: border-color var(--transition), background-color var(--transition);
}
.cb-form .field input::placeholder, .cb-form .field textarea::placeholder { color: rgba(248, 245, 240, 0.58); }
.cb-form .field input:focus, .cb-form .field select:focus, .cb-form .field textarea:focus { border-color: var(--lilac); background: rgba(248, 245, 240, 0.1); }
.cb-form .field select.is-picked { border-color: var(--lilac); background: rgba(183, 148, 214, 0.16); }
.cb-send :focus-visible, .cb-band :focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }
.cb-form .field select option { color: var(--ink); }
.cb-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cb-form .hint { font-size: 14px; color: rgba(248, 245, 240, 0.55); margin-top: 6px; line-height: 1.5; }
.cb-form .cb-fine { font-size: 14px; color: rgba(248, 245, 240, 0.6); }
.cb-form .cb-fine a { color: var(--lilac); }
.cb-form .btn { width: 100%; justify-content: center; border-radius: var(--cb-radius); }
.cb-form-error { margin-top: 4px; color: var(--cream); background: rgba(220, 38, 38, 0.35); padding: 14px 18px; border-radius: var(--cb-radius); font-size: 14px; }
.cb-sent { display: none; padding: 30px; border-radius: var(--cb-radius); background: rgba(248, 245, 240, 0.08); border: 1px solid rgba(248, 245, 240, 0.16); }
.cb-sent.show { display: block; }
.cb-sent h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 26px; margin-bottom: 10px; color: var(--cream); }
.cb-sent p { color: rgba(248, 245, 240, 0.78); font-size: 15px; line-height: 1.6; }
.cb-sent a { color: var(--lilac); }
.cb-aside { display: grid; gap: 22px; }
.cb-aside h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 22px; color: var(--cream); margin-bottom: 8px; }
.cb-aside p, .cb-aside li { font-size: 14.5px; line-height: 1.65; color: rgba(248, 245, 240, 0.78); }
.cb-aside ol { padding-left: 20px; display: grid; gap: 6px; }
.cb-aside a { color: var(--lilac); }
.cb-disclaimer { font-size: 14px; color: rgba(248, 245, 240, 0.62); line-height: 1.55; }

/* no lone last word in the small text; compound words never split at the hyphen; square-ish corners on the closing buttons */
.cb-start-note, .cb-plain, .cb-pic-note, .cb-tier-note, .cb-film-line, .cb-aside p { text-wrap: pretty; }
.nw { white-space: nowrap; }
.cta-banner .btn { border-radius: var(--cb-radius); }

@media (max-width: 1180px) {
  .cb-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .cb-hero { padding: 128px 0 72px; }
  .cb-hero-grid { grid-template-columns: 1fr; }
  .cb-hero h1 { max-width: none; }
  .cb-send-grid { grid-template-columns: 1fr; }
  .cb-get { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-play { padding: 12px 20px 12px 12px; font-size: 14px; gap: 10px; }
  .cb-play .cb-play-ic { width: 34px; height: 34px; }
  .cb-plan { padding-top: 52px; }   /* clear of the 'The plan' tag */
}
@media (max-width: 640px) {
  .cb-hero { padding: 112px 0 56px; }
  .cb-start { padding: 20px 26px; font-size: 23px; width: 100%; justify-content: center; }
  .cb-hero-actions { margin: 24px 0 14px; }
  .cb-clip-frame--hero { box-shadow: 0 30px 60px -36px rgba(26, 15, 46, 0.7), 0 0 0 6px rgba(255, 255, 255, 0.45); }
  .cb-gallery { grid-template-columns: 1fr; gap: 22px; }
  .cb-gallery .cb-clip.wide .cb-clip-frame { aspect-ratio: 16 / 9; }
  .cb-film { aspect-ratio: 5 / 6; }
  .cb-tier-size { min-height: 0; }   /* one column: no row to line up with (two columns keep the 2-line space) */
  .cb-plan { padding: 9% 3% 0; place-items: start center; }
  .cb-plan svg { width: 100%; height: auto; max-height: calc(100% - 84px); }
  .cb-video { object-fit: contain; }
  .cb-plan-tag { left: 12px; top: 10px; font-size: 11px; }
  .cb-play { padding: 12px 20px 12px 12px; font-size: 14px; left: 50%; top: auto; bottom: 14px; gap: 10px; transform: translateX(-50%); }
  .cb-play:hover { transform: translateX(-50%); }
  .cb-play:active { transform: translateX(-50%) scale(0.98); }
  .cb-play .cb-play-ic { width: 34px; height: 34px; }
  .cb-get { grid-template-columns: 1fr; }
  .cb-form .field-row { grid-template-columns: 1fr; }
  .cb-tiers { grid-template-columns: 1fr; gap: 14px; }
  .cb-tier { padding: 24px 20px 20px; }
  .cb-tier-price { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-start, .cb-play, .cb-plan, .cb-video, .cb-tier-btn { transition: none; }
  .cb-start:hover { transform: none; }
  .cb-play:hover { transform: translateX(-50%); }
  .cb-start .arrow, .cb-tier-btn .arrow { transition: none; }
  .cb-start:hover .arrow, .cb-tier-btn:hover .arrow { transform: none; }
}