/* Conexity Marketing Engine — shared chrome for every client template:
   preview conversion bar, mobile dock, modals/drawer, soft-lock overlay,
   viral badge and empty states. Template art direction lives in templates/*.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
body { margin: 0; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.cxp-locked, .cxp-locked body { overflow: hidden; }
/* split-word reveal masks used by the legacy templates (templates/motion.js, ?legacy=1) */
.cx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .02em .12em; margin: -.04em -.02em -.12em; }
.cx-w__i { display: inline-block; will-change: transform; }

:root {
  --cxp-ink: #0b0c10;
  --cxp-gold: #F6AC29;
  --cxp-gold-2: #F8C25E;
  --cxp-coral: #FF6B5A;
  --cxp-violet: #8B5CF6;
  --cxp-emerald: #10B981;
  --cxp-glass: rgba(14, 15, 20, .72);
  --cxp-line: rgba(255, 255, 255, .12);
  --cxp-font: 'Cx Sora', 'Cx Sora Fallback', Arial, sans-serif;
  --cxp-bar-h: 52px;
}

.cxp-boot { min-height: 100vh; display: grid; place-items: center; background: #0b0c10; }
.cxp-boot span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--cxp-gold); animation: cxp-spin .8s linear infinite; }
@keyframes cxp-spin { to { transform: rotate(360deg); } }

/* ---------------- preview chrome: space reserved before the first paint (the boot hint sets .cxp-has-bar).
   Desktop: ONE slim fixed row of exactly --cxp-bar-h, flush at the top (nothing can show behind it on scroll).
   Phones: a small top label that scrolls away (the site's own sticky nav then sits at top 0) and one bottom bar.
   The bar's look lives in preview.css (loaded after the first paint). */
