/* =====================================================================
   Norda Website UI Kit — page-level styles
   Built on tokens from colors_and_type.css
   ===================================================================== */

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: var(--lh-normal); }
img  { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; transition: color var(--t-base); }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
ul   { list-style: none; padding: 0; margin: 0; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-6); }
.section   { padding: var(--sp-9) 0; }
.section.tight { padding: var(--sp-7) 0; }
.bg-alt    { background: var(--bg-alt); }
.bg        { background: var(--bg); }
.bg-dark   { background: var(--bg-dark); color: #fff; }

/* ---------- HEADER ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 100;
  display: flex; align-items: center; padding: 0 var(--sp-7);
  transition: background var(--t-base), box-shadow var(--t-base);
  background: transparent;
}
.site-header.scrolled { background: #fff; box-shadow: var(--shadow-1); }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--sp-2); position: relative; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 50px; }
.brand img { height: 44px; width: auto; display: block; }
.brand .light { display: block; }
.brand .dark  { display: none; }
.site-header.scrolled .brand .light { display: none; }
.site-header.scrolled .brand .dark  { display: block; }
.brand-text { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; letter-spacing: .01em; }
.site-header.scrolled .brand-text { color: var(--fg); }
.brand-text .o { color: var(--norda-orange); }

.main-nav { display: flex; gap: var(--sp-6); align-items: center; position: absolute; left: 50%; transform: translateX(-50%); }
.main-nav a {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  position: relative; padding: 6px 0;
}
.site-header.scrolled .main-nav a { color: var(--fg); }
.main-nav a:hover { color: var(--norda-orange); }
.main-nav a.active { color: var(--norda-orange); }
.main-nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--norda-orange); }

.header-actions { display: flex; align-items: center; gap: var(--sp-5); }
.lang { display: flex; gap: 4px; font-size: 11px; font-weight: 600; }
.lang a { padding: 3px 8px; border-radius: var(--r-sm); color: rgba(255,255,255,0.7); cursor:pointer; }
.site-header.scrolled .lang a { color: var(--fg-muted); }
.lang a.active { background: #fff; color: var(--norda-blue); }
.site-header.scrolled .lang a.active { background: var(--norda-blue); color: #fff; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 12px 28px; font-size: 13px; font-weight: 600;
  border-radius: var(--r-sm); border: 0; cursor: pointer;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  transition: background var(--t-base), color var(--t-base), transform var(--t-base), border-color var(--t-base);
  font-family: inherit;
}
.btn-primary { background: var(--norda-orange); color: #fff; }
.btn-primary:hover { background: var(--norda-orange-dark); transform: translateY(-1px); }
.btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-outline-dark { background: transparent; color: var(--norda-blue); border: 1px solid var(--norda-blue); }
.btn-outline-dark:hover { background: var(--norda-blue); color: #fff; }

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh; background: var(--norda-blue); position: relative; overflow: hidden;
  display: flex; align-items: center; padding: 0 var(--sp-7);
}
.hero::before {
  content:""; position:absolute; top:-50%; right:-20%; width:80%; height:200%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.05) 0%, transparent 70%);
  pointer-events:none;
}

/* ---------- PRODUCT HERO (featured product, 1st screen) ---------- */
.product-hero {
  min-height: 100vh; background: var(--norda-blue); position: relative; overflow: hidden;
  display: flex; flex-direction: column; padding: var(--header-h) var(--sp-7) var(--sp-6);
}
.product-hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 20%, rgba(231,143,51,0.18) 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events:none;
}
.product-hero-inner {
  flex: 1; max-width: var(--container-max); width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); align-items: center;
  position: relative; z-index: 1;
}
.product-hero-text { color: #fff; }
.product-hero-text .eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--norda-orange);
  padding: 6px 14px; border: 1px solid rgba(231,143,51,0.4); border-radius: 999px;
  background: rgba(231,143,51,0.08);
  margin-bottom: var(--sp-4);
}
.product-hero-text .eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--norda-orange);
  box-shadow: 0 0 0 4px rgba(231,143,51,0.25);
}
.product-hero-text h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 4.8vw, 64px); line-height: 1.05;
  color: #fff; margin: 0 0 var(--sp-4); letter-spacing: -0.015em; text-wrap: balance;
}
.product-hero-text h1.h1-long {
  font-size: clamp(30px, 2.9vw, 42px); line-height: 1.15; letter-spacing: -0.01em;
}
.product-hero-text h1.h1-long .method {
  display: block; font-weight: 500; color: rgba(255,255,255,0.6);
  font-size: 0.7em; letter-spacing: 0.01em; margin-top: 6px;
}
.product-hero-text h1 .accent { color: var(--norda-orange); }
.product-hero-text .lede {
  font-size: var(--fs-lg); color: rgba(255,255,255,0.78); line-height: 1.65;
  max-width: 540px; margin: 0 0 var(--sp-5);
}
.product-hero-specs {
  display: flex; align-items: stretch; gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: var(--sp-5);
}
.product-hero-specs .spec { display: flex; flex-direction: column; gap: 4px; }
.product-hero-specs .spec-num {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl);
  color: #fff; line-height: 1;
}
.product-hero-specs-5 { gap: var(--sp-4); }
.product-hero-specs-5 .spec-num { font-size: 26px; letter-spacing: -0.01em; }
.product-hero-specs-5 .spec-unit { font-size: 0.65em; font-weight: 600; color: rgba(255,255,255,0.65); margin-left: 1px; }
.product-hero-specs .spec-lbl {
  font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.product-hero-specs .spec-divider { width: 1px; background: rgba(255,255,255,0.12); }
.product-hero .ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.product-hero .data-source {
  margin: var(--sp-3) 0 0; max-width: 540px;
  font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.5);
  font-style: italic;
}

