/* ==========================================================================
   Textiles Consultants — site styles
   Palette + atmosphere lifted from the printed wholesale catalog.
   ========================================================================== */

:root{
  /* core surface */
  --ink:#050c14;
  --navy:#0a1c30;
  --navy-2:#102a3c;
  --forest:#11301d;
  --moss:#1d4020;

  /* accents (catalog green + catalog blue) */
  --lime:#8CC63F;
  --lime-2:#A8DC5A;
  --lime-dim:rgba(140,198,63,.30);
  --sky:#4E9BD8;
  --sky-2:#7CBCEC;
  --sky-dim:rgba(78,155,216,.30);

  /* type */
  --paper:#EDF3F7;
  --paper-2:#CBD9E3;
  --muted:#93A8B7;
  --faint:#63798A;

  /* structure */
  --line:rgba(148,180,200,.16);
  --line-lime:rgba(140,198,63,.34);
  --line-sky:rgba(78,155,216,.34);
  --panel:rgba(9,20,31,.56);
  --panel-2:rgba(6,14,22,.74);

  --r-sm:6px; --r:14px; --r-lg:22px;
  --shell:min(1280px, 92vw);
  --ease:cubic-bezier(.22,.61,.36,1);

  --f-display:"Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-mono:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100%;
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.72;
  color:var(--paper-2);
  background-color:var(--ink);
  overflow-x:hidden;
}

/* ---- the catalog backdrop: blue top-left, green bottom-right, dark core ---- */
.backdrop{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(1100px 780px at 6% 2%,  rgba(30,78,124,.92), transparent 62%),
    radial-gradient(1000px 820px at 98% 96%, rgba(44,96,38,.92), transparent 62%),
    radial-gradient(900px 700px at 88% 6%,  rgba(16,44,30,.75), transparent 66%),
    radial-gradient(1500px 1000px at 50% 52%, rgba(3,8,13,.88), transparent 72%),
    linear-gradient(148deg,#08182a 0%,#061019 42%,#07160f 72%,#123018 100%);
}
/* faint warp/weft weave — the material the whole catalog is about */
.backdrop::after{
  content:""; position:absolute; inset:-2px;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.028) 0 1px, transparent 1px 46px);
  mask-image:radial-gradient(120% 90% at 50% 30%, #000 15%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%, #000 15%, transparent 78%);
  opacity:.85;
}
/* slow drifting light, like the gradient sweep across the slide masters */
.aurora{
  position:fixed; inset:-30%; z-index:-2; pointer-events:none; opacity:.42;
  background:
    radial-gradient(closest-side, rgba(140,198,63,.30), transparent 70%) 18% 76%/48vw 48vw no-repeat,
    radial-gradient(closest-side, rgba(78,155,216,.28), transparent 70%) 82% 20%/52vw 52vw no-repeat;
  animation:drift 34s var(--ease) infinite alternate;
  filter:blur(14px);
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5vw,-3vh,0) scale(1.08)}
  100%{transform:translate3d(-3vw,2.5vh,0) scale(1.03)}
}

img{max-width:100%; height:auto; display:block}

::selection{background:rgba(140,198,63,.35); color:#fff}

a{color:var(--lime-2); text-decoration:none}
a:hover{color:var(--lime)}

:focus-visible{outline:2px solid var(--lime-2); outline-offset:3px; border-radius:4px}

.shell{width:var(--shell); margin-inline:auto}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,h2,h3,h4{font-weight:600; line-height:1.1; color:#fff; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,5.4vw,4.6rem); font-weight:400}
h2{font-size:clamp(1.9rem,3.4vw,3rem); font-weight:400}
h3{font-size:clamp(1.25rem,1.7vw,1.65rem); font-weight:500}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.05rem,1.2vw,1.28rem); color:var(--paper-2); max-width:62ch}

.eyebrow{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--lime);
  display:flex; align-items:center; gap:.85rem; margin:0 0 1rem;
}
.eyebrow::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-lime),transparent); max-width:180px}
.eyebrow.sky{color:var(--sky-2)}
.eyebrow.sky::after{background:linear-gradient(90deg,var(--line-sky),transparent)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{display:none}

.mono{font-family:var(--f-mono)}
.rule{height:2px; width:150px; background:linear-gradient(90deg,var(--lime),transparent); border:0; margin:1.4rem 0}
.rule.c{margin-inline:auto; background:linear-gradient(90deg,transparent,var(--lime),transparent)}

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-head{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  background:linear-gradient(180deg, rgba(5,12,20,.88), rgba(5,12,20,.55));
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease), background .4s var(--ease);
}
.site-head.stuck{box-shadow:0 18px 40px -28px rgba(0,0,0,.95); background:linear-gradient(180deg, rgba(4,10,17,.96), rgba(4,10,17,.86))}
.head-in{display:flex; align-items:center; gap:1.5rem; height:74px}

