/* ============================================================
   NON — Trade Training
   Design language lifted from the A4 on-prem 1-pager and the
   core range info card: near-black ground, hairline grid, a
   single grotesque, and micro-caps labels.
   ============================================================ */

:root{
  --ink:        #1c1c1c;
  --ink-2:      #232323;
  --paper:      #ffffff;
  --muted:      rgba(255,255,255,.62);
  --muted-2:    rgba(255,255,255,.42);
  --rule:       rgba(255,255,255,.22);
  --rule-soft:  rgba(255,255,255,.12);

  /* Helvetica Neue throughout. Helvetica and Arial are metric-compatible
     stand-ins for devices that don't ship it (Windows, Android). */
  --grotesque: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;

  --gut:  clamp(20px, 4.2vw, 56px);   /* page gutter */
  --band: clamp(56px, 8vw, 116px);    /* band rhythm */
  --hair: 1px;

  --micro: .68rem;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--grotesque);
  font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.018em; line-height:1.08; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--paper); color:var(--ink); padding:.6em 1em; font-size:.85rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

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

.eyebrow{
  display:block;
  font-size:var(--micro);
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:1.1em;
}

/* ---------------------------------------------------------- TOPBAR */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  padding:0 var(--gut);
  height:58px;
  background:rgba(28,28,28,.86);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:var(--hair) solid var(--rule);
}
.topbar__mark{ display:flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.topbar__mark img{ height:15px; width:auto; }
.topbar__nav{ display:flex; gap:clamp(12px,1.8vw,26px); overflow-x:auto; scrollbar-width:none; }
.topbar__nav::-webkit-scrollbar{ display:none; }
.topbar__nav a{
  font-size:var(--micro); letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; white-space:nowrap;
  padding:.4em 0; border-bottom:var(--hair) solid transparent;
  transition:color .18s, border-color .18s;
}
.topbar__nav a:hover,
.topbar__nav a.is-current{ color:var(--paper); border-bottom-color:var(--paper); }
.topbar__cta{
  margin-left:auto; flex:0 0 auto;
  font-size:var(--micro); letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; border:var(--hair) solid var(--rule);
  padding:.55em 1.05em; transition:background .18s, color .18s, border-color .18s;
}
.topbar__cta:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.topbar__toggle{ display:none; }

@media (max-width:820px){
  .topbar__nav{
    position:absolute; inset:58px 0 auto 0;
    flex-direction:column; gap:0;
    background:var(--ink); border-bottom:var(--hair) solid var(--rule);
    padding:.4em var(--gut) 1.1em;
    transform:scaleY(0); transform-origin:top; opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
  }
  .topbar__nav.is-open{ transform:scaleY(1); opacity:1; pointer-events:auto; }
  .topbar__nav a{ padding:.85em 0; border-bottom:var(--hair) solid var(--rule-soft); }
  .topbar__cta{ display:none; }
  .topbar__toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    margin-left:auto; width:34px; height:34px; padding:0;
    background:none; border:0; cursor:pointer;
  }
  .topbar__toggle span{ display:block; height:1px; background:var(--paper); transition:transform .2s, opacity .2s; }
  .topbar__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
  .topbar__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }
}

/* ---------------------------------------------------------- HERO */
.hero{ border-bottom:var(--hair) solid var(--rule); }

.hero__media{ position:relative; }
.hero__media img{
  width:100%; height:clamp(300px,60vh,620px); object-fit:cover; object-position:center 34%;
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(28,28,28,.5) 0%,
    rgba(28,28,28,.05) 26%,
    rgba(28,28,28,.72) 68%,
    var(--ink) 100%);
}
.hero__abv{
  position:absolute; top:clamp(14px,2.4vw,26px); left:var(--gut); z-index:2;
  font-size:clamp(1.5rem,3.4vw,2.5rem); font-weight:700; letter-spacing:-.03em;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}

.hero__lock{
  position:relative; z-index:2;
  margin-top:clamp(-140px,-13vw,-70px);
  padding:0 var(--gut);
  display:grid; gap:clamp(18px,3vw,40px);
  grid-template-columns:minmax(0,1fr);
  align-items:end;
}
@media (min-width:840px){
  .hero__lock{ grid-template-columns:minmax(0,1fr) minmax(240px,.62fr); }
}