.product-hero-visual { position: relative; }
.visual-frame {
  position: relative; aspect-ratio: 1/1; max-width: 540px; margin-left: auto;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
}
.visual-frame-clean {
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 16px;
  padding: 0;
  aspect-ratio: 4/3;
}
.visual-packshot {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: var(--r-xl);
  box-shadow: 0 40px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
}
.visual-pill {
  position: absolute; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9); font-size: var(--fs-sm); font-weight: 500;
  backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: 6px;
}
.visual-pill .pending {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.visual-pill-tl { top: 24px;    left: 24px; }
.visual-pill-tr { top: 24px;    right: 24px; }
.visual-pill-bl { bottom: 24px; left: 24px; }
.visual-pill-br { bottom: 24px; right: 24px; }
.visual-product { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.visual-product-stack { position: relative; width: 220px; height: 280px; }
.visual-product-box {
  position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(160deg, #ffffff 0%, #e8ecf3 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.04);
}
.visual-product-box::before {
  content:""; position:absolute; left:0; right:0; top: 38%; height: 22%;
  background: linear-gradient(180deg, var(--norda-blue), oklch(38% 0.12 258));
}
.visual-product-box::after {
  content:""; position:absolute; left:24px; right:24px; bottom:24px;
  height: 6px; border-radius: 3px; background: var(--norda-orange);
}
.visual-product-shadow {
  position:absolute; left:10%; right:10%; bottom:-18px; height:16px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
  filter: blur(4px);
}
.visual-product-label {
  font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.product-hero-scroll {
  position: relative; z-index: 1; align-self: center;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: rgba(255,255,255,0.6);
  text-decoration: none; cursor: pointer;
  padding: 12px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  transition: color .2s, border-color .2s, transform .2s;
}
.product-hero-scroll:hover {
  color: #fff; border-color: rgba(255,255,255,0.35); transform: translateY(2px);
}
.product-hero-scroll svg { animation: ph-bounce 2s ease-in-out infinite; }
@keyframes ph-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@media (max-width: 900px) {
  .product-hero-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .product-hero-visual .visual-frame { margin: 0 auto; max-width: 420px; }
}
.hero-inner { max-width: var(--container-max); width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; position: relative; z-index: 1; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4.4vw, 56px); line-height: 1.08; color: #fff; margin: 0 0 var(--sp-5); letter-spacing: -0.01em; text-wrap: balance; }
.hero h1 .accent { color: var(--norda-orange); }
.hero p  { font-size: var(--fs-lg); color: rgba(255,255,255,0.8); line-height: 1.7; max-width: 480px; margin: 0 0 var(--sp-6); }
.hero p.hero-justify,
.profile-justify,
.value-body,
.story-text p,
.v-card p,
.hero p { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; text-wrap: pretty; }
.hero .ctas { display: flex; gap: var(--sp-4); }

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.hero-grid .frame { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/4; background: rgba(255,255,255,0.04); }
.hero-grid .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hero-grid .frame:hover img { transform: scale(1.05); }
.hero-grid .frame:nth-child(2) { margin-top: var(--sp-7); }
.hero-grid .frame:nth-child(3) { margin-top: calc(var(--sp-7) * -1); }

/* ---------- PAGE BANNER ---------- */
.page-banner { height: 280px; background: var(--norda-blue); display: flex; align-items: center; justify-content: center; text-align: center; padding-top: var(--header-h); position: relative; overflow: hidden; }
.page-banner > div { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.page-banner::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,0.05) 0%, transparent 60%); }
.page-banner h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4xl); color: #fff; margin: 0; position:relative; line-height: 1.1; }
.page-banner .crumb { color: rgba(255,255,255,0.7); font-size: var(--fs-sm); position: relative; }
.page-banner .crumb a { color: rgba(255,255,255,0.7); cursor:pointer; }
.page-banner .crumb a:hover { color: var(--norda-orange); }
.page-banner .crumb span { margin: 0 var(--sp-2); }

/* ---------- SECTION TITLE ---------- */
.sec-title { text-align: center; margin-bottom: var(--sp-7); }
.sec-title h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4xl); color: var(--norda-blue); margin: 0 0 var(--sp-2); }
.sec-title .sub { font-size: var(--fs-lg); color: var(--fg-muted); margin: 0; }
.sec-title hr  { border: 0; width: 60px; height: 3px; background: var(--norda-orange); margin: var(--sp-4) auto 0; }