.brand{display:flex; align-items:center; gap:.8rem; flex-shrink:0}
.brand img{width:38px; height:38px; filter:drop-shadow(0 0 12px rgba(140,198,63,.4)); transition:transform .6s var(--ease)}
.brand:hover img{transform:rotate(90deg)}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-txt b{font-family:var(--f-display); font-weight:500; font-size:1.02rem; color:#fff; letter-spacing:.09em}
.brand-txt span{font-family:var(--f-mono); font-size:.56rem; letter-spacing:.3em; color:var(--lime); text-transform:uppercase; margin-top:.32rem}

.nav{margin-left:auto; display:flex; align-items:center; gap:.15rem}
.nav a{
  font-family:var(--f-mono); font-size:.73rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); padding:.6rem .72rem; border-radius:var(--r-sm); position:relative; transition:color .25s
}
.nav a::after{
  content:""; position:absolute; left:.72rem; right:.72rem; bottom:.34rem; height:1px;
  background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)
}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1)}
.nav a.active{color:#fff}
.nav a.active::after{transform:scaleX(1); background:linear-gradient(90deg,var(--lime),var(--sky))}

.has-sub{position:relative}
.sub{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,10px);
  min-width:250px; padding:.55rem; border-radius:var(--r);
  background:rgba(7,16,25,.97); border:1px solid var(--line-lime);
  box-shadow:0 30px 60px -26px rgba(0,0,0,.95);
  opacity:0; visibility:hidden; transition:.28s var(--ease);
}
.has-sub:hover .sub, .has-sub:focus-within .sub{opacity:1; visibility:visible; transform:translate(-50%,0)}
.sub a{display:block; padding:.55rem .7rem; letter-spacing:.09em}
.sub a::after{display:none}
.sub a:hover{background:rgba(140,198,63,.1); color:var(--lime-2)}

.head-cta{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.62rem 1.05rem; border-radius:100px; color:#08160a; white-space:nowrap;
  background:linear-gradient(120deg,var(--lime-2),var(--lime)); font-weight:500;
  box-shadow:0 0 0 rgba(140,198,63,.5); transition:.3s var(--ease)
}
.head-cta:hover{color:#08160a; transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(140,198,63,.85)}

.burger{display:none; margin-left:auto; width:44px; height:38px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:transparent; cursor:pointer; padding:0; align-items:center; justify-content:center}
.burger i{display:block; width:19px; height:1.5px; background:var(--paper); position:relative; transition:.3s var(--ease)}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:19px; height:1.5px; background:var(--paper); transition:.3s var(--ease)}
.burger i::before{top:-6px} .burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0; transform:rotate(-45deg)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.17em; text-transform:uppercase; font-weight:500;
  padding:.92rem 1.6rem; border-radius:100px; border:1px solid transparent; transition:.32s var(--ease);
}
.btn-primary{background:linear-gradient(120deg,var(--lime-2),var(--lime)); color:#08160a; box-shadow:0 14px 34px -18px rgba(140,198,63,.9)}
.btn-primary:hover{color:#08160a; transform:translateY(-3px); box-shadow:0 20px 44px -16px rgba(140,198,63,1)}
.btn-ghost{border-color:var(--line-sky); color:var(--sky-2); background:rgba(78,155,216,.06)}
.btn-ghost:hover{color:#fff; border-color:var(--sky-2); background:rgba(78,155,216,.16); transform:translateY(-3px)}
.btn i{font-style:normal; transition:transform .3s var(--ease)}
.btn:hover i{transform:translateX(4px)}

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{padding:clamp(4rem,8vw,7.5rem) 0; position:relative}
.sec-head{margin-bottom:3rem; max-width:70ch}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .eyebrow::after{display:none}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative; min-height:clamp(600px,90vh,900px); display:flex; align-items:center; overflow:hidden}
.hero-in{position:relative; z-index:2; text-align:center; padding:5.5rem 0 7rem}
.hero-logo{width:min(660px,88%); margin:0 auto 1.6rem; opacity:0; animation:logoIn 1.5s var(--ease) .15s forwards}
@keyframes logoIn{from{opacity:0; transform:translateY(26px) scale(.94); filter:blur(9px)} to{opacity:1; transform:none; filter:blur(0)}}

.hero-kicker{
  font-family:var(--f-mono); font-size:clamp(.72rem,1.1vw,.95rem); letter-spacing:.5em; text-transform:uppercase;
  color:var(--paper); margin:0 0 1.4rem; padding-left:.5em;
}
.hero-sub{font-style:italic; color:var(--lime-2); font-size:clamp(1.05rem,1.6vw,1.4rem); margin-bottom:1.6rem}
.hero-tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.4rem; margin:0 0 2.6rem;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-2);
}
.hero-tags span{display:flex; align-items:center; gap:1.4rem}
.hero-tags span::after{content:"◆"; color:var(--lime); font-size:.5rem}
.hero-tags span:last-child::after{display:none}
.hero-actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}

/* animated loom threads behind hero */
.loom{position:absolute; inset:0; z-index:1; opacity:.5; pointer-events:none}
.loom line{stroke:var(--lime); stroke-width:.6; opacity:.28}
.loom line.weft{stroke:var(--sky)}
.shuttle{fill:var(--lime-2); filter:drop-shadow(0 0 6px rgba(168,220,90,.9))}

.scroll-hint{
  position:absolute; bottom:1.7rem; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.scroll-hint::after{content:""; width:1px; height:44px; background:linear-gradient(180deg,var(--lime),transparent); animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ==========================================================================
   Page banner (inner pages)
   ========================================================================== */
.banner{padding:clamp(4rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem); position:relative; text-align:center}
.banner h1{margin-bottom:.4rem}
.banner .tint-lime{color:var(--lime-2)}
.banner .tint-sky{color:var(--sky-2)}
.banner-sub{font-style:italic; color:var(--paper-2); font-size:clamp(1rem,1.4vw,1.2rem)}
.crumb{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); margin-bottom:1.4rem}
.crumb a{color:var(--muted)}
.banner-list{
  margin:1.8rem auto 0; max-width:1000px; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .9rem;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.banner-list a{color:var(--muted); padding:.34rem .8rem; border:1px solid var(--line); border-radius:100px; transition:.28s var(--ease)}
.banner-list a:hover{color:#fff; border-color:var(--line-lime); background:rgba(140,198,63,.1); transform:translateY(-2px)}

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid{display:grid; gap:1.5rem}
.g-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,2.2rem); position:relative; overflow:hidden;
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.panel::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(140,198,63,.09), transparent 46%);
  opacity:0; transition:opacity .45s var(--ease);
}
.panel:hover::before{opacity:1}

