:root {
  --navy: #06223d;
  --navy2: #0b3158;
  --blue: #0965d9;
  --orange: #ff642f;
  --ink: #202936;
  --muted: #697587;
  --paper: #f4f7fb;
  --line: #d7dfeb;
  --white: #fff;
  --p8: 8px;
  --p12: 12px;
  --p16: 16px;
  --p20: 20px;
  --p24: 24px;
  --p32: 32px;
  --p40: 40px;
  --p56: 56px;
  --p80: 80px;
  --p112: 112px;
  --ft10: 10px;
  --ft11: 11px;
  --ft12: 12px;
  --ft13: 13px;
  --ft14: 14px;
  --ft15: 15px;
  --ft16: 16px;
  --ft17: 17px;
  --ft18: 18px;
  --ft20: 20px;
  --ft22: 22px;
  --ft24: 24px;
  --ft28: 28px;
  --ft30: 30px;
  --ft36: 36px;
  --ft40: 40px;
  --ft48: 48px;
  --ft56: 56px;
  --ft58: 58px;
  --ft60: 60px;
  --ft72: 72px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: sans-serif;
  font-size: var(--ft14);
  line-height: 1.45;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
img {
  display: block;
  max-width: 100%;
}
.main {
  width: min(1480px, calc(100% - 48px));
  margin: auto;
}
.MainHeader {
  height: 80px;
  background: #fff;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}
.MainHeader .main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0582dc;
}
.brand img {
  width: 206px;
  height: 54px;
  object-fit: contain;
}
.MainHeader .nav {
  display: flex;
  align-items: center;
  gap: 38px;
  font-size: var(--ft14);
  font-weight: 700;
  color: #536174;
}
.MainHeader .nav a:hover,
.MainHeader .nav a.active {
  color: var(--blue);
}
.headRight {
  display: flex;
  align-items: center;
  gap: 22px;
}
.language {
  position: relative;
  color: #536174;
  font-weight: 700;
}
.sp{
        width: 100%;
    height: 100%;
    object-fit: cover;
}

.language button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.languageMenu {
  display: none;
  position: absolute;
  right: 0;
  top: 28px;
  width: 100px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 20px #00285519;
}
.language.open .languageMenu {
  display: block;
}
.languageMenu a {
  display: block;
  padding: 6px 8px;
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-weight: 700;
  cursor: pointer;
}
.btn.primary {
gap: 5px;
    display: flex;
    background: var(--blue);
    color: #fff;
    box-shadow: 0 7px 16px #0965d93d;
    align-items: center;
}
.btn.orange {
    display: flex;
    flex-direction: row;
    align-items: center;
  background: var(--orange);
  color: #fff;
  gap: 5px;
}
.btn.ghost {
  border-color: #8ba8d0;
  color: var(--blue);
  background: #fff;
}
.btn.dark {
  border-color: #526983;
  color: #fff;
  background: #173451;
}
.PageHero {
  /*background: var(--navy);*/
  color: #fff;
}
.xhao .steps{
    position: relative;
        grid-template-columns: repeat(8, 1fr);
    gap: 0px;
}
.xhao .steps .num {
    z-index: 2;
    position: relative;}
.xhao .xian{
    position: absolute;
    top: 24%;
    z-index: 1;
    width: 100%;
height: 2px;
background: rgba(194, 198, 215, 1);
}
.PageHero .main {
    min-height: 446px;
  display: flex;
  align-items: center;
}
.PageHero .eyebrow,
.eyebrow {
  color: #4d98ff;
  font-size: var(--ft12);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.lanseann{
        width: 137px;
    margin: 0 auto;
}
.PageHero h1 {
  max-width: 800px;
  margin: 14px 0 16px;
  font-size: var(--ft56);
  line-height: 1.08;
  letter-spacing: 0;
color: rgba(255, 255, 255, 1);
}
.PageHero p {
  max-width: 680px;
  margin: 0;
color: rgba(255, 255, 255, 0.8);
  font-size: var(--ft16);
}
.PhotoHero {
  min-height: 430px;
  position: relative;
  background-size: cover;
  background-position: center;
}
.PhotoHero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #06223dc7;
}
.PhotoHero .main {
  position: relative;
  z-index: 1;
  min-height: 430px;
}
.PhotoHero h1 {
  max-width: 760px;
}
.HeroActions {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.MetricStrip {
  background: var(--navy);
  color: #fff;
}
.MetricStrip .main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 24px 0;
}
.MetricStrip .metric {
  text-align: center;
  /*border-right: 1px solid #23425f;*/
}
.MetricStrip .metric:last-child {
  border: 0;
}
.MetricStrip strong {
  display: block;
  font-size: var(--ft28);
  color: #fff;
}
.MetricStrip span {
  font-size: var(--ft12);
  color: #9fb2c7;
}
.Section {
  padding: var(--p112) 0;
}
.Section.tint {
  background: #edf2f8;
}
.Section.white {
  background: #fff;
}
.Section.dark {
  background: var(--navy);
  color: #fff;
}
.sectionHead {
  margin-bottom: var(--p40);
}
.sectionHead.center {
  text-align: center;
}
.sectionHead h2 {
  margin: 8px 0;
  font-size: var(--ft40);
  line-height: 1.1;
  letter-spacing: 0;
}
.sectionHead p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: var(--ft16);
}
.Section.dark .sectionHead p {
  color: #aebed0;
}
.cardGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p20);
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--p24);
  box-shadow: 0 4px 12px #09244a0b;
}
.card h3 {
  margin: 14px 0 8px;
  font-size: var(--ft18);
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
}
.iconBox {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  /*background: #dce9ff;*/
  color: var(--blue);
  font-size: var(--ft18);
  font-weight: bold;
}
.cp1 .ctaBox {
  
flex-direction: column;
 
}
.cp1 .btn{
        font-size: var(--ft16);
    line-height: 1.5;
    background-color: #fff;
    color: #0965d9;
    display: flex;
    gap: 10px;
    align-items: center;
}
.cp1 .btn img{
    width: 20px;
}
.fac1 ul,
.oem4 ul,
.cpfy1 ul,
.cp2 ul{
   padding-left: 0px;
}
.fac1 ul li,
.oem4 ul li,
.cpfy1 ul li,
.cp2 ul li{
       display: flex;
    align-items: center;
    gap: 16px; 
        margin-bottom: 20px;
}
.fac1 ul li .bigtitle{
    font-size: 16px;
font-weight: 400;
color: rgba(24, 28, 31, 1);
margin: 0px;
}
.oem4 ul li .bigtitle{
         font-size: 14px;
    margin: 0px 0px 5px;
    font-weight: 500;
    color: #c1c1c1a1;
    
}
.oem4 ul li .smalltitle{
      font-size: 14px;
    font-weight: 400;
    color: #e6edf5;
    margin: 0px;
    
}
.cpfy1 ul li .bigtitle{
   font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 1); 
    
}
.cp2 ul li .bigtitle{
    font-size: 14px;
font-weight: 500;
color: rgba(66, 70, 84, 1);
    padding: 2px 0px;
    margin: 0px;
    
    
}
.cpfy1 ul li .smalltitle{
    
    font-size: 16px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
    
}
.AppSpotlightCopy .img1{
    flex-shrink: 0;
   display: flex;
    width: 38px;
    padding: 11px;
    height: 38px;
    border-radius: var(--p8);
    background: rgba(59, 130, 246, 1);
    align-items: center;
    justify-content: center;
}
.lan{
  font-size: 14px !important;
font-weight: 400;
color: rgba(0, 85, 199, 1) !important;  
       display: flex;
    align-items: center;
    gap: 5px; 
}
.lansann p{
  color: rgba(0, 85, 199, 1) !important;  
}
.cp2 ul li .smalltitle{
   font-size: 16px;
font-weight: 700;
color: rgba(24, 28, 31, 1);
padding: 0px;
margin: 0px;
    
}
.productGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p24);
}
.productCard {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.productCard .img_box {
  aspect-ratio: 1;
  overflow: hidden;
  background: #e6ebf2;
}
.productCard .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.productCard .body {
  padding: var(--p16);
}
.productCard .category {
  color: var(--blue);
  font-size: var(--ft12);
  font-weight: 400;
}
.productCard h3 {
  min-height: 28px;
  margin: 8px 0;
  font-size: var(--ft18);
}
.productCard p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft13);
}
.productCard .more {
    display: flex;
    gap: 5px;
    margin-top: 15px;
    padding-top: 12px;
    color: var(--blue);
    font-weight: 400;
    border-top: 1px solid #e6edf5;
    align-items: center;
    justify-content: space-between;
}
.productCard .more span{
      display: flex;
    align-items: center;
    gap: 5px;
}
.FeatureBand {
  background: var(--navy);
  color: #fff;
}
.FeatureBand .card {
  background: #1b3959;
  border: 0;
  color: #fff;
}
.FeatureBand .card p {
  color: #bfd0e4;
}
.ctaBox {
  padding: var(--p56);
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p40);
}
.ctaBox h2 {
  margin: 0 0 10px;
  font-size: var(--ft32);
}
.ctaBox p {
  margin: 0;
  color: #b5c4d5;
  font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: rgba(255, 255, 255, 0.8);
}
.formGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.formGrid label {
  display: grid;
  gap: 6px;
  font-size: var(--ft12);
  font-weight: bold;
  color: #536174;
}
.formGrid .full {
  grid-column: 1/-1;
}
.formGrid input,
.formGrid select,
.formGrid textarea {
  width: 100%;
  border: 1px solid #c8d3e1;
  border-radius: 5px;
  padding: 12px;
     color: #5361749c;
    background: #f0f0f0;
}
.formGrid textarea {
  min-height: 115px;
  resize: vertical;
}
.contactSplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--p80);
  align-items: center;
}
.contactSplit h2 {
  font-size: var(--ft40);
  margin: 0 0 18px;
}
.contactSplit p {
  color: var(--muted);
  font-size: var(--ft16);
}
.formPanel {
  padding: var(--p24);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 20px #09244a0b;
}
.bento {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--p16);
}
.bento .large {
  grid-row: span 2;
}
.bento a {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border-radius: 7px;
  background: #dce4ee;
}
.bento img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.bento .caption {
  position: absolute;
  inset: auto 0 0;
  padding: 32px 20px 18px;
  color: #fff;
  background: linear-gradient(transparent, #071827cc);
  font-size: var(--ft18);
  font-weight: 700;
}
.steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--p16);
  counter-reset: item;
}
.steps .step {
  text-align: center;
  position: relative;
}
.steps .num {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-weight: bold;
}
.steps h3 {
  font-size: var(--ft16);
  margin: 0 0 5px;
}
.steps p {
  color: var(--muted);
  font-size: var(--ft12);
  margin: 0;
}
.dark .steps p {
  color: #aebed0;
}
.tableWrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.DataTable {
  width: 100%;
  border-collapse: collapse;
}
.DataTable th {
  padding: 16px;
  background: var(--navy);
  color: #fff;
  text-align: left;
  font-size: var(--ft12);
}
.DataTable td {
  padding: 16px;
  border-top: 1px solid var(--line);
  color: #415064;
}
.DataTable tr:nth-child(even) td {
  background: #f2f5f9;
}
.DataTable .blue {
  color: var(--blue);
  font-weight: bold;
}
.tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tabs button {
  padding: 9px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: #536174;
  font-weight: bold;
}
.tabs button.active,
.tabs button:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.faqList {
  max-width: 920px;
  margin: auto;
  display: grid;
  gap: 14px;
}
.faqItem {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.faqItem summary {
  padding: 22px 24px;
  list-style: none;
  font-size: var(--ft18);
  font-weight: bold;
  cursor: pointer;
}
.faqItem summary:after {
  content: "+";
  float: right;
  color: #687789;
}
.faqItem[open] summary:after {
  content: "-";
}
.faqItem p {
  padding: 0 24px 22px;
  margin: 0;
  color: var(--muted);
  font-size: var(--ft16);
}
.MapBanner {
  min-height: 390px;
  position: relative;
  background-size: cover;
  background-position: center;
}
.MapBanner .mapCard {
  position: absolute;
  left: max(24px, calc((100% - 1480px) / 2));
  bottom: 32px;
  width: 330px;
  padding: 22px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 7px 20px #001d3a2e;
}
.galleryGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.galleryGrid .img_box {
  aspect-ratio: 1/1.25;
  border-radius: 7px;
  overflow: hidden;
}
.galleryGrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.splitMedia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--p56);
}
.splitMedia .img_box {
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1.33;
}
.splitMedia img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.splitMedia h2 {
  font-size: var(--ft40);
  margin: 10px 0;
}
.checkList {
  display: grid;
  gap: 14px;
  margin: 22px 0;
}
.checkList div {
  padding-left: 28px;
  position: relative;
  color: rgba(66, 70, 84, 1);
  font-weight: 600;
}
.checkList div:before {
content: "";
    position: absolute;
    left: 0px;
    width: 21px;
    height: 20px;
    top: 2px;
    /* 内联SVG背景图，fill颜色#0061b2 */
    background-image: url("data:image/svg+xml,%3Csvg t='1784622822302' class='icon' viewBox='0 0 1025 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M511.9455 958.712809c-247.065724 0-448.054313-200.987589-448.054313-448.060313 0-247.065724 200.987589-448.054313 448.054313-448.054313 247.072724 0 448.060313 200.987589 448.060313 448.054313C960.005813 757.72422 759.017224 958.712809 511.9455 958.712809L511.9455 958.712809zM511.9455 126.893372c-211.60762 0-383.758124 172.150504-383.758124 383.758124 0 211.58062 172.150504 383.765124 383.758124 383.765124 211.58062 0 383.765124-172.184504 383.765124-383.765124C895.709624 299.043876 723.52512 126.893372 511.9455 126.893372L511.9455 126.893372zM511.9455 126.893372' fill='%230061b2' p-id='33352'%3E%3C/path%3E%3Cpath d='M726.94813 391.825148c-12.545037-12.448036-32.837096-12.322036-45.249133 0.254001L448.388314 627.94784l-103.280303-106.122311c-12.350036-12.707037-32.612096-12.932038-45.249133-0.640002-12.678037 12.322036-12.965038 32.612096-0.640002 45.251133l126.032369 129.522379c0.064 0.093 0.190001 0.093 0.254001 0.190001 0.064 0.064 0.097 0.191001 0.161 0.254001 2.017006 1.988006 4.512013 3.204009 6.88102 4.547013 1.250004 0.674002 2.241007 1.793005 3.52001 2.305007 3.873011 1.601005 8.000023 2.398007 12.096035 2.398007 4.063012 0 8.131024-0.796002 11.969035-2.334007 1.250004-0.513002 2.208006-1.539005 3.39401-2.178006 2.398007-1.344004 4.898014-2.525007 6.94502-4.542013 0.063-0.064 0.098-0.196001 0.190001-0.259001 0.064-0.094 0.161-0.128 0.259001-0.191001l256.253751-259.041759C739.626167 424.499244 739.494166 404.242184 726.94813 391.825148L726.94813 391.825148zM726.94813 391.825148' fill='%230061b2' p-id='33353'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.processRows {
  display: grid;
  gap: var(--p80);
}
.processRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--p56);
  align-items: center;
}
.processRow:nth-child(even) .img_box {
  order: 2;
}
.processRow .img_box {
  aspect-ratio: 1.3;
  overflow: hidden;
  border-radius: 8px;
}
.processRow img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.footerBottom .benan{
      display: flex;
    align-items: center;
        gap: 10px;
}
 .footerBottom .benan img{
        width: 15px;
    height: 15px;
}
.processRow h2 {
  font-size: var(--ft32);
  margin: 10px 0;
}
.MainFooter {
  background: var(--navy);
  color: #fff;
  padding: var(--p56) 0 26px;
}
.MainFooter ul{
      display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px; 
    padding: 0px;
    
    margin: 3px 0px;
}
.MainFooter ul a{
   width: 25px; 
   height: 25px;
}
.yj b{
  font-size: 16px;
    font-weight: 400;
    color: rgba(229, 229, 229, 1);
    padding: 0px 18px;
    
    
}
.yj b:not(:first-child) {
  border-left: 1px solid #536174;
}
.MainFooter  ul li{
    width: 20px;
}
.MainFooter .footerTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--p40);
  border-bottom: 1px solid #274664;
}
.MainFooter .brand img {
  /*filter: brightness(0) invert(1) opacity(0.9);*/
      width: 360px;
}
.footerNav {
  display: flex;
  gap: 36px;
  color: #b4c4d4;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: var(--ft12);
}
.footerBottom {
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  color: #a8bbcd;
  font-size: var(--ft12);
}










