:root{
  --panel:#3F3D42;      /* stationery dark grey */
  --ink:#2C2A30;        /* deepest */
  --paper:#F6F6F8;
  --paper-alt:#EDEDF1;
  --line:#E1E0E5;
  --body:#55535A;
  --body-dim:#8B8992;
  --white:#fff;
  --blue:#499FD2;
  --green:#97D164;
  --orange:#ED7B47;
  --purple:#925586;
  --yellow:#FAD239;
  --yellow-ink:#9A7200;   /* readable yellow for text on white */
  --display:"Space Grotesk",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img,svg{display:block}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- logo ---------- */
.logo{width:190px;height:auto;color:var(--white)}
.logo-ink{color:var(--panel)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.site-head .wrap{display:flex;align-items:center;gap:32px;height:74px}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-decoration:none;transition:color .18s;
}
.nav a:hover{color:var(--white)}
.btn{
  display:inline-block;font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;padding:11px 20px;border-radius:2px;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.btn-solid{background:var(--white);color:var(--ink)}
.btn-solid:hover{background:var(--yellow)}
.btn-ghost{border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.85)}
.btn-ghost:hover{border-color:var(--white);color:var(--white)}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{
  background:var(--ink);color:var(--white);position:relative;overflow:hidden;
  padding:88px 0 96px;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 520px at 76% 44%,rgba(146,85,134,.20),transparent 66%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.eyebrow b{color:var(--yellow);font-weight:500}
h1{
  font-family:var(--display);font-weight:500;font-size:clamp(2.3rem,4.6vw,3.65rem);
  line-height:1.08;letter-spacing:-.022em;margin:0 0 26px;color:var(--white);
}
h1 em{font-style:normal;color:var(--body-dim)}
.hero p.lede{font-size:1.09rem;color:rgba(255,255,255,.74);max-width:34em;margin:0 0 36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- network graph (signature) ---------- */
.graph{width:100%;max-width:520px;margin-inline:auto}
.graph .edge{stroke:rgba(255,255,255,.22);stroke-width:1.25;fill:none}
.graph .hub-ring{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1}
.graph .hub-core{fill:var(--purple)}
.graph .node{transition:r .25s}
.graph .junction{fill:none;stroke:var(--green);stroke-width:1.5}
.graph .label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;
  fill:rgba(255,255,255,.72);text-transform:uppercase;
}
.graph .label-sub{font-family:var(--mono);font-size:9.5px;fill:rgba(255,255,255,.4);letter-spacing:.1em}
.graph a{text-decoration:none;cursor:pointer}
.graph a:hover .node,.graph a:focus-visible .node{r:11}
.graph a:hover .label,.graph a:focus-visible .label{fill:var(--white)}
.graph a:focus-visible{outline:none}
.graph a:focus-visible .halo{opacity:.55}
.halo{opacity:0;transition:opacity .25s}
.pulse{transform-origin:center;animation:pulse 4.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.30;r:34}50%{opacity:.10;r:44}}
.packet{fill:#fff;offset-rotate:0deg;animation:run 3.4s linear infinite}
.packet.p1{offset-path:path("M 260 270 L 105 175");animation-delay:0s}
.packet.p2{offset-path:path("M 260 270 L 415 175");animation-delay:.9s}
.packet.p3{offset-path:path("M 260 270 L 260 400 L 160 470");animation-delay:1.8s}
.packet.p4{offset-path:path("M 260 270 L 260 400 L 360 470");animation-delay:2.7s}
@keyframes run{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}

/* ---------- sections ---------- */
section{padding:96px 0}
.section-head{max-width:44em;margin-bottom:52px}
.kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--body-dim);margin:0 0 16px;
}
h2{
  font-family:var(--display);font-weight:500;font-size:clamp(1.75rem,3.1vw,2.5rem);
  line-height:1.16;letter-spacing:-.018em;color:var(--panel);margin:0 0 16px;
}
h3{font-family:var(--display);font-weight:500;font-size:1.28rem;color:var(--panel);margin:0 0 10px;letter-spacing:-.01em}
.section-head p{margin:0;font-size:1.05rem}

/* ---------- brands ---------- */
.brands{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.brand{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:3px;
  padding:32px 30px 28px;text-decoration:none;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.brand::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  border-radius:3px 0 0 3px;
}
.brand:hover{transform:translateY(-3px);border-color:#CFCED5;box-shadow:0 12px 30px -18px rgba(44,42,48,.4)}
.brand-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-ink,var(--accent));margin-bottom:14px;font-weight:500;
}
.brand p{margin:0 0 20px;font-size:.97rem;color:var(--body)}
.brand .go{
  margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--panel);display:inline-flex;align-items:center;gap:8px;
}
.brand .go span{transition:transform .2s;display:inline-block}
.brand:hover .go span{transform:translateX(4px)}

