/* About TJNE — v33 premium company overview only. Navigation, hero and other modules are intentionally untouched. */
.page-about #about-main{padding-top:72px;padding-bottom:80px}
.page-about #about-main>.container.about-card{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr);gap:0;
  padding:0;border:1px solid rgba(34,116,181,.14);border-radius:30px;
  background:#fff;box-shadow:0 28px 72px rgba(22,73,113,.10)
}
.page-about #about-main>.container.about-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 24% 5%,rgba(104,190,244,.10),transparent 28%),linear-gradient(135deg,rgba(255,255,255,.12),transparent 42%)
}
.page-about #about-main .about-copy{position:relative;z-index:1;padding:44px 42px 40px;background:linear-gradient(145deg,#fff 0%,#fbfdff 60%,#f3f9fe 100%)}
.page-about #about-main .about-copy::after{content:"";position:absolute;right:0;top:42px;bottom:42px;width:1px;background:linear-gradient(180deg,transparent,rgba(42,126,191,.18) 16%,rgba(42,126,191,.18) 84%,transparent)}
.page-about #about-main .about-eyebrow-v32{margin:0 0 17px!important;color:#2174b5!important;letter-spacing:.15em!important;font-size:11.5px!important;line-height:1.55!important}
.page-about #about-main .about-copy h2{margin:0 0 18px;font-family:Manrope,Inter,sans-serif;font-size:clamp(38px,3.1vw,54px);line-height:.98;letter-spacing:-.045em;color:#0b2e4e}
.page-about #about-main .about-lead-v32{max-width:720px;margin:0 0 34px!important;font-size:17px!important;line-height:1.76!important;color:#4e687f!important}

