/* ---------------------------------------------------------------------------
   Pontura — page styles for the written pages (home, what we build, how it
   works, pricing, about). The scorecard and the booking pages keep their own
   stylesheets and take chrome.css alone, which retints them.
   --------------------------------------------------------------------------- */

:root{
  --ink:#14181C;
  --ink-deep:#0F1216;
  --ink-panel:#191E23;
  --ink-card:#212830;
  --paper:#F4F2EE;
  --paper-2:#EDEAE3;
  --paper-line:#D9D3C9;
  --paper-rule:#C9C2B7;
  --on-ink:#EDEBE7;
  --on-ink-bright:#FBFAF8;
  --on-ink-body:#A8B0B7;
  --on-ink-muted:#8A939B;
  --on-paper:#1A1E22;
  --on-paper-body:#454C53;
  --on-paper-muted:#55606A;
  --on-paper-label:#5A6067;
  --accent:#C75B32;        /* structural steel primer */
  --accent-ink:#843C21;    /* darkened, for small text on paper */
  --accent-lite:#D68160;   /* lightened, for small text on ink */
  --steel:#5E7A8A;
  --gut: clamp(20px, 4vw, 34px);
  --sec: clamp(62px, 8vw, 104px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0; background:var(--ink); color:var(--on-ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
p{margin:0 0 20px}
p:last-child{margin-bottom:0}
h1,h2,h3{
  margin:0; font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-weight:600; letter-spacing:-.024em; line-height:1.08;
}
h1{font-weight:700; letter-spacing:-.032em; line-height:1}
h3{font-size:19px; letter-spacing:-.012em; line-height:1.25}
a{color:var(--accent-ink)}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.mono{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase; letter-spacing:.15em; font-size:12px;
}
/* One container, one left edge. Nav, page headers, prose and grids all line
   up on the same gutter; only the reading measure is constrained, and only on
   the elements that are actually prose. Grids and frames use the full width. */
.w, .w-wide{max-width:1180px; margin:0 auto; padding:0 var(--gut)}
.w > p, .w > h2, .w > h1, .w > .lede, .w > .pull, .w > .speclist,
.w > .facts, .w > .steps, .w > .todo{max-width:760px}

/* sections alternate ground; .band is the unit of rhythm */
.band{padding:var(--sec) 0}
.band-ink{background:var(--ink); color:var(--on-ink)}
.band-paper{background:var(--paper); color:var(--on-paper)}
.band-paper a{color:var(--accent-ink)}
.band-ink a{color:var(--accent-lite)}

/* --------------------------------------------------------------- hero */
.hero{position:relative; background:var(--ink-deep); overflow:hidden; padding:clamp(64px,9vw,116px) 0 0}
.hero-in{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 var(--gut)}
.hero-in .sub{max-width:620px}
.hero h1{font-size:clamp(40px,7vw,86px); color:var(--on-ink-bright); max-width:14ch}
.hero .sub{
  font-size:clamp(17px,1.9vw,21px); line-height:1.55; color:var(--on-ink-body);
  max-width:600px; margin:26px 0 0;
}
.eyebrow{color:var(--accent-lite); margin:0 0 22px}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:34px 0 0}
.undercta{font-size:14px; color:var(--on-ink-muted); margin:16px 0 0}

/* the bridge, sitting under the hero on the section seam */
.hero-bridge{position:relative; z-index:1; margin:clamp(40px,6vw,68px) 0 0; opacity:.5; overflow:hidden}
.hero-bridge svg{display:block; width:100%; min-width:900px}

/* page header for inner pages */
.phero{background:var(--ink-deep); color:var(--on-ink); padding:clamp(52px,7vw,86px) 0 clamp(46px,6vw,72px); position:relative}
.phero h1{font-size:clamp(31px,4.6vw,54px); color:var(--on-ink-bright); max-width:20ch}
.phero p{font-size:clamp(16px,1.8vw,19px); color:var(--on-ink-body); margin:20px 0 0; max-width:600px}
.phero::after{content:""; position:absolute; left:0; bottom:0; width:min(180px,26vw); height:2px; background:var(--accent)}

/* --------------------------------------------------------------- buttons */
.cta{
  display:inline-block; font-family:'IBM Plex Mono',ui-monospace,monospace;
  text-transform:uppercase; letter-spacing:.15em; font-size:12px; font-weight:500;
  padding:17px 30px; text-decoration:none; border:1px solid transparent;
  background:var(--accent); color:#0B0E11;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cta:hover{background:#E07B52; color:#0B0E11}
.cta.line{background:transparent; color:#C9CFD4; border-color:rgba(232,230,226,.24)}
.cta.line:hover{background:transparent; color:var(--on-ink-bright); border-color:rgba(232,230,226,.55)}
.cta.line-dark{background:transparent; color:var(--on-paper); border-color:var(--paper-rule)}
.cta.line-dark:hover{background:transparent; color:var(--on-paper); border-color:var(--accent)}

/* --------------------------------------------------------------- labels */
.lab{display:flex; align-items:center; gap:12px; margin:0 0 26px}
.lab i{width:8px; height:8px; background:var(--accent); flex:0 0 auto}
.lab span{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-paper-label);
}
.band-ink .lab span{color:var(--on-ink-muted)}

.h-sec{font-size:clamp(29px,4.2vw,50px)}
.lede{font-size:clamp(18px,2vw,21px); line-height:1.58; color:inherit}
.band-paper .lede{color:var(--on-paper)}

.pull{
  border-left:2px solid var(--accent); padding:2px 0 2px 24px; margin:32px 0;
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif; font-weight:500;
  font-size:clamp(20px,2.4vw,26px); line-height:1.32; letter-spacing:-.016em;
  color:var(--on-paper);
}
.band-ink .pull{color:var(--on-ink-bright)}

.facts{border-top:1px solid var(--paper-line); margin:32px 0 0}
.facts p{
  font-size:16px; color:var(--on-paper-muted); margin:0;
  padding:20px 0; border-bottom:1px solid var(--paper-line);
}
.facts b{color:var(--on-paper); font-weight:600}

/* --------------------------------------------------------------- grids */
.grid{display:grid; gap:1px; background:var(--paper-rule); border:1px solid var(--paper-rule); margin:34px 0 0}
.band-ink .grid{background:rgba(232,230,226,.14); border-color:rgba(232,230,226,.14)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cell{background:var(--paper); padding:30px 28px}
.band-ink .cell{background:var(--ink)}
.cell .n{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
  display:block; margin:0 0 12px;
}
.band-ink .cell .n{color:var(--accent-lite)}
.cell h3{font-size:19px; margin:0 0 9px}
.band-ink .cell h3{color:var(--on-ink)}
.cell p{font-size:15.5px; line-height:1.56; color:var(--on-paper-muted); margin:0}
.band-ink .cell p{color:var(--on-ink-muted)}

/* problem list */
.speclist{border-top:1px solid var(--paper-line)}
.spec{display:flex; gap:clamp(16px,2vw,28px); padding:24px 0; border-bottom:1px solid var(--paper-line)}
.spec .n{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.15em;
  color:var(--accent-ink); width:28px; flex:0 0 auto; padding-top:4px;
}
.spec p{font-size:16px; line-height:1.56; color:var(--on-paper-muted); margin:8px 0 0}

/* stepped list */
.steps{margin:34px 0 0}
.step{display:grid; grid-template-columns:84px 1fr; gap:clamp(16px,3vw,30px);
  padding:30px 0; border-top:1px solid var(--paper-rule)}
.step:last-child{border-bottom:1px solid var(--paper-rule)}
.step .num{
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif; font-weight:700;
  font-size:34px; color:var(--accent); line-height:1; letter-spacing:-.03em;
}
.step h3{font-size:clamp(21px,2.3vw,25px); margin:0 0 10px}
.step p{font-size:16.5px; color:var(--on-paper-muted); margin:0 0 14px}
.step .meta{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-paper-label); margin:0;
}

/* --------------------------------------------------- the product diagram */
.frame{border:1px solid rgba(232,230,226,.16); background:var(--ink-panel); margin:34px 0 0}
.frame-bar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid rgba(232,230,226,.12);
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-muted);
}
.pipe{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:rgba(232,230,226,.10)}
.col{background:var(--ink-panel); padding:22px 18px; display:flex; flex-direction:column; gap:10px}
.col .h{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-muted); margin:0 0 6px;
}
.card{height:50px; background:var(--ink-card); border-left:2px solid rgba(232,230,226,.2)}
.card.on{border-left-color:var(--accent)}
.frame-note{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-ink-muted); margin:14px 0 0;
}

/* --------------------------------------------------------------- closer */
.end{background:var(--ink-deep); color:var(--on-ink); padding:clamp(72px,9vw,116px) 0}
.end h2{font-size:clamp(30px,4.6vw,54px); color:var(--on-ink-bright); max-width:18ch}
.end p{font-size:clamp(16px,1.8vw,19px); color:var(--on-ink-body); max-width:540px; margin:22px 0 0}

/* ------------------------------------------------- scroll-in, kept subtle
   Gated on html.js, which site.js sets before paint. If JavaScript never
   runs, nothing is ever hidden — the page is fully readable without it. */
.js .rise{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{opacity:1; transform:none; transition:none}
}

@media (max-width:820px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pipe .col:nth-child(n+4){display:none}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipe .col:nth-child(n+3){display:none}
  .step{grid-template-columns:1fr; gap:8px}
  .step .num{font-size:26px}
  .cta{display:block; text-align:center}
  .cta-row{flex-direction:column; align-items:stretch}
  .hero-bridge svg{min-width:620px}
}