/* Targeted preserve redesign: DESIGN_VARIANCE 5, MOTION_INTENSITY 4 for the
   new layer, VISUAL_DENSITY 6. Native CSS, orange-and-white palette, explicitly locked to light mode.
   Larger 3:2 professional office illustration: 61% desktop visual column,
   full-width mobile artwork, no image crop or artificial height cap.
   Existing typography, copy, CTA/reveal motion, navigation and SEO stay intact.
   Local hero layers: ribbon 0, visual 1 (wordmark 0 / photo 1), copy 2.
   No image fade-in: the optimized hero remains visible as soon as it loads. */
.svc-intro .svc-hero{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:minmax(340px,.78fr) minmax(0,1.22fr);gap:12px;min-height:490px;margin-top:24px;padding:24px 12px 16px 28px;border:1px solid #FF6B2C0D;border-radius:24px;background:#FAFAF9}
.svc-intro .svc-hero-scenery{position:absolute;inset:auto -24px -18px;z-index:0;height:clamp(150px,17vw,225px);display:block;pointer-events:none;opacity:.85;transform-origin:center bottom}
.svc-intro .svc-hero-scenery>img{display:block;width:100%;height:100%;object-fit:fill;filter:none}
.svc-intro .svc-hero-copy{position:relative;z-index:2;min-width:0}
.svc-intro .svc-hero-copy>p{max-width:510px;margin-top:22px}
.svc-intro .svc-hero-visual{position:relative;z-index:1;isolation:isolate;height:auto;aspect-ratio:3/2;align-self:center;align-items:center;margin:0;min-width:0;min-height:0;max-width:none;width:100%;padding:0}
.svc-intro .svc-hero-visual>picture{position:relative;z-index:1;display:block;width:100%;aspect-ratio:3/2;background-repeat:no-repeat;background-position:center;background-size:100% 100%}
.svc-intro .svc-hero-visual img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;opacity:1;transform:none;animation:none}
.svc-intro .svc-hero-wordmark{z-index:0;top:-8px;left:-14px;width:calc(100% + 14px);color:var(--primary);font-size:clamp(68px,7.4vw,110px);line-height:1.05;opacity:.18;animation:none;transform:none;pointer-events:none;user-select:none}
.svc-intro .svc-hero-wordmark>span{font-size:18px;line-height:1.4;letter-spacing:.18em;margin-top:8px;padding-left:5px}
.svc-intro .svc-proof{padding-top:36px}
@media(max-width:1023px){
  .svc-intro .svc-hero{grid-template-columns:minmax(275px,.85fr) minmax(0,1.15fr);min-height:420px;margin-top:20px;padding:24px 10px 18px 24px;gap:12px}
  .svc-intro .svc-hero-wordmark{top:-3px;left:-8px;width:calc(100% + 8px);font-size:clamp(54px,7.6vw,76px)}
  .svc-intro .svc-hero-scenery{height:100px;bottom:-26px}
}
@media(max-width:767px){
  .svc-intro .svc-hero{grid-template-columns:1fr;min-height:0;margin-top:18px;padding:26px 20px 8px;gap:12px;border-radius:20px}
  .svc-intro .svc-hero-copy>p{margin-top:17px}
  .svc-intro .svc-hero-visual{width:calc(100% + 40px);margin:0 -20px;max-width:none;padding:0}
  .svc-intro .svc-hero-wordmark{font-size:clamp(50px,15vw,75px);top:-9px;left:12px;width:calc(100% - 24px);opacity:.2}
  .svc-intro .svc-hero-wordmark>span{font-size:12px;letter-spacing:.16em;margin-top:4px}
  .svc-intro .svc-proof{padding-top:22px}
  .svc-intro .svc-hero-scenery{bottom:-14px;height:clamp(120px,34vw,160px);opacity:.9}
}

/* Slow, small floor movement gives depth without moving people or text. */
@media(prefers-reduced-motion:no-preference){
  .svc-intro .svc-hero-scenery{animation:svc-ribbon-breathe 12s ease-in-out infinite alternate}
}
@keyframes svc-ribbon-breathe{
  from{transform:translate3d(-.7%,3px,0) rotate(-.35deg)}
  to{transform:translate3d(.7%,-3px,0) rotate(.35deg)}
}
@media(prefers-reduced-motion:reduce){
  .svc-intro .svc-hero-scenery{animation:none;transform:none}
}