/* Imagine Monkey — Live art-direction refinements, 0.3.68.
   Deliberately presentation-only. Page content, Portfolio/Selected Work, forms,
   pricing, anchors, and native interactions remain under their existing owners. */

/* Type and reading rhythm: tune the familiar brand, rather than replace it. */
:is(.imf-site,.editor-styles-wrapper) .im-page-content :is(
  .im-packages-section-heading h2,.im-r-heading-copy h2,.im-managed-care-copy h2,
  .im-studio-section-heading h2,.im-packages-story-copy h2,.im-dev-experience h2,
  .im-sp-editorial-grid h2,.im-redesign-review h2,.im-local-work h2
){text-wrap:balance}
:is(.imf-site,.editor-styles-wrapper) .im-page-content :is(
  .im-packages-hero-copy .im-lead,.im-packages-contact-copy .im-lead,
  .im-r-heading-copy > p,.im-managed-care-copy > p,.im-studio-service-card > p,
  .im-dev-masthead-copy > p,.im-local-heading-grid p
){max-width:66ch}
:is(.imf-site,.editor-styles-wrapper) .im-page-content :is(
  .im-packages-section-heading .im-eyebrow,.im-packages-hero-copy .im-eyebrow,
  .im-r-heading-copy .im-eyebrow,.im-sp-centered-intro .im-eyebrow,
  .im-managed-care-copy .im-eyebrow,.im-dev-masthead-heading .im-eyebrow
){font-size:11px!important;letter-spacing:.13em!important;line-height:1.65!important}
.imf-site .im-page-content [id^="im-"]{scroll-margin-top:clamp(88px,9vw,126px)}

/* A different visual job for the general Web Design overview. Custom Web
   Design retains the expressive navy editorial hero in the source layout. */
.imf-site.page-id-7023 #im-web-design-intro.im-packages-hero{
  background:linear-gradient(145deg,#f2f7fc 0%,#eaf3fb 100%);
  color:#193b5b;border-top:1px solid #d1e2f1;
}
.imf-site.page-id-7023 #im-web-design-intro.im-packages-hero::after{opacity:.11}
.imf-site.page-id-7023 #im-web-design-intro .im-packages-hero-copy h1{color:#123a59}
.imf-site.page-id-7023 #im-web-design-intro .im-packages-hero-copy h1 strong{color:#0a62b6}
.imf-site.page-id-7023 #im-web-design-intro .im-eyebrow{color:#305e86}
.imf-site.page-id-7023 #im-web-design-intro .im-lead,
.imf-site.page-id-7023 #im-web-design-intro .im-studio-actions p{color:#355b7a}
.imf-site.page-id-7023 #im-web-design-intro .im-packages-hero-note{
  background:linear-gradient(145deg,#163b5d,#0e2e4c);border:1px solid #426a89;
  box-shadow:0 22px 42px -34px #173f62;
}
.imf-site.page-id-7023 #im-web-design-intro .im-packages-hero-note :is(h2,p){color:#edf6fe}
.imf-site.page-id-7023 #im-web-design-intro .im-packages-hero-note .im-plan-overline,
.imf-site.page-id-7023 #im-web-design-intro .im-packages-hero-note .im-packages-note-signature{color:#c6dcea}

/* Bespoke design: the identity card leads; the technical benefits support it.
   Only the established three-card section changes its layout proportions. */
@media(min-width:901px){
 .imf-site.page-id-15 #im-web-design-features .im-studio-service-grid{
  grid-template-columns:minmax(0,1.14fr) repeat(2,minmax(0,.93fr));gap:22px;
 }
}
.imf-site.page-id-15 #im-web-design-features .im-studio-service-card:first-child{
  background:linear-gradient(155deg,#fff 12%,#eff7fe 100%);
  border-color:#bdd6ea;
}
.imf-site.page-id-15 #im-web-design-features .im-studio-service-card:first-child h3{
  font-size:clamp(25px,2.2vw,31px);line-height:1.22;
}

/* Make sections read as deliberate chapters rather than a uniform block stack.
   Don't add more nested cards or re-order semantic content. */