.cxp-has-bar body { padding-top: var(--cxp-bar-h); }
.cxp-bar, .cxp-top, .cxp-dock { display: none; }
@media (max-width: 860px) {
  :root { --cxp-bar-h: 0px; }
  .cxp-has-bar body { padding-top: 34px; padding-bottom: calc(var(--cxp-dock-h, 64px) + 14px + env(safe-area-inset-bottom)); }
}
[data-template] > header { transition-property: background, box-shadow, top; transition-duration: .4s; }
.cxp-domain { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 12px; border-radius: 999px; font: 500 12.5px/1 var(--cxp-font); color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); border: 1px solid var(--cxp-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxp-domain i { font-style: normal; font-size: 10px; }
.cxp-domain b { color: #fff; font-weight: 700; }
.cxp-domain.is-free { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.42); box-shadow: 0 0 0 4px rgba(16,185,129,.06); }
.cxp-stand-in { flex: none; margin-right: auto; padding: 6px 10px; border-radius: 999px; font: 600 11px/1 var(--cxp-font); color: rgba(255,255,255,.7); background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.22); white-space: nowrap; }
@media (max-width: 520px) { .cxp-stand-in { display: none; } }
.cxp-btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; font: 700 13px/1 var(--cxp-font); text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s, color .2s; white-space: nowrap; }
.cxp-btn:focus-visible { outline: 3px solid rgba(248,194,94,.7); outline-offset: 2px; }
.cxp-btn--primary { color: #111; background: linear-gradient(135deg, #F9C766, #F6AC29 58%, #EE9A12); box-shadow: 0 10px 26px -10px rgba(246,172,41,.85), inset 0 1px 0 rgba(255,255,255,.45); }
.cxp-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(246,172,41,.95), inset 0 1px 0 rgba(255,255,255,.45); color: #111; }
.cxp-btn--ghost { color: #fff; background: rgba(255,255,255,.07); border: 1px solid var(--cxp-line); }
.cxp-btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.cxp-btn--wide { width: 100%; min-height: 52px; font-size: 15px; }
.cxp-btn[disabled] { opacity: .6; cursor: progress; }

/* the kicker label is shared by the empty states (not-found) and the preview chrome */
.cxp-kicker { display: inline-block; font: 700 10.5px/1 var(--cxp-font); letter-spacing: .2em; text-transform: uppercase; color: var(--cxp-gold-2); margin-bottom: 12px; }

/* ---------------- viral footer badge (every client template) */
@media (max-width: 480px) { .cxp-badge__sep { display: none; } }
.cxp-badge { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); background: #08090c; color: rgba(255,255,255,.66); font: 500 13px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; text-align: center; text-decoration: none; border-top: 1px solid rgba(255,255,255,.08); transition: color .2s; }
.cxp-badge b { color: var(--cxp-gold-2); font-weight: 700; }
.cxp-badge:hover { color: #fff; }
.cxp-badge:hover b { text-decoration: underline; text-underline-offset: 3px; }

.cxp-toast { position: fixed; z-index: 2147483200; left: 50%; bottom: 100px; transform: translateX(-50%); padding: 14px 18px; border-radius: 14px; background: #10b981; color: #04140d; font: 700 14px/1.3 var(--cxp-font); box-shadow: 0 20px 50px -18px rgba(16,185,129,.8); }

/* ---------------- empty states */
.cxp-state { min-height: 100vh; display: grid; place-items: center; padding: 32px; text-align: center; background: radial-gradient(900px 500px at 50% 30%, rgba(246,172,41,.12), transparent), #0b0c10; color: #fff; font-family: var(--cxp-font); }
.cxp-state h1 { margin: 0 0 10px; font: 800 clamp(28px, 4vw, 44px)/1.1 var(--cxp-font); letter-spacing: -.02em; }
.cxp-state p { margin: 0 0 22px; color: rgba(255,255,255,.65); font-size: 16px; }



/* =====================================================================
   Shared primitives for the six client styles (styles/*.css restyle them).
   Motion = native CSS scroll-driven animations (animation-timeline) with an
   IntersectionObserver fallback (.cx-io); nothing at all for reduced motion.
   ===================================================================== */
:where(#cx-site) img { height: auto; }
:where(#cx-site) a { color: inherit; }
.cx-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-nowrap { white-space: nowrap; }
.cx-logo { display: block; height: 40px; width: auto; max-width: 180px; object-fit: contain; flex: none; }
[data-cx-mark][hidden] { display: none !important; }
/* 44 px hit area for small text links (attribution, review sources) without changing layout */
.cx-hit { position: relative; }
.cx-hit::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
.cx-src { margin: 8px 0 0; font: 400 12.5px/1.4 system-ui, sans-serif; }
.cx-req--soft { border-style: dotted; }
.cx-form__note.is-on { opacity: 1; font-weight: 600; }
@font-face { font-family: 'Cx Sora'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/marketing-engine/fonts/sora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cx Sora Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust: 107.8%; ascent-override: 90%; descent-override: 26.9%; line-gap-override: 0%; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
/* Preview chrome measurements (preview.js setChromeVar): not inherited, so writing them never restyles the whole page. No initial value: the var() fallbacks still apply until the chrome has measured. */
@property --cxp-tail-bg { syntax: '*'; inherits: false; }
@property --cxp-dock-h { syntax: '*'; inherits: false; }

/* ---------- DESIGN TOKENS shared by the six looks (2026-10-21 design pass).
   Spacing runs on a 4 px base; the type scale is fluid (clamp) on a ~1.25 ratio; motion has one vocabulary
   (easing curves + durations) and each look sets its own PERSONALITY on its root (distance, duration, curve,
   stagger): Kinetic snaps, Atelier breathes, Monolith is precise, Local is springy, Aurora floats, Editorial turns pages.
   Every motion is opacity/transform only (no layout shift) and none runs for prefers-reduced-motion. */
:root {
  --cx-s1: 4px; --cx-s2: 8px; --cx-s3: 12px; --cx-s4: 16px; --cx-s5: 24px; --cx-s6: 32px; --cx-s7: 48px; --cx-s8: 64px; --cx-s9: 96px; --cx-s10: 128px;
  --cx-t-xs: clamp(12px, .78rem, 13px); --cx-t-sm: clamp(14px, .9rem, 15px); --cx-t-md: clamp(16px, 1.05rem, 18px); --cx-t-lg: clamp(19px, 1.5vw, 22px);
  --cx-t-xl: clamp(26px, 3vw, 36px); --cx-t-2xl: clamp(32px, 4.4vw, 60px); --cx-t-3xl: clamp(42px, 7vw, 104px);
  --cx-ease-out: cubic-bezier(.16, 1, .3, 1); --cx-ease-soft: cubic-bezier(.33, 1, .68, 1); --cx-ease-back: cubic-bezier(.34, 1.4, .64, 1); --cx-ease-io: cubic-bezier(.65, 0, .35, 1);
  --cx-d1: .18s; --cx-d2: .36s; --cx-d3: .7s; --cx-d4: 1.1s; --cx-d5: 1.6s;
}
[data-style] { --m-dist: 28px; --m-dur: .9s; --m-ease: var(--cx-ease-out); --m-stagger: 80ms; --m-scale: .96; --m-img: 1.1; }
/* design fix 6: scroll reveals <= 380 ms, offset <= 12 px, stagger <= 40 ms (each look keeps its easing) */
[data-style] { --r-dur: min(var(--m-dur), .38s); --r-dist: min(var(--m-dist), 12px); --r-st: min(var(--m-stagger), 40ms); }

/* ---------- reveal primitives: [data-r] = rise | fade | scale | left | right | clip (photo settles inside its frame).
   Time-based and triggered once by IntersectionObserver (core/motion.js initSiteMotion), staggered within each batch,
   so a fast scroll never leaves a half-faded band. Anything already on screen at load is shown at once, unanimated.
   The hero paints in place: its text and controls never animate in (measured with Lighthouse mobile: any entrance
   on them, even a small fade, pushes the reported largest paint out by ~1 s); only its photos [data-hi=frame]
   settle in scale, which never fades and never moves layout. */
@keyframes cx-p { from { --p: 0; } to { --p: 1; } }
@keyframes cx-hi-img { from { scale: var(--m-img); } }
@media (prefers-reduced-motion: no-preference) {
  .cx-io [data-r]:not(.is-done) { transition: opacity var(--r-dur) var(--m-ease), translate var(--r-dur) var(--m-ease), scale var(--r-dur) var(--m-ease); transition-delay: calc(var(--i, 0) * var(--r-st)); }
  .cx-io [data-r]:not(.is-in) { opacity: 0; translate: 0 var(--r-dist); }
  .cx-io [data-r=fade]:not(.is-in) { translate: none; }
  .cx-io [data-r=scale]:not(.is-in) { translate: 0 calc(var(--r-dist) * .5); scale: max(var(--m-scale), .97); }
  .cx-io [data-r=left]:not(.is-in) { translate: calc(var(--r-dist) * -1) 0; }
  .cx-io [data-r=right]:not(.is-in) { translate: var(--r-dist) 0; }
  .cx-io [data-r=clip] { overflow: clip; }
  .cx-io [data-r=clip]:not(.is-in) { translate: 0 calc(var(--r-dist) * .5); }
  .cx-io [data-r=clip] img { transition: scale min(calc(var(--m-dur) * 1.8), .6s) var(--m-ease); transition-delay: calc(var(--i, 0) * var(--r-st)); }
  .cx-io [data-r=clip]:not(.is-in) img { scale: min(var(--m-img), 1.04); }
  .cx-io [data-hi=frame] { overflow: clip; }
  .cx-io [data-hi=frame] img { animation: cx-hi-img calc(var(--m-dur) * 2.2) var(--m-ease) both; }
  @supports (animation-timeline: view()) {
    [data-scrub] { animation: cx-p linear both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
    [data-scrub=cover] { animation-range: cover 0% cover 100%; }
    [data-scrub=exit] { animation-range: exit 0% exit 100%; }
  }
}
/* Typography hygiene for every look: headings balance their lines, body copy avoids orphans, numerals line up. */
#cx-site :where(h2, h3) { text-wrap: balance; } /* not h1: a balanced headline is narrower, which can hand the largest paint to a late photo */
#cx-site :where(p, li, dd, figcaption) { text-wrap: pretty; }
#cx-site :where([href^="tel:"], .cx-rating, time) { font-variant-numeric: tabular-nums; }
#cx-site ::selection { background: var(--accent-fill, #F6AC29); color: var(--accent-ink, #111); }

/* Brand style guide (owner polish portal): the chosen vetted face sets every look's headings and wordmark.
   The face is declared by the boot hint / core/brand.js as 'CX Brand' with font-display: optional (never a late swap). */
html[data-cx-brand-font] #cx-site :is(h1, h2, h3, [data-cx-brand], .kn-line, .ed-mast__word, .at-title, .ar-title, .lo-title, .mo-title) { font-family: 'CX Brand', var(--cx-brand-fallback, system-ui), sans-serif; }

/* ---------- Google attribution (Places policy): the text "Google Maps" in Roboto/sans 400 at 12–16px,
   never wrapped or restyled, in #1F1F1F (or #5E5E5E) on light surfaces and white on dark ones; author
   attributions are links. Each style sets --cx-gmaps-ink / --cx-credit-ink for the surface it sits on
   (light: #1F1F1F / #5E5E5E, dark: #FFFFFF / #FFFFFF). No opacity, so the inks stay exact. */
.cx-gmaps { font: 400 13px/1.2 Roboto, Arial, sans-serif; white-space: nowrap; letter-spacing: 0; text-transform: none; font-style: normal; color: var(--cx-gmaps-ink, #1F1F1F); }
.cx-credit { display: block; font: 400 12px/1.35 Roboto, Arial, sans-serif; letter-spacing: 0; text-transform: none; font-style: normal; color: var(--cx-credit-ink, #5E5E5E); overflow-wrap: anywhere; }
.cx-credit .cx-gmaps { font-size: 12px; }
.cx-credit a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; }
/* on a photo (only where a style must overlay one): a solid scrim so the white inks always read */
.cx-credit--on-photo { --cx-credit-ink: #FFFFFF; --cx-gmaps-ink: #FFFFFF; width: fit-content; max-width: calc(100% - 16px); padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .72); }
.cx-stars { letter-spacing: 1px; white-space: nowrap; }
.cx-stars i { font-style: normal; opacity: .25; }
.cx-review__by { display: flex; align-items: center; gap: 12px; }
.cx-review__av { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; }
.cx-review__av--txt { display: grid; place-items: center; font: 700 14px/1 system-ui, sans-serif; background: color-mix(in srgb, currentColor 12%, transparent); }
.cx-review__who { display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
.cx-review__who small { font-weight: 400; font-size: 13px; }
.cx-review__who a { text-decoration: none; }
.cx-review__who a:hover { text-decoration: underline; }
.cx-review__text { white-space: pre-line; }
.cx-review__src { font-size: 13px; }
.cx-reviews-note { font: 400 13px/1.5 system-ui, sans-serif; }
.cx-rating { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- compliance chips: visible until the client fills + approves */
.cx-req { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; border: 1.5px dashed currentColor; background: color-mix(in srgb, currentColor 7%, transparent); color: inherit !important; font: 600 12px/1.35 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0; text-transform: none; white-space: normal; vertical-align: middle; }
.cx-req::before { content: "+"; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid currentColor; font: 700 11px/1 system-ui, sans-serif; flex: none; }
.cx-compliance { display: grid; gap: 8px; font: 400 12.5px/1.6 system-ui, sans-serif; }
.cx-compliance p { margin: 0; }
/* label: value pairs, never chips inside brackets or parentheses of the surrounding copy */
.cx-compliance__dl { display: flex; flex-wrap: wrap; justify-content: var(--cx-comp-justify, flex-start); gap: 6px 22px; margin: 0; }
.cx-compliance__dl > div { display: flex; flex-wrap: wrap; justify-content: var(--cx-comp-justify, flex-start); align-items: baseline; gap: 2px 6px; min-width: 0; }
.cx-compliance__dl dt { font-weight: 600; }
.cx-compliance__dl dt::after { content: ":"; }
.cx-compliance__dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cx-compliance a { text-decoration: underline; text-underline-offset: 2px; }
.cx-privacy a { opacity: 1; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cx-credit a { opacity: 1; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cx-areas { margin: 0 0 4px; }
.cx-areas__h { margin: 0 0 4px; font-weight: 600; }
.cx-areas ul { display: flex; flex-wrap: wrap; justify-content: var(--cx-comp-justify, flex-start); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }

/* ---------- mock-data tag (fixtures only) */
.cx-mock { display: inline-block; white-space: nowrap; margin-right: 8px; padding: 3px 8px; border-radius: 999px; background: #7C3AED; color: #fff !important; font: 700 10.5px/1.2 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.cx-mock.cx-mock--example { background: transparent; color: inherit !important; border: 0; padding: 0; font-weight: 600; letter-spacing: .07em; } /* a showcase sample: a quiet "Example data" label in the text colour (review 7: less disclaimer noise), not the QA purple */
[id^="svc-"] { scroll-margin-top: 96px; } /* one anchor per service (core/helpers.js anchorServices): clear of the sticky nav */
.cx-owner-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px dashed currentColor; font: 500 13px/1.5 system-ui, sans-serif; opacity: .85; }

/* ---------- forms (each style restyles) */
.cx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cx-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.cx-form .is-wide { grid-column: 1 / -1; }
.cx-form input, .cx-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 4%, transparent); font-size: 16px; }
.cx-form textarea { min-height: 120px; resize: vertical; }
/* typed text, placeholders and selects take the look's own foreground (browsers default to black, invisible on dark looks) */
.cx-form input, .cx-form textarea, .cx-form select { color: inherit; -webkit-text-fill-color: currentColor; caret-color: currentColor; font-family: inherit; }
.cx-form input::placeholder, .cx-form textarea::placeholder { color: color-mix(in srgb, currentColor 66%, transparent); -webkit-text-fill-color: color-mix(in srgb, currentColor 66%, transparent); opacity: 1; }
.cx-form input:-webkit-autofill { -webkit-text-fill-color: currentColor; transition: background-color 9999s; }
.cx-form__note { grid-column: 1 / -1; margin: 0; font-size: 13px; opacity: .75; }
.cx-form label.cx-form__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 400; line-height: 1.5; }
.cx-form .cx-form__consent input { width: 18px; min-height: 18px; height: 18px; padding: 0; margin: 2px 0 0; flex: none; }
.cx-form .cx-form__consent a { color: inherit; text-decoration: underline; }
.cx-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .cx-form { grid-template-columns: 1fr; } }

.cx-short { display: none; }
@media (max-width: 560px) { .cx-full { display: none; } .cx-short { display: inline; } }
/* one label is displayed at a time, so the link's accessible name is always the visible text */

/* reduced motion: every client style is static (no timelines, no transitions); WebGL and Lenis never start */
@media (prefers-reduced-motion: reduce) { #cx-site *, #cx-site *::before, #cx-site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* sticky Call / Enquire bar for ACTIVE sites on phones */
.cx-actbar, .cx-actbar-space { display: none; }
@media (max-width: 760px) {
  .cx-actbar-space { display: block; }
  .cx-actbar { position: fixed; z-index: 2147482000; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 6px; border-radius: 16px; background: rgba(12,12,14,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px -16px rgba(0,0,0,.6); font: 700 15px/1 system-ui, sans-serif; }
  /* each style's own link colour must never reach the bar: Call is white on the dark glass, Book takes
     the contrast-checked accent fill + ink (core/contrast.js) */
  .cx-actbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; text-decoration: none; color: #FFFFFF !important; background: rgba(255,255,255,.12); }
  .cx-actbar .cx-actbar__call, .cx-actbar .cx-actbar__call svg { color: #FFFFFF !important; stroke: currentColor; }
  .cx-actbar .cx-actbar__go { background: var(--accent-fill, #F6AC29) !important; color: var(--accent-ink, #1F1F1F) !important; }
  .cx-actbar svg { width: 18px; height: 18px; }
  .cx-actbar-space { height: 76px; }
}

/* "Add your job photos" (PREVIEW only; a link to the owner edit path). Each style re-tints it below. */
.cx-photo-prompt { display: flex; align-items: center; gap: 16px; margin: 28px 0 0; padding: 18px 20px; min-height: 76px; border: 1.5px dashed color-mix(in srgb, currentColor 42%, transparent); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.cx-photo-prompt:hover { border-color: var(--accent-text, currentColor); background: color-mix(in srgb, var(--accent-fill, currentColor) 7%, transparent); }
.cx-photo-prompt:focus-visible { outline: 3px solid var(--accent-text, currentColor); outline-offset: 3px; }
.cx-photo-prompt__plus { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--accent-fill, #111); color: var(--accent-ink, #fff); font: 700 24px/1 system-ui, sans-serif; }
.cx-photo-prompt__txt { display: grid; gap: 4px; min-width: 0; }
.cx-photo-prompt b { font-weight: 700; font-size: 17px; line-height: 1.25; }
.cx-photo-prompt small { font-size: 13.5px; line-height: 1.45; color: color-mix(in srgb, currentColor 80%, transparent); }
.mo-prompt { border-radius: 0; margin-inline: 0; }
.ed-prompt { border-radius: 0; }
/* One balancing rule for card grids in every style (core/helpers.js balanceRows): rows share a 12-column width,
   so a short last row widens its cards instead of leaving an orphan. Tablet: 2 per row; phone: 1 per row. */
.cx-bal { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; columns: auto !important; }
.cx-bal > * { grid-column: span var(--s-d, 12) !important; min-width: 0; }
@media (max-width: 900px) { .cx-bal > * { grid-column: span var(--s-t, 12) !important; } }
@media (max-width: 600px) { .cx-bal > * { grid-column: 1 / -1 !important; } }
/* Mobile LCP budget (polish pass): below-the-fold sections skip style, layout and paint until they near the screen.
   The hero (first section) and the pinned kinetic reel are never deferred; sizes are remembered once seen. */
#cx-site [data-style] > section:not(:first-of-type):not(.kn-work):not(.kn-hero):not(.ar-hero):not(.at-hero):not(.mo-hero):not(.lo-hero):not(.ed-hero),
#cx-site [data-style] > footer { content-visibility: auto; contain-intrinsic-size: auto 560px; }
/* Placeholder heights closer to the real ones, so a section that has not rendered yet never shows as a tall empty band
   (sizes are remembered once seen, so a re-visit uses the real height). */
#cx-site [data-style] > footer, #cx-site [data-style] > .cxd-trust { contain-intrinsic-size: auto 240px; }
#cx-site [data-style] > [data-sec="how"] { contain-intrinsic-size: auto 420px; }
/* Reload/back deep in the page (site-runtime.js restoreScroll): every section is laid out at its real size BEFORE the saved
   position is restored, so no placeholder height changes on screen after the jump. */
html.cx-cv-off #cx-site [data-style] > * { content-visibility: visible !important; }

/* Service icons on the looks whose service rows are pure type (Kinetic, Editorial, Monolith, Atelier): a small line icon in
   the accent, sized to the heading, so every look shows what each service is at a glance. */
.cx-sic { display: inline-flex; width: .78em; height: .78em; margin-right: .38em; vertical-align: -.06em; color: var(--a-text, var(--a, currentColor)); }
.cx-sic svg { width: 100%; height: 100%; stroke-width: 1.6; }
.kn .cx-sic { width: .62em; height: .62em; vertical-align: .04em; color: var(--a-text-alt); }
.kn .cx-sic svg { stroke-width: 2.4; }
.at .cx-sic { width: .7em; height: .7em; opacity: .85; }