/* ---------- HIGHLIGHTS GRID ---------- */
.highlights { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-6); }
.h-card { background: #fff; border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-1); transition: box-shadow var(--t-base), transform var(--t-base); display: flex; flex-direction: column; }
.h-card:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }
.h-card.feature { background: var(--norda-blue); color: #fff; grid-row: span 2; }
.h-card .plate { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--norda-orange); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5); }
.h-card.feature .plate { background: rgba(255,255,255,0.15); }
.h-card h3 { font-family: var(--font-body); font-size: var(--fs-xl); font-weight: 600; margin: 0 0 var(--sp-2); color: var(--fg); }
.h-card.feature h3 { color: #fff; font-size: var(--fs-2xl); font-family: var(--font-display); }
.h-card p { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.7; margin: 0; flex: 1; }
.h-card.feature p { color: rgba(255,255,255,0.85); font-size: var(--fs-base); }

/* ---------- STATS ---------- */
.stats { background: var(--bg-alt); }
.stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); text-align: center; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-6); }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4xl); color: var(--norda-blue); line-height: 1; }
.stat .lbl { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: var(--sp-1); }

/* ---------- PRODUCT SHOWCASE (3-product layout) ---------- */
.product-showcase-wrap { padding-top: var(--sp-9); }
.product-showcase { display: flex; flex-direction: column; gap: var(--sp-9); margin-top: var(--sp-7); }
.p-show {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8);
  align-items: center; padding: var(--sp-8) var(--sp-7);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden;
}
.p-show--reverse { grid-template-columns: 1fr 1.05fr; }
.p-show--reverse .p-show__media { order: 2; }
.p-show--reverse .p-show__body  { order: 1; }

.p-show--blue   { background: linear-gradient(135deg, var(--norda-blue) 0%, var(--norda-blue-dark) 100%); color: #fff; }
.p-show--sand   { background: var(--bg-alt); color: var(--fg); }
.p-show--orange { background: linear-gradient(135deg, #fff7ec 0%, #fde2c2 100%); color: var(--fg); }
.p-show--blue::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(231,143,51,0.18), transparent 55%);
  pointer-events: none;
}

.p-show__media { display: flex; align-items: center; justify-content: center; min-height: 380px; position: relative; z-index: 1; }
.p-show__media img { max-width: 100%; max-height: 460px; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.18)); }

.p-show__body { position: relative; z-index: 1; }
.p-show__eyebrow {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--norda-orange); margin-bottom: var(--sp-3);
}
.p-show--sand .p-show__eyebrow { color: var(--norda-orange-dark); }
.p-show__name { font-family: var(--font-display); font-size: clamp(28px, 2.4vw, 36px); line-height: 1.1; margin: 0 0 var(--sp-2); }
.p-show__tagline { font-size: var(--fs-base); font-weight: 500; opacity: 0.95; margin: 0 0 var(--sp-3); }
.p-show__desc { font-size: var(--fs-sm); line-height: 1.65; opacity: 0.82; margin: 0 0 var(--sp-4); max-width: 52ch; }
.p-show--blue .p-show__desc { color: rgba(255,255,255,0.85); }

.p-show__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-5); margin: 0 0 var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid currentColor; opacity: 1; }
.p-show--blue .p-show__specs { border-color: rgba(255,255,255,0.18); }
.p-show--sand .p-show__specs, .p-show--orange .p-show__specs { border-color: rgba(0,0,0,0.1); }
.p-show__spec dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.65; margin-bottom: 4px; }
.p-show__spec dd { font-family: var(--font-display); font-size: var(--fs-base); margin: 0; }

.p-show--blue .btn-primary { background: var(--norda-orange); border-color: var(--norda-orange); }
.p-show--blue .btn-primary:hover { background: var(--norda-orange-light); border-color: var(--norda-orange-light); }

@media (max-width: 900px) {
  .p-show, .p-show--reverse { grid-template-columns: 1fr; }
  .p-show--reverse .p-show__media { order: 0; }
  .p-show--reverse .p-show__body  { order: 1; }
}