/* 默认移动端头部隐藏，PC显示 */
.MainHeader .main {
    display: flex;
    align-items: center;
}
.MainHeader .mobileMain {
    display: none;
    align-items: center;
    justify-content: space-between;
}

/* 响应式断点：768px以下切换布局 */
@media screen and (max-width:768px){
    .mobileSubBtn {
        border: unset;
    background-color: unset;
    }
    .mobileSubBtn svg {
    transition: transform 0.25s ease;
}
.mobileSubBtn.active svg {
    transform: rotate(180deg);
}
    .MainHeader .main {
        display: none !important; /* PC头部隐藏 */
    }
    .MainHeader .mobileMain {
        display: flex !important; /* 移动端导航显示 */
    }
}

/* 移动端基础样式示例，自行微调 */
.mobileMain .brand img {
    height: 40px;
}
.mobileMenuBtn {
    background: transparent;
    border: none;
    cursor: pointer;
}
.mobileNavWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s ease;
}
.mobileNavWrap.open {
    transform: translateX(0);
}
.mobileNav {
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mobileNavGroup {
    display: flex;
    flex-direction: column;
}
.mobileNavTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mobileSubMenu {
    padding-left: 16px;
    display: none;
}
.mobileSubMenu.open {
    display: flex;
    flex-direction: column;
    gap:12px;
}
.mobileLanguage {
    margin-top:20px;
}














@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .fl {
   
    grid-template-columns: 1fr 1fr !important;
  
}
.odm0 ul {
    
    grid-template-columns: 1fr 1fr !important;
   
} 
  .MainHeader .nav {
    gap: 18px;
  }
  .main {
    width: min(94%, 1480px);
  }
  .cardGrid,
  .productGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .PageHero h1 {
    font-size: var(--ft40);
  }
}
@media only screen and (max-width: 767px) {
    .fl {
   
    grid-template-columns: 1fr !important;
  
}
.fl .title1 svg {
    display: none;
}
.odm0 ul {
    
    grid-template-columns:  1fr !important;
   
} 
.odm0 ul li svg{
   display: none; 
}
  .MainHeader {
    height: auto;
    padding: 12px 0;
  }
  .MainHeader .main {
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
  }
  .brand img {
    width: 165px;
  }
  .MainHeader .nav {
    order: 3;
    width: 100%;
    overflow: auto;
    gap: 20px;
    padding: 8px 0;
    white-space: nowrap;
  }
  .headRight {
    margin-left: auto;
    gap: 10px;
  }
  .headRight .language {
    display: none;
  }
  .btn {
    min-height: 40px;
    padding: 0 14px;
    font-size: var(--ft12);
  }
  .main {
    width: calc(100% - 32px);
  }
  .PageHero .main,
  .PhotoHero .main {
    min-height: 300px;
  }
  .PageHero h1 {
    font-size: var(--ft40);
  }
  .PageHero p {
    font-size: var(--ft14);
  }
  .MetricStrip .main {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .MetricStrip .metric {
    border: 0;
  }
  .Section {
    padding: var(--p56) 0;
  }
  .sectionHead h2,
  .contactSplit h2,
  .splitMedia h2 {
    font-size: var(--ft28);
  }
  .cardGrid,
  .productGrid,
  .galleryGrid {
    grid-template-columns: 1fr;
  }
  .contactSplit,
  .splitMedia,
  .processRow {
    grid-template-columns: 1fr;
    gap: var(--p32);
  }
  .processRow:nth-child(even) .img_box {
    order: 0;
  }
  .ctaBox {
    padding: var(--p32);
    display: block;
  }
  .ctaBox .btn {
    margin-top: 20px;
  }
  .bento {
    grid-template-columns: 1fr;
  }
  .bento .large {
    grid-row: auto;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .formGrid {
    grid-template-columns: 1fr;
  }
  .formGrid .full {
    grid-column: auto;
  }
  .footerTop,
  .footerBottom {
    flex-direction: column;
    gap: 24px;
  }
  .footerNav {
    flex-wrap: wrap;
    gap: 15px;
  }
  .MapBanner .mapCard {
    left: 16px;
    right: 16px;
    width: auto;
  }
  .HeroActions {
    flex-wrap: wrap;
  }
}
.language button {
  display: inline-flex;
  align-items: center;
  gap: var(--p8);
}
.language button svg {
  width: 10px;
  height: 6px;
  transition: transform 0.2s ease;
}
.language.open button svg {
  transform: rotate(180deg);
}
.icon {
  display: grid;
  place-items: center;
}
.icon .iconImg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.is-hidden {
  display: none !important;
}
.navGroup {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
}
.navGroupTop {
  display: flex;
  align-items: center;
  gap: 5px;
}
.navGroupTop button {
  display: grid;
  width: 22px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  place-items: center;
}
.navGroupTop svg {
  width: 9px;
  height: 6px;
  transition: transform 0.2s ease;
}
.navGroup.active > .navGroupTop,
.navGroup:hover > .navGroupTop,
.navGroup:focus-within > .navGroupTop {
  color: var(--blue);
}
.navMenu {
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 50%;
  display: block;
  width: 200px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 28px #08233d24;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -5px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
  pointer-events: none;
}
.navMenu a {
  display: block;
  padding: 11px 12px;
  border-radius: 4px;
  color: #536174;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}
.navMenu a:hover,
.navMenu a:focus {
  background: #edf5ff;
  color: var(--blue);
  transform: translateX(3px);
}
.navGroup:hover .navMenu,
.navGroup:focus-within .navMenu,
.navGroup.open .navMenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.navGroup.open .navGroupTop svg,
.navGroup:hover .navGroupTop svg {
  transform: rotate(180deg);
}
.btn,
button {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    filter 0.18s ease;
}
.btn:hover,
button:hover {
  transform: translateY(-2px);
}
.btn:active,
button:active {
  transform: translateY(0) scale(0.97);
}
.btn:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid #53a0ff66;
  outline-offset: 3px;
}
.btn.primary:hover {
  background: #075bc4;
  box-shadow: 0 11px 22px #0965d94a;
}
.btn.orange:hover {
  background: #ee5422;
  box-shadow: 0 11px 22px #ff642f42;
}
.btn.dark:hover {
  border-color: #8ba8c5;
  background: #214563;
  box-shadow: 0 10px 20px #061b3038;
}
.btn.ghost:hover {
  border-color: var(--blue);
  background: #edf5ff;
  box-shadow: 0 9px 18px #0965d920;
}
.navGroupTop button:hover,
.language button:hover {
  color: var(--blue);
  box-shadow: none;
}
.tabs button:hover,
.FaqCategoryTabs a:hover {
  box-shadow: 0 7px 16px #0965d92b;
}
.FactoryVideoTrigger:hover,
.FactoryVideoClose:hover {
  filter: brightness(1.08);
}
@media only screen and (max-width: 767px) {
  .MainHeader .nav {
    align-items: flex-start;
  }
  .navGroup {
    flex: 0 0 auto;
    height: 24px;
  }
  .navGroupTop {
    height: 24px;
  }
  .navMenu {
    position: fixed;
    top: auto;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 100;
    width: auto;
    max-height: 60vh;
    overflow: auto;
    padding: 12px;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    box-shadow: 0 16px 45px #061b3066;
    pointer-events: none;
  }
  .navMenu a {
    padding: 13px 14px;
    font-size: 14px;
  }
  .navGroup:hover .navMenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
  }
  .navGroup.open .navMenu,
  .navGroup:focus-within .navMenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn,
  button,
  .navMenu,
  .navMenu a {
    transition: none !important;
  }
}
.MainHeader .language {
  position: relative;
  display: flex;
  height: 80px;
  align-items: center;
}
.MainHeader .languageMenu {
  position: absolute;
  z-index: 100;
  top: 100%;
  right: 0;
  display: block;
  width: 120px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px #00285524;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
  pointer-events: none;
}
.MainHeader .language.open .languageMenu,
.MainHeader .language:hover .languageMenu,
.MainHeader .language:focus-within .languageMenu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.MainHeader .languageMenu a {
  display: block;
  padding: 9px 10px;
  border-radius: 4px;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}
.MainHeader .languageMenu a:hover,
.MainHeader .languageMenu a:focus {
  background: #edf5ff;
  color: var(--blue);
  transform: translateX(3px);
}
.MainHeader .language:hover button svg,
.MainHeader .language:focus-within button svg {
  transform: rotate(180deg);
}
@media only screen and (max-width: 767px) {
  .MainHeader .headRight .language {
    display: none;
  }
}
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn:after {
  position: absolute;
  z-index: -1;
  top: -40%;
  left: -85%;
  width: 48%;
  height: 180%;
  content: "";
  background: #ffffff3d;
  transform: skewX(-20deg);
  transition: left 0.45s ease;
}
.btn:hover:after {
  left: 140%;
}
.btn:hover {
  filter: saturate(1.08);
  transform: translateY(-3px);
}
.btn:active {
  filter: saturate(0.96);
  transform: translateY(0) scale(0.96);
  box-shadow: 0 2px 6px #061b3030 !important;
}
.tabs button,
.FaqCategoryTabs a,
.ProductSummaryActions a,
.CatalogDownloadButton,
.OdmCaseNav button {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
.tabs button:hover,
.FaqCategoryTabs a:hover,
.ProductSummaryActions a:hover,
.CatalogDownloadButton:hover,
.OdmCaseNav button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px #0965d92b;
}
.tabs button:active,
.FaqCategoryTabs a:active,
.ProductSummaryActions a:active,
.CatalogDownloadButton:active,
.OdmCaseNav button:active {
  transform: translateY(0) scale(0.96);
}
.navMenu a:after {
  content: "›";
  float: right;
  margin-left: 18px;
  color: #8ba0b5;
  font-size: 17px;
  line-height: 1;
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}
.navMenu a:hover:after,
.navMenu a:focus:after {
  color: var(--blue);
  transform: translateX(3px);
}
.CatalogCrumbs,
.FaqCrumbs,
.FaqPageCrumbs,
.ProductBreadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
}
.CatalogCrumbArrow,
.FaqCrumbArrow,
.FaqPageCrumbs span:not(:last-child):after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8ba0b5;
}
.CatalogCrumbArrow:before,
.FaqCrumbArrow:before,
.FaqPageCrumbs span:not(:last-child):after {
  content: "›";
  font-size: 17px;
  line-height: 1;
}
.CatalogCrumbArrow img,
.FaqCrumbArrow img {
  display: none;
}
.PageBreadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  color: #b9c9d9;
  font-size: 12px;
  line-height: 1.4;
}
.PageBreadcrumb a {
  transition: color 0.18s ease;
}
.PageBreadcrumb a:hover {
  color: #fff;
}
.PageBreadcrumb span {
  color: #72aee8;
  font-size: 17px;
  line-height: 1;
}
.PageBreadcrumb strong {
  color: #fff;
  font-weight: 600;
}
.MainHeader .nav {
  font-size: var(--ft16);
  line-height: 1.5;
}
.MainHeader .language,
.MainHeader .headRight .btn {
  font-size: var(--ft14);
  line-height: 1.43;
}
.PageHero .eyebrow {
  font-size: var(--ft12);
  line-height: 1;
}
.PageHero h1 {
  font-size: var(--ft56);
  line-height: 1.2;
  font-weight: 600;
}
.PageHero p {
  font-size: var(--ft16);
  line-height: 1.6;
}
.QualityHero h1 {
  font-size: var(--ft58);
  line-height: 1.45;
  font-weight: 700;
}
.sectionHead h2 {
  font-size: var(--ft36);
  line-height: 1.3;
  font-weight: 600;
}
.sectionHead p {
  font-size: var(--ft16);
  line-height: 1.6;
  font-weight: 400;

color: rgba(66, 70, 84, 1);
}
.card h3 {
  font-size: var(--ft20);
  line-height: 1.5;
  font-weight: 500;
}
.card p {
  font-size: var(--ft14);
  line-height: 1.4;
}
.productCard h3 {
  font-size: var(--ft18);
  line-height: 1.5;
  font-weight: 500;
}
.productCard p {
     display: flex;
    gap: 5px;
    font-size: var(--ft14);
    line-height: 1.4;
    align-items: center;
}
.btn {
    font-weight: 400;
  font-size: var(--ft16);
  line-height: 1.5;
}
.MetricStrip strong {
  font-size: var(--ft36);
  line-height: 1.3;
}
.MetricStrip span {
  font-size: var(--ft12);
  line-height: 1.25;
}
.faqItem summary {
  font-size: var(--ft20);
  line-height: 1.4;
}
.faqItem p {
  font-size: var(--ft16);
  line-height: 1.6;
}
.DataTable th {
  font-size: var(--ft12);
  line-height: 1.33;
}
.DataTable td {
  font-size: var(--ft16);
  line-height: 1.5;
}
.footerNav {
  font-size: var(--ft14);
  line-height: 1.43;
}
.footerBottom {
  font-size: var(--ft14);
  line-height: 1.43;
}
.QualityTable .sectionHead h2,
.Documentation .sectionHead h2 {
  font-size: var(--ft36);
  line-height: 1.3;
}
.QualityTable .DataTable td {
  font-size: var(--ft16);
  line-height: 1.5;
}
.DownloadHero h1 {
  font-size: var(--ft56);
  line-height: 1.2;
}
.CatalogDownloads .card h3 {
  font-size: var(--ft24);
  line-height: 1.4;
}
.ContactFAQ .sectionHead h2 {
  font-size: var(--ft36);
  line-height: 1.3;
}
.HomeHero h1 {
  font-size: var(--ft60);
  line-height: 1.22;
  font-weight: 800;
}
.HomeHero p {
  font-size: var(--ft20);
  line-height: 1.4;
}
.HomeHero .HeroActions .btn {
  font-size: var(--ft16);
  line-height: 1.5;
}
.OemOdmHero h1 {
  font-size: var(--ft72);
  line-height: 1.2;
  font-weight: 600;
}
.OemOdmHero p {
  font-size: var(--ft18);
  line-height: 1.56;
}
.OemOdmHero .HeroActions .btn {
  font-size: var(--ft14);
  line-height: 1.43;
}
.HomePage .MetricStrip strong {
  font-size: var(--ft30);
  line-height: 1.2;
}
.HomePage .MetricStrip span {
  font-size: var(--ft12);
  line-height: 1.25;
}
.ContactHero {
  position: relative;
  min-height: 510px;
  background-color: var(--navy);
  background-position: center 58%;
  background-size: cover;
  color: var(--white);
  text-align: center;
}
.ContactHero:before {
  position: absolute;
  inset: 0;
  background: #06223dd1;
  content: "";
}
.ContactHero .main {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 510px;
  place-items: center;
}
.ContactHeroCopy {
  width: 100%;
  padding-bottom: var(--p40);
  transform: translateY(var(--p12));
}
.ContactHero .eyebrow {
  margin-bottom: var(--p16);
  color: #c8d8eb;
  font-size: var(--ft12);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
}
.ContactHero h1 {
  margin: 0;
  font-size: var(--ft48);
  font-weight: 600;
  line-height: 1.2;
}
.ContactHero p {
  margin: var(--p32) 0 calc(var(--p32) + var(--p8));
  color: #c4d1df;
  font-size: var(--ft16);
  line-height: 1.6;
}
.ContactHero .btn {
  min-width: 122px;
  min-height: 44px;
  font-size: var(--ft12);
  font-weight: 600;
}
.ContactCards {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  padding-bottom: var(--p80);
}
.ContactCards .main,
.ContactMain .main,
.ContactFAQ .main {
  width: min(1360px, calc(100% - 48px));
}
.ContactCardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--p24);
}
.ContactCardGrid article {
  min-height: 248px;
  padding: var(--p32);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: var(--white);
  box-shadow: 0 2px 6px #09244a0f;
}
.ContactCardGrid .iconBox,
.ContactEntity .iconBox {
  width: 42px;
  height: 42px;
  border-radius: var(--p8);
  /*background: #dce7ff;*/
  background: unset;
}
.ContactCardGrid h2 {
  margin: var(--p32) 0 var(--p16);
  font-size: var(--ft20);
  font-weight: 600;
  line-height: 1.4;
}
.ContactCardGrid p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.45;
}
.ContactCardGrid a {
  display: inline-block;
  margin-top: var(--p16);
  color: var(--blue);
  font-size: var(--ft16);
  font-weight: 400;
  line-height: 1.4;
}
.ContactMain {
  padding: var(--p16) 0 calc(var(--p80) + var(--p16));
}
.ContactMain .main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.ContactQuote h2,
.ContactInfo h2 {
  margin: 0 0 calc(var(--p32) + 4px);
  font-size: var(--ft36);
  font-weight: 600;
  line-height: 1.3;
}
.ContactForm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--p24);
}
.ContactForm label {
  display: grid;
  gap: var(--p12);
  color: #536174;
  font-size: var(--ft14);
  font-weight: 600;
  line-height: 1.43;
}
.ContactForm .full {
  grid-column: 1/-1;
}
.ContactForm input,
.ContactForm select,
.ContactForm textarea {
  min-height: 48px;
  padding: var(--p12) var(--p16);
  border: 1px solid #c9d5e5;
  border-radius: var(--p8);
  outline: 0;
  background: var(--paper);
  color: #7f8b9b;
  font-size: var(--ft16);
  line-height: 1.4;
}
.ContactForm textarea {
  min-height: 128px;
  resize: vertical;
}
.ContactForm input:focus,
.ContactForm select:focus,
.ContactForm textarea:focus {
  border-color: var(--blue);
  background: var(--white);
}
.ContactForm .btn {
  width: 148px;
  min-height: 48px;
  font-size: var(--ft14);
  font-weight: 600;
}
.ContactInfo .ContactIntro {
  margin: 0 0 var(--p32);
  color: var(--muted);
  font-size: var(--ft16);
  line-height: 1.625;
}
.ContactEntity {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: var(--p20);
  margin-bottom: var(--p32);
}
.ContactEntity h3 {
  margin: 0 0 4px;
  font-size: var(--ft16);
  font-weight: 600;
  line-height: 1.5;
}
.ContactEntity p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.43;
}
.ContactEntity:last-of-type {
  margin-bottom: 0;
}
.ContactMetrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--p32);
  margin-top: calc(var(--p40) + var(--p8));
  padding: var(--p32);
  border-radius: var(--p8);
  background: var(--navy);
}
.ContactMetrics strong {
  display: block;
  color: var(--blue);
  font-size: var(--ft36);
  font-weight: 700;
  line-height: 1.3;
}
.ContactMetrics span {
  display: block;
  margin-top: 0;
  color: #b2c2d3;
  font-size: var(--ft14);
  line-height: 1.43;
}
.ContactMap {
  position: relative;
  min-height: 450px;
  background-position: center;
  background-size: cover;
}
.ContactMapCard {
  position: absolute;
  bottom: var(--p16);
  left: var(--p32);
  width: 334px;
  padding: var(--p24);
  border: 1px solid #dce3ed;
  border-radius: var(--p8);
  background: var(--white);
  box-shadow: 0 5px 14px #071d3526;
}
.ContactMapTitle {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: var(--p8);
}
.ContactMapTitle .icon {
  width: 20px;
  height: 20px;
}
.ContactMapCard h3 {
  margin: 0;
  font-size: var(--ft16);
  font-weight: 600;
  line-height: 1.5;
}
.ContactMapCard p {
  margin: var(--p12) 0 0;
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.43;
}
.ContactMapCard a {
  display: inline-block;
  margin-top: var(--p16);
  color: var(--blue);
  font-size: var(--ft14);
  font-weight: 600;
  line-height: 1.43;
}
.ContactFAQ {
  padding: calc(var(--p80) + var(--p16)) 0 calc(var(--p80) + var(--p20));
  background: var(--paper);
}
.ContactFaqHead {
  text-align: center;
}
.ContactFaqHead h2 {
  margin: 0 0 var(--p16);
  font-size: var(--ft36);
  font-weight: 600;
  line-height: 1.3;
}
.ContactFaqHead p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft16);
  line-height: 1.5;
}
.ContactFAQ .faqList {
  max-width: 920px;
  margin-top: calc(var(--p56) + var(--p8));
  gap: var(--p16);
}
.ContactFAQ .faqItem {
  border-radius: var(--p8);
  box-shadow: none;
}
.ContactFAQ .faqItem summary {
  padding: var(--p24);
  font-size: var(--ft16);
  font-weight: 600;
  line-height: 1.5;
}
.ContactFAQ .faqItem p {
  padding: 0 var(--p24) var(--p24);
  font-size: var(--ft16);
  line-height: 1.5;
}
.ContactFAQ .faqItem:hover {
  border-color: #a8bed8;
}
.ContactFAQ .faqItem summary:focus {
  /*outline: 2px solid #a8c8ed;*/
  outline-offset: -2px;
}
@media only screen and (max-width: 767px) {
  .ContactHero,
  .ContactHero .main {
    min-height: 400px;
  }
  .ContactHero h1 {
    font-size: var(--ft36);
  }
  .ContactHero p br {
    display: none;
  }
  .ContactCards {
    margin-top: calc(var(--p40) * -1);
    padding-bottom: var(--p56);
  }
  .ContactCardGrid,
  .ContactMain .main {
    grid-template-columns: 1fr;
  }
  .ContactCardGrid article {
    min-height: 0;
  }
  .ContactMain .main {
    gap: var(--p56);
  }
  .ContactForm {
    grid-template-columns: 1fr;
  }
  .ContactForm .full {
    grid-column: auto;
  }
  .ContactMetrics {
    gap: var(--p24);
  }
  .ContactMapCard {
    right: var(--p16);
    left: var(--p16);
    width: auto;
  }
  .ContactFAQ {
    padding-bottom: var(--p80);
  }
}
.AboutHero {
  position: relative;
  min-height: var(--p112);
  padding: var(--p112) 0 var(--p80);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.AboutHero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #06223dcc;
}
.AboutHero .main {
  position: relative;
  z-index: 1;
}
.AboutHeroCopy {
  max-width: var(--p80);
  width: 672px;
}
.AboutHero .eyebrow,
.AboutScale .eyebrow,
.AboutVision .eyebrow,
.AboutTimeline .eyebrow,
.AboutPillars .eyebrow,
.AboutBrands .eyebrow {
  font-size: var(--ft12);
  line-height: 1;
  color: #54adcf;
  font-weight: 600;
  letter-spacing: 1px;
}
.AboutHero h1 {
  margin: var(--p16) 0;
  font-size: var(--ft56);
  line-height: 1.25;
  font-weight: 600;
}
.AboutHero p {
  margin: 0;
  max-width: 510px;
  font-size: var(--ft18);
  line-height: 1.56;
  color: #d4e0ed;
}
.AboutStory {
  padding: var(--p112) 0;
  background: #fff;
}
.AboutStory .main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--p80);
  align-items: center;
}
.AboutStoryMedia {
  position: relative;
}
.AboutStoryMedia .img_box {
  aspect-ratio: 1.33;
  overflow: hidden;
  border-radius: var(--p8);
}
.AboutStoryMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.AboutCertificate {
  position: absolute;
  right: calc(var(--p56) * -1);
  bottom: calc(var(--p40) * -1);
  width: 190px;
  padding: var(--p24);
  background: var(--blue);
  color: #fff;
}
.AboutCertificate strong {
  display: block;
  font-size: var(--ft24);
  line-height: 1.25;
}
.AboutCertificate span {
  display: block;
  margin-top: var(--p12);
  font-size: var(--ft12);
  line-height: 1.4;
}
.AboutStoryCopy h2,
.AboutScale h2,
.AboutVision h2,
.AboutTimeline h2,
.AboutPillars h2,
.AboutBrands h2 {
  margin: var(--p12) 0 var(--p24);
  font-size: var(--ft36);
  line-height: 1.3;
  font-weight: 600;
}
.AboutStoryCopy p {
  margin: 0 0 var(--p16);
  font-size: var(--ft16);
  line-height: 1.6;
  color: var(--muted);
}
.AboutMiniStats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--p12);
  margin-top: var(--p32);
}
.AboutMiniStats span {
  font-size: var(--ft10);
  line-height: 1.3;
  color: var(--muted);
}
.AboutMiniStats b {
  display: block;
  color: var(--blue);
  font-size: var(--ft20);
  line-height: 1.3;
}
.AboutScale {
  padding: var(--p112) 0;
  background-color: var(--navy);
  background-position: center;
  background-size: cover;
  color: #fff;
}
.AboutScale h2 {
  color: #fff;
}
.AboutMarkets {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 220px;
  color: #8bc4ff;
  font-size: var(--ft12);
  line-height: 1.3;
  text-transform: uppercase;
}
.AboutScaleCards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--p12);
}
.AboutScaleCards article {
  min-height: 160px;
  padding: var(--p20);
  border: 1px solid #3b6080;
  border-radius: var(--p8);
  background: #143a5c;
}
.AboutScaleCards strong {
  display: inline-block;
  font-size: var(--ft30);
  line-height: 1.2;
}
.AboutScaleCards b {
  font-size: var(--ft12);
  color: #8eb8db;
}
.AboutScaleCards span,
.AboutScaleCards small {
  display: block;
}
.AboutScaleCards span {
  margin-top: var(--p12);
  font-size: var(--ft14);
  font-weight: 600;
}
.AboutScaleCards small {
  margin-top: var(--p8);
  color: #abc2d9;
  font-size: var(--ft11);
  line-height: 1.35;
}
.AboutVision {
  padding: var(--p112) 0;
  background: var(--paper);
}
.AboutVisionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--p20);
}
.AboutVisionGrid article {
  min-height: 250px;
  padding: var(--p32);
  border-radius: var(--p8);
}
.AboutMission {
  border-left: 4px solid #39a9ff;
 background: #edf5ff;
}
.AboutVisionCard {
  background: #07578f;
  color: #fff;
      border-left: 4px solid #1fab0e;
}
.AboutVisionGrid span {
  display: block;
  font-size: var(--ft12);
  line-height: 1.3;
  font-weight: 600;
  color: #42a6ff;
}
.AboutVisionCard span {
  color: #8bd3ff;
}
.AboutVisionGrid h3 {
  margin: var(--p16) 0 0;
  font-size: var(--ft20);
  line-height: 1.55;
  font-weight: 600;
}
.AboutSince {
  position: relative;
  overflow: hidden;
  color: #fff;
}
/*.AboutSince .img_box {*/
/*  position: absolute;*/
/*  inset: 0;*/
/*}*/
.AboutSince img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/*.AboutSince:after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  inset: 0;*/
/*  background: #05294fb8;*/
/*}*/
.AboutSince span,
.AboutSince h3 {
  position: relative;
  z-index: 1;
}
.AboutWorkHead {
  margin-top: var(--p80);
}
.AboutWorkGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--p16);
}
.TimelineList article:nth-child(2n-1) .dx{
   display: flex;
    flex-direction: column;
    align-items: center; 
}
.TimelineList article:nth-child(2n) .dx{
     display: flex;
    flex-direction: column;
    align-items: center; 
}
.AboutWorkGrid article {
    min-height: 150px;
    padding: 20px;
    border-left: 2px solid #09a6d9;
    border-radius: 10px;
}
.AboutWorkGrid b {
  /*color: #62b4ff;*/
  font-size: var(--ft14);
      color: #c9d5e5;
}
.AboutWorkGrid h3 {
  margin: var(--p12) 0;
  font-size: var(--ft16);
  line-height: 1.5;
}
.AboutWorkGrid p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft12);
  line-height: 1.5;
}
.AboutWorkGrid small {
  display: block;
  margin-top: var(--p16);
  color: var(--blue);
  font-size: var(--ft11);
}
.AboutTimeline {
  padding: var(--p112) 0;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.AboutTimeline h2 {
  color: #fff;
}
.TimelineList {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--p16);
  position: relative;
}
/* 中间贯穿横线 */
.TimelineList:before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 48px;
  transform: translateY(-50%);
  border-top: 2px solid #3c678d;
  z-index: 0;
}