/* ---------- what we do ---------- */
.alt{background:var(--paper-alt)}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.col{border-top:2px solid var(--panel);padding-top:22px}
.col p{margin:0;font-size:.98rem}

/* ---------- contact ---------- */
.contact{background:var(--panel);color:var(--white)}
.contact h2{color:var(--white)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.contact p{color:rgba(255,255,255,.75)}
.detail{display:block;text-decoration:none;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.detail:first-of-type{border-top:1px solid rgba(255,255,255,.16)}
.detail .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);display:block;margin-bottom:6px;
}
.detail .v{font-family:var(--display);font-size:1.32rem;color:var(--white);letter-spacing:-.01em}
a.detail:hover .v{color:var(--yellow)}
address{font-style:normal;color:rgba(255,255,255,.75);font-size:1rem;line-height:1.85}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:rgba(255,255,255,.55);padding:44px 0 52px;font-size:.86rem}
.foot-bar{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.foot-links{margin-left:auto;display:flex;gap:22px}
.site-foot a{color:rgba(255,255,255,.72);text-decoration:none}
.site-foot a:hover{color:var(--white)}
.legal{margin:0;line-height:1.75;max-width:70em;color:rgba(255,255,255,.42)}
.rule{height:4px;display:flex;margin-bottom:34px}
.rule i{flex:1}

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

/* ---------- responsive ---------- */
@media (max-width:900px){
  .graph .label{font-size:14px}
  .graph .label-sub{font-size:11.5px}
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .graph{max-width:400px}
  .brands{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr;gap:34px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .nav a:not(.btn){display:none}
  section{padding:72px 0}
  .hero{padding:64px 0 76px}
}
@media (max-width:520px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .logo{width:158px}
  .site-head .wrap{height:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .packet{display:none}
  .pulse{animation:none;opacity:.22}
  *{transition-duration:.01ms!important}
}

/* ============================================================
   Wholesale page
   ============================================================ */

/* sub-brand lockup in the header */
.lockup{display:flex;align-items:center;gap:14px}
.lockup .divider{width:1px;height:22px;background:rgba(255,255,255,.22)}
.lockup .sub{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange);
}

/* hero: network record card (the signature) */
.record{
  border:1px solid rgba(255,255,255,.17);border-radius:3px;background:rgba(0,0,0,.22);
  font-family:var(--mono);font-size:13px;overflow:hidden;
}
.record-head{
  display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.04);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.record-head .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.record dl{margin:0;padding:8px 18px 16px}
.record .row{display:flex;gap:18px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.record .row:last-child{border-bottom:0}
.record dt{
  flex:0 0 118px;color:rgba(255,255,255,.45);
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;padding-top:1px;
}
.record dd{margin:0;color:var(--white)}
.record dd .muted{color:rgba(255,255,255,.5)}

/* handoff rail */
.rail{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0;margin-bottom:44px}
.stage{
  background:var(--white);border:1px solid var(--line);border-radius:3px;padding:22px 22px 20px;
  border-top:2px solid var(--stage,var(--panel));
}
.stage h4{
  margin:0 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--stage,var(--panel));font-weight:500;
}
.stage p{margin:0;font-size:.9rem;line-height:1.55}
.link{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:0 14px;min-width:120px}
.link .wire{width:100%;height:1px;background:repeating-linear-gradient(90deg,var(--body-dim) 0 5px,transparent 5px 10px)}
.link span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body-dim);text-align:center;
}

/* two handoff options */
.options{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.option{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:30px 28px}
.option h3{margin-bottom:8px}
.option .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--orange);display:block;margin-bottom:14px;
}
.option p{margin:0 0 16px;font-size:.97rem}
.option ul{margin:0;padding:0;list-style:none}
.option li{
  font-size:.9rem;padding:9px 0 9px 20px;border-top:1px solid var(--line);position:relative;
}
.option li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:1px;background:var(--orange)}

@media (max-width:900px){
  .rail{grid-template-columns:1fr;gap:0}
  .link{flex-direction:row;padding:12px 0;min-height:56px}
  .link .wire{width:1px;height:100%;min-height:34px;background:repeating-linear-gradient(180deg,var(--body-dim) 0 5px,transparent 5px 10px)}
  .options{grid-template-columns:1fr}
  .record dt{flex:0 0 100px}
}
@media (max-width:520px){
  .lockup .sub{font-size:11px}
  .record{font-size:12px}
}

@media (max-width:560px){
  .site-head .wrap{gap:14px}
  .lockup{gap:9px}
  .lockup .logo{width:104px}
  .lockup .sub{font-size:10px;letter-spacing:.1em}
  .site-head .btn{padding:9px 12px;font-size:11px}
}