/* ==========================================================================
   Layout rhythm, card sizing, border + motion refinements
   ========================================================================== */
:root{
  --r-sm:8px; --r:12px; --r-lg:18px;
  --shell:min(1320px, 91vw);
  --gap:clamp(1.05rem,1.5vw,1.6rem);
  --lift:0 26px 56px -34px rgba(0,0,0,.92);
}
.sec{padding:clamp(3.4rem,6.2vw,6.4rem) 0}
.sec + .sec{padding-top:clamp(2.4rem,4.4vw,4.6rem)}
.sec-head{margin-bottom:clamp(1.8rem,2.8vw,2.6rem)}
.sec-head .lede,.sec-head p:last-child{margin-bottom:0}
.sec-head .rule{margin:1rem 0}
.sec-head.center .rule{margin-inline:auto}

.grid{gap:var(--gap); align-items:stretch}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,306px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr))}
.range-grid{gap:var(--gap)}

.grid > .cat-card,.range-grid > .cat-card{display:flex; flex-direction:column; height:100%}
.cat-card .cat-body{display:flex; flex-direction:column; flex:1; padding:1.1rem 1.2rem 1.25rem; gap:.25rem}
.cat-card .cat-body p{margin:0 0 .85rem; color:var(--muted)}
.cat-card .cat-count{margin-top:auto}
.grid > .panel,.grid > .stat{height:100%}
.panel{padding:clamp(1.25rem,2vw,1.9rem); transition:border-color .4s var(--ease), box-shadow .4s var(--ease)}
.panel:hover{border-color:var(--line-lime); box-shadow:var(--lift)}
.stat{padding:1.3rem 1.4rem; display:flex; flex-direction:column; justify-content:center; min-height:8.4rem}

.cat-card:hover{transform:translateY(-6px); border-color:var(--line-lime); box-shadow:var(--lift), 0 0 0 1px rgba(140,198,63,.13)}
.product:hover{border-color:var(--line-lime); box-shadow:var(--lift)}
.btn-primary:hover,.btn-ghost:hover{transform:translateY(-2px)}
.chip:hover{transform:translateY(-1px)}

/* compact range cards — four across, shorter media */
.ranges-compact{grid-template-columns:repeat(auto-fit,minmax(min(100%,252px),1fr))}
.ranges-compact .cat-media,.ranges-compact .cat-card .cat-media{aspect-ratio:16/11}
.ranges-compact .cat-media img{object-fit:cover}
.ranges-compact .cat-body h3{font-size:1.1rem}
.ranges-compact .cat-body p{font-size:.88rem}

/* calmer ambient motion */
.aurora{animation-duration:52s; opacity:.32}
.marquee-track{animation-duration:64s}
.tick-track{animation-duration:96s}
.mail-card::after{animation-duration:16s}
.spin{animation-duration:5.5s}
.spin-slow{animation-duration:13s}
.flow{animation-duration:2.2s}
.stage-icon img{animation-duration:7s}
.rv{transform:translateY(16px); transition-duration:.5s}
.rv-d1{transition-delay:.05s} .rv-d2{transition-delay:.1s} .rv-d3{transition-delay:.15s}
.rv-d4{transition-delay:.2s} .rv-d5{transition-delay:.25s} .rv-d6{transition-delay:.3s}
.loom{opacity:.26}
.motes{opacity:.6}

/* ==========================================================================
   Header: breathing room, grouped nav, search
   ========================================================================== */