.TimelineList article {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--p8);
}
/* 奇数项：线上方 */
.TimelineList article:nth-child(2n-1) {
     transform: translateY(-150px);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
/* 偶数项：线下方 */
.TimelineList article:nth-child(2n) {
  transform: translateY(40px);
}

.TimelineList b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
 background: rgba(102, 193, 236, 1);
  font-size: var(--ft12);
}
.TimelineList strong {
  font-size: var(--ft14);
  line-height: 1.4;
}
.TimelineList span {
  color: #a9c2d9;
  font-size: var(--ft11);
  line-height: 1.4;
}
.AboutPillars {
  padding: var(--p112) 0;
  background: #fff;
}
.AboutPillarGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p20);
}
.AboutPillarGrid article {
  padding: var(--p24);
  border: 1px solid var(--line);
  border-radius: var(--p8);
}
.AboutPillarGrid .icon {
  width: 36px;
  height: 36px;
  border-radius: var(--p8);
  /*background: #ddecff;*/
}
.AboutPillarGrid h3 {
  margin: var(--p16) 0 var(--p12);
  font-size: var(--ft18);
  line-height: 1.5;
}
.AboutPillarGrid p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft12);
  line-height: 1.5;
}
.AboutBrands {
  padding: var(--p80) 0;
  background: var(--paper);
  text-align: center;
}
.AboutBrands .img_box {
  max-width: 1260px;
  margin: auto;
}
.AboutBrands img {
  width: 100%;
}
.AboutCTA {
  padding: var(--p112) 0;
  background: #fff;
}
.AboutCTA .main {
  max-width: 920px;
  padding: var(--p56);
  border-radius: var(--p8);
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.AboutCTA h2 {
  margin: 0;
  font-size: var(--ft36);
  line-height: 1.3;
}
.AboutCTA p {
  max-width: 600px;
  margin: var(--p16) auto var(--p24);
  color: #b9cadd;
  font-size: var(--ft16);
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
    .AboutVisionGrid h3 {
   
    font-size: 9px !important;
    
}
  .AboutHero {
    padding: var(--p80) 0;
  }
  .AboutHeroCopy {
    width: auto;
  }
  .AboutHero h1 {
    font-size: var(--ft40);
  }
  .AboutHero p {
    font-size: var(--ft16);
  }
  .AboutStory .main {
    grid-template-columns: 1fr;
    gap: var(--p40);
  }
  .AboutCertificate {
    right: var(--p16);
    bottom: calc(var(--p24) * -1);
  }
  .AboutMiniStats {
    grid-template-columns: repeat(2, 1fr);
  }
  .AboutMarkets {
    min-height: 150px;
    flex-wrap: wrap;
    gap: var(--p12);
  }
  .TimelineList article:nth-child(2n-1) {
    transform: translateY(43px);
    display: flex;
    flex-direction: column;
    align-items: center;
}
  .AboutScaleCards,
  .AboutPillarGrid {
    grid-template-columns: repeat(1, 1fr);
  }
  .AboutVisionGrid,
  .AboutWorkGrid {
    grid-template-columns: 1fr;
  }
  .TimelineList {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--p24);
  }
  .TimelineList:before {
    display: none;
  }
  .AboutCTA .main {
    padding: var(--p32);
    width: calc(100% - 32px);
  }
  .AboutCTA h2 {
    font-size: var(--ft28);
  }
}
.AboutHero {
  min-height: 638px;
  padding: 96px 0 0;
}
.AboutHeroCopy {
  width: min(672px, 100%);
  max-width: none;
}
.AboutHero + .MetricStrip {
  position: relative;
  z-index: 2;
  margin-top: -64px;
}
.AboutHero + .MetricStrip .main {
  width: min(1840px, calc(100% - 80px));
  min-height: 166px;
  align-items: center;
}
.AboutHero + .MetricStrip .metric {
  padding: var(--p24) 0;
}
.AboutStory {
  padding: 120px 0 100px;
}
.AboutStory .main {
  width: min(1360px, calc(100% - 48px));
  grid-template-columns: 640px 640px;
  gap: 80px;
}
.AboutStoryMedia .img_box {
  height: 480px;
  aspect-ratio: auto;
}
.AboutStoryCopy {
  padding-top: 0;
}
.AboutScale {
  min-height: 900px;
  padding: 85px 0 100px;
}
.AboutScale .main {
  width: min(1440px, calc(100% - 48px));
}
.AboutScaleCards {
  grid-template-columns: repeat(6, 1fr);
}
.AboutVision .main {
  width: min(1360px, calc(100% - 48px));
}
.AboutVisionGrid {
  grid-template-columns: 740px 569px;
  grid-template-rows: 306px 306px;
  gap: 32px 43px;
}
.AboutVisionGrid article {
  min-height: 0;
}
.AboutMission {
    display: flex;
    gap: 15px;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
}
.AboutVisionCard {
  grid-column: 1;
  grid-row: 2;
   display: flex;
    gap: 15px;
    align-items: center;
}
.AboutSince {
    padding: 0px !important;
    background: #07578f;
    grid-column: 2;
    grid-row: 1 / span 2;
}
.AboutSince .wz{
        padding: 20px;
}
.AboutSince .img_box{
aspect-ratio: 1 / 0.6;
    
}
.AboutWorkGrid {
  gap: 28px;
}
.AboutWorkGrid article {
  min-height: 296px;
}
.AboutTimeline {
  min-height: 816px;
  padding: 100px 0;
}
.AboutPillars .main {
  width: min(1440px, calc(100% - 48px));
}
.AboutBrands {
  padding: 80px 0;
}
.AboutCTA {
  padding: 126px 0;
}
.AboutCTA .main {
  width: min(1360px, calc(100% - 48px));
  min-height: 378px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 1199px) {
  .AboutStory .main {
    grid-template-columns: 1fr 1fr;
  }
  .AboutVisionGrid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .AboutMission,
  .AboutVisionCard,
  .AboutSince {
    grid-column: auto;
    grid-row: auto;
  }
  .AboutVisionGrid article {
    min-height: 250px;
  }
  .AboutSince {
    grid-row: span 2;
  }
}
@media only screen and (max-width: 767px) {
  .AboutHero {
    min-height: 0;
    padding: var(--p80) 0;
  }
  .AboutHero + .MetricStrip {
    margin-top: 0;
  }
  .AboutHero + .MetricStrip .main {
    width: calc(100% - 32px);
    min-height: 0;
  }
  .AboutStory .main {
    grid-template-columns: 1fr;
  }
  .AboutStoryMedia .img_box {
    height: auto;
    aspect-ratio: 1.33;
  }
  .AboutScale {
    min-height: 0;
  }
  .AboutScaleCards {
    grid-template-columns: repeat(2, 1fr);
  }
  .AboutVisionGrid {
    grid-template-columns: 1fr;
  }
  .AboutSince {
    grid-row: auto;
  }
  .AboutWorkGrid {
    gap: var(--p16);
  }
  .AboutTimeline {
    min-height: 0;
  }
  .AboutCTA {
    padding: var(--p80) 0;
  }
  .AboutCTA .main {
    min-height: 0;
  }
}
.CertHero {
  position: relative;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.CertHero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #06223db8;
}
.CertHero .main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 500px;
}
.CertHero .main > div {
  max-width: 672px;
}
.CertHero h1 {
  margin: 0 0 var(--p20);
  font-size: var(--ft56);
  line-height: 1.2;
  font-weight: 600;
}
.CertHero p {
  margin: 0;
  color: #d4e0ed;
  font-size: var(--ft16);
  line-height: 1.6;
}
.CertHero + .MetricStrip .main {
  width: min(1480px, calc(100% - 48px));
  min-height: 164px;
  align-items: center;
}
.CertHero + .MetricStrip .metric {
  padding: var(--p24) 0;
}
.ComplianceRepository {
  padding: 120px 0;
  background: var(--paper);
}
.ComplianceRepository .main {
  width: min(1360px, calc(100% - 48px));
}
.CertSectionHead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--p32);
  margin-bottom: var(--p40);
}
.CertSectionHead h2,
.MarketHead h2,
.ProtocolSection h2 {
  margin: 0 0 var(--p12);
  font-size: var(--ft36);
  line-height: 1.3;
  font-weight: 600;
}
.CertSectionHead p,
.MarketHead p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft16);
  line-height: 1.6;
}
.CertSectionHead .tabs {
  justify-content: flex-end;
}
.CertSectionHead .tabs button {
  font-size: var(--ft12);
  line-height: 1.3;
  padding: var(--p8) var(--p16);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}
