.about-page{background:#fff}

/* The reference page uses a solid navy header and a full-width illustrated banner. */
.about-page .site-header{height:180px;background:#06145a}
.about-page .contact-strip{height:60px;align-items:center;font-size:23px;padding-right:9px}
.about-page .strip-right{gap:75px}
.about-page .strip-phone span,.about-page .strip-right a:first-child span{font-size:27px}
.about-page .social-letter{font-size:22px}
.about-page .instagram-icon{font-size:25px}
.about-page .nav-row{height:120px;padding:0 8px 0 12px}
.about-page .brand{width:250px;height:82px;flex-basis:250px}
.about-page .primary-nav{gap:46px;font-size:27px}
.about-page .primary-nav .nav-contact{min-width:198px;min-height:86px;padding:0 28px;font-size:27px}

.about-hero{position:relative;height:750px;background:#06145a;color:#fff;overflow:hidden}
.about-hero h1{position:absolute;z-index:2;left:0;right:0;top:382px;margin:0;text-align:center;font-size:64px;line-height:1.1;color:#fff}
.about-hero img{position:absolute;z-index:2;display:block;height:auto;pointer-events:none}
.hero-plant{left:0;bottom:18px;width:150px}
.hero-man{left:122px;bottom:18px;width:205px}
.hero-calendar{left:331px;bottom:18px;width:122px}
.hero-bars{right:71px;bottom:0;width:245px}
.hero-woman{right:155px;bottom:74px;width:109px}
.hero-target{right:290px;bottom:188px;width:58px}
.hero-chart{right:372px;bottom:63px;width:78px}
.hero-pie{right:45px;bottom:302px;width:91px}
.about-hero-wave{position:absolute;z-index:1;left:0;bottom:-1px;width:100%;height:80px;display:block}

.about-story{display:grid;grid-template-columns:44% 56%;min-height:865px;padding:105px 30px 95px;gap:0;align-items:start}
.story-art{position:relative;min-height:685px;padding-top:65px}
.story-art>img{display:block;width:min(700px,100%);height:auto}
.stat-badge{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:50%;background:#0879c3;color:#fff;font-size:24px;line-height:1.6;font-weight:700}
.stat-experience{top:0;left:46px;width:212px;height:212px}
.stat-customers{top:455px;left:453px;width:247px;height:247px}
.story-copy{padding:30px 5px 0 0;color:#091858}
.story-eyebrow{font-size:24px;margin-bottom:30px;color:#191349}
.story-copy h2{color:#087bc6;font-size:48px;line-height:1.15;margin:0 0 34px}
.story-copy>p:not(.story-eyebrow){font-size:26px;line-height:1.85;max-width:1030px;margin-bottom:8px}
.about-benefits{display:grid;grid-template-columns:1fr 1fr;column-gap:45px;row-gap:25px;margin-top:75px}
.benefit{display:flex;flex-direction:column;align-items:flex-start;gap:22px;color:#121660;font-size:24px;line-height:1.4}
.benefit-icon{display:block;width:42px;height:42px;background:currentColor;mask:url('./assets/about-check-icon.png') center / contain no-repeat}
.benefit-orange .benefit-icon{color:#ff8b62}.benefit-yellow .benefit-icon{color:#ffc300}.benefit-cyan .benefit-icon{color:#16c7fa}.benefit-pink .benefit-icon{color:#eb5cfa}

.mission-vision{position:relative;left:23px;width:min(1561px,calc(100% - 80px));min-height:710px;margin:0 auto;padding:80px 0 120px}
.mission-vision:before{content:"";position:absolute;z-index:-1;left:-300px;top:0;width:480px;height:600px;background:radial-gradient(ellipse,#f6f8ff 0%,transparent 70%)}
.values-row{display:grid;align-items:center;column-gap:35px}
.mission-row{grid-template-columns:205px 92px minmax(0,1fr)}
.vision-row{grid-template-columns:minmax(0,1fr) 92px 205px;margin-top:60px}
.value-circle{width:205px;height:205px;border-radius:50%;background:#087bc4;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-family:Eurostile,Arial,sans-serif;font-size:40px;font-weight:800}
.mission-circle{font-family:Georgia,serif;font-size:42px}
.value-arrow{display:grid;place-items:center;text-align:center;color:#459cce}
.value-arrow svg{display:block;width:min(100%,64px);height:auto;fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.value-card{border-radius:15px;border-right:7px solid #0877c4;color:#091858;padding:42px 60px}
.mission-card{min-height:246px;background:#f3f6ff}
.vision-card{min-height:198px;background:#d8e2f7}
.value-card h2{font-size:34px;line-height:1.2;margin:0 0 24px}
.value-card p{font-size:24px;line-height:2;margin:0}

.about-page .footer{clip-path:none;min-height:800px;padding:200px 45px 30px;overflow:hidden}
.about-page .footer-wave{position:absolute;z-index:3;left:0;top:-1px;width:100%;height:100px;display:block;pointer-events:none}
.about-page .footer-bottom{display:flex;align-items:center;justify-content:space-between;text-align:left}
.about-page .footer-bottom a:hover{text-decoration:underline}

@media(min-width:1101px){
  .about-page .footer{min-height:900px}
  .about-page .footer-grid{gap:85px}
  .about-page .footer h2{font-size:34px;margin:9px 0 42px}
  .about-page .footer-about .brand{width:250px;height:82px;margin-bottom:25px}
  .about-page .footer-about p{font-size:24px;line-height:2.05;max-width:380px}
  .about-page .footer-menu a{font-size:26px;margin-bottom:27px}
  .about-page .footer-contact a{font-size:25px;margin-bottom:32px}
  .about-page .footer-newsletter input{height:72px;font-size:25px}
  .about-page .footer-newsletter button{height:98px;font-size:27px}
  .about-page .footer-social a{width:55px;height:55px;font-size:32px}
  .about-page .footer-bottom{margin-top:60px;font-size:19px}
}

@media(max-width:1500px){
  .about-page .primary-nav{gap:24px;font-size:23px}
  .about-page .primary-nav .nav-contact{min-width:160px;min-height:70px;font-size:23px}
  .about-page .brand{width:190px;flex-basis:190px;height:65px}
  .about-hero h1{font-size:56px}
  .about-story{grid-template-columns:43% 57%;padding-left:30px;padding-right:30px}
  .story-art>img{width:100%}
  .stat-experience{width:170px;height:170px;font-size:21px}
  .stat-customers{left:auto;right:20px;top:65%;width:190px;height:190px;font-size:21px}
  .story-copy>p:not(.story-eyebrow){font-size:23px}
  .benefit{font-size:21px}
}

@media(max-width:1100px){
  .about-page .site-header{height:130px;min-height:130px}
  .about-page .contact-strip{height:42px;font-size:16px;padding:0 15px}
  .about-page .strip-right{gap:20px}
  .about-page .strip-phone span,.about-page .strip-right a:first-child span{font-size:20px}
  .about-page .nav-row{height:88px;padding:0 18px}
  .about-page .brand{width:140px;flex-basis:140px;height:48px}
  .about-page .primary-nav{font-size:25px;gap:0}
  .about-page .primary-nav .nav-contact{font-size:23px;min-height:55px}
  .about-hero{height:660px}
  .about-hero h1{top:280px;font-size:52px}
  .hero-plant{width:110px;bottom:20px}.hero-man{width:155px;left:75px;bottom:19px}.hero-calendar{width:95px;left:215px;bottom:20px}
  .hero-bars{width:185px;right:25px}.hero-woman{width:82px;right:89px;bottom:57px}.hero-target{width:45px;right:190px;bottom:145px}.hero-chart{width:60px;right:230px;bottom:50px}.hero-pie{width:70px;right:25px;bottom:235px}
  .about-story{display:flex;flex-direction:column;padding:75px 35px 95px;gap:30px}
  .story-art{width:min(700px,100%);min-height:0;align-self:center;padding-top:55px;padding-bottom:55px}
  .stat-experience{top:0;left:0}.stat-customers{top:auto;bottom:0;right:0}
  .story-copy{padding:0;width:100%}
  .mission-vision{left:0;width:calc(100% - 70px)}
  .mission-row{grid-template-columns:150px 55px minmax(0,1fr);gap:20px}
  .vision-row{grid-template-columns:minmax(0,1fr) 55px 150px;gap:20px}
  .value-circle{width:150px;height:150px;font-size:30px}.mission-circle{font-size:31px}
  .value-arrow{font-size:50px}
  .value-card{padding:30px 35px}
}

@media(max-width:700px){
  .about-page .contact-strip{font-size:14px}.about-page .strip-right>a:first-child{display:none}
  .about-hero{height:610px}
  .about-hero h1{top:245px;font-size:45px}
  .hero-plant{width:74px;left:-5px;bottom:22px}.hero-man{width:113px;left:32px;bottom:22px}.hero-calendar{width:67px;left:130px;bottom:24px}
  .hero-bars{width:115px;right:-2px}.hero-woman{width:53px;right:35px;bottom:39px}.hero-target{width:32px;right:115px;bottom:95px}.hero-chart{width:40px;right:145px;bottom:39px}.hero-pie{width:50px;right:2px;bottom:145px}
  .about-story{padding:55px 22px 85px}
  .story-art{padding-top:40px;padding-bottom:45px}
  .stat-experience{width:100px;height:100px;font-size:14px;line-height:1.35}
  .stat-customers{width:112px;height:112px;font-size:14px;line-height:1.25}
  .story-eyebrow{font-size:21px;margin-bottom:18px}
  .story-copy h2{font-size:39px;margin-bottom:20px}
  .story-copy>p:not(.story-eyebrow){font-size:22px;line-height:1.55;margin-bottom:18px}
  .about-benefits{grid-template-columns:1fr;gap:24px;margin-top:38px}
  .benefit{flex-direction:row;gap:15px;align-items:center;font-size:21px}
  .benefit-icon{width:32px;height:32px;flex:0 0 32px}
  .mission-vision{width:calc(100% - 36px);min-height:0;padding:30px 0 95px}
  .values-row,.mission-row,.vision-row{display:flex;flex-direction:column;gap:12px}
  .vision-row{margin-top:45px;flex-direction:column-reverse}
  .value-circle{width:125px;height:125px;font-size:26px}.mission-circle{font-size:28px}
  .value-arrow{font-size:42px;transform:rotate(90deg)}
  .vision-row .value-arrow{transform:rotate(-90deg)}
  .value-card{width:100%;min-height:0;padding:25px 24px}
  .value-card h2{font-size:28px;margin-bottom:12px}
  .value-card p{font-size:21px;line-height:1.55}
  .about-page .footer{padding:140px 25px 30px}
  .about-page .footer-bottom{align-items:flex-start;gap:12px;flex-direction:column}
}