/* category card */
.cat-card{
  display:block; border-radius:var(--r-lg); overflow:hidden; position:relative; isolation:isolate;
  border:1px solid var(--line); background:var(--panel-2); color:inherit;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.cat-card:hover{transform:translateY(-8px); border-color:var(--line-lime); box-shadow:0 32px 64px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(140,198,63,.14)}
.cat-media{display:block; aspect-ratio:4/3; overflow:hidden; position:relative; background:rgba(3,9,15,.6)}
.cat-media img{width:100%; height:100%; object-fit:contain; transition:transform .8s var(--ease)}
.cat-card:hover .cat-media img{transform:scale(1.06)}
.cat-body{display:block; padding:1.3rem 1.4rem 1.5rem}
.cat-body h3{margin-bottom:.35rem; color:#fff}
.cat-body p{font-size:.92rem; color:var(--muted); margin:0 0 .9rem}
.cat-count{display:flex; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lime); display:flex; align-items:center; gap:.5rem}
.cat-count::after{content:"→"; transition:transform .3s var(--ease)}
.cat-card:hover .cat-count::after{transform:translateX(5px)}

/* stat block */
.stat{padding:1.5rem 1.6rem; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); position:relative; overflow:hidden}
.stat::after{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--lime),transparent)}
.stat b{display:block; font-size:clamp(2rem,3.6vw,2.9rem); font-weight:600; color:var(--lime-2); line-height:1; margin-bottom:.5rem}
.stat > span{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.11em; color:var(--muted); text-transform:uppercase; line-height:1.5; display:block}
.stat b span{font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; display:inline}

/* ==========================================================================
   Product spec sheet
   ========================================================================== */
.product{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg, rgba(10,24,36,.72), rgba(5,12,20,.82));
  margin-bottom:2rem; scroll-margin-top:100px;
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.product:hover{border-color:var(--line-lime); box-shadow:0 34px 70px -40px rgba(0,0,0,.95)}
.product-top{
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:clamp(1.4rem,3vw,2.8rem);
  padding:clamp(1.4rem,2.6vw,2.3rem);
}
.p-visual{display:flex; flex-direction:column; gap:1.1rem}
.p-photo{position:relative; border-radius:var(--r); overflow:hidden; background:rgba(2,7,12,.5)}
.p-photo img{width:100%; transition:transform .9s var(--ease)}
.product:hover .p-photo img{transform:scale(1.035)}
.p-photo .dims{
  position:absolute; left:.7rem; bottom:.7rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; color:var(--paper);
  background:rgba(4,10,16,.82); border:1px solid var(--line-lime); border-radius:100px; padding:.24rem .7rem;
  backdrop-filter:blur(6px);
}
.p-body{min-width:0}
.p-cat{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--lime); margin-bottom:.5rem}
.p-body h3{font-size:clamp(1.4rem,2.2vw,1.95rem); font-weight:400; margin-bottom:.7rem}
.p-desc{color:var(--paper-2); margin-bottom:1.3rem; max-width:66ch}