.CertSectionHead .tabs button.active,
.CertSectionHead .tabs button:hover {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: transparent;
}
.CertificateGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p20);
}
.CertificateCard {
  padding: var(--p16);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: #fff;
}
.CertificateCard .img_box {
  height: 365px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #eff2f5;
}
.CertificateCard img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.CertificateCard h3 {
  margin: var(--p20) 0 var(--p8);
  font-size: var(--ft24);
  line-height: 1.4;
  font-weight: 400;
}
.CertificateCard p {
  min-height: 44px;
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.4;
}
.CertificateCard a {
  display: inline-block;
  margin-top: var(--p16);
  color: var(--blue);
  font-size: var(--ft14);
  font-weight: 600;
}
.CertCallouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--p20);
  margin-top: var(--p32);
}
.CertCallouts article {
  padding: var(--p24);
  background: #e8f3ff;
}
.CertCallouts h3 {
  margin: 0 0 var(--p8);
  color: #1769ba;
  font-size: var(--ft28);
  line-height: 1.2;
}
.CertCallouts p {
  margin: 0;
  color: #6d7e91;
  font-size: var(--ft16);
  line-height: 1.4;
}
.MarketCompliance {
  padding: 120px 0;
  background: var(--navy);
  color: #fff;
}
.MarketCompliance .main {
  width: min(1360px, calc(100% - 48px));
}
.MarketHead {
  max-width: 610px;
}
.MarketHead h2 {
  color: #fff;
}
.MarketHead p {
  color: #a8bbcf;
}
.MarketGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p20);
  margin-top: var(--p56);
}
.MarketGrid article {
  min-height: 240px;
  padding: var(--p24);
  border: 1px solid #345270;
  border-radius: var(--p8);
  background: #173653;
}
.MarketIcon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0d4d93;
  color: #2389ff;
  font-size: var(--ft12);
  font-weight: 700;
}
.MarketGrid h3 {
  margin: var(--p20) 0 var(--p16);
  font-size: var(--ft24);
  line-height: 1.4;
}
.MarketGrid p {
  margin: var(--p8) 0;
  color: #b4c8dc;
  font-size: var(--ft14);
  line-height: 1.3;
}
.ProtocolSection {
  padding: 120px 0 160px;
  background: var(--paper);
}
.ProtocolSection .main {
  width: min(900px, calc(100% - 48px));
}
.ProtocolSection h2 {
  text-align: center;
  margin-bottom: var(--p40);
}
.ProtocolSection .DataTable td {
  font-size: var(--ft16);
  line-height: 1.5;
}
.CertCTA {
  padding: 0 0 120px;
  background: var(--paper);
}
.CertCTA .main {
  width: min(1360px, calc(100% - 48px));
  padding: var(--p56);
  border-radius: var(--p8);
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.CertCTA h2 {
  margin: 0;
  font-size: var(--ft36);
  line-height: 1.3;
}
.CertCTA p {
  max-width: 650px;
  margin: var(--p16) auto var(--p24);
  color: #b7c8db;
  font-size: var(--ft16);
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .CertHero,
  .CertHero .main {
    min-height: 360px;
  }
  .CertHero h1 {
    font-size: var(--ft40);
  }
  .CertSectionHead {
    display: block;
  }
  .CertSectionHead .tabs {
    margin-top: var(--p20);
    justify-content: flex-start;
  }
  .CertificateGrid,
  .MarketGrid {
    grid-template-columns: 1fr;
  }
  .CertificateCard .img_box {
    height: 300px;
  }
  .CertCallouts {
    grid-template-columns: 1fr;
  }
  .ProtocolSection {
    padding-bottom: var(--p80);
  }
  .CertCTA {
    padding-bottom: var(--p80);
  }
  .CertCTA .main {
    padding: var(--p32);
  }
  .CertCTA h2 {
    font-size: var(--ft28);
  }
}
.OdmHero {
  min-height: 640px;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.OdmHero .main {
  min-height: 640px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.OdmHero .main > div {
  max-width: 802px;
}
.OdmHero .eyebrow {
  color: #7ea3c7;
  font-size: var(--ft12);
  line-height: 1;
  letter-spacing: 1px;
}
.OdmHero h1 {
  margin: var(--p20) 0;
  font-size: var(--ft72);
  line-height: 1.2;
  font-weight: 600;
}
.OdmHero p {
  max-width: 660px;
  margin: auto;
  color: #b5c7da;
  font-size: var(--ft18);
  line-height: 1.56;
}
.OdmHero .HeroActions {
  justify-content: center;
}
.OdmBrand {
  padding: 100px 0 70px;
  background: #fff;
}
.OdmBrand .main,
.OdmProcesses .main,
.OdmOptions .main,
.OdmProduction .main,
.OdmShowcase .main,
.OdmInquiry .main {
  width: min(1360px, calc(100% - 48px));
}
.OdmBrand h2,
.OdmProcesses h2,
.OdmShowcase h2 {
  margin: 0 0 var(--p12);
  font-size: var(--ft36);
  line-height: 1.3;
}
.OdmBrand > .main > p {
  max-width: 1000px;
  margin: 0 0 var(--p32);
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.5;
}
.OdmServiceGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p20);
}
.OdmServiceGrid article {
  padding: var(--p24);
  border: 1px solid var(--line);
  border-radius: var(--p8);
}
.OdmServiceGrid b {
  color: #52a7ff;
  font-size: var(--ft12);
}
.OdmServiceGrid h3 {
  margin: var(--p16) 0 var(--p8);
  font-size: 20px;
font-weight: 700;
color: rgba(7, 60, 98, 1);
}
.OdmServiceGrid p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.4;
}
.odmser{
   margin-top: var(--p40);  
}
.odmser .bt{
    font-size: 14px;
font-weight: 700;
color: rgba(147, 167, 186, 1);
 margin-top: var(--p40);
}
.OdmWorkflow {
  display: grid;
  grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
  align-items: center;
  gap: var(--p12);
  margin-top: var(--p20);
}
.OdmWorkflow span {
  font-size: var(--ft12);
  font-weight: 600;
  color: #6e8297;
}
.fl .flnr{
    
}
.fl .title1{
     display: flex;
    font-size: 16px;
    font-weight: 700;
    color: rgba(8, 121, 183, 1);
    border-radius: 10px;
    background: rgba(237, 247, 253, 1);
    padding: 20px 40px;
    align-items: center;
    justify-content: center;  
    position: relative;
}