.hero__title{ min-width:0; }
.wordmark{ margin:0; line-height:0; }
.wordmark img{ width:min(100%, 46rem); height:auto; }
.hero__kicker{
  margin:1.15em 0 0;
  font-size:var(--micro); letter-spacing:.19em; text-transform:uppercase;
  color:var(--muted);
}
.hero__facts{
  margin:0; display:grid; gap:.9em;
  border-top:var(--hair) solid var(--rule); padding-top:1.1em;
}
@media (min-width:840px){ .hero__facts{ border-top:0; padding-top:0; text-align:right; } }
.hero__facts div{ display:grid; gap:.15em; }
.hero__facts dt{
  font-size:var(--micro); letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2);
}
.hero__facts dd{ margin:0; font-size:.98rem; }

.hero__quote{
  margin:clamp(30px,5vw,56px) 0 0;
  padding:clamp(22px,3.4vw,40px) var(--gut) clamp(30px,5vw,56px);
  border-top:var(--hair) solid var(--rule);
  max-width:74ch;
}
.hero__quote p{
  font-size:clamp(1rem,1.5vw,1.22rem); font-weight:300; line-height:1.52; letter-spacing:-.008em;
  color:rgba(255,255,255,.9);
}
.hero__quote cite{
  display:block; margin-top:1.1em; font-style:normal;
  font-size:var(--micro); letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2);
}

/* ---------------------------------------------------------- BANDS */
.band{
  padding:var(--band) var(--gut);
  border-bottom:var(--hair) solid var(--rule);
  scroll-margin-top:58px;
}
.band__head{ max-width:64ch; margin-bottom:clamp(28px,4vw,52px); }
.band__head h2{ font-size:clamp(1.9rem,5.2vw,3.4rem); font-weight:300; letter-spacing:-.035em; }
.band__lede{
  margin-top:1em; max-width:56ch;
  font-size:clamp(.98rem,1.2vw,1.08rem); color:var(--muted); font-weight:300;
}

/* Hairline grid — the container's background shows through the 1px gaps,
   which is what draws the rules. A grid with more columns than items in its
   last row therefore leaves a bare cell painted in the rule colour, so any
   such grid gets a `.filler` cell, shown only at the breakpoints that need it. */
.ruled{
  border:var(--hair) solid var(--rule);
  display:grid;
  gap:var(--hair);
  background:var(--rule);
}
.ruled > *{ background:var(--ink); }

.filler{ display:none; background:var(--ink); }
/* steps: 5 items, bare cell only in the two-column band */
@media (min-width:620px) and (max-width:999px){ .steps .filler{ display:block; } }
/* specs: 5 items, bare cell at two and three columns */
@media (max-width:999px){ .grid--5 .filler{ display:block; } }
/* quiz: odd question count, bare cell only once it goes two-up */
@media (min-width:820px){ .quiz .filler{ display:block; } }

.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }
.grid--5{ grid-template-columns:repeat(2,1fr); }
@media (min-width:680px){
  .grid--2{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(3,1fr); }
  .grid--5{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1000px){
  .grid--5{ grid-template-columns:repeat(5,1fr); }
}
.grid + .grid{ margin-top:clamp(20px,3vw,36px); }

.cell{ padding:clamp(20px,2.6vw,32px); }
.cell h3{ font-size:1.05rem; margin-bottom:.9em; }
.cell p{ color:var(--muted); font-weight:300; }
.cell em{ font-style:normal; color:var(--paper); }
.cell__note{
  margin-top:1.2em; padding-top:1em; border-top:var(--hair) solid var(--rule-soft);
  font-size:.86rem; color:var(--muted-2) !important;
}

.pullbar{
  margin-top:clamp(20px,3vw,36px);
  border:var(--hair) solid var(--rule);
  padding:clamp(20px,2.6vw,32px);
}
.pullbar p{ font-size:clamp(1rem,1.5vw,1.2rem); font-weight:300; max-width:70ch; }
.pullbar strong{
  display:block; font-size:var(--micro); letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:.7em;
}

/* ---------------------------------------------------------- FOUNDER */
.split{ grid-template-columns:1fr; }
@media (min-width:820px){ .split{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } }

.split__media{
  margin:0; padding:0;
  display:flex; flex-direction:column; min-height:0;
}
.split__media img{
  flex:1 1 auto; width:100%; min-height:260px; height:100%;
  object-fit:cover; object-position:center 22%;
}
.split__media figcaption{
  padding:1em clamp(20px,2.6vw,32px);
  border-top:var(--hair) solid var(--rule);
  font-size:var(--micro); letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2);
}
.split__body{ padding:clamp(22px,3vw,40px); }
.split__body blockquote{ margin:0; }
.split__body blockquote p{
  font-size:clamp(1rem,1.4vw,1.16rem); font-weight:300; line-height:1.55; color:rgba(255,255,255,.88);
}

