/* =====================================================================
   THE METHOD PAGES

   The landing page is a room you travel through. These are documents you
   read standing still, so they drop the whole apparatus: no canvas, no
   scrim, no bloom. What carries over is the palette, the type and the
   discipline about what may be claimed.

   One column, one measure, and nothing behind the words.
   ===================================================================== */
:root{
  --ink:#f4f6f8;
  --paper:#ffffff;
  --bone:#0f1319;
  --bone-dim:#39424d;
  --muted:#6f7985;
  --line:rgba(24,29,36,.14);
  --line-soft:rgba(24,29,36,.08);
  --pad:clamp(20px,4vw,64px);
  --nav-h:76px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Onest',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  font-weight:400; font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:#1c2229; color:#fff; }

/* --------------------------------------------------------------- bar */
.pnav{
  position:sticky; top:0; z-index:20; height:var(--nav-h);
  display:flex; align-items:center; gap:20px;
  padding:0 var(--pad);
  background:rgba(244,246,248,.86);
  backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
}
.pnav .brand-tx{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.pnav .brand-tx b{ font-size:14px; font-weight:600; letter-spacing:.2em; color:#0b0e13; }
.pnav .brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.32em; color:var(--muted); }
.pnav .back{
  margin-left:auto; display:inline-flex; align-items:center; gap:10px;
  font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
}
.pnav .back i{ width:20px; height:1px; background:currentColor; display:block; transition:width .45s var(--ease-out); }
.pnav .back:hover i{ width:30px; }

/* ------------------------------------------------------------- sheet */
.doc{ max-width:1180px; margin:0 auto; padding:0 var(--pad); }
.doc-head{ padding:clamp(52px,9vh,110px) 0 clamp(34px,5vh,58px); border-bottom:1px solid var(--line); }
.crumb{
  display:flex; align-items:center; gap:12px; margin-bottom:26px;
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.crumb b{ color:#1c2229; font-weight:500; }
.crumb span.sep{ width:20px; height:1px; background:var(--line); display:block; }
.doc-head h1{
  margin:0; max-width:15ch;
  font-size:clamp(38px,6.2vw,86px); font-weight:400; line-height:1.02; letter-spacing:-.035em;
}
.doc-head .lede{
  margin:clamp(24px,3vw,36px) 0 0; max-width:60ch;
  font-size:clamp(18px,1.5vw,24px); line-height:1.5; font-weight:400;
  letter-spacing:-.012em; color:#1c2229;
}

/* ------------------------------------------------------------- body */
.doc-body{
  display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:clamp(28px,5vw,90px);
  padding:clamp(44px,7vh,86px) 0 clamp(50px,8vh,96px);
}
.doc-aside{ position:sticky; top:calc(var(--nav-h) + 34px); align-self:start; }
.doc-aside h4{
  margin:0 0 16px; font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.spec{ margin:0; }
.spec div{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--line-soft); }
.spec dt{ font-size:12.5px; color:var(--muted); }
.spec dd{ margin:0; font-size:12.5px; text-align:right; color:#1c2229; font-variant-numeric:tabular-nums; }
.doc-main{ max-width:68ch; }
.doc-main h2{
  margin:clamp(38px,5vw,58px) 0 16px;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:#1c2229;
  padding-top:16px; border-top:1px solid var(--line-soft);
}
.doc-main h2:first-child{ margin-top:0; border-top:0; padding-top:0; }
.doc-main p{ margin:0 0 20px; color:var(--bone-dim); }
.doc-main p strong{ color:var(--bone); font-weight:500; }
.doc-main ul{ margin:0 0 20px; padding-left:0; list-style:none; }
.doc-main li{
  position:relative; padding-left:22px; margin-bottom:12px; color:var(--bone-dim);
}
.doc-main li::before{
  content:''; position:absolute; left:0; top:.72em; width:9px; height:1px; background:#1c2229;
}
.pull{
  margin:clamp(30px,4vw,44px) 0; padding:clamp(22px,2.4vw,30px) clamp(24px,2.6vw,34px);
  background:var(--paper); box-shadow:0 0 0 1px var(--line-soft), 0 24px 60px -46px rgba(16,20,26,.5);
  font-size:clamp(17px,1.35vw,21px); line-height:1.5; letter-spacing:-.008em; color:#0f1319;
}
.limit{
  margin:clamp(34px,4.6vw,52px) 0 0; padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,30px);
  border-left:2px solid #1c2229; background:rgba(24,29,36,.045);
}
.limit h3{
  margin:0 0 12px; font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:#1c2229;
}
.limit p{ margin:0 0 12px; font-size:15.5px; line-height:1.6; color:var(--bone-dim); }
.limit p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------- feet */
.doc-next{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px; background:var(--line-soft);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.doc-next a{
  display:block; padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,32px);
  background:var(--ink); transition:background .4s;
}
.doc-next a:hover{ background:var(--paper); }
.doc-next span{
  display:block; font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.doc-next b{ display:block; font-size:clamp(17px,1.5vw,22px); font-weight:400; letter-spacing:-.012em; }
.doc-next i{ display:block; margin-top:8px; font-style:normal; font-size:14px; color:var(--bone-dim); }

.doc-cta{ padding:clamp(48px,8vh,92px) 0; text-align:center; }
.doc-cta h3{ margin:0 0 22px; font-size:clamp(22px,2.4vw,34px); font-weight:400; letter-spacing:-.02em; }
.doc-cta a{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px;
  padding:16px 32px; border:1px solid var(--bone);
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  transition:color .45s;
}
.doc-cta a i{ position:absolute; inset:0; background:var(--bone); transform:translate3d(0,101%,0); transition:transform .55s var(--ease-out); }
.doc-cta a span{ position:relative; z-index:1; }
.doc-cta a:hover{ color:#fff; }
.doc-cta a:hover i{ transform:none; }

.pfoot{
  border-top:1px solid var(--line-soft);
  padding:26px var(--pad); display:flex; flex-wrap:wrap; gap:16px 30px; justify-content:space-between;
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:860px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track takes its automatic minimum from
     the widest thing inside it, so one nowrap table cell drags the whole
     column past the viewport and the page scrolls sideways on a phone. */
  .doc-body{ grid-template-columns:minmax(0,1fr); }
  .doc-aside{ position:static; order:2; padding-top:30px; border-top:1px solid var(--line-soft); }
  .doc-main{ order:1; }
}

/* =====================================================================
   THE COMPANY AND LEGAL PAGES

   Same document register as the method pages, with three additions: a
   roster, a wider definition list for company facts, and a footer that
   carries the legal routes. Nothing here changes the method pages.
   ===================================================================== */

/* -------------------------------------------------------------- roster */
.roster{
  margin:clamp(26px,3.4vw,38px) 0 clamp(30px,4vw,46px);
  border-top:1px solid var(--line);
}
.ros{
  padding:clamp(20px,2.4vw,28px) 0;
  border-bottom:1px solid var(--line-soft);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:6px clamp(20px,3vw,44px); align-items:start;
}
.ros b{
  grid-column:1; font-size:clamp(17px,1.5vw,21px); font-weight:400;
  letter-spacing:-.012em; color:var(--bone); line-height:1.3;
}
.ros .ros-role{
  grid-column:1; font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:#1c2229; margin-top:4px;
}
.ros .ros-cred{
  grid-column:1; font-size:12.5px; line-height:1.55; color:var(--muted); margin-top:8px;
}
.ros p{
  grid-column:2; grid-row:1 / span 3; margin:0;
  font-size:15.5px; line-height:1.62; color:var(--bone-dim);
}
/* the next h2 draws its own rule, and two hairlines together read as a seam */
.ros:last-child{ border-bottom:0; }

/* ------------------------------------------------------- company facts */
.spec-wide div{ padding:13px 0; }
.spec-wide dt{ font-size:13px; }
.spec-wide dd{ font-size:13px; text-align:right; }
.spec-wide dd a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.spec dd a{ color:inherit; }

/* --------------------------------------------------------- legal prose
   Long documents that must stay scannable: numbered clauses, a plain
   definition table, and a last-reviewed line that is never decorative. */
.doc-main .stamp{
  margin:0 0 clamp(26px,3vw,34px); padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);
  font-size:12px; letter-spacing:.02em; color:var(--muted);
}
.doc-main h3{
  margin:clamp(24px,3vw,32px) 0 10px;
  font-size:15px; font-weight:500; letter-spacing:-.006em; color:var(--bone);
}
.doc-main .tbl{
  width:100%; margin:0 0 22px; border-collapse:collapse;
  display:block; overflow-x:auto;
}
.doc-main .tbl th, .doc-main .tbl td{
  text-align:left; vertical-align:top; padding:12px 18px 12px 0;
  border-bottom:1px solid var(--line-soft); font-size:14.5px; line-height:1.55;
}
.doc-main .tbl th{
  font-size:9.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.doc-main .tbl td{ color:var(--bone-dim); }
.doc-main .tbl td:first-child{ color:var(--bone); white-space:nowrap; padding-right:32px; }

/* ------------------------------------------------------------- footer */
.pfoot-nav{ display:flex; flex-wrap:wrap; gap:10px 26px; }
.pfoot-nav a{ color:var(--muted); transition:color .3s; }
.pfoot-nav a:hover{ color:var(--bone); }

@media (max-width:720px){
  .ros{ grid-template-columns:1fr; }
  .ros p{ grid-column:1; grid-row:auto; margin-top:12px; }
  .spec-wide div{ flex-direction:column; gap:4px; }
  .spec-wide dd{ text-align:left; }
}