/* 37 — Original J4T About section from the supplied homepage HTML.
   Isolated BEM names protect every existing widget and the old homepage. */
.elementor-widget-j4t_classic_about{font-family:Inter,Arial,sans-serif}
.elementor-widget-j4t_classic_about,.elementor-widget-j4t_classic_about *{box-sizing:border-box}
.elementor-widget-j4t_classic_about .elementor-widget-container{overflow:visible}
.j4t-classic-about{--classic-blue:#3f579f;position:relative;isolation:isolate;width:100%;padding:110px 0;background:#fff;color:#12203b;overflow:hidden}
.j4t-classic-about--full{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.j4t-classic-about__wrap{width:1100px;max-width:100%;margin:0 auto}
.j4t-classic-about__grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);gap:58px;align-items:start}
.j4t-classic-about__copy{min-width:0}
.j4t-classic-about__eyebrow{font-size:11px;line-height:1.2;letter-spacing:2px;font-weight:800;color:var(--classic-blue);margin:0 0 17px;text-transform:uppercase}
.j4t-classic-about__title{font-family:Inter,Arial,sans-serif;color:#0e1730;font-size:clamp(28px,2.25vw,33px);font-weight:800;line-height:1.18;letter-spacing:-.033em;margin:0 0 21px}
.j4t-classic-about__desc,.j4t-classic-about__desc p{font-family:inherit;font-size:14px;line-height:1.8;color:inherit;margin:0}
.j4t-classic-about__desc p+p{margin-top:12px}
.j4t-classic-about__lower{display:flex;align-items:center;gap:35px;margin-top:25px;margin-bottom:27px}
.j4t-classic-about__left-photo{width:155px;height:160px;max-width:42%;flex-shrink:0}
.j4t-classic-about__left-photo img{width:100%;height:100%;max-width:none;object-fit:cover;display:block;border-radius:4px}
.j4t-classic-about__check-list{list-style:none!important;margin:0!important;padding:0!important;flex:1;display:flex;flex-direction:column;gap:13px;min-width:0}
.j4t-classic-about__check-list li{position:relative;margin:0!important;padding:0 0 0 25px!important;line-height:1.5;color:#192341;font-size:13px;font-weight:500;list-style:none!important}
.j4t-classic-about__check-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--classic-blue);font-size:16px;font-weight:800;line-height:1.35}
.j4t-classic-about__lower--no-photo{gap:0}
.j4t-classic-about__lower--no-list .j4t-classic-about__left-photo{width:180px;max-width:100%}
.j4t-classic-about__button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;min-width:102px;padding:10px 24px;text-decoration:none!important;border:0;border-radius:3px;background:var(--classic-blue);color:#fff!important;font-size:13px;line-height:1.2;font-weight:700;transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease;cursor:pointer}
.j4t-classic-about__button:hover,.j4t-classic-about__button:focus-visible{background:#29437e;color:#fff!important;transform:translateY(-2px);box-shadow:0 9px 20px rgba(39,59,119,.19)}
.j4t-classic-about__collage{position:relative;min-width:0;height:500px}
.j4t-classic-about__orange{position:absolute;z-index:0;left:12%;top:9%;width:30%;height:36%;background:#f4ae35;border-radius:5px}
.j4t-classic-about__photo{position:absolute;display:block;object-fit:cover;max-width:none!important;border-radius:4px;box-shadow:0 6px 20px rgba(15,28,60,.09)}
.j4t-classic-about__photo--main{z-index:1;right:0;top:0;width:57%;height:65%;object-position:50% center}
.j4t-classic-about__photo--side{z-index:2;left:0;bottom:0;width:61%;height:57%;object-position:center center;border:7px solid #fff;box-sizing:content-box;box-shadow:0 6px 16px rgba(15,28,60,.13)}
.j4t-classic-about__badge{position:absolute;z-index:3;right:3%;bottom:14%;min-width:126px;min-height:82px;padding:13px 14px;border-radius:4px;background:var(--classic-blue);color:#fff!important;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none!important;box-shadow:0 6px 20px rgba(20,37,89,.20)}
.j4t-classic-about__badge-icon{display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.9);border-radius:50%;width:29px;height:29px;font-size:15px;line-height:1;color:#fff}
.j4t-classic-about__badge-copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:#fff}
.j4t-classic-about__badge-copy strong{font-family:inherit;font-size:21px;line-height:1;color:#fff;font-weight:800}
.j4t-classic-about__badge-copy small{font-family:inherit;font-size:10px;color:#fff;line-height:1.2;font-weight:600}
/* Balanced dimensions at the four project breakpoints. */
@media(max-width:1366px){
  .j4t-classic-about__wrap{width:90%}
  .j4t-classic-about__grid{gap:clamp(30px,4vw,58px)}
  .j4t-classic-about__title{font-size:clamp(27px,2.5vw,33px)}
}
@media(max-width:1024px){
  .j4t-classic-about{padding:76px 0}
  .j4t-classic-about__grid{grid-template-columns:1fr;gap:40px}
  .j4t-classic-about__wrap{width:90%}
  .j4t-classic-about__copy{max-width:740px}
  .j4t-classic-about__collage{width:min(100%,660px);height:500px;margin:0 auto}
  .j4t-classic-about__title{font-size:clamp(30px,4vw,38px)}
  .j4t-classic-about__desc,.j4t-classic-about__desc p{font-size:16px;line-height:1.75}
  .j4t-classic-about__check-list li{font-size:14px}
}
@media(max-width:767px){
  .j4t-classic-about{padding:60px 0}
  .j4t-classic-about__wrap{width:90%}
  .j4t-classic-about__grid{gap:35px}
  .j4t-classic-about__eyebrow{font-size:11px;margin-bottom:14px}
  .j4t-classic-about__title{font-size:clamp(27px,7.8vw,34px);line-height:1.2;margin-bottom:16px}
  .j4t-classic-about__desc,.j4t-classic-about__desc p{font-size:15px;line-height:1.78}
  /* Widget 37: the small photo becomes a full-width landscape image on mobile.
     Benefits must flow BELOW the photo, never squeezed alongside it. */
  .j4t-classic-about__lower{flex-direction:column;gap:18px;align-items:stretch;margin-top:28px;margin-bottom:24px;min-width:0}
  .j4t-classic-about__left-photo,
  .j4t-classic-about__lower--no-list .j4t-classic-about__left-photo{
    display:block;width:100%;max-width:100%;height:auto;aspect-ratio:3 / 2;
    flex:0 0 auto;overflow:hidden;border-radius:4px;
  }
  .j4t-classic-about__left-photo img{
    width:100%;height:100%;object-fit:cover;object-position:center;
  }
  .j4t-classic-about__check-list{width:100%;flex:none;gap:12px;min-width:0}
  .j4t-classic-about__check-list li{font-size:14px;line-height:1.55;padding-left:24px!important;overflow-wrap:break-word}
  .j4t-classic-about__check-list li::before{font-size:16px}
  .j4t-classic-about__button{min-height:44px;font-size:14px;padding:10px 24px}
  .j4t-classic-about__collage{height:330px;width:100%;margin:0}
  .j4t-classic-about__photo--side{border-width:4px}
  .j4t-classic-about__badge{min-width:100px;min-height:60px;padding:9px 11px;gap:6px;bottom:12%}
  .j4t-classic-about__badge-icon{width:24px;height:24px;font-size:13px}
  .j4t-classic-about__badge-copy strong{font-size:18px}
  .j4t-classic-about__badge-copy small{font-size:9px}
}
@media(max-width:390px){
  /* Keep the full-width image and readable benefits on narrow phones. */
  .j4t-classic-about__check-list li{font-size:14px}
  .j4t-classic-about__collage{height:295px}
}
/* Existing J4T shared IntersectionObserver adds j4t-motion-in. */
@keyframes j4tClassicAboutEnterLeft{from{opacity:0;transform:translate3d(-22px,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes j4tClassicAboutEnterRight{from{opacity:0;transform:translate3d(22px,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes j4tClassicAboutItemRise{from{opacity:0;transform:translate3d(0,13px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:no-preference){
  /* Do not blank a whole section while the IntersectionObserver waits.
     Animate on entrance, but default the actual content to visible. */
  .j4t-classic-about--animate.j4t-motion-pending .j4t-classic-about__copy,
  .j4t-classic-about--animate.j4t-motion-pending .j4t-classic-about__collage{opacity:1}
  .j4t-classic-about--animate.j4t-motion-in .j4t-classic-about__copy{animation:j4tClassicAboutEnterLeft .76s cubic-bezier(.2,.7,.2,1) both}
  .j4t-classic-about--animate.j4t-motion-in .j4t-classic-about__collage{animation:j4tClassicAboutEnterRight .78s cubic-bezier(.2,.7,.2,1) .10s both}
  .j4t-classic-about--animate.j4t-motion-in .j4t-classic-about__orange{animation:j4tClassicAboutItemRise .65s ease-out .23s both}
  .j4t-classic-about--animate.j4t-motion-in .j4t-classic-about__photo--main{animation:j4tClassicAboutItemRise .62s ease-out .29s both}
  .j4t-classic-about--animate.j4t-motion-in .j4t-classic-about__photo--side{animation:j4tClassicAboutItemRise .65s ease-out .39s both}
  .j4t-classic-about--animate.j4t-motion-in .j4t-classic-about__badge{animation:j4tClassicAboutItemRise .56s ease-out .52s both}
  .j4t-classic-about--animate.j4t-motion-in .j4t-classic-about__lower{animation:j4tClassicAboutItemRise .59s ease-out .22s both}
}


/* Frontend compatibility: Elementor may leave its entrance-animation class
   on Widget 37 even after the J4T IntersectionObserver has animated the
   inner <section>. The outer wrapper then stays visibility:hidden, leaving
   a large blank white area despite correct rendered markup. We handle only
   this widget; no other Elementor widgets or entrance animations are touched.
   The widget owns its own entrance animation (j4t-motion-in). */
.elementor-widget-j4t_classic_about.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}
.elementor-widget-j4t_classic_about.elementor-invisible > .elementor-widget-container {
  visibility: visible !important;
  opacity: 1 !important;
}