/* CLIP IMAGES MEDIA V11660
   First-paint text stability + premium soft state/page transitions.
   Layout-changing transitions are intentionally avoided. */

:root{
  --cim-v11660-ease:cubic-bezier(.22,.61,.36,1);
  --cim-v11660-fast:150ms;
  --cim-v11660-normal:190ms;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:auto;
}
body:not(.adminBody){
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

/* Current CMS title sizes are present before the async CMS JSON arrives.
   cms-loader may still replace these later if admin changes the stored settings. */
.hero h1,
.aboutHeroText h1,
.blogArchiveHero h1,
.blogArticleHero h1,
.pricingBreakdownHero h1,
.pricingBreakdownSection h1,
.catalogPageSection h1,
.uploadPageSection .uploadTop h1,
.uploadTop h1,
.pageHero h1,
.cimPricingHero h1,
.cimServicesOverview h1{
  font-size:28px!important;
  line-height:1.14!important;
}
.sectionHead h2,
.sampleTitleWrap h2,
.storyContent h2,
.aboutContent h2,
.serviceLineText h2,
.showcaseHead h2,
.ctaStripInner h2,
.contactModern .sectionHead h2,
.trustpilotText h2,
.uploadFormCard h2,
.uploadSideCard h2,
.uploadProcessCard h2,
.uploadFileTypeCard h2,
.uploadSampleCard h2,
.uploadTimelineCard h2,
.uploadGuidelinesCard h2,
.cimCustomPrice h2,
.footerGrid h2{
  font-size:29px!important;
  line-height:1.16!important;
}
.card h3,
.step h3,
.priceCard h3,
.pricingBreakCard h3,
.contactBox h3,
.formBox h3,
.contactInfoCard h3,
.blogSideBox h3,
.blogArticleCta h3,
.aboutFeature h3,
.aboutStat h3{
  font-size:20px!important;
  line-height:1.22!important;
}
.sampleInfo h3,
.showcaseCard h3,
.supportCard h3,
.homeImageShowcase .showcaseCard h3,
.blogCard h2,
.blogCard h2 a,
.workCard .cap{
  font-size:13px!important;
  line-height:1.08!important;
}
.slideText h3,.sampleServiceText h3{font-size:26px!important;line-height:1.12!important;}
.footerGrid h3{font-size:18px!important;line-height:1.25!important;}

@media(max-width:620px){
  .hero h1,
  .aboutHeroText h1,
  .blogArchiveHero h1,
  .blogArticleHero h1,
  .pricingBreakdownHero h1,
  .pricingBreakdownSection h1,
  .catalogPageSection h1,
  .uploadPageSection .uploadTop h1,
  .uploadTop h1,
  .pageHero h1,
  .cimPricingHero h1,
  .cimServicesOverview h1{font-size:26px!important;}
  .sectionHead h2,
  .sampleTitleWrap h2,
  .storyContent h2,
  .aboutContent h2,
  .serviceLineText h2,
  .showcaseHead h2,
  .ctaStripInner h2,
  .contactModern .sectionHead h2,
  .trustpilotText h2{font-size:25px!important;}
  .card h3,
  .step h3,
  .priceCard h3,
  .pricingBreakCard h3,
  .contactBox h3,
  .formBox h3,
  .contactInfoCard h3,
  .blogSideBox h3,
  .blogArticleCta h3,
  .aboutFeature h3{font-size:20px!important;}
  .sampleInfo h3,
  .showcaseCard h3,
  .supportCard h3,
  .blogCard h2,
  .blogCard h2 a{font-size:13px!important;}
}

/* About mobile final state at FIRST PAINT.
   These values mirror the already-approved final v11615/v11616/v6304 state,
   so there is no big -> small snap after refresh. */
@media(max-width:768px){
  html body:not(.adminBody){padding-top:74px!important;margin-top:0!important;}
  html body:not(.adminBody)>.cimMobileHeaderV14{
    height:74px!important;min-height:74px!important;max-height:74px!important;
  }
  html body:not(.adminBody) main.aboutPremium,
  html body:not(.adminBody) main.aboutPremium>section.aboutHero{
    background:#eaf5ff!important;
    background-image:linear-gradient(180deg,#eaf5ff 0%,#eaf5ff 48%,#eef7ff 100%)!important;
  }
  html body:not(.adminBody) main.aboutPremium>section.aboutHero{
    position:relative!important;margin-top:0!important;padding-top:8px!important;padding-bottom:22px!important;
    border-top:0!important;overflow:hidden!important;
  }
  html body:not(.adminBody) main.aboutPremium>section.aboutHero::before{
    content:""!important;position:absolute!important;left:0!important;right:0!important;top:0!important;
    height:58px!important;background:#eaf5ff!important;display:block!important;z-index:0!important;pointer-events:none!important;
  }
  html body:not(.adminBody) main.aboutPremium .aboutHeroGrid{
    position:relative!important;z-index:1!important;margin-top:0!important;padding-top:0!important;
    gap:12px!important;background:transparent!important;
  }
  html body:not(.adminBody) main.aboutPremium .aboutHeroText,
  html body:not(.adminBody) main.aboutPremium .aboutHero .aboutHeroText{
    min-height:0!important;height:auto!important;padding:16px 18px 18px!important;background:#fff!important;
  }
  html body:not(.adminBody) main.aboutPremium .aboutHeroText .badge,
  html body:not(.adminBody) main.aboutPremium .aboutHero .badge{
    margin:0 0 10px!important;padding:5px 12px!important;min-height:0!important;
    font-size:12px!important;line-height:1.15!important;
  }
  html body:not(.adminBody) main.aboutPremium .aboutHeroText h1,
  html body:not(.adminBody) main.aboutPremium .aboutHero .aboutHeroText h1,
  html body:not(.adminBody) main.aboutPremium .aboutHero h1{
    font-size:17px!important;line-height:1.12!important;font-weight:650!important;letter-spacing:0!important;
    margin:0 0 10px!important;padding:0!important;
  }
  html body:not(.adminBody) main.aboutPremium .aboutHeroText p,
  html body:not(.adminBody) main.aboutPremium .aboutHero .aboutHeroText p{
    font-size:14px!important;line-height:1.58!important;margin:0 0 10px!important;padding:0!important;
  }
  html body:not(.adminBody) main.aboutPremium .aboutHeroText .aboutHeroExtra{margin-bottom:0!important;}
}

/* Premium interactions: animate paint-only properties, never layout dimensions. */
button,.btn,.quoteBtn,input,select,textarea,
.catalogServiceChip,.cimServiceNavStaticV34 a,.cimMobileServiceGridV2543 a,
.tab,[role="tab"],details>summary,
.cimMobileHeaderV14 .menuBtn,.cimMobileMenuSheetV14 a,
.priceCard,.pricingBreakCard,.serviceCard,.sampleImageCard,.homeServiceMatchCard{
  transition:
    color var(--cim-v11660-fast) var(--cim-v11660-ease),
    background-color var(--cim-v11660-fast) var(--cim-v11660-ease),
    border-color var(--cim-v11660-fast) var(--cim-v11660-ease),
    box-shadow var(--cim-v11660-normal) var(--cim-v11660-ease),
    opacity var(--cim-v11660-fast) var(--cim-v11660-ease)!important;
}
.cimMobileMenuBackdropV14,
.cimMobileMenuSheetV14{
  transition:opacity 165ms var(--cim-v11660-ease)!important;
}
button:active,.btn:active,.quoteBtn:active,.catalogServiceChip:active,.tab:active,[role="tab"]:active{
  opacity:.86!important;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(8,119,217,.12)!important;
}

/* Native same-origin page transitions: soft crossfade only, no translate/scale jump. */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:cimV11660Out 115ms var(--cim-v11660-ease) both!important;}
::view-transition-new(root){animation:cimV11660In 165ms var(--cim-v11660-ease) both!important;}
@keyframes cimV11660Out{from{opacity:1}to{opacity:.965}}
@keyframes cimV11660In{from{opacity:.965}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  button,.btn,.quoteBtn,input,select,textarea,
  .catalogServiceChip,.cimServiceNavStaticV34 a,.cimMobileServiceGridV2543 a,
  .tab,[role="tab"],details>summary,.cimMobileHeaderV14 .menuBtn,.cimMobileMenuSheetV14 a,
  .priceCard,.pricingBreakCard,.serviceCard,.sampleImageCard,.homeServiceMatchCard,
  .cimMobileMenuBackdropV14,.cimMobileMenuSheetV14{
    transition-duration:.001ms!important;
  }
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.001ms!important;}
}
