/* ==========================================================================
   ITOS — Industrial Dark design system
   Palette, atmosphere, nav, hero, sections, products, forms, footer
   ========================================================================== */
:root{
  --ink:#0d0f12; --panel:#15181d; --panel2:#1b1f25; --line:#2a2f37;
  --amber:#f5a800; --amber-deep:#e08900;
  --white:#f4f5f7; --body:#c9d0d9; --mute:#a8b1bd; --mute2:#78808c;
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber);color:#111;
  font:700 13px 'Archivo',sans-serif;padding:12px 22px;text-decoration:none}
.skip-link:focus{left:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--white);font-family:'Archivo',sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.mono{font-family:'IBM Plex Mono',monospace}
.display{font-family:'Anton',sans-serif;letter-spacing:.5px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:110px 40px}
.wrap-tight{max-width:var(--maxw);margin:0 auto;padding:70px 40px}

/* --- atmosphere ------------------------------------------------------- */
.atmo{position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}
main,header,footer,nav,.hazard,.ticker{position:relative;z-index:3}

/* --- nav --------------------------------------------------------------- */
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:0 40px;height:64px;
  background:rgba(13,15,18,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* maxw minus the wrap's 40px side paddings — aligns nav edges with content edges */
.nav-inner{max-width:calc(var(--maxw) - 80px);margin:0 auto;height:100%;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{height:22px;width:auto;display:block}
.logo em{font:500 9px 'IBM Plex Mono';color:var(--mute);letter-spacing:1.5px;font-style:normal}
.nav-links{display:flex;gap:26px;align-items:center;font:600 12px 'Archivo';letter-spacing:1.2px}
.nav-links>a{color:var(--mute);text-decoration:none;transition:color .2s;padding:6px 0}
.nav-links>a.btn-amber{color:#111;padding:10px 10px;letter-spacing:.5px}
.nav-links>a:hover,.nav-links>a[aria-current="page"]{color:var(--white)}
.nav-links>a[aria-current="page"]{box-shadow:0 2px 0 var(--amber)}
.has-sub{position:relative}
.has-sub>a{color:var(--mute);text-decoration:none;display:inline-flex;align-items:center;gap:5px;padding:22px 0}
.has-sub>a::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sub{position:absolute;top:100%;left:-18px;min-width:290px;background:var(--panel);border:1px solid var(--line);
  padding:10px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:12px 20px;color:var(--mute);text-decoration:none;font:600 13.5px 'Archivo';letter-spacing:1px}
.sub a:hover{color:var(--amber);background:var(--panel2)}
.sub .code{font:600 10px 'IBM Plex Mono';color:var(--amber);margin-right:8px}
.btn-amber{background:var(--amber);color:#111!important;padding:10px 30px;font-weight:700;text-decoration:none;white-space:nowrap;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .2s}
.btn-amber:hover{background:var(--amber-deep)}
.nav-burger{display:none;background:none;border:1px solid var(--line);color:var(--white);width:42px;height:42px;cursor:pointer;font-size:18px}

/* --- buttons ----------------------------------------------------------- */
.cta-primary{display:inline-block;background:var(--amber);color:#111;font:700 14px 'Archivo';padding:16px 28px;text-decoration:none;letter-spacing:.5px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:transform .2s,background .2s}
.cta-primary:hover{transform:translateY(-2px);background:var(--amber-deep)}
.cta-ghost{display:inline-block;border:1px solid #4a505a;color:var(--white);font:600 14px 'Archivo';padding:16px 28px;text-decoration:none;letter-spacing:.5px;transition:border-color .2s}
.cta-ghost:hover{border-color:var(--amber)}
.btn-doc{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel);color:var(--white);
  font:600 12px 'IBM Plex Mono';letter-spacing:1.5px;padding:13px 20px;text-decoration:none;transition:border-color .2s,color .2s}
.btn-doc:hover{border-color:var(--amber);color:var(--amber)}
.btn-doc svg{width:14px;height:14px;fill:var(--amber)}

/* --- home hero ---------------------------------------------------------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.7) contrast(1.05)}
.hero-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(13,15,18,.72) 0%,rgba(13,15,18,.35) 40%,rgba(13,15,18,.96) 88%)}
.hero-inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:140px 40px 130px}
.kicker{display:inline-flex;align-items:center;gap:10px;font:600 12px 'IBM Plex Mono';color:var(--amber);letter-spacing:3px;margin-bottom:22px}
.kicker::before{content:'';width:34px;height:2px;background:var(--amber)}
h1.hero-title{font-family:'Anton';font-size:clamp(50px,8.5vw,118px);line-height:.95;text-transform:uppercase;font-weight:400}
h1.hero-title .outline{color:transparent;-webkit-text-stroke:2px rgba(244,245,247,.85)}
.hero-sub{margin-top:26px;max-width:660px;color:#d6dbe2;font-size:17.5px;line-height:1.7}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-meta{position:absolute;right:40px;top:150px;text-align:right;font:500 11px/2 'IBM Plex Mono';color:var(--mute);letter-spacing:1px;display:none}
@media(min-width:900px){.hero-meta{display:block}}

/* --- page hero (subpages) ----------------------------------------------- */
.page-hero{position:relative;padding:170px 0 70px;background:var(--panel);border-bottom:1px solid var(--line);overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:72px 72px}
.page-hero .wrap-tight{position:relative;padding-top:0;padding-bottom:0}
.page-hero h1{font-family:'Anton';font-size:clamp(38px,5.5vw,72px);text-transform:uppercase;line-height:1;font-weight:400}
.page-hero .lead{margin-top:18px;max-width:none;color:var(--body);font-size:17px;line-height:1.85}
.breadcrumb{font:500 11px 'IBM Plex Mono';letter-spacing:1.5px;color:var(--mute2);margin-bottom:20px}
.breadcrumb a{color:var(--mute2);text-decoration:none}
.breadcrumb a:hover{color:var(--amber)}
.breadcrumb b{color:var(--amber);font-weight:500}

/* --- dividers / ticker --------------------------------------------------- */
.hazard{height:10px;background:repeating-linear-gradient(-45deg,var(--amber) 0 14px,#111 14px 28px);opacity:.92}
.ticker{background:var(--panel);border-bottom:1px solid var(--line);overflow:hidden;padding:14px 0}
.ticker-track{display:flex;gap:56px;white-space:nowrap;animation:tick 28s linear infinite;font:600 13px 'IBM Plex Mono';letter-spacing:2px;color:var(--mute)}
.ticker-track em{color:var(--amber);font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}.rv,.rv-hide{opacity:1!important;transform:none!important;transition:none}}

/* --- section headings ----------------------------------------------------- */
.sec-label{display:flex;align-items:center;gap:14px;font:600 12px 'IBM Plex Mono';color:var(--amber);letter-spacing:3px;margin-bottom:18px}
.wrap .sec-label:not(:first-child){margin-top:100px}
.sec-label::after{content:'';flex:1;height:1px;background:var(--line)}
h2.sec-title{font-family:'Anton';font-size:clamp(32px,4.6vw,58px);text-transform:uppercase;line-height:1.05;font-weight:400}
h2.sec-title .amber{color:var(--amber)}

/* --- why/how/what cards ---------------------------------------------------- */
.whw{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:54px}
.whw-card{background:var(--panel);padding:38px 30px 44px;transition:background .25s}
.whw-card:hover{background:var(--panel2)}
.whw-card .num{font-family:'Anton';font-size:64px;font-weight:400;line-height:1;color:transparent;-webkit-text-stroke:1.5px #3a4048;transition:.25s}
.whw-card:hover .num{-webkit-text-stroke-color:var(--amber)}
.whw-card h3{font:700 17px 'Archivo';letter-spacing:1px;margin:18px 0 12px;text-transform:uppercase}
.whw-card h3 b{color:var(--amber)}
.whw-card p{color:var(--body);font-size:15px;line-height:1.8}

/* --- product cards ----------------------------------------------------------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
.prod{background:var(--panel);border:1px solid var(--line);overflow:hidden;text-decoration:none;color:var(--white);
  transition:transform .25s,border-color .25s;display:flex;flex-direction:column}
.prod:hover{transform:translateY(-6px);border-color:var(--amber)}
.prod-img{height:190px;overflow:hidden;position:relative;background:#20242b}
.prod-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .4s}
.prod:hover .prod-img img{transform:scale(1.06)}
.prod-code{position:absolute;top:14px;left:14px;background:rgba(13,15,18,.85);border:1px solid var(--line);
  font:600 11px 'IBM Plex Mono';color:var(--amber);padding:5px 9px;letter-spacing:1.5px}
.prod-body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.prod-body h3{font:700 17px 'Archivo';letter-spacing:.4px;text-transform:uppercase}
.prod-body p{color:var(--body);font-size:14px;line-height:1.7;margin:10px 0 16px;flex:1}
.prod-link{font:600 11px 'IBM Plex Mono';color:var(--amber);letter-spacing:2px}
.prod-cta{background:linear-gradient(145deg,#232323,#1a1a1a);border:1px dashed #4a4a3a;display:flex;flex-direction:column;justify-content:center;padding:34px;gap:12px}
.prod-cta h3{font-family:'Anton';font-size:26px;font-weight:400;text-transform:uppercase;color:var(--amber)}
.prod-cta p{color:var(--mute);font-size:13px;line-height:1.7}

/* --- product detail page (text left, uncropped product image right) ----------- */
.p-hero{position:relative;border-bottom:1px solid var(--line);padding:150px 0 70px;overflow:hidden;background:var(--panel)}
.p-hero::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:72px 72px}
.p-hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 40px;
  display:flex;gap:60px;align-items:center;flex-wrap:wrap}
.p-hero-txt{flex:1.3;min-width:320px}
.p-hero-img{flex:1;min-width:180px;max-width:266px;margin-left:auto}
.p-hero-img img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 38px rgba(0,0,0,.55))}
.p-hero .code-chip{display:inline-block;font:600 13px 'IBM Plex Mono';color:#111;background:var(--amber);padding:6px 12px;letter-spacing:2px;margin-bottom:20px}
.p-hero h1{font-family:'Anton';font-size:clamp(38px,5.5vw,76px);font-weight:400;text-transform:uppercase;line-height:1}
.p-hero .p-sub{font:600 15px 'Archivo';color:var(--amber);letter-spacing:1px;margin-top:14px;text-transform:uppercase}
.p-hero .lead{margin-top:20px;max-width:720px;color:#d6dbe2;font-size:16.5px;line-height:1.8}
.p-docs{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* gauges — fill animates from 0 on scroll-in, stripes flow continuously */
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px 46px;margin-top:50px}
.gauge label{display:flex;justify-content:space-between;font:600 11px 'IBM Plex Mono';letter-spacing:1.5px;color:var(--mute);margin-bottom:9px}
.gauge label b{color:var(--amber);font-weight:600}
.gauge .track{height:10px;background:var(--panel2);border:1px solid var(--line);position:relative;overflow:visible}
.gauge .fill{position:absolute;top:0;bottom:0;left:0;width:var(--w);
  background:repeating-linear-gradient(-45deg,var(--amber) 0 8px,var(--amber-deep) 8px 16px);
  background-size:23px 23px;animation:stripeflow 1.1s linear infinite;
  transition:width 1.3s cubic-bezier(.22,1,.36,1)}
.gauge .fill::after{content:'';position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 12px 2px rgba(245,168,0,.85);opacity:0;transition:opacity .4s .6s}
@keyframes stripeflow{to{background-position:23px 0}}
.gauges-armed .fill{width:0}
.gauges-armed .fill::after{opacity:0}
.gauges-armed.gauges-on .fill{width:var(--w)}
.gauges-armed.gauges-on .fill::after{opacity:1}
.gauges-armed.gauges-on .gauge:nth-child(2) .fill{transition-delay:.12s}
.gauges-armed.gauges-on .gauge:nth-child(3) .fill{transition-delay:.24s}
.gauges-armed.gauges-on .gauge:nth-child(4) .fill{transition-delay:.36s}
.gauges-armed.gauges-on .gauge:nth-child(5) .fill{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .gauge .fill{animation:none;transition:none}
  .gauges-armed .fill{width:var(--w)}
  .gauges-armed .fill::after{opacity:1;transition:none}
}

/* spec cards */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:54px}
@media(max-width:920px){.spec-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.spec-grid{grid-template-columns:1fr}}
.spec{background:var(--panel);padding:26px 24px 30px}
.spec h4{font:600 10px 'IBM Plex Mono';color:var(--amber);letter-spacing:2px;margin-bottom:12px}
.spec p{font:600 16px/1.5 'Archivo';color:var(--white)}
.spec p small{display:block;font:400 13.5px 'Archivo';color:var(--mute);margin-top:4px}

/* uses blocks */
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
.use{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--amber);padding:28px 26px}
.use h3{font:700 15px 'Archivo';text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}
.use p{color:var(--body);font-size:15px;line-height:1.8}

/* technical data — instrument-panel treatment */
.t-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
.t-hi{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-top:3px solid var(--amber);padding:38px 32px 34px}
.t-hi b{font-family:'Anton';font-weight:400;font-size:clamp(44px,4.6vw,68px);line-height:1;color:var(--white);display:block}
.t-hi b em{font-style:normal;font-size:.42em;color:var(--amber);margin-left:8px;letter-spacing:1px}
.t-hi span{display:block;font:600 10.5px 'IBM Plex Mono';letter-spacing:2px;color:var(--mute);margin-top:14px;line-height:1.7}
@media(max-width:860px){.t-highlights{grid-template-columns:1fr;gap:14px}}

.sbars{display:block;margin-top:70px} /* override .gauges grid — class reused only for reveal JS */
.sbars-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font:600 11px 'IBM Plex Mono';letter-spacing:2px;color:var(--amber);
  padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.sbars-head span:last-child{color:var(--mute2)}
.sbar{display:grid;grid-template-columns:96px 1fr 200px;gap:22px;align-items:center;padding:13px 0}
.sbar .age{font:600 11px 'IBM Plex Mono';letter-spacing:1.5px;color:var(--mute)}
.sbar .bar{height:16px;background:var(--panel2);border:1px solid var(--line);position:relative}
.sbar .fill{position:absolute;top:0;bottom:0;left:0;width:var(--w);
  background:linear-gradient(90deg,var(--amber-deep) 0%,var(--amber) 100%);
  box-shadow:0 0 14px rgba(245,168,0,.35);transition:width 1.4s cubic-bezier(.22,1,.36,1)}
.sbar .val{font:600 14px 'Archivo';color:var(--white);text-align:right;white-space:nowrap}
@media(max-width:680px){.sbar{grid-template-columns:70px 1fr;grid-template-rows:auto auto}.sbar .val{grid-column:2;text-align:left;font-size:12.5px}}

.t-table{margin-top:70px;border-top:1px solid var(--line)}
.t-row{display:grid;grid-template-columns:280px 1fr;gap:30px;padding:24px 0;border-bottom:1px solid var(--line)}
.t-g{font:600 11px 'IBM Plex Mono';letter-spacing:2px;color:var(--amber);padding-top:4px}
.t-kv{display:grid;grid-template-columns:1fr 1fr;gap:0 80px;align-content:start}
.t-kv .tr{display:flex;justify-content:space-between;gap:24px;padding:8px 0;border-bottom:1px dashed #22262e}
.t-kv .tr:last-child,.t-kv .tr:nth-last-child(2):nth-child(odd){border-bottom:none}
.t-kv .tr span{font:400 14.5px 'Archivo';color:var(--mute)}
.t-kv .tr b{font:600 15px 'Archivo';color:var(--white);text-align:right}
@media(max-width:920px){.t-kv{grid-template-columns:1fr;gap:0}}
@media(max-width:760px){.t-row{grid-template-columns:1fr;gap:10px}}
.t-src{margin-top:26px;font:500 11px 'IBM Plex Mono';letter-spacing:1px;color:var(--mute2)}
.t-src a{color:var(--amber);text-decoration:none}
.t-src a:hover{text-decoration:underline}

/* FAQ — editorial numbered list */
.faq{margin-top:54px;counter-reset:faq;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:24px;
  padding:26px 4px;font:600 18px 'Archivo';color:var(--white);transition:color .2s;letter-spacing:.2px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{counter-increment:faq;content:counter(faq,decimal-leading-zero);
  font:500 14px 'IBM Plex Mono';color:var(--amber);min-width:34px;flex-shrink:0}
.faq-item summary i{font-style:normal;flex:1}
.faq-item summary::after{content:'+';font:400 26px 'Anton';color:#4a505a;flex-shrink:0;line-height:1;transition:transform .25s,color .25s;align-self:center}
.faq-item[open] summary::after{transform:rotate(45deg);color:var(--amber)}
.faq-item summary:hover{color:var(--amber)}
.faq-item[open] summary{color:var(--amber)}
.faq-a{padding:0 4px 30px 58px}
.faq-a p{color:var(--body);font-size:15.5px;line-height:1.9;max-width:820px}
@media(max-width:680px){.faq-item summary{font-size:16px;gap:16px}.faq-a{padding-left:50px}}

/* note band */
.note-band{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--amber);padding:34px 36px;margin-top:70px}
.note-band h3{font-family:'Anton';font-weight:400;font-size:22px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px}
.note-band p{color:var(--body);font-size:15px;line-height:1.85;max-width:1000px}

/* cross links */
.xlinks{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:54px}
.xlink{background:var(--panel);padding:22px;text-decoration:none;transition:background .2s}
.xlink:hover{background:var(--panel2)}
.xlink b{display:block;font:600 11px 'IBM Plex Mono';color:var(--amber);letter-spacing:1.5px;margin-bottom:8px}
.xlink span{font:600 13px 'Archivo';color:var(--white);text-transform:uppercase;letter-spacing:.4px}

/* --- global network ---------------------------------------------------------- */
.global{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.global-flex{display:flex;gap:60px;align-items:center;flex-wrap:wrap}
.global-map{flex:1.3;min-width:320px}
.global-map img{width:100%;opacity:.85;filter:invert(.88) hue-rotate(180deg) saturate(.3)}
.map-anim{position:relative}
.map-routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.route{fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:4 8;opacity:.4}
.route-dot{fill:var(--amber);filter:drop-shadow(0 0 6px rgba(245,168,0,.9))}
.hub{fill:var(--amber)}
.hub-ring,.ping{fill:none;stroke:var(--amber);stroke-width:2}
.ping{stroke-width:1.5}
@media (prefers-reduced-motion:reduce){.map-routes circle{display:none}.route{opacity:.3}}
.g-stats{flex:1;min-width:280px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.g-stat{background:var(--panel2);padding:30px 26px}
.g-stat b{font-family:'Anton';font-weight:400;font-size:52px;color:var(--amber)}
.g-stat span{display:block;font:500 10px 'IBM Plex Mono';letter-spacing:2px;color:var(--mute);margin-top:8px;line-height:1.7}

/* --- CTA band ------------------------------------------------------------------ */
.cta-band{background:var(--amber);color:#101010;position:relative;overflow:hidden}
.cta-band .wrap-tight{padding:80px 40px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;position:relative;z-index:1}
.cta-band h2{font-family:'Anton';font-weight:400;font-size:clamp(30px,4vw,52px);text-transform:uppercase;line-height:1.05}
.cta-band p{font:600 13px 'IBM Plex Mono';margin-top:10px;letter-spacing:1px}
.cta-dark{background:#101010;color:var(--amber);font:700 15px 'Archivo';padding:18px 34px;text-decoration:none;letter-spacing:.5px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.cta-band::before{content:'SH100 · SH200 · SH300 · SH400 · SH500';position:absolute;bottom:-24px;left:0;white-space:nowrap;
  font-family:'Anton';font-size:110px;color:rgba(0,0,0,.07);letter-spacing:4px}

/* --- content (prose) pages -------------------------------------------------------- */
.prose{max-width:none}
.prose h2{font-family:'Anton';font-weight:400;font-size:clamp(24px,3vw,36px);text-transform:uppercase;line-height:1.15;margin:80px 0 22px;color:var(--white)}
.prose h2:first-child{margin-top:0}
.prose h3{font:700 16px 'Archivo';letter-spacing:.8px;text-transform:uppercase;margin:36px 0 12px;color:var(--amber)}
.prose p{color:var(--body);font-size:16.5px;line-height:1.9;margin-bottom:18px}
.prose ol{margin:0 0 18px 22px;color:var(--body);font-size:16.5px;line-height:1.9}
.prose ul{margin:0 0 18px 0;color:var(--body);font-size:16.5px;line-height:1.9;list-style:none}
.prose ul li{margin-bottom:10px;padding-left:26px;position:relative}
.prose ul li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--amber)}
.prose ol li{margin-bottom:8px}
.prose p.legal{border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--panel);
  padding:22px 26px;font:600 12.5px 'IBM Plex Mono';line-height:2;color:var(--mute);letter-spacing:.4px}
.prose strong{color:var(--white)}
.prose img{border:1px solid var(--line);margin:26px 0}
.toc{background:var(--panel);border:1px solid var(--line);padding:26px 30px;margin:0 0 56px}
.toc h4{font:600 11px 'IBM Plex Mono';color:var(--amber);letter-spacing:2px;margin-bottom:14px}
.toc ol{margin-left:18px;font-size:14.5px;line-height:2.1;color:var(--mute)}
.toc a{color:var(--mute);text-decoration:none}
.toc a:hover{color:var(--amber)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.two-col .figure{height:400px;overflow:hidden}
.two-col .figure img{width:100%;height:100%;object-fit:cover}
@media(max-width:920px){.two-col .figure{height:260px}}

/* plant bento gallery */
.plant-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px;margin:44px 0 56px}
.plant-bento .tile{position:relative;overflow:hidden;border:1px solid var(--line);margin:0;background:var(--panel2)}
.plant-bento .tile.tall{grid-row:span 2}
.plant-bento .tile.wide{grid-column:span 2}
.plant-bento .tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.02);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s}
.plant-bento .tile:hover img{transform:scale(1.06);filter:saturate(1) contrast(1.04)}
.plant-bento .tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  font:600 10px 'IBM Plex Mono';letter-spacing:1.8px;color:var(--white);
  background:linear-gradient(180deg,transparent,rgba(13,15,18,.88));display:flex;align-items:flex-end;gap:8px}
.plant-bento .tile figcaption::before{content:'';width:14px;height:2px;background:var(--amber);margin-bottom:4px}
@media(max-width:920px){.plant-bento{grid-template-columns:1fr 1fr;grid-auto-rows:190px}}
@media(max-width:560px){.plant-bento{grid-template-columns:1fr;grid-auto-rows:230px}
  .plant-bento .tile.wide{grid-column:span 1}.plant-bento .tile.tall{grid-row:span 1}}
.figure{border:1px solid var(--line)}
.figure img{width:100%;filter:saturate(.85)}
/* uniform-height case-study boxes on product pages */
.prod-grid .figure{height:280px;overflow:hidden}
.prod-grid .figure img{width:100%;height:100%;object-fit:cover}
@media(max-width:920px){.prod-grid .figure{height:220px}}

/* --- forms --------------------------------------------------------------------------- */
.form{margin-top:10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font:600 12.5px 'IBM Plex Mono';letter-spacing:1.8px;color:var(--white)}
.field label i{color:var(--amber);font-style:normal}
.field input,.field textarea,.field select{background:var(--panel);border:1px solid var(--line);color:var(--white);
  font:500 14px 'Archivo';padding:14px 16px;outline:none;transition:border-color .2s;border-radius:0;-webkit-appearance:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--amber)}
.field textarea{min-height:150px;resize:vertical}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.check{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:11px 14px;cursor:pointer;transition:border-color .2s,background .2s}
.check:hover{border-color:#4a505a}
.check input{appearance:none;-webkit-appearance:none;width:15px;height:15px;padding:0;margin:0;flex-shrink:0;cursor:pointer;
  border:1.5px solid #4a505a;background:transparent;display:grid;place-content:center;transition:background .15s,border-color .15s}
.check input:checked{background:var(--amber);border-color:var(--amber)}
.check input:checked::before{content:'';width:8px;height:8px;background:#111;
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.check:has(input:checked){border-color:var(--amber);background:rgba(245,168,0,.08)}
.check:has(input:checked) span{color:var(--white)}
.check span{font:500 13px 'Archivo';color:#c7ccd4;transition:color .15s}
.check .code{font:600 10px 'IBM Plex Mono';color:var(--amber);letter-spacing:1px;margin-right:2px}
.form-status{margin-top:16px;font:500 13px 'IBM Plex Mono';display:none;padding:14px 16px;border:1px solid var(--line)}
.form-status.ok{display:block;color:#7ee2a8;border-color:#2c5a3f}
.form-status.err{display:block;color:#ff9d87;border-color:#6b3226}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:90px}
.ccard{background:var(--panel);padding:26px 24px}
.ccard h4{font:600 10px 'IBM Plex Mono';color:var(--amber);letter-spacing:2px;margin-bottom:12px}
.ccard p,.ccard a{font:500 15px/1.8 'Archivo';color:var(--body);text-decoration:none;word-break:break-word}
.ccard a:hover{color:var(--amber)}

/* --- footer --------------------------------------------------------------------------- */
footer.site-footer{background:#0a0c0e;border-top:1px solid var(--line)}
footer.site-footer .wrap-tight{padding:70px 40px 40px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}
footer.site-footer h4{font:600 11px 'IBM Plex Mono';color:var(--amber);letter-spacing:2px;margin-bottom:16px}
footer.site-footer p{color:var(--mute);font-size:13.5px;line-height:1.9}
footer.site-footer a{color:var(--mute);font-size:13.5px;line-height:2.1;text-decoration:none;display:block}
footer.site-footer a:hover{color:var(--amber)}
.foot-logo{margin-bottom:12px}
.foot-logo img{height:26px;width:auto;display:block}
.socials{display:flex;gap:20px;margin-top:18px}
.socials a{display:flex;align-items:center;justify-content:center;padding:4px 0}
.socials svg{width:17px;height:17px;fill:var(--mute);transition:fill .2s}
.socials a:hover svg{fill:var(--amber)}
.copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;font:500 9px 'IBM Plex Mono';color:var(--mute2);letter-spacing:1px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
footer.site-footer .copy a{display:inline;color:var(--mute2);text-decoration:none;font:inherit;line-height:inherit}
footer.site-footer .copy a:hover{color:var(--amber)}

/* --- reveal (progressive: content visible without JS) ----------------------------------- */
.rv{transition:opacity .7s ease,transform .7s ease}
.rv-hide{opacity:0;transform:translateY(26px)}

/* --- 404 / thank-you --------------------------------------------------------------------- */
.center-page{min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 24px 80px;position:relative;z-index:3}
.center-page h1{font-family:'Anton';font-weight:400;font-size:clamp(60px,12vw,150px);line-height:1;color:transparent;-webkit-text-stroke:2px var(--amber)}
.center-page h2{font-family:'Anton';font-weight:400;font-size:clamp(26px,4vw,44px);text-transform:uppercase;margin-top:10px}
.center-page p{color:var(--mute);margin:18px 0 30px;max-width:440px;line-height:1.7}

/* --- responsive ---------------------------------------------------------------------------- */
@media(max-width:920px){
  .wrap,.wrap-tight{padding-left:24px;padding-right:24px}
  nav.site-nav{padding:0 20px}
  /* absolute (not fixed): backdrop-filter on nav makes it the containing block */
  .nav-links{position:absolute;top:64px;left:0;right:0;height:calc(100vh - 64px);background:#0d0f12;flex-direction:column;
    align-items:flex-start;padding:30px 28px;gap:4px;display:none;overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links>a,.has-sub>a{font-size:16px;padding:14px 0;width:100%}
  .has-sub{width:100%}
  .sub{position:static;opacity:1;visibility:visible;transform:none;border:none;background:none;padding:0 0 6px 16px;min-width:0}
  .sub a{padding:10px 0;font-size:14px}
  .nav-burger{display:block}
  .btn-amber{margin-top:14px}
  .whw,.prod-grid,.uses{grid-template-columns:1fr}
  .xlinks{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  footer.site-footer .wrap-tight{grid-template-columns:1fr}
}