/* ---------------------------------------------------------------------------
   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 */
/* Photographic hero. Two layers under the copy: the photograph at reduced
   opacity, then a gradient that is near-opaque on the left where the text sits
   and thins out to the right so the picture is still visible. If the image file
   is missing the ::before simply paints nothing and the hero stays as it was —
   the page never breaks waiting for an asset. */
.hero{position:relative; background:var(--ink-deep); overflow:hidden; padding:clamp(64px,9vw,116px) 0 0}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url("/assets/hero-tearoff.jpg");
  background-size:cover; background-position:58% 42%;
  opacity:.52;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(96deg,
    var(--ink-deep) 0%,
    rgba(15,18,22,.94) 34%,
    rgba(15,18,22,.72) 62%,
    rgba(15,18,22,.42) 100%);
}
/* Below the fold-ish on a phone the gradient has to be flatter, because the
   text runs the full width rather than sitting in a left column. */
@media (max-width:760px){
  /* The bridge drawing is dropped on phones. At .16 opacity, clipped to a 390px
     window out of a 900px-wide drawing, it read as roughly 300px of dead air
     under the CTAs rather than as a graphic — measured on a 390x900 capture,
     not guessed. It still carries the desktop hero, where there is room for it. */
  .hero-bridge{display:none}
  .hero::after{background:linear-gradient(180deg, rgba(15,18,22,.90) 0%, rgba(15,18,22,.86) 55%, rgba(15,18,22,.94) 100%)}
  .hero::before{background-position:60% 38%; opacity:.46}
}

/* A photograph set into a paper band, with the same frame language as the
   product screenshot so the two read as one system. */
.shot{margin:clamp(30px,4vw,44px) 0 0; border:1px solid var(--paper-rule); background:var(--paper); overflow:hidden}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--on-paper-label);
  padding:10px 14px; border-top:1px solid var(--paper-line);
}
.hero-in{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 var(--gut)}
.hero-in .sub{max-width:620px}
/* 19ch, not 14ch: the headline grew from 32 characters to 48, and at the old
   measure it wrapped to five lines and swallowed the whole first screen. */
.hero h1{font-size:clamp(38px,6vw,72px); color:var(--on-ink-bright); max-width:19ch}
.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}
}