:root{
    --ink:#16130F;
    --gray:#6E6A63;
    --light:#9B968D;
    --hair:#E9E6E0;
    --paper:#FFFFFF;
    --warm:#FAF9F6;
    --red:#D6252D;
    --green:#1B8F4C;
    --amber:#C9821B;
    /* the WVS booth ramp — orange through red into magenta */
    --grad:linear-gradient(97deg,
      #F2872F 0%, #EF6A22 13%, #E63116 29%, #DD0716 47%,
      #E00A4B 69%, #D3097A 86%, #A8408F 100%);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'DM Sans',sans-serif;
    background:var(--paper);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    font-size:16px;
    line-height:1.6;
  }
  a{color:inherit;text-decoration:none}
  img{display:block}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
  .label{
    font-size:12px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--gray);
  }
  /* visually hidden — the brand name lives in the logo image; the h3 keeps
     document structure without repeating it on screen */
  .vh{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  h2 em,.hero-line em,h3 em{font-style:normal;color:var(--red)}

  /* ---------- scroll reveal ---------- */
  html.anim .reveal{
    opacity:0;transform:translateY(26px);
    transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.25,1);
  }
  html.anim .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){
    html.anim .reveal{opacity:1;transform:none;transition:none}
  }

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hair);
    transition:background .25s ease,border-color .25s ease;
  }
  /* at the very top the header sits ON the booth wash, so it goes clear and
     white. JS adds .at-top; without JS the solid header is the default. */
  .at-top header{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
  .at-top nav a,.at-top .lang .on{color:#fff}
  .at-top nav a:hover,.at-top .lang a:hover{color:rgba(255,255,255,.72)}
  .at-top .lang{color:rgba(255,255,255,.62)}
  .at-top .lang i{color:rgba(255,255,255,.38)}
  .at-top .header-in .btn{background:rgba(22,19,15,.9)}
  .lg-light{display:none}
  .at-top .lg-dark{display:none}
  .at-top .lg-light{display:block}
  .header-in{
    display:flex;align-items:center;justify-content:space-between;
    height:76px;gap:24px;
  }
  .header-logo img{height:30px;width:auto}
  nav{display:flex;gap:30px;font-size:14px;font-weight:500;color:var(--gray)}
  nav a{transition:color .15s}
  nav a:hover{color:var(--red)}
  .header-right{display:flex;align-items:center;gap:20px}
  .lang{
    display:flex;align-items:center;gap:7px;
    font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--light);
  }
  .lang a{transition:color .15s}
  .lang a:hover{color:var(--red)}
  .lang .on{color:var(--ink)}
  .lang i{font-style:normal;color:var(--hair)}

  /* ---------- buttons (hover fills left to right) ---------- */
  .btn{
    position:relative;isolation:isolate;overflow:hidden;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    background:var(--ink);color:#fff;
    font-family:inherit;font-size:14px;font-weight:600;
    padding:12px 24px;border:none;cursor:pointer;
    transition:color .2s;text-align:center;
  }
  .btn::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:var(--red);
    transform:scaleX(0);transform-origin:left;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
  .btn-wa{background:#1FAF54}
  .btn-wa::before{background:#0C6E33}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
  .btn-ghost:hover,.btn-ghost:focus-visible{color:#fff}
  .btn-ghost::before{background:var(--ink)}
  .btn svg{flex:none}

  /* ---------- hero ---------- */
  /* the wash is the WVS booth backdrop: one saturated field, masked so it
     dissolves into the page instead of ending on a cut edge */
  .hero{position:relative;isolation:isolate;padding:104px 0 0;text-align:center}
  .hero::before{
    content:"";position:absolute;inset:-76px 0 0 0;z-index:-1;
    background:var(--grad);
    -webkit-mask-image:radial-gradient(96% 120% at 47% -22%,
      #000 46%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 76%);
    mask-image:radial-gradient(96% 120% at 47% -22%,
      #000 46%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 76%);
  }
  .hero .label{margin-bottom:44px;color:rgba(255,255,255,.86)}
  .hero-logo{display:inline-block}
  /* wordmark sits right of the wave symbol in the PNG — shift so "Nicom" itself is centered */
  .hero-logo img{height:auto;width:min(560px,78vw);transform:translateX(-14.8%)}
  .hero-line{
    margin:30px auto 0;max-width:560px;
    font-size:18px;color:rgba(255,255,255,.92);
  }
  .hero-line em{color:#fff;font-weight:600}

  .brand-row{
    display:flex;align-items:center;justify-content:center;
    gap:clamp(30px,5.2vw,60px);
    margin:148px auto 0;max-width:1040px;flex-wrap:nowrap;
  }
  .brand-row a{
    display:flex;align-items:center;justify-content:center;
    flex:1 1 0;min-width:0;padding:8px 0;
    transition:transform .2s;
  }
  .brand-row a:hover{transform:translateY(-2px)}
  /* heights are set per mark, not shared — the four lockups run from a 6:1
     wordmark to a 1:1.8 stack, so equal heights would look wildly unequal */
  .brand-row img{width:auto;display:block}
  .brand-row a[href="#vika"] img{height:86px}
  .brand-row a[href="#aroma-king"] img{height:92px}
  .brand-row a[href="#kiq"] img{height:33px}
  .brand-row a[href="#aroma"] img{height:19px}
  .brand-row .sep{flex:none;width:1px;height:56px;background:#CFC9C0}

  /* the rule under the booth wash, exactly as on the stand */
  .band{margin-top:80px;height:56px;background:var(--ink)}
  .band-text{
    height:100%;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:12px;font-weight:600;
    letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;
  }

  /* ---------- trade line ---------- */
  /* runs straight off the band with no gap, so the two read as one block */
  .trade{border-bottom:1px solid var(--hair);background:var(--warm)}
  .trade-in{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .trade-step{padding:30px 34px 32px 0}
  .trade-step + .trade-step{padding-left:34px;border-left:1px solid var(--hair)}
  .trade-step .n{
    display:block;font-weight:700;color:var(--red);
    font-size:11px;letter-spacing:.16em;margin-bottom:9px;
  }
  .trade-step b{font-weight:500;font-size:16px;color:var(--ink);letter-spacing:-.005em}
  .trade-step i{
    display:block;font-style:normal;margin-top:5px;
    font-size:13px;line-height:1.5;color:var(--gray);
  }

  /* ---------- brands ---------- */
  .brands{padding:96px 0 0}
  .brands-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:64px}
  .brands-head h2{
    font-size:clamp(32px,4.2vw,48px);font-weight:600;
    letter-spacing:-.02em;line-height:1.08;margin-top:16px;
  }
  .brands-head p{max-width:340px;font-size:15px;color:var(--gray);padding-bottom:8px}

  /* the ledger — one slim line per brand: mark | copy | specs. The packshots
     were cut deliberately: three of four were weak, and a weak image costs
     more credibility than no image on a distributor page. When real studio
     photography lands it comes back as a deliberate enhancement. */
  .ledger{border-top:1px solid var(--hair)}
  .lrow{
    display:grid;grid-template-columns:250px minmax(0,1fr) 310px;
    gap:0 48px;align-items:center;padding:34px 0;
    border-bottom:1px solid var(--hair);
    min-height:238px; /* even rules — the tallest row (ES copy runs long) sets the rhythm */
  }
  .lmark{display:flex;align-items:center;min-width:0}
  .lmark img{display:block;width:auto;transition:transform .2s}
  /* sizes set per mark, never shared — the lockups run from a 6.3:1 wordmark
     to a 1:1.8 stack, so equal heights would look wildly unequal */
  #vika .lmark img{height:64px}
  #aroma-king .lmark img{height:80px}
  #kiq .lmark img{height:30px}
  #aroma .lmark img{width:140px;height:auto}
  /* the row answers the cursor: the rule runs red, the mark lifts —
     the same move the hero marks make */
  .lbody{
    border-left:1px solid var(--hair);padding:4px 0 4px 48px;min-width:0;
    transition:border-color .18s ease;
  }
  .lrow:hover .lbody,.lrow:focus-within .lbody{border-left-color:var(--red)}
  .lrow:hover .lmark img{transform:translateY(-2px)}
  .lbody .label{margin-bottom:10px}
  .lbody .cs{font-size:15px;line-height:1.6;color:var(--gray);max-width:52ch}
  .lsite{
    display:inline-flex;align-items:center;gap:7px;margin-top:14px;
    font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink);
  }
  .lsite svg{transition:transform .18s ease}
  .lsite:hover{color:var(--red)}
  .lsite:hover svg{transform:translate(1px,-1px)}

  /* spec column — the line-sheet half of the row */
  .spec{
    display:grid;grid-template-columns:118px minmax(0,1fr);
    gap:16px;align-items:baseline;padding:6px 0;
  }
  .spec dt{
    font-size:10.5px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--light);
  }
  .spec dd{font-size:14px;font-weight:500;line-height:1.35}

  /* the section's own exit — the last action in the section is ours,
     not the brand's */
  .brands-foot{
    margin-top:56px;background:var(--warm);border:1px solid var(--hair);
    padding:24px 28px;display:flex;align-items:center;justify-content:space-between;
    gap:20px 32px;flex-wrap:wrap;
  }
  .brands-foot p{font-size:15px;color:var(--gray);max-width:58ch}
  .brands-foot b{color:var(--ink);font-weight:600}

  /* ---------- territories ---------- */
  .terr{padding:104px 0;border-top:1px solid var(--hair);margin-top:56px}
  .terr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px}
  .terr-head h2{
    font-size:clamp(30px,4vw,44px);font-weight:600;
    letter-spacing:-.02em;line-height:1.1;margin-top:14px;
  }
  .terr-head p{max-width:360px;font-size:15px;color:var(--gray);padding-bottom:6px}
  /* map + market index side by side */
  .terr-body{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
  .map-wrap{position:relative}
  .map-wrap svg{width:100%;height:auto;display:block;overflow:visible}
  .map-wrap path{
    stroke-width:1.4;vector-effect:non-scaling-stroke;
    transition:fill .18s ease;cursor:default;outline:none;
  }
  .map-wrap path.c-open {fill:rgba(27,143,76,.22);  stroke:rgba(27,143,76,.68)}
  .map-wrap path.c-talks{fill:rgba(201,130,27,.24); stroke:rgba(201,130,27,.65)}
  /* conditional markets: the outline carries the "yes", the pale fill the
     "but" — so they read as reachable without competing with the open ones */
  .map-wrap path.c-limited{fill:rgba(27,143,76,.07);stroke:rgba(27,143,76,.34)}
  .map-wrap path.c-none  {fill:#EFECE6;             stroke:#DFDAD2}
  .map-wrap path.c-open.on   {fill:rgba(27,143,76,.42)}
  .map-wrap path.c-talks.on  {fill:rgba(201,130,27,.55)}
  .map-wrap path.c-limited.on{fill:rgba(27,143,76,.26);stroke:rgba(27,143,76,.62)}
  .map-wrap path.c-none.on   {fill:#E2DDD4}
  .map-wrap path.c-open:focus-visible,
  .map-wrap path.c-talks:focus-visible,
  .map-wrap path.c-limited:focus-visible,
  .map-wrap path.c-none:focus-visible{stroke:var(--red);stroke-width:2.4}

  /* live readout sits in the empty Pacific, bottom-left of the projection */
  .map-read{
    position:absolute;left:0;bottom:26%;max-width:52%;pointer-events:none;
  }
  .map-read .rn{
    font-size:clamp(20px,2.3vw,27px);font-weight:600;letter-spacing:-.015em;
    line-height:1.15;margin-bottom:6px;
  }
  .map-read .rs{
    font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  }
  .map-read .rs.s-open {color:var(--green)}
  .map-read .rs.s-talks{color:var(--amber)}
  .map-read .rs.s-limited{color:#3E8A5F}
  .map-read .rs.s-none {color:var(--light)}
  .map-read.is-idle .rn{color:var(--light);font-weight:500;font-size:15px;letter-spacing:0}

  /* grouped chips — three states beat nineteen near-identical rows */
  .terr-groups{display:flex;flex-direction:column;gap:26px}
  .tgroup{border-top:1px solid var(--hair);padding-top:15px}
  .tg-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}
  .tg-n{font-size:12px;color:var(--light);letter-spacing:.03em;white-space:nowrap}
  .tg-items{display:flex;flex-wrap:wrap;gap:8px}
  .tchip{
    font:inherit;font-size:14.5px;font-weight:500;color:var(--ink);
    background:var(--warm);border:1px solid var(--hair);border-radius:0;
    padding:8px 15px;cursor:default;
    transition:background .16s ease,border-color .16s ease;
  }
  .tchip.is-open.on  {background:rgba(27,143,76,.12); border-color:rgba(27,143,76,.42)}
  .tchip.is-talk.on  {background:rgba(201,130,27,.16);border-color:rgba(201,130,27,.48)}
  .tchip:focus-visible{outline:2px solid var(--red);outline-offset:2px}

  /* conditional markets carry their condition inline — the constraint is the
     part a distributor actually needs, and it is what proves we know the region */
  .tg-conds{display:flex;flex-direction:column}
  .tcond{
    font:inherit;text-align:left;background:none;border:0;cursor:default;
    display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline;
    padding:9px 8px 9px 0;border-bottom:1px solid var(--hair);
    transition:background .16s ease,padding .16s ease;
  }
  .tg-conds .tcond:first-child{border-top:1px solid var(--hair)}
  .tcond b{font-weight:500;font-size:14.5px;color:var(--ink)}
  .tcond span{font-size:12.5px;line-height:1.5;color:var(--gray)}
  .tcond.on{background:rgba(27,143,76,.07);padding-left:9px}
  .tcond:focus-visible{outline:2px solid var(--red);outline-offset:2px}
  .tg-note{margin-top:15px;font-size:12px;line-height:1.55;color:var(--light);max-width:40em}

  .st{
    display:inline-flex;align-items:center;gap:7px;
    font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    white-space:nowrap;
  }
  .st::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
  .st-open{color:var(--green)}
  .st-open::before{background:var(--green)}
  .st-talk{color:var(--amber)}
  .st-talk::before{background:var(--amber)}
  .st-limited{color:var(--green)}
  .st-limited::before{background:none;box-shadow:inset 0 0 0 2px var(--green)}
  .terr-note{margin-top:22px;font-size:13px;color:var(--light)}

  /* ---------- partnership ---------- */
  .partner{padding:0 0 110px}
  .partner-in{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start}
  .partner h2{
    font-size:clamp(30px,4vw,44px);font-weight:600;
    letter-spacing:-.02em;line-height:1.12;margin-top:14px;
  }
  .partner .lead{margin-top:26px;font-size:17px;color:var(--ink);max-width:480px}
  .partner .lead em{font-style:normal;color:var(--red);font-weight:600}
  .partner .cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
  .facts{border-top:1px solid var(--hair)}
  .fact{
    display:flex;justify-content:space-between;gap:24px;
    padding:20px 0;border-bottom:1px solid var(--hair);
  }
  .fact b{font-weight:600;font-size:15px}
  .fact span{font-size:14px;color:var(--gray);text-align:right;max-width:230px}

  /* ---------- compliance ---------- */
  .comply{background:var(--warm);border-top:1px solid var(--hair);padding:72px 0}
  .comply-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:40px;margin-top:36px;
  }
  .comply-item h4{font-size:15px;font-weight:600;margin-bottom:8px}
  .comply-item p{font-size:14px;color:var(--gray);line-height:1.6}
  .comply-item::before{
    content:"";display:block;width:24px;height:2px;
    background:var(--red);margin-bottom:16px;
  }

  /* ---------- contact ---------- */
  .contact{border-top:1px solid var(--hair);padding:96px 0}
  .contact-head{text-align:center;max-width:620px;margin:0 auto 48px}
  .contact-head h2{
    font-size:clamp(28px,4vw,40px);font-weight:600;
    letter-spacing:-.02em;margin-top:14px;
  }
  .contact-head p{margin:18px auto 0;color:var(--gray);font-size:16px;max-width:480px}
  form{max-width:720px;margin:0 auto}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
  .field{display:flex;flex-direction:column;gap:7px}
  .field.full{grid-column:1/-1}
  .field > label{
    font-size:11px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--gray);
  }
  .field input,.field select,.field textarea{
    font-family:inherit;font-size:15px;color:var(--ink);
    padding:12px 14px;border:1px solid var(--hair);background:var(--paper);
    border-radius:0;transition:border-color .15s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--ink);
  }
  .field textarea{resize:vertical;min-height:96px}
  .checks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:2px}
  .check{display:flex;align-items:center;gap:8px;font-size:14.5px;cursor:pointer}
  .check input{width:16px;height:16px;padding:0;accent-color:var(--red)}
  .form-actions{
    display:flex;gap:14px;align-items:center;flex-wrap:wrap;
    margin-top:26px;
  }
  .form-actions .btn{padding:15px 30px;font-size:15px}
  .form-alt{font-size:13.5px;color:var(--light)}
  .form-alt a{color:var(--gray);text-decoration:underline;text-underline-offset:3px}
  .form-alt a:hover{color:var(--red)}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:#fff;padding:64px 0 36px}
  .foot-top{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;flex-wrap:wrap;padding-bottom:44px;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .foot-top img{height:26px;width:auto;opacity:.9}
  .foot-top .brandmark{display:flex;align-items:center;gap:14px}
  .foot-mid{
    display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
    padding:36px 0 0;font-size:14px;color:#B9B4AB;
  }
  .foot-mid p{max-width:420px;line-height:1.7}
  .foot-mid .label{color:#807B72;margin-bottom:12px}
  .foot-mid a:hover{color:#fff}
  .foot-legal{
    margin-top:44px;padding-top:24px;
    border-top:1px solid rgba(255,255,255,.14);
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-size:12px;color:#807B72;
  }

  a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    nav{display:none}
    .partner-in{grid-template-columns:1fr;gap:48px}
    .brands-head,.terr-head{flex-direction:column;align-items:flex-start}
    .trade-in{grid-template-columns:1fr}
    .trade-step{padding:22px 0}
    .trade-step + .trade-step{padding-left:0;border-left:0;border-top:1px solid var(--hair)}
    .tcond{grid-template-columns:1fr;gap:3px}
    .terr-body{grid-template-columns:1fr;gap:36px}
    .map-read{position:static;max-width:none;margin-top:20px}
    .brands-head p,.terr-head p{padding-bottom:0}
    /* ledger rows stack: mark, then copy above its rule, then specs */
    .lrow{grid-template-columns:1fr;gap:16px;padding:26px 0;min-height:0}
    .lbody{border-left:0;padding:16px 0 0;border-top:1px solid var(--hair)}
  }
  @media (max-width:640px){
    .wrap{padding:0 20px}
    .brand-row{flex-wrap:wrap;gap:20px 28px}
    .brand-row .sep{display:none}
    .brand-row a{flex:0 0 40%}
    .hero{padding-top:56px}
    .band{height:48px;margin-top:56px}
    .trade-in{grid-template-columns:1fr}
    .trade-step{padding:22px 0}
    .trade-step + .trade-step{padding-left:0;border-left:0;border-top:1px solid var(--hair)}
    .brands{padding-top:72px}
    .terr,.partner{padding-top:72px}
    .terr{margin-top:24px}
    .brands-foot{padding:20px}
      .frow{grid-template-columns:1fr}
    .fact{flex-direction:column;gap:4px}
    .fact span{text-align:left;max-width:none}
  }