/* ==========================================================================
   Career One Stop: shared re-skin layer for the 5 preview looks.
   Active only when <html> carries a look-* class. Every colour, font and radius
   comes from tokens set in looks/<name>.css. CSS only, DOM untouched.
   ========================================================================== */
html[class*="look-"] {
  color-scheme: var(--scheme, light);
  --background: var(--hsl-bg, 0 0% 100%); --foreground: var(--hsl-fg, 0 0% 7%);
  --border: var(--hsl-line, 240 6% 85%); --input: var(--hsl-line, 240 6% 85%); --ring: var(--hsl-ring, 240 6% 40%);
  --card: var(--hsl-bg, 0 0% 100%); --popover: var(--hsl-bg, 0 0% 100%); --popover-foreground: var(--hsl-fg, 0 0% 7%);
}
html[class*="look-"], html[class*="look-"] body { background: var(--bg) !important; }
html[class*="look-"] body { color: var(--ink-2); font-family: var(--font-body) !important; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html[class*="look-"] button, html[class*="look-"] input, html[class*="look-"] select, html[class*="look-"] textarea { font-family: inherit !important; }
html[class*="look-"] #root { overflow-x: clip; }
html[class*="look-"] ::selection { background: var(--sel-bg, #111); color: var(--sel-ink, #fff); }

/* ---------- Typography ---------- */
html[class*="look-"] h1, html[class*="look-"] h2, html[class*="look-"] h3, html[class*="look-"] h4 { font-family: var(--font-head) !important; color: var(--ink) !important; letter-spacing: var(--head-track, -0.02em); font-stretch: var(--head-stretch, 100%); text-transform: var(--head-case, none); }
html[class*="look-"] h1 { font-weight: var(--h1-weight, 700) !important; font-size: var(--h1-size, clamp(2rem, 6.4vw, 4.6rem)) !important; line-height: var(--h1-lh, 1.05) !important; }
html[class*="look-"] h2 { font-weight: var(--h2-weight, 600) !important; font-size: var(--h2-size, clamp(1.55rem, 3.8vw, 2.75rem)) !important; line-height: 1.12 !important; }
html[class*="look-"] h3 { font-weight: var(--h3-weight, 600) !important; line-height: 1.28 !important; letter-spacing: var(--h3-track, -0.01em); }
html[class*="look-"] h3.text-2xl, html[class*="look-"] h3.text-3xl { font-size: clamp(1.1rem, 2vw, 1.45rem) !important; }
html[class*="look-"] h3.text-xl { font-size: 1.08rem !important; }
html[class*="look-"] .text-2xl.font-bold, html[class*="look-"] .text-3xl.font-bold, html[class*="look-"] .text-4xl.font-bold { font-family: var(--font-head); font-weight: var(--stat-weight, 700) !important; font-stretch: var(--head-stretch, 100%); letter-spacing: var(--head-track, -0.02em); }
html[class*="look-"] p.text-2xl, html[class*="look-"] p.text-3xl { font-size: clamp(1.1rem, 2.4vw, 1.6rem) !important; line-height: 1.5 !important; }
html[class*="look-"] p.text-xl { font-size: clamp(1rem, 1.6vw, 1.15rem) !important; }
html[class*="look-"] .bg-clip-text.text-transparent { background-image: var(--grad-text) !important; font-style: var(--grad-style, normal); }
/* small caps labels: badges / chips / "What's included" etc. */
html[class*="look-"] .inline-flex.rounded-full.text-sm, html[class*="look-"] span.rounded-full.text-sm, html[class*="look-"] .text-xs.uppercase { font-family: var(--font-label) !important; letter-spacing: var(--label-track, .02em); text-transform: var(--label-case, none); font-size: var(--label-size, .78rem) !important; }

/* ---------- Text colours ---------- */
html[class*="look-"] .text-gray-900, html[class*="look-"] .text-gray-800, html[class*="look-"] .text-blue-900, html[class*="look-"] .text-green-900, html[class*="look-"] .text-orange-900, html[class*="look-"] .text-white, html[class*="look-"] .font-medium.text-white { color: var(--ink) !important; }
html[class*="look-"] .text-gray-700 { color: var(--ink-2) !important; }
html[class*="look-"] .text-gray-600, html[class*="look-"] .text-blue-100, html[class*="look-"] .text-blue-200 { color: var(--ink-2) !important; }
html[class*="look-"] .text-gray-500, html[class*="look-"] .text-gray-400, html[class*="look-"] .text-blue-300 { color: var(--ink-3) !important; }
html[class*="look-"] .text-blue-500, html[class*="look-"] .text-blue-600, html[class*="look-"] .text-blue-700, html[class*="look-"] .text-\[\#2F80ED\], html[class*="look-"] .text-cyan-300, html[class*="look-"] .text-cyan-400, html[class*="look-"] .text-cyan-600, html[class*="look-"] .text-cyan-700,
html[class*="look-"] .text-green-400, html[class*="look-"] .text-green-500, html[class*="look-"] .text-green-600, html[class*="look-"] .text-green-700, html[class*="look-"] .text-green-800 { color: var(--acc) !important; }
html[class*="look-"] .text-pink-600, html[class*="look-"] .text-purple-400, html[class*="look-"] .text-purple-600, html[class*="look-"] .text-purple-700, html[class*="look-"] .text-orange-600, html[class*="look-"] .text-orange-800, html[class*="look-"] .text-yellow-400, html[class*="look-"] .text-yellow-600 { color: var(--acc-2, var(--acc)) !important; }
html[class*="look-"] .text-red-600, html[class*="look-"] .text-red-300 { color: var(--err, #b42318) !important; }
html[class*="look-"] a.hover\:text-white:hover, html[class*="look-"] .hover\:text-white:hover, html[class*="look-"] .hover\:text-gray-900:hover, html[class*="look-"] .hover\:text-blue-700:hover, html[class*="look-"] .hover\:text-\[\#2F80ED\]:hover { color: var(--ink) !important; }
html[class*="look-"] a { text-underline-offset: 3px; }

/* ---------- One continuous canvas: no bands ---------- */
html[class*="look-"] #root .min-h-screen, html[class*="look-"] #root section, html[class*="look-"] #root footer, html[class*="look-"] #root nav, html[class*="look-"] #root div.min-h-screen.min-h-screen:not(.flex) { background-color: transparent !important; background-image: none !important; }
html[class*="look-"] #root section { position: relative; isolation: isolate; }
html[class*="look-"] #root section:first-of-type { overflow: hidden; }
html[class*="look-"] #root .min-h-screen.flex.items-center.justify-center.p-4 { position: relative; isolation: isolate; overflow: hidden; }
html[class*="look-"] #root .min-h-screen.flex.items-center.justify-center.p-4 > .max-w-6xl { position: relative; padding-top: clamp(24px, 7vw, 96px); }
html[class*="look-"] #root .min-h-screen.flex.items-center.justify-center.p-4 h1 { font-size: var(--home-h1, clamp(1.9rem, 5.6vw, 4rem)) !important; }
html[class*="look-"] #root section:first-of-type h1, html[class*="look-"] #root .min-h-screen.flex.items-center.justify-center.p-4 h1 { position: relative; }

/* ---------- Nav ---------- */
html[class*="look-"] #root nav.fixed { background: var(--nav-bg) !important; box-shadow: none !important; border-bottom: 1px solid var(--nav-line, var(--line));
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
html[class*="look-"] #root nav .ml-10.flex { align-items: center !important; gap: 2px; padding: 4px; border: 1px solid var(--navpill-line, var(--line)); border-radius: 999px; background: var(--navpill-bg, transparent); }
html[class*="look-"] #root nav .ml-10.flex > * + * { margin-left: 0 !important; }
html[class*="look-"] #root nav .ml-10.flex > button { padding: 7px 14px !important; border-radius: 999px !important; color: var(--ink-2) !important; }
html[class*="look-"] #root nav .ml-10.flex > button:hover { background: var(--navhover-bg) !important; color: var(--navhover-ink) !important; }
html[class*="look-"] #root nav .md\:hidden > div { background: var(--menu-bg) !important; border-color: var(--line) !important; border-radius: 0 0 18px 18px; }
html[class*="look-"] #root nav .md\:hidden button.block { color: var(--ink) !important; border-radius: 10px !important; }
html[class*="look-"] #root nav .md\:hidden button.block:hover { background: var(--surface-2) !important; }
html[class*="look-"] #root nav button.text-gray-700 { color: var(--ink) !important; }
html[class*="look-"] .cos-logo { display: inline-flex !important; align-items: center; line-height: 0; }
html[class*="look-"] .cos-logo img { height: 26px; width: auto; display: block; }
html[class*="look-"] h3.cos-logo img { height: 28px; }

/* ---------- Surfaces ---------- */
html[class*="look-"] #root .bg-white:not(section):not(nav), html[class*="look-"] #root .bg-gray-50:not(section), html[class*="look-"] #root .bg-blue-50:not(section), html[class*="look-"] #root .bg-green-50, html[class*="look-"] #root .bg-orange-50, html[class*="look-"] #root .bg-purple-50,
html[class*="look-"] #root .from-blue-50:not(section):not(.min-h-screen), html[class*="look-"] #root .from-cyan-50, html[class*="look-"] #root .from-gray-50, html[class*="look-"] #root .from-green-50, html[class*="look-"] #root .from-orange-50, html[class*="look-"] #root .from-purple-50, html[class*="look-"] #root .from-red-50, html[class*="look-"] #root .from-slate-50:not(section):not(.min-h-screen),
html[class*="look-"] #root .group.relative.bg-white.bg-opacity-10 {
  background: var(--surface) !important;
}
html[class*="look-"] #root [class*="rounded-2xl"].bg-white, html[class*="look-"] #root [class*="rounded-3xl"].bg-white, html[class*="look-"] #root [class*="rounded-xl"].bg-white,
html[class*="look-"] #root [class*="rounded-2xl"][class*="from-"][class*="-50"], html[class*="look-"] #root [class*="rounded-xl"][class*="from-"][class*="-50"], html[class*="look-"] #root [class*="rounded-3xl"][class*="from-"][class*="-50"],
html[class*="look-"] #root .group.relative.bg-white.bg-opacity-10 {
  border: var(--card-border, 1px solid var(--line)) !important; box-shadow: var(--card-shadow, none) !important; border-radius: var(--radius-card) !important;
  backdrop-filter: var(--card-blur, none); -webkit-backdrop-filter: var(--card-blur, none);
}
html[class*="look-"] #root [class*="rounded-2xl"][class*="hover:shadow"]:hover, html[class*="look-"] #root [class*="rounded-xl"][class*="hover:shadow"]:hover, html[class*="look-"] #root .group.relative.bg-white.bg-opacity-10:hover { border-color: var(--line-hover) !important; box-shadow: var(--card-shadow-hover, none) !important; }
html[class*="look-"] #root .shadow-md:not(nav), html[class*="look-"] #root .shadow-lg, html[class*="look-"] #root .shadow-xl, html[class*="look-"] #root .shadow-2xl { box-shadow: var(--card-shadow, none) !important; }
html[class*="look-"] #root .group.relative > .absolute.-inset-1 { display: var(--pathglow-display, none) !important; background: var(--glow-grad) !important; opacity: .35 !important; filter: blur(16px); border-radius: inherit; }
html[class*="look-"] #root .group.relative .w-2.h-2.rounded-full { background: var(--acc) !important; }
/* tinted chips */
html[class*="look-"] #root .bg-blue-100, html[class*="look-"] #root .bg-blue-200, html[class*="look-"] #root .bg-cyan-100, html[class*="look-"] #root .bg-green-100, html[class*="look-"] #root .bg-purple-100, html[class*="look-"] #root .bg-red-100, html[class*="look-"] #root .bg-yellow-100, html[class*="look-"] #root .bg-orange-100, html[class*="look-"] #root .bg-pink-100, html[class*="look-"] #root .bg-gray-100:not(.min-h-screen), html[class*="look-"] #root .bg-gray-200 {
  background-color: var(--chip-bg) !important; border-color: var(--chip-line) !important;
}
html[class*="look-"] #root .inline-flex.rounded-full[class*="bg-"][class*="-100"], html[class*="look-"] #root span.rounded-full[class*="bg-"][class*="-100"] { border: 1px solid var(--chip-line); color: var(--chip-ink) !important; background: var(--chip-bg) !important; }
html[class*="look-"] #root .inline-flex.rounded-full[class*="bg-"][class*="-100"] svg { color: var(--acc); }
/* saturated fills on non-interactive elements (icon discs, avatars) */
html[class*="look-"] #root div.bg-blue-600, html[class*="look-"] #root div.bg-purple-600, html[class*="look-"] #root div.bg-cyan-600, html[class*="look-"] #root div.bg-green-600, html[class*="look-"] #root div.bg-orange-600, html[class*="look-"] #root div.bg-red-600, html[class*="look-"] #root div.bg-gray-600, html[class*="look-"] #root div.bg-black,
html[class*="look-"] #root div[class*="bg-gradient"][class*="from-blue-5"], html[class*="look-"] #root div[class*="bg-gradient"][class*="from-blue-6"], html[class*="look-"] #root div[class*="bg-gradient"][class*="from-purple-"],
html[class*="look-"] #root div[class*="bg-gradient"][class*="from-green-"], html[class*="look-"] #root div[class*="bg-gradient"][class*="from-orange-"], html[class*="look-"] #root div[class*="bg-gradient"][class*="from-cyan-4"], html[class*="look-"] #root div[class*="bg-gradient"][class*="from-coral-"],
html[class*="look-"] #root .group.relative .rounded-full.p-6, html[class*="look-"] #root .bg-white.bg-opacity-20 {
  background: var(--disc-bg) !important; border: 1px solid var(--disc-line); color: var(--disc-ink) !important; box-shadow: none !important;
}
html[class*="look-"] #root div.bg-blue-600 svg, html[class*="look-"] #root div[class*="bg-gradient"] > svg, html[class*="look-"] #root .group.relative .rounded-full.p-6 svg { color: var(--disc-ink) !important; }
/* testimonial frame + contact info card */
html[class*="look-"] #root div.bg-gradient-to-r.from-blue-600.to-purple-600.rounded-3xl.p-1 { background: var(--frame-bg) !important; border: 0; padding: 1px !important; box-shadow: var(--frame-shadow, none) !important; border-radius: var(--radius-card-lg, var(--radius-card)) !important; }
html[class*="look-"] #root div.bg-gradient-to-r.from-blue-600.to-purple-600.rounded-3xl.p-1 > .bg-white { background: var(--frame-inner) !important; border: 0 !important; border-radius: calc(var(--radius-card-lg, var(--radius-card)) - 1px) !important; }
html[class*="look-"] #root div[class*="bg-gradient"][class*="from-blue-600"][class*="to-purple-600"].rounded-2xl,
html[class*="look-"] #root div[class*="bg-gradient"][class*="from-blue-600"][class*="to-purple-600"].rounded-3xl:not(.p-1) {
  background: var(--surface) !important; border: var(--card-border, 1px solid var(--line)) !important; border-radius: var(--radius-card) !important; color: var(--ink) !important;
}
html[class*="look-"] #root .absolute.rounded-full[class*="bg-"] { background: var(--btn-bg) !important; color: var(--btn-ink) !important; border: 0 !important; font-family: var(--font-label); }
/* CTA / stats bands -> panel on the same canvas */
html[class*="look-"] #root section[class*="from-gray-900"]:not(:first-of-type) > div { border: var(--card-border, 1px solid var(--line)); border-radius: var(--radius-panel, var(--radius-card)); padding-top: 56px; padding-bottom: 56px; background: var(--panel-bg, var(--surface)); box-shadow: var(--panel-shadow, none); }
@media (max-width: 640px) { html[class*="look-"] #root section[class*="from-gray-900"]:not(:first-of-type) > div { padding-top: 40px; padding-bottom: 40px; margin-left: 12px; margin-right: 12px; } }

/* ---------- Borders ---------- */
html[class*="look-"] #root .border-gray-100, html[class*="look-"] #root .border-gray-200, html[class*="look-"] #root .border-gray-300, html[class*="look-"] #root .border-gray-800, html[class*="look-"] #root .border-blue-100, html[class*="look-"] #root .border-blue-200, html[class*="look-"] #root .border-green-200,
html[class*="look-"] #root .border-purple-200, html[class*="look-"] #root .border-purple-300, html[class*="look-"] #root .border-orange-200, html[class*="look-"] #root .border-red-200, html[class*="look-"] #root .border-cyan-200,
html[class*="look-"] #root .border-white.border-opacity-20, html[class*="look-"] #root .border-white.border-opacity-30, html[class*="look-"] #root .border-t, html[class*="look-"] #root .border-b { border-color: var(--line) !important; }
html[class*="look-"] #root .hover\:border-blue-300:hover, html[class*="look-"] #root .hover\:border-cyan-300:hover { border-color: var(--line-hover) !important; }
html[class*="look-"] #root .h-6.w-px.bg-gray-300 { background: var(--line) !important; }

/* ---------- Buttons ---------- */
html[class*="look-"] #root button, html[class*="look-"] #root a[class*="px-"][class*="py-"][class*="rounded"] { border-radius: var(--radius-btn, 999px) !important; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease; }
html[class*="look-"] #root button[class*="bg-gradient"], html[class*="look-"] #root a[class*="bg-gradient"], html[class*="look-"] #root button.bg-blue-600, html[class*="look-"] #root button.bg-purple-600, html[class*="look-"] #root button.bg-cyan-600, html[class*="look-"] #root button.bg-\[\#FF6F61\],
html[class*="look-"] #root button.bg-green-600, html[class*="look-"] #root button.bg-orange-600, html[class*="look-"] #root button.bg-red-600, html[class*="look-"] #root .group.relative button {
  background: var(--btn-bg) !important; color: var(--btn-ink) !important; border: var(--btn-border, 0) !important; box-shadow: var(--btn-shadow, none) !important; font-family: var(--font-btn, inherit) !important; letter-spacing: var(--btn-track, 0);
}
html[class*="look-"] #root button[class*="bg-gradient"]:hover, html[class*="look-"] #root a[class*="bg-gradient"]:hover, html[class*="look-"] #root button.bg-blue-600:hover, html[class*="look-"] #root button.bg-purple-600:hover, html[class*="look-"] #root .group.relative button:hover { background: var(--btn-bg-hover, var(--btn-bg)) !important; box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none)) !important; }
html[class*="look-"] #root button.bg-white, html[class*="look-"] #root a.bg-white,
html[class*="look-"] #root button[class*="border-2"]:not([class*="bg-gradient"]), html[class*="look-"] #root a[class*="border-2"]:not([class*="bg-gradient"]) {
  background: var(--btn2-bg) !important; color: var(--btn2-ink) !important; border: var(--btn2-border) !important; box-shadow: none !important;
}
html[class*="look-"] #root button[class*="border-2"]:not([class*="bg-gradient"]):hover, html[class*="look-"] #root a[class*="border-2"]:not([class*="bg-gradient"]):hover, html[class*="look-"] #root button.bg-white:hover { background: var(--btn2-bg-hover) !important; color: var(--btn2-ink) !important; }
html[class*="look-"] #root .hover\:bg-cyan-400:hover { background: var(--btn2-bg-hover) !important; color: var(--btn2-ink) !important; }
/* light-tinted action rows on /contact (open WhatsApp) */
html[class*="look-"] #root button.from-green-50, html[class*="look-"] #root button.from-blue-50, html[class*="look-"] #root button.from-purple-50, html[class*="look-"] #root button.from-orange-50, html[class*="look-"] #root button.from-cyan-50, html[class*="look-"] #root button.from-red-50, html[class*="look-"] #root button.from-gray-50 {
  background: var(--surface) !important; color: var(--ink) !important; border: var(--card-border, 1px solid var(--line)) !important; box-shadow: none !important; border-radius: var(--radius-card) !important;
}
html[class*="look-"] #root button.from-green-50:hover, html[class*="look-"] #root button.from-blue-50:hover, html[class*="look-"] #root button.from-purple-50:hover { border-color: var(--line-hover) !important; background: var(--surface-2) !important; }
/* WhatsApp: the only #25D366 */
html[class*="look-"] #root button.wa-cta.wa-cta, html[class*="look-"] #root .wa-cta.wa-cta { background: #25D366 !important; background-image: none !important; color: #04170b !important; border: 0 !important; font-weight: 700 !important; box-shadow: var(--wa-shadow, none) !important; }
html[class*="look-"] #root button.wa-cta.wa-cta:hover { background: #1ebe5a !important; }
/* carousel dots, footer discs */
html[class*="look-"] #root button.w-4.h-4 { padding: 0 !important; box-shadow: none !important; border: 0 !important; background: var(--dot, rgba(0,0,0,.2)) !important; }
html[class*="look-"] #root button.w-4.h-4.w-8 { background: var(--dot-on, var(--ink)) !important; }
html[class*="look-"] #root footer a.bg-gray-800 { background: var(--surface) !important; border: 1px solid var(--line); color: var(--ink) !important; }
html[class*="look-"] #root footer a.bg-gray-800:hover { border-color: var(--line-hover); }
html[class*="look-"] #root footer { border-top: 1px solid var(--line); }
html[class*="look-"] #root footer h4 { font-size: .95rem !important; }
html[class*="look-"] #root .hover\:bg-gray-50:hover, html[class*="look-"] #root .hover\:bg-gray-700:hover { background-color: var(--surface-2) !important; }

