/* Hallmark · THE ONE-SITE SHELL — shared header, footer + section grammar
 * Every page of b3x.ruggediq.com (including the designer suite) wears exactly this.
 * DNA: plastedil glass header + navy/gold/Cormorant, over b3x's cinematic core.
 * Consumes tokens.css only — no raw colour or font values in here.
 * Hallmark · pre-emit critique: P5 H5 E4 S4 R5 V4
 */

/* ---------- the glass header ---------- */
.shellnav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  gap:var(--space-md);padding:13px clamp(16px,4vw,44px);
  background:var(--color-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-glass-border)}
.sn-brand{display:flex;align-items:center;gap:11px;white-space:nowrap;color:var(--color-text);text-decoration:none;
  font-family:var(--font-tech);font-weight:600;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase}
.sn-brand img{height:26px;width:auto;display:block}
.sn-brand b{font-weight:600}
.sn-brand em{font-style:normal;color:var(--color-accent)}
@media(max-width:1180px){.sn-brand em{display:none}}
.sn-links{display:flex;gap:clamp(14px,2.4vw,28px);margin-left:auto}
.sn-links a{font-family:var(--font-tech);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--color-silver);text-decoration:none;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out)}
.sn-links a:hover,.sn-links a.on{color:var(--color-text)}
.sn-links a.on{border-bottom:2px solid var(--color-accent)}
.sn-cta{font-family:var(--font-tech);font-weight:600;font-size:.78rem;letter-spacing:.1em;
  white-space:nowrap;text-decoration:none;color:var(--color-on-accent);
  background:linear-gradient(120deg,var(--color-accent),var(--color-accent-2));
  border-radius:var(--radius-pill);padding:10px 20px;
  transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out)}
.sn-cta:hover{filter:brightness(1.07)}
.sn-cta:active{transform:translateY(1px)}
@media(max-width:980px){.sn-links{display:none}.sn-cta{margin-left:auto;font-size:.72rem;padding:9px 15px}}

/* ---------- the statement footer ---------- */
.shellfoot{border-top:1px solid var(--color-line);padding:var(--space-xl) clamp(16px,4vw,44px);
  display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:baseline}
.shellfoot .sf-tag{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);color:var(--color-silver)}
.shellfoot .sf-meta{color:var(--color-muted);font-size:var(--text-sm);flex-basis:100%;order:3}
.shellfoot nav{margin-left:auto;display:flex;gap:var(--space-md);flex-wrap:wrap}
.shellfoot nav a{font-family:var(--font-tech);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-muted);text-decoration:none;white-space:nowrap}
.shellfoot nav a:hover{color:var(--color-text)}

/* ---------- shared section grammar (the plastedil DNA) ---------- */
.k{display:block;font-family:var(--font-tech);font-size:.7rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--color-accent)}
.sec-head .k,.pane-head .k{margin-bottom:10px}
.eyebrow{font-family:var(--font-tech);font-size:.72rem;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-sm)}

/* floating glass stat chip (hero) */
.hero-card{position:absolute;z-index:5;right:clamp(16px,4vw,60px);bottom:96px;width:256px;
  background:var(--color-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--color-glass-border);border-radius:var(--radius-md);padding:var(--space-md)}
.hero-card .k{margin-bottom:8px}
.hero-card .row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-top:1px solid var(--color-line);font-size:.82rem}
.hero-card .row:first-of-type{border-top:0;padding-top:0}
.hero-card .row span:first-child{color:var(--color-muted)}
.hero-card .row span:last-child{color:var(--color-text);font-weight:600;text-align:right}
@media(max-width:1020px){.hero-card{display:none}}

/* numbered steps */
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:var(--space-sm)}
.step{position:relative;padding:var(--space-md);border:1px solid var(--color-line);border-radius:var(--radius-md);
  background:var(--color-glass);transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.step:hover{transform:translateY(-3px);border-color:var(--color-accent-deep)}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  font-family:var(--font-display);font-size:2.1rem;font-weight:600;color:var(--color-accent);
  display:block;margin-bottom:6px;line-height:1}
.step b{display:block;margin-bottom:6px;font-family:var(--font-tech);font-weight:600}
.step p{color:var(--color-muted);font-size:.88rem;line-height:1.55}

/* glass card hover-lift for any card grid */
.lift{transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.lift:hover{transform:translateY(-3px);border-color:var(--color-accent-deep)}