.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem}
.chip{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; color:var(--paper-2);
  padding:.4rem .85rem; border:1px solid var(--line-lime); border-radius:100px; background:rgba(140,198,63,.05);
  transition:.28s var(--ease);
}
.chip:hover{background:rgba(140,198,63,.16); color:#fff; transform:translateY(-2px)}
.product.sky .chip{border-color:var(--line-sky); background:rgba(78,155,216,.05)}
.product.sky .chip:hover{background:rgba(78,155,216,.16)}
.product.sky .p-cat{color:var(--sky-2)}

.served-label{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.26em; text-transform:uppercase; color:var(--lime); margin:0 0 .6rem}
.product.sky .served-label{color:var(--sky-2)}
.served{font-style:italic; color:var(--muted); font-size:.92rem; margin-bottom:1.4rem}
.served em{color:var(--paper-2); font-style:italic}

/* spec table */
.spec-wrap{overflow-x:auto; border-radius:var(--r-sm); border:1px solid var(--line)}
table.spec{width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:.74rem; min-width:520px}
table.spec th{
  text-align:left; padding:.65rem .85rem; background:linear-gradient(120deg,var(--lime),#7ab531); color:#08160a;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.66rem; white-space:nowrap;
}
.product.sky table.spec th{background:linear-gradient(120deg,var(--sky-2),var(--sky)); color:#04121e}
table.spec td{padding:.6rem .85rem; border-top:1px solid var(--line); color:var(--paper-2); white-space:nowrap}
table.spec tbody tr{transition:background .25s}
table.spec tbody tr:hover{background:rgba(140,198,63,.07)}
table.spec td:first-child{color:#fff; letter-spacing:.05em}

/* technical drawing panel */
.p-draw{
  border:1px dashed var(--line-lime); border-radius:var(--r); padding:.85rem .9rem .6rem;
  background:repeating-linear-gradient(0deg, rgba(140,198,63,.035) 0 1px, transparent 1px 22px),
             repeating-linear-gradient(90deg, rgba(140,198,63,.035) 0 1px, transparent 1px 22px),
             rgba(3,9,15,.5);
}
.product.sky .p-draw{border-color:var(--line-sky)}
.p-draw svg{width:100%; height:auto; display:block}
.p-draw-cap{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  display:flex; justify-content:space-between; gap:1rem; margin-top:.45rem; border-top:1px solid var(--line); padding-top:.4rem;
}

/* diagram ink */
.dwg-out{fill:none; stroke:var(--lime); stroke-width:1.6}
.dwg-fill{fill:rgba(140,198,63,.06)}
.dwg-thin{fill:none; stroke:var(--lime); stroke-width:.8; opacity:.55}
.dwg-dim{fill:none; stroke:var(--sky-2); stroke-width:1}
.dwg-txt{fill:var(--paper-2); font-family:var(--f-mono); font-size:9px; letter-spacing:.06em}
.dwg-txt.sm{font-size:7.5px; fill:var(--faint)}
.dwg-hem{fill:none; stroke:var(--lime-2); stroke-width:2; stroke-linecap:round}
.dwg-weave{fill:none; stroke:var(--lime); stroke-width:.5; opacity:.3}

/* stroke draw-in animation */
.drawable path,.drawable line,.drawable rect,.drawable circle,.drawable polyline,.drawable polygon{
  stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900);
}
.drawable.in path,.drawable.in line,.drawable.in rect,.drawable.in circle,.drawable.in polyline,.drawable.in polygon{
  animation:drawIn 1.5s var(--ease) forwards;
}
@keyframes drawIn{to{stroke-dashoffset:0}}

/* quote toggle */
.p-actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem}
.add-quote{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; cursor:pointer;
  padding:.62rem 1.1rem; border-radius:100px; border:1px solid var(--line-lime);
  background:rgba(140,198,63,.07); color:var(--lime-2); transition:.3s var(--ease);
}
.add-quote:hover{background:rgba(140,198,63,.18); transform:translateY(-2px)}
.add-quote[aria-pressed="true"]{background:linear-gradient(120deg,var(--lime-2),var(--lime)); color:#08160a; border-color:transparent}

/* filter bar */
.toolbar{
  display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem; border:1px solid var(--line); border-radius:100px; background:var(--panel);
  margin-bottom:2.4rem; position:sticky; top:88px; z-index:30;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.search{display:flex; align-items:center; gap:.6rem; flex:1; min-width:220px}
.search input{
  flex:1; background:transparent; border:0; color:var(--paper); font-family:var(--f-mono); font-size:.8rem;
  padding:.3rem 0; letter-spacing:.05em;
}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none}
.search svg{flex-shrink:0; stroke:var(--lime); fill:none; stroke-width:1.6}
.count{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); white-space:nowrap}
.count b{color:var(--lime-2); font-weight:500}

/* ==========================================================================
   Mill / process drawings
   ========================================================================== */
.mill{
  border:1px solid var(--line-lime); border-radius:var(--r-lg); padding:clamp(1rem,2.4vw,2rem);
  background:
    repeating-linear-gradient(0deg, rgba(140,198,63,.04) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(140,198,63,.04) 0 1px, transparent 1px 26px),
    rgba(3,9,15,.62);
  overflow-x:auto;
}
.mill svg{display:block; min-width:900px; width:100%; height:auto}
.mill-cap{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:.9rem; text-align:center}

.machine-txt{fill:var(--paper-2); font-family:var(--f-mono); font-size:9px; letter-spacing:.1em}
.machine-num{fill:var(--lime); font-family:var(--f-mono); font-size:10px; font-weight:600}
.machine-out{fill:none; stroke:var(--sky-2); stroke-width:1.5; stroke-linejoin:round}
.machine-in{fill:none; stroke:var(--lime); stroke-width:1.2}
.machine-body{fill:rgba(78,155,216,.09)}
.machine-hot{fill:rgba(140,198,63,.14)}
.flow{fill:none; stroke:var(--lime-2); stroke-width:2; stroke-linecap:round; stroke-dasharray:9 12; animation:flow 1.5s linear infinite}
@keyframes flow{to{stroke-dashoffset:-42}}
.spin{transform-box:fill-box; transform-origin:center; animation:spin 3.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-slow{transform-box:fill-box; transform-origin:center; animation:spin 8s linear infinite}
.bob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* stage cards */
.stage{display:grid; grid-template-columns:170px minmax(0,1fr); gap:clamp(1.2rem,3vw,2.4rem); align-items:start}
.stage-icon{
  border:1px solid var(--line-lime); border-radius:var(--r); padding:1.4rem; background:rgba(3,9,15,.5);
  display:grid; place-items:center; aspect-ratio:1;
}
.stage-icon img{width:88px; filter:drop-shadow(0 0 16px rgba(140,198,63,.42)); animation:hover 5s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.stage.sky .stage-icon{border-color:var(--line-sky)}
.stage.sky .stage-icon img{filter:drop-shadow(0 0 16px rgba(78,155,216,.5))}
.step{padding-left:1.3rem; border-left:1px solid var(--line); margin-bottom:1.4rem}
.step h4{font-family:var(--f-mono); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); margin:0 0 .4rem}
.stage.sky .step h4{color:var(--sky-2)}
.step p{margin:0; color:var(--muted); font-size:.95rem}

.chain{display:flex; align-items:flex-start; gap:.6rem; overflow-x:auto; padding:1rem 0}
.chain-node{flex:1; min-width:150px; text-align:center}
.chain-node img{width:64px; margin:0 auto .8rem; filter:drop-shadow(0 0 12px rgba(140,198,63,.35))}
.chain-node b{display:block; font-family:var(--f-mono); font-size:.9rem; color:var(--lime); margin-bottom:.35rem}
.chain-node span{font-size:.85rem; color:var(--muted); display:block; line-height:1.45}
.chain-arrow{flex-shrink:0; color:var(--faint); padding-top:26px; font-size:1.1rem}

/* ==========================================================================
   Industries
   ========================================================================== */
.ind-grid{columns:4 200px; column-gap:1.6rem}
.ind-grid li{
  break-inside:avoid; list-style:none; padding:.42rem 0 .42rem 1.4rem; position:relative;
  font-size:.94rem; color:var(--paper-2); transition:color .25s, transform .25s var(--ease);
}
.ind-grid li::before{content:""; position:absolute; left:0; top:1.05em; width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px rgba(140,198,63,.8)}
.ind-grid li:hover{color:#fff; transform:translateX(4px)}
.ind-grid{padding:0; margin:0}

.marquee{overflow:hidden; border-block:1px solid var(--line); padding:1.1rem 0; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; gap:2.6rem; width:max-content; animation:march 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes march{to{transform:translateX(-50%)}}
.marquee span{font-family:var(--f-mono); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:2.6rem}
.marquee span::after{content:"◆"; color:var(--lime); font-size:.5rem}

/* ==========================================================================
   Contact / quote
   ========================================================================== */
.mail-card{
  text-align:center; padding:clamp(2rem,5vw,3.6rem); border-radius:var(--r-lg);
  border:1px solid var(--line-lime); background:linear-gradient(150deg, rgba(14,34,24,.7), rgba(6,14,22,.85));
  position:relative; overflow:hidden;
}
.mail-card::after{
  content:""; position:absolute; inset:-40%; background:conic-gradient(from 0deg, transparent, rgba(140,198,63,.14), transparent 32%);
  animation:sweep 9s linear infinite; pointer-events:none;
}
@keyframes sweep{to{transform:rotate(360deg)}}
.mail-card > *{position:relative; z-index:1}
.mail-link{
  font-family:var(--f-mono); font-size:clamp(.95rem,2.4vw,1.5rem); letter-spacing:.05em; color:var(--lime-2);
  display:inline-block; padding:.5rem 0; border-bottom:1px solid var(--line-lime); transition:.3s var(--ease); word-break:break-all;
}
.mail-link:hover{color:#fff; border-color:var(--lime-2); letter-spacing:.09em}

.quote-dock{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:70;
  display:flex; align-items:center; gap:.7rem; padding:.75rem 1.15rem; border-radius:100px;
  background:linear-gradient(120deg,var(--lime-2),var(--lime)); color:#08160a; cursor:pointer; border:0;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  box-shadow:0 20px 40px -18px rgba(140,198,63,.9);
  transform:translateY(150%); transition:transform .5s var(--ease);
}
.quote-dock.show{transform:none}
.quote-dock b{background:#08160a; color:var(--lime-2); border-radius:100px; padding:.1rem .55rem; font-size:.7rem}

.sheet{
  position:fixed; inset:0; z-index:80; display:none; place-items:center; padding:1.2rem;
  background:rgba(2,6,10,.78); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.sheet.open{display:grid}
.sheet-in{
  width:min(620px,100%); max-height:84vh; overflow:auto; border-radius:var(--r-lg); padding:1.8rem;
  background:linear-gradient(160deg,#0b1e2e,#061019); border:1px solid var(--line-lime);
  animation:rise .45s var(--ease);
}
@keyframes rise{from{opacity:0; transform:translateY(26px) scale(.97)}to{opacity:1; transform:none}}
.sheet ul{list-style:none; padding:0; margin:1rem 0 1.4rem}
.sheet li{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem .2rem;
  border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:.78rem; color:var(--paper-2);
}
.sheet li button{background:none; border:0; color:var(--faint); cursor:pointer; font-size:1.1rem; line-height:1; padding:.1rem .3rem}
.sheet li button:hover{color:var(--lime-2)}
.sheet-empty{color:var(--faint); font-family:var(--f-mono); font-size:.8rem; padding:1.2rem 0}
.sheet-close{position:absolute}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{border-top:1px solid var(--line); padding:3.4rem 0 2rem; margin-top:2rem; background:rgba(3,8,13,.5)}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2rem; margin-bottom:2.6rem}
.foot-grid h5{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--lime); margin:0 0 1rem}
.foot-grid ul{list-style:none; padding:0; margin:0}
.foot-grid li{margin-bottom:.5rem}
.foot-grid a{color:var(--muted); font-size:.9rem; transition:.25s}
.foot-grid a:hover{color:#fff; padding-left:4px}
.foot-brand p{font-size:.9rem; color:var(--muted); max-width:34ch}
.foot-bar{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.rv{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.07s} .rv-d2{transition-delay:.14s} .rv-d3{transition-delay:.21s}
.rv-d4{transition-delay:.28s} .rv-d5{transition-delay:.35s} .rv-d6{transition-delay:.42s}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .nav{display:none; position:absolute; top:74px; 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}
  .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}
  .head-cta{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .product-top{grid-template-columns:1fr}
  .stage{grid-template-columns:1fr}
  .stage-icon{aspect-ratio:auto; padding:1.1rem; max-width:150px}
  .ind-grid{columns:2 150px}
  .foot-grid{grid-template-columns:1fr}
  .toolbar{border-radius:var(--r); top:80px}
  .hero-tags{font-size:.62rem; gap:.4rem .8rem}
  .hero-tags span{gap:.8rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
  .drawable path,.drawable line,.drawable rect,.drawable circle,.drawable polyline,.drawable polygon{stroke-dashoffset:0}
}

@media print{
  .site-head,.quote-dock,.sheet,.aurora,.scroll-hint,.toolbar{display:none !important}
  body{background:#fff; color:#000}
}

/* ==========================================================================
   Motion & interaction layer
   ========================================================================== */

/* reading progress — warp thread filling across the top */
.progress{
  position:fixed; top:0; left:0; height:2px; z-index:90; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--sky),var(--lime-2),var(--lime));
  box-shadow:0 0 12px rgba(140,198,63,.7);
}

/* pointer-tracked sheen on panels and cards */
.panel,.product,.cat-card,.stat,.mail-card{--mx:50%; --my:50%}
.panel::after,.product::after,.cat-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(140,198,63,.12), transparent 62%);
  opacity:0; transition:opacity .5s var(--ease);
}
.panel:hover::after,.product:hover::after,.cat-card:hover::after{opacity:1}
.product.sky::after,.cat-card.sky::after{background:radial-gradient(420px circle at var(--mx) var(--my), rgba(78,155,216,.14), transparent 62%)}
.product{position:relative}
.product-top,.cat-body,.cat-media{position:relative; z-index:1}

/* sheen sweep across a category card on hover */
.cat-media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.13) 48%, transparent 58%);
  transform:translateX(-120%); transition:transform .95s var(--ease);
}
.cat-card:hover .cat-media::after{transform:translateX(120%)}

/* product photo lifts toward the pointer */
.p-photo{transform-style:preserve-3d; transition:transform .5s var(--ease)}
.p-photo.tilt{transition:transform .12s linear}

/* spec rows arrive in sequence */
table.spec tbody tr{opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
table.spec.in tbody tr{opacity:1; transform:none}

/* drifting fibre motes over the hero */
.motes{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.mote{
  position:absolute; width:3px; height:3px; border-radius:50%; background:var(--lime-2);
  opacity:0; filter:blur(.4px); box-shadow:0 0 7px rgba(168,220,90,.8);
  animation:float linear infinite;
}
@keyframes float{
  0%{opacity:0; transform:translate3d(0,20px,0) scale(.6)}
  12%{opacity:.75}
  88%{opacity:.55}
  100%{opacity:0; transform:translate3d(var(--dx,20px),-110px,0) scale(1)}
}

/* hero logo drifts against the scroll */
.hero-logo{will-change:transform}

/* back to top */
.to-top{
  position:fixed; left:1.2rem; bottom:1.2rem; z-index:70; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; border:1px solid var(--line-lime);
  background:rgba(7,16,25,.9); color:var(--lime-2); font-size:1rem; backdrop-filter:blur(10px);
  transform:translateY(140%); transition:transform .5s var(--ease), background .3s;
}
.to-top.show{transform:none}
.to-top:hover{background:rgba(140,198,63,.2); color:#fff}

/* ==========================================================================
   Textile weight calculator
   ========================================================================== */
.calc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(1.4rem,3vw,2.6rem);
  border:1px solid var(--line-lime); border-radius:var(--r-lg); padding:clamp(1.3rem,2.6vw,2.2rem);
  background:linear-gradient(155deg, rgba(11,28,20,.66), rgba(5,12,20,.86));
}
.calc-field{margin-bottom:1.15rem}
.calc-field > label,.calc-legend{
  display:block; font-family:var(--f-mono); font-size:.63rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--lime); margin-bottom:.5rem;
}
.calc select,.calc input[type=number]{
  width:100%; background:rgba(3,9,15,.75); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--paper); font-family:var(--f-mono); font-size:.86rem; padding:.6rem .75rem;
  transition:border-color .25s, background .25s;
}
.calc select:focus,.calc input[type=number]:focus{outline:none; border-color:var(--lime); background:rgba(140,198,63,.07)}
.calc select option{background:#08161f; color:var(--paper)}
.calc-pair{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}

.calc input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; background:transparent;
  margin:.5rem 0 .3rem; cursor:pointer;
}
.calc input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:4px;
  background:linear-gradient(90deg,var(--sky) 0%,var(--lime) 55%,var(--lime-2) 100%)}
.calc input[type=range]::-moz-range-track{height:4px; border-radius:4px;
  background:linear-gradient(90deg,var(--sky) 0%,var(--lime) 55%,var(--lime-2) 100%)}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; margin-top:-6.5px; border-radius:50%;
  background:var(--lime-2); border:2px solid #08160a; box-shadow:0 0 14px rgba(168,220,90,.9);
  transition:transform .2s var(--ease);
}
.calc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}
.calc input[type=range]::-moz-range-thumb{width:15px; height:15px; border-radius:50%;
  background:var(--lime-2); border:2px solid #08160a; box-shadow:0 0 14px rgba(168,220,90,.9)}

.gsm-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.gsm-val{font-family:var(--f-mono); font-size:1.15rem; color:var(--lime-2)}
.gsm-class{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.24rem .7rem; border-radius:100px; border:1px solid var(--line-lime); color:var(--lime-2);
  background:rgba(140,198,63,.09); transition:.35s var(--ease);
}
.gsm-scale{
  display:flex; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-top:.45rem;
}
.gsm-scale span{flex:1; text-align:center; padding-top:.3rem; border-top:1px solid var(--line); transition:color .3s}
.gsm-scale span.on{color:var(--lime-2); border-color:var(--line-lime)}

/* live preview drawing */
.calc-preview{
  border:1px dashed var(--line-lime); border-radius:var(--r); padding:.8rem;
  background:repeating-linear-gradient(0deg, rgba(140,198,63,.035) 0 1px, transparent 1px 20px),
             repeating-linear-gradient(90deg, rgba(140,198,63,.035) 0 1px, transparent 1px 20px),
             rgba(3,9,15,.55);
  margin-bottom:1.1rem;
}
.calc-preview svg{width:100%; height:auto; display:block}
#calcShape{transition:x .45s var(--ease), y .45s var(--ease), width .45s var(--ease), height .45s var(--ease)}

/* results */
.calc-out{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:1.1rem}
.calc-cell{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.75rem .85rem; background:rgba(3,9,15,.5);
  position:relative; overflow:hidden;
}
.calc-cell::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--lime),transparent)}
.calc-cell.wide{grid-column:1 / -1}
.calc-cell b{display:block; font-family:var(--f-mono); font-size:1.12rem; color:#fff; line-height:1.25}
.calc-cell b.flash{animation:flash .5s var(--ease)}
@keyframes flash{0%{color:var(--lime-2); transform:translateX(3px)}100%{color:#fff; transform:none}}
.calc-cell span{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); display:block; margin-top:.3rem}
.calc-note{font-family:var(--f-mono); font-size:.62rem; color:var(--faint); line-height:1.7; margin:.2rem 0 1rem}

@media (max-width:860px){
  .calc{grid-template-columns:1fr}
  .calc-out{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){ .calc-pair{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  .mote{display:none}
  table.spec tbody tr{opacity:1; transform:none}
  .progress{display:none}
}

/* ==========================================================================
   Raw-material ticker
   ========================================================================== */
.ticker{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(4,10,17,.94), rgba(6,14,22,.74));
}
.ticker-in{display:flex; align-items:center; gap:1.1rem; height:44px}
.ticker-head{
  flex-shrink:0; display:flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lime); white-space:nowrap;
}
.ticker-head::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--lime-2);
  box-shadow:0 0 9px var(--lime-2); animation:blip 2.2s ease-in-out infinite;
}
@keyframes blip{0%,100%{opacity:.35; transform:scale(.8)}50%{opacity:1; transform:scale(1)}}
.ticker-rail{
  flex:1; min-width:0; overflow:hidden; height:100%; display:flex; align-items:center;
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 94%,transparent);
}
.tick-track{display:flex; align-items:center; width:max-content; animation:tickrun 70s linear infinite}
.ticker:hover .tick-track{animation-play-state:paused}
@keyframes tickrun{to{transform:translateX(-50%)}}
.ticker-note{
  flex-shrink:0; font-family:var(--f-mono); font-size:.52rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap;
}