/* ---------- PRODUCT CARDS ---------- */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-6); }
.products-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.p-card { background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow var(--t-base), transform var(--t-base); cursor: pointer; }
.p-card:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); }
.p-card .img { height: 200px; display: flex; align-items: center; justify-content: center; background: var(--bg-alt); }
.p-card .img svg { color: var(--norda-blue); opacity: .35; }
.p-card .body { padding: var(--sp-5); }
.p-card h3 { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 600; margin: 0 0 var(--sp-1); color: var(--fg); }
.p-card p  { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.6; margin: 0; }
.p-card .more { display: block; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; color: var(--norda-blue); }
.p-card:hover .more { color: var(--norda-orange); }

/* ---------- NEWS ---------- */
.news-preview-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-6); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-6); }
.n-card { background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow var(--t-base), transform var(--t-base); cursor: pointer; }
.n-card:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }
.n-card .thumb { height: 200px; background: var(--bg-alt); overflow: hidden; }
.news-preview-grid .n-card:first-child .thumb { height: 280px; }
.n-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.n-card .body { padding: var(--sp-5); }
.n-card .date { font-size: var(--fs-xs); color: var(--fg-subtle); margin-bottom: var(--sp-2); letter-spacing: .03em; }
.n-card h3 { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 600; margin: 0 0 var(--sp-2); color: var(--fg); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.n-card p  { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.news-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }

.pagination { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-7); }
.pagination button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: var(--fs-sm); transition: all var(--t-base); }
.pagination button.active, .pagination button:hover { background: var(--norda-blue); color: #fff; border-color: var(--norda-blue); }

/* News article detail */
.news-article { max-width: 880px; }
.news-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--fg-muted);
  cursor: pointer; margin-bottom: var(--sp-5);
  transition: color var(--t-base);
}
.news-back:hover { color: var(--norda-orange); }
.news-article-meta {
  font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--norda-orange); font-weight: 600; margin-bottom: var(--sp-3);
}
.news-article-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.2;
  color: var(--norda-blue); margin: 0 0 var(--sp-6); letter-spacing: -0.01em;
}
.news-article-cover {
  border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9;
  background: var(--bg-alt); margin-bottom: var(--sp-6);
}
.news-article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-article-body p {
  font-size: var(--fs-md); line-height: 1.8; color: var(--fg);
  margin: 0 0 var(--sp-5);
}
.news-quote {
  margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--norda-orange);
  background: oklch(97% 0.01 258); border-radius: 4px;
}
.news-quote p {
  font-size: var(--fs-md); line-height: 1.75; color: var(--fg);
  font-style: italic; margin: 0 0 var(--sp-3);
}
.news-quote cite {
  display: block; font-style: normal; font-size: var(--fs-sm);
  color: var(--fg-muted); font-weight: 500;
}
.news-figure {
  margin: var(--sp-6) 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: #fff; overflow: hidden;
}
.news-figure img { width: 100%; height: auto; display: block; }
.news-figure figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); color: var(--fg-muted);
  background: oklch(97% 0.01 258); border-top: 1px solid var(--border);
}
.news-link-row { margin: var(--sp-5) 0; }
.news-link-row a {
  display: inline-flex; align-items: center;
  font-size: var(--fs-sm); color: var(--norda-orange);
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.news-link-row a:hover { color: var(--norda-orange-dark); }
.news-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3;
  color: var(--norda-blue); margin: var(--sp-6) 0 var(--sp-3);
  letter-spacing: -0.005em;
}

/* ---------- ABOUT ---------- */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.story-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--bg-alt); }
.story-img img { width: 100%; height: 100%; object-fit: cover; }
.story-text h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); color: var(--norda-blue); margin: 0 0 var(--sp-5); }
.story-text p  { font-size: var(--fs-base); color: var(--fg-muted); line-height: 1.8; margin: 0 0 var(--sp-4); }