/* ---------- Forms ---------- */
html[class*="look-"] #root input, html[class*="look-"] #root select, html[class*="look-"] #root textarea { background: var(--input-bg) !important; color: var(--ink) !important; border: 1px solid var(--input-line, var(--line)) !important; border-radius: var(--radius-input, 10px) !important; }
html[class*="look-"] #root input[type="email"].rounded-full { border-radius: 999px !important; }
html[class*="look-"] #root input::placeholder, html[class*="look-"] #root textarea::placeholder { color: var(--placeholder) !important; opacity: 1; }
html[class*="look-"] #root select option { background: var(--bg); color: var(--ink); }
html[class*="look-"] #root input:focus, html[class*="look-"] #root select:focus, html[class*="look-"] #root textarea:focus { outline: none !important; border-color: var(--focus) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; }
html[class*="look-"] #root label { color: var(--ink) !important; }
html[class*="look-"] #root a:focus-visible, html[class*="look-"] #root button:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 3px; }

/* ---------- Placeholders: stars as empty outlines, neutral avatar ---------- */
html[class*="look-"] #root svg.text-yellow-400.fill-current { fill: none !important; color: var(--ink-3) !important; opacity: .6; }
html[class*="look-"] #root img[src="/placeholder.svg"] { background: var(--surface-2); border-color: var(--line) !important; filter: var(--ph-filter, grayscale(1)); }