.tick{
  display:flex; align-items:center; gap:.6rem; padding:.2rem 1.15rem;
  border-right:1px solid var(--line); font-family:var(--f-mono); white-space:nowrap;
}
.tick b{font-weight:500; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-2)}
.tick-val{font-style:normal; font-size:.8rem; color:#fff}
.tick-val u{text-decoration:none; font-size:.55rem; color:var(--faint); margin-left:.22rem}
.tick-chg{font-style:normal; font-size:.63rem; display:flex; align-items:center; gap:.3rem}
.tick-chg u{text-decoration:none; font-size:.5rem; color:var(--faint); letter-spacing:.1em}
.tick.up .tick-chg{color:var(--lime-2)}
.tick.down .tick-chg{color:var(--sky-2)}
.tick.flat .tick-chg{color:var(--muted)}
.tick .spark{width:78px; height:24px; flex-shrink:0}
.ticker-note{
  font-family:var(--f-mono); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); text-align:right; padding:0 max(1rem, calc((100vw - var(--shell)) / 2)) .35rem 0;
}

/* market cards */
.mkt{
  margin:0; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(4,11,18,.6); position:relative; overflow:hidden;
}
.mkt::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--muted)}
.mkt.up::before{background:linear-gradient(180deg,var(--lime-2),transparent)}
.mkt.down::before{background:linear-gradient(180deg,var(--sky-2),transparent)}
.mkt figcaption b{display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff}
.mkt figcaption span{font-family:var(--f-mono); font-size:.56rem; letter-spacing:.1em; color:var(--faint)}
.mkt-val{font-family:var(--f-mono); font-size:1.5rem; color:var(--lime-2); margin:.6rem 0 .2rem}
.mkt-val span{font-size:.62rem; color:var(--faint); letter-spacing:.1em}
.mkt .spark{width:100%; height:56px; display:block; margin:.3rem 0 .5rem}
.mkt-chg{font-family:var(--f-mono); font-size:.72rem; margin:0 0 .3rem}
.mkt-chg span{color:var(--faint); font-size:.58rem}
.mkt.up .mkt-chg{color:var(--lime-2)}
.mkt.down .mkt-chg{color:var(--sky-2)}
.mkt.flat .mkt-chg{color:var(--muted)}
.mkt-src{font-family:var(--f-mono); font-size:.52rem; letter-spacing:.08em; color:var(--faint); margin:0}

