/* ==========================================================================
   Nine5 Labs — stylesheet
   Direction: a working paper. Measured grid, margin notes, section marks.
   Signature: scope stated as intervals rather than point estimates.
   Palette: cool paper, deep ink, cobalt, amber reserved for uncertainty bands
   Type: Archivo (display) / Source Serif 4 (body) / JetBrains Mono (data)
   ========================================================================== */

:root{
  --ink:    #0B1220;
  --steel:  #4E5F73;
  --line:   #C9D2DC;
  --paper:  #EDF0F3;
  --sheet:  #FFFFFF;
  --cobalt: #1E4FE0;
  --amber:  #D8912C;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Source Serif 4", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --shell: 1140px;
  --pad: clamp(20px, 5vw, 44px);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--sheet);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17.5px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-0.018em;
  margin:0;
}

p{ margin:0 0 1em; }
a{ color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{ position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; }
.skip:focus{ left:12px; top:12px; }

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

.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding-inline:var(--pad);
}

/* ---------- Marker / section numbering ---------- */
.marker{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 16px;
  display:flex; align-items:center; gap:10px;
}
.sec-no{
  color:var(--cobalt);
  font-weight:500;
  letter-spacing:.06em;
}

/* ---------- Masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.masthead__inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:68px; gap:24px;
}
.logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.logo__mark{
  width:28px; height:28px; flex:none;
  stroke:var(--ink); stroke-width:1.7; fill:none;
}
.logo__mark circle{ fill:var(--cobalt); stroke:var(--cobalt); }
.logo__text{
  font-family:var(--font-display);
  font-weight:700; font-size:18px; letter-spacing:-0.02em;
}
.masthead__nav{ display:flex; align-items:center; gap:28px; }
.masthead__nav a{
  font-family:var(--font-display);
  font-size:14.5px; font-weight:500; text-decoration:none;
  padding-block:6px; border-bottom:2px solid transparent;
}
.masthead__nav a:hover{ border-bottom-color:var(--cobalt); }
.masthead__nav a.masthead__cta{
  background:var(--ink); color:#fff; padding:9px 17px; border-bottom:none;
}
.masthead__nav a.masthead__cta:hover{ background:var(--cobalt); }

.burger{
  display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center;
}
.burger__bars,
.burger__bars::before,
.burger__bars::after{
  content:""; display:block; width:22px; height:2px; background:var(--ink);
}
.burger__bars{ position:relative; }
.burger__bars::before{ position:absolute; top:-7px; }
.burger__bars::after{ position:absolute; top:7px; }

.nav-mobile{
  display:none; flex-direction:column;
  border-top:1px solid var(--line);
  padding:6px var(--pad) 16px;
}
.nav-mobile a{
  font-family:var(--font-display); font-weight:600;
  padding:12px 0; text-decoration:none;
  border-bottom:1px solid var(--line);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:15.5px; font-weight:600;
  padding:13px 24px;
  border:2px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid{ background:var(--cobalt); color:#fff; }
.btn--solid:hover{ background:var(--ink); }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--line:hover{ border-color:var(--ink); }
.btn--full{ width:100%; }

/* ---------- Hero ---------- */
.hero{
  padding-block:clamp(54px, 8vw, 100px) clamp(46px, 7vw, 84px);
  border-bottom:1px solid var(--line);
}
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(34px, 5vw, 76px);
  align-items:start;
}
.hero__title{
  font-size:clamp(31px, 4.3vw, 52px);
  margin:0 0 22px;
  max-width:20ch;
}
.hero__lede{
  font-size:clamp(17px, 1.5vw, 19.5px);
  color:var(--steel);
  max-width:52ch;
  margin-bottom:30px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Signature: interval plot ---------- */
.intervals{
  margin:0;
  background:var(--paper);
  border:1px solid var(--line);
  padding:26px 24px 22px;
}
.intervals__cap{
  font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink);
  padding-bottom:16px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.intervals__cap span{
  display:block; margin-top:7px;
  letter-spacing:.04em; text-transform:none;
  color:var(--steel); font-size:11px;
}
.intervals__list{ list-style:none; margin:0; padding:0; }

.interval{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(min(96px,100%),1.5fr) auto;
  align-items:center;
  gap:14px;
  padding:11px 0;
  border-bottom:1px dotted var(--line);
}
.interval:last-child{ border-bottom:0; }
.interval__name{
  font-family:var(--font-display);
  font-size:13.5px; font-weight:600; line-height:1.25;
}
.interval__track{
  position:relative; display:block;
  height:8px;
  background:
    repeating-linear-gradient(90deg,
      var(--line) 0 1px, transparent 1px 25%);
  border-bottom:1px solid var(--line);
}
.interval__band{
  position:absolute; top:0; bottom:0;
  left:var(--lo); right:calc(100% - var(--hi));
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:left center;
  animation:band-in .7s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:var(--delay, 0s);
}
.interval__band::before,
.interval__band::after{
  content:""; position:absolute; top:-4px; bottom:-4px; width:2px;
  background:var(--ink);
}
.interval__band::before{ left:0; }
.interval__band::after{ right:0; }

.interval:nth-child(1) .interval__band{ --delay:.05s; }
.interval:nth-child(2) .interval__band{ --delay:.15s; }
.interval:nth-child(3) .interval__band{ --delay:.25s; }
.interval:nth-child(4) .interval__band{ --delay:.35s; }

@keyframes band-in{ to{ transform:scaleX(1); } }

.interval__val{
  font-family:var(--font-mono);
  font-size:12px; color:var(--steel); white-space:nowrap;
}
.intervals__foot{
  margin:18px 0 0; padding-top:15px;
  border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.55; color:var(--steel);
}

/* ---------- Band ---------- */
.band{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(42px, 6vw, 72px);
}
.band__text{
  font-family:var(--font-body);
  font-size:clamp(20px, 2.6vw, 29px);
  line-height:1.42;
  max-width:34ch;
  margin:0;
}
.band__text strong{
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.015em;
}

/* ---------- Sections ---------- */
.section{ padding-block:clamp(58px, 7.5vw, 100px); }
.section--paper{ background:var(--paper); border-block:1px solid var(--line); }

.sechead{ max-width:58ch; margin-bottom:clamp(32px, 4vw, 52px); }
.sechead__title{ font-size:clamp(27px, 3.6vw, 42px); margin:0 0 16px; }
.sechead__lede{ font-size:17.5px; color:var(--steel); margin:0; }

/* ---------- Practice ---------- */
.practice{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr));
  gap:clamp(26px, 3.5vw, 44px);
}
.practice__item{ border-top:2px solid var(--ink); padding-top:20px; }
.practice__item h3{ font-size:21px; margin:0 0 12px; }
.practice__item p{ font-size:16px; color:var(--steel); }
.practice__note{
  font-family:var(--font-mono);
  font-size:11.5px; line-height:1.6;
  color:var(--cobalt);
  margin:0; padding-top:12px;
  border-top:1px dotted var(--line);
}