.imf-site .im-page-content :is(
  .im-packages-section-heading,.im-studio-section-heading,.im-r-heading-split,
  .im-local-heading-grid,.im-managed-care-grid,.im-dev-tooling-grid
){row-gap:clamp(24px,3.2vw,44px)}
.imf-site .im-page-content :is(
  .im-studio-service-card,.im-plan-card,.im-package-detail-card,.im-dev-surface,
  .im-r-card,.im-sp-restaurant-plan,.im-sp-recovery-grid .im-sp-card
){border-radius:17px}
.imf-site .im-page-content :is(
  .im-plan-card .im-plan-intro,.im-studio-service-card p,
  .im-package-detail-card p,.im-dev-surface p,.im-r-feature p
){line-height:1.72}

/* Card interaction: modest directional feedback only where the card has a link.
   No perpetual/scroll-triggered movement, and no misleading hover affordance
   on purely informational cards. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .imf-site .im-page-content :is(
   .im-studio-service-card:has(a[href]),.im-package-detail-card:has(a[href]),
   .im-dev-extension-card:has(a[href]),.im-sp-restaurant-plan:has(a[href])
 ){transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
 .imf-site .im-page-content :is(
   .im-studio-service-card:has(a[href]),.im-package-detail-card:has(a[href]),
   .im-dev-extension-card:has(a[href]),.im-sp-restaurant-plan:has(a[href])
 ):hover{transform:translateY(-3px)}
 .imf-site .im-page-content a[href] .im-plan-arrow{
  display:inline-block;transition:transform .18s ease;
 }
 .imf-site .im-page-content a[href]:hover .im-plan-arrow{transform:translateX(3px)}
 .imf-site .im-page-content .wp-element-button{
  transition:background-color .18s ease,border-color .18s ease,box-shadow .2s ease,transform .18s ease;
 }
}
.imf-site .im-page-content :is(
 .im-studio-service-card:has(a[href]),.im-package-detail-card:has(a[href]),
 .im-dev-extension-card:has(a[href]),.im-sp-restaurant-plan:has(a[href])
):focus-within{border-color:#7bb1dd;box-shadow:0 16px 38px -28px #1d5485a3}

/* Better tap and keyboard feedback: one consistent convention, not decorative
   movement on every element. Existing form/CleanTalk logic isn't touched. */
.imf-site .im-page-content :is(
 .im-studio-actions .wp-element-button,.im-plan-card-footer .wp-element-button,
 .im-packages-contact-section .wp-element-button,.im-inquiry .wp-element-button
){min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.imf-site .im-page-content :is(.im-packages,.im-studio-services,.im-dev,.im-refresh,.im-services-page,.im-inquiry) :is(a,button,input,select,textarea):focus-visible{
 outline:3px solid #0866c1;outline-offset:4px;
}
.imf-site .im-page-content :is(.im-packages-hero,.im-r-dark-panel,.im-plan-card-featured,.im-sp-dark)
 :is(a,button,input,select,textarea):focus-visible{
 outline-color:#a6ddff;
}

/* Packages: preserve every tier and price. Reduce competition from minor
   labels and keep the full-inclusions control prominent in the flow. */
.imf-site #im-packages .im-plan-card .im-plan-card-kicker,
.imf-site #im-packages .im-plan-card .im-plan-overline{
 letter-spacing:.10em;line-height:1.5;
}
.imf-site #im-packages .im-plan-card .im-plan-intro{max-width:36ch}
.imf-site #im-packages .im-plan-card .im-plan-scope-item{
 line-height:1.62;
}
.imf-site #im-plan-details{scroll-margin-top:110px}

/* Managed care: offer three intelligible choices without changing the
   preselect links, the featured bundled plan, or the no-prices policy. */
.imf-site #im-managed-plans .im-plan-card-maintenance{
 background:#f8fbfe;border-color:#c4d9ea;
}
.imf-site #im-managed-plans .im-plan-card-maintenance .im-plan-card-heading h3{
 color:#143c61;
}
.imf-site #im-managed-plans .im-plan-collection{align-items:stretch}
.imf-site #im-managed-plans .im-plan-card-footer .wp-element-button{min-height:46px}

