/* KASEN — Technical Footwear Textiles. Source: _build/kasen.css (copied to current/assets by build.py) */
:root{
  --navy:#0A1F30; --navy-2:#17304A; --navy-3:#0E2638; --blue:#58ABC9; --orange:#F26A21;
  --ink:#F4F7FA; --ink-2:#D5DEE6; --muted:#93A8BA; --line:rgba(157,190,214,.14); --line-2:rgba(157,190,214,.26);
  --wrap:1280px; --gut:clamp(20px,4vw,48px); --hdr:78px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.k{margin:0;background:var(--navy);color:var(--ink-2);font-family:'Poppins',system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
body.k *{font-family:inherit}
:where(body.k) img{max-width:100%;display:block}
:where(body.k) a{color:inherit;text-decoration:none}
:where(body.k) :where(h1,h2,h3,h4){margin:0;color:var(--ink);font-weight:700;letter-spacing:-.02em;line-height:1.08}
:where(body.k) p{margin:0}
:where(body.k) button{font:inherit;line-height:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);line-height:1.2}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.eyebrow .n{color:var(--orange)}
.h-xl{font-size:clamp(38px,5.2vw,76px);text-transform:uppercase;letter-spacing:-.025em}
.h-l{font-size:clamp(30px,3.6vw,52px)}
.h-m{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.7;color:var(--ink-2);max-width:40em}
.body{color:var(--muted);max-width:38em}
.body + .body{margin-top:1em}
.accent{color:var(--orange)}
.blue{color:var(--blue)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 26px;border-radius:2px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-o{background:var(--orange);color:#fff}
.btn-o:hover{background:#d95a16}
.btn-l{border-color:var(--line-2);color:var(--ink)}
.btn-l:hover{border-color:var(--blue);color:var(--blue)}
.link{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:6px;transition:color .2s,border-color .2s}
.link:hover{color:var(--blue);border-color:var(--blue)}
.link svg{width:14px;height:14px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(10,31,48,.94);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;height:var(--hdr);gap:32px}
.hdr-logo img{height:60px;width:auto}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav>li{list-style:none;position:relative}
.nav{padding:0;margin-top:0;margin-bottom:0}
.nav-a{display:inline-flex;align-items:center;gap:6px;height:var(--hdr);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);position:relative;transition:color .2s}
.nav-a svg{width:10px;height:10px;opacity:.7;transition:transform .25s}
.nav-a::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav>li:hover>.nav-a,.nav-a:focus-visible{color:#fff}
.nav-a.is-on{color:#fff;font-weight:600}
.nav-a.is-on::after{transform:scaleX(1)}
.nav>li:hover .nav-a svg{transform:rotate(180deg)}
.dd{position:absolute;left:-22px;top:100%;min-width:250px;background:var(--navy-3);border:1px solid var(--line-2);border-top:2px solid var(--orange);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.nav>li:hover .dd,.nav>li:focus-within .dd{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.dd a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 22px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);transition:background .2s,color .2s}
.dd a small{font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:500}
.dd a:hover{background:rgba(88,171,201,.08);color:#fff}
.dd a.is-on{color:var(--orange)}
.hdr-cta{margin-left:6px;height:44px;padding:0 20px;font-size:12px}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--ink);width:46px;height:46px;border-radius:2px;align-items:center;justify-content:center;cursor:pointer}
.menu-toggle svg{width:20px;height:20px}
@media (max-width:1140px){.nav{gap:22px}.hdr .wrap{gap:22px}}
@media (max-width:1060px){.nav,.hdr-cta{display:none}.menu-toggle{display:inline-flex}}

/* mobile drawer (ids bound by script.js: #menuBtn / #menuClose / #mobileMenu) */
#mobileMenu{position:fixed;inset:0 0 0 auto;width:min(420px,100%);background:var(--navy-3);z-index:60;transform:translateX(100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;border-left:1px solid var(--line-2)}
#mobileMenu.open{transform:none}
.mm-top{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);padding:0 24px;border-bottom:1px solid var(--line)}
.mm-top img{height:34px;width:auto}
#menuClose{background:none;border:1px solid var(--line-2);color:var(--ink);width:44px;height:44px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
#menuClose svg{width:18px;height:18px}
.mm-nav{flex:1;overflow-y:auto;padding:12px 24px 24px}
.mm-grp{border-bottom:1px solid var(--line);padding:6px 0}
.mm-a{display:block;padding:14px 0;font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.mm-a.is-on{color:var(--orange)}
.mm-sub{display:block;padding:9px 0 9px 18px;font-size:14px;color:var(--muted);border-left:1px solid var(--line-2)}
.mm-sub:last-child{margin-bottom:10px}
.mm-sub.is-on{color:var(--orange);border-color:var(--orange)}
.mm-foot{padding:20px 24px 28px;border-top:1px solid var(--line)}
.mm-foot .btn{width:100%;justify-content:center}
.mm-foot p{margin-top:14px;font-size:11px;letter-spacing:.18em;color:var(--muted);text-align:center}
/* script.js appends an untyped Tailwind backdrop div; style it here (no Tailwind on this site) */
body.k>div.fixed.inset-0{position:fixed;inset:0;background:rgba(4,12,20,.6);z-index:55}
body.k .wlk-mnav-btn,body.k .wlk-mnav,body.k .wlk-mnav-bd{display:none!important}

/* ---------- image placeholders (to be swapped for the Canva presentation visuals) ---------- */
.ph{position:relative;background-color:var(--navy-2);background-image:linear-gradient(rgba(88,171,201,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(88,171,201,.07) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px;border:1px solid var(--line-2);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:240px}
.ph::before{content:"";position:absolute;inset:14px;border:1px dashed rgba(88,171,201,.28);pointer-events:none}
.ph::after{content:"";position:absolute;right:-6%;bottom:-8%;width:46%;aspect-ratio:106/146;background:url(kasen-mark-white.png) no-repeat center/contain;opacity:.045;pointer-events:none}
.ph span{position:relative;z-index:1;max-width:30em;padding:0 32px;text-align:center;font-size:11px;font-weight:500;letter-spacing:.2em;line-height:1.9;text-transform:uppercase;color:var(--blue)}
.ph span b{display:block;font-weight:600;color:var(--ink-2);letter-spacing:.24em;margin-bottom:4px}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,6.5vw,96px) 0;border-top:1px solid var(--line);position:relative}
.sec-2{background:var(--navy-3)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.sec-head .h-l{margin-top:22px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.split .ph{aspect-ratio:5/4}
.split-r .ph{order:-1}
.stack>*+*{margin-top:26px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100svh - var(--hdr));max-height:980px;border-bottom:1px solid var(--line)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:72px clamp(28px,5vw,80px) 72px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.hero-copy h1{margin:28px 0 34px;font-size:clamp(34px,4.1vw,60px)}
.hero-plat{display:flex;flex-wrap:wrap;gap:0;font-size:15px;font-weight:600;letter-spacing:.12em;color:var(--ink);text-transform:uppercase}
.hero-plat span{padding:0 16px;border-left:1px solid var(--line-2);line-height:1}
.hero-plat span:first-child{padding-left:0;border-left:0;color:var(--orange)}
.hero-geo{margin-top:20px;font-size:12px;letter-spacing:.26em;color:var(--muted);font-weight:500}
.hero .ph{min-height:100%;border:0;border-left:1px solid var(--line-2)}
.hero{position:relative;overflow:hidden}
.hero-copy{position:relative;z-index:1}
/* client hero visual: bleeds under the copy column and dissolves into the navy ground */
.hero-media{position:relative;margin-left:-12vw;min-height:100%}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.3) 24%,#000 48%),linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.3) 24%,#000 48%),linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%);
  mask-composite:intersect}
.hero .cta-row{margin-top:48px}
.hero-head,.hero-foot{display:flex;flex-direction:column}
/* 2026-09-25: "image to end aligned with the 2 CTA buttons ... responsive without stretching".
   The media box now has the photo's OWN ratio (1920x1080), so cover never crops or zooms it
   whatever the window/zoom; both columns align to the END, so the photo's bottom edge sits
   exactly on the buttons' bottom edge. The hero's breathing room moves below both, and the
   bottom fade comes off so that edge reads as a clean line. */
.hero{align-items:end;min-height:0;max-height:none;padding-bottom:clamp(48px,6vw,88px)}
.hero-copy{justify-content:flex-end;padding-bottom:0}
.hero-media{min-height:0;aspect-ratio:1920/1080}
.hero-media img{object-position:50% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.3) 16%,#000 34%),linear-gradient(180deg,transparent 0,#000 14%);
  mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.3) 16%,#000 34%),linear-gradient(180deg,transparent 0,#000 14%)}

/* page hero (inner pages) */
.phero{padding:clamp(80px,9vw,130px) 0 clamp(44px,5vw,68px);position:relative;overflow:hidden}
.phero .h-xl{margin-top:26px;max-width:14em}
.phero .lead{margin-top:28px}
/* product hero: application tags under a shortened lead ("Engineered mesh for" / Sneakers | Athleisure) */
/* 2026-09-28: client asked for 60% of the old clamp(24px,2.3vw,34px), tags in blue, separators light grey */
.lead-tags{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .55em;margin-top:8px;font-size:clamp(14.4px,1.38vw,20.4px);font-weight:500;line-height:1.3;letter-spacing:-.005em;color:var(--blue)}
.lead-tags i{font-style:normal;color:#C9D2DA}
/* phones: three tags (Strobel) stay on one row, as in the client screenshot; only shrinks when needed */
@media (max-width:560px){.lead-tags:has(i ~ i){flex-wrap:nowrap;white-space:nowrap;font-size:min(14.4px,calc((100vw - 40px)/17))}}
.phero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,90px);align-items:center}
.phero-grid .ph{aspect-ratio:1/1}
/* about hero: client's woven-mesh band blended into the navy (transparent png, masked so
   it fades out towards the headline on the left and at its own ends) */
.phero.has-bg>.wrap{position:relative;z-index:1}
.phero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.phero-bg img{position:absolute;right:-6vw;top:50%;width:min(74vw,1500px);height:auto;max-width:none;
  transform:translateY(-12%);opacity:.62;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 30%,#000 56%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 30%,#000 56%,#000 88%,transparent 100%)}
@media (max-width:900px){
  .phero-bg img{right:-30vw;top:auto;bottom:-9%;width:150vw;transform:none;opacity:.34}
}
/* super-mesh hero: client's orange mesh wave across the whole band. The left-light /
   right-deep ramp is baked into the image (supermesh_wave_img), so no mask or opacity here */
.phero-wave .phero-bg img{left:50%;right:auto;top:50%;width:max(100%,1180px);opacity:1;
  transform:translate(-50%,-44%);-webkit-mask-image:none;mask-image:none}
@media (max-width:900px){
  .phero-wave .phero-bg img{left:auto;right:0;top:auto;bottom:-4%;width:max(100%,760px);transform:none;opacity:.6}
}
/* why-kasen hero (2026-09-28): client's workshop photo (opaque, its left is empty dark navy)
   fills the right of the band; its left edge and top/bottom fade into the navy under the text */
.phero-photo .phero-bg img{left:auto;right:0;top:0;bottom:0;width:min(78%,1500px);height:100%;
  object-fit:cover;object-position:70% 50%;transform:none;opacity:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 22%,#000 46%),linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 22%,#000 46%),linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);
  mask-composite:intersect}
/* keep the headline clear of the shoe: two lines, not "THE UPPER IS" running over the toe */
.phero-photo .h-xl{max-width:9.2em;text-shadow:0 2px 24px rgba(10,31,48,.55)}
.phero-photo .lead{max-width:26em;text-shadow:0 1px 14px rgba(10,31,48,.7)}
@media (min-width:901px){.phero-photo .phero-bg img{width:min(70%,1400px);object-position:78% 50%}}
@media (max-width:900px){
  .phero.phero-photo{padding-bottom:calc(100vw*.58 + 16px)}
  .phero-photo .phero-bg img{left:0;top:auto;bottom:0;width:100%;height:auto;aspect-ratio:16/10;object-position:80% 50%;opacity:1;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
}
/* super-mesh Overview: client's layered-shoe visual bled into the section background. It fills
   the right of the band to the screen edge; the left of the picture (its swatch circles) fades
   into the navy under the text column, and the top/bottom edges fade into the band */
.ovw-bled{overflow:hidden}
.ovw-bled>.wrap{position:relative;z-index:1}
.ovw-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.ovw-bg img{position:absolute;right:0;top:0;width:min(72%,1500px);height:100%;max-width:none;
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 22%,rgba(0,0,0,.6) 33%,#000 44%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,transparent 22%,rgba(0,0,0,.6) 33%,#000 44%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect}
@media (max-width:900px){
  .ovw-bled{padding-bottom:0;display:flex;flex-direction:column}
  .ovw-bled>.wrap{width:100%;box-sizing:border-box}
  .ovw-bg{position:relative;inset:auto;margin-top:36px;order:1}
  .ovw-bg img{position:static;display:block;width:100%;height:auto;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 86%,transparent 100%)}
}
/* functional-mesh hero + Overview merged into ONE band (PROD_MERGE_OVW): .pm-top keeps the hero
   wave, .pm-ovw the shoe. No seam line or tone change between them; the wave's lower edge fades
   out and the shoe's box reaches up under it with its own top fade, so the two cross-fade */
.pmerge{padding:0}
.pm-top,.pm-ovw{position:relative}
.pm-top>.wrap,.pm-ovw>.wrap{position:relative;z-index:1}
.pm-top{padding:clamp(80px,9vw,130px) 0 0}
.pm-top .phero-bg img{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 96%);mask-image:linear-gradient(180deg,#000 62%,transparent 96%)}
.pm-ovw{padding:clamp(72px,8vw,120px) 0 clamp(56px,6.5vw,96px)}
@media (min-width:901px){
  .pm-ovw .ovw-bg{top:calc(-1 * clamp(60px,7vw,120px))}
  .pm-top .phero-wave .phero-bg img,.pm-top.phero-wave .phero-bg img{top:22px;transform:translateX(-50%)}
}
@media (max-width:900px){
  .pm-top{padding-bottom:clamp(64px,7vw,100px)}
  .pm-ovw{padding:0;display:flex;flex-direction:column}
  .pm-ovw>.wrap{width:100%;box-sizing:border-box}
}
/* super-mesh Technology (fibre_tech): conventional surface coating vs KASEN fibre-level coating,
   the client's "Difference Is at Fibre Level" slide as live HTML */
.fib-sub{color:var(--blue);font-size:clamp(17px,1.5vw,20px)}
.fib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.fib-card{border-radius:4px;padding:clamp(26px,3vw,40px);border:1px solid var(--line-2)}
.fib-conv{background:var(--navy-2)}
.fib-kasen{background:var(--navy);border-color:var(--orange)}
.fib-k{font-size:clamp(15px,1.3vw,18px);font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.fib-kasen .fib-k{color:var(--orange)}
.fib-bars{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:28px;height:80px;
  padding:0 clamp(14px,2vw,22px);background:rgba(10,31,48,.55);border:1px solid var(--line-2);border-radius:3px}
.fib-bars i{display:block;flex:0 1 16px;height:36px;background:#4F7385}
.fib-kasen .fib-bars{border-color:rgba(242,106,33,.55)}
.fib-kasen .fib-bars i{flex-basis:20px;height:58px;border-radius:999px;background:var(--orange)}
.fib-cap{margin-top:22px;font-size:15px;font-style:italic;color:var(--muted)}
.fib-pts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.fib-pts li{position:relative;padding-left:28px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.fib-pts li::before{content:"\2014";position:absolute;left:0;color:var(--muted)}
.fib-kasen .fib-pts li{color:var(--ink);font-weight:600}
.fib-kasen .fib-pts li::before{content:"\2713";color:var(--orange)}
@media (max-width:760px){.fib{grid-template-columns:1fr}}
/* super-mesh Performance (perf_band): 3 stat cards + the client's test-rig banner, caption on its empty navy left */
.perf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.perf-stat{background:var(--navy-2);border-radius:4px;padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:clamp(22px,2.6vw,40px)}
.perf-stat b{font-size:clamp(40px,4.2vw,64px);font-weight:600;color:var(--orange);line-height:1;letter-spacing:-.02em}
.perf-stat span{font-size:clamp(13px,1.1vw,16px);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);line-height:1.35}
.perf-band{position:relative;margin:clamp(14px,1.6vw,22px) 0 0;border-radius:4px;overflow:hidden;background:#0b1a2e}
.perf-band img{display:block;width:100%;height:auto;aspect-ratio:2098/749;object-fit:cover}
.perf-band figcaption{position:absolute;left:clamp(24px,3vw,44px);top:50%;transform:translateY(-50%);max-width:30%;font-size:clamp(17px,1.6vw,24px);font-weight:600;color:var(--ink);line-height:1.3}
@media (max-width:760px){
  .perf-stats{grid-template-columns:1fr}
  .perf-band img{aspect-ratio:4/3;object-position:72% 50%}
  .perf-band figcaption{position:static;transform:none;max-width:none;padding:18px 22px 20px;background:var(--navy-2)}
}
/* strobel-insole Technology & performance (strobel_tech): client's "Consistency Under Every Upper." slide,
   visual left, parameters / flow / influences right */
.stt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(24px,3vw,48px);align-items:stretch}
.stt-vis{margin:0;border-radius:6px;overflow:hidden;min-height:320px}
.stt-vis picture{display:block;height:100%}
.stt-vis img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.stt-body{min-width:0}
.stt-k{margin:0 0 16px;font-size:clamp(14px,1.1vw,16px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.stt-params{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.stt-params li{display:flex;align-items:center;justify-content:center;text-align:center;min-height:62px;padding:8px;
  border:1px solid var(--line-2);border-radius:4px;background:var(--navy-3);font-size:clamp(13px,1vw,15px);font-weight:600;color:var(--ink-2)}
.stt-flow{margin:clamp(22px,2.4vw,32px) 0 clamp(28px,3vw,40px);display:flex;align-items:center;gap:10px}
.stt-flow span{flex:1 1 0;display:flex;align-items:center;justify-content:center;text-align:center;min-height:84px;padding:12px 16px;
  border-radius:4px;background:var(--navy-2);font-size:clamp(15px,1.2vw,17px);font-weight:600;color:var(--ink);line-height:1.3}
.stt-flow span:last-child{background:var(--blue);color:var(--navy)}
.stt-flow i{flex:0 0 22px;color:var(--blue);display:flex}
.stt-flow svg{width:22px;height:22px}
.stt-infl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 20px}
.stt-infl li{position:relative;padding-left:20px;font-size:clamp(14px,1.1vw,16px);line-height:1.4;color:var(--ink-2)}
.stt-infl li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border-radius:50%;background:var(--blue)}
@media (max-width:1100px){.stt-params{grid-template-columns:repeat(3,minmax(0,1fr))}.stt-infl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.stt{grid-template-columns:1fr}.stt-vis{min-height:0;aspect-ratio:4/3}}
@media (max-width:560px){
  .stt-params{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stt-flow{flex-direction:column;align-items:stretch}
  .stt-flow span{min-height:60px}
  .stt-flow i{align-self:center;transform:rotate(90deg)}
}
/* super-mesh Categories (cats_band): client's "10 Masterpiece Categories" slide, 5x2 tiles + the samples CTA */
.mcats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.1vw,16px)}
.mcats li{background:var(--navy-2);border-radius:4px;overflow:hidden;min-width:0}
.mcats picture{display:block}
.mcats img{display:block;width:100%;height:auto;aspect-ratio:220/150;object-fit:cover}
.mcats p{margin:0;display:flex;align-items:baseline;gap:14px;padding:13px 16px 14px;font-size:clamp(14px,1.05vw,16px);font-weight:600;color:var(--ink);line-height:1.25}
.mcats p span{color:var(--orange);font-size:.88em;font-variant-numeric:tabular-nums}
.mcats-cta{margin-top:clamp(28px,3vw,44px)}
/* functional-mesh Categories (fmesh_cats_band): client's "Eight mesh categories" slide, 4x2 pattern tiles */
.fmcats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.fmcats li{background:var(--navy-2);border-radius:4px;overflow:hidden;min-width:0}
.fmcats picture{display:block}
.fmcats img{display:block;width:100%;height:auto;aspect-ratio:273/102;object-fit:cover}
.fmcats li>div{padding:clamp(16px,1.4vw,22px) clamp(16px,1.4vw,22px) clamp(18px,1.6vw,24px)}
.fmcats h3{font-size:clamp(16px,1.2vw,19px);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.fmcats p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:900px){.fmcats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.fmcats{grid-template-columns:1fr}}
@media (max-width:900px){.mcats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  /* number over name: "Thermochromic" beside its number clipped at 320-390 */
  .mcats p{flex-direction:column;gap:3px;padding:10px 12px 12px;font-size:clamp(12px,3.8vw,14px)}
  .mcats-cta .btn{white-space:normal;height:auto;min-height:50px;padding:12px 18px;text-align:center;line-height:1.35}
}
.crumbs{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.crumbs a:hover{color:var(--blue)}
.crumbs i{font-style:normal;margin:0 10px;opacity:.5}

/* platform cards */
.plats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.plat{background:var(--navy);display:flex;flex-direction:column;transition:background .3s var(--ease)}
.plat:hover{background:var(--navy-3)}
.plat .ph{aspect-ratio:4/3;min-height:0;border:0;border-bottom:1px solid var(--line)}
/* real client visual in a platform card: no placeholder frame/mark; square art cropped from the top so the shoe keeps its heel tab */
.ph-img::before,.ph-img::after{display:none}
.ph-img img{object-position:50% 4%;transition:transform .6s var(--ease)}
.plat:hover .ph-img img{transform:scale(1.03)}
.plat-b{padding:34px 34px 38px;display:flex;flex-direction:column;flex:1}
.plat-n{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--muted)}
.plat h3{font-size:26px;margin:14px 0 14px;text-transform:uppercase;letter-spacing:-.005em}
.plat p{color:var(--muted);font-size:15px;flex:1}
.plat .link{margin-top:30px;align-self:flex-start}
.plat.is-flag .plat-n{color:var(--orange)}
.plat.is-flag h3::after{content:"Flagship";display:inline-block;vertical-align:middle;margin-left:12px;padding:5px 9px 4px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);border:1px solid rgba(242,106,33,.5);line-height:1}

/* problem statement */
.problem{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,7vw,120px)}
.problem .h-l{font-size:clamp(30px,3.4vw,50px)}
.problem .quote{font-size:clamp(22px,2.2vw,32px);font-weight:500;color:var(--ink);line-height:1.4;letter-spacing:-.01em}
.problem .quote em{font-style:normal;color:var(--blue)}

/* home: the challenge (client's Canva slide, 2026-09-25) */
.chal-head{max-width:1040px;margin-bottom:clamp(48px,6vw,80px)}
.chal-head .h-l{margin-top:22px}
.chal{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(16px,1.6vw,22px)}
.chal-k{display:block;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);line-height:1.3}
.chal-main{background:var(--navy-2);border-radius:4px;padding:clamp(28px,3.4vw,48px)}
.chal-main .h-m{margin-top:18px;max-width:24em}
.chal-list{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0}
.chal-list li{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:baseline}
.chal-list li+li{margin-top:22px}
.chal-list i{font-style:normal;font-size:26px;font-weight:600;color:var(--orange);line-height:1}
.chal-list b{display:block;color:var(--ink);font-weight:600;font-size:17px;line-height:1.4}
.chal-list p{margin-top:6px;color:var(--ink-2);font-size:15px;line-height:1.6}
.chal-side{display:grid;grid-template-rows:1fr 1fr;gap:clamp(16px,1.6vw,22px)}
.chal-also{border:1px solid var(--line-2);border-radius:4px;padding:clamp(24px,2.4vw,30px)}
.chal-also .chal-k{color:var(--blue)}
.chal-also p{margin-top:16px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.chal-ans{background:var(--blue);border-radius:4px;padding:clamp(24px,2.4vw,30px);display:flex;flex-direction:column;justify-content:center;gap:18px;color:var(--navy);transition:background .25s}
.chal-ans:hover{background:#6DBAD6}
.chal-ans p{font-size:clamp(21px,1.8vw,26px);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.chal-ans svg{width:22px;height:22px}
.chal-go{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:6px}
.chal-go svg{width:16px;height:16px}
/* the mesh problem, illustrated: client's 3-panel graphic, INSIDE .chal-main in place of the
   old 01-03 list (2026-09-25); tight gaps so it reads as their one image */
.chal-vis{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chal-vis li{margin:0;border-radius:4px;overflow:hidden;background:#082233}
.chal-vis img{display:block;width:100%;height:auto}
/* 2026-09-25: panel text is live HTML at the .chal-also size (15px) instead of baked into the
   image; #082233 = the image ground, so the cropped shoe band sits seamlessly under it.
   Subgrid keeps the three shoe bands level although 03's description runs a line longer. */
.chal>*{min-width:0}   /* the live panel text must not blow the 1fr track out on phones */
.chal-vis{grid-template-rows:auto auto}
.chal-vis li{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.mp-head{padding:clamp(20px,1.8vw,26px) clamp(16px,1.4vw,20px) 14px}
.mp-n{display:block;font-size:clamp(26px,2.2vw,32px);font-weight:700;color:var(--orange);line-height:1;letter-spacing:-.01em}
.mp-head h4{margin-top:10px;font-size:clamp(19px,1.5vw,22px);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.mp-head p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.mp-labs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:4px}
.mp-labs span{padding:0 4px;font-size:15px;line-height:1.35;text-align:center;color:var(--ink-2)}
.mp-brace{display:block;position:relative;height:14px;margin:12px 11% 0;border:1px solid rgba(88,171,201,.45);border-top:0;border-radius:0 0 8px 8px}
.mp-brace::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:12px;background:rgba(88,171,201,.45)}
.mp-res{display:flex;gap:14px;align-items:center;margin:24px clamp(12px,1.2vw,16px) clamp(16px,1.4vw,20px);padding:16px;border:1px solid rgba(88,171,201,.3);border-radius:10px;background:#0D2A40;font-size:15px;line-height:1.55;color:var(--ink-2)}
.mp-res i{flex:0 0 34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;font-style:normal;font-weight:700;font-size:20px;line-height:34px;text-align:center}
.mp-res b{color:var(--ink);font-weight:700}
@media (max-width:760px){
  /* phones: swipe rail, one panel ~82% wide so the baked-in text stays readable */
  .chal-vis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;margin-right:-28px;padding-right:28px}
  .chal-vis::-webkit-scrollbar{display:none}
  .chal-vis li{flex:0 0 min(82%,380px);scroll-snap-align:start}
}
/* 2026-09-25: "increase the text size by 30%" - the text is baked into the image, so every
   panel is drawn 1.3x as wide as before at each width. Desktop: the side boxes move under the
   dark box (a 2-col row) to free the width; the row is 1.3x the old 7fr column's inner width. */
@media (min-width:901px){
  .chal{grid-template-columns:1fr}
  .chal-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  /* 2026-09-25 (live panel text): full box width, so 03's labels fit on two lines */
}
@media (max-width:900px){
  /* swipe rail, bleeding to the screen edge so the next panel still peeks */
  .chal-vis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;margin-right:calc(-1 * clamp(28px,3.4vw,48px) - var(--gut));padding-right:calc(clamp(28px,3.4vw,48px) + var(--gut))}
  .chal-vis::-webkit-scrollbar{display:none}
  .chal-vis li{flex:0 0 calc((100% - 16px) * .4333);scroll-snap-align:start;display:flex;flex-direction:column}
}
@media (max-width:760px){
  .chal-vis li{flex-basis:min(106.6%,494px)}
}

/* home: who we are + what we offer, one band, no image */
.who{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:end}
.who .h-l{margin-top:22px}
.who-txt .lead{max-width:none}
.who-txt .cta-row{margin-top:26px}
.offer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:end;margin:clamp(64px,7vw,110px) 0 clamp(36px,4vw,56px);padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--line-2)}
.offer .h-m,.offer .h-l{margin-top:22px}
/* 2026-09-25: what we offer is its own band, under the challenge - no top rule */
.offer-sec .offer{margin-top:0;padding-top:0;border-top:0}
/* 2026-09-25: home "what we offer" split 50/25/25 like the client's slide - Super Mesh fills the left half
   (text over its visual), Functional Mesh + Strobel Insole stack on the right as visual|text rows.
   Desktop only: at <=900px the cards stack. 2026-09-25: about.html "Our solutions" uses it too (offer-sec). */
@media (min-width:901px){
  .offer-sec .plats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto}
  .offer-sec .plat.is-flag{grid-row:1/3;position:relative;min-height:540px}
  .offer-sec .plat.is-flag .ph{position:absolute;inset:0;aspect-ratio:auto;min-height:0;border:0}
  .offer-sec .plat.is-flag .ph-img img{object-position:62% 30%}
  .offer-sec .plat.is-flag .ph-img::after{display:block;content:"";inset:0;right:0;bottom:0;width:auto;aspect-ratio:auto;opacity:1;
    background:linear-gradient(90deg,rgba(10,31,48,.94) 0,rgba(10,31,48,.8) 30%,rgba(10,31,48,.25) 52%,rgba(10,31,48,0) 66%)}
  .offer-sec .plat.is-flag .plat-b{position:relative;z-index:1;max-width:48%;padding:44px 0 44px 44px}
  .offer-sec .plat.is-flag h3{font-size:clamp(28px,2.6vw,36px)}
  .offer-sec .plat.is-flag p{color:var(--ink-2)}
  .offer-sec .plat:not(.is-flag){flex-direction:row}
  .offer-sec .plat:not(.is-flag) .ph{flex:0 0 50%;aspect-ratio:auto;min-height:250px;border-bottom:0;border-right:1px solid var(--line)}
  .offer-sec .plat:not(.is-flag) .plat-b{padding:30px 28px 32px;min-width:0}
  .offer-sec .plat:not(.is-flag) h3{font-size:clamp(18px,1.7vw,22px);margin:12px 0}
  .offer-sec .plat:not(.is-flag) p{font-size:14px}
  .offer-sec .plat:not(.is-flag) .link{margin-top:22px}
}

/* steps (technology) */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.step{padding:40px 36px 10px 0;position:relative}
.step+.step{padding-left:36px;border-left:1px solid var(--line)}
.step::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:2px;background:var(--orange)}
.step+.step::before{left:36px}
.step-n{font-size:56px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.04em}
.step-n small{font-size:14px;color:var(--orange);letter-spacing:.1em;margin-left:6px;vertical-align:top}
.step h3{font-size:20px;font-weight:600;margin:26px 0 12px;text-transform:uppercase;letter-spacing:.04em}
.step p{color:var(--muted);font-size:15px}
.band-ph{margin-top:clamp(56px,6vw,90px)}
.band-ph .ph{aspect-ratio:21/8}

/* why */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.why>div{background:var(--navy);padding:44px 36px 48px}
.sec-2 .why>div{background:var(--navy-3)}
.why-k{font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--orange)}
.why h3{font-size:24px;margin:22px 0 14px;text-transform:uppercase;letter-spacing:.01em}
.why p{color:var(--muted);font-size:15px}
/* about: client's idea -> design -> scale illustration (transparent png) between the heading
   and the three pillars; its circles run in the same order as the columns below */
.stand-vis{margin:calc(clamp(48px,6vw,80px)*-.4) auto clamp(40px,5vw,72px);max-width:1120px}
.stand-vis img{display:block;width:100%;height:auto}
/* client 2026-09-25: pillars 01-03 stacked on the LEFT, illustration on the RIGHT */
@media (min-width:901px){
  .stand{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:center}
  .stand .why{grid-template-columns:1fr}
  .stand .stand-vis{margin:0;max-width:none}
}
@media (max-width:900px){
  .stand{display:flex;flex-direction:column}
  .stand .stand-vis{order:-1}
}
/* client 2026-09-25 18:43: tighter pillar boxes, same type sizes */
.stand .why>div{padding:20px 28px 22px}
.stand .why h3{margin:8px 0 6px}
.pull{margin-top:clamp(64px,7vw,110px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.pull::before{content:"";width:64px;height:2px;background:var(--orange);margin-top:26px}
.pull blockquote{margin:0;font-size:clamp(26px,3vw,44px);font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:-.02em;max-width:22em}
/* client 2026-09-25 18:49: about.html quote at the pillar-heading size (.why h3 = 24px) */
.pull-s::before{margin-top:15px}
.pull-s blockquote{font-size:24px;line-height:1.35;letter-spacing:-.01em;max-width:36em}
.pull cite{display:block;margin-top:22px;font-style:normal;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* SKICORP */
.sk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line)}
.sk{padding:34px 28px 36px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.sk b{display:block;font-size:clamp(38px,3.6vw,54px);font-weight:700;color:var(--orange);line-height:1;letter-spacing:-.03em}
.sk span{display:block;margin-top:14px;font-size:13px;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase;font-weight:500;line-height:1.5}
.sk-pillars{display:flex;flex-wrap:wrap;margin-top:40px;border:1px solid var(--line)}
.sk-pillars span{flex:1 1 0;min-width:150px;text-align:center;padding:20px 14px;font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--blue);border-right:1px solid var(--line)}
.sk-pillars span:last-child{border-right:0}
.sk-tag{margin-top:18px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:500}

/* values index */
.vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.vals div{padding:30px 24px 30px 0;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:baseline}
.vals i{font-style:normal;font-size:12px;font-weight:600;color:var(--orange);letter-spacing:.1em}
.vals b{font-size:15px;font-weight:600;letter-spacing:.14em;color:var(--ink);text-transform:uppercase}

/* insights */
.ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.card-i{display:flex;flex-direction:column}
.card-i .ph{aspect-ratio:16/11;min-height:0}
.card-i .tag{margin-top:26px;font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--blue);text-transform:uppercase}
.card-i h3{font-size:21px;font-weight:600;margin-top:12px;line-height:1.35;letter-spacing:-.01em}
.card-i p{margin-top:12px;color:var(--muted);font-size:14px}
.soon{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);padding:6px 10px 5px;align-self:flex-start}

/* spec frame (product pages) */
.spec{border:1px solid var(--line-2)}
.spec-h{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 28px;border-bottom:1px solid var(--line-2);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.spec-h em{font-style:normal;color:var(--orange)}
.spec .ph{border:0;min-height:320px}

/* CTA band */
.cta{padding:clamp(60px,6.5vw,96px) 0;border-top:1px solid var(--line);background:var(--navy-2);position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:max(-60px,calc((100vw - var(--wrap))/2 - 60px));top:50%;transform:translateY(-50%);height:130%;aspect-ratio:106/146;background:url(kasen-mark-white.png) no-repeat center/contain;opacity:.05;pointer-events:none}
.cta .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;align-items:end}
.cta .h-xl{font-size:clamp(36px,4.6vw,68px);margin-top:24px}
.cta .lead{margin-top:22px}
.cta .cta-row{justify-content:flex-end;margin-top:0}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,100px);align-items:start}
/* 2026-09-28: form on the LEFT, info on the right (desktop only; phones keep info first) */
@media (min-width:901px){.contact{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.contact>.kform{order:-1}}
.inc{margin-top:36px;border-top:1px solid var(--line-2)}
.inc div{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.inc i{font-style:normal;color:var(--orange);font-weight:600;font-size:12px;letter-spacing:.1em;padding-top:3px}
.inc b{display:block;color:var(--ink);font-weight:600;font-size:15px}
.inc span{display:block;color:var(--muted);font-size:14px}
/* contact person card (2026-09-28) */
.kcard{margin-top:44px;background:var(--navy-2);border:1px solid var(--line-2);padding:28px 28px 24px}
.kcard h3{margin-top:14px;font-size:clamp(24px,2.2vw,30px)}
.kcard-org{margin-top:4px;color:var(--muted);font-size:15px}
.kcard-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.kcard-list a{display:flex;align-items:center;gap:14px;color:var(--ink);font-size:15px;min-width:0;transition:color .2s}
.kcard-list a:hover{color:var(--blue)}
.kcard-list i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);display:grid;place-items:center;color:var(--ink)}
.kcard-list svg{display:block}
.kcard-list span{overflow-wrap:anywhere}
@media (max-width:560px){.kcard{padding:24px 20px 20px}.kcard-list a{gap:12px;font-size:14px}.kcard-list i{width:36px;height:36px}}
.kform{background:var(--navy-3);border:1px solid var(--line-2);padding:clamp(28px,4vw,52px)}
.kform h2{font-size:clamp(24px,2.2vw,32px);margin-bottom:8px}
.kform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kform label{display:block;margin-top:22px}
.kform label>span{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.kform label>span em{font-style:normal;color:var(--orange)}
.kform input,.kform textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--ink);font-size:16px;padding:10px 0 12px;outline:none;border-radius:0;transition:border-color .2s}
.kform textarea{resize:vertical;min-height:130px}
.kform input:focus,.kform textarea:focus{border-color:var(--blue)}
.kform input::placeholder,.kform textarea::placeholder{color:rgba(147,168,186,.55)}
.kform .btn{margin-top:36px}
.kform .wlk-form-status{margin-top:22px;padding:14px 16px;font-size:14px;border-radius:2px}
.kform .wlk-form-status.hidden{display:none}
/* contact: Super Mesh category checkboxes */
.kform .kchecks{border:0;margin:26px 0 0;padding:0;min-width:0}
.kform .kchecks legend{padding:0;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.kform .kchk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px 18px}
.kform .kchk{position:relative;display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;font-size:15px;color:var(--ink);line-height:1.3}
.kform .kchk>span{display:inline;margin:0;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.kform .kchk input:checked~span{color:var(--ink)}
.kform .kchk input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}
.kform .kchk i{flex:0 0 18px;width:18px;height:18px;border:1px solid var(--line-2);display:grid;place-items:center;transition:border-color .2s,background .2s}
.kform .kchk i::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0}
.kform .kchk:hover i{border-color:var(--blue)}
.kform .kchk input:checked+i{background:var(--orange);border-color:var(--orange)}
.kform .kchk input:checked+i::after{opacity:1}
.kform .kchk input:focus-visible+i{outline:2px solid var(--blue);outline-offset:2px}
.geo{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.geo span{border:1px solid var(--line-2);padding:10px 16px 9px;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--ink-2)}

