/* About principles section; image URLs are relative to the theme stylesheet. */
.about-difference{--difference-red:#ed101e;--difference-navy:#08243a;position:relative;isolation:isolate;min-height:1024px;overflow:hidden;background:#f9fafb url('../img/fon/bl 3 ab fon.webp') left center/auto 100% no-repeat;color:#4a5568}
.about-difference-intro{position:relative;z-index:1;width:47%;max-width:700px;padding:68px 0 0 5.1%}
.about-difference-kicker{display:flex;align-items:center;gap:20px;margin:0 0 20px!important;color:var(--difference-red)!important;font:700 15px/1.2 var(--font-body)!important;letter-spacing:.19em;text-transform:uppercase}
.about-difference-kicker::before{content:"";width:64px;height:2px;background:currentColor;flex:none}
.about-difference-intro h2{margin:0 0 10px;color:var(--difference-navy);font:800 clamp(54px,4.65vw,74px)/.88 var(--font-heading);letter-spacing:-.02em;white-space:nowrap}
.about-difference-intro h2 em{color:var(--difference-red);font-style:normal}
.about-difference-intro>p:not(.about-difference-kicker){max-width:610px;margin:0 0 16px;color:#465164;font:400 19px/1.27 var(--font-body)}
.about-difference-list{position:absolute;z-index:2;top:36px;right:0;bottom:0;width:47.6%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr))}
.difference-item{position:relative;display:grid;grid-template-columns:105px minmax(240px,1fr) 45%;min-width:0;overflow:hidden;border-bottom:1px solid rgba(8,36,58,.12)}
.difference-item:last-child{border-bottom:0}
.difference-number{position:relative;padding:11px 0 0 6px;color:#c7c8ca;font:800 74px/.9 var(--font-heading);letter-spacing:-.035em}
.difference-number::before{content:"";position:absolute;left:41px;top:99px;bottom:0;width:1px;background:#d5d9dc}
.difference-number::after{content:"";position:absolute;left:36px;top:94px;width:7px;height:7px;border:2px solid var(--difference-red);border-radius:50%;background:#fff}
.difference-copy{position:relative;z-index:1;padding:17px 12px 8px 4px}
.difference-label{display:flex;align-items:center;gap:10px;margin:0 0 7px!important;color:var(--difference-red)!important;font:700 12px/1.2 var(--font-body)!important;letter-spacing:.1em;text-transform:uppercase}
.difference-label::after{content:"";width:42px;height:1px;background:currentColor}
.difference-copy h3{margin:0 0 8px;color:var(--difference-navy);font:800 25px/.96 var(--font-heading);letter-spacing:-.015em}
.difference-copy>p:not(.difference-label){margin:0 0 8px;color:#465164;font:400 12px/1.22 var(--font-body)}
.difference-image{position:relative;min-width:0;overflow:hidden;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}
.difference-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.difference-item:hover .difference-image img{transform:scale(1.07)}
.difference-link{display:inline-flex;align-items:center;gap:8px;color:var(--difference-red);font:400 12px/1.2 var(--font-body);white-space:nowrap}
.difference-link img{width:14px;height:14px;object-fit:contain;filter:brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(5183%) hue-rotate(347deg) brightness(97%)}
.difference-link:hover{text-decoration:underline;text-underline-offset:3px}
@media(min-width:761px) and (max-width:1250px){.about-difference-intro{width:45%}.about-difference-intro h2{font-size:clamp(49px,4.5vw,62px)}.about-difference-intro>p:not(.about-difference-kicker){font-size:16px}.about-difference-list{width:52%}.difference-item{grid-template-columns:75px minmax(175px,1fr) 37%}.difference-number{font-size:60px}.difference-number::before{left:29px}.difference-number::after{left:24px}.difference-copy h3{font-size:22px}.difference-copy>p:not(.difference-label){font-size:11px}}
@media(max-width:760px){.about-difference{min-height:0;background:#f9fafb}.about-difference::before{content:"";position:absolute;z-index:-1;top:0;right:0;width:72%;height:380px;background:url('../img/fon/bl 3 ab fon mob.webp') right top/cover no-repeat;mask-image:linear-gradient(90deg,transparent 0,#000 37%)}.about-difference-intro{width:100%;max-width:none;padding:45px 6.4% 5px}.about-difference-kicker{font-size:clamp(11px,1.8vw,15px)!important;gap:12px;margin-bottom:16px!important}.about-difference-kicker::before{width:55px}.about-difference-intro h2{font-size:clamp(39px,6.25vw,63px);line-height:.95;margin-bottom:15px}.about-difference-intro>p:not(.about-difference-kicker){width:53%;max-width:510px;font-size:clamp(14px,2.15vw,20px);line-height:1.27;margin-bottom:13px}.about-difference-list{position:relative;top:auto;right:auto;bottom:auto;width:100%;display:block;margin-top:8px}.difference-item{min-height:278px;grid-template-columns:17% 43% 40%;border-bottom:1px solid #d9dde1}.difference-number{padding:19px 0 0 36%;font-size:clamp(56px,9.3vw,94px);color:#d4d7da}.difference-number::before,.difference-number::after{display:none}.difference-copy{padding:25px 4px 16px 0}.difference-label{font-size:clamp(11px,1.55vw,15px)!important;margin-bottom:9px!important}.difference-copy h3{font-size:clamp(24px,3.2vw,34px);margin-bottom:10px}.difference-copy>p:not(.difference-label){font-size:clamp(12px,1.65vw,16px);line-height:1.23;margin-bottom:11px}.difference-image{position:absolute;z-index:0;inset:0 0 0 47%;clip-path:none;mask-image:linear-gradient(90deg,transparent,#000 60%)}.difference-image img{object-position:center}.difference-link{font-size:clamp(11px,1.5vw,15px)}.difference-item:last-child{min-height:310px}}
@media(max-width:480px){.about-difference::before{width:73%;height:280px}.about-difference-intro{padding:33px 6% 2px}.about-difference-kicker::before{width:34px}.about-difference-intro h2{font-size:clamp(33px,8.2vw,43px)}.about-difference-intro>p:not(.about-difference-kicker){width:67%;font-size:13px}.difference-item{min-height:310px;grid-template-columns:19% 60% 21%}.difference-number{padding-left:20%;font-size:56px}.difference-copy{padding-top:20px}.difference-copy h3{font-size:25px}.difference-copy>p:not(.difference-label){font-size:12px}.difference-image{left:50%}.difference-item:last-child{min-height:355px}.difference-link{white-space:normal;font-size:12px}}
@media(prefers-reduced-motion:reduce){.difference-image img{transition:none}}

/* Keep the mobile introduction readable across the whole image. The image
   and its graduated white overlay grow with the copy instead of ending mid-text. */
@media(max-width:760px){
  .about-difference::before{display:none}
  .about-difference-intro{
    background:
      linear-gradient(90deg,rgba(249,250,251,.98) 0%,rgba(249,250,251,.91) 43%,rgba(249,250,251,.58) 100%),
      url('../img/fon/bl 3 ab fon mob.webp') right top/cover no-repeat;
    padding-bottom:28px;
  }
  .about-difference-intro>p:not(.about-difference-kicker){width:100%;max-width:none}
  .difference-image{mask-image:linear-gradient(90deg,transparent 40%,#000 100%)}
}