.statrow{
  list-style:none; margin:clamp(22px,3vw,34px) 0 0; padding:1.4em 0 0;
  border-top:var(--hair) solid var(--rule);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1em;
}
.statrow__n{ display:block; font-size:clamp(1.7rem,4vw,2.5rem); font-weight:300; letter-spacing:-.04em; }
.statrow__l{
  display:block; margin-top:.4em;
  font-size:var(--micro); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}

/* ---------------------------------------------------------- PROCESS */
.steps{ list-style:none; margin:0; padding:0; grid-template-columns:1fr; }
@media (min-width:620px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(5,1fr); } }
.step{ padding:clamp(20px,2.4vw,28px); }
.step__n{
  display:block; font-size:var(--micro); letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:1.4em;
}
.step h3{ font-size:1.02rem; margin-bottom:.7em; }
.step p{ color:var(--muted); font-weight:300; font-size:.93rem; }

/* ---------------------------------------------------------- RANGE */
.filters{ display:flex; flex-wrap:wrap; gap:.5em; margin-bottom:clamp(20px,3vw,32px); }
.chip{
  font-family:inherit; font-size:var(--micro); letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); background:none; border:var(--hair) solid var(--rule);
  padding:.6em 1.05em; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
}
.chip:hover{ color:var(--paper); border-color:var(--paper); }
.chip.is-on{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

.range{ grid-template-columns:1fr; }
@media (min-width:560px){ .range{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .range{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1320px){ .range{ grid-template-columns:repeat(6,1fr); } }

.sku{ display:flex; flex-direction:column; }
.sku[hidden]{ display:none; }

.sku__shot{
  padding:clamp(24px,3vw,34px) clamp(20px,2.4vw,28px);
  border-bottom:var(--hair) solid var(--rule);
  display:grid; place-items:center;
}
.sku__shot img{
  height:clamp(170px,15vw,250px); width:auto; object-fit:contain;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));
}
.sku__id, .sku__style, .sku__profile{ padding:0 clamp(20px,2.4vw,28px); }
.sku__id{ padding-top:clamp(20px,2.4vw,26px); }
.sku__n{
  display:block; font-size:var(--micro); letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:.6em;
}
.sku__id h3{ font-size:1.02rem; }
.sku__style{
  margin:1em 0 .5em;
  font-size:var(--micro); letter-spacing:.14em; text-transform:uppercase; color:var(--paper);
}
.sku__profile{
  color:var(--muted); font-weight:300; font-size:.93rem;
  margin-bottom:clamp(20px,2.4vw,26px);
}
.sku__pair{
  margin-top:auto;
  padding:clamp(16px,2vw,22px) clamp(20px,2.4vw,28px);
  border-top:var(--hair) solid var(--rule);
}
.sku__pair .lbl{
  display:block; font-size:var(--micro); letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:.8em;
}
.sku__pair ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4em; }
.sku__pair li{ font-size:.9rem; color:var(--muted); font-weight:300; }
.sku__pair li::before{ content:"· "; color:var(--muted-2); }

.range__empty{ margin-top:1.4em; color:var(--muted-2); font-size:.9rem; }

/* ---------------------------------------------------------- SERVICE */
.spec{ padding:clamp(20px,2.6vw,32px); display:grid; align-content:start; gap:.45em; }
.spec__k{ font-size:var(--micro); letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2); }
.spec__v{ font-size:clamp(1.35rem,3vw,1.9rem); font-weight:300; letter-spacing:-.03em; }
.spec__s{ font-size:.86rem; color:var(--muted); font-weight:300; }

.ticks, .crosses{ list-style:none; margin:0; padding:0; display:grid; gap:.85em; }
.ticks li, .crosses li{
  position:relative; padding-left:1.5em;
  font-size:.94rem; color:var(--muted); font-weight:300;
}
.ticks li::before{ content:"→"; position:absolute; left:0; color:var(--paper); }
.crosses li::before{ content:"×"; position:absolute; left:0; color:var(--paper); }

.trusted{
  margin-top:clamp(28px,4vw,48px); padding-top:clamp(22px,3vw,32px);
  border-top:var(--hair) solid var(--rule);
}
.trusted ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6em 2.2em;
}
.trusted li{
  font-size:clamp(.95rem,1.5vw,1.15rem); font-weight:300;
  letter-spacing:-.01em; color:rgba(255,255,255,.82);
}

/* ---------------------------------------------------------- OBJECTIONS */
.faq{ grid-template-columns:1fr; }
@media (min-width:900px){ .faq{ grid-template-columns:repeat(2,1fr); } }