.head-in{gap:clamp(1rem,2.4vw,2.4rem); height:80px}
.nav{gap:.15rem}
.nav a{padding:.62rem .78rem; font-size:.72rem; letter-spacing:.14em}
.nav-tools{display:flex; align-items:center; gap:.7rem; margin-left:clamp(.6rem,1.6vw,1.4rem)}
.search-btn{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); background:rgba(148,180,200,.05); border:1px solid var(--line);
  border-radius:100px; padding:.52rem .9rem; transition:.3s var(--ease); white-space:nowrap;
}
.search-btn:hover{color:#fff; border-color:var(--line-sky); background:rgba(78,155,216,.1)}
.search-btn svg{width:13px; height:13px; flex:none}
.search-btn kbd{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.06em; color:var(--faint);
  border:1px solid var(--line); border-radius:4px; padding:.05rem .28rem
}
.head-cta{padding:.66rem 1.15rem}

/* search overlay */
.search-modal{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(3,8,14,.72); backdrop-filter:blur(8px); padding:9vh 4vw 4vh;
}
.search-modal.open{display:block}
.search-box{
  width:min(680px,100%); margin-inline:auto; border-radius:var(--r-lg);
  border:1px solid var(--line-lime); background:linear-gradient(160deg,#0a1d2c,#060f18);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95); overflow:hidden;
  animation:searchIn .32s var(--ease);
}
@keyframes searchIn{from{opacity:0; transform:translateY(-14px)}to{opacity:1; transform:none}}
.search-field{display:flex; align-items:center; gap:.9rem; padding:1.05rem 1.2rem; border-bottom:1px solid var(--line)}
.search-field svg{width:16px; height:16px; color:var(--lime); flex:none}
.search-field input{
  flex:1; min-width:0; background:transparent; border:0; outline:none; color:#fff;
  font-family:var(--f-mono); font-size:.95rem; letter-spacing:.03em;
}
.search-field input::placeholder{color:var(--faint)}
.search-close{
  all:unset; cursor:pointer; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:.32rem .6rem
}
.search-close:hover{color:#fff; border-color:var(--line-lime)}
.search-results{max-height:52vh; overflow:auto; padding:.5rem}
.search-results a{
  display:flex; align-items:baseline; gap:.9rem; padding:.7rem .85rem; border-radius:var(--r-sm);
  color:var(--paper-2); font-size:.95rem
}
.search-results a:hover,.search-results a.sel{background:rgba(140,198,63,.1); color:#fff}
.search-results a span{
  margin-left:auto; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap
}
.search-empty{padding:1.4rem 1.1rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}

@media (max-width:1420px){
  .nav a{padding:.58rem .58rem; font-size:.68rem; letter-spacing:.09em}
  .search-btn{padding:.52rem .62rem; gap:0}
  .search-btn span,.search-btn kbd{display:none}
  .head-cta{font-size:.66rem; padding:.62rem .9rem; letter-spacing:.13em}
}
@media (max-width:1240px) and (min-width:1081px){
  .nav-tools{margin-left:.5rem}
  .head-cta{letter-spacing:.1em; padding:.6rem .78rem}
}
@media (max-width:1080px){
  .nav-tools{margin:1rem .4rem 0; flex-direction:column; align-items:stretch}
  .search-btn{justify-content:center}
  .head-cta{text-align:center}
}

/* ==========================================================================
   Hero, redesigned: type-led copy + slow product slider
   ========================================================================== */
.hero{min-height:0; overflow:hidden}
.hero-in{padding:clamp(2.6rem,5vw,4.6rem) 0 clamp(3rem,5vw,5rem); text-align:left}
.hero-grid{
  position:relative; z-index:2; display:grid; gap:clamp(1.8rem,3.4vw,3.4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); align-items:center;
}
.hero-eyebrow{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--lime); display:flex; align-items:center; gap:.8rem; margin:0 0 1.3rem;
}
.hero-eyebrow::after{content:""; flex:1; height:1px; max-width:120px; background:linear-gradient(90deg,var(--line-lime),transparent)}
.hero-title{font-size:clamp(2.3rem,4vw,3.5rem); font-weight:400; line-height:1.06; margin:0 0 1.1rem; text-wrap:balance}
.hero-title em{font-style:italic; color:var(--lime-2)}
.hero-lede{font-size:clamp(1rem,1.15vw,1.16rem); color:var(--paper-2); max-width:52ch; margin:0 0 1.9rem; text-wrap:pretty}
.hero-actions{justify-content:flex-start; margin-bottom:2.2rem}
.hero-facts{
  list-style:none; margin:0; padding:1.3rem 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1.1rem 1.4rem;
}
.hero-facts li{display:flex; flex-direction:column; gap:.3rem}
.hero-facts b{font-size:1.5rem; color:var(--lime-2); font-weight:500; line-height:1}
.hero-facts span{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); line-height:1.5}

/* slider */
.hero-show{
  position:relative; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  border:1px solid var(--line); background:var(--panel-2); box-shadow:var(--lift);
}
.hero-show::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.slides{position:relative; aspect-ratio:16/11; background:rgba(3,9,15,.7)}
.slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.8s var(--ease);
  display:block; color:inherit;
}
.slide.on{opacity:1; z-index:1}
.slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform 9s linear, filter .9s var(--ease);
  filter:saturate(.94) contrast(1.02);
}
.slide.on img{transform:scale(1.09)}
.hero-show:hover .slide.on img{filter:saturate(1.05) contrast(1.04)}
.slide-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.5rem 1.6rem 1.35rem;
  background:linear-gradient(0deg, rgba(3,9,15,.94) 12%, rgba(3,9,15,.6) 58%, transparent);
  display:flex; flex-direction:column; gap:.35rem;
}
.slide-cap b{font-family:var(--f-display); font-weight:500; font-size:clamp(1.15rem,1.7vw,1.5rem); color:#fff; letter-spacing:.01em}
.slide-cap p{margin:0; font-size:.92rem; color:var(--paper-2); max-width:46ch;
  opacity:0; transform:translateY(6px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.slide.on .slide-cap p{opacity:1; transform:none}
.slide-cap i{
  font-style:normal; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--lime-2); display:flex; align-items:center; gap:.5rem; margin-top:.25rem
}
.slide-cap i::after{content:"→"; transition:transform .4s var(--ease)}
.slide:hover .slide-cap i::after{transform:translateX(5px)}
.show-bar{position:absolute; left:0; right:0; bottom:0; height:2px; z-index:4; background:rgba(255,255,255,.08)}
.show-bar b{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lime),var(--sky))}
.show-dots{
  position:absolute; right:1.1rem; top:1.1rem; z-index:4; display:flex; gap:.42rem;
  padding:.45rem .55rem; border-radius:100px; background:rgba(4,10,17,.6);
  border:1px solid var(--line); backdrop-filter:blur(6px);
}
.show-dots button{
  all:unset; cursor:pointer; width:7px; height:7px; border-radius:50%;
  background:rgba(226,238,248,.28); transition:.3s var(--ease)
}
.show-dots button[aria-current="true"]{background:var(--lime-2); transform:scale(1.35)}
.show-meta{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)
}
.show-meta a{color:var(--lime-2)}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-facts{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   Sourcing-network globe card (lazy, contained — never in the hero)
   ========================================================================== */
.globe-card{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.4rem,2.6vw,2.6rem); align-items:center; padding:clamp(1.3rem,2.2vw,2rem);
}
.globe-stage{
  position:relative; aspect-ratio:5/4; border-radius:var(--r); overflow:hidden;
  background:radial-gradient(closest-side at 50% 46%, rgba(12,32,50,.75), rgba(4,11,19,.9));
  border:1px solid var(--line);
}
.globe-stage canvas{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.2s var(--ease)}
.globe-stage canvas.ready{opacity:1}
.globe-stage .globe-fallback{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:2rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)
}
.globe-stage.live .globe-fallback{opacity:0; transition:opacity .8s var(--ease)}
.globe-legend{
  list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.3rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)
}
.globe-legend li{display:flex; align-items:center; gap:.5rem}
.globe-legend i{width:7px; height:7px; border-radius:50%; background:var(--lime-2); display:block}
.globe-legend li:nth-child(2) i{background:var(--sky-2)}
.globe-legend li:nth-child(3) i{background:#ebbe6e}
@media (max-width:900px){ .globe-card{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  .slide img{transition:none; transform:none}
  .slide.on img{transform:none}
  .globe-stage canvas{display:none}
}

/* burger takes over earlier — the desktop bar no longer fits below ~1260px */
@media (max-width:1260px){
  .nav{display:none; position:absolute; top:80px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(5,12,20,.98); border-bottom:1px solid var(--line-lime); padding:.8rem 4vw 1.4rem; max-height:78vh; overflow:auto}
  .nav.open{display:flex; animation:rise .35s var(--ease)}
  .nav a{padding:.85rem .4rem; font-size:.8rem; letter-spacing:.13em}
  .nav a::after{display:none}
  .has-sub{position:static}
  .sub{position:static; transform:none; opacity:1; visibility:visible; background:transparent; border:0; box-shadow:none;
    padding:0 0 .4rem 1rem; border-left:1px solid var(--line-lime); margin-bottom:.5rem; min-width:0}
  .burger{display:flex}
  .nav-tools{margin:1rem .4rem 0; flex-direction:column; align-items:stretch}
  .search-btn{justify-content:center; padding:.6rem .9rem; gap:.55rem}
  .search-btn span,.search-btn kbd{display:inline}
  .head-cta{display:inline-flex; justify-content:center; text-align:center}
}