.timeline { position: relative; padding-left: 40px; max-width: 720px; margin: 0 auto; }
.timeline::before { content:""; position:absolute; left:14px; top:0; bottom:0; width:2px; background: var(--border); }
.tl-item { position: relative; margin-bottom: var(--sp-6); padding-left: var(--sp-6); }
.tl-item::before { content:""; position:absolute; left:-32px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--norda-blue); border:3px solid var(--bg-alt); }
.tl-item .yr { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: var(--norda-blue); margin-bottom: var(--sp-1); }
.tl-item p { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.7; margin: 0; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.v-card { text-align: center; padding: var(--sp-6); background: #fff; border-radius: var(--r-md); transition: box-shadow var(--t-base), transform var(--t-base); }
.v-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.v-card .plate { width: 64px; height: 64px; margin: 0 auto var(--sp-5); background: var(--norda-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.v-card h3 { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: 600; margin: 0 0 var(--sp-2); color: var(--fg); }
.v-card p  { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.7; margin: 0; }

/* ---------- SERVICES (legacy) ---------- */
.svc-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; margin-bottom: var(--sp-8); }
.svc-block:last-child { margin-bottom: 0; }
.svc-block.reverse > :first-child { order: 2; }

/* ---------- COOPERATION ---------- */
.coop-hero { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21/9; background: var(--bg-alt); margin-bottom: var(--sp-6); }
.coop-hero img { width: 100%; height: 100%; object-fit: cover; }
.coop-headline {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl);
  color: var(--norda-blue); margin: 0 0 var(--sp-4); line-height: 1.2;
}
.coop-lede { font-size: var(--fs-base); color: var(--fg); line-height: 1.7; margin: 0 0 var(--sp-3); }
.coop-available { font-size: var(--fs-base); color: var(--fg); margin: var(--sp-3) 0 var(--sp-6); }
.coop-available-label { color: var(--norda-blue); font-weight: 600; }
.coop-available .sep { color: var(--border); margin: 0 var(--sp-2); }

.coop-model-title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl);
  color: var(--norda-blue); margin: var(--sp-6) 0 var(--sp-4);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.coop-num { color: var(--norda-blue); font-weight: 700; }

.coop-flow { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); align-items: stretch; }
.coop-arrow {
  position: relative; flex: 1 1 0; min-width: 140px; min-height: 76px;
  background: linear-gradient(180deg, oklch(85% 0.08 235), oklch(78% 0.10 235));
  color: #fff; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: var(--fs-sm); line-height: 1.4;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
}
.coop-arrow:first-child {
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  padding-left: var(--sp-4);
}
.coop-arrow:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
}
.coop-flow-sm .coop-arrow { font-size: 12px; min-height: 70px; }

.coop-certs { display: grid; grid-template-columns: 2.12fr 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-7); }
.coop-cert {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.coop-cert img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .coop-flow { flex-direction: column; }
  .coop-arrow { clip-path: none !important; }
  .coop-certs { grid-template-columns: 1fr; }
}

/* ---------- SERVICES (image side) ---------- */
.svc-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/10; background: var(--bg-alt); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-text h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); color: var(--norda-blue); margin: 0 0 var(--sp-4); }
.svc-text p  { font-size: var(--fs-base); color: var(--fg-muted); line-height: 1.8; margin: 0 0 var(--sp-5); }
.svc-features { display: flex; flex-direction: column; gap: var(--sp-2); }
.svc-features li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--fg); }
.svc-features li .chk { width: 20px; height: 20px; border-radius: 50%; background: var(--norda-orange); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- FILTER PILLS ---------- */
.pills { display: flex; gap: var(--sp-3); justify-content: center; margin-bottom: var(--sp-6); flex-wrap: wrap; }
.pill { padding: 8px 24px; border-radius: var(--r-pill); border: 1px solid var(--border); background: #fff; color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: all var(--t-base); font-family: inherit; }
.pill:hover { border-color: var(--norda-blue); color: var(--norda-blue); }
.pill.active { background: var(--norda-blue); color: #fff; border-color: var(--norda-blue); }

/* ---------- CONTACT ---------- */
.contact-info-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-7); }
.contact-info-cards-2 { grid-template-columns: 1.6fr 1fr; }
.i-card { background: #fff; border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-1); }
.i-card .plate { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--norda-blue); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); }
.i-card h4 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; margin: 0 0 var(--sp-1); color: var(--fg); text-transform: none; letter-spacing: 0; }
.i-card p { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-7); }
.map-placeholder { height: 400px; border-radius: var(--r-lg); background: linear-gradient(135deg, #cfe0e8, #e0e8d8); position: relative; overflow: hidden; display:flex; align-items:center; justify-content:center; color: var(--fg-muted); font-size: var(--fs-sm); }
.map-placeholder::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,0.4) 14px, rgba(255,255,255,0.4) 15px); }
.map-pin { position:absolute; top:46%; left:48%; width:36px; height:36px; transform: translate(-50%,-100%); }