.qa{ padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px); }
.qa summary{
  cursor:pointer; list-style:none;
  font-size:clamp(1rem,1.4vw,1.12rem); font-weight:300; letter-spacing:-.015em;
  display:flex; align-items:baseline; gap:.9em;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"+"; margin-left:auto; flex:0 0 auto;
  color:var(--muted-2); font-size:1.1rem; line-height:1;
}
.qa[open] summary::after{ content:"–"; color:var(--paper); }
.qa__a{ padding-top:1em; }
.qa__a p{ color:var(--muted); font-weight:300; font-size:.95rem; max-width:60ch; }

/* ---------------------------------------------------------- QUIZ */
.quiz{ grid-template-columns:1fr; }
@media (min-width:820px){ .quiz{ grid-template-columns:repeat(2,1fr); } }

.q{
  padding:clamp(20px,2.6vw,30px);
  border:0; margin:0; min-width:0;
}
/* A legend can't be laid out as a normal block, so float it back into flow. */
.q__legend{ display:block; float:left; width:100%; padding:0; margin-bottom:1.1em; }
.q__n{
  display:block; font-size:var(--micro); letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:1em;
}
.q__t{ display:block; font-size:1.02rem; font-weight:400; letter-spacing:-.012em; }
.q__opts{ display:grid; gap:.1em; clear:both; }
.q__opt{
  display:flex; gap:.75em; align-items:flex-start;
  padding:.6em .7em; margin-left:-.7em;
  cursor:pointer; font-size:.93rem; font-weight:300; color:var(--muted);
  border:var(--hair) solid transparent;
  transition:color .15s, border-color .15s;
}
.q__opt:hover{ color:var(--paper); }
.q__opt input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:13px; height:13px; margin:.28em 0 0;
  border:var(--hair) solid var(--rule); border-radius:50%;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.q__opt input:checked{ border-color:var(--paper); background:var(--paper); box-shadow:inset 0 0 0 2.5px var(--ink); }
.q__opt input:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; }

.q.is-right{ box-shadow:inset 3px 0 0 rgba(255,255,255,.85); }
.q.is-wrong{ box-shadow:inset 3px 0 0 rgba(255,255,255,.28); }
.q__opt.is-answer{ color:var(--paper); border-color:var(--rule); }
.q__opt.is-chosen-wrong{ color:var(--muted-2); text-decoration:line-through; }
.q__why{
  margin-top:1.1em; padding-top:.9em; border-top:var(--hair) solid var(--rule-soft);
  font-size:.86rem; color:var(--muted-2);
}
.q__why[hidden]{ display:none; }

.quiz__foot{
  margin-top:clamp(20px,3vw,30px);
  display:flex; flex-wrap:wrap; align-items:center; gap:.7em 1.2em;
}
.btn{
  font-family:inherit; font-size:var(--micro); letter-spacing:.15em; text-transform:uppercase;
  background:var(--paper); color:var(--ink); border:var(--hair) solid var(--paper);
  padding:.85em 1.6em; cursor:pointer; transition:opacity .18s;
}
.btn:hover{ opacity:.82; }
.btn--ghost{ background:none; color:var(--muted); border-color:var(--rule); }
.btn--ghost:hover{ color:var(--paper); border-color:var(--paper); opacity:1; }
.quiz__score{ margin:0; font-size:.95rem; font-weight:300; }
.quiz__score strong{ font-weight:400; }

/* ---------------------------------------------------------- FOOTER */
.foot{
  padding:var(--band) var(--gut) clamp(36px,5vw,60px);
  display:grid; gap:clamp(26px,4vw,44px);
  align-items:end;
}
@media (min-width:760px){ .foot{ grid-template-columns:1fr auto; } }
.foot__lock{ width:min(100%, 20rem); height:auto; }
.foot__meta{ display:grid; gap:.5em; justify-items:start; }
@media (min-width:760px){ .foot__meta{ justify-items:end; } }
.foot__meta a{
  font-size:var(--micro); letter-spacing:.17em; text-transform:uppercase;
  text-decoration:none; color:var(--muted);
  border-bottom:var(--hair) solid transparent; transition:color .18s, border-color .18s;
}
.foot__meta a:hover{ color:var(--paper); border-bottom-color:var(--paper); }
.foot__fine{
  grid-column:1/-1; margin:0; padding-top:clamp(20px,3vw,30px);
  border-top:var(--hair) solid var(--rule);
  font-size:var(--micro); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
}

@media print{
  .topbar,.filters,.quiz__foot,.skip{ display:none; }
  body{ background:#fff; color:#000; }
  .ruled{ background:#000; }
  .ruled > *{ background:#fff; }
  .qa__a{ display:block !important; }
  /* The brand marks ship white — flip them for paper. */
  .wordmark img,.foot__lock{ filter:invert(1); }
}