:root{
    --ink:#0a0a0a; --ink-soft:#161616;
    --paper:#f6f6f4; --paper-2:#efefec;
    --line:#e1e1dd; --line-strong:#cfcfca;
    --muted:#6f6f6a; --muted-2:#9a9a94;
    --maxw:1200px;
    --pad-x:clamp(1.25rem,5vw,4rem);
    --sec-y:clamp(4rem,9vw,8rem);
    --ease:cubic-bezier(.16,1,.3,1);
    --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    --display:"Space Grotesk",system-ui,sans-serif;
    --body:"Sora",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;font-size:clamp(15px,1.05vw,17px);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img,svg{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--ink);color:#fff}
  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
  .eyebrow::before{content:"";width:34px;height:1px;background:var(--ink)}
  h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.02em}
  h2{font-size:clamp(1.9rem,4.2vw,3.2rem)}
  h3{font-size:1.18rem;letter-spacing:-.01em}
  p{max-width:62ch}
  .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);line-height:1.55}

  .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--body);font-weight:600;font-size:.95rem;padding:.85rem 1.5rem;border:1.5px solid var(--ink);transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease);cursor:pointer;background:var(--ink);color:#fff}
  .btn:hover{transform:translateY(-2px)}
  .btn--ghost{background:transparent;color:var(--ink)}
  .btn--ghost:hover{background:var(--ink);color:#fff}
  .btn .arw{transition:transform .35s var(--ease)}
  .btn:hover .arw{transform:translateX(4px)}

  /* ===== HERO — text left, factory carousel right ===== */
  .hero{position:relative;background:var(--ink);overflow:hidden;color:#fff}
  .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(1.4rem,3.2vw,2.8rem)}
  .h-content{display:flex;flex-direction:column;justify-content:center}
  .h-content .eyebrow{color:#b9b9b4;margin-bottom:.7rem}
  .h-content .eyebrow::before{background:#fff}
  .h-content h1{font-size:clamp(1.75rem,4vw,3.2rem);line-height:1.08;max-width:22ch;margin-bottom:.6rem}
  .h-content .lead{color:#e2e2de;max-width:50ch;font-size:clamp(.95rem,1.3vw,1.15rem);line-height:1.5}
  .h-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.9rem}

  /* right-side compact carousel */
  .h-carousel{position:relative;aspect-ratio:3/2;background:#111;border:1px solid rgba(255,255,255,.14);overflow:hidden;border-radius:2px}
  .h-track{position:absolute;inset:0}
  .h-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);visibility:hidden}
  .h-slide.active{opacity:1;visibility:visible}
  .h-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .h-prev,.h-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;background:rgba(10,10,10,.45);border:1px solid rgba(255,255,255,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:.3s var(--ease)}
  .h-prev{left:.7rem} .h-next{right:.7rem}
  .h-prev:hover,.h-next:hover{background:var(--ink)}
  .h-dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:.5rem}
  .h-dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:.3s}
  .h-dot.active{background:#fff;width:22px;border-radius:5px}

  /* ===== STATS BAND ===== */
  .stats-band{border-bottom:1px solid var(--line);background:var(--paper)}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
  .stat{padding:clamp(1.8rem,4vw,2.8rem) 1rem;border-right:1px solid var(--line)}
  .stat:last-child{border-right:0}
  .stat .num{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1}
  .stat .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}

  section:not(.hero):not(.cta){padding-block:var(--sec-y)}
  .sec-head{max-width:62ch;margin-bottom:clamp(2.2rem,5vw,3.5rem)}
  .sec-head h2{margin-bottom:1rem}

  .profile{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
  .facts{border-top:2px solid var(--ink)}
  .fact{display:flex;justify-content:space-between;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
  .fact dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:.2rem}
  .fact dd{text-align:right;font-weight:600;max-width:22ch}

  .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .cap{background:var(--paper);padding:clamp(1.5rem,3vw,2.4rem);transition:background .4s var(--ease),transform .4s var(--ease);position:relative}
  .cap:hover{background:#fff;transform:translateY(-3px)}
  .cap .idx{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--muted-2)}
  .cap h3{margin:1.1rem 0 .7rem}
  .cap p{font-size:.94rem;color:var(--muted);max-width:34ch}
  .cap .more{margin-top:1.1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);display:inline-flex;gap:.4rem;opacity:0;transform:translateY(6px);transition:.4s var(--ease)}
  .cap:hover .more{opacity:1;transform:none}

  .diff{background:var(--ink);color:#fff}
  .diff .eyebrow{color:#9a9a94}
  .diff .eyebrow::before{background:#fff}
  .diff h2{color:#fff}
  .diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);margin-top:2.5rem}
  .diff-item{border-top:1px solid rgba(255,255,255,.2);padding-top:1.4rem}
  .diff-item .k{font-family:var(--display);font-weight:700;font-size:1.5rem;margin-bottom:.5rem}
  .diff-item p{color:#c9c9c5;font-size:.95rem}

  /* ===== CERTIFICATIONS + TWO-ROW SLIDER ===== */
  .certs{background:var(--paper-2);border-block:1px solid var(--line)}
  .cert-slider{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.1rem}
  .cert-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .cert-track{display:flex;gap:1.1rem;width:max-content;will-change:transform;cursor:grab}
  .cert-track:active{cursor:grabbing}
  .cert{flex:0 0 auto;background:#fff;border:1px solid var(--line);padding:.7rem;display:flex;align-items:center;justify-content:center;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
  .cert:hover{border-color:var(--ink);box-shadow:0 14px 30px -22px rgba(0,0,0,.5)}
  .cert img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
  /* Row 1 certs are portrait 457x640 (AR .714) -> vertical rectangle cards */
  .cert-row.portrait .cert{width:clamp(150px,13vw,182px);height:clamp(210px,18vw,255px)}
  /* Row 2 certs are landscape 250x162 (AR 1.543) -> horizontal cards */
  .cert-row.landscape .cert{width:clamp(200px,18vw,250px);height:clamp(130px,12vw,162px)}
  .cert-row-label{font:600 .72rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft,#666);margin:0 0 .9rem}

  .faq-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,6vw,5rem);align-items:start}
  .faq-list{border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink);padding:1.25rem 0;display:flex;justify-content:space-between;gap:1rem;align-items:center}
  .faq-q .pm{flex:none;width:22px;height:22px;position:relative}
  .faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--ink);transition:.35s var(--ease)}
  .faq-q .pm::before{top:10px;left:0;width:22px;height:2px}
  .faq-q .pm::after{left:10px;top:0;width:2px;height:22px}
  .faq-item.open .pm::after{transform:scaleY(0)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .faq-a p{color:var(--muted);padding-bottom:1.3rem;font-size:.96rem}

  .cta{background:var(--ink);color:#fff;text-align:center;padding-block:clamp(3.5rem,8vw,6rem)}
  .cta h2{color:#fff;max-width:18ch;margin-inline:auto}
  .cta p{color:#c9c9c5;margin:1rem auto 2rem;max-width:50ch}
  .cta .h-actions{justify-content:center}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.in{opacity:1;transform:none}

  @media(max-width:980px){
    .profile,.faq-grid{grid-template-columns:1fr}
    .cap-grid{grid-template-columns:repeat(2,1fr)}
    .diff-grid{grid-template-columns:1fr}
    .hero-grid{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.6rem)}
    .h-carousel{order:-1;aspect-ratio:16/9}
  }
  @media(max-width:760px){
    .stats{grid-template-columns:repeat(2,1fr);gap:1px 0}
    .stat{border-right:0;border-bottom:1px solid var(--line)}
    .cap-grid{grid-template-columns:1fr}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    .h-slide{transition:none}
  }
  /* ===== THEME-CONFLICT HARDENING (scoped to .df-about only) ===== */
  .df-about{color:var(--ink)!important;background:var(--paper)!important}
  .df-about h1,.df-about h2,.df-about h3{color:inherit!important}
  /* hero lives OUTSIDE .df-about (before <main>), so scope the fix to .hero directly */
  .hero h1{color:#fff!important}