.c-form { background: #fff; border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-1); }
.c-form h3 { font-family: var(--font-body); font-size: var(--fs-xl); font-weight: 600; margin: 0 0 var(--sp-6); color: var(--norda-blue); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.f-group { margin-bottom: var(--sp-5); }
.f-group label { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--sp-1); color: var(--fg); }
.f-group input, .f-group textarea, .f-group select {
  width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: var(--fs-base); background: var(--bg); outline: none; transition: border-color var(--t-base);
}
.f-group input:focus, .f-group textarea:focus, .f-group select:focus { border-color: var(--norda-blue); }
.f-group textarea { resize: vertical; min-height: 120px; }
.f-submit { width: 100%; padding: 14px; background: var(--norda-blue); color: #fff; border: 0; border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: 600; cursor: pointer; transition: background var(--t-base); }
.f-submit:hover { background: var(--norda-blue-light); }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--bg-dark); color: #fff; padding: var(--sp-8) 0 var(--sp-6); }
.foot-grid { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-6); display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--sp-7); }
.foot-brand img { height: 44px; width: auto; margin-bottom: var(--sp-5); }
.foot-brand p { color: rgba(255,255,255,0.6); font-size: var(--fs-sm); line-height: 1.7; max-width: 280px; margin: 0; }
.foot-col h4 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); margin: 0 0 var(--sp-5); color: rgba(255,255,255,0.4); }
.foot-col li  { margin-bottom: var(--sp-2); }
.foot-col a   { color: rgba(255,255,255,0.7); font-size: var(--fs-sm); cursor:pointer; }
.foot-col a:hover { color: var(--norda-orange); }
.foot-contact p { color: rgba(255,255,255,0.7); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.foot-bottom { max-width: var(--container-max); margin: var(--sp-7) auto 0; padding: var(--sp-5) var(--sp-6) 0; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: center; color: rgba(255,255,255,0.4); font-size: var(--fs-xs); }

/* ---------- FADE-IN ---------- */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.in { opacity: 1; transform: translateY(0); }


/* ====================================================================
   PRODUCT DETAIL — Loyal-1800
   ==================================================================== */

/* Hero — deep blue, brochure-style */
.pd-hero { background: var(--norda-blue); color: #fff; padding: 240px 0 var(--sp-12); position: relative; overflow: hidden; margin-top: 0; }
.pd-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 90% 20%, rgba(255,255,255,0.08), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(231,143,51,0.10), transparent 60%);
  pointer-events: none;
}
.pd-hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-10); align-items: center; position: relative; }
.pd-hero-text .pd-eyebrow {
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--norda-orange); margin-bottom: var(--sp-3); border-left: 4px solid var(--norda-orange);
  padding-left: var(--sp-3);
}
.pd-hero-text h1 { font-family: var(--font-display); font-size: clamp(56px, 6vw, 88px); font-weight: 700; letter-spacing: 0.04em; line-height: 1; margin: 0 0 var(--sp-5); color: #fff; }
.pd-hero-text p { font-size: var(--fs-md); line-height: 1.7; color: rgba(255,255,255,0.85); max-width: 560px; margin-bottom: var(--sp-6); }
.pd-hero-image {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border-radius: 24px; padding: var(--sp-6);
  margin-top: 150px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
}
.pd-hero-image img { max-width: 100%; height: auto; display: block; }
.btn.btn-orange { background: var(--norda-orange); color: #fff; border: none; }
.btn.btn-orange:hover { background: var(--norda-orange-dark); }
.btn.btn-ghost-light { background: transparent; color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.4); }
.btn.btn-ghost-light:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); }

/* Key features — 4-up numbered */
.pd-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.pd-feature {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: var(--sp-6); position: relative;
}
.pd-feature-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 8px;
  background: linear-gradient(135deg, var(--norda-blue) 0%, var(--norda-blue-light) 100%);
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 22px;
  margin-bottom: var(--sp-4); letter-spacing: 0.04em;
}
.pd-feature h3 { color: var(--norda-blue); font-size: 22px; font-weight: 700; margin: 0 0 var(--sp-3); }
.pd-feature ul { padding-left: 1.1em; margin: 0; color: var(--fg); }
.pd-feature ul li { font-size: var(--fs-sm); line-height: 1.65; margin-bottom: var(--sp-2); }
.pd-feature ul li::marker { color: var(--norda-orange); }