/* other solutions */
.others{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.others a{background:var(--navy);padding:40px 36px;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:background .25s}
.others a:hover{background:var(--navy-3)}
.others small{display:block;font-size:11px;letter-spacing:.22em;color:var(--muted);font-weight:600}
.others b{display:block;margin-top:8px;font-size:24px;color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:-.005em}
.others svg{width:22px;height:22px;color:var(--orange);flex:none}

/* footer */
.ftr{border-top:1px solid var(--line);background:#081926;padding:clamp(48px,5.5vw,72px) 0 0;font-size:14px}
.ftr-top{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:40px}
.ftr-logo img{height:48px;width:auto}
.ftr-about{margin-top:24px;color:var(--muted);max-width:26em}
.ftr-grp{margin-top:18px;font-size:11px;letter-spacing:.24em;color:var(--blue);font-weight:600}
.ftr h4{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin-bottom:22px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li+li{margin-top:12px}
.ftr li a{color:var(--muted);transition:color .2s}
.ftr li a:hover{color:#fff}
.ftr-bot{margin-top:64px;border-top:1px solid var(--line);padding:24px 0 28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--muted);letter-spacing:.06em}
.ftr-bot .geo-t{letter-spacing:.24em}

/* reveal — only armed once script runs; everything is visible without JS */
html.rv-on .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.rv-on .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.rv-on .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hero{grid-template-columns:1fr;min-height:0;max-height:none}
  .hero-copy{padding:72px var(--gut) 64px}
  .hero .ph{min-height:0;aspect-ratio:16/11;border-left:0;border-top:1px solid var(--line-2)}
  .hero{padding-bottom:0}
  .hero-media{margin:-48px 0 0;min-height:0;aspect-ratio:1920/1080}
  .hero-media img{object-position:50% 50%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 86%,transparent 100%)}
  /* 2026-09-25 client (mobile): photo moves up between the headline and the platforms/CTAs,
     and that lower block blends into it. .hero-copy dissolves (display:contents) so head,
     media and foot become one ordered column; the photo fades into the navy at both ends and
     the foot rides up onto the faded tail. */
  .hero{display:flex;flex-direction:column;align-items:stretch}
  .hero-copy{display:contents}
  .hero-head{order:0;padding:72px var(--gut) 0}
  .hero-head h1{margin-bottom:8px}
  .hero-media{order:1;margin:0;position:relative;z-index:0}
  .hero-media img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 46%,transparent 90%);
    mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 46%,transparent 90%)}
  .hero-foot{order:2;position:relative;z-index:1;margin-top:-36px;padding:0 var(--gut) 64px}
  .sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-top{grid-template-columns:1fr 1fr}
  .ftr-top>div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .sec-head,.split,.problem,.phero-grid,.contact,.cta .wrap,.who,.offer{grid-template-columns:1fr}
  .who,.offer{align-items:start}
  .chal{grid-template-columns:1fr}
  .chal-side{grid-template-rows:none}
  .sec-head{align-items:start}
  .split-r .ph{order:0}
  .plats,.why,.ins{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step,.step+.step{padding:36px 0 30px;border-left:0}
  .step+.step{border-top:1px solid var(--line)}
  .step+.step::before{left:0}
  .cta .cta-row{justify-content:flex-start}
  .band-ph .ph{aspect-ratio:4/3}
  .phero-grid .ph{aspect-ratio:4/3}
  .others{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sk-grid{grid-template-columns:1fr 1fr}
  .sk{padding:26px 18px}
  .vals{grid-template-columns:1fr}
  .kform .grid2{grid-template-columns:1fr;gap:0}
  .chal-list li{grid-template-columns:44px minmax(0,1fr)}
  /* one row on phones: size follows the column width (~26.5em of text + 40px padding) */
  .hero-plat{flex-wrap:nowrap;white-space:nowrap;font-size:min(14px,calc((100vw - 84px)/26.5));letter-spacing:.06em}
  .hero-plat span{padding:0 8px}
  .ftr-top{grid-template-columns:1fr}
  .btn{height:50px;padding:0 20px}
  .cta-row .btn{flex:1 1 100%;justify-content:center}
  .sk-pillars>div{min-width:50%;border-bottom:1px solid var(--line)}
}

/* ---------------------------------------------------------------- SKICORP band (2026-09-28)
   Client: "same as the aakar-website #skicorp section, keep navy/orange and our text".
   One row: left = heading, the 8 stats, the 5 pillars (now with icons); right = a narrow
   column with the category count and an endless vertical rail of 14 category cards, each
   with its maker's logo on a white plate. At >=1080px the rail is taken out of flow so the
   row height comes from the LEFT column and the rail ends level with the pillars. */
.sk-split{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,56px)}
.sk-main>*+*{margin-top:clamp(36px,4vw,48px)}
.sk-main .h-l{margin-top:22px}
.sk-sec .sk b{font-size:clamp(30px,2.9vw,44px)}
.sk-sec .sk{padding:28px 22px 30px}
.sk-sec .sk span{font-size:12px}
.sk-sec .sk-pillars{margin-top:0;border-top:0}
.sk-sec .sk-pillars>div{flex:1 1 0;min-width:120px;text-align:center;padding:22px 12px;border-right:1px solid var(--line);transition:background .28s ease}
.sk-sec .sk-pillars>div:last-child{border-right:0}
.sk-sec .sk-pillars>div:hover{background:rgba(88,171,201,.07)}
.sk-sec .sk-pillars svg{display:block;margin:0 auto 12px;color:var(--orange)}
.sk-sec .sk-pillars span{display:block;flex:none;min-width:0;padding:0;border:0;font-size:11.5px;letter-spacing:.14em;color:var(--blue)}

