/* ============================================================================
   Body contouring division layer. Loads after style.css.
   The code is cloned from Savvy V2.3. Layout, classes, motion and the Scroll Craft
   engine are unchanged. What changes for this market:
   1. Color: tools/apply_market_theme.py swapped the neon rainbow for a red-light
      palette (laser red, coral, rose, gold, wine on warm ivory) in style.css,
      loops.js, scenes.js and the pages.
   2. Type: display headings use Instrument Serif with italic emphasis, like the
      invisa-RED studio site (rules below).
   3. New pieces: the division tag, the owner video slot (#watch) and watch.html.
   ========================================================================== */

/* Market theme: tokens and type */
/* Dark studio ground (tools/apply_dark_theme.py flipped the neutrals in style.css and loops.js) */
html, body, #sv-site, #sv-page { background: #120a0d; }
#sv-site, :root { --sv-canvas: #120a0d; --sc-canvas: #120a0d; --sv-char: #0b0507; }
/* Primary buttons are laser red with dark text, like the studio site */
#sv-site .sv-btn:not(.sv-btn--ghost):not(.sv-btn--rb) { color: #1a0b0f; }
#sv-site .sv-btn:not(.sv-btn--ghost):not(.sv-btn--rb)::after { background: #ff2e3f; }
/* The engine and the footer were dark already and stay dark */
#sv-site .sv-footer { background: #0b0507; }
/* The live voice widget needs a light card: give its subtree the light tokens back */
.sv-orbdock-card, .sv-orb-mini { --sv-ink: #1a0b0f; --sv-body: #4a3a3c; --sv-muted: #7a6866; --sv-hair: #ebded7; --sv-hair-2: #dcc9c0; --sv-pearl: #f8f1ec; }
#sv-site ::selection { background: #d9b37a; color: #1a0b0f; }

#sv-site, :root { --sv-green: #4cc38a; --sv-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
#sv-site .sv-display, #sv-site .sv-h2 { font-family: var(--sv-serif); font-weight: 400; letter-spacing: -.02em; }
#sv-site .sv-display { font-size: clamp(3rem, 1.4rem + 4.7vw, 5.9rem); line-height: .95; }
#sv-site .sv-h2 { font-size: clamp(2.45rem, 1.5rem + 3.7vw, 4.6rem); line-height: 1; }
#sv-site .sv-display .sv-rb-text, #sv-site .sv-h2 .sv-rb-text { font-style: italic; padding-right: .06em; }
/* Between the phone layout and the full nav the hero stage is short (for example 1024x768), so the headline steps down a little */
@media (min-width: 701px) and (max-width: 1180px) { #sv-site .sv-display { font-size: clamp(2.8rem, 1.2rem + 4.2vw, 4.4rem); } }
@media (max-width: 700px) { #sv-site .sv-display { font-size: clamp(2.8rem, 1.8rem + 6vw, 4rem); } }

/* Source bug, fixed here: the bento tile that glides in from the right (--gx:80) widened the page by 64px on phones until it was revealed */
#sv-site .sv-details { overflow-x: clip; }

/* Header: the primary label is one letter longer than the original, so trim the button and keep the X-ray label on one line */
.sv-menu > .sv-btn { padding-inline: .95rem; }
.sv-xray span { white-space: nowrap; }

/* Brand lockup: the red heart mark, "Contour Booked" in the display serif, and the parent company tag */
.sv-brand { gap: .5rem; }
#sv-site .sv-brand .sv-brand-mark { height: 30px; width: 30px; }
.sv-brand-name { font-family: var(--sv-serif); font-size: 1.5rem; line-height: 1; letter-spacing: -.01em; color: var(--sv-ink); white-space: nowrap; }
.sv-brand-name em { font-style: italic; color: transparent; background: var(--rb-text); -webkit-background-clip: text; background-clip: text; padding-right: .08em; }
.sv-brand--foot .sv-brand-name { font-size: 1.9rem; color: #fff; }
#sv-site .sv-brand--foot .sv-brand-mark { height: 38px; width: 38px; }

/* Parent company tag beside the lockup */
.sv-division { margin-left: .55rem; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--sv-hair-2); background: var(--sv-pearl); color: var(--sv-muted); font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
/* The full nav shows from 1181px up and leaves no room; the hero label names the division there. */
@media (min-width: 1181px) { .sv-menu .sv-division { display: none; } }
/* On small phones the wordmark and the menu button fill the bar; the hero label names the division. */
@media (max-width: 480px) { .sv-menu .sv-division { display: none; } }

/* The primary label is one letter longer than the original. Trim the hero button padding so the two hero buttons still share one row. */
.sv-hero-copy .sv-cta-row .sv-btn { padding-inline: 1.3rem; }

/* Keep the device name on one line */
.sv-nb { white-space: nowrap; }

/* Phone dock: give the longer primary label room */
.sv-dock .sv-btn { white-space: nowrap; font-size: .88rem; padding: 0 .7rem; }
.sv-dock .sv-btn--ghost { flex: 0 0 auto; padding: 0 1.15rem; }

/* Owner video slot */
.sv-watch .sv-watch-grid { align-items: center; }
.sv-watch-list { margin-top: 1.5rem; display: grid; gap: .7rem; }
.sv-watch-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; color: var(--sv-body); font-size: 1.05rem; line-height: 1.45; }
.sv-watch-list li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rb); background-size: 300% 100%; animation: sv-rb-slide 4s linear infinite; margin-top: .5em; }
.sv-vsl { overflow: hidden; padding: 0; }
.sv-vsl-frame { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: radial-gradient(120% 120% at 0% 0%, rgba(224, 22, 43, .10), transparent 55%), radial-gradient(120% 120% at 100% 100%, rgba(217, 179, 122, .16), transparent 55%), var(--sv-pearl); }
.sv-vsl-frame video, .sv-vsl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.sv-vsl-frame video { object-fit: contain; }
.sv-vsl-poster { display: grid; gap: .55rem; justify-items: center; text-align: center; padding: 1.25rem; }
.sv-vsl-poster svg { width: clamp(64px, 9vw, 96px); height: auto; }
.sv-vsl-poster p:last-child { color: var(--sv-body); font-size: .98rem; }
.sv-vsl figcaption { padding: .9rem 1.2rem 1.15rem; }
@media (max-width: 900px) { .sv-watch .sv-watch-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sv-watch-list li::before { animation: none; } }

/* watch.html: the video-first page that outreach links point to */
.sv-wp-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 1rem var(--sc-gutter); }
.sv-wp-top .sv-brand img { height: 30px; width: auto; }
.sv-wp-hero { padding: clamp(1rem, 3vw, 2.5rem) 0 var(--sc-section); text-align: center; background: radial-gradient(60% 50% at 15% 0%, rgba(224, 22, 43, .07), transparent 70%), radial-gradient(60% 50% at 85% 0%, rgba(217, 179, 122, .14), transparent 70%); }
.sv-wp-hero .sv-wp-title { max-width: 18ch; margin: .9rem auto 0; }
.sv-wp-hero .sv-lead { margin: 1.25rem auto 0; max-width: 52ch; }
.sv-wp-vsl { max-width: 60rem; margin: clamp(1.5rem, 4vw, 2.75rem) auto 0; text-align: left; }
.sv-wp-hero .sv-cta-row { justify-content: center; margin-top: 1.75rem; }
.sv-wp-hero .sv-cta-micro { margin-top: .9rem; }
.sv-wp-cards { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sv-wp-cards .sv-tile { padding: 1.4rem; display: grid; gap: .6rem; align-content: start; }
.sv-wp-cards h3 { font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.2; }
.sv-wp-cards p { color: var(--sv-body); font-size: .98rem; line-height: 1.5; }
.sv-wp-built .sv-note { margin-top: 1.25rem; }
.sv-wp-foot { padding: 2.5rem var(--sc-gutter) 3rem; max-width: var(--sc-maxw); margin-inline: auto; display: grid; gap: .8rem; color: var(--sv-muted); font-size: .9rem; line-height: 1.5; }
.sv-wp-foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.sv-wp-foot a { text-decoration: underline; text-decoration-color: var(--sv-hair-2); text-underline-offset: .25em; }
@media (max-width: 980px) { .sv-wp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-wp-cards { grid-template-columns: minmax(0, 1fr); } .sv-wp-top .sv-btn { min-height: 44px; padding: 0 .9rem; font-size: .88rem; } .sv-wp-top .sv-division { display: none; } }

/* Phase 3: the voice widget is red now, so the small parked orb matches it (it was the old widget's green). */
#sv-site .sv-orb-mini svg, #sv-site .sv-orb-mini svg .mic { fill: #e0162b; }
#sv-site .sv-orb-mini.is-talking i { border-color: rgba(255, 46, 63, .6); }

/* Build-call form: the HighLevel form frame on the dark tile. */
/* The frame's page is a light-scheme page with a see-through background. On this dark-scheme site the
   browser would paint a white sheet behind it unless the frame is told to use the same scheme. */
#sv-site .sv-app-form iframe { color-scheme: light; background: transparent; width: 100%; min-height: 0; }
/* form_embed.js wraps the frame in .ep-iFrameContainer > .ep-wrapper and sets the frame's height itself.
   The block keeps its place while the form loads, so the sections below do not jump. */
#sv-site .sv-app-form.is-embed { display: block; min-height: 840px; }
#sv-site .sv-app-form.is-embed.is-ready { min-height: 0; }
#sv-site .sv-app-form.is-embed .ep-iFrameContainer, #sv-site .sv-app-form.is-embed .ep-wrapper { width: 100%; }

/* Video page: "As featured on" strip. */
/* White logo marks on the dark page. Each logo sets its own display height with --h, because the
   marks differ a lot in shape. The width and height attributes keep the row from jumping. */
.sv-press { margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 1.5rem 0 1.6rem; border-top: 1px solid var(--sv-hair); border-bottom: 1px solid var(--sv-hair); text-align: center; }
.sv-press .sv-label { display: block; margin: 0 0 1.15rem; }
.sv-press-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2rem; list-style: none; margin: 0; padding: 0; }
.sv-press-row li { margin: 0; padding: 0; }
.sv-press-row img { display: block; width: auto; height: var(--h, 26px); max-width: 100%; opacity: .82; }
@media (max-width: 560px) { .sv-press-row { gap: 1.1rem 1.7rem; } .sv-press-row img { height: calc(var(--h, 26px) * .8); } }