/* Reagent System — 5 pills with arrow accents */
.pd-pills { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
.pd-pill {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: var(--sp-5) var(--sp-4); position: relative;
  display: flex; flex-direction: column; min-height: 200px;
}
.pd-pill-num {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.18em;
  color: var(--norda-orange); margin-bottom: var(--sp-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.pd-pill-num::after { content: '▶'; font-size: 10px; opacity: 0.7; }
.pd-pill p { font-size: var(--fs-sm); line-height: 1.6; color: var(--fg); margin: 0; }

/* Spec table */
.pd-spec-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-6); align-items: start; }
.pd-spec-grid-2 { grid-template-columns: 1fr 1fr; margin-top: var(--sp-6); }
.pd-spec-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.pd-spec-table th, .pd-spec-table td { padding: 14px 16px; font-size: var(--fs-sm); line-height: 1.5; text-align: left; vertical-align: top; }
.pd-spec-table th { width: 38%; background: #eef2f7; color: var(--norda-blue); font-weight: 600; border-bottom: 1px solid var(--border); }
.pd-spec-table td { color: var(--fg); border-bottom: 1px solid var(--border); }
.pd-spec-table tr:last-child th, .pd-spec-table tr:last-child td { border-bottom: none; }
.pd-spec-block {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-5);
}
.pd-spec-block h4 {
  color: var(--norda-blue); font-size: 16px; font-weight: 700; margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 2px solid var(--norda-orange); display: inline-block;
}
.pd-spec-block ul { padding-left: 1.1em; margin: 0; }
.pd-spec-block ul li { font-size: var(--fs-sm); line-height: 1.65; color: var(--fg); margin-bottom: 6px; }

/* Assay table */
.pd-assay-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.pd-assay-table thead th {
  background: var(--norda-blue); color: #fff; padding: 14px 18px;
  font-size: var(--fs-sm); font-weight: 600; text-align: left; letter-spacing: 0.02em;
}
.pd-assay-table tbody td { padding: 12px 18px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.pd-assay-table tbody td.m { font-weight: 600; color: var(--norda-blue); width: 22%; }
.pd-assay-table tbody tr:nth-child(even) td { background: #fafafa; }
.pd-assay-table tbody tr:last-child td { border-bottom: none; }

/* CTA */
.pd-cta { background: var(--norda-blue); color: #fff; padding: var(--sp-10) 0; }
.pd-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.pd-cta h2 { color: #fff; margin: 0 0 var(--sp-2); font-size: 32px; }
.pd-cta p { color: rgba(255,255,255,0.85); margin: 0; max-width: 600px; }

/* -------- Chang Wei You (methylation kit) -------- */
/* Assay workflow */
.cwy-assay-meta {
  margin-top: var(--sp-5); margin-bottom: var(--sp-6);
  background: #fff; border: 1px solid #e8eaee; border-radius: 14px;
  padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.cwy-meta-row { display: flex; gap: var(--sp-4); align-items: baseline; }
.cwy-meta-key {
  flex-shrink: 0; min-width: 140px;
  font-family: var(--font-display); font-weight: 700;
  color: var(--norda-blue); font-size: var(--fs-md);
}
.cwy-meta-val { color: #2b3140; line-height: 1.55; font-size: var(--fs-md); }
.cwy-procedure-title {
  font-family: var(--font-display); margin: 0 0 var(--sp-4);
  color: var(--norda-blue); font-size: 22px; font-weight: 700;
}
.cwy-procedure {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3);
  position: relative;
}
.cwy-step {
  background: #fff; border: 1px solid #e8eaee; border-top: 4px solid var(--norda-orange);
  border-radius: 0 0 12px 12px;
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative;
}
.cwy-step:not(:last-child)::after {
  content: ''; position: absolute; top: 32px; right: -14px;
  width: 0; height: 0;
  border-left: 10px solid var(--norda-orange);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  z-index: 1;
}
.cwy-step-head { display: flex; align-items: center; gap: 10px; }
.cwy-step-num {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--norda-orange); letter-spacing: 0.08em;
}
.cwy-step-title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--norda-blue); line-height: 1.3;
}
.cwy-step-desc { margin: 0; color: #4a5160; line-height: 1.55; font-size: 14px; }

@media (max-width: 900px) {
  .cwy-procedure { grid-template-columns: 1fr; }
  .cwy-step:not(:last-child)::after { display: none; }
}

.cwy-prose {
  max-width: 880px; margin: var(--sp-5) auto 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.cwy-prose p {
  margin: 0; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.75;
  color: #2b3140;
}
.cwy-prose strong { color: var(--norda-blue); font-weight: 700; }
.cwy-prose .cwy-lead {
  font-weight: 700; color: var(--norda-orange); margin-right: 4px;
}
.pd-hero-mol .pd-hero-text h1.pd-h1-long {
  font-size: clamp(30px, 2.9vw, 44px); line-height: 1.15; letter-spacing: -0.01em;
  font-weight: 700; text-transform: none;
}
.pd-hero-mol .pd-hero-text h1.pd-h1-long .pd-accent { color: var(--norda-orange); }
.pd-hero-mol .pd-hero-text h1.pd-h1-long .pd-h1-sub {
  display: block; font-weight: 500; color: rgba(255,255,255,0.65);
  font-size: 0.65em; letter-spacing: 0.01em; margin-top: 8px;
}
.pd-hero-mol { padding-bottom: var(--sp-10); min-height: 670px; }
.pd-hero-mol .pd-hero-image {
  background: oklch(96% 0.01 258);
  padding: var(--sp-5);
  border: 1px solid oklch(88% 0.01 258);
  border-radius: 16px;
}
.pd-hero-mol .pd-hero-image img { width: 100%; border-radius: 0; }
.pd-hero-mol .pd-hero-text .pd-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  border-left: none; padding-left: 0; text-transform: none; letter-spacing: 0.06em;
  font-size: 13px; color: rgba(255,255,255,0.8);
}
.pd-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--norda-orange); box-shadow: 0 0 0 4px rgba(231,143,51,0.22); }

/* Disease context stat trio */
.cwy-context {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  margin-top: var(--sp-5);
}
.cwy-context-card {
  background: #fff; border: 1px solid #e8eaee; border-radius: 16px;
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative; overflow: hidden;
}
.cwy-context-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--norda-blue);
}
.cwy-stat {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 6vw, 84px); line-height: 1; letter-spacing: -0.02em;
  color: var(--norda-blue);
  display: flex; align-items: baseline; gap: 4px;
}
.cwy-stat-sup, .cwy-stat-unit {
  font-size: 0.4em; font-weight: 600; color: var(--norda-orange);
}
.cwy-stat-label { color: #4a5160; line-height: 1.5; margin: 0; font-size: var(--fs-md); }

.cwy-callout {
  margin-top: var(--sp-7);
  background: linear-gradient(135deg, oklch(98% 0.005 258), #fff);
  border-left: 4px solid var(--norda-orange);
  padding: var(--sp-6) var(--sp-7);
  border-radius: 0 16px 16px 0;
  display: flex; gap: var(--sp-4); align-items: flex-start;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.cwy-callout-mark {
  font-family: var(--font-display); font-size: 72px; line-height: 0.6;
  color: var(--norda-orange); flex-shrink: 0; margin-top: 8px;
}
.cwy-callout p {
  margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55;
  color: #1c2230; max-width: 820px;
}
.cwy-callout strong { color: var(--norda-blue); font-weight: 700; }

/* Method comparison */
.cwy-methods {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  margin-top: var(--sp-5);
}
.cwy-method {
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.cwy-method-img { overflow: hidden; }
.cwy-method-img img { width: 100%; height: auto; display: block; }
.cwy-method-body { display: flex; flex-direction: column; gap: var(--sp-2); text-align: center; align-items: center; }
.cwy-method-tag {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--norda-blue); letter-spacing: -0.01em;
}
.cwy-method-cons { margin: 0; color: #4a5160; line-height: 1.6; font-size: var(--fs-md); }

/* Performance cards */
.cwy-perf {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.cwy-perf-card {
  background: #fff; border: 1px solid #e8eaee; border-radius: 16px;
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4);
  position: relative;
}
.cwy-perf-num {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--norda-orange); letter-spacing: 0.14em;
}
.cwy-perf-card h3 {
  font-family: var(--font-display); margin: 0; font-size: 26px;
  color: var(--norda-blue); letter-spacing: -0.01em;
}
.cwy-perf-card p { margin: 0; color: #4a5160; line-height: 1.65; font-size: var(--fs-md); }
.cwy-perf-card strong { color: var(--norda-blue); font-weight: 700; }
.cwy-gene-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-2); }
.cwy-gene-chip {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--norda-blue); background: oklch(95% 0.02 258);
  padding: 6px 12px; border-radius: 999px; letter-spacing: 0.02em;
}
.cwy-cv-row { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); }
.cwy-cv {
  flex: 1; padding: var(--sp-3) var(--sp-4); border-radius: 12px;
  background: oklch(96% 0.02 258);
}
.cwy-cv-num {
  font-family: var(--font-display); font-weight: 700; font-size: 36px;
  color: var(--norda-blue); line-height: 1;
}
.cwy-cv-num span { font-size: 0.5em; color: var(--norda-orange); margin-left: 2px; }
.cwy-cv-lbl { font-size: 12px; color: #4a5160; margin-top: 6px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Clinical utility — light to match Test Performance */
.cwy-clinical {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.cwy-clinical-card {
  background: #fff;
  border: 1px solid #e8eaee;
  border-top: 4px solid var(--norda-orange);
  border-radius: 0 0 14px 14px;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  position: relative;
}
.cwy-clinical-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 3vw, 44px); color: var(--norda-blue); line-height: 1; letter-spacing: -0.02em;
}
.cwy-clinical-unit { font-size: 0.5em; color: var(--norda-orange); margin-left: 2px; font-weight: 600; }
.cwy-clinical-lbl {
  margin-top: var(--sp-2); color: var(--norda-blue); font-weight: 700;
  font-size: var(--fs-md); letter-spacing: 0.02em;
  font-family: var(--font-display);
}
.cwy-clinical-sub {
  margin-top: 4px; color: #6a7180;
  font-size: 11px; letter-spacing: 0.04em;
}
.cwy-clinical-source {
  margin-top: var(--sp-4); font-size: 12px; color: #6a7180;
  font-style: italic; line-height: 1.6; max-width: 820px;
}

@media (max-width: 900px) {
  .cwy-context, .cwy-methods, .cwy-perf { grid-template-columns: 1fr; }
  .cwy-clinical { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .pd-hero-inner, .pd-spec-grid, .pd-spec-grid-2 { grid-template-columns: 1fr; }
  .pd-features, .pd-pills { grid-template-columns: 1fr 1fr; }
  .pd-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .pd-features, .pd-pills { grid-template-columns: 1fr; }
}