.fl .title1 svg{
    position: absolute;
        right: -15%;
}
.fl{
    display: grid;
     grid-template-columns:1fr 1fr 1fr 1fr 1fr;
     gap: 37px;
         margin-top: 20px;
}
.fl .title1:last-child svg {
    display: none;
}
.fl .title1:last-child {
    background: #147cc8;
    color: #fff;
}
.OdmWorkflow b {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: var(--p8);
  background: #e5f3ff;
  color: #1871bb;
  font-size: var(--ft12);
}
.OdmWorkflow b:last-child {
  background: #147cc8;
  color: #fff;
}
.OdmProcessCard.dark li{
 background:#0994d93b;


border: 1px solid rgba(105, 185, 225, 1);
color: rgba(255, 255, 255, 1);
}
.OdmProcessCard.dark li span{
   background: rgba(43, 134, 182, 1); 
   color: rgba(255, 255, 255, 1);
}
.odm0 ul{
        display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 34px;
        padding-left: 0px;
}
.odm0 ul li:last-child svg{
    display: none;
}
.odm0 ul li{
    display: flex;
   font-size: 14px;
font-weight: 700;
color: rgba(7, 60, 98, 1);
  border-radius: 12px;
background: rgba(247, 251, 254, 1);
gap: 19px;
border: 1px solid rgba(220, 231, 241, 1);
   padding: 16px 22px;
    align-items: center;
    justify-content: center;
    position: relative;
    
}
.odm0 ul li svg{
    position: absolute;
    right: -16%;
}
.odm0 ul li span{
     display: flex;
    border-radius: 21px;
    background: rgba(232, 246, 253, 1);
    width: 42px;
    height: 42px;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(39, 142, 229, 1);
    align-items: center;
    justify-content: center;
}
.OdmWorkflow i {
  border-top: 1px solid #82b4dc;
}
.OdmProcesses {
  padding: 100px 0;
background: #f7f9fe;
}
.OdmProcesses h2 {
  text-align: center;
  margin-bottom: var(--p40);
}
.OdmProcessCard {
  padding: var(--p24);
  border-radius: var(--p8);
  background: #fff;
}
.OdmProcessCard + .OdmProcessCard {
  margin-top: var(--p20);
}
.OdmProcessCard h3 {
  margin: 0 0 var(--p8);
  font-size: var(--ft20);
  line-height: 1.4;
  color: #1668af;
}
.OdmProcessCard p {
  margin: 0 0 var(--p20);
  color: var(--muted);
  font-size: var(--ft12);
}
.OdmProcessCard > div {
  display: grid;
  grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
  gap: var(--p8);
  align-items: center;
}
.OdmProcessCard b {
  display: grid;
  place-items: center;
  min-height: 56px;
  border: 1px solid #d8e8f8;
  border-radius: var(--p8);
  color: #2b6491;
  text-align: center;
  font-size: var(--ft12);
  line-height: 1.35;
}
.OdmProcessCard i {
  border-top: 1px solid #82b4dc;
}
.OdmProcessCard.dark {
  background: #07537f;
  color: #fff;
}
.OdmProcessCard.dark h3 {
  color: #fff;
}
.OdmProcessCard.dark p {
  color: #b8d2e6;
}
.OdmProcessCard.dark b {
  border-color: #2e86b7;
  color: #fff;
}
.OdmOptions {
  padding: 110px 0;
  background: #eef2f7;
}
.OdmCenterHead {
  text-align: center;
}
.OdmCenterHead h2 {
  margin: 0 0 var(--p12);
  font-size: var(--ft36);
  line-height: 1.3;
}
.odm0 h2,
.OdmCenterHead  .lgang{
    position: relative;
}
.OdmCenterHead .lgang::after {
content: '';
    position: absolute;
    left: 29px;
    /* bottom: 0; */
    width: 75px;
    height: 4px;
    background-color: #0965d9;
    top: 118%;
    left: 47%;
    transform: translateY(-50%);

}
.odm0 h2::after {
content: '';
    position: absolute;
    left: 29px;
    /* bottom: 0; */
    width: 75px;
    height: 4px;
     background-color: #09bfd9;
    top: 118%;
    left: 47%;
    transform: translateY(-50%);

}


.OdmCenterHead p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.5;
}
.OdmOptionGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p16);
  margin-top: var(--p40);
}
.OdmOptionGrid article {
  min-height: 150px;
  padding: var(--p20);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: #fff;
  text-align: center;
}
.OdmOptionGrid .icon {
  width: 34px;
  height: 34px;
  margin: auto;
  border-radius: var(--p8);
  background: #e2efff;
}
.OdmOptionGrid h3 {
  margin: var(--p12) 0 var(--p8);
  font-size: var(--ft16);
  line-height: 1.4;
}
.OdmOptionGrid p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft11);
  line-height: 1.4;
}
.OdmProduction {
  padding: 100px 0;
  background: #fff;
}
.OdmProduction .steps {
  margin-top: var(--p56);
}
.OdmShowcase {
  padding: 100px 0;
  background: #fff;
}
.ShowcaseHead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: var(--p32);
}
.ShowcaseHead p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
}
.ShowcaseHead a {
  color: var(--blue);
  font-size: var(--ft14);
  font-weight: 600;
      padding-bottom: 6px;
    border-bottom: 2px solid;
}
.OdmShowcaseGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p20);
}
.OdmShowcaseGrid .img_box {
        width: 100%;
    aspect-ratio: 0.5 / 0.7;
  overflow: hidden;
  border-radius: var(--p8);
}
.OdmShowcaseGrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.OdmShowcaseGrid h3 {
  margin: var(--p16) 0 var(--p8);
  font-size: var(--ft18);
  line-height: 1.4;
}
.OdmShowcaseGrid p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft12);
}
.OdmInquiry {
  padding: 100px 0;
  background: #eef2f7;
}
.OdmInquiry .main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: var(--p8);
  box-shadow: 0 16px 30px #08274824;
}
.OdmInquiryIntro {
     padding: 40px 22px var(--p56) var(--p56);
  background: var(--navy);
  color: #fff;
}
.bdtubiao{
  display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;  
}
.OdmInquiryIntro h2 {
  margin: 0 0 var(--p20);
  font-size: var(--ft36);
  line-height: 1.25;
}
.OdmInquiryIntro p {
  margin: 0 0 var(--p32);
  color: #b9cadc;
  font-size: var(--ft16);
  line-height: 1.6;
}
.OdmInquiryIntro span {
  display: block;
  margin-top: var(--p20);
  color: #94abc2;
  font-size: var(--ft11);
  line-height: 1.5;
}
.OdmInquiryIntro b {
  color: #fff;
  font-size: var(--ft14);
}
.OdmInquiryForm {
  padding: var(--p40);
  background: #fff;
}
@media only screen and (max-width: 767px) {
  .OdmHero,
  .OdmHero .main {
    min-height: 420px;
  }
  .OdmHero h1 {
    font-size: var(--ft40);
  }
  .OdmHero p {
    font-size: var(--ft16);
  }
  .OdmServiceGrid,
  .OdmOptionGrid,
  .OdmShowcaseGrid {
    grid-template-columns: 1fr;
  }
  .OdmWorkflow {
    grid-template-columns: 1fr;
    gap: var(--p8);
  }
  .OdmWorkflow i {
    display: none;
  }
  .OdmProcessCard > div {
    grid-template-columns: 1fr;
  }
  .OdmProcessCard i {
    display: none;
  }
  .OdmProduction .steps {
    margin-top: var(--p40);
  }
  .ShowcaseHead {
    display: block;
  }
  .ShowcaseHead a {
    display: inline-block;
    margin-top: var(--p16);
  }
  .OdmShowcaseGrid .img_box {
    height: 260px;
  }
  .OdmInquiry .main {
    grid-template-columns: 1fr;
  }
  .OdmInquiryIntro,
  .OdmInquiryForm {
    padding: var(--p32);
  }
}
.AppHero {
  min-height: 520px;
  background: var(--navy);
  color: #fff;
}
.AppHero .main {
  min-height: 520px;
  display: flex;
  align-items: center;
}
.AppHero .main > div {
  max-width: 742px;
}
.AppHero .eyebrow {
  font-size: var(--ft12);
  line-height: 1;
  color: #6faeff;
  letter-spacing: 1px;
}
.AppHero h1 {
  margin: var(--p20) 0;
  font-size: var(--ft56);
  line-height: 1.25;
  font-weight: 600;
}
.AppHero p {
  max-width: 510px;
  margin: 0;
  color: #b8cadc;
  font-size: var(--ft18);
  line-height: 1.55;
}
.AppHero + .MetricStrip .main {
  width: min(1360px, calc(100% - 48px));
  min-height: 120px;
  align-items: center;
}
.AppHero + .MetricStrip .metric {
  padding: var(--p20) 0;
}
.AppScenarios {
  padding: 110px 0;
  background: var(--paper);
}
.AppScenarios .main,
.AppSpotlight .main,
.AppPortfolio .main,
.AppCTA {
  width: min(1360px, calc(100% - 48px));
}
.AppCTA .btn.orange{
    font-weight: 400;
}
.AppScenarioHead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: var(--p40);
}
.AppScenarioHead h2 {
  margin: 0 0 var(--p12);
  font-size: var(--ft36);
  line-height: 1.25;
}
.AppScenarioHead p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.5;
}
.AppArrow {
  width: 36px;
  height: 36px;
  margin-left: var(--p8);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #718094;
}
.AppScenarioGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--p16);
  
}
.AppScenarioGrid article {
  position: relative;
  min-height: 384px;
  overflow: hidden;
  border-radius: var(--p8);
  color: #fff;
}
.AppScenarioGrid .AppCamping {
  
 
}
.AppScenarioGrid .AppGolf {


}
.AppScenarioGrid .img_box {
  position: absolute;
  inset: 0;
  width: 100%;
  height:100%;
  object-fit: cover;
}
.AppScenarioGrid img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.AppScenarioGrid article:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, #03182ed9);
}
.AppScenarioGrid h3,
.AppScenarioCaption {
  position: absolute;
  z-index: 1;
  left: var(--p24);
  right: var(--p24);
  bottom: var(--p20);
}
.AppScenarioGrid h3 {
  margin: 0;
  font-size: var(--ft20);
  line-height: 1.4;
}
.AppScenarioCaption h3 {
  position: static;
  margin: 0 0 var(--p8);
  font-size: var(--ft20);
  line-height: 1.4;
}
.AppScenarioCaption p {
  margin: 0;
  color: #d5e1eb;
  font-size: var(--ft14);
  line-height: 1.4;
}
.AppScenarioCaption a {
  display: inline-block;
  margin-top: var(--p12);
  font-size: var(--ft14);
  font-weight: 600;
}
.AppSpotlight {
  padding: 110px 0;
  background: #edf1f6;
}
.AppSpotlight .main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--p20);
  align-items: center;
}
.AppSpotlightMedia {
  position: relative;
}
.AppSpotlightMedia .img_box {
  height: 550px;
  overflow: hidden;
  border-radius: var(--p8);
}
.AppSpotlightMedia img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.AppSpotlightMedia span {
  position: absolute;
  top: var(--p20);
  left: var(--p20);
  padding: var(--p8) var(--p12);
  background: var(--orange);
  color: #fff;
  font-size: var(--ft12);
  font-weight: 600;
}
.AppSpotlightCopy h2 {
  margin: var(--p12) 0 var(--p24);
  font-size: var(--ft36);
  line-height: 1.3;
}
.AppSpotlightCopy article {
  position: relative;
  padding-left:0px;
  margin-bottom: var(--p24);
  
  display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}
