.about-page .site-header{position:absolute;inset:0 0 auto;z-index:30;background:transparent!important}
.about-page .site-header::after{content:"";position:absolute;inset:0 0 auto;height:160px;background:linear-gradient(180deg,rgba(3,16,34,.64),transparent);z-index:-1;pointer-events:none}
.about-page .site-logo,.about-page .desktop-nav,.about-page .header-actions{z-index:auto}

.about-hero{position:relative;min-height:min(900px,100svh);min-height:max(710px,100svh);background:#091a2b url('./source/media/about-hero-cabinet-v3.png') center center/cover no-repeat;color:#fff;isolation:isolate}
.about-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,17,34,.72) 0%,rgba(4,17,34,.49) 37%,rgba(4,17,34,.03) 75%),linear-gradient(0deg,rgba(4,17,34,.46),transparent 42%);z-index:-1}
.about-hero-inner{min-height:inherit;display:flex;align-items:flex-end;padding-top:160px;padding-bottom:clamp(85px,10vh,140px)}
.about-hero-content{max-width:700px}
.about-hero .inner-breadcrumb{margin-bottom:32px;color:rgba(255,255,255,.76)}
.about-hero h1{margin:0;font-size:clamp(4.5rem,8.3vw,9rem);font-weight:700;line-height:.98;letter-spacing:-.065em}
.about-hero-content>p{max-width:570px;margin:28px 0 0;font-size:clamp(1.15rem,1.65vw,1.6rem);line-height:1.48;letter-spacing:-.015em;color:#e9eef3}

.about-story{padding:clamp(100px,12vw,190px) 0;background:#fff}
.about-story-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(60px,10vw,170px);align-items:start}
.about-story h2{max-width:760px;margin:0;color:#102d57;font-size:clamp(3rem,5.3vw,6rem);font-weight:700;line-height:1.07;letter-spacing:-.055em;text-wrap:balance}
.about-story-copy{padding-top:8px;border-top:1px solid #aab9c9;color:#36516b;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.85}
.about-story-copy p{max-width:560px;margin:25px 0 0}

.about-material{min-height:680px;display:flex;align-items:flex-end;position:relative;isolation:isolate;color:#fff;background:#122b4c url('./source/media/specialization-products.webp') center center/cover no-repeat}
.about-material::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,23,45,.88),rgba(4,23,45,.33) 53%,rgba(4,23,45,.06)),linear-gradient(0deg,rgba(4,23,45,.45),transparent 45%)}
.about-material-inner{padding-top:120px;padding-bottom:105px}
.about-material-copy{max-width:600px}
.about-material h2{margin:0;font-size:clamp(3rem,5.2vw,5.5rem);font-weight:700;line-height:1.07;letter-spacing:-.055em}
.about-material p{max-width:530px;margin:25px 0 0;color:#e8edf3;font-size:clamp(1.05rem,1.3vw,1.24rem);line-height:1.7}

.about-directions{padding:clamp(95px,11vw,165px) 0;background:#fff}
.about-directions-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;padding-bottom:50px}
.about-directions h2{margin:0;color:#102d57;font-size:clamp(3rem,5vw,5.2rem);font-weight:700;line-height:1.05;letter-spacing:-.055em}
.about-directions-heading p{max-width:240px;margin:0 0 7px;color:#647c94;font-size:15px;line-height:1.5}
.about-direction-list{border-top:1px solid #b8c5d1}
.about-direction-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.8fr) 54px;gap:30px;align-items:center;min-height:148px;padding:25px 4px;border-bottom:1px solid #b8c5d1;color:#12345d;transition:padding .2s,background .2s}
.about-direction-list a:hover{padding-left:18px;background:#f5f8fb}
.about-direction-list h3{margin:0;font-size:clamp(1.7rem,2.7vw,2.9rem);line-height:1.13;font-weight:600;letter-spacing:-.045em}
.about-direction-list p{max-width:370px;margin:0;color:#5a7189;font-size:15px;line-height:1.55}
.about-direction-list span{font-size:32px;font-weight:300;justify-self:end}

.about-next{padding:95px 0 110px;background:#eef2f6;color:#102d57}
.about-next-inner{display:flex;align-items:end;justify-content:space-between;gap:70px}
.about-next h2{max-width:730px;margin:0;font-size:clamp(2.8rem,5vw,5.4rem);line-height:1.07;letter-spacing:-.05em}
.about-next p{max-width:550px;margin:25px 0 0;color:#4a6279;font-size:17px;line-height:1.6}
.about-next a{display:flex;align-items:center;justify-content:space-between;gap:30px;min-width:250px;padding:18px 0;border-bottom:1px solid #102d57;font-size:15px;font-weight:700;white-space:nowrap}
.about-next a span{font-size:28px;font-weight:300}
.about-next a:hover{color:#0847d3;border-color:#0847d3}

@media(max-width:900px){
  .about-hero{min-height:780px;background-position:63% center}
  .about-hero::before{background:linear-gradient(90deg,rgba(4,17,34,.78),rgba(4,17,34,.35) 60%,rgba(4,17,34,.08)),linear-gradient(0deg,rgba(4,17,34,.45),transparent 50%)}
  .about-story-grid{grid-template-columns:1fr;gap:55px}
  .about-story-copy{max-width:700px}
  .about-direction-list a{grid-template-columns:minmax(0,1fr) 40px;gap:12px}
  .about-direction-list p{grid-column:1;grid-row:2}
  .about-direction-list span{grid-column:2;grid-row:1/3}
}
@media(max-width:700px){
  .about-page .site-header{height:84px}
  .about-hero{min-height:710px;background-position:62% center}
  .about-hero::before{background:linear-gradient(90deg,rgba(4,17,34,.84),rgba(4,17,34,.5) 72%,rgba(4,17,34,.28)),linear-gradient(0deg,rgba(4,17,34,.55),transparent 55%)}
  .about-hero-inner{padding-top:135px;padding-bottom:80px}
  .about-hero .inner-breadcrumb{margin-bottom:24px}
  .about-hero h1{font-size:clamp(3.7rem,14vw,5.5rem)}
  .about-hero-content>p{font-size:18px;line-height:1.5}
  .about-story{padding:90px 0 105px}
  .about-story-grid{gap:40px}
  .about-story h2{font-size:clamp(2.8rem,11vw,4.5rem)}
  .about-material{min-height:630px;background-position:65% center}
  .about-material::before{background:linear-gradient(0deg,rgba(4,23,45,.94),rgba(4,23,45,.24) 78%)}
  .about-material-inner{padding-top:110px;padding-bottom:65px}
  .about-directions{padding:90px 0 105px}
  .about-directions-heading{display:block;padding-bottom:35px}
  .about-directions-heading p{margin-top:18px}
  .about-direction-list a{min-height:140px;padding:25px 0}
  .about-direction-list h3{font-size:26px}
  .about-direction-list p{font-size:14px}
  .about-next{padding:80px 0 90px}
  .about-next-inner{display:block}
  .about-next h2{font-size:clamp(2.7rem,10vw,4.5rem)}
  .about-next a{margin-top:45px}
}