/* ---------- Modals ---------- */
html[class*="look-"] #root .fixed.inset-0 .bg-white, html[class*="look-"] #root .fixed.inset-0 [class*="rounded"][class*="bg-white"] { background: var(--modal-bg) !important; }
html[class*="look-"] #root .fixed.inset-0.bg-black { background: var(--scrim, rgba(0,0,0,.55)) !important; backdrop-filter: blur(6px); }
html[class*="look-"] #root .bg-gray-100.min-h-screen p { color: var(--ink-2) !important; }

/* ---------- Mobile fit ---------- */
@media (max-width: 640px) {
  html[class*="look-"] #root .grid.grid-cols-3 .text-2xl { font-size: 1.1rem !important; }
  html[class*="look-"] #root .grid.grid-cols-3 .text-sm { font-size: .72rem !important; }
  html[class*="look-"] #root .text-4xl.font-bold:not(h1):not(h2) { font-size: 1.8rem !important; }
  html[class*="look-"] #root .p-12 { padding: 1.5rem !important; }
  html[class*="look-"] h1, html[class*="look-"] h2 { overflow-wrap: break-word; }
}
@media (prefers-reduced-motion: reduce) {
  html[class*="look-"] *, html[class*="look-"] *::before, html[class*="look-"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html[class*="look-"] #root [class*="hover:scale"]:hover { transform: none !important; }
}