/* ---------- Method: margin-note layout ---------- */
.method{ border-top:1px solid var(--line); }
.method__row{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:clamp(20px, 4vw, 48px);
  padding-block:28px;
  border-bottom:1px solid var(--line);
}
.method__aside{ display:flex; flex-direction:column; gap:8px; }
.method__num{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.14em;
  color:var(--cobalt);
}
.method__gate{
  font-family:var(--font-mono);
  font-size:11.5px; line-height:1.5;
  color:var(--steel);
  border-left:2px solid var(--amber);
  padding-left:10px;
}
.method__body h3{ font-size:22px; margin:0 0 10px; }
.method__body p{ margin:0; font-size:16.5px; color:var(--steel); max-width:62ch; }

/* ---------- Engagement modes ---------- */
.modes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(262px,100%),1fr));
  gap:20px;
}
.mode{
  border:1px solid var(--line);
  padding:28px 24px;
  display:flex; flex-direction:column;
  background:var(--sheet);
}
.mode--lead{ border-color:var(--ink); border-width:2px; }
.mode h3{ font-size:22px; margin:0 0 12px; }
.mode p{ font-size:16px; color:var(--steel); flex:1; }
.mode__meta{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--cobalt);
  margin:14px 0 0; padding-top:14px;
  border-top:1px solid var(--line);
  flex:none;
}

