/* Faraz Ahmad: one homepage visual language over the approved component structures. */
:root {
  --brand-canvas:#f7f7f3;
  --brand-surface:#ffffff;
  --brand-soft:#efefea;
  --brand-ink:#18191c;
  --brand-muted:#62626a;
  --brand-accent:#7153d8;
  --brand-accent-ink:#ffffff;
  --brand-line:#deded8;
  --brand-radius:24px;
  --brand-radius-small:14px;
  --brand-pill:999px;
  --brand-shadow:0 2px 8px #18191c05;
  --brand-hover-shadow:0 8px 24px #18191c0c;
  --brand-section-gap:48px;
  --assembly-paper:var(--brand-canvas);
  --assembly-ink:var(--brand-ink);
  --assembly-muted:var(--brand-muted);
  --assembly-line:var(--brand-line);
  --assembly-focus:var(--brand-accent);
}
@media(max-width:767px) {
  :root {--brand-radius:20px;--brand-radius-small:12px;--brand-section-gap:32px;}
}
/* Resolve theme choices locally so controls still style every section together. */
#studies > .study > .stage {
  --site-canvas:var(--theme-bg,var(--brand-canvas));
  --site-surface:var(--theme-card,var(--brand-surface));
  --site-soft:var(--theme-wash,var(--brand-soft));
  --site-ink:var(--theme-ink,var(--brand-ink));
  --site-muted:var(--theme-muted,var(--brand-muted));
  --site-accent:var(--theme-accent,var(--brand-accent));
  --site-action:var(--theme-action,var(--brand-accent));
  --site-action-ink:var(--theme-action-ink,var(--brand-accent-ink));
  --site-line:var(--theme-border,var(--brand-line));
  --site-radius:var(--theme-radius,var(--brand-radius));
  --site-small:var(--theme-small,var(--brand-radius-small));
  --site-scene:var(--theme-canvas,var(--site-canvas));
  background:var(--site-scene);
  color:var(--site-ink);
}
/* Coordinated chapter colors add rhythm without introducing new component styles. */
#studies > #reels-hero > .stage {--brand-canvas:#fbf8f3;}
#studies > #clay-trusted > .stage {
  --brand-canvas:#fbf8f3;--brand-soft:#eee7f6;--brand-line:#ded6e9;
  --client-glow-blue:color-mix(in srgb,var(--theme-accent,#8db7ee) 24%,var(--site-canvas));
  --client-glow-rose:color-mix(in srgb,var(--theme-accent,#dfa2c0) 22%,var(--site-canvas));
  --client-gradient:radial-gradient(ellipse at 0% 0%,var(--client-glow-blue),transparent 65%),radial-gradient(ellipse at 100% 100%,var(--client-glow-rose),transparent 65%),linear-gradient(125deg,var(--site-soft),var(--site-canvas));
  background:var(--theme-bg,transparent);
}
#studies > #elementor-mcp > .stage {--brand-canvas:#e9e1f5;--brand-soft:#e1d6ef;}
#studies > #cuberto-services > .stage {--brand-canvas:#f4f0f8;--brand-line:#ded6e9;}
#studies > #reels-testimonials > .stage {--brand-canvas:#f4eee8;--brand-line:#dfd5d0;}
#studies > #reels-ready > .stage {--brand-canvas:#eee7f6;}
#studies > #reels-hero > .stage:not([data-atlas-theme]):not([data-atlas-color]) {
  --site-scene:radial-gradient(ellipse at 100% 0%,#e9def8 0%,transparent 48%),var(--site-canvas);
}
#studies > #elementor-mcp > .stage:not([data-atlas-theme]):not([data-atlas-color]) {
  --site-scene:radial-gradient(ellipse at 0% 100%,#f4eaf3 0%,transparent 65%),var(--site-canvas);
}
#studies > #reels-testimonials > .stage:not([data-atlas-theme]):not([data-atlas-color]) {
  --site-scene:radial-gradient(ellipse at 100% 0%,#e7ddf4 0%,transparent 65%),var(--site-canvas);
}
#reels-hero .rh34,
#clay-trusted .ct15,
#contina-cases .ct32,
#cuberto-services .cu24,
#reels-testimonials .rt37,
#reels-ready .rr38 {
  background:var(--site-scene);
  color:var(--site-ink);
}
#studies > .study > .stage :is(.rh34,.rt37,.rr38) {
  --color--gray-1:var(--site-ink);
  --color--gray-2:var(--site-muted);
  --color--gray-3:var(--site-muted);
  --color--gray-4:var(--site-soft);
  --color--gray-5:var(--site-soft);
  --color--gray-6:var(--site-canvas);
  --color--primary-5:var(--site-accent);
  --border-radius--xl:var(--site-radius);
  --border-radius--lg:var(--site-radius);
  --border-radius--md:var(--site-small);
}
/* Headings, introductions and small labels share the existing Inter type scale. */
#studies :is(.hero-description,.ew-intro p,.cu24-lede,.ct32-intro>p,.testimonial-rating p) {color:var(--site-muted);}
#studies :is(.pre-title,.ct32-badge) {
  padding:6px 14px;
  border:1px solid var(--site-line);
  border-radius:var(--brand-pill);
  background:var(--site-surface);
  color:var(--site-ink);
  box-shadow:none;
  text-transform:none;
}
#contina-cases .ct32-badge::before {background:var(--site-accent);}
#reels-hero .hero-title-highlight {background:var(--site-action);color:var(--site-action-ink);}
#reels-hero .hero-reels-item {border-radius:var(--site-radius);}
#reels-hero .fa-reels-service-list .social-media-item {
  border-radius:var(--brand-pill);background:var(--site-soft);color:var(--site-ink);
}
#reels-hero .fa-reels-service-list .social-media-item span {color:inherit;}
/* Primary actions keep their rolling labels, icons and existing hit areas. */
#studies :is(.rh34,.rr38) .button-arrow,
#elementor-mcp .ew-cta {
  border-radius:var(--brand-pill);
  background:var(--site-action);
  color:var(--site-action-ink);
  box-shadow:var(--theme-shadow,var(--brand-shadow));
  transition:background-color .2s ease,box-shadow .2s ease;
}
#studies :is(.rh34,.rr38) .button-arrow :is(.button-text,.button-hover-text) {color:inherit;}
#studies :is(.rh34,.rr38) .button-arrow:hover,
#elementor-mcp .ew-cta:hover {box-shadow:var(--theme-hover,var(--brand-hover-shadow));}
#reels-hero .navbar .button-arrow {
  background:var(--site-surface);color:var(--site-ink);
  outline:1px solid var(--site-line);outline-offset:-1px;box-shadow:none;
}
#studies :is(.fa-reels-secondary a,.button-right) {color:var(--site-ink);}
#studies :is(.fa-reels-secondary a,.button-right):hover {color:var(--site-accent);}
/* Dense logo cards are the small-radius member of the same card family. */
#clay-trusted .ct15 {--ctl-panel:var(--site-soft);}
#clay-trusted > .stage .ctl-panel {
  background:var(--client-gradient);border-radius:var(--site-radius);
  box-shadow:inset 0 0 0 1px var(--site-line);
}
#clay-trusted > .stage .ctl-card {
  background:var(--site-surface);color:var(--site-ink);
  border-color:var(--theme-border,#e4dfec);border-radius:var(--site-small);
  box-shadow:var(--theme-shadow,var(--brand-shadow));
}
#clay-trusted > .stage .ctl-card:hover {box-shadow:var(--theme-hover,var(--brand-hover-shadow));}
#clay-trusted .ctl-intro {color:var(--site-ink);}
#clay-trusted .ctl-quote p {color:var(--site-muted);}
#clay-trusted .ctl-arrow {color:var(--site-muted);}
#clay-trusted .ctl-user,#clay-trusted .ctl-user img {border-radius:var(--site-small);}
/* Fade the moving logos themselves so the multicolor panel stays seamless. */
#clay-trusted .ctl-track {
  --logo-fade:clamp(24px,8vw,112px);
  mask-image:linear-gradient(90deg,transparent,#000 var(--logo-fade),#000 calc(100% - var(--logo-fade)),transparent);
}
#studies #clay-trusted .ctl-veil {width:clamp(24px,8vw,112px);background:none;}
/* Project-specific colors, artwork and video sampling stay with the project. */
#elementor-mcp > .stage .ew-card {
  border-radius:var(--site-radius);
  outline:var(--theme-edge,1px) solid color-mix(in srgb,var(--work-ink) 10%,transparent);
  outline-offset:-1px;
  box-shadow:var(--theme-shadow,var(--brand-shadow));
}
#elementor-mcp > .stage .ew-card:hover {box-shadow:var(--theme-hover,var(--brand-hover-shadow));}
#elementor-mcp .ew-badge {border-radius:var(--brand-pill);}
#elementor-mcp .ew-inner {row-gap:var(--brand-section-gap);}
#contina-cases .ct32-inner {gap:var(--brand-section-gap);}
/* Services retain the original desktop reveal and mobile accordion. */
body #studies #cuberto-services .cu24-caption {
  font-size:var(--home-heading-size);font-weight:600;line-height:1.12;
  letter-spacing:-.035em;text-transform:none;color:var(--site-ink);
}
#cuberto-services .cu24-services {margin-top:var(--brand-section-gap);}
#cuberto-services .cu24-item {
  padding:32px;border-radius:var(--site-radius);
  outline:var(--theme-edge,1px) solid var(--site-line);outline-offset:-1px;
  color:var(--brand-ink);
}
#cuberto-services .cu24-fill {background:var(--site-surface);}
#cuberto-services .cu24-item[data-open] .cu24-fill {background:var(--brand-ink);}
#cuberto-services .cu24-item[data-open] {color:#fff;}
#cuberto-services > .stage .cu24-item :is(h3,.cu24-copy,.cu24-link,.cu24-num) {color:inherit;}
#cuberto-services .cu24-copy {margin-top:24px;letter-spacing:normal;}
#cuberto-services .cu24-action {margin:24px 0 32px;}
#cuberto-services .cu24-link-icon {width:48px;height:48px;font-size:18px;}
#cuberto-services .cu24-num {font-size:16px;font-weight:500;letter-spacing:.02em;}
#cuberto-services .cu24-item:not([data-open]) .cu24-num {opacity:.5;}
/* Review cards retain their sizes, staggering and moving rows. */
#reels-testimonials .testimonial-section {padding-bottom:var(--home-section-space);}
#reels-testimonials .section-title {margin-bottom:var(--brand-section-gap);}
#reels-testimonials > .stage .testimonial-card {
  padding:32px;border-radius:var(--site-radius);
  background:var(--site-surface);color:var(--site-ink);
  outline:var(--theme-edge,1px) solid var(--site-line);outline-offset:-1px;
  box-shadow:var(--theme-shadow,var(--brand-shadow));
}
#reels-testimonials .testimonial-review-item p {color:var(--site-ink);}
#reels-testimonials .testimonial-client-name {color:var(--site-ink);}
#reels-testimonials .testimonial-client-info .text-small {color:var(--site-muted);}
#reels-testimonials .testimonial-rating-icon {display:none;}
#reels-testimonials .testimonial-rating {justify-content:center;}
#reels-testimonials .testimonial-avatar:not([src$="-client-mark.svg"]) {object-fit:cover;}
#reels-testimonials [data-client-story] .play-state {display:flex!important;}
#reels-testimonials [data-client-story] .play-state-icon {content:url("media/rh34-13.svg");width:12px;height:14px;}
#reels-testimonials [data-client-story] .paush-state {display:none!important;}
#reels-testimonials [data-client-story] {width:44px;height:44px;}
body #studies #reels-testimonials .reels-avatar-name {color:#fff;}
/* The closing panel echoes the hero accent instead of introducing another palette. */
#reels-ready > .stage:not([data-atlas-theme]):not([data-atlas-color]) .cta-content {
  border-radius:var(--site-radius);
  background:var(--site-action);color:var(--site-action-ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--site-action-ink) 16%,transparent);
}
#reels-ready > .stage:not([data-atlas-theme]):not([data-atlas-color]) .cta-overlay {background:var(--site-action);}
#reels-ready .cta-avatar-wrap {border-radius:var(--site-small);background:var(--site-surface);}
#reels-ready > .stage:not([data-atlas-theme]):not([data-atlas-color]) .cta-top :is(h2,p) {color:var(--site-action-ink);}
#reels-ready > .stage:not([data-atlas-theme]):not([data-atlas-color]) .cta-top p {opacity:.85;}
#reels-ready > .stage:not([data-atlas-theme]):not([data-atlas-color]) .pre-title {background:transparent;border-color:color-mix(in srgb,var(--site-action-ink) 40%,transparent);color:var(--site-action-ink);}
#reels-ready > .stage:not([data-atlas-theme]):not([data-atlas-color]) .button-arrow {background:var(--site-action-ink);color:var(--site-action);}
#reels-ready > .stage:not([data-atlas-theme]):not([data-atlas-color]) .button-right {color:var(--site-action-ink);}
#reels-ready > .stage .button-right-title {color:inherit;}
#reels-ready > .stage:not([data-atlas-theme]):not([data-atlas-color]) .button-right:hover {opacity:.8;}
#homepage-footer {background:var(--brand-canvas);border-top:1px solid var(--brand-line);}
#homepage-footer a:hover {color:var(--brand-accent);}
.homepage-appearance-launch {border-radius:var(--brand-pill);background:var(--brand-surface);box-shadow:var(--brand-shadow);}
.homepage-appearance-launch:hover {background:var(--brand-soft);}
#studies :is(a,button,video):focus-visible {outline:2px solid var(--site-accent);outline-offset:4px;}
#studies video:focus-visible {outline-offset:-3px;}
@media(max-width:767px) {
  #cuberto-services .cu24-item,#reels-testimonials > .stage .testimonial-card {padding:24px;}
}
@media(max-width:479px) {
  #reels-testimonials .reels-badge-item._01 {inset:8px 5px auto;gap:4px;padding:4px;border-radius:8px;background:#18191ccf;}
  #reels-testimonials .reels-badge-avatar {width:16px;height:16px;flex:none;object-fit:cover;}
  #reels-testimonials .reels-avatar-info {gap:4px;min-width:0;}
  body #studies #reels-testimonials .reels-avatar-name {font-size:11px;line-height:1.3;white-space:nowrap;}
  #reels-testimonials .reels-badge-icon {width:10px;height:10px;flex:none;}
}
@media(prefers-reduced-motion:reduce) {
  #studies :is(.button-arrow,.ew-cta) {transition:none;}
}
@media(prefers-reduced-motion:reduce) and (min-width:768px) {
  #cuberto-services .cu24-item {color:#fff;}
  #cuberto-services .cu24-fill {background:var(--brand-ink);}
}