/* ==========================================================================
   Slider
   ========================================================================== */
.slider{position:relative}
.slide-rail{
  display:grid; grid-auto-flow:column; gap:1.3rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem .3rem 1.4rem; scrollbar-width:none; cursor:grab;
}
.slide-rail::-webkit-scrollbar{display:none}
.slide-rail.drag{cursor:grabbing; scroll-snap-type:none}
.slide-rail > *{scroll-snap-align:start}
.slide-nav{display:flex; align-items:center; gap:.6rem; justify-content:flex-end; margin-top:.2rem}
.slide-nav button{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-lime); cursor:pointer;
  background:rgba(7,16,25,.8); color:var(--lime-2); font-size:1rem; display:grid; place-items:center;
  transition:.3s var(--ease);
}
.slide-nav button:hover:not(:disabled){background:rgba(140,198,63,.18); color:#fff; transform:translateY(-2px)}
.slide-nav button:disabled{opacity:.3; cursor:default}
.slide-dots{display:flex; gap:.4rem; margin-right:auto}
.slide-dots button{
  width:7px; height:7px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:var(--line); transition:.3s var(--ease);
}
.slide-dots button.on{background:var(--lime-2); width:22px; border-radius:100px}

/* ==========================================================================
   Range grid — equal-height cards
   ========================================================================== */
.range-grid{
  display:grid; gap:clamp(1.3rem,2.2vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  align-items:stretch;
}
.range-grid .cat-card{display:flex; flex-direction:column; height:100%}
/* source photos carry their own frame — fit them whole, don't crop the edge off */
.cat-card .cat-media{aspect-ratio:844/644; background:linear-gradient(160deg, rgba(10,24,36,.8), rgba(4,10,17,.9))}
.cat-card .cat-media img{object-fit:contain}
.mini-media{aspect-ratio:844/644}
.mini-media img{object-fit:contain}
.cat-body{display:flex; flex-direction:column; flex:1; padding:1.35rem 1.45rem 1.5rem}
.cat-body h3{margin-bottom:.5rem; font-size:1.28rem}
.cat-body p{font-size:.93rem; line-height:1.62; margin-bottom:1rem}
.cat-lines{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.05em; line-height:1.85; color:var(--faint);
  margin:0 0 1.15rem; padding-top:.9rem; border-top:1px solid var(--line);
}
.cat-body .cat-count{margin-top:auto; padding-top:.2rem}

/* related-products slide card */
.mini{
  width:min(260px,72vw); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:rgba(6,14,22,.7); display:flex; flex-direction:column; color:inherit;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.mini:hover{transform:translateY(-7px); border-color:var(--line-lime); box-shadow:0 26px 50px -30px rgba(0,0,0,.95)}
.mini-media{overflow:hidden; position:relative}
.mini-media img{width:100%; height:100%; transition:transform .8s var(--ease)}
.mini:hover .mini-media img{transform:scale(1.08)}
.mini-media::after{
  content:attr(data-cat); position:absolute; left:.55rem; bottom:.55rem;
  font-family:var(--f-mono); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(4,10,16,.85); border:1px solid var(--line-lime); color:var(--lime-2);
  padding:.2rem .55rem; border-radius:100px;
}
.mini-body{padding:.9rem 1rem 1.1rem; display:flex; flex-direction:column; flex:1}
.mini-body b{display:block; color:#fff; font-size:1rem; font-weight:500; margin-bottom:.3rem}
.mini-body span{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em; color:var(--faint); margin-top:auto}

/* ==========================================================================
   Amenities
   ========================================================================== */
.venue{
  width:min(560px,86vw); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg, rgba(10,24,36,.75), rgba(5,12,20,.88)); display:flex; flex-direction:column;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.venue:hover{border-color:var(--line-lime); box-shadow:0 30px 60px -34px rgba(0,0,0,.95)}
.venue-media{aspect-ratio:16/9; overflow:hidden; position:relative}
.venue-media img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.venue:hover .venue-media img{transform:scale(1.05)}
.venue-media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 35%, rgba(5,12,20,.92));
}
.venue-tag{
  position:absolute; left:1rem; bottom:.9rem; z-index:2;
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lime-2);
  border:1px solid var(--line-lime); background:rgba(4,10,16,.8); padding:.24rem .7rem; border-radius:100px;
}
.venue-body{padding:1.3rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1}
.venue-body h3{margin-bottom:.5rem}
.venue-body > p{color:var(--muted); font-size:.94rem; margin-bottom:1.1rem}
.amen{list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:.42rem}
.amen li{
  display:flex; gap:.6rem; align-items:baseline; font-size:.9rem; color:var(--paper-2);
  padding-left:.1rem; transition:transform .25s var(--ease), color .25s;
}
.amen li::before{content:"◆"; color:var(--lime); font-size:.44rem; transform:translateY(-2px)}
.amen li:hover{color:#fff; transform:translateX(3px)}
.amen li a{color:inherit; border-bottom:1px solid transparent}
.amen li a:hover{color:var(--lime-2); border-color:var(--line-lime)}
.venue-body .cat-count{margin-top:auto}

@media (max-width:900px){
  .ticker-head,.ticker-note{display:none}
}
@media (max-width:760px){
  .range-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tick-track{animation:none}
  .ticker-head::before{animation:none}
}

/* long sliders: progress bar instead of a dot per card */
.slide-dots.as-prog{
  align-self:center; width:min(240px,40vw); height:3px; border-radius:3px;
  background:var(--line); overflow:hidden; display:block;
}
.slide-dots.as-prog span{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,var(--sky),var(--lime-2)); transition:width .25s var(--ease);
}