/* Capabilities become editorial rows rather than a grid of cards. */
.page-about .about-capability-grid-v32{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:0 0 30px}
.page-about .about-capability-grid-v32 article{position:relative;min-height:94px;padding:16px 0 14px 46px;border:0;border-top:1px solid rgba(38,121,186,.17);border-radius:0;background:transparent;box-shadow:none;transition:none}
.page-about .about-capability-grid-v32 article:nth-child(-n+2){border-top-color:rgba(38,121,186,.24)}
.page-about .about-capability-index-v32{position:absolute;left:0;top:17px;display:grid;place-items:center;width:30px;height:30px;margin:0;border-radius:9px;background:linear-gradient(145deg,#eaf6ff,#d9edfc);border:1px solid rgba(41,133,202,.17);font-size:10px;line-height:1;font-weight:800;letter-spacing:.08em;color:#1d79be}
.page-about .about-capability-grid-v32 strong{display:block;margin:0 0 6px;color:#123b60;font-family:Manrope,Inter,sans-serif;font-size:15px;line-height:1.28}
.page-about .about-capability-grid-v32 small{display:block;color:#6a8197;font-size:12.5px;line-height:1.5}

.page-about .about-project-note-v32{position:relative;margin:0;padding:18px 20px 18px 24px;border-radius:18px;background:linear-gradient(100deg,#0c3b63 0%,#125487 56%,#1777b7 100%);box-shadow:0 14px 30px rgba(13,65,108,.15);overflow:hidden}
.page-about .about-project-note-v32::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#b8ec3d,#58d6d6)}
.page-about .about-project-note-v32::after{content:"";position:absolute;width:150px;height:150px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-58px;top:-82px;box-shadow:0 0 0 28px rgba(255,255,255,.035)}
.page-about .about-project-note-v32>span{position:relative;z-index:1;display:block;margin-bottom:7px;color:#9edcff;font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.page-about .about-project-note-v32 p{position:relative;z-index:1;margin:0!important;color:rgba(255,255,255,.93)!important;font-size:13.5px!important;line-height:1.64!important}

/* Dark data panel creates a stronger brand anchor and removes the 'six white boxes' feel. */
.page-about #about-main .about-metrics-v32{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-content:stretch;
  padding:28px;background:
    radial-gradient(circle at 88% 8%,rgba(89,182,246,.24),transparent 28%),
    radial-gradient(circle at 7% 96%,rgba(79,212,207,.10),transparent 26%),
    linear-gradient(145deg,#092b4a 0%,#0d416d 46%,#126ca9 100%);
  border:0;border-radius:0;box-shadow:none;color:#fff
}
.page-about #about-main .about-metrics-v32::before{content:"";position:absolute;left:28px;top:28px;width:44px;height:3px;border-radius:3px;background:#a9df35}
.page-about #about-main .about-metrics-v32::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 40%),repeating-linear-gradient(135deg,transparent 0 84px,rgba(255,255,255,.018) 84px 85px)}
.page-about #about-main .about-metric-v32{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:154px;padding:22px 20px;border:0;border-radius:0;background:transparent;box-shadow:none;transition:background .2s ease}
.page-about #about-main .about-metric-v32:nth-child(2),
.page-about #about-main .about-metric-v32:nth-child(4),
.page-about #about-main .about-metric-v32:nth-child(6){border-left:1px solid rgba(255,255,255,.12)}
.page-about #about-main .about-metric-v32:nth-child(n+2){border-top:1px solid rgba(255,255,255,.10)}
.page-about #about-main .about-metric-v32:hover{transform:none;background:rgba(255,255,255,.045);box-shadow:none;border-color:rgba(255,255,255,.12)}
.page-about #about-main .about-metric-v32 .metric-icon{display:grid;place-items:center;width:38px;height:38px;margin:0 0 18px;border-radius:12px;background:rgba(255,255,255,.09);color:#8fdcff;border:1px solid rgba(255,255,255,.14);box-shadow:none}
.page-about #about-main .about-metric-v32 strong{display:block;margin:0 0 8px;color:#fff;font-family:Manrope,Inter,sans-serif;font-size:clamp(22px,1.75vw,30px);line-height:1.04;letter-spacing:-.025em}
.page-about #about-main .about-metric-v32 small{display:block;color:rgba(225,240,250,.78);font-size:11.5px;line-height:1.55;font-weight:600}
.page-about #about-main .about-metric-v32.is-featured{grid-column:1/-1;min-height:166px;margin:22px 0 0;padding:26px 22px 24px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:linear-gradient(125deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:none}
.page-about #about-main .about-metric-v32-1{margin-top:24px!important}
.page-about #about-main .about-metric-v32-6{margin-top:0!important;margin-bottom:22px}
.page-about #about-main .about-metric-v32.is-featured .metric-icon{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
.page-about #about-main .about-metric-v32.is-featured strong{font-size:clamp(28px,2.15vw,38px);color:#fff}
.page-about #about-main .about-metric-v32.is-featured small{color:rgba(239,248,255,.82)}
.page-about #about-main .about-metric-v32-1::after{content:"SSE STAR MARKET";position:absolute;right:18px;top:20px;color:rgba(255,255,255,.56);font-size:8.5px;font-weight:800;letter-spacing:.15em}
.page-about #about-main .about-metric-v32-6::after{content:"QUALITY SYSTEM";position:absolute;right:18px;top:20px;color:rgba(255,255,255,.56);font-size:8.5px;font-weight:800;letter-spacing:.15em}

/* R&D image: maintain a clean, cinematic crop and explicitly use the new asset. */
.page-about .page-intro-image{overflow:hidden;border-radius:22px;box-shadow:0 20px 46px rgba(27,76,112,.12)}
.page-about .page-intro-image img{display:block;width:100%;height:100%;min-height:360px;object-fit:cover;object-position:center center}

@media (max-width:1180px){
  .page-about #about-main>.container.about-card{grid-template-columns:1fr;border-radius:26px}
  .page-about #about-main .about-copy{padding:36px 34px 30px}
  .page-about #about-main .about-copy::after{display:none}
  .page-about #about-main .about-metrics-v32{grid-template-columns:repeat(3,minmax(0,1fr));padding:24px}
  .page-about #about-main .about-metric-v32{min-height:145px;border-top:1px solid rgba(255,255,255,.10)!important;border-left:0!important}
  .page-about #about-main .about-metric-v32:nth-child(3n+2),.page-about #about-main .about-metric-v32:nth-child(3n+3){border-left:1px solid rgba(255,255,255,.12)!important}
  .page-about #about-main .about-metric-v32.is-featured{grid-column:auto;margin:0!important;border-radius:0;border:0;background:transparent}
  .page-about #about-main .about-metric-v32-1::after,.page-about #about-main .about-metric-v32-6::after{display:none}
}

@media (max-width:760px){
  .page-about #about-main{padding-top:46px;padding-bottom:56px}
  .page-about #about-main>.container.about-card{border-radius:22px}
  .page-about #about-main .about-copy{padding:28px 20px 24px}
  .page-about #about-main .about-copy h2{font-size:36px;margin-bottom:15px}
  .page-about #about-main .about-lead-v32{font-size:15px!important;line-height:1.67!important;margin-bottom:26px!important}
  .page-about .about-capability-grid-v32{grid-template-columns:1fr;gap:0;margin-bottom:24px}
  .page-about .about-capability-grid-v32 article{min-height:0;padding:14px 0 13px 44px}
  .page-about .about-capability-index-v32{top:14px;width:28px;height:28px}
  .page-about .about-project-note-v32{padding:16px 16px 16px 20px}
  .page-about #about-main .about-metrics-v32{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px}
  .page-about #about-main .about-metric-v32{min-height:134px;padding:18px 12px;border-top:1px solid rgba(255,255,255,.10)!important}
  .page-about #about-main .about-metric-v32:nth-child(even){border-left:1px solid rgba(255,255,255,.12)!important}
  .page-about #about-main .about-metric-v32:nth-child(odd){border-left:0!important}
  .page-about #about-main .about-metric-v32 .metric-icon{width:35px;height:35px;margin-bottom:13px}
  .page-about #about-main .about-metric-v32 strong{font-size:22px}
  .page-about #about-main .about-metric-v32 small{font-size:10.5px;line-height:1.46}
  .page-about .page-intro-image img{min-height:260px}
}

@media (max-width:430px){
  .page-about #about-main .about-copy{padding:25px 16px 22px}
  .page-about #about-main .about-metrics-v32{padding:12px}
  .page-about #about-main .about-metric-v32{min-height:128px;padding:16px 10px}
}

/* v34 refinements — lighter quality feature panel + corporate identity moved to page end */
.page-about #quality .quality-card{
  grid-template-columns:220px minmax(0,1fr) minmax(320px,.95fr);
  align-items:stretch;
  gap:28px;
}
.page-about #quality .quality-copy{
  padding-right:4px;
}
.page-about #quality .quality-features{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-content:start;
  padding:18px;
  border:1px solid rgba(34,116,181,.14);
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0, rgba(120,196,244,.18), transparent 34%),
    radial-gradient(circle at 0 100%, rgba(83,214,202,.10), transparent 26%),
    linear-gradient(180deg,#eef7ff 0%,#f7fbff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.page-about #quality .quality-features::before{
  content:"Quality pillars";
  position:absolute;
  left:18px;
  top:14px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#2a78be;
  opacity:.9;
}
.page-about #quality .quality-features article{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:152px;
  padding:48px 18px 18px;
  border-radius:18px;
  border:1px solid rgba(46,126,191,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96));
  box-shadow:0 14px 30px rgba(28,80,122,.07);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-about #quality .quality-features article::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#76c8f2 0%,#2b7cc4 58%,#a8df35 100%);
  opacity:.9;
}
.page-about #quality .quality-features article:hover{
  transform:translateY(-2px);
  border-color:rgba(46,126,191,.18);
  box-shadow:0 18px 34px rgba(28,80,122,.10);
}
.page-about #quality .quality-features .quality-svg-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#edf7ff,#dceffd);
  border:1px solid rgba(43,124,196,.14);
  color:#2175ba;
  margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.page-about #quality .quality-features .quality-svg-icon svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.page-about #quality .quality-features strong{
  display:block;
  margin:0 0 7px;
  font-family:Manrope,Inter,sans-serif;
  font-size:1rem;
  line-height:1.18;
  color:#123f66;
}
.page-about #quality .quality-features small{
  display:block;
  color:#5f7891;
  font-size:.81rem;
  line-height:1.62;
}
.page-about .identity-strip-section{
  padding-top:26px!important;
  padding-bottom:10px!important;
}

@media (max-width:1100px){
  .page-about #quality .quality-card{
    grid-template-columns:1fr;
    gap:22px;
  }
  .page-about #quality .quality-copy{
    padding-right:0;
  }
  .page-about #quality .quality-features{
    padding:16px;
  }
  .page-about #quality .quality-features::before{
    position:static;
    display:block;
    margin:0 0 4px;
  }
  .page-about #quality .quality-features article{
    min-height:0;
    padding-top:20px;
  }
}

@media (max-width:760px){
  .page-about #quality .quality-features{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px;
    border-radius:20px;
  }
  .page-about #quality .quality-features article{
    min-height:0;
    padding:18px 16px 16px;
    border-radius:16px;
  }
  .page-about #quality .quality-features .quality-svg-icon{
    width:40px;
    height:40px;
    margin-bottom:12px;
  }
}