/*.AppSpotlightCopy article:before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  left: 0;*/
/*  top: 0;*/
/*  width: 38px;*/
/*  height: 38px;*/
/*  border-radius: var(--p8);*/
/*  background: #dceaff;*/
/*}*/
.AppSpotlightCopy h3 {
  margin: 0 0 var(--p8);
  font-size: var(--ft18);
  line-height: 1.4;
}
.AppSpotlightCopy article p {
  margin: 0;
color: rgba(66, 70, 84, 1);
  font-size: var(--ft14);
  line-height: 1.4;
}
.AppRecommendation {
  padding: var(--p24);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: #fff;
}
.AppRecommendation strong {
  color: var(--blue);
  font-size: var(--ft14);
}
.AppRecommendation em {
  float: right;
  color: var(--orange);
  font-size: var(--ft12);
  font-style: normal;
}
.AppRecommendation p {
  margin: var(--p16) 0;
  color: var(--muted);
  font-size: var(--ft12);
  line-height: 1.45;
}
.AppRecommendation .btn {
width: 100%;
    font-size: var(--ft14);
    display: flex;
    gap: 5px;
    align-items: center;
}
.AppPortfolio {
  padding: 110px 0;
  background: var(--paper);
}
.AppPortfolio .OdmCenterHead {
  margin-bottom: var(--p40);
}
.AppProductGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p20);
}
.AppProductGrid article {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: #fff;
}
.AppProductGrid .img_box {
  height: 260px;
}
.AppProductGrid img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.AppProductGrid span,
.AppProductGrid h3,
.AppProductGrid p,
.AppProductGrid b {
  display: block;
  margin-left: var(--p16);
  margin-right: var(--p16);
}
.AppProductGrid span {
  margin-top: var(--p16);
  color: #7290ae;
  font-size: var(--ft10);
  font-weight: 600;
}
.AppProductGrid h3 {
  margin-top: var(--p8);
  margin-bottom: var(--p8);
  font-size: var(--ft18);
  line-height: 1.35;
}
.AppProductGrid p {
  min-height: 33px;
  margin-top: 0;
  margin-bottom: var(--p16);
    color: #536174;
  font-size: var(--ft12);
  line-height: 1.4;
}
.AppProductGrid b {
     padding-bottom: var(--p16);
    color: var(--blue);
    font-size: var(--ft16);
    display: flex;
    align-items: center;
    border-top: 2px solid #e6edf5;
    justify-content: space-between;
    padding-top: 13px;
    font-weight: 400;
}
.AppCTA {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 110px;
  padding: var(--p40) var(--p56);
  border-radius: var(--p8);
  background: var(--navy);
  color: #fff;
}
.AppCTA .main{
   display: flex;
    align-items: center;
    justify-content: space-between; 
}
.AppCTA h2 {
  margin: 0 0 var(--p8);
  font-size: var(--ft32);
  line-height: 1.3;
}
.AppCTA p {
  max-width: 650px;
  margin: 0;
  color: #b8c9dc;
  font-size: var(--ft16);
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .AppHero,
  .AppHero .main {
    min-height: 400px;
  }
  .AppHero h1 {
    font-size: var(--ft40);
  }
  .AppHero p {
    font-size: var(--ft16);
  }
  .AppScenarioHead {
    display: block;
  }
  .AppScenarioHead > div:last-child {
    margin-top: var(--p20);
  }
  .AppScenarioGrid {
    grid-template-columns: 1fr;
  }
  .AppScenarioGrid .AppCamping,
  .AppScenarioGrid .AppGolf {
    grid-row: auto;
    min-height: 330px;
  }
  .AppScenarioGrid article {
    min-height: 250px;
  }
  .AppSpotlight .main {
    grid-template-columns: 1fr;
  }
  .AppSpotlightMedia .img_box {
    height: 390px;
  }
  .AppProductGrid {
    grid-template-columns: 1fr;
  }
  .AppCTA {
    display: block;
    margin-bottom: var(--p80);
    padding: var(--p32);
  }
  .AppCTA .btn {
    margin-top: var(--p24);
  }
}
.ContactInfo > .ContactEntity + .ContactEntity {
  margin-bottom: 0;
}
.ContactInfo > .ContactEntity + .ContactEntity {
  margin-bottom: 0;
}
:root {
  --ft32: 32px;
}
.CatalogHero {
  min-height: 438px;
  background: var(--navy);
  color: var(--white);
}
.CatalogHero .main {
  width: min(1360px, calc(100% - 48px));
  padding-top: 96px;
}
.CatalogCrumbs {
  display: flex;
  align-items: center;
  gap: var(--p12);
  color: #a9bdd1;
  font-size: var(--ft14);
  line-height: 1.43;
}
.CatalogCrumbArrow {
  width: 8px;
  height: 12px;
}
.CatalogHero h1 {
  margin: var(--p24) 0 var(--p16);
  font-size: var(--ft56);
  font-weight: 600;
  line-height: 1.2;
}
.CatalogHero p {
  margin: 0;
  color: #b5c4d4;
  font-size: var(--ft16);
  line-height: 1.625;
}
.CatalogResources {
  padding: 96px 0;
}
.CatalogResources .main {
  width: min(1360px, calc(100% - 48px));
}
.CatalogResourceGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--p24);
}
.CatalogResourceGrid article {
  display: flex;
  min-height: 399px;
  flex-direction: column;
  padding: var(--p32);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: var(--white);
  box-shadow: 0 6px 18px #09244a12;
}
.CatalogResourceIcon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--p8);
}
.CatalogResourceIcon.blue {
  background: #2169e8;
}
.CatalogResourceIcon.pale {
  background: #cfe0ff;
}
.CatalogResourceIcon.orange {
  background: #d84b26;
}
.CatalogResourceGrid h2 {
  margin: var(--p40) 0 var(--p16);
  font-size: var(--ft24);
  font-weight: 600;
  line-height: 1.42;
}
.CatalogResourceGrid p {
  min-height: 77px;
  margin: 0;
  color: var(--muted);
  font-size: var(--ft16);
  line-height: 1.6;
}
.CatalogMeta {
  display: block;
  margin-top: var(--p32);
  color: #8490a1;
  font-size: var(--ft14);
  line-height: 1.43;
}
.CatalogDownloadButton {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--p8);
  margin-top: var(--p16);
  border: 1px solid var(--blue);
  border-radius: var(--p8);
  color: var(--blue);
  font-size: var(--ft16);
  line-height: 1.5;
}
.CatalogDownloadButton .icon {
  width: 20px;
  height: 20px;
}
.CatalogWorkspace {
  padding: 96px 0;
  background: var(--paper);
}
.CatalogWorkspace .main {
  display: grid;
  width: min(1440px, calc(100% - 48px));
  grid-template-columns: 437px 1fr;
  gap: var(--p32);
  align-items: start;
}
.CatalogRequest {
  padding: var(--p32);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: var(--white);
  box-shadow: 0 6px 18px #09244a0c;
}
.CatalogRequest h2 {
  margin: 0 0 var(--p20);
  font-size: var(--ft28);
  font-weight: 600;
  line-height: 1.32;
}
.CatalogRequest > p {
  margin: 0 0 var(--p32);
  color: var(--muted);
  font-size: var(--ft16);
  line-height: 1.625;
}
.CatalogForm {
  display: grid;
  gap: var(--p20);
}
.CatalogForm label {
  display: grid;
  gap: var(--p12);
  color: #617086;
  font-size: var(--ft14);
  font-weight: 500;
  line-height: 1.43;
}
.CatalogForm input,
.CatalogForm select {
  min-height: 48px;
  padding: var(--p12) var(--p16);
  border: 1px solid #c9d5e5;
  border-radius: var(--p8);
  outline: 0;
  background: var(--white);
  color: #697587;
  font-size: var(--ft16);
  line-height: 1.4;
}
.CatalogForm input:focus,
.CatalogForm select:focus {
  border-color: var(--blue);
}
.CatalogForm .btn {
  min-height: 48px;
  margin-top: 4px;
  font-size: var(--ft16);
  font-weight: 600;
}
.CatalogRequest > small {
  display: block;
  margin-top: var(--p24);
  color: #8a96a7;
  font-size: var(--ft12);
  line-height: 1.35;
  text-align: center;
}
.CatalogRequest > small a {
  border-bottom: 1px solid currentColor;
}
.CatalogFiles h2 {
  margin: 0 0 var(--p12);
  font-size: var(--ft36);
  font-weight: 600;
  line-height: 1.3;
}
.CatalogFiles > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft16);
  line-height: 1.625;
}
.CatalogTableWrap {
  overflow: hidden;
  margin-top: var(--p32);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: var(--white);
}
.CatalogTable {
  width: 100%;
  border-collapse: collapse;
}
.CatalogTable th {
  height: 60px;
  padding: var(--p20) var(--p24);
  background: #e4e7ec;
  color: #57616d;
  font-size: var(--ft14);
  font-weight: 600;
  line-height: 1.43;
  text-align: left;
}
.CatalogTable th:first-child {
  width: 43%;
}
.CatalogTable th:nth-child(2) {
  width: 22%;
}
.CatalogTable th:nth-child(3) {
  width: 16%;
}
.CatalogTable th:last-child {
  width: 19%;
}
.CatalogTable td {
  height: 81px;
  padding: var(--p16) var(--p24);
  border-top: 1px solid #e5e9ef;
  color: #4f5967;
  font-size: var(--ft16);
  line-height: 1.43;
}
.CatalogTable tbody tr:nth-child(even) {
  background: #f4f6f9;
}
.CatalogTable td strong,
.CatalogTable td small {
  display: block;
}
.CatalogTable td strong {
  font-size: var(--ft16);
  font-weight: 600;
  line-height: 1.5;
}
.CatalogTable td small {
  color: #8590a1;
  font-size: var(--ft12);
  line-height: 1.35;
}
.CatalogTable td a {
  display: flex;
  align-items: center;
  gap: var(--p8);
  color: var(--blue);
  font-size: var(--ft16);
  font-weight: 500;
}
.CatalogTable td a .icon {
  width: 16px;
  height: 16px;
}
.CatalogFormat {
  display: inline-block;
  padding: 4px var(--p12);
  border-radius: var(--p12);
  background: #dce6ff;
  color: #316dd3;
  font-size: var(--ft12);
  font-weight: 600;
  line-height: 1;
}
.CatalogFormat.zip {
  background: #ffdcd5;
  color: #d45335;
}
.CatalogCad {
  display: flex;
  min-height: 117px;
  align-items: center;
  justify-content: space-between;
  gap: var(--p32);
  margin-top: var(--p56);
  padding: var(--p20) var(--p24);
  border-radius: var(--p8);
  background: var(--navy);
  color: var(--white);
}
.CatalogCad h3 {
  margin: 0 0 var(--p8);
  font-size: var(--ft24);
  font-weight: 600;
  line-height: 1.42;
}
.CatalogCad p {
  margin: 0;
  color: #aebed1;
  font-size: var(--ft16);
  line-height: 1.5;
}
.CatalogCad .btn {
  min-width: 176px;
  font-size: var(--ft16);
  font-weight: 600;
}
.CatalogTrust {
  padding: calc(var(--p80) + var(--p16) - 1px) 0;
}
.CatalogTrust .main {
  width: min(1360px, calc(100% - 48px));
  padding-top: 64px;
  border-top: 2px solid var(--line);
}
.CatalogMetrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p24);
}
.CatalogMetrics div {
  text-align: center;
}
.CatalogMetrics strong {
  display: block;
  color: var(--blue);
  font-size: var(--ft36);
  font-weight: 700;
  line-height: 1.3;
}
.CatalogMetrics span {
  display: block;
  margin-top: var(--p8);
  color: #8793a4;
  font-size: var(--ft14);
  line-height: 1.43;
}
@media only screen and (max-width: 767px) {
  .CatalogHero .main {
    padding-top: var(--p80);
  }
  .CatalogHero h1 {
    font-size: var(--ft40);
  }
  .CatalogHero p br,
  .CatalogResourceGrid p br,
  .CatalogRequest > p br {
    display: none;
  }
  .CatalogResources,
  .CatalogWorkspace {
    padding: var(--p56) 0;
  }
  .CatalogResourceGrid,
  .CatalogWorkspace .main {
    grid-template-columns: 1fr;
  }
  .CatalogWorkspace .main {
    width: calc(100% - 32px);
  }
  .CatalogTableWrap {
    overflow: auto;
  }
  .CatalogTable {
    min-width: 780px;
  }
  .CatalogCad {
    display: block;
  }
  .CatalogCad .btn {
    margin-top: var(--p20);
  }
  .CatalogMetrics {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--p32);
  }
  .CatalogTrust {
    padding: var(--p56) 0;
  }
}
.FactoryHero {
  position: relative;
  min-height: 640px;
  background-position: center;
  background-size: cover;
  color: var(--white);
}
.FactoryHero:before {
  position: absolute;
  inset: 0;
  background: #06223dba;
  content: "";
}
.FactoryHero .main {
  position: relative;
  z-index: 1;
  width: min(1360px, calc(100% - 48px));
  padding-top: 150px;
}
.FactoryHeroCopy {
  width: 672px;
}
.FactoryHero .eyebrow,
.FactoryAreas .eyebrow,
.FactorySystem .eyebrow,
.FactoryEquipment .eyebrow {
  color: #7dbaff;
  font-size: var(--ft12);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
}
.FactoryHero h1 {
  margin: var(--p20) 0 var(--p16);
  font-size: var(--ft56);
  font-weight: 600;
  line-height: 1.2;
}
.FactoryHero p {
  margin: 0;
  color: #d2deea;
  font-size: var(--ft16);
  line-height: 1.65;
}
.FactoryHero .HeroActions {
  margin-top: var(--p32);
}
.FactoryHero .btn {
  font-size: var(--ft14);
}
.FactoryStats {
  position: relative;
  z-index: 2;
  width: min(1840px, calc(100% - 80px));
  margin: -64px auto 0;
  padding: var(--p40) var(--p32);
  border-radius: var(--p8);
  background: var(--navy);
  box-shadow: 0 8px 18px #061d3626;
  color: var(--white);
}
.FactoryStatsGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.FactoryStatsGrid div {
display: flex;
    text-align: center;
    border-right: 1px solid #24415c;
    flex-direction: column;
    align-items: center;
}
.FactoryStatsGrid div img{
    width: 20px;
}
.FactoryStatsGrid div:last-child {
  border: 0;
}
.FactoryStatsGrid strong {
  display: block;
  color: var(--white);
  font-size: var(--ft36);
  font-weight: 700;
  line-height: 1.3;
}
.FactoryStatsGrid span {
  display: block;
  margin-top: var(--p8);
  color: #afc0d1;
  font-size: var(--ft12);
  line-height: 1.4;
}
.FactoryAreas {
  padding: 112px 0 129px;
}
.FactoryAreas .main,
.FactorySystem .main,
.FactoryCore .main {
  width: min(1360px, calc(100% - 48px));
}
.FactoryAreaHead {
  text-align: center;
}
.FactoryAreaHead h2,
.FactorySystemCopy h2,
.FactoryCoreHead h2,
.FactoryEquipment h2,
.FactoryQuoteIntro h2 {
  margin: var(--p12) 0 var(--p16);
  font-size: var(--ft36);
  font-weight: 600;
  line-height: 1.3;
}
.FactoryAreaHead p,
.FactoryCoreHead p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.5;
}
.FactoryAreaGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--p20);
  margin-top: var(--p56);
}
.FactoryAreaGrid article {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: var(--white);
  box-shadow: 0 3px 10px #09244a10;
}
.FactoryAreaBlank {
  height: 350px;
  background: #e5e5e5;
}
.FactoryAreaGrid h3 {
  margin: 0;
  padding: var(--p16) var(--p24);
  font-size: var(--ft14);
  font-weight: 500;
  line-height: 1.4;
  color: rgba(61, 93, 124, 1);
}
.FactorySystem {
  padding: 0 0 120px;
}
.FactorySystem .main {
  display: grid;
  grid-template-columns: 640px 1fr;
  gap: var(--p80);
  align-items: center;
}
.FactorySystemMedia {
  position: relative;
}
.FactorySystemMedia .img_box {
  height: 360px;
  overflow: hidden;
  border-radius: var(--p8);
}
.FactorySystemMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.FactoryPlay {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  transform: translate(-50%, -50%);
}
.FactorySystemCopy p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft16);
  line-height: 1.65;
}
.FactorySystemList {
  display: grid;
  gap: var(--p16);
  margin-top: var(--p24);
}
.FactorySystemList article {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--p12);
}
.FactorySystemList .icon {
     width: 28px;
    height: 28px;
    border-radius: var(--p8);
    background: #dce7ff;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.FactorySystemList h3 {
  margin: 0 0 var(--p8);
  font-size: var(--ft14);
  font-weight: 600;
  line-height: 1.4;
}
.FactorySystemList p {
  font-size: var(--ft12);
  line-height: 1.4;
}
.FactoryCore {
  padding: 96px 0 120px;
  background: #edf1f6;
}
.FactoryCoreHead {
  text-align: center;
}
.FactoryCoreGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p24);
  margin-top: var(--p56);
}
.FactoryCoreGrid article {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: var(--white);
}
.FactoryCoreGrid .img_box {
  height: 256px;
  overflow: hidden;
}
.FactoryCoreGrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.FactoryCoreGrid h3 {
  margin: var(--p16) var(--p20) var(--p8);
  font-size: var(--ft16);
  font-weight: 600;
  line-height: 1.4;
}
.FactoryCoreGrid p {
  margin: 0 var(--p20) var(--p20);
  color: var(--muted);
  font-size: var(--ft12);
  line-height: 1.5;
}
.FactoryEquipment {
  padding: 112px 0 80px;
}
.FactoryEquipment .main,
.FactoryQuote .main {
  width: min(1440px, calc(100% - 48px));
}
.FactoryEquipment h2 {
  margin-top: var(--p12);
}
.FactoryEquipmentGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--p24);
  margin-top: var(--p40);
}
.FactoryEquipment table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--p8);
}
.FactoryEquipment caption {
  padding: var(--p16);
  background: var(--navy);
  color: var(--white);
  font-size: var(--ft14);
  font-weight: 500;
}
.FactoryEquipment td {
  padding: var(--p12) var(--p16);
  border-top: 1px solid var(--line);
color: rgba(66, 70, 84, 1);
  font-size: var(--ft16);
  font-weight: 400;
  line-height: 1.4;
}
.FactoryEquipment td:last-child {
  text-align: right;
}
.FactoryEquipment tr:nth-child(even) {
  background: var(--paper);
}
.FactoryCta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--p40);
    margin: 96px auto 0;
    padding: var(--p56) 64px;
    border-radius: var(--p8);
    background: var(--navy);
    color: var(--white);
    flex-direction: column;
}
.FactoryCta h3 {
  margin: 0 0 var(--p16);
  font-size: var(--ft28);
  font-weight: 600;
  line-height: 1.35;
}
.FactoryCta p {
  margin: 0;
  color: #b5c6d9;
  font-size: var(--ft16);
  line-height: 1.55;
}
.FactoryCta .btn {
  font-size: var(--ft14);
}
.FactoryQuote {
  padding: 112px 0;
  background: var(--paper);
}
.FactoryQuote .main {
  display: grid;
  grid-template-columns: 1fr 640px;
  gap: var(--p80);
  align-items: start;
}
.FactoryQuoteIntro p {
  margin: 0 0 var(--p24);
  color: var(--muted);
  font-size: var(--ft16);
  line-height: 1.6;
}
.FactoryQuoteIntro span {
  display: flex;
  align-items: center;
  gap: var(--p12);
  margin-top: var(--p12);
  color: #5b687a;
  font-size: var(--ft14);
  line-height: 1.4;
}
.FactoryQuoteIntro span .iconImg {
  width: 18px;
  height: 18px;
}
.FactoryQuoteForm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--p20) var(--p24);
  padding: var(--p32);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: var(--white);
}
.FactoryQuoteForm label {
  display: grid;
  gap: var(--p8);
  color: #586578;
  font-size: var(--ft12);
  font-weight: 600;
  line-height: 1.4;
}
.FactoryQuoteForm .full {
  grid-column: 1/-1;
}
.FactoryQuoteForm select option{
       font-size: var(--ft14); 
    
    
}
.FactoryQuoteForm input,
.FactoryQuoteForm select,
.FactoryQuoteForm textarea {
  min-height: 44px;
  padding: var(--p12);
  border: 1px solid #c9d5e5;
  border-radius: var(--p8);
  outline: 0;
  font-size: var(--ft14);
  line-height: 1.4;
}
.FactoryQuoteForm textarea {
  min-height: 112px;
  resize: vertical;
}
.FactoryQuoteForm .btn {
  min-height: 48px;
  font-size: var(--ft14);
}
@media only screen and (max-width: 767px) {
    section{
         padding: 30px 0 80px !important;
    }
    .OdmShowcase,
    .OdmOptions {
    padding: 30px 0;
 
}
    .OdmBrand {
    padding: 30px 0 30px;
   
}
.OdmProduction {
    padding: 30px 0;
    background: #fff;
}
    .AppSpotlight {
    padding: 39px 0;
    
}
    .AppPortfolio {
    padding: 36px 0;
   
}
  .FactoryHero {
    min-height: 520px;
  }
  .FactoryHero .main {
    padding-top: var(--p80);
  }
  .FactoryHeroCopy {
    width: auto;
  }
  .FactoryHero h1 {
    font-size: var(--ft40);
  }
  .FactoryHero p br,
  .FactorySystemCopy p br,
  .FactoryQuoteIntro p br,
  .FactoryCta p br {
    display: none;
  }
  .FactoryStats {
    width: calc(100% - 32px);
    margin-top: calc(var(--p40) * -1);
  }
  .FactoryStatsGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--p24);
  }
  .FactoryStatsGrid div {
    border: 0;
  }
  .FactoryAreaGrid,
  .FactoryCoreGrid,
  .FactoryEquipmentGrid,
  .FactoryQuote .main,
  .FactorySystem .main {
    grid-template-columns: 1fr;
  }
  .FactoryAreaBlank {
    height: 260px;
  }
  .FactorySystem .main,
  .FactoryQuote .main {
    gap: var(--p40);
  }
  .FactorySystemMedia .img_box {
    height: 280px;
  }
  .FactoryCoreGrid {
    gap: var(--p20);
  }
  .FactoryCta {
    display: block;
    padding: var(--p32);
  }
  .FactoryCta .btn {
    margin-top: var(--p24);
  }
  .FactoryQuoteForm {
    grid-template-columns: 1fr;
  }
  .FactoryQuoteForm .full {
    grid-column: auto;
  }
}
.FaqHero {
  min-height: 339px;
  background: var(--navy);
  color: var(--white);
}
.FaqHero .main {
  width: min(1360px, calc(100% - 48px));
  padding-top: 64px;
}
.FaqCrumbs {
  display: flex;
  align-items: center;
  gap: var(--p12);
  color: #a9bdcf;
  font-size: var(--ft14);
  line-height: 1.43;
}
.FaqCrumbArrow {
  width: 8px;
  height: 12px;
}
.FaqHero h1 {
  margin: var(--p24) 0 var(--p16);
  font-size: var(--ft48);
  font-weight: 600;
  line-height: 1.2;
}
.FaqHero p {
  margin: 0;
  color: #b7c5d4;
  font-size: var(--ft16);
  line-height: 1.625;
}
.FaqFilters {
  height: 87px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.FaqFilters .main {
  display: flex;
  width: min(1360px, calc(100% - 48px));
  height: 100%;
  align-items: center;
}
.FaqFilters .tabs {
  gap: var(--p16);
}
.FaqFilters .tabs button {
  padding: 8px var(--p24);
  border-radius: var(--p24);
  font-size: var(--ft14);
  line-height: 1.43;
}
.FaqAccordion {
  padding: 96px 0 74px;
  background: var(--paper);
}
.FaqAccordion .main {
  width: min(816px, calc(100% - 48px));
}
.FaqAccordion .faqList {
  max-width: none;
  gap: var(--p16);
}
.FaqAccordion .faqItem {
  border-radius: var(--p8);
  box-shadow: none;
}
.FaqAccordion .faqItem summary {
  padding: var(--p24);
  font-size: var(--ft20);
  font-weight: 500;
  line-height: 1.4;
}
.FaqAccordion .faqItem summary:after {
  color: #728093;
}
.FaqCta {
  min-height: 555px;
  padding: 96px 0;
  background: #e7eaef;
  text-align: center;
}
.FaqCta .main {
  width: min(720px, calc(100% - 48px));
}
.FaqCtaIcon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin: 0 auto var(--p24);
  border-radius: 50%;
  background: #d8e5fb;
}
.FaqCta h2 {
  margin: 0 0 var(--p16);
  font-size: var(--ft36);
  font-weight: 600;
  line-height: 1.3;
}
.FaqCta p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft16);
  line-height: 1.6;
}
.FaqCta div:last-child {
  display: flex;
  justify-content: center;
  gap: var(--p16);
  margin-top: var(--p32);
}
.FaqCta .btn {
  min-width: 176px;
  font-size: var(--ft16);
}
@media only screen and (max-width: 767px) {
  .FaqHero h1 {
    font-size: var(--ft40);
  }
  .FaqHero p br,
  .FaqCta p br {
    display: none;
  }
  .FaqFilters {
    height: auto;
    padding: var(--p16) 0;
  }
  .FaqFilters .tabs {
    gap: var(--p8);
  }
  .FaqFilters .tabs button {
    padding: 8px var(--p16);
  }
  .FaqAccordion {
    padding: var(--p56) 0;
  }
  .FaqAccordion .faqItem summary {
    font-size: var(--ft16);
  }
  .FaqCta {
    min-height: 0;
    padding: var(--p80) 0;
  }
  .FaqCta div:last-child {
    flex-direction: column;
  }
  .FaqCta .btn {
    width: 100%;
  }
}
.OdmDevHero {
  min-height: 520px;
  padding-top: 96px;
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.OdmDevHero .main,
.OdmCapabilities .main,
.OdmJourney .main,
.OdmSupport .main,
.OdmCases .main {
  width: min(1360px, calc(100% - 48px));
}
.OdmDevCrumbs {
  color: #a9bccf;
  font-size: var(--ft12);
  line-height: 1.4;
}
.OdmDevHero h1 {
  margin: var(--p24) 0 var(--p16);
  font-size: var(--ft48);
  font-weight: 600;
  line-height: 1.2;
}
.OdmDevHero p {
  margin: 0;
  color: #bac9d8;
  font-size: var(--ft16);
  line-height: 1.6;
}
.OdmDevHero .btn {
  margin-top: var(--p24);
  font-size: var(--ft14);
}
.OdmCapabilities {
  padding: 96px 0;
}
.OdmDevHead {
  text-align: center;
}
.OdmDevHead .eyebrow,
.OdmSupport .eyebrow,
.OdmCases .eyebrow {
    color: var(--blue);
    font-size: var(--ft17);
    font-weight: 400;
    letter-spacing: 1px;
}
.OdmDevHead h2,
.OdmJourney h2,
.OdmSupport h2,
.OdmCases h2 {
  margin: var(--p16) 0 var(--p40);
  font-size: var(--ft36);
  font-weight: 600;
  line-height: 1.3;
}
.OdmCapabilityGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p20);
}
.OdmCapabilityGrid article {
  min-height: 188px;
  padding: var(--p24);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: var(--white);
}
.OdmCapabilityGrid .icon,
.OdmSupportCopy .icon {
  width: 25px;
    height: 25px;
    border-radius: var(--p8);
  background: unset;
}
.OdmCapabilityGrid h3 {
  margin: var(--p16) 0 var(--p8);
  font-size: var(--ft16);
  font-weight: 600;
}
.OdmCapabilityGrid p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft12);
  line-height: 1.5;
}
.OdmJourney {
  padding: 96px 0;
  background: #edf1f6;
  text-align: center;
}
.OdmJourney h2 {
  margin-bottom: var(--p16);
}
.OdmJourney > .main > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.5;
}
.OdmJourneySteps {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: var(--p56);
}
.OdmJourneySteps article {
  position: relative;
}
.OdmJourneySteps article:not(:last-child):after {
  position: absolute;
  top: 18px;
  right: -50%;
  width: 100%;
  border-top: 1px solid #8bb2e8;
  content: "";
}
.OdmJourneySteps b {
  position: relative;
  z-index: 1;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin: auto;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: var(--ft14);
}
.OdmJourneySteps h3 {
  margin: var(--p16) 0 var(--p8);
  font-size: var(--ft14);
}
.OdmJourneySteps p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft10);
  line-height: 1.35;
}
.OdmSupport {
  padding: 112px 0;
}
.OdmSupport .main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--p80);
  align-items: center;
}
.OdmSupport h2 {
  margin: var(--p16) 0 var(--p32);
}
.OdmSupportCopy article {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--p16);
  margin-top: var(--p20);
}
.OdmSupportCopy h3 {
  margin: 0 0 var(--p8);
  font-size: var(--ft14);
  font-weight: 600;
}
.OdmSupportCopy p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft12);
  line-height: 1.5;
}
.OdmPartners {
  display: flex;
  align-items: center;
  gap: var(--p16);
  margin-top: var(--p32);
  padding: var(--p16);
  border-radius: var(--p8);
  background: #cfe0ff;
  color: #526376;
  font-size: var(--ft12);
}
.OdmPartners span {
  display: flex;
}
.OdmPartners img {
  width: 24px;
  height: 24px;
  margin-right: -6px;
  border: 1px solid var(--white);
  border-radius: 50%;
  object-fit: cover;
}
.OdmSupportMedia {
  position: relative;
  overflow: hidden;
  border-radius: var(--p8);
  box-shadow: 0 10px 28px #09244a2b;
}
.OdmSupportMedia > img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}
.OdmSupportMedia span {
  position: absolute;
  bottom: var(--p20);
  left: var(--p20);
  color: var(--white);
  font-size: var(--ft10);
}
.OdmSupportMedia b {
  font-size: var(--ft14);
}
.OdmCases {
  padding: 96px 0;
  background: var(--navy);
  color: var(--white);
}
.OdmCases .eyebrow {
  color: #8abfff;
}
.OdmCases h2 {
  margin: var(--p12) 0 var(--p40);
}
.OdmCaseGrid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--p20);
}
.OdmCaseGrid article {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: var(--p8);
  background: #173451;
}
.OdmCaseGrid .large {
  grid-row: span 2;
}
.OdmCaseGrid img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}
.OdmCaseGrid article:after {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, #041a32e6);
  content: "";
}
.OdmCaseGrid div {
  position: absolute;
  z-index: 1;
  right: var(--p20);
  bottom: var(--p20);
  left: var(--p20);
}
.OdmCaseGrid small {
  padding: 4px var(--p8);
  background: var(--blue);
  font-size: var(--ft10);
}
.OdmCaseGrid h3 {
  margin: var(--p12) 0 var(--p8);
  font-size: var(--ft18);
  line-height: 1.3;
}
.OdmCaseGrid p {
  margin: 0;
  color: #c5d1df;
  font-size: var(--ft12);
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  .OdmDevHero {
    min-height: 420px;
  }
  .OdmDevHero h1 {
    font-size: var(--ft40);
  }
  .OdmDevHero p br,
  .OdmSupportCopy p br,
  .OdmCases p br {
    display: none;
  }
  .OdmCapabilityGrid,
  .OdmSupport .main,
  .OdmCaseGrid {
    grid-template-columns: 1fr;
  }
  .OdmJourneySteps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--p32);
  }
  .OdmJourneySteps article:after {
    display: none;
  }
  .OdmSupport .main {
    gap: var(--p40);
  }
  .OdmSupportMedia > img {
    height: 300px;
  }
  .OdmCaseGrid .large {
    grid-row: auto;
  }
  .OdmCaseGrid article {
    min-height: 240px;
  }
}
.BrandHero {
  min-height: 520px;
  padding-top: 96px;
  background: var(--navy);
  color: var(--white);
}
.BrandHero .main,
.BrandCapabilities .main,
.BrandWorkflow .main {
  width: min(1360px, calc(100% - 48px));
}
.BrandCrumbs {
  color: #a9bdcf;
  font-size: var(--ft12);
}
.BrandHero h1 {
  margin: var(--p24) 0 var(--p20);
  font-size: var(--ft48);
  font-weight: 600;
  line-height: 1.2;
}
.BrandHero p {
  margin: 0;
  color: #b9c8d7;
  font-size: var(--ft16);
  line-height: 1.6;
}
.BrandCapabilities {
  padding: 96px 0;
}
.BrandHead {
  text-align: center;
}
.BrandHead .eyebrow {
  color: var(--blue);
  font-size: var(--ft12);
  font-weight: 600;
  letter-spacing: 1px;
}
.BrandHead h2,
.BrandPortfolio h2,
.BrandWorkflow > .main > h2,
.BrandCta h2 {
  margin: var(--p16) 0 var(--p40);
  font-size: var(--ft36);
  font-weight: 600;
  line-height: 1.3;
}
.BrandCapabilityGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--p20);
}
.BrandCapabilityGrid article {
  min-height: 190px;
  padding: var(--p24);
  border: 1px solid var(--line);
  border-radius: var(--p8);
  background: var(--white);
}
.BrandCapabilityGrid .icon {
  width: 32px;
  height: 32px;
  border-radius: var(--p8);
  background: #dce7ff;
}
.BrandCapabilityGrid h3 {
  margin: var(--p16) 0 var(--p8);
  font-size: var(--ft16);
  font-weight: 600;
}
.BrandCapabilityGrid p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft12);
  line-height: 1.5;
}
.BrandPortfolio {
  margin-top: 112px;
}
.BrandPortfolio h2 {
  margin: 0 0 var(--p12);
}
.BrandPortfolio > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
}
.BrandPortfolioGrid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--p20);
  margin-top: var(--p40);
}
.BrandPortfolioGrid article {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border-radius: var(--p8);
}
.BrandPortfolioGrid .large {
  grid-row: span 2;
}
.BrandPortfolioGrid img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.BrandPortfolioGrid article:after {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, #051b33d9);
  content: "";
}
.BrandPortfolioGrid div {
  position: absolute;
  z-index: 1;
  right: var(--p24);
  bottom: var(--p24);
  left: var(--p24);
  color: var(--white);
}
.BrandPortfolioGrid h3 {
  margin: 0 0 var(--p8);
  font-size: var(--ft18);
}
.BrandPortfolioGrid p {
  margin: 0;
  font-size: var(--ft12);
}
.BrandWorkflow {
  padding: 112px 0;
  background: var(--paper);
  text-align: center;
}
.BrandWorkflow > .main > h2 {
  margin: 0 0 var(--p16);
}
.BrandWorkflow > .main > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft14);
  line-height: 1.5;
}
.BrandSteps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: var(--p56);
}
.BrandSteps article {
  position: relative;
}
/*.BrandSteps article:not(:last-child):after {*/
/*  position: absolute;*/
/*  top: 18px;*/
/*  right: -50%;*/
/*  width: 100%;*/
/*  border-top: 1px solid #8db5e9;*/
/*  content: "";*/
/*}*/
.BrandSteps b {
  position: relative;
  z-index: 1;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin: auto;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: var(--ft14);
}
.BrandSteps h3 {
  margin: var(--p16) 0 var(--p8);
  font-size: var(--ft14);
}
.BrandSteps p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ft11);
  line-height: 1.4;
}
.BrandCta {
  margin-top: 96px;
  padding: var(--p56);
  border-radius: var(--p8);
  background: var(--navy);
  color: var(--white);
}
.BrandCta h2 {
  margin: 0 0 var(--p16);
}
.BrandCta p {
  margin: 0;
  color: #b8c7d7;
  font-size: var(--ft14);
  line-height: 1.6;
}
.BrandCta .btn {
  margin-top: var(--p24);
  font-size: var(--ft14);
}
@media only screen and (max-width: 767px) {
  .BrandHero {
    min-height: 420px;
  }
  .BrandHero h1 {
    font-size: var(--ft40);
  }
  .BrandHero p br,
  .BrandWorkflow > .main > p br,
  .BrandCta p br {
    display: none;
  }
  .BrandCapabilityGrid,
  .BrandPortfolioGrid {
    grid-template-columns: 1fr;
  }
  .BrandPortfolioGrid .large {
    grid-row: auto;
    min-height: 340px;
  }
  .BrandSteps {
    grid-template-columns: 1fr;
    gap: var(--p32);
  }
  .BrandSteps article:after {
    display: none;
  }
  .BrandCta {
    padding: var(--p32);
  }
}