
.technical-heading{
  width:100%;
  background:#fff;
  padding:34px 0 20px;
}
.technical-heading h1{
  margin:0 0 0 4.05%;
  color:#0b4d6d;
  font-size:clamp(26px,3.6vw,48px);
  font-weight:750;
  line-height:1;
  user-select:text;
  -webkit-user-select:text;
}
.legacy-technical{
  margin:0;
}

@media(max-width:767px){
  .technical-heading{
    padding:24px 0 14px;
  }
  .technical-heading h1{
    margin:0;
    text-align:center;
    font-size:clamp(24px,6vw,32px);
  }
  
}

.legacy-technical{
  width:100%;
  margin:0;
  padding:0;
  line-height:0;
  background:#fff;
  overflow:hidden;
}
.legacy-technical picture,
.legacy-technical img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
}
@font-face{font-family:Montserrat;src:url('../../../assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:#fff;font-family:Montserrat,Arial,sans-serif;color:#202020}body{overflow-x:hidden;overflow-y:visible}.technical{width:100%;position:relative}.desktop-view{position:relative;width:100%;aspect-ratio:1280/620}.desktop-base{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}.desktop-view h1{position:absolute;left:4.05%;top:6.9%;margin:0;color:#0b4d6d;font-size:clamp(26px,3.6vw,48px);font-weight:750;line-height:1}
.desktop-headings .h{position:absolute;top:42.55%;transform:translate(-50%,-50%);color:#fff;font-size:clamp(11px,1.45vw,19px);font-weight:700;line-height:1.04;text-align:center;white-space:nowrap;user-select:text;-webkit-user-select:text}.desktop-headings .h1{left:12.2%}.desktop-headings .h2{left:23.05%}.desktop-headings .h3{left:33.9%}.desktop-headings .h4{left:44.8%}.desktop-headings .h5{left:55.7%}.desktop-headings .h6{left:66.55%}.desktop-headings .h7{left:77.45%}.desktop-headings .h8{left:88.35%}
.desktop-grid .cell{position:absolute;width:10.85%;transform:translate(-50%,-50%);text-align:center;font-size:clamp(7.5px,.95vw,12.5px);line-height:1.08;font-weight:500;white-space:nowrap;user-select:text}.desktop-grid .cell strong{font-weight:600}.desktop-grid .cell small{display:block;font-size:.58em;font-weight:600;margin-top:.15em}.desktop-grid .c2{left:23.05%}.desktop-grid .c3{left:33.9%}.desktop-grid .c4{left:44.8%}.desktop-grid .c5{left:55.7%}.desktop-grid .c6{left:66.55%}.desktop-grid .c7{left:77.45%}.desktop-grid .c8{left:88.35%}.desktop-grid .r1{top:49.75%}.desktop-grid .r2{top:56.7%}.desktop-grid .r3{top:63.65%}.desktop-grid .r4{top:70.55%}.desktop-grid .r5{top:77.5%}.subbrand{position:absolute;left:12.05%;width:9.5%;text-align:center;color:#5c4034;font-size:clamp(4.8px,.47vw,6.5px);font-weight:650;line-height:1;user-select:text}.subbrand.pp{top:57.85%}.subbrand.film{top:64.78%}
.mobile-view{display:none}
@media(max-width:767px){body{overflow-x:hidden;overflow-y:visible}.desktop-view{display:none}.mobile-view{display:block;position:relative;width:100%;aspect-ratio:500/696;background:#fff;overflow:hidden}.mobile-view>h1{position:absolute;z-index:20;left:0;right:0;top:2.7%;margin:0;text-align:center;color:#0b4d6d;font-size:clamp(20px,6vw,30px);font-weight:750;line-height:1;user-select:text}.slides,.slide{position:absolute;inset:0}.slide{opacity:0;visibility:hidden;transition:opacity .28s ease}.slide.active{opacity:1;visibility:visible}.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}.mobile-copy{position:absolute;inset:0;z-index:4;color:#202020}.mrow{position:absolute;left:24.4%;width:60.4%;text-align:center;user-select:text}.mrow b{display:block;color:#fff;font-size:clamp(10px,3.2vw,16px);line-height:1;font-weight:700;letter-spacing:.31em;padding-left:.31em}.mrow span{display:block;font-size:clamp(12px,4.05vw,20px);line-height:1;font-weight:450;letter-spacing:.16em;padding-left:.16em;white-space:nowrap}.row1{top:13.0%}.row2{top:24.3%}.row3{top:35.65%}.row4{top:46.95%}.row5{top:58.25%}.row6{top:69.55%}.row7{top:80.85%}.mrow b{height:3.4vw;display:flex;align-items:center;justify-content:center}.mrow span{height:7.0vw;display:flex;align-items:center;justify-content:center}.arrow{position:absolute;z-index:30;top:43.5%;transform:translateY(-50%);width:34px;height:48px;border:0;border-radius:18px;background:rgba(255,255,255,.78);color:#0b4d6d;font:600 34px/1 Arial;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.08)}.arrow.prev{left:4px}.arrow.next{right:4px}.dot-controls{position:absolute;z-index:31;bottom:4.5%;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:12px}.dot{display:block;position:relative;flex:0 0 16px;width:16px;height:16px;min-width:16px;min-height:16px;border:1px solid #e3e3e3;border-radius:50%;padding:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;background:#fff;cursor:pointer;line-height:0;vertical-align:middle;filter:drop-shadow(-3px -2px 0 rgba(229,229,229,.95))}.dot.active{background:#0b4d6d;border:2px solid #fff;filter:drop-shadow(-3px -2px 0 rgba(229,229,229,.95))}.slides{touch-action:pan-y}}
@media(max-width:420px){.mrow b{font-size:12px}.mrow span{font-size:15px}.arrow{width:30px;height:44px;font-size:30px}.dot{width:14px;height:14px;min-width:14px;min-height:14px;flex-basis:14px}.dot-controls{gap:11px}}

.desktop-headings .h1{
  line-height:1.02;
  font-size:clamp(10.5px,1.38vw,18px);
}




/* Final approved compact spacing between old and new Technical Details blocks. */
@media (min-width: 768px) {
  .technical {
    margin-top: -172px;
  }
}
@media (max-width: 767px) {
  .technical {
    margin-top: 12px;
  }
}


@media (max-width: 767px) {
  .legacy-technical {
    border-bottom-left-radius: 42px;
    border-bottom-right-radius: 42px;
    overflow: hidden;
  }
  .legacy-technical picture,
  .legacy-technical img {
    border-bottom-left-radius: 42px;
    border-bottom-right-radius: 42px;
  }
}


/* v36 mobile Technical Details alignment */
@media (max-width: 767px) {
  .mobile-view {
    aspect-ratio: 500 / 696;
    overflow: hidden;
  }

  .mrow {
    left: 24.4%;
    width: 60.4%;
  }

  .mrow b {
    height: 5.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mrow span {
    height: 10.6vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .row1 { top: 12.07%; }
  .row2 { top: 23.42%; }
  .row3 { top: 34.63%; }
  .row4 { top: 45.83%; }
  .row5 { top: 57.04%; }
  .row6 { top: 68.25%; }
  .row7 { top: 79.45%; }

  .arrow {
    top: 50%;
  }
}



/* === v46 SMART Technical Overview: real selectable text on clean artwork === */
.new-overview{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  line-height:normal;
  background:#fff;
  overflow:hidden;
}
.new-overview .overview-art,
.new-overview .overview-art img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
}
.new-overview .overview-copy{
  position:absolute;
  inset:0;
  z-index:4;
}
.desktop-overview-copy{display:block}
.mobile-overview-copy{display:none}

.overview-item{
  position:absolute;
  width:24.7%;
  color:#0b4d6d;
  user-select:text;
  -webkit-user-select:text;
}
.overview-item.left{left:12.1%}
.overview-item.right{left:43.8%}
.overview-item h2{
  margin:0 0 .20em;
  color:#0b4d6d;
  font-size:clamp(14px,1.48vw,30px);
  line-height:1.04;
  font-weight:760;
  letter-spacing:-.02em;
}
.overview-item p{
  margin:0;
  color:#0b4d6d;
  font-size:clamp(9px,.82vw,17px);
  line-height:1.13;
  font-weight:560;
}
.overview-item.item-1,.overview-item.item-5{top:15.0%}
.overview-item.item-2,.overview-item.item-6{top:34.7%}
.overview-item.item-3,.overview-item.item-7{top:54.2%}
.overview-item.item-4,.overview-item.item-8{top:73.8%}

@media (min-width:768px){
  .technical{margin-top:10px !important}
}

@media (max-width:767px){
  .new-overview{
    border-radius:0 !important;
    overflow:hidden;
  }
  .new-overview picture,
  .new-overview img{
    border-radius:0 !important;
  }
  .desktop-overview-copy{display:none}
  .mobile-overview-copy{display:block}

  .mobile-overview-item{
    position:absolute;
    left:29.0%;
    width:63.5%;
    color:#0b4d6d;
    user-select:text;
    -webkit-user-select:text;
  }
  .mobile-overview-item h2{
    margin:0 0 .22em;
    color:#0b4d6d;
    font-size:clamp(15px,3.55vw,25px);
    line-height:1.05;
    font-weight:760;
    letter-spacing:-.02em;
  }
  .mobile-overview-item p{
    margin:0;
    color:#0b4d6d;
    font-size:clamp(10px,2.35vw,17px);
    line-height:1.22;
    font-weight:540;
  }

  .m-item-1{top:12.4%}
  .m-item-2{top:24.2%}
  .m-item-3{top:36.0%}
  .m-item-4{top:47.7%}
  .m-item-5{top:59.6%}
  .m-item-6{top:71.3%}
  .m-item-7{top:83.0%}

  .technical{margin-top:12px !important}
}

/* === v46 mobile carousel dots: true horizontal alignment === */
@media (max-width:767px){
  .dot-controls{
    position:absolute;
    z-index:31;
    left:50%;
    bottom:4.5%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    height:20px;
    line-height:0;
  }
  .dot{
    display:block;
    flex:0 0 14px;
    width:14px;
    height:14px;
    min-width:14px;
    min-height:14px;
    margin:0;
    padding:0;
    border:0;
    border-radius:50%;
    appearance:none;
    -webkit-appearance:none;
    background:#fff;
    box-sizing:border-box;
    box-shadow:0 0 0 2px #e7e7e7;
    filter:none;
    transform:none;
    vertical-align:middle;
  }
  .dot.active{
    width:14px;
    height:14px;
    min-width:14px;
    min-height:14px;
    flex-basis:14px;
    background:#0b4d6d;
    border:0;
    box-shadow:0 0 0 2px #fff,0 0 0 3px #e7e7e7;
    filter:none;
    transform:none;
  }
}
@media(max-width:420px){
  .dot-controls{gap:11px;height:18px}
  .dot,.dot.active{
    width:13px;
    height:13px;
    min-width:13px;
    min-height:13px;
    flex-basis:13px;
  }
}



/* === v47 layout correction === */
@media (min-width:768px){
  /* Restore the approved compact transition into the comparison table. */
  .technical{
    margin-top:-172px !important;
  }
}

@media (max-width:767px){
  .mobile-overview-item{
    left:32.5%;
    width:62.0%;
  }

  .mobile-overview-item h2{
    margin:0 0 .20em;
    font-size:clamp(13px,3.25vw,22px);
    line-height:1.04;
    font-weight:760;
  }

  .mobile-overview-item p{
    margin:0;
    font-size:clamp(8.5px,1.70vw,12.5px);
    line-height:1.13;
    font-weight:540;
  }

  /* Match each copy block to the vertical center of its designer icon. */
  .m-item-1{top:16.7%}
  .m-item-2{top:28.4%}
  .m-item-3{top:40.1%}
  .m-item-4{top:51.8%}
  .m-item-5{top:63.6%}
  .m-item-6{top:75.2%}
  .m-item-7{top:86.8%}
}



/* === v48 mobile technical overview reference layout === */
@media (max-width:767px){
  .mobile-overview-item{
    left:32.5%;
    width:62.0%;
  }

  .mobile-overview-item h2{
    margin:0 0 .18em;
    font-size:clamp(13px,3.25vw,22px);
    line-height:1.04;
    font-weight:760;
  }

  .mobile-overview-item p{
    margin:0;
    font-size:clamp(8px,1.66vw,12px);
    line-height:1.12;
    font-weight:540;
  }

  .m-item-1{top:18.1%}
  .m-item-2{top:29.8%}
  .m-item-3{top:41.7%}
  .m-item-4{top:53.4%}
  .m-item-5{top:65.0%}
  .m-item-6{top:76.6%}
  .m-item-7{top:88.0%}
}



/* === v49 mobile-only icon/text spacing refinement === */
@media (max-width:767px){
  .mobile-overview-item{
    left:34.1%;
    width:63.9%;
  }

  .mobile-overview-item h2{
    font-size:clamp(12.5px,3.08vw,21px);
  }

  .mobile-overview-item p{
    font-size:clamp(7.8px,1.58vw,11.5px);
    line-height:1.10;
  }

  /* Slightly tighter vertical placement to preserve bottom breathing room. */
  .m-item-1{top:17.9%}
  .m-item-2{top:29.4%}
  .m-item-3{top:41.0%}
  .m-item-4{top:52.5%}
  .m-item-5{top:64.0%}
  .m-item-6{top:75.4%}
  .m-item-7{top:86.6%}
}



/* === v50 mobile-only correction: icons left + wider copy === */
@media (max-width:767px){
  .mobile-overview-item{
    left:30.8%;
    width:67.0%;
  }

  .mobile-overview-item h2{
    font-size:clamp(12.5px,3.08vw,21px);
  }

  .mobile-overview-item p{
    font-size:clamp(7.8px,1.58vw,11.5px);
    line-height:1.10;
  }
}



/* === v51 mobile-only icon separation === */
@media (max-width:767px){
  .mobile-overview-item{
    left:31.6%;
    width:66.0%;
  }
}



/* === v52 mobile-only fit correction === */
@media (max-width:767px){
  .mobile-overview-item{
    left:27.0%;
    width:71.0%;
  }

  .mobile-overview-item h2{
    font-size:clamp(12px,2.95vw,20px);
    line-height:1.03;
    margin-bottom:.16em;
  }

  .mobile-overview-item p{
    font-size:clamp(7.4px,1.48vw,11px);
    line-height:1.08;
  }

  .m-item-1{top:17.3%}
  .m-item-2{top:28.4%}
  .m-item-3{top:39.6%}
  .m-item-4{top:50.8%}
  .m-item-5{top:62.0%}
  .m-item-6{top:73.2%}
  .m-item-7{top:84.2%}
}



/* === v53 mobile text-column correction only === */
@media (max-width:767px){
  .mobile-overview-item{
    left:23.8%;
    width:74.2%;
  }
}



/* === v54 final mobile Technical Details artwork === */
@media (min-width:768px){
  .technical-heading h1{
    margin:0;
    text-align:center;
  }
}

@media (max-width:767px){
  /* The supplied mobile image already contains the Technical Details heading
     and all SMART technical wording, so hide the duplicate HTML elements. */
  .technical-heading{
    display:none;
  }

  .mobile-overview-copy{
    display:none !important;
  }

  .new-overview,
  .new-overview picture,
  .new-overview picture img,
  .legacy-technical,
  .legacy-technical picture,
  .legacy-technical img{
    border-radius:0 !important;
  }

  .new-overview .overview-art img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .technical{
    margin-top:12px !important;
  }
}



/* === v55 desktop Koreantec sublabel alignment only === */
@media (min-width:768px){
  .subbrand{
    left:12.05%;
    width:9.5%;
    text-align:center;
    font-size:clamp(5px,.46vw,6.4px);
    line-height:1;
    font-weight:650;
    transform:translateY(-50%);
  }

  .subbrand.pp{
    top:57.25%;
  }

  .subbrand.film{
    top:64.18%;
  }
}



/* === v56 desktop Koreantec sublabels: left and directly below logo === */
@media (min-width:768px){
  .subbrand{
    left:10.55%;
    width:9.0%;
    text-align:left;
    font-size:clamp(5px,.44vw,6.2px);
    line-height:1;
    font-weight:650;
    transform:none;
  }

  .subbrand.pp{
    top:57.65%;
  }

  .subbrand.film{
    top:64.58%;
  }
}



/* === v57: Koreantec sublabels clearly below the baked wordmarks === */
@media (min-width:768px){
  .subbrand{
    left:7.55%;
    width:9.55%;
    text-align:center;
    color:#5c4034;
    font-size:clamp(5px,.44vw,6.2px);
    line-height:1;
    font-weight:650;
    transform:none;
    white-space:nowrap;
  }

  /* First Koreantec row: label beneath the logo, not on it */
  .subbrand.pp{
    top:59.25%;
  }

  /* Second Koreantec row: label beneath the logo, not on it */
  .subbrand.film{
    top:66.20%;
  }
}