/* WordPress development and redesign: preserve their different, purposeful
   visual narratives, but make their compact supporting details scan cleanly. */
.imf-site #im-development-wordpress :is(.im-dev-foundation-row,.im-dev-extension-card){
 line-height:1.72;
}
.imf-site #im-development-integrations .im-dev-connection-row,
.imf-site #im-redesign-review .im-redesign-review-row{
 padding-block:clamp(15px,1.5vw,20px);
}
.imf-site #im-redesign-focus .im-r-feature{line-height:1.72}

/* Service-specific rhythm, rather than a single new sitewide card pattern. */
.imf-site #im-store-experience .im-commerce-customer,
.imf-site #im-store-experience .im-commerce-owner{overflow:hidden}
.imf-site #im-store-management .im-commerce-management-rows > *{min-height:60px}
.imf-site #im-restaurant-options .im-sp-restaurant-plan .im-plan-features li{
 line-height:1.68;
}
.imf-site #im-local-work .im-local-work-row{line-height:1.75}
.imf-site #im-malware-process .im-sp-recovery-grid{row-gap:18px}

/* More thoughtful handset layouts: don't just shrink desktop type.
   Avoid affecting the Selected Work grid and its three approved portfolio blocks. */
@media(max-width:780px){
 .imf-site .im-page-content :is(
  .im-packages-hero-copy h1,.im-sp-centered-intro h1,.im-r-heading-copy h1,
  .im-dev-masthead-heading h1
 ){line-height:1.13;text-wrap:balance}
 .imf-site .im-page-content :is(
  .im-studio-service-grid,.im-packages-hero-grid,.im-dev-tooling-grid
 ){row-gap:20px}
 .imf-site .im-page-content :is(
  .im-studio-service-card,.im-dev-surface,.im-package-detail-card
 ){padding-block:24px}
 .imf-site #im-managed-plans .im-plan-card .im-plan-intro{min-block-size:0}
}
@media(max-width:420px){
 .imf-site .im-page-content :is(
  .im-packages-hero-copy .im-lead,.im-packages-contact-copy .im-lead,
  .im-dev-masthead-copy p
 ){font-size:16px;line-height:1.72}
 .imf-site .im-page-content :is(.im-studio-service-card,.im-dev-surface){border-radius:15px}
}

@media(prefers-reduced-motion:reduce){
 .imf-site .im-page-content :is(
  .im-studio-service-card,.im-package-detail-card,.im-dev-extension-card,
  .im-sp-restaurant-plan,.im-plan-arrow,.wp-element-button
 ){animation:none!important;transition:none!important;transform:none!important}
}
@media(forced-colors:active){
 .imf-site.page-id-7023 #im-web-design-intro.im-packages-hero,
 .imf-site.page-id-7023 #im-web-design-intro .im-packages-hero-note,
 .imf-site #im-managed-plans .im-plan-card-maintenance,
 .imf-site.page-id-15 #im-web-design-features .im-studio-service-card:first-child{
  background:Canvas!important;color:CanvasText!important;border-color:CanvasText!important;box-shadow:none!important;
 }
 .imf-site .im-page-content :is(.im-packages,.im-studio-services,.im-dev,.im-refresh,.im-services-page,.im-inquiry) :is(a,button,input,select,textarea):focus-visible{outline-color:Highlight}
}
@media print{
 .imf-site .im-page-content :is(.im-studio-service-card,.im-plan-card,.im-dev-surface){box-shadow:none!important;transform:none!important}
}


/* 0.3.69 — WordPress Development hero: align the heading with its lead copy.
   The original two-column grid bottom-aligned its shorter heading against the
   taller description/CTA, making the title appear noticeably too low. Keep
   the native one-column mobile flow, typography, and content unchanged. */
@media (min-width:901px) {
  .imf-site #im-development-intro .im-dev-masthead-grid {
    align-items:start;
  }
}