:root{
    --so-ink:#222222;
    --so-muted:#6b6b6b;
    --so-line:#ece8e3;
    --so-soft:#fff8f2;
    --so-soft-2:#fff1e5;
    --so-card:#ffffff;
    --so-accent:#f58220;
    --so-max:1240px;
    --so-radius:18px;
    --so-shadow:0 10px 30px rgba(245,130,32,.08);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0}
  .so-top20{
    color:var(--so-ink);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.55;
    background:#fff;
  }
  .so-top20 a{color:inherit;text-decoration:none}
  .so-wrap{width:min(calc(100% - 40px),var(--so-max));margin:0 auto}
  .so-eyebrow{
    margin:0 0 12px;
    font-size:13px;
    line-height:1;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .so-title{
    margin:0;
    font-size:clamp(42px,6vw,78px);
    line-height:.98;
    letter-spacing:-.055em;
  }
  .so-lead{
    max-width:760px;
    margin:22px auto 0;
    color:var(--so-muted);
    font-size:clamp(17px,2vw,21px);
  }
  .so-section{padding:86px 0}
  .so-section--soft{background:var(--so-soft)}
  .so-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:34px;
  }
  .so-section-head h2{
    margin:0;
    font-size:clamp(30px,4vw,48px);
    line-height:1.05;
    letter-spacing:-.035em;
  }
  .so-section-head p{
    max-width:570px;
    margin:0;
    color:var(--so-muted);
    font-size:16px;
  }

  /* HERO */
  .so-hero{
    padding:86px 0 72px;
    text-align:center;
    background:
      radial-gradient(circle at 50% -10%,rgba(17,24,39,.08),transparent 42%),
      linear-gradient(#fff,#fafafa);
    border-bottom:1px solid var(--so-line);
  }
  .so-hero-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:32px auto 0;
    max-width:900px;
  }
  .so-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 17px;
    border:1px solid #d7dae0;
    border-radius:999px;
    background:#fff;
    font-size:14px;
    font-weight:700;
    transition:.2s ease;
  }
  .so-chip:hover,.so-chip:focus{
    border-color:#111827;
    transform:translateY(-1px);
  }
  .so-hero-cta{margin-top:18px}
  .so-text-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    font-size:14px;
    border-bottom:1px solid currentColor;
  }

  /* DEMAND GRID */
  .so-demand-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
  }
  .so-demand-card{
    min-height:330px;
    padding:30px;
    border:1px solid var(--so-line);
    border-radius:var(--so-radius);
    background:var(--so-card);
    box-shadow:var(--so-shadow);
    display:flex;
    flex-direction:column;
  }
  .so-demand-visual{
    height:112px;
    margin:-10px -10px 24px;
    border-radius:14px;
    background:
      linear-gradient(135deg,rgba(17,24,39,.04),rgba(17,24,39,.11)),
      var(--so-soft-2);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8b93a1;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .so-demand-card h3{
    margin:0 0 18px;
    font-size:24px;
    letter-spacing:-.025em;
  }
  .so-demand-links{
    list-style:none;
    padding:0;
    margin:auto 0 0;
  }
  .so-demand-links li+li{border-top:1px solid var(--so-line)}
  .so-demand-links a,
  .so-demand-links span{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:13px 0;
    font-size:15px;
    font-weight:700;
  }
  .so-demand-links a::after{content:"→";font-size:18px}
  .so-demand-links a:hover{text-decoration:underline;text-underline-offset:4px}
  .so-demand-links .so-candidate{
    color:#9aa1ad;
    cursor:default;
  }
  .so-demand-links .so-candidate::after{
    content:"Coming next";
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  /* PRODUCTS */
  .so-product-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
  }
  .so-product-link{
    min-height:78px;
    padding:16px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid var(--so-line);
    border-radius:14px;
    background:#fff;
    font-size:14px;
    font-weight:800;
    transition:.2s ease;
  }
  .so-product-link:hover{
    transform:translateY(-2px);
    border-color:#aab0ba;
    box-shadow:0 8px 20px rgba(17,24,39,.06);
  }

  /* PROGRAM */
  .so-program{
    border-radius:26px;
    padding:54px;
    background:#111827;
    color:#fff;
    overflow:hidden;
  }
  .so-program h2{
    margin:0;
    max-width:700px;
    font-size:clamp(32px,4vw,50px);
    line-height:1.04;
    letter-spacing:-.04em;
  }
  .so-program>p{
    max-width:760px;
    margin:18px 0 0;
    color:#cbd1db;
    font-size:17px;
  }
  .so-process{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
    margin:36px 0 30px;
  }
  .so-process span{
    position:relative;
    padding:14px 10px;
    text-align:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;
    background:rgba(255,255,255,.05);
    font-size:12px;
    font-weight:800;
  }
  .so-program-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .so-program-links a,.so-program-links span{
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.24);
    font-size:13px;
    font-weight:700;
  }
  .so-program-links span{color:#aab2bf}
  .so-program-cta{
    display:inline-flex;
    margin-top:28px;
    padding:13px 19px;
    border-radius:10px;
    background:#fff;
    color:#111827!important;
    font-weight:800;
  }

  /* EVIDENCE */
  .so-funnel{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
    margin:8px 0 34px;
  }
  .so-funnel div{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:10px;
    border:1px solid var(--so-line);
    border-radius:12px;
    background:#fff;
    font-size:12px;
    font-weight:800;
  }
  .so-project-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }
  .so-project{
    border:1px solid var(--so-line);
    border-radius:16px;
    background:#fff;
    overflow:hidden;
  }
  .so-project-media{
    aspect-ratio:16/9;
    background:linear-gradient(135deg,#eef0f3,#dfe3e8);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8b93a1;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .so-project-body{padding:20px}
  .so-project-body h3{margin:0 0 8px;font-size:19px}
  .so-project-body p{margin:0;color:var(--so-muted);font-size:14px}
  .so-project details{margin-top:16px;border-top:1px solid var(--so-line);padding-top:14px}
  .so-project summary{cursor:pointer;font-weight:800;font-size:13px}
  .so-project details p{margin-top:10px}

  /* FINAL */
  .so-final-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid var(--so-line);
    border-radius:22px;
    overflow:hidden;
  }
  .so-final-panel{padding:44px}
  .so-final-panel+.so-final-panel{border-left:1px solid var(--so-line)}
  .so-final-panel h2{
    margin:0 0 12px;
    font-size:30px;
    letter-spacing:-.03em;
  }
  .so-final-panel p{margin:0 0 22px;color:var(--so-muted)}
  .so-guide-list{list-style:none;padding:0;margin:0}
  .so-guide-list li+li{border-top:1px solid var(--so-line)}
  .so-guide-list a{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    font-weight:700;
  }
  .so-guide-list a::after{content:"→"}
  .so-rfq{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .so-rfq label{display:block;font-size:12px;font-weight:800;margin-bottom:5px}
  .so-rfq input,.so-rfq textarea{
    width:100%;
    border:1px solid #d7dae0;
    border-radius:9px;
    padding:11px 12px;
    font:inherit;
    background:#fff;
  }
  .so-rfq textarea{min-height:94px;resize:vertical}
  .so-rfq .so-full{grid-column:1/-1}
  .so-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:12px 18px;
    border:0;
    border-radius:10px;
    background:#111827;
    color:#fff!important;
    font-weight:800;
    cursor:pointer;
  }
  .so-note{
    margin-top:12px!important;
    font-size:12px!important;
    color:#7b8492!important;
  }

  @media (max-width:980px){
    .so-product-grid{grid-template-columns:repeat(3,1fr)}
    .so-process{grid-template-columns:repeat(3,1fr)}
    .so-funnel{grid-template-columns:repeat(4,1fr)}
    .so-project-grid{grid-template-columns:1fr}
  }
  @media (max-width:720px){
    .so-wrap{width:min(calc(100% - 28px),var(--so-max))}
    .so-section{padding:58px 0}
    .so-hero{padding:64px 0 52px}
    .so-section-head{display:block}
    .so-section-head p{margin-top:12px}
    .so-demand-grid,.so-final-grid{grid-template-columns:1fr}
    .so-final-panel+.so-final-panel{border-left:0;border-top:1px solid var(--so-line)}
    .so-product-grid{grid-template-columns:repeat(2,1fr)}
    .so-process{grid-template-columns:repeat(2,1fr)}
    .so-funnel{grid-template-columns:repeat(2,1fr)}
    .so-program{padding:34px 24px}
    .so-rfq{grid-template-columns:1fr}
    .so-rfq .so-full{grid-column:auto}
  }

  /* SmallOrders orange visual system */
  .so-eyebrow{color:var(--so-accent)}
  .so-hero{background:radial-gradient(circle at 50% -10%,rgba(245,130,32,.16),transparent 44%),linear-gradient(#fff,#fffaf6)}
  .so-chip:hover,.so-chip:focus,.so-chip:active{color:#fff;background:var(--so-accent);border-color:var(--so-accent)}
  .so-text-link{color:var(--so-accent)!important}
  .so-demand-card{border-top:3px solid var(--so-accent)}
  .so-demand-links .so-demand-label{color:#555;font-weight:700}
  .so-product-link:hover,.so-product-link:focus{color:#fff;background:var(--so-accent);border-color:var(--so-accent);box-shadow:0 8px 20px rgba(245,130,32,.16)}
  .so-program{background:linear-gradient(135deg,#e96f0d 0%,#f58220 58%,#ff9b45 100%)}
  .so-program>p{color:rgba(255,255,255,.9)}
  .so-program-cta{background:#fff;color:#d96100!important}
  .so-process span{background:rgba(255,255,255,.09)}
  .so-funnel div{border-top:3px solid var(--so-accent)}
  .so-guide-list a:hover{color:var(--so-accent)}
  .so-button{background:var(--so-accent);transition:.2s ease}
  .so-button:hover,.so-button:focus{background:#dc6c10;transform:translateY(-1px)}
  .so-inquiry-cta{min-width:230px}


  /* TOP20 v4.2: badge identity + centered hero copy */
  .so-top20-hero-badge{display:block;width:160px;height:160px;object-fit:contain;margin:0 auto 18px}
  .so-hero-kicker{margin:0 auto 14px;text-align:center;font-size:15px;letter-spacing:.16em}
  .so-hero .so-lead{display:block;width:100%;max-width:760px;margin:22px auto 0;padding:0;text-align:center!important}
  .so-demand-card::before{display:none!important}
  @media(max-width:720px){.so-top20-hero-badge{width:118px;height:118px;margin-bottom:14px}.so-hero .so-lead{max-width:520px}}


  /* TOP20 v4.3 — Compact Hero
     The page title/H1 is rendered by the website backend above this section. */
  .so-hero{
    padding:28px 0 34px;
    min-height:0;
  }
  .so-compact-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    width:max-content;
    max-width:100%;
    margin:0 auto;
  }
  .so-top20-compact-badge{
    display:block;
    width:82px;
    height:82px;
    object-fit:contain;
    flex:0 0 82px;
  }
  .so-compact-brand-copy{
    text-align:left;
    line-height:1;
  }
  .so-compact-top{
    color:var(--so-accent);
    font-size:27px;
    line-height:1;
    font-weight:900;
    letter-spacing:.06em;
  }
  .so-compact-sub{
    margin-top:7px;
    color:#7b6f65;
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.18em;
  }
  .so-hero .so-compact-lead{
    max-width:650px;
    margin:13px auto 0;
    text-align:center!important;
    font-size:17px;
    line-height:1.45;
  }
  .so-hero .so-compact-nav{
    margin:18px auto 0;
  }
  .so-hero .so-compact-cta{
    margin-top:13px;
  }

  /* Hide legacy hero elements if platform caching/HTML cleanup leaves them behind. */
  .so-hero > .so-wrap > .so-top20-hero-badge,
  .so-hero > .so-wrap > .so-hero-kicker,
  .so-hero > .so-wrap > .so-title{
    display:none!important;
  }

  @media(max-width:720px){
    .so-hero{padding:20px 0 26px}
    .so-compact-brand{gap:10px}
    .so-top20-compact-badge{
      width:66px;
      height:66px;
      flex-basis:66px;
    }
    .so-compact-top{font-size:23px}
    .so-compact-sub{font-size:10px;margin-top:6px}
    .so-hero .so-compact-lead{
      margin-top:11px;
      font-size:15px;
    }
    .so-hero .so-compact-nav{
      margin-top:15px;
      gap:7px;
    }
    .so-chip{
      min-height:38px;
      padding:8px 13px;
      font-size:13px;
    }
  }


  /* TOP20 v4.4 — demand identity + unified interaction language */
  .so-demand-heading{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 18px;
  }
  .so-demand-badge{
    display:block;
    width:58px;
    height:58px;
    flex:0 0 58px;
    object-fit:contain;
  }
  .so-demand-heading h3{
    margin:0;
    font-size:24px;
    line-height:1.15;
  }

  /* Demand items: same white -> orange -> white interaction language as hero chips.
     These remain non-links until their real Answer Pages exist. */
  .so-demand-links li+li{border-top:0}
  .so-demand-links li{margin-top:8px}
  .so-demand-links li:first-child{margin-top:0}
  .so-demand-links .so-demand-label,
  .so-demand-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:42px;
    padding:9px 12px;
    border:1px solid var(--so-line);
    border-radius:10px;
    background:#fff;
    color:#444;
    font-size:14px;
    font-weight:700;
    transition:.18s ease;
  }
  .so-demand-links .so-demand-label{
    cursor:default;
  }
  .so-demand-links .so-demand-label:hover,
  .so-demand-links .so-demand-label:focus,
  .so-demand-links a:hover,
  .so-demand-links a:focus{
    background:var(--so-accent);
    border-color:var(--so-accent);
    color:#fff;
    text-decoration:none;
  }

  /* Program pills: high contrast on orange background */
  .so-program-links span,
  .so-program-links a{
    color:#fff!important;
    border-color:rgba(255,255,255,.62)!important;
    background:rgba(255,255,255,.12);
    transition:.18s ease;
  }
  .so-program-links span:hover,
  .so-program-links a:hover,
  .so-program-links span:focus,
  .so-program-links a:focus{
    background:#fff;
    border-color:#fff!important;
    color:#d96100!important;
  }

  /* Product/category buttons already use the same language; strengthen keyboard/active state */
  .so-chip:active,
  .so-product-link:active,
  .so-demand-links .so-demand-label:active,
  .so-demand-links a:active{
    transform:translateY(1px);
  }

  @media(max-width:720px){
    .so-demand-heading{gap:11px;margin-bottom:14px}
    .so-demand-badge{width:48px;height:48px;flex-basis:48px}
    .so-demand-heading h3{font-size:21px}
  }


  /* TOP20 v4.5 — unified interactive states
     All choice/process tiles use the same white/orange interaction language. */

  /* PROGRAM SOLUTIONS: Product Selection -> Delivery */
  .so-process span{
    color:#fff;
    border:1px solid rgba(255,255,255,.62);
    background:rgba(255,255,255,.12);
    cursor:default;
    transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  }
  .so-process span:hover,
  .so-process span:focus{
    color:#d96100;
    background:#fff;
    border-color:#fff;
    transform:translateY(-2px);
    box-shadow:0 7px 16px rgba(130,58,0,.12);
  }
  .so-process span:active{
    transform:translateY(1px);
  }

  /* HOW WE BUILD TOP20: Need Fit -> Real Evidence */
  .so-funnel div{
    color:#3f3f3f;
    border:1px solid var(--so-line);
    border-top:3px solid var(--so-accent);
    background:#fff;
    cursor:default;
    transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  }
  .so-funnel div:hover,
  .so-funnel div:focus{
    color:#fff;
    background:var(--so-accent);
    border-color:var(--so-accent);
    transform:translateY(-2px);
    box-shadow:0 7px 16px rgba(245,130,32,.15);
  }
  .so-funnel div:active{
    transform:translateY(1px);
  }