/* ---------- Contact ---------- */
.section--contact{ background:var(--paper); border-top:1px solid var(--line); }
.contact{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:clamp(32px, 5vw, 64px);
  align-items:start;
}
.contact__lines{ list-style:none; margin:24px 0 0; padding:0; }
.contact__lines li{
  display:flex; gap:14px; padding:11px 0;
  border-top:1px solid var(--line);
  font-size:16px;
}
.contact__lines span{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); min-width:68px; padding-top:4px;
}
.contact__lines a{ color:var(--cobalt); font-weight:600; }

.form{ background:var(--sheet); border:1px solid var(--line); padding:26px 24px; }
.field{ margin-bottom:17px; }
.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); margin-bottom:7px;
}
.field input,
.field textarea{
  width:100%;
  font-family:var(--font-body); font-size:16px;
  padding:11px 13px;
  border:1px solid var(--line);
  background:var(--sheet);
  color:var(--ink);
}
.field input:focus,
.field textarea:focus{ border-color:var(--cobalt); }
.field textarea{ resize:vertical; }
.form__status{
  margin:14px 0 0; min-height:1.4em;
  font-family:var(--font-mono); font-size:13px;
}
.form__status[data-state="error"]{ color:#C0392B; }
.form__status[data-state="ok"]{ color:#1B7F5A; }

/* ---------- Colophon ---------- */
.colophon{
  background:var(--ink); color:var(--line);
  padding-top:clamp(46px, 6vw, 68px);
}
.colophon__inner{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(215px,100%),1fr));
  gap:34px;
  padding-bottom:42px;
}
.colophon h2{
  font-family:var(--font-mono);
  font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber);
  margin:0 0 14px;
}
.colophon__brand .logo__text{ color:#fff; display:block; margin-bottom:12px; }
.colophon p{ font-size:14.5px; line-height:1.65; margin:0; }
.colophon__links{ display:flex; flex-direction:column; gap:8px; }
.colophon__links a{ font-size:14.5px; text-decoration:none; }
.colophon__links a:hover{ color:#fff; }
.colophon__base{
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:19px;
}
.colophon__base p{ font-family:var(--font-mono); font-size:11.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 920px){
  .hero__inner{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .method__row{ grid-template-columns:1fr; gap:14px; }
  .method__aside{ flex-direction:row; align-items:center; gap:14px; }
}

@media (max-width: 760px){
  .masthead__nav{ display:none; }
  .burger{ display:inline-flex; }
  .nav-mobile:not([hidden]){ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  .interval__band{ animation:none; transform:scaleX(1); }
  *{ transition-duration:.001ms !important; }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px){
  body{ font-size:16.5px; }
  .hero__title{ font-size:clamp(27px, 7.6vw, 36px); }
  .sechead__title{ font-size:clamp(24px, 7.2vw, 32px); }
  .band__text{ font-size:19px; }
  .intervals{ padding:22px 18px 18px; }
  /* stack the interval rows so the band never gets squeezed to nothing */
  .interval{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name val" "track track";
    gap:6px 12px;
  }
  .interval__name{ grid-area:name; }
  .interval__val{ grid-area:val; }
  .interval__track{ grid-area:track; margin-top:4px; }
  .mode{ padding:24px 20px; }
  .form{ padding:22px 18px; }
  .btn{ width:100%; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .contact__lines li{ flex-direction:column; gap:2px; }
}