/* ==========================================================================
   CreatorOne Core — widget styles.
   Uses the theme's CSS variables (--c1-*) with safe fallbacks so widgets
   also look right on non-CreatorOne themes.
   ========================================================================== */

/* Scroll-reveal for repeated rows/cards (Process, Bento, Pricing, Testimonial):
   the theme already ships a full GSAP + ScrollTrigger motion system
   (assets/js/motion.js) driven by the .c1-reveal / .c1-stagger classes below
   — see preset-editorial.css's ".js-anim .c1-reveal" rule for the hidden
   initial state and motion.js for the reveal-on-scroll wiring. No separate
   CSS or JS needed here; widgets just need the class on their markup. */

.c1-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 28px; border-radius: var(--c1-btn-radius, 999px);
	font-weight: 600; border: 1px solid transparent; cursor: pointer;
	transition: transform .2s ease, background-position .4s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.c1-btn--primary {
	background: linear-gradient(120deg, var(--c1-grad-a, #bb7ae6), var(--c1-grad-b, #2563eb));
	background-size: 160% 160%; background-position: 0% 50%;
	color: #fff; border: 0; box-shadow: 0 10px 34px var(--c1-glow, rgba(37,99,235,.35));
	gap: 8px;
}
.c1-btn--primary:hover { transform: translateY(-2px); background-position: 100% 50%; color: #fff; box-shadow: 0 16px 46px var(--c1-glow, rgba(37,99,235,.35)); }
/* Arrow glyph on every primary CTA — a small rightward nudge on hover reads
   as "go" without being distracting. Ghost/outline buttons stay arrow-free
   so secondary actions (Contact, Work with me...) don't visually compete. */
.c1-btn--primary::after {
	content: "";
	width: 16px; height: 16px; flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
	transition: transform .25s ease;
}
.c1-btn--primary:hover::after { transform: translateX(4px); }
.c1-btn--ghost { background: transparent; border: 1px solid var(--c1-hairline, rgba(255,255,255,.12)); color: var(--c1-ink, #fff); }
.c1-btn--ghost:hover { background: var(--c1-glass-bg, rgba(255,255,255,.06)); border-color: var(--c1-primary, #2563eb); color: var(--c1-ink, #fff); }
.c1-btn--gradient { background: linear-gradient(120deg, var(--c1-grad-a), var(--c1-grad-b)); color: #fff; border: 0; }

/* ---------- Hero ---------- */
/* Several demos have a stray Elementor "Advanced > Transform" offset baked
   into the widget wrapper around the Hero (e.g. a permanent translateY of
   ~40px, left over from early layout experiments — it never resets, it's
   not a scroll/entrance animation). It pushes the whole Hero widget down,
   which combined with the hero's own top padding created a visible flat
   gap of plain page background between the sticky header and the hero's
   gradient backdrop. Neutralize it unconditionally wherever it wraps the
   Hero so every demo's hero sits flush under the header. */
.elementor-element:has(> .elementor-widget-container .c1-hero) { transform: none !important; }
/* Some demos also carry an extra, redundant top padding on the Elementor
   SECTION that wraps the Hero widget (baked into that demo's own saved
   layout, on top of the Hero's own generous internal padding) — same
   symptom, different cause. The Hero already provides all the spacing it
   needs via its own Style controls, so this outer section padding is
   always dead weight; remove it everywhere the Hero is the section's
   content, on every page type (one-page home, archived showcase demos,
   or a real single-demo buyer site alike). */
.elementor-top-section:has(.c1-hero) { padding-top: 0 !important; }
.c1-hero { position: relative; text-align: center; overflow: hidden; }
.c1-hero__grid {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(var(--c1-grid, rgba(255,255,255,.035)) 1px, transparent 1px),
		linear-gradient(90deg, var(--c1-grid, rgba(255,255,255,.035)) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 35%, #000 0%, transparent 72%);
	mask-image: radial-gradient(ellipse 65% 55% at 50% 35%, #000 0%, transparent 72%);
}
.c1-hero__inner { position: relative; z-index: 2; max-width: 1060px; margin: 0 auto; }
/* Soft dark/light vignette directly behind the badge+eyebrow+headline so
   they stay readable no matter how bright the glow orb is at that exact
   spot — text color alone isn't a reliable enough contrast guarantee since
   the orb's hue shifts per demo. */
.c1-hero__inner::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -10% -14%;
	background: radial-gradient(60% 65% at 50% 26%, rgba(0,0,0,.52), transparent 72%);
}
[data-theme="light"] .c1-hero__inner::before { background: radial-gradient(60% 65% at 50% 26%, rgba(255,255,255,.58), transparent 72%); }
.c1-hero__orb-a { width: 460px; height: 460px; top: -120px; left: 50%; transform: translateX(-70%); }
.c1-hero__orb-b { width: 420px; height: 420px; top: -100px; left: 50%; transform: translateX(-30%); }
/* Floating glass stat chips — with depth + icon */
.c1-hero__float {
	position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
	padding: 9px 15px 9px 9px; border-radius: 14px; font-size: 13px; color: var(--c1-text);
	background: var(--c1-hero-float-bg, linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)));
	border: 1px solid rgba(255,255,255,.13);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 16px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
	animation: c1-float 6s ease-in-out infinite;
}
[data-theme="light"] .c1-hero__float { box-shadow: 0 24px 60px rgba(20,23,40,.18), inset 0 1px 0 rgba(255,255,255,.9); border-color: rgba(0,0,0,.08); }
.c1-hero__float b { color: var(--c1-ink); font-family: var(--c1-font-heading); font-size: 15px; }
.c1-hero__float-ic {
	width: 30px; height: 30px; border-radius: 9px; flex: none;
	display: inline-flex; align-items: center; justify-content: center; color: var(--c1-hero-float-icon-color, #fff);
	background: linear-gradient(140deg, var(--c1-grad-a), var(--c1-grad-b));
	box-shadow: 0 6px 18px var(--c1-glow);
}
.c1-hero__float-ic svg { width: 16px; height: 16px; }
.c1-hero__float-ic i, .c1-hero__float-ic svg { color: var(--c1-hero-float-icon-color, #fff); fill: var(--c1-hero-float-icon-color, #fff); font-size: 15px; line-height: 1; }
.c1-hero__float-ic svg path { fill: var(--c1-hero-float-icon-color, #fff); }
/* Balanced composition: one anchor mid-left, two spread on the right,
   all clear of the centered headline. */
.c1-hero__float--1 { top: 10%; left: 5%;  animation-delay: 0s; }   /* 4.9 rating */
.c1-hero__float--2 { top: 10%; right: 5%; animation-delay: 1.1s; } /* 250K community */
.c1-hero__float--3 { bottom: 8%; right: 6%; animation-delay: 2.2s; } /* 120+ projects — clear of the larger headline band */
@keyframes c1-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 1280px) {
	.c1-hero__float--1 { left: 1%; }
	.c1-hero__float--2 { right: 1%; }
	.c1-hero__float--3 { right: 2%; }
}
@media (max-width: 1080px) { .c1-hero__float { display: none; } }
.c1-hero__badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px; border-radius: 999px; margin: 0 auto 26px;
	font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--c1-hero-badge-text, var(--c1-text, #fff));
	background: var(--c1-hero-badge-bg, rgba(0,0,0,.32)); border: 1px solid var(--c1-hairline, rgba(255,255,255,.14));
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
	/* Guarantees the label reads over any glow color/brightness — some
	   demos' Style-tab badge background is set nearly transparent, which
	   read fine over a cooler/darker glow but left muted text almost
	   unreadable over a bright warm one (amber, green). A soft drop
	   shadow keeps contrast without changing the badge's own background. */
	text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
[data-theme="light"] .c1-hero__badge { text-shadow: 0 1px 4px rgba(255,255,255,.55); }
[data-theme="light"] .c1-hero__badge { background: var(--c1-hero-badge-bg, rgba(255,255,255,.6)); }
.c1-hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c1-grad-a, #bb7ae6); box-shadow: 0 0 10px var(--c1-grad-a, #bb7ae6); }
.c1-hero__avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; margin: 0 auto 24px; }
/* Force badge + eyebrow onto their own lines */
.c1-hero__badge, .c1-hero__eyebrow { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.c1-hero__badge { display: flex; }
.c1-hero__eyebrow {
	text-transform: uppercase; letter-spacing: 3px; font-size: 13px; font-weight: 600; margin-bottom: 20px;
	background: linear-gradient(100deg, var(--c1-grad-a), var(--c1-grad-b));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: var(--c1-hero-eyebrow-color, transparent); color: var(--c1-hero-eyebrow-color, transparent);
}
.c1-hero__name { font-size: clamp(56px, 4vw + 32px, 152px); line-height: .96; letter-spacing: -0.055em; margin: 0 0 30px; }
.c1-hero__tagline { font-size: 20px; color: var(--c1-hero-tagline-color, var(--c1-text)); margin: 0 auto 38px; max-width: 640px; }
.c1-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.c1-hero__proof { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; }
.c1-hero__avatars { display: flex; }
.c1-hero__avatars img {
	width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-left: -12px;
	border: 2px solid var(--c1-hero-avatar-border, var(--c1-canvas));
	/* Elementor's own frontend.css ships ".elementor img { border-color: currentcolor }"
	   at equal specificity and loads after this stylesheet, so it silently wins and
	   the ring inherits whatever text color cascades down to the <img> instead of our
	   intended canvas-matching border — on some demos that lands on the accent color
	   (e.g. pink on Influencer), reading as a stray colored ring around each avatar.
	   Same class of Elementor reset already worked around elsewhere in this file. */
	border-color: var(--c1-hero-avatar-border, var(--c1-canvas)) !important;
}
.c1-hero__avatars img:first-child { margin-left: 0; }
.c1-hero__proof-text { font-size: 14px; color: var(--c1-hero-proof-color, var(--c1-muted)); }
.c1-hero[style*="left"] .c1-hero__inner, .c1-hero[style*="left"] .c1-hero__actions, .c1-hero[style*="left"] .c1-hero__proof { margin-left: 0; justify-content: flex-start; }

/* ---------- Hero: two-column split layout (copy left, image right) ----------
   Opt-in via a "Hero image" field on the widget — see class-hero.php. Gives
   some demos a genuinely different composition (left-aligned title + real
   photo/mockup with floating chips clustered around it) instead of every
   hero being the same centered text block. */
.c1-hero--split { text-align: left; }
.c1-hero--split .c1-hero__row {
	position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr;
	gap: 56px; align-items: center; max-width: 1200px; margin: 0 auto;
}
.c1-hero--split .c1-hero__inner { max-width: none; margin: 0; }
.c1-hero--split .c1-hero__badge, .c1-hero--split .c1-hero__eyebrow { margin-left: 0; margin-right: auto; }
.c1-hero--split .c1-hero__actions, .c1-hero--split .c1-hero__proof { justify-content: flex-start; }
.c1-hero--split .c1-hero__tagline { margin-left: 0; margin-right: 0; }
.c1-hero__media { position: relative; }
.c1-hero__media img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px;
	border: 1px solid var(--c1-glass-border); box-shadow: var(--c1-shadow);
	position: relative; z-index: 1;
}
.c1-hero__media::before {
	content: ""; position: absolute; inset: -8%; z-index: 0; pointer-events: none;
	background: radial-gradient(closest-side, var(--c1-glow), transparent 72%); filter: blur(30px); opacity: .85;
}
/* Reposition the floating stat chips to cluster around the image column
   instead of their default centered-hero spread. */
.c1-hero--split .c1-hero__float--1 { top: auto; bottom: 10%; left: auto; right: 84%; }
.c1-hero--split .c1-hero__float--2 { top: 8%; right: 2%; }
.c1-hero--split .c1-hero__float--3 { top: auto; bottom: -4%; right: 8%; }
@media (max-width: 960px) {
	.c1-hero--split .c1-hero__row { grid-template-columns: 1fr; gap: 32px; }
	.c1-hero--split { text-align: center; }
	.c1-hero--split .c1-hero__badge, .c1-hero--split .c1-hero__eyebrow { margin-left: auto; }
	.c1-hero--split .c1-hero__actions, .c1-hero--split .c1-hero__proof { justify-content: center; }
	.c1-hero__media { order: -1; max-width: 340px; margin: 0 auto; }
}

/* ---------- Bento feature grid ---------- */
.c1-bento { position: relative; isolation: isolate; }
.c1-bento > * { position: relative; z-index: 1; }
.c1-bento::before {
	content: ""; position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 0%, transparent 75%);
}
.c1-bento::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	bottom: -90px; left: -70px; width: 260px; height: 260px; border-radius: 50%;
	background: var(--c1-grad-b); filter: blur(75px); opacity: .16;
	animation: c1-orb-drift-b 24s ease-in-out infinite;
}
.c1-bento__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
/* Masonry via CSS columns — aligned, no empty cards, fully responsive */
/* Real CSS Grid (not columns/masonry) — every card in the same row shares
   that row's height, so borders line up regardless of which cards carry an
   image or extra copy. "normal" cards sit two-up; "is-wide" takes the full
   row; "is-tall" doubles a card's row-span for a genuine bento mix. */
.c1-bento__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, auto);
	grid-auto-flow: dense; gap: 20px; counter-reset: c1bento;
}
.c1-bento__item {
	grid-column: span 2; display: flex; flex-direction: column;
	padding: 30px; border-radius: 22px;
	background: var(--c1-glass-bg); border: 1px solid var(--c1-glass-border);
	-webkit-backdrop-filter: blur(var(--c1-glass-blur)); backdrop-filter: blur(var(--c1-glass-blur));
	box-shadow: var(--c1-glass-inset); position: relative; overflow: hidden;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
	counter-increment: c1bento;
}
.c1-bento__item.is-wide { grid-column: span 4; }
.c1-bento__item.is-tall { grid-row: span 2; }
.c1-bento__item.is-wide.is-tall { grid-column: span 4; }
.c1-bento__item p { flex: 1 0 auto; }
.c1-bento__item img { flex: none; }
@media (max-width: 1080px) {
	.c1-bento__item { grid-column: span 4; }
	.c1-bento__item.is-tall { grid-row: span 1; }
}
.c1-bento__item:hover { transform: translateY(-4px); border-color: var(--c1-primary); box-shadow: 0 18px 50px var(--c1-glow); }
.c1-bento__item::after {
	content: "0" counter(c1bento);
	position: absolute; top: 2px; right: 22px; z-index: 0; pointer-events: none;
	font-family: var(--c1-font-heading); font-size: 88px; font-weight: 700;
	letter-spacing: -0.04em; line-height: 1; color: var(--c1-ink); opacity: .04;
	-webkit-mask-image: linear-gradient(180deg, #000 12%, transparent 82%);
	mask-image: linear-gradient(180deg, #000 12%, transparent 82%);
}
.c1-bento__icon { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; background: linear-gradient(140deg, var(--c1-grad-a), var(--c1-grad-b)); color: #fff; box-shadow: 0 8px 30px var(--c1-glow); }
.c1-bento__icon svg { width: 26px; height: 26px; }
.c1-bento__item h3 { font-size: 23px; font-weight: 700; margin: 0 0 8px; }
.c1-bento__item p { color: var(--c1-text); margin: 0; font-size: 15px; }
.c1-bento__item img { margin-top: 22px; border-radius: 14px; border: 1px solid var(--c1-glass-border); width: 100%; }
.c1-bento__glow { position: absolute; width: 180px; height: 180px; border-radius: 50%; filter: blur(60px); opacity: .3; right: -40px; bottom: -60px; background: var(--c1-primary); }
@media (max-width: 860px) { .c1-bento__grid { columns: 1; } }

/* ---------- Bento layout variants ----------
   Same widget, five genuinely different structures — picked per profession
   instead of reusing the glass-card grid everywhere with just new colors. */

/* Masonry gallery: full-bleed photo, caption overlaid at the bottom. */
.c1-masonry__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); grid-auto-flow: dense; gap: 20px; }
.c1-masonry__item { position: relative; grid-column: span 2; min-height: 260px; border-radius: 22px; overflow: hidden; isolation: isolate; border: 1px solid var(--c1-glass-border); transition: transform .3s ease, border-color .3s ease; }
.c1-masonry__item.is-wide { grid-column: span 4; }
.c1-masonry__item.is-tall { grid-row: span 2; }
.c1-masonry__item:hover { transform: translateY(-4px); border-color: var(--c1-primary); }
/* !important on height/width here (and everywhere else a full-bleed photo
   fills an absolutely-positioned box below) is load-bearing, not decorative:
   Elementor's own frontend.css ships a global `.elementor img { height:
   auto }` reset. That selector ties in specificity with ours (one class +
   one type each), so without !important the LAST-loaded stylesheet wins the
   tie regardless of our intent — which silently collapsed every masonry/
   grid3/reel/list-thumbnail photo back to its native (often square) aspect
   ratio instead of covering its box, visible as photos "floating" in a
   corner of an otherwise-empty tall/wide card. */
.c1-masonry__item img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .5s ease; }
.c1-masonry__item:hover img { transform: scale(1.06); }
.c1-masonry__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.78) 100%); }
.c1-masonry__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; z-index: 1; }
.c1-masonry__icon { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--c1-grad-a), var(--c1-grad-b)); color: #fff; margin-bottom: 10px; }
.c1-masonry__icon svg { width: 18px; height: 18px; }
.c1-masonry__caption h3 { color: #fff; font-size: 20px; margin: 0 0 4px; }
.c1-masonry__caption p { color: rgba(255,255,255,.75); margin: 0; font-size: 14px; }
@media (max-width: 1080px) { .c1-masonry__item { grid-column: span 4; } .c1-masonry__item.is-tall { grid-row: span 1; } }

/* Stat columns: big editorial numerals, no card chrome, thin dividers. */
.c1-stats__cols { display: flex; flex-wrap: wrap; border-top: 1px solid var(--c1-glass-border); border-bottom: 1px solid var(--c1-glass-border); }
.c1-stats__col { flex: 1 1 0; min-width: 200px; padding: 40px 28px; text-align: center; position: relative; }
.c1-stats__col + .c1-stats__col::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--c1-glass-border); }
.c1-stats__icon { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center; background: var(--c1-glass-bg); border: 1px solid var(--c1-glass-border); color: var(--c1-primary); margin-bottom: 16px; }
.c1-stats__icon svg { width: 16px; height: 16px; }
.c1-stats__num { font-family: var(--c1-font-heading); font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1; margin-bottom: 10px;
	background: linear-gradient(120deg, var(--c1-grad-a), var(--c1-grad-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.c1-stats__col p { color: var(--c1-text); font-size: 14px; margin: 0; }
@media (max-width: 860px) { .c1-stats__cols { flex-direction: column; } .c1-stats__col + .c1-stats__col::before { display: none; } .c1-stats__col { border-bottom: 1px solid var(--c1-glass-border); } }

/* Row list: icon/thumbnail left, copy middle, number + arrow right. Episode/playlist feel. */
.c1-list__rows { display: flex; flex-direction: column; border-top: 1px solid var(--c1-glass-border); }
.c1-list__row { display: flex; align-items: center; gap: 22px; padding: 26px 10px; border-bottom: 1px solid var(--c1-glass-border); transition: background .2s ease, padding-left .2s ease; }
.c1-list__row:hover { background: var(--c1-glass-bg); padding-left: 20px; }
.c1-list__icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--c1-grad-a), var(--c1-grad-b)); color: #fff; box-shadow: 0 8px 24px var(--c1-glow); }
.c1-list__icon svg { width: 22px; height: 22px; }
.c1-list__thumb { position: relative; flex: none; width: 74px; height: 74px; border-radius: 14px; overflow: hidden; }
.c1-list__thumb img { width: 100% !important; height: 100% !important; object-fit: cover; }
.c1-list__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.c1-list__play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; margin-left: 2px; }
.c1-list__body { flex: 1; min-width: 0; }
.c1-list__body h3 { font-size: 19px; margin: 0 0 4px; }
.c1-list__body p { color: var(--c1-text); margin: 0; font-size: 14px; }
.c1-list__num { flex: none; font-family: var(--c1-font-heading); font-size: 13px; font-weight: 700; color: var(--c1-muted); }
.c1-list__arrow { flex: none; color: var(--c1-primary); transition: transform .2s ease; }
.c1-list__row:hover .c1-list__arrow { transform: translateX(4px); }
@media (max-width: 640px) { .c1-list__row { flex-wrap: wrap; } .c1-list__num { display: none; } }

/* Square grid: even 3-up tiles, Instagram-style, always-on caption. */
.c1-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.c1-grid3__item { position: relative; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; isolation: isolate; border: 1px solid var(--c1-glass-border); }
.c1-grid3__item img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .4s ease; }
.c1-grid3__item:hover img { transform: scale(1.06); }
.c1-grid3__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.8) 100%); }
.c1-grid3__icon { position: absolute; top: 14px; left: 14px; z-index: 1; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; }
.c1-grid3__icon svg { width: 15px; height: 15px; }
.c1-grid3__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; z-index: 1; }
.c1-grid3__caption h3 { color: #fff; font-size: 16px; margin: 0 0 2px; }
.c1-grid3__caption p { color: rgba(255,255,255,.72); margin: 0; font-size: 12.5px; }
@media (max-width: 640px) { .c1-grid3 { grid-template-columns: repeat(2, 1fr); } }

/* Reel carousel: tall narrow phone-shaped cards, horizontal scroll. */
.c1-reel { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.c1-reel::-webkit-scrollbar { height: 6px; }
.c1-reel::-webkit-scrollbar-thumb { background: var(--c1-glass-border); border-radius: 99px; }
.c1-reel__card { position: relative; flex: 0 0 auto; width: 200px; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; isolation: isolate; scroll-snap-align: start; border: 1px solid var(--c1-glass-border); }
.c1-reel__card img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.c1-reel__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 30%, rgba(0,0,0,.85) 100%); }
.c1-reel__play { position: absolute; top: 14px; right: 14px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; }
.c1-reel__play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; margin-left: 2px; }
.c1-reel__icon { position: absolute; top: 14px; left: 14px; z-index: 1; width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--c1-grad-a), var(--c1-grad-b)); color: #fff; }
.c1-reel__icon svg { width: 14px; height: 14px; }
.c1-reel__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; z-index: 1; }
.c1-reel__caption h3 { color: #fff; font-size: 15px; margin: 0 0 2px; }
.c1-reel__caption p { color: rgba(255,255,255,.72); margin: 0; font-size: 12px; }
@media (max-width: 640px) { .c1-reel__card { width: 160px; } }

/* ---------- Trusted-by logos ---------- */
.c1-logos { text-align: center; }
.c1-logos__label { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: var(--c1-muted); margin-bottom: 26px; }
.c1-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px; }
.c1-logos__row img, .c1-logos__track img { height: 26px; width: auto; opacity: .7; transition: opacity .2s ease; }
/* white logo PNGs must flip dark in light mode (else invisible on white) */
[data-theme="light"] .c1-logos__row img, [data-theme="light"] .c1-logos__track img { filter: invert(1) grayscale(1) brightness(.28); opacity: .62; }
[data-theme="light"] .c1-hero__float { background: var(--c1-hero-float-bg, #fff); }
.c1-logos__row img:hover, .c1-logos__track img:hover { opacity: 1; }
.c1-logos__text { font-family: var(--c1-font-heading); font-weight: 600; font-size: 20px; color: var(--c1-muted); opacity: .8; }
.c1-logos__marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.c1-logos__track { display: inline-flex; align-items: center; gap: 34px; white-space: nowrap; animation: c1-marquee linear infinite; padding-left: 34px; }
.c1-logos__track .c1-logos__text { font-size: 20px; }
.c1-logos__marquee:hover .c1-logos__track { animation-play-state: paused; }

/* ---------- Process / steps ---------- */
.c1-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.c1-process__grid::before {
	content: ""; position: absolute; top: 32px; left: 6%; right: 6%; height: 1px;
	background: linear-gradient(90deg, transparent, var(--c1-primary), var(--c1-grad-a), transparent); opacity: .45;
}
.c1-step { position: relative; }
/* Colored gradient fill instead of a flat canvas-colored disc — the "cards"
   layout's gradient-text numerals already read as vibrant/on-brand; the
   horizontal and vertical circles were the odd ones out, nearly blending
   into the dark canvas with only a faint border + glow to mark them. */
.c1-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 66px; height: 66px; border-radius: 50%; margin-bottom: 18px;
	font-family: var(--c1-font-heading); font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
	color: var(--c1-accent-text, #fff); background: linear-gradient(135deg, var(--c1-grad-a), var(--c1-grad-b));
	box-shadow: 0 0 0 6px var(--c1-canvas), 0 10px 30px var(--c1-glow); position: relative; z-index: 1;
}
.c1-step__title { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.c1-step__text { color: var(--c1-text); font-size: 15px; margin: 0; }
@media (max-width: 860px) {
	.c1-process__grid { grid-template-columns: 1fr 1fr; }
	.c1-process__grid::before { display: none; }
}
@media (max-width: 520px) { .c1-process__grid { grid-template-columns: 1fr; } }

/* Vertical timeline: steps stacked top-to-bottom, one line running down the
   left edge through each number circle — reads as a case-study/project log
   rather than an at-a-glance overview strip. */
/* Steps alternate left/right of a centered line — a single left-aligned
   column left roughly half the section empty on desktop widths, since the
   column was capped at 640px inside a much wider 1200px section. Alternating
   uses the full row width the way a real editorial timeline would. */
.c1-process-vert { position: relative; max-width: 880px; margin: 0 auto; }
.c1-process-vert::before { content: ""; position: absolute; top: 33px; bottom: 33px; left: 50%; transform: translateX(-50%); width: 1px; background: linear-gradient(180deg, var(--c1-primary), var(--c1-grad-a), transparent); opacity: .45; }
.c1-process-vert__row { position: relative; display: grid; grid-template-columns: 1fr 66px 1fr; align-items: flex-start; column-gap: 32px; padding-bottom: 48px; }
.c1-process-vert__row:last-child { padding-bottom: 0; }
.c1-process-vert__num {
	grid-column: 2; justify-self: center;
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 66px; height: 66px; border-radius: 50%;
	font-family: var(--c1-font-heading); font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
	color: var(--c1-accent-text, #fff); background: linear-gradient(135deg, var(--c1-grad-a), var(--c1-grad-b));
	box-shadow: 0 0 0 6px var(--c1-canvas), 0 10px 30px var(--c1-glow);
}
.c1-process-vert__body { grid-column: 3; padding-top: 12px; }
.c1-process-vert__spacer { grid-column: 1; }
.c1-process-vert__row.is-left .c1-process-vert__body { grid-column: 1; text-align: right; }
.c1-process-vert__row.is-left .c1-process-vert__spacer { grid-column: 3; }
@media (max-width: 720px) {
	/* Alternating columns need real width to read as intentional; below that,
	   collapse back to one straight left-aligned column (num + body inline). */
	.c1-process-vert { max-width: 420px; margin: 0; }
	.c1-process-vert::before { left: 26px; transform: none; }
	.c1-process-vert__row { grid-template-columns: 52px 1fr; column-gap: 18px; padding-bottom: 36px; }
	.c1-process-vert__num { grid-column: 1; width: 52px; height: 52px; font-size: 19px; }
	.c1-process-vert__body,
	.c1-process-vert__row.is-left .c1-process-vert__body { grid-column: 2; text-align: left; padding-top: 8px; }
	.c1-process-vert__spacer,
	.c1-process-vert__row.is-left .c1-process-vert__spacer,
	.c1-process-vert__row.is-right .c1-process-vert__spacer { display: none; }
}

/* Milestone cards: each step is its own bordered block, no connecting line —
   reads as distinct deliverables rather than one continuous flow. */
.c1-process-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.c1-process-cards__card { padding: 28px 24px; border-radius: 18px; background: var(--c1-glass-bg, rgba(255,255,255,.05)); border: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); }
.c1-process-cards__num { display: block; font-family: var(--c1-font-heading); font-size: 32px; font-weight: 700; margin-bottom: 14px; background: linear-gradient(120deg, var(--c1-grad-a), var(--c1-grad-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@media (max-width: 860px) { .c1-process-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .c1-process-cards { grid-template-columns: 1fr; } }

/* ---------- CTA banner ---------- */
.c1-cta {
	position: relative; overflow: hidden; text-align: center;
	padding: 72px 40px; border-radius: 28px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c1-grad-a) 90%, #000), color-mix(in srgb, var(--c1-grad-b) 90%, #000));
	box-shadow: 0 30px 80px var(--c1-glow);
}
.c1-cta::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image: radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.18), transparent 60%);
	background-size: auto;
}
.c1-cta::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	top: -60px; left: -40px; width: 200px; height: 200px; border-radius: 50%;
	background: rgba(255,255,255,.55); filter: blur(60px); opacity: .25;
	animation: c1-orb-drift-a 18s ease-in-out infinite;
}
.c1-cta h2 { color: #fff; font-size: clamp(34px, 4vw, 54px); font-weight: 700; margin: 0 0 14px; position: relative; }
.c1-cta p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 28px; position: relative; }
.c1-cta .c1-btn { position: relative; background: #fff; color: #0a0a0b; }
.c1-cta .c1-btn:hover { transform: translateY(-2px); background: #fff; }

/* ---------- Link hub ---------- */
.c1-linkhub { max-width: 560px; margin: 0 auto; }
.c1-linkhub__heading { text-align: center; margin-bottom: 28px; }
.c1-linkhub__list { display: flex; flex-direction: column; gap: 14px; }
.c1-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	border-radius: 16px;
	background: var(--c1-glass-bg, rgba(255,255,255,.05));
	-webkit-backdrop-filter: blur(var(--c1-glass-blur, 12px));
	backdrop-filter: blur(var(--c1-glass-blur, 12px));
	color: var(--c1-ink, #fff);
	font-weight: 600;
	border: 1px solid var(--c1-glass-border, rgba(255,255,255,.12));
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.c1-link:hover { transform: translateY(-2px); border-color: var(--c1-primary, #2563eb); box-shadow: 0 8px 40px var(--c1-glow, rgba(37,99,235,.35)); }
.c1-link svg, .c1-link i { width: 22px; height: 22px; font-size: 20px; }
.c1-link__text { display: flex; flex-direction: column; }
.c1-link__sub { font-weight: 400; font-size: 13px; opacity: .7; }

/* ---------- Stats ---------- */
.c1-stats {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
	background: var(--c1-glass-bg); border: 1px solid var(--c1-glass-border); border-radius: 22px;
	-webkit-backdrop-filter: blur(var(--c1-glass-blur)); backdrop-filter: blur(var(--c1-glass-blur));
	box-shadow: var(--c1-glass-inset); overflow: hidden;
	position: relative; isolation: isolate;
}
.c1-stats::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.c1-stats::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	top: -70px; right: -50px; width: 220px; height: 220px; border-radius: 50%;
	background: var(--c1-grad-a); filter: blur(60px); opacity: .22;
	animation: c1-orb-drift-a 20s ease-in-out infinite;
}
.c1-stat { text-align: center; flex: 1 1 160px; padding: 34px 20px; position: relative; z-index: 1; }
.c1-stat + .c1-stat::before { content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: var(--c1-glass-border); }
.c1-stat__num { display: block; font-family: var(--c1-font-heading); font-size: clamp(34px, 5vw, 56px); font-weight: 700; color: var(--c1-ink); line-height: 1; letter-spacing: -0.03em; }
.c1-stat__num { background: linear-gradient(180deg, var(--c1-ink), color-mix(in srgb, var(--c1-ink) 55%, var(--c1-primary))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.c1-stat__label { display: block; margin-top: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c1-muted); }

/* ---------- Content grid ---------- */
.c1-contentgrid__heading { text-align: center; margin-bottom: 40px; }
.c1-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.c1-card {
	background: var(--c1-glass-bg); border: 1px solid var(--c1-glass-border); border-radius: 20px;
	padding: 14px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
	-webkit-backdrop-filter: blur(var(--c1-glass-blur)); backdrop-filter: blur(var(--c1-glass-blur));
}
.c1-card:hover { transform: translateY(-5px); border-color: var(--c1-primary); box-shadow: 0 18px 50px var(--c1-glow); }
.c1-card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; margin-bottom: 16px; }
.c1-card__title { font-size: 21px; font-weight: 700; margin: 0 8px 8px; }
.c1-card__excerpt { font-size: 14px; color: var(--c1-text); margin: 0 8px 12px; }

/* ---------- Subscribe (slim dark utility bar — quieter than the gradient CTA, tighter than the Contact card) ---------- */
.c1-subscribe {
	max-width: 820px; margin: 0 auto; position: relative; overflow: hidden;
	padding: 24px 30px 24px 34px; border-radius: 16px;
	display: grid; grid-template-columns: 1fr minmax(0, 340px); gap: 4px 32px;
	grid-template-areas: "head form" "sub form"; align-items: center;
	background:
		linear-gradient(115deg, color-mix(in srgb, var(--c1-grad-a) 10%, var(--c1-glass-bg)) 0%, var(--c1-glass-bg) 46%);
	border: 1px solid var(--c1-glass-border);
	-webkit-backdrop-filter: blur(var(--c1-glass-blur)); backdrop-filter: blur(var(--c1-glass-blur));
	box-shadow: var(--c1-glass-inset);
}
/* gradient accent bar on the left edge = its own identity, no big gradient fill */
.c1-subscribe::before {
	content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0;
	background: linear-gradient(180deg, var(--c1-grad-a), var(--c1-grad-b)); z-index: 1;
}
.c1-subscribe > * { position: relative; z-index: 1; }
.c1-subscribe__heading { grid-area: head; margin: 0; font-size: clamp(19px, 2.2vw, 23px); text-align: left; color: var(--c1-ink); }
.c1-subscribe__sub { grid-area: sub; color: var(--c1-text); margin: 4px 0 0; text-align: left; font-size: 14px; }
.c1-subscribe__form { grid-area: form; display: flex; gap: 10px; margin: 0; min-width: 0; }
.c1-subscribe__btn.c1-btn--primary { background: linear-gradient(120deg, var(--c1-grad-a), var(--c1-grad-b)); color: #fff; flex: 0 0 auto; white-space: nowrap; padding: 12px 22px; }
.c1-subscribe__email {
	flex: 1 1 auto; min-width: 0;
	padding: 13px 18px;
	border-radius: 999px;
	border: 1px solid var(--c1-hairline, rgba(255,255,255,.12));
	background: var(--c1-canvas, #0a0a0b);
	color: var(--c1-ink, #fff);
	font-size: 15px;
}
.c1-subscribe__email::placeholder { color: var(--c1-muted, #6b6f76); }
.c1-subscribe__email:focus { outline: none; border-color: var(--c1-primary); }
@media (max-width: 680px) {
	.c1-subscribe { grid-template-columns: 1fr; grid-template-areas: "head" "sub" "form"; padding: 28px 24px; gap: 4px; }
	.c1-subscribe__form { margin-top: 16px; }
}
/* ---------- Testimonial ---------- */
.c1-tst { max-width: 760px; margin: 0 auto; text-align: center; position: relative; isolation: isolate; }
.c1-tst::before {
	content: ""; position: absolute; inset: -10% -20%; z-index: 0; pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 0%, transparent 78%);
}
.c1-tst__heading { margin-bottom: 32px; position: relative; z-index: 1; }
.c1-tst__track { position: relative; z-index: 1; }
.c1-tst__slide { display: none; padding: 40px; border-radius: 20px; background: var(--c1-glass-bg, rgba(255,255,255,.05)); border: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); -webkit-backdrop-filter: blur(var(--c1-glass-blur,12px)); backdrop-filter: blur(var(--c1-glass-blur,12px)); }
.c1-tst__slide.is-active { display: block; }
.c1-tst__quote { font-family: var(--c1-font-heading, serif); font-size: clamp(20px, 3vw, 28px); line-height: 1.4; margin: 0 0 24px; color: var(--c1-ink, #090909); }
.c1-tst__by { display: flex; align-items: center; justify-content: center; gap: 14px; }
.c1-tst__by img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.c1-tst__by span { display: flex; flex-direction: column; text-align: left; }
.c1-tst__by em { font-style: normal; font-size: 14px; opacity: .7; }
.c1-tst__dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.c1-tst__dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--c1-muted, #bababa); cursor: pointer; padding: 0; }
.c1-tst__dot.is-active { background: var(--c1-ink, #090909); }

/* Layout variants below override the base .c1-tst's narrow centered column —
   each needs its own width/alignment story, not just a recolor. */
.c1-tst--grid, .c1-tst--marquee, .c1-tst--stacked { max-width: none; }
.c1-tst--spotlight { max-width: 980px; }

/* Wall of quotes: every testimonial visible at once, even card grid. */
.c1-tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; position: relative; z-index: 1; }
.c1-tst-grid__card { padding: 30px; border-radius: 18px; background: var(--c1-glass-bg, rgba(255,255,255,.05)); border: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); }
.c1-tst-grid__quote { font-family: var(--c1-font-heading, serif); font-size: 16px; line-height: 1.55; margin: 0 0 20px; color: var(--c1-ink, #090909); }
.c1-tst-grid .c1-tst__by { justify-content: flex-start; }
@media (max-width: 900px) { .c1-tst-grid { grid-template-columns: 1fr; } }

/* Spotlight: one oversized featured quote beside a large portrait, editorial. */
.c1-tst-spot { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; text-align: left; position: relative; z-index: 1; }
.c1-tst-spot__portrait { width: 220px; height: 220px; border-radius: 26px; overflow: hidden; background: var(--c1-glass-bg, rgba(255,255,255,.06)); border: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); flex: none; }
.c1-tst-spot__portrait img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.c1-tst-spot__mark { display: block; font-family: var(--c1-font-heading, serif); font-size: 64px; line-height: 1; background: linear-gradient(120deg, var(--c1-grad-a), var(--c1-grad-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: -12px; }
.c1-tst-spot__quote { font-family: var(--c1-font-heading, serif); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; margin: 0 0 18px; color: var(--c1-ink, #090909); }
.c1-tst-spot__by strong { display: block; font-size: 16px; }
.c1-tst-spot__by em { font-style: normal; font-size: 14px; opacity: .7; }
/* Third grid child in a 2-col (220px/1fr) grid with no explicit placement
   auto-flows into column 1 — it was colliding with the 220px portrait
   column and wrapping into a cramped strip instead of running the full
   section width. Span both columns so it reads as its own row. */
.c1-tst-spot__more { grid-column: 1 / -1; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); display: flex; flex-wrap: wrap; gap: 14px 32px; }
.c1-tst-spot__chip { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; opacity: .85; max-width: 320px; }
.c1-tst-spot__chip strong { font-size: 13px; opacity: .95; }
.c1-tst-spot__chip-quote { opacity: .72; line-height: 1.45; }
@media (max-width: 720px) { .c1-tst-spot { grid-template-columns: 1fr; text-align: center; } .c1-tst-spot__portrait { margin: 0 auto; } }

/* Scrolling marquee: continuous horizontal stream of quote pills. */
.c1-tst-mq { position: relative; z-index: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.c1-tst-mq__track { display: flex; gap: 20px; width: max-content; animation: c1-tst-mq-scroll 38s linear infinite; }
.c1-tst-mq:hover .c1-tst-mq__track { animation-play-state: paused; }
.c1-tst-mq__card { flex: 0 0 auto; width: 320px; padding: 26px; border-radius: 18px; text-align: left; background: var(--c1-glass-bg, rgba(255,255,255,.05)); border: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); }
.c1-tst-mq__quote { font-family: var(--c1-font-heading, serif); font-size: 15px; line-height: 1.5; margin: 0 0 16px; color: var(--c1-ink, #090909); }
.c1-tst-mq .c1-tst__by { justify-content: flex-start; }
@keyframes c1-tst-mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .c1-tst-mq__track { animation: none; } }

/* Interview rows: avatar left, quote right, stacked vertically like a press page. */
.c1-tst-stack { display: flex; flex-direction: column; text-align: left; position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.c1-tst-stack__row { display: flex; gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); }
.c1-tst-stack__row:first-child { padding-top: 0; }
.c1-tst-stack__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: linear-gradient(140deg, var(--c1-grad-a), var(--c1-grad-b)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--c1-font-heading, serif); font-weight: 700; }
.c1-tst-stack__avatar img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.c1-tst-stack__quote { font-family: var(--c1-font-heading, serif); font-size: 18px; line-height: 1.5; margin: 0 0 10px; color: var(--c1-ink, #090909); }
.c1-tst-stack__by strong { margin-right: 8px; }
.c1-tst-stack__by em { font-style: normal; font-size: 13px; opacity: .65; }
@media (max-width: 600px) { .c1-tst-stack__row { flex-direction: column; gap: 12px; } }

/* ---------- Pricing ---------- */
.c1-pricing__heading { text-align: center; margin-bottom: 40px; }
.c1-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.c1-price {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 28px;
	border: 1px solid var(--c1-glass-border, rgba(255,255,255,.12));
	border-radius: 20px;
	background: var(--c1-glass-bg, rgba(255,255,255,.05));
	-webkit-backdrop-filter: blur(var(--c1-glass-blur,12px));
	backdrop-filter: blur(var(--c1-glass-blur,12px));
}
.c1-price.is-featured { border-color: var(--c1-primary, #2563eb); box-shadow: 0 20px 60px var(--c1-glow, rgba(37,99,235,.35)); }
.c1-price__badge { position: absolute; top: -13px; left: 28px; background: linear-gradient(92deg, var(--c1-grad-a,#bb7ae6), var(--c1-grad-b,#2563eb)); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 1px; }
.c1-price__name { margin: 0 0 6px; font-size: 24px; font-weight: 700; }
.c1-price__amount { font-family: var(--c1-font-heading, serif); font-size: 40px; font-weight: 700; color: var(--c1-ink, #090909); margin-bottom: 20px; }
.c1-price__amount span { font-family: var(--c1-font-body, sans-serif); font-size: 14px; font-weight: 400; opacity: .6; }
.c1-price__features { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.c1-price__features li { padding-left: 26px; position: relative; font-size: 15px; }
.c1-price__features li::before {
	content: "✓"; position: absolute; left: 0; font-weight: 700;
	background: linear-gradient(120deg, var(--c1-grad-a), var(--c1-grad-b));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: var(--c1-price-bullet-color, transparent); color: var(--c1-price-bullet-color, transparent);
}
.c1-price .c1-btn { margin-top: auto; text-align: center; }

/* Comparison table: bordered columns sharing one frame, dense spreadsheet feel —
   no floating cards or shadows, plans read as one connected unit. */
.c1-price-table { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); border-radius: 18px; overflow: hidden; }
.c1-price-table__col { position: relative; padding: 30px 26px; display: flex; flex-direction: column; border-left: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); }
.c1-price-table__col:first-child { border-left: 0; }
.c1-price-table__col.is-featured { background: var(--c1-glass-bg, rgba(255,255,255,.05)); }
.c1-price-table__badge { position: absolute; top: 16px; right: 16px; background: linear-gradient(92deg, var(--c1-grad-a,#bb7ae6), var(--c1-grad-b,#2563eb)); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 1px; }
.c1-price-table__head { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); }
.c1-price-table__features { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.c1-price-table__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.c1-price-table__features li svg { flex: none; margin-top: 2px; color: var(--c1-primary, #2563eb); }
@media (max-width: 900px) { .c1-price-table { grid-template-columns: 1fr; } .c1-price-table__col { border-left: 0; border-top: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); } .c1-price-table__col:first-child { border-top: 0; } }

/* Compact stacked rows: name/tags left, price/CTA right — a fast scannable
   menu-list feel rather than a heavy comparison grid. */
.c1-price-stack { display: flex; flex-direction: column; border-top: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); }
.c1-price-stack__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 4px; border-bottom: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); }
.c1-price-stack__row.is-featured { background: var(--c1-glass-bg, rgba(255,255,255,.04)); margin: 0 -20px; padding: 26px 24px; border-radius: 16px; border-bottom-color: transparent; }
.c1-price-stack__main { flex: 1; min-width: 0; }
.c1-price-stack__name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.c1-price-stack__name-row .c1-price__name { margin: 0; font-size: 19px; }
/* The stacked layout reuses the table variant's badge class, but that badge is
   `position: absolute; top/right` scoped to a *column* — nested here with no
   positioning parent it escapes to the whole section corner instead of
   sitting beside the row name it's meant to flag. Pin it back inline. */
.c1-price-stack__name-row .c1-price-table__badge { position: static; top: auto; right: auto; flex: none; }
.c1-price-stack__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.c1-price-stack__tag { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--c1-glass-bg, rgba(255,255,255,.06)); border: 1px solid var(--c1-glass-border, rgba(255,255,255,.12)); opacity: .85; }
.c1-price-stack__aside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.c1-price-stack__aside .c1-price__amount { margin: 0; font-size: 26px; text-align: right; }
@media (max-width: 640px) { .c1-price-stack__row { flex-direction: column; align-items: stretch; } .c1-price-stack__aside { align-items: flex-start; } .c1-price-stack__aside .c1-price__amount { text-align: left; } }

/* ---------- Contact ---------- */
.c1-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	position: relative;
	overflow: hidden;
	background: var(--c1-glass-bg);
	border: 1px solid var(--c1-glass-border);
	-webkit-backdrop-filter: blur(var(--c1-glass-blur)); backdrop-filter: blur(var(--c1-glass-blur));
	box-shadow: var(--c1-glass-inset);
	color: var(--c1-text);
	padding: 60px;
	border-radius: 28px;
}
.c1-contact::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	width: 420px; height: 420px; left: -120px; bottom: -180px; border-radius: 50%;
	background: radial-gradient(closest-side, var(--c1-glow), transparent 70%); filter: blur(40px);
}
.c1-contact > * { position: relative; z-index: 1; }
.c1-contact h2 { color: var(--c1-ink); margin-top: 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; }
.c1-contact__intro { color: var(--c1-text); max-width: 360px; }
.c1-contact__list { list-style: none; padding: 0; margin: 22px 0; display: flex; flex-direction: column; gap: 12px; }
.c1-contact__list li { position: relative; padding-left: 26px; }
.c1-contact__list li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--c1-primary); box-shadow: 0 0 10px var(--c1-primary); }
.c1-contact__list a { color: var(--c1-ink); font-weight: 500; }
.c1-contact__list a:hover { color: var(--c1-primary); }
.c1-contact__basic { display: flex; flex-direction: column; gap: 12px; }
.c1-contact__basic input, .c1-contact__basic textarea {
	padding: 14px 16px; border-radius: 12px; font-size: 15px; font-family: inherit; width: 100%;
	background: var(--c1-contact-input-bg, var(--c1-canvas)); border: 1px solid var(--c1-contact-input-border, var(--c1-hairline)); color: var(--c1-contact-input-text, var(--c1-ink));
}
.c1-contact__basic input::placeholder, .c1-contact__basic textarea::placeholder { color: var(--c1-muted); }
.c1-contact__basic input:focus, .c1-contact__basic textarea:focus { outline: none; border-color: var(--c1-contact-input-focus, var(--c1-primary)); }

/* ---------- Marquee ---------- */
.c1-marquee {
	overflow: hidden; white-space: nowrap; padding: 20px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.c1-marquee__track { display: inline-block; font-family: var(--c1-font-heading, serif); font-weight: 700; animation: c1-marquee linear infinite; }
.c1-marquee__item { padding: 0 10px; color: var(--c1-ink); }
.c1-marquee__sep { color: var(--c1-primary); opacity: .8; padding: 0 6px; }
@keyframes c1-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- About split ---------- */
.c1-about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.c1-about--right { direction: rtl; }
.c1-about--right > * { direction: ltr; }
.c1-about__media { position: relative; }
.c1-about__media::before { content: ""; position: absolute; inset: -14%; z-index: 0; background: radial-gradient(closest-side, var(--c1-glow), transparent 70%); filter: blur(30px); opacity: .8; }
.c1-about__media img {
	position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; max-height: 560px;
	border-radius: 20px; object-fit: cover; object-position: center 20%;
	border: 1px solid var(--c1-glass-border); box-shadow: var(--c1-shadow);
}
@media (max-width: 900px) { .c1-about__media img { aspect-ratio: 3 / 4; max-height: none; } }
.c1-about__eyebrow {
	display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 600; margin-bottom: 12px;
	background: linear-gradient(100deg, var(--c1-grad-a), var(--c1-grad-b));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.c1-about__heading { font-size: clamp(32px, 4vw, 52px); font-weight: 700; margin: 0 0 16px; }
.c1-about__text { color: var(--c1-text, rgba(9,9,9,.7)); margin-bottom: 20px; }
.c1-about__list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.c1-about__list li { padding-left: 28px; position: relative; }
.c1-about__list li::before { content: "→"; position: absolute; left: 0; font-weight: 700;
	background: linear-gradient(120deg, var(--c1-grad-a, #bb7ae6), var(--c1-grad-b, #2563eb));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---------- FAQ ---------- */
.c1-faq { max-width: 760px; margin: 0 auto; }
.c1-faq__heading { text-align: center; margin-bottom: 32px; }
.c1-faq__item { border-bottom: 1px solid var(--c1-hairline, #eaeaea); }
.c1-faq__q {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: none; border: 0; cursor: pointer; text-align: left;
	padding: 22px 0; font-family: var(--c1-font-heading, serif); font-size: 20px; font-weight: 600;
	color: var(--c1-ink, #090909);
}
.c1-faq__icon { position: relative; width: 16px; height: 16px; flex: none; }
.c1-faq__icon::before, .c1-faq__icon::after { content: ""; position: absolute; background: currentColor; transition: transform .25s ease; }
.c1-faq__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.c1-faq__icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.c1-faq__item.is-open .c1-faq__icon::after { transform: scaleY(0); }
.c1-faq__a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.c1-faq__item.is-open .c1-faq__a { max-height: 400px; }
.c1-faq__a p { margin: 0 0 22px; color: var(--c1-text, rgba(9,9,9,.7)); }

/* ---------- Video feature ---------- */
.c1-video { text-align: center; }
.c1-video__cover { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--c1-glass-border); cursor: pointer; overflow: hidden; border-radius: 20px; aspect-ratio: 16/9; background: #000; box-shadow: 0 30px 80px var(--c1-glow); }
.c1-video__cover img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.c1-video__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	width: 74px; height: 74px; border-radius: 50%; background: var(--c1-accent, #ddff6d); color: var(--c1-accent-text, #090909);
	display: flex; align-items: center; justify-content: center; font-size: 24px; padding-left: 4px;
}
.c1-video__caption { margin-top: 14px; font-weight: 600; }
.c1-video__lb { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.c1-video__lb iframe { width: min(960px, 92vw); aspect-ratio: 16/9; border: 0; border-radius: 12px; }
.c1-video__lb-close { position: absolute; top: 20px; right: 24px; background: none; border: 0; color: #fff; font-size: 34px; cursor: pointer; }

/* ---------- Gallery ---------- */
.c1-gallery__heading { text-align: center; margin-bottom: 32px; }
.c1-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.c1-gallery__item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; transition: transform .3s ease; }
.c1-gallery__item:hover img { transform: scale(1.03); }

@media (max-width: 860px) {
	.c1-pricing__grid { grid-template-columns: 1fr; }
	.c1-contact { grid-template-columns: 1fr; padding: 32px; }
	.c1-about { grid-template-columns: 1fr; gap: 32px; }
	.c1-about--right { direction: ltr; }
}
@media (max-width: 600px) {
	.c1-grid { grid-template-columns: 1fr !important; }
	.c1-subscribe__form { flex-direction: column; }
}
@media (max-width: 480px) {
	.c1-cta { padding: 48px 22px; }
	.c1-tst__slide { padding: 26px 22px; }
	.c1-price { padding: 26px 20px; }
	.c1-bento__item { padding: 22px; }
	.c1-hero__badge, .c1-hero__eyebrow { font-size: 12px; }
}

/* ---------- Dim grid glow behind CTA / Newsletter / Contact sections ---------- */
.elementor-top-section:has(.c1-cta),
.elementor-top-section:has(.c1-subscribe),
.elementor-top-section:has(.c1-contact) { position: relative; isolation: isolate; }
.elementor-top-section:has(.c1-cta) > .elementor-container,
.elementor-top-section:has(.c1-subscribe) > .elementor-container,
.elementor-top-section:has(.c1-contact) > .elementor-container { position: relative; z-index: 1; }
.elementor-top-section:has(.c1-cta)::before,
.elementor-top-section:has(.c1-subscribe)::before,
.elementor-top-section:has(.c1-contact)::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(var(--c1-grid, rgba(255,255,255,.05)) 1px, transparent 1px),
		linear-gradient(90deg, var(--c1-grid, rgba(255,255,255,.05)) 1px, transparent 1px);
	background-size: 60px 60px;
	-webkit-mask-image: radial-gradient(ellipse 80% 76% at 50% 50%, #000 0%, transparent 76%);
	mask-image: radial-gradient(ellipse 80% 76% at 50% 50%, #000 0%, transparent 76%);
	opacity: .6;
}

/* ==========================================================================
   Per-profession hero decoration
   Rendered by inc/hero-decor.php via the `creatorone_hero_decor` action in
   class-hero.php — one distinct motif per demo instead of the same three
   generic stat chips + orbs on every page. Sits behind .c1-hero__inner
   (z-index 1, inner is 2) so text always stays legible on top.
   All colors pull from --c1-primary / --c1-grad-a / --c1-grad-b, which are
   already correct per demo, so this automatically matches each palette.
   ========================================================================== */
.c1-hero-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
@media (max-width: 780px) { .c1-hero-decor { display: none; } } /* keep mobile hero clean/fast */

/* ---- Shared "decor chip" — a real inline-SVG icon in a small glass card,
   replacing the old abstract skeleton-line/bar-chart mockups with an actual
   drawn pictogram relevant to the profession (camera, pen, mic, chart...).
   One consistent card treatment, one icon language, per-demo positioning
   only changes placement — never the underlying shape. ---- */
.c1-decor-chip {
	position: absolute; display: flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 16px;
	background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
	border: 1px solid rgba(255,255,255,.16);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	box-shadow: 0 18px 40px rgba(0,0,0,.32);
	color: var(--c1-primary);
	animation: c1-float 7s ease-in-out infinite;
}
[data-theme="light"] .c1-decor-chip { background: rgba(255,255,255,.8); border-color: rgba(20,23,40,.08); box-shadow: 0 18px 40px rgba(20,23,40,.12); }
.c1-decor-chip svg { width: 26px; height: 26px; }
.c1-decor-chip--sm { width: 48px; height: 48px; border-radius: 13px; }
.c1-decor-chip--sm svg { width: 20px; height: 20px; }

/* Designer's second chip: real color-swatch dots instead of an icon */
.c1-decor-swatch { display: flex; }
.c1-decor-swatch span { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); margin-left: -6px; }
.c1-decor-swatch span:first-child { margin-left: 0; }
.c1-decor-swatch span:nth-child(1) { background: var(--c1-primary); }
.c1-decor-swatch span:nth-child(2) { background: var(--c1-grad-a); }
.c1-decor-swatch span:nth-child(3) { background: var(--c1-grad-b); }

/* ---- Photographer: one real camera chip (was 4 misaligned corner
   brackets) + the existing aperture iris rings, which already worked. ---- */
.c1-decor-chip-photographer { bottom: 10%; left: 6%; animation-delay: .2s; }
.c1-decor-iris {
	position: absolute; top: 5%; right: 16%; width: 100px; height: 100px;
	display: block;
}
.c1-decor-iris span {
	position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--c1-primary); opacity: .35;
	animation: c1-iris-pulse 5s ease-in-out infinite;
}
.c1-decor-iris span:nth-child(2) { inset: 18px; animation-delay: .6s; }
.c1-decor-iris span:nth-child(3) { inset: 36px; animation-delay: 1.2s; }
@keyframes c1-iris-pulse { 0%,100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.06); opacity: .6; } }

/* ---- Designer: pen-tool chip + a real color-swatch cluster ---- */
.c1-decor-chip-designer-1 { top: 10%; left: 7%; transform: rotate(-6deg); }
.c1-decor-chip-designer-2 { bottom: 12%; right: 8%; transform: rotate(4deg); animation-delay: 1.4s; }

/* ---- Marketer: trend-line chip balanced by a small spark accent on the
   opposite side (was a single chip stranded alone on the right). ---- */
.c1-decor-chip-marketer { top: 36%; right: 6%; animation-delay: .6s; }
.c1-decor-chip-marketer-2 { top: 50%; left: 6%; animation-delay: 1.5s; }

/* ---- Podcaster: mic chip + the existing soundwave rings ---- */
.c1-decor-rings { position: absolute; top: 5%; left: 10%; width: 110px; height: 110px; }
.c1-decor-rings span {
	position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--c1-primary); opacity: .3;
	animation: c1-ring-pulse 4.5s ease-out infinite;
}
.c1-decor-rings span:nth-child(2) { animation-delay: 1.1s; }
.c1-decor-rings span:nth-child(3) { animation-delay: 2.2s; }
@keyframes c1-ring-pulse { 0% { transform: scale(.5); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }
.c1-decor-chip-podcaster { bottom: 13%; right: 9%; animation-delay: 1s; }

/* ---- TikToker: phone+play chip and a music-note chip (was a bare
   border box + two cliché diagonal color stripes) ---- */
.c1-decor-chip-tiktoker-1 { top: 8%; left: 8%; transform: rotate(-5deg); }
.c1-decor-chip-tiktoker-2 { bottom: 14%; right: 10%; transform: rotate(4deg); animation-delay: 1.8s; }

/* ---- YouTuber: two real play-button chips, one per side (was both
   crowded onto the right with nothing balancing the left) ---- */
.c1-decor-chip-youtuber-1 { top: 8%; left: 8%; transform: rotate(-4deg); }
.c1-decor-chip-youtuber-2 { bottom: 16%; right: 8%; transform: rotate(4deg); animation-delay: 1.6s; }

/* ---- Influencer: a real heart-glyph chip + a spark chip (was 3 crude
   clip-path heart blobs). The engagement squiggle now groups with the
   left-side chip instead of stacking onto the same side as chip-2, so each
   corner carries one clear accent instead of two on the right. ---- */
.c1-decor-chip-influencer-1 { top: 9%; left: 8%; }
.c1-decor-chip-influencer-2 { bottom: 14%; right: 12%; animation-delay: 1.2s; }
.c1-decor-squiggle {
	position: absolute; bottom: 10%; left: 10%; width: 110px; height: 50px;
	border-bottom: 2px dashed var(--c1-primary); opacity: .4; border-radius: 0 0 40px 0;
}

/* ---- Creator: editorial quote mark, echoed by a smaller closing mark on
   the opposite corner (quotation marks come in pairs — this reads as a
   frame around the headline instead of one flourish stranded on a side),
   plus faint flecks. ---- */
.c1-decor-quote {
	position: absolute; top: -6%; right: 3%; font-family: var(--c1-font-heading);
	font-size: 220px; line-height: 1; color: var(--c1-primary); opacity: .22;
	-webkit-text-stroke: 1px var(--c1-primary);
	pointer-events: none; user-select: none;
}
.c1-decor-quote-secondary {
	position: absolute; bottom: -4%; left: 4%; font-family: var(--c1-font-heading);
	font-size: 130px; line-height: 1; color: var(--c1-primary); opacity: .16;
	pointer-events: none; user-select: none;
}
.c1-decor-flecks {
	position: absolute; inset: 0;
	background-image: radial-gradient(2px 2px at 20% 30%, var(--c1-primary) 0, transparent 60%),
		radial-gradient(2px 2px at 80% 20%, var(--c1-primary) 0, transparent 60%),
		radial-gradient(2px 2px at 65% 70%, var(--c1-primary) 0, transparent 60%),
		radial-gradient(2px 2px at 30% 80%, var(--c1-primary) 0, transparent 60%);
	opacity: .25;
}

@media (prefers-reduced-motion: reduce) {
	.c1-decor-chip, .c1-decor-rings span, .c1-decor-iris span {
		animation: none !important;
	}
}

/* ==========================================================================
   Section-level background texture + floating accents — Stats, Bento, CTA,
   Testimonial. Same subtle grid/dot system as the opt-in c1-bg-grid/dots
   Elementor classes, built directly into these four widgets so every demo
   gets it automatically. Tinted via --c1-grid / --c1-grad-a / --c1-grad-b,
   which already differ per demo, so the texture + glow color shift with
   each profession's own palette instead of looking identical everywhere.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.c1-stats::after, .c1-bento::after, .c1-cta::after { animation: none !important; }
}

/* ==========================================================================
   Background pattern family — driven by the Customizer's "Background
   pattern" control (None / Grid lines / Dot grid / Gradient mesh), which
   adds body.c1-bg-{grid|dots|mesh} via creatorone_option_body_classes().
   One family across Bento/Stats/Testimonial/CTA at once, live-editable —
   previously these 4 widgets hardcoded their own pattern unconditionally
   (Bento always grid, Stats/Testimonial always dots) so the Customizer
   control had no visible effect on any of them. "None" = no class = no
   background-image at all (the base rules above carry no image).
   On the multi-demo showcase build, creatorone_option_body_classes() also
   re-asserts each demo's OWN authored family here (from the same per-demo
   table used for colors) so /demos/ still shows 8 distinct textures even
   though they all share one global Customizer row.
   ========================================================================== */
body.c1-bg-dots .c1-bento::before,
body.c1-bg-dots .c1-stats::before,
body.c1-bg-dots .c1-tst::before {
	background-image: radial-gradient(var(--c1-grid) 1.3px, transparent 1.3px);
	background-size: 28px 28px;
}

/* .c1-stats deliberately excluded here (unlike Bento/Testimonial): the Stat
   Counter widget already has its own straight vertical divider lines between
   numbers, and the grid variant's straight crosshatch at a different pitch
   fights those dividers instead of complementing them — reads as noisy
   clutter rather than texture. Dots and mesh below don't have that
   directional conflict, so Stats keeps those two patterns. */
body.c1-bg-grid .c1-bento::before,
body.c1-bg-grid .c1-tst::before {
	background-image:
		linear-gradient(var(--c1-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--c1-grid) 1px, transparent 1px);
	background-size: 56px 56px;
}

body.c1-bg-mesh .c1-bento::before,
body.c1-bg-mesh .c1-stats::before,
body.c1-bg-mesh .c1-tst::before {
	background-image:
		radial-gradient(45% 65% at 25% 20%, color-mix(in srgb, var(--c1-grad-a) 16%, transparent), transparent 70%),
		radial-gradient(40% 60% at 80% 15%, color-mix(in srgb, var(--c1-grad-b) 14%, transparent), transparent 70%);
	background-size: auto;
}

/* CTA panel's dot layer follows the same family (its highlight stays put — see base rule above). */
body.c1-bg-dots .c1-cta::before {
	background-image:
		radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.18), transparent 60%),
		radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.2px);
	background-size: auto, 22px 22px;
}
body.c1-bg-grid .c1-cta::before {
	background-image:
		radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.18), transparent 60%),
		linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
	background-size: auto, 40px 40px, 40px 40px;
}
body.c1-bg-mesh .c1-cta::before {
	background-image:
		radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.18), transparent 60%),
		radial-gradient(50% 80% at 80% 100%, rgba(255,255,255,.14), transparent 70%);
	background-size: auto;
}