/* Strong Arm Constructors, concept
   Palette taken from the client's own kitchen: blueprint navy + the brass
   hardware in the photograph. */

:root{
  --ink:        #06101f;   /* deepest navy, page ground */
  --blueprint:  #0d2247;   /* blueprint field */
  --line:       #c9dcff;   /* drafting line */
  --brass:      #cd9a4e;   /* pulled from the cabinet hardware */
  --brass-lift: #e8bd7c;
  --paper:      #f3f1ec;   /* warm off-white, not pure */
  --paper-dim:  #b9c3d6;
  --rule:       rgba(201,220,255,.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}

.mono,.eyebrow,.kicker,.cap-num,.cap-label,.n,.nav-mark-sub,.loader-text{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:100;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease,visibility .6s ease;
}
#loader.done{opacity:0;visibility:hidden;}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:14px;}
.loader-mark{
  font-size:34px;font-weight:800;letter-spacing:.18em;color:var(--brass);
  border:2px solid var(--brass);padding:10px 16px 10px 20px;
}
.loader-text{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-dim);}

/* ---------- nav ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  background:linear-gradient(to bottom,rgba(6,16,31,.82),rgba(6,16,31,0));
  transition:background .3s ease,padding .3s ease;
}
#nav.solid{background:rgba(6,16,31,.94);padding:12px 28px;border-bottom:1px solid var(--rule);}
.nav-mark{
  font-size:17px;font-weight:800;letter-spacing:.10em;line-height:1;
  display:flex;flex-direction:column;gap:3px;
}
.nav-mark-sub{font-size:8.5px;letter-spacing:.30em;color:var(--paper-dim);font-weight:400;}
.nav-cta{
  background:var(--brass);color:#1a1206;font-weight:700;font-size:14px;
  padding:11px 18px;border-radius:2px;letter-spacing:.01em;white-space:nowrap;
  transition:background .2s ease,transform .2s ease;
}
.nav-cta:hover{background:var(--brass-lift);transform:translateY(-1px);}

/* ---------- scroll stage ---------- */
#stage{height:420vh;position:relative;}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden;}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;}

.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}

/* hero copy sits over the canvas */
.hero{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 28px 88px;
  max-width:1100px;margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;
  transition:opacity .35s ease;
}
.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--line);
  margin-bottom:18px;text-shadow:0 1px 12px rgba(6,16,31,.9);
}
h1{
  margin:0 0 20px;font-size:clamp(38px,7.6vw,84px);line-height:.98;
  font-weight:800;letter-spacing:-.03em;text-wrap:balance;
  text-shadow:0 2px 30px rgba(6,16,31,.75);
}
h1 .line{display:block;}
h1 .accent{color:var(--brass-lift);}
.hero-sub{
  margin:0 0 26px;font-size:clamp(15px,1.9vw,18px);line-height:1.55;
  max-width:46ch;color:var(--paper);
  text-shadow:0 1px 16px rgba(6,16,31,.95);
}
.scroll-hint{
  display:flex;align-items:center;gap:12px;
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--line);
}
.scroll-hint i{
  width:52px;height:1px;background:var(--line);position:relative;overflow:hidden;display:block;
}
.scroll-hint i::after{
  content:"";position:absolute;top:0;left:-52px;width:52px;height:1px;background:var(--brass-lift);
  animation:sweep 2.2s ease-in-out infinite;
}
@keyframes sweep{0%{left:-52px}60%{left:52px}100%{left:52px}}

/* running caption, top-right of the stage */
.stage-caption{
  position:absolute;top:96px;right:28px;text-align:right;
  display:flex;flex-direction:column;gap:4px;
}
.cap-num{font-size:11px;letter-spacing:.18em;color:var(--brass);font-variant-numeric:tabular-nums;}
.cap-label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--line);}

/* ---------- content ---------- */
main{position:relative;z-index:2;background:var(--ink);}
.kicker{
  display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin-bottom:16px;
}
.band,.trades,.cta{max-width:900px;margin:0 auto;padding:110px 28px;}
.band h2,.cta h2{
  margin:0 0 20px;font-size:clamp(26px,4.2vw,44px);line-height:1.12;
  font-weight:800;letter-spacing:-.025em;text-wrap:balance;
}
.band p{margin:0;font-size:clamp(16px,2vw,19px);line-height:1.65;color:var(--paper-dim);max-width:58ch;}

.trades{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.trades ul{
  list-style:none;padding:0;margin:0 0 28px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;
}
.trades li{
  display:flex;align-items:baseline;gap:14px;
  padding:18px 0;border-bottom:1px solid var(--rule);
  font-size:clamp(18px,2.4vw,24px);font-weight:700;letter-spacing:-.015em;
}
.trades .n{font-size:11px;color:var(--brass);letter-spacing:.14em;font-weight:400;}
.trades-note{margin:0;color:var(--paper-dim);font-size:17px;line-height:1.6;}

.cta{text-align:left;}
.btn{
  display:inline-block;background:var(--brass);color:#1a1206;
  font-weight:800;font-size:19px;letter-spacing:-.01em;
  padding:18px 34px;border-radius:2px;margin:6px 0 18px;
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--brass-lift);transform:translateY(-2px);}
.cta-sub{margin:0;font-size:14px;color:var(--paper-dim);}

footer{
  border-top:1px solid var(--rule);padding:36px 28px 60px;
  max-width:900px;margin:0 auto;
}
footer p{
  margin:0;font-family:ui-monospace,Menlo,monospace;
  font-size:12px;line-height:1.8;color:var(--paper-dim);
}
footer strong{color:var(--line);}

@media (max-width:640px){
  #nav{padding:14px 18px;}
  .hero{padding:0 18px 64px;}
  .stage-caption{top:78px;right:18px;}
  .band,.trades,.cta{padding:74px 18px;}
  .trades li{font-size:19px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .scroll-hint i::after{animation:none;}
  *{transition-duration:.01ms !important;}
}