.sk-pf{display:grid;grid-template-rows:auto auto;gap:24px;min-height:0}
.sk-pf-n{font-size:clamp(56px,6vw,76px);font-weight:700;line-height:.95;letter-spacing:-.04em;color:var(--orange)}
.sk-pf-l{margin:8px 0 0;max-width:24ch;font-size:18px;font-weight:600;line-height:1.35;color:var(--ink)}
.sk-pf-tag{margin:16px 0 0;max-width:40ch;font-size:15px;font-style:italic;line-height:1.5;color:var(--muted)}
.sk-pf-link{display:block;max-width:32ch;margin-top:14px;font-size:15px;font-weight:600;line-height:1.5;color:var(--orange);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s ease}
.sk-pf-link:hover{color:var(--ink)}
.sk-pf-link svg{display:inline;width:14px;height:14px;vertical-align:-2px;margin-left:4px}
.sk-pf-rail{position:relative;min-height:0}
.sk-rail{--gap:11px;--fade:48px;position:relative;height:304px;overflow:hidden;margin-inline:-6px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
.sk-track{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:var(--gap);will-change:transform;animation:sk-rail-up 83s linear infinite}
/* one period = one full set + its gap, not a bare -50% */
@keyframes sk-rail-up{from{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--gap) / 2))}}
.sk-rail:hover .sk-track,.sk-rail:focus-within .sk-track{animation-play-state:paused}
.sk-card{flex:0 0 auto;position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 18px 14px 21px;background:var(--navy-2);border:1px solid var(--line-2);transition:border-color .25s ease}
.sk-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);opacity:.5;transition:opacity .25s ease}
.sk-card:hover{border-color:rgba(242,106,33,.6)}
.sk-card:hover::before{opacity:1}
.sk-card b{font-size:15px;font-weight:600;line-height:1.25;color:var(--ink)}
.sk-logo{display:block;line-height:0;width:152px;max-width:100%;margin-top:5px;background:#fff}
.sk-logo img{display:block;width:100%;height:auto}
/* 2026-09-29: reversed - blue ground, white logo + white text (client) */
.sk-card--k{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px rgba(88,171,201,.32),0 18px 40px -18px rgba(88,171,201,.6)}
.sk-card--k:hover{border-color:var(--blue)}
.sk-card--k::before{opacity:1;background:#fff}
.sk-here{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;padding:4px 9px;background:var(--navy);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;line-height:1.2;text-transform:uppercase}
.sk-here::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.sk-card--k b{color:#fff;font-weight:700;font-size:16px}
.sk-card--k .sk-logo{background:transparent;mix-blend-mode:normal}
.sk-card--tbc b{color:var(--muted);font-weight:500;font-style:italic}
@media (min-width:1080px){
  .sk-split{grid-template-columns:minmax(0,1fr) minmax(19rem,22rem);gap:56px;align-items:stretch}
  .sk-pf{grid-template-rows:auto minmax(15rem,1fr)}
  .sk-pf-rail{min-height:15rem}
  .sk-rail{position:absolute;inset:0;height:auto;--fade:56px}
}
@media (max-width:1079.98px){.sk-logo{width:140px}}
@media (max-width:560px){
  .sk-rail{height:256px;--fade:40px}
  .sk-sec .sk{padding:24px 16px}
  .sk-sec .sk-pillars>div{min-width:50%;border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  .sk-rail{overflow-y:auto;-webkit-mask-image:none;mask-image:none}
  .sk-track{animation:none}
  .sk-track>[aria-hidden="true"]{display:none}
}
/* supplier-origin flag on a rail card (Korea / Italy / USA), 2026-09-28.
   Pinned to the card's top-right corner, no country caption (17:25 client order). Click/tap toggles the tip (kasen.js). */
.sk-flag{position:absolute;top:11px;right:11px;display:block;margin:0;padding:3px;line-height:0;background:none;border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sk-card:has(.sk-flag) b{padding-right:36px}
.sk-flag img{display:block;width:26px;height:auto;box-shadow:0 0 0 1px rgba(157,190,214,.3);transition:transform .25s ease,box-shadow .25s ease}
.sk-flag:hover img,.sk-flag:focus-visible img,.sk-flag.is-open img{transform:scale(1.1);box-shadow:0 0 0 1px rgba(88,171,201,.9),0 4px 14px -4px rgba(88,171,201,.7)}
.sk-flag:focus-visible{outline:1px solid var(--blue);outline-offset:2px}
.sk-flag-tip{position:absolute;top:calc(100% + 7px);right:0;padding:6px 10px;background:var(--ink);color:var(--navy);font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.3;width:max-content;max-width:118px;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;pointer-events:none}
.sk-flag-tip::before{content:"";position:absolute;bottom:100%;right:14px;border:5px solid transparent;border-bottom-color:var(--ink)}
.sk-flag.is-open .sk-flag-tip{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sk-card:has(.sk-flag.is-open){z-index:2}

/* ---- why-kasen.html from the client's slides (2026-09-28) ---- */
.wk-chain{margin-top:clamp(36px,4vw,56px)}
.wk-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}
.wk-flow li{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:60px;padding:10px 12px;background:var(--navy-2);border-radius:6px;color:var(--ink);font-size:clamp(15px,1.4vw,20px);font-weight:600;line-height:1.25}
.wk-flow li+li::before{content:"\2192";position:absolute;right:100%;top:50%;width:26px;transform:translateY(-50%);text-align:center;color:var(--muted);font-weight:400}
.wk-bars{margin-top:22px;display:grid;gap:12px}
.wk-bar span{display:block;margin-bottom:8px;font-size:15px;line-height:1.3;color:var(--muted)}
.wk-bar i{display:block;height:12px;border-radius:6px;background:#8E9FB2;width:calc((100% - 104px)/5)}
.wk-bar--k span{color:var(--blue);font-weight:600}
.wk-bar--k i{background:var(--blue);width:100%}
#advantage .sec-head,#commercial .sec-head{grid-template-columns:minmax(0,1fr)}
.wk-tbls-h{margin:clamp(44px,5vw,72px) 0 0;color:var(--ink)}
.wk-tbls-h+.wk-tbls{margin-top:clamp(14px,1.6vw,22px)}
.wk-tbls{margin-top:clamp(32px,3.5vw,48px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-items:start}
.wk-tbl{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:15px;line-height:1.35}
.wk-tbl thead th{background:var(--navy-2);padding:13px 14px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-align:center}
.wk-tbl thead th:nth-child(2){color:var(--muted)}
.wk-tbl thead th.wk-k{background:var(--blue);color:var(--navy)}
.wk-tbl tbody th,.wk-tbl td{background:rgba(23,48,74,.55);padding:11px 14px}
.wk-tbl tbody th{text-align:left;font-weight:400;color:var(--ink-2)}
.wk-tbl td{text-align:center;width:20%}
.wk-x{color:var(--muted)}
.wk-y{color:var(--blue);font-weight:600}
.wk-adv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.wk-adv>div{display:flex;gap:clamp(24px,4vw,64px);padding:clamp(28px,3vw,44px) clamp(24px,3vw,36px);min-height:200px;background:var(--navy-2);border-radius:8px}
.wk-adv-n{flex:none;width:1.5em;font-size:clamp(26px,2.4vw,34px);font-weight:600;line-height:1.1;color:var(--blue)}
.wk-adv h3{margin:4px 0 16px;font-size:clamp(16px,1.4vw,20px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.wk-adv p{margin:0;font-size:clamp(16px,1.4vw,20px);line-height:1.45;color:var(--ink)}
.wk-com{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:14px 20px}
.wk-com li{display:flex;align-items:center;gap:20px;padding:16px 22px;background:var(--navy-2);border-radius:6px}
.wk-com-n{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:var(--navy);font-size:14px;font-weight:600}
.wk-com h3{margin:0 0 4px;font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
.wk-com p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
/* 2026-09-28 renumbering: hero eyebrow "01 Material to finished upper" is the h1; lead + step chain
   follow it in the hero; 02 comparison heading in blue; 03 commercial heading carries its number */
.wk-h1,.wk-sec-h{margin:0}
.wk-h1::before,.wk-sec-h::before{flex-shrink:0}
.wk-hero .lead{margin-top:22px}
.wk-hero .wk-chain{margin-top:clamp(28px,3.4vw,48px)}
.wk-hero .wk-flow li{box-shadow:0 8px 28px rgba(10,31,48,.45)}
#comparison .wk-tbls-h{margin-top:0}
.wk-blue{color:var(--blue)}
.wk-tbls-h .n,.wk-num-h .n{color:var(--orange);margin-right:.3em}
@media (max-width:900px){
  .wk-tbls,.wk-adv{grid-template-columns:minmax(0,1fr)}
  .wk-com{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
}
@media (max-width:760px){
  .wk-flow{grid-template-columns:minmax(0,1fr);gap:22px}
  .wk-flow li{min-height:48px}
  .wk-flow li+li::before{content:"\2193";right:auto;left:0;top:auto;bottom:100%;width:100%;height:22px;line-height:22px;transform:none}
  .wk-bar i{width:20%}
  .wk-tbl{font-size:14px}
  .wk-tbl thead th,.wk-tbl tbody th,.wk-tbl td{padding:10px 8px}
  .wk-tbl thead th{font-size:11px;letter-spacing:.02em}
  .wk-adv>div{min-height:0;gap:20px}
  .wk-com li{align-items:flex-start;padding:16px 18px;gap:16px}
}
/* ---------- 2026-10-01 Litesock: the 4th solution ---------- */
/* four platform cards: the solutions page grid goes 2x2 (3 across left an orphan) */
@media (min-width:901px){
  .plats{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* home + about 50/25/25: Super Mesh now spans the three stacked rows on the right */
  .offer-sec .plats{grid-template-rows:auto auto auto}
  .offer-sec .plat.is-flag{grid-row:1/4}
  .offer-sec .plat:not(.is-flag) .ph{min-height:220px}
  /* product pages list the three other solutions */
  .others{grid-template-columns:repeat(3,minmax(0,1fr))}
  .others a{padding:36px 30px}
  .others b{font-size:clamp(19px,1.7vw,24px)}
}
/* Overview closing line (client copy) */
.ovw-tagline{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);line-height:1.5}
/* Technology / Performance point cards */
.ls-intro>*+*{margin-top:14px}
.ls-pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ls-pts li{background:var(--navy);padding:32px 26px 34px}
.sec-2 .ls-pts li{background:var(--navy-3)}
.ls-k{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--orange)}
.ls-gets .ls-k{width:28px;height:2px;background:var(--orange);margin-top:6px}
.ls-pts h3{font-size:18px;margin:18px 0 10px;text-transform:uppercase;letter-spacing:.01em;line-height:1.25}
.ls-pts p{color:var(--muted);font-size:15px;margin:0}
@media (max-width:1060px){
  .ls-pts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ls-pts li:last-child{grid-column:1/-1}
}
@media (max-width:560px){
  .ls-pts{grid-template-columns:1fr}
  .ls-pts li{padding:26px 22px 28px}
}/* hero platform line: four names no longer fit one row (desktop column ~520px, phones ~9px type),
   so it is a 2x2 - Super Mesh | Functional Mesh over Strobel Insole | Litesock - at every width */
.hero-plat{display:grid;grid-template-columns:repeat(2,max-content);row-gap:12px}
.hero-plat span:nth-child(odd){padding-left:0;border-left:0}
@media (max-width:560px){.hero-plat{font-size:14px;letter-spacing:.06em}}@media (max-width:360px){.hero-plat{font-size:13px}}

/* litesock.html: client 2026-10-01 "change all orange in this page to blue. orange is only for super mesh".
   The page body carries .pg-litesock (page() in build.py), so the accent token is swapped here and every
   var(--orange) on this page (header, eyebrow numbers, buttons, cards, footer) paints blue. */
body.pg-litesock{--orange:var(--blue)}
body.pg-litesock .plat.is-flag h3::after{border-color:rgba(88,171,201,.5)}
body.pg-litesock .sk-card:hover{border-color:rgba(88,171,201,.6)}
/* litesock merged hero + Overview with no Overview visual (2026-10-01): phones keep the band padding the image would have filled */
@media (max-width:900px){.pm-ovw:not(:has(.ovw-bg)){padding-bottom:clamp(56px,6.5vw,96px)}}

/* litesock.html (client 2026-10-01, "blend the 2nd attachment with the top section", their mockup
   brand/KASEN_litesock_hero_ref.png): the three sockliners (re-grounded on navy by _litesock_navy.py)
   sit on the RIGHT of the whole merged band, the full set visible (no cover crop), beside a narrower
   lead, the way the mockup lays them out. Phones keep the shared in-flow band below the text. */
@media (min-width:901px){
  body.pg-litesock .pmerge{position:relative;overflow:hidden}
  body.pg-litesock .pm-ovw{position:static}
  body.pg-litesock .pm-top .lead{max-width:30em}
  body.pg-litesock .pm-ovw .ovw-bg{inset:0;top:0}
  body.pg-litesock .ovw-bg img{top:50%;right:0;width:min(62%,1240px);height:auto;transform:translateY(-46%);
    object-fit:fill;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
}
/* litesock.html Technology: client's exploded EVA insole infographic (2026-10-01), transparent, between the intro and the 01-05 cards */
.ls-tech-vis{margin:0 auto clamp(40px,5vw,72px);max-width:1180px}
.ls-tech-vis img{display:block;width:100%;height:auto}
@media (max-width:760px){.ls-tech-vis{margin-left:calc(-1 * var(--gut) + 6px);margin-right:calc(-1 * var(--gut) + 6px)}}
/* litesock.html Technology (client 2026-10-01 07:06): "move the image to the right & the 5 technology points
   to the left, reduce the text font size in the image". div.ls-tech = ls-pts (left, stacked 01-05) + figure
   (right). The narrower column renders the baked-in callout text at roughly half its old size.
   <=900px: one column, image first (as before). */
@media (min-width:901px){
  .ls-tech{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,3.5vw,56px);align-items:center}
  .ls-tech .ls-pts{grid-template-columns:1fr}
  .ls-tech .ls-pts li:last-child{grid-column:auto}
  .ls-tech .ls-pts li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;padding:18px 24px 20px}
  .ls-tech .ls-k{grid-row:1/3;padding-top:3px}
  .ls-tech .ls-pts h3{margin:0 0 6px;font-size:16px}
  .ls-tech .ls-tech-vis{margin:0;max-width:none}
}
@media (max-width:900px){
  .ls-tech{display:flex;flex-direction:column}
  .ls-tech .ls-tech-vis{order:-1}
}
/* litesock.html Performance (client 2026-10-03): "What manufacturers get" heading over SIX points,
   so the 5-up row becomes 3x2 (2x3 at <=1060px, where six needs no full-width last card) */
.ls-gets-h{font-size:clamp(18px,1.6vw,22px);text-transform:uppercase;letter-spacing:.04em;margin:0 0 22px;color:var(--orange)}
.ls-gets{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1060px){.ls-gets{grid-template-columns:repeat(2,minmax(0,1fr))}.ls-gets li:last-child{grid-column:auto}}
@media (max-width:560px){.ls-gets{grid-template-columns:1fr}}
/* litesock.html Technology (client 2026-10-03 09:56): "the image has to start aligning from the top of the
   table and end aligning to the bottom of the table". The image is now a TALL canvas (1536x4096: the 3:2
   insole art in the middle, its blue ground extended above/below, _litesock_tech3.py). >=901px: the figure
   stretches to the points list's height and the img covers it (only the extension is cropped).
   <=900px: cropped back to the original 3:2 art, with the old top/bottom fade as a mask. */
@media (min-width:901px){
  .ls-tech{align-items:stretch}
  .ls-tech .ls-tech-vis{position:relative;min-height:320px}
  .ls-tech .ls-tech-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
}
@media (max-width:900px){
  .ls-tech .ls-tech-vis img{aspect-ratio:1536/1024;height:auto;object-fit:cover;object-position:50% 50%;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent)}
}