:root{
  --paper:#EEF0EA; --paper-dim:#E3E6DC; --paper-card:#F6F7F2;
  --ink:#171A1D; --ink-soft:#565C58; --ink-faint:#8A9086;
  --line:#C9CDC0; --line-strong:#171A1D;
  --amber:#D9A441; --amber-ink:#5A4419;
  --green:#3F6B52; --green-bg:#E4EBE3;
  --steel:#37485A;
  --red-flag:#B5482E;
  --radius:3px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--paper);}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans',-apple-system,Helvetica,Arial,sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--steel); outline-offset:3px;}
.wrap{max-width:1080px; margin:0 auto; padding:0 6vw;}
section{position:relative;}

/* ---------- NAV (same as homepage) ---------- */
nav{
  display:flex; align-items:center; gap:22px;
  /* side padding lines the content up with .wrap (max 1080px, 6vw inside) */
  padding:24px max(6vw, calc((100% - 1080px) / 2 + 6vw)); position:sticky; top:0; z-index:50;
  background:rgba(238,240,234,0.88); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:16px; min-width:0;}
.wordmark{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; letter-spacing:-0.01em; display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);}
.wordmark img{display:block; height:28px; width:auto;}
.nav-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--ink-soft); white-space:nowrap;}
.nav-links{display:flex; align-items:center; gap:22px;}
.nav-link{font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:4px; color:var(--ink-soft); white-space:nowrap;}
@media (max-width:900px){ .nav-tag{display:none;} }
.nav-links{margin-left:auto;}
/* phones: Field notes and Prices sit in a thin top row that scrolls away;
   only the wordmark and Book a call stay pinned (about 60px) */
@media (max-width:640px){
  nav{flex-wrap:wrap; column-gap:12px; row-gap:10px; padding:0 6vw 12px; top:-34px;}
  .nav-links{order:-1; flex:1 1 100%; height:34px; justify-content:flex-end; gap:18px;}
  .nav-link{font-size:11.5px;}
  .wordmark img{height:24px;}
  nav .nav-cta{margin-left:auto; padding:7px 14px;}
}
.nav-cta{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em;
  border:1px solid var(--ink); padding:9px 16px; border-radius:var(--radius); text-decoration:none; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.nav-cta:hover{background:var(--ink); color:var(--paper);}

.nl-short{display:none;}
@media (max-width:640px){ .nl-long{display:none;} .nl-short{display:inline;} }
@media (max-width:1500px){ .nav-tag{display:none;} }

.offer-bar{background:var(--ink); color:var(--paper); font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.04em; line-height:1.5;}
.offer-bar p{max-width:1080px; margin:0 auto; padding:10px 6vw; display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:center; align-items:center; text-align:center;}
.offer-bar a{color:var(--amber); text-decoration:underline; text-underline-offset:3px; white-space:nowrap;}
.offer-bar a:hover{color:var(--paper);}
.ob-short{display:none;}
@media (max-width:640px){ .ob-long{display:none;} .ob-short{display:inline;} .offer-bar{font-size:12px;} }

/* ---------- DIMENSION DIVIDER (reused signature device) ---------- */
.dim-divider{
  display:flex; align-items:center; gap:14px; margin:0 auto; max-width:1080px;
  padding:0 6vw; color:var(--ink-faint); user-select:none;
}
.dim-divider .tick{width:1px; height:14px; background:var(--line-strong);}
.dim-divider .rule{flex:1; height:1px; background:var(--line);
  background-image:linear-gradient(to right, var(--line) 60%, transparent 0%);
  background-size:6px 1px; background-repeat:repeat-x;}
.dim-divider span{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;}

footer{padding:40px 6vw 44px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px 40px;}
footer .wordmark img{height:20px;}
.foot-tag{margin:14px 0 0; font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:18px; line-height:1.4; letter-spacing:-0.005em; color:var(--ink); max-width:460px;}
.foot-links{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em; color:var(--ink-soft);}
.foot-links a{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;}
.foot-links a:hover{text-decoration-color:var(--ink);}
.foot-links .copy{color:var(--ink-faint);}
@media (max-width:640px){
  footer{flex-direction:column; align-items:flex-start;}
  .foot-links{flex-direction:column; gap:10px;}
}

/* ---------- NOTES INDEX ---------- */
.notes-header{padding:64px 0 40px;}
.notes-header .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 16px;}
.notes-header h1{font-size:clamp(30px,4vw,42px); margin:0 0 14px; max-width:16ch;}
.notes-header p{color:var(--ink-soft); font-size:16.5px; max-width:52ch; margin:0;}
/* The Field Notes standard (See it · Measure it · Keep it) and the link to the toolkit */
.notes-header p.notes-standard{color:var(--ink); font-size:17.5px; margin:0 0 12px;}
.notes-header p.notes-tools{font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.04em; margin:18px 0 0;}
.notes-tools a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;}
.notes-tools a:hover{text-decoration-color:var(--ink);}

.notes-list{padding:20px 0 90px;}
.note-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink);
}
.note-row:first-child{border-top:1px solid var(--line);}
.note-row .note-date{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-faint); white-space:nowrap;}
.note-row .note-body h3{font-size:19px; margin:0 0 6px;}
.note-row .note-body p{margin:0; color:var(--ink-soft); font-size:14.5px; max-width:52ch;}
.note-row .note-arrow{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-faint); transition:transform .15s ease, color .15s ease;}
.note-row:hover .note-arrow{transform:translateX(3px); color:var(--ink);}
@media (max-width:640px){
  .note-row{grid-template-columns:1fr; gap:8px;}
  .note-row .note-arrow{display:none;}
}

/* ---------- ARTICLE ---------- */
.article-header{padding:60px 0 30px;}
.article-header .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin:0 0 18px;}
.article-header h1{font-size:clamp(28px,4.4vw,42px); line-height:1.14; margin:0 0 18px; max-width:20ch;}
.article-meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:10px;}
.article-meta .tick{width:1px; height:11px; background:var(--ink-faint);}

/* Title block under every Field Notes title, like the one in the corner of an engineering drawing.
   The ink background shows through the 1px gaps as thin cell rules. */
.title-block{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:var(--ink); border:1.5px solid var(--ink); max-width:720px; margin:6px 0 0;}
.tb-cell{grid-column:span 6; background:var(--paper); padding:10px 14px 12px; min-width:0;}
.tb-cell.tb-type,.tb-cell.tb-time{grid-column:span 3;}
.title-block.has-stamp .tb-type,.title-block.has-stamp .tb-time,.title-block.has-stamp .tb-stamp{grid-column:span 2;}
.tb-k{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 4px;}
.tb-v{display:block; font-size:15px; line-height:1.45; color:var(--ink);}
.tb-stamp{display:flex; align-items:center; justify-content:center;}
.tb-stamp span{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.12em; color:var(--green); background:var(--green-bg); border:1.5px dashed var(--green); border-radius:2px; padding:6px 9px; transform:rotate(-4deg); white-space:nowrap;}
@media (max-width:560px){
  .title-block.has-stamp .tb-type,.title-block.has-stamp .tb-time{grid-column:span 3;}
  .title-block.has-stamp .tb-stamp{grid-column:span 6; justify-content:flex-start; padding:12px 14px;}
}

/* Field Notes list: note type and length above each title */
.note-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 8px;}
.note-type{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); background:var(--green-bg); border:1px dashed var(--green); border-radius:2px; padding:3px 7px;}
.note-len{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft);}

.article-body{padding:10px 0 70px;}
.article-body .prose{max-width:66ch; margin:0 auto;}
.prose p{margin:0 0 22px; font-size:17px; color:var(--ink); line-height:1.7;}
.prose p:first-of-type{font-size:19px; color:var(--ink-soft);}
.prose h2{font-size:26px; line-height:1.2; margin:46px 0 16px;}
/* "Open it on its own page" under a toolkit tool embedded in an article */
.prose p.tool-own{font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.04em; color:var(--ink); margin:0 0 8px;}
.prose p.tool-own a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;}

/* pull-quote, styled as an inspection stamp (extends the hero's stamp motif) */
.field-note{
  max-width:66ch; margin:38px auto 40px; padding:22px 26px; background:var(--paper-card);
  border:1.5px dashed var(--amber); border-radius:2px; transform:rotate(-0.6deg);
}
.field-note .tag{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--amber-ink); display:block; margin:0 0 10px;}
.field-note p{font-family:'Space Grotesk',sans-serif; font-size:20px; line-height:1.4; margin:0; color:var(--ink);}

/* before/after flow diagram, no numbers, just structure */
.flow-diagram{max-width:66ch; margin:44px auto 48px;}
.flow-track{margin-bottom:26px;}
.flow-track .track-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 8px; border-radius:2px; display:inline-block; margin-bottom:14px;
}
.flow-track.before .track-tag{color:var(--red-flag); background:#F3E4DF; border:1px dashed var(--red-flag);}
.flow-track.after .track-tag{color:var(--green); background:var(--green-bg); border:1px dashed var(--green);}
.flow-steps{display:flex; align-items:center; flex-wrap:wrap; gap:0;}
.flow-step{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink);
  background:var(--paper-card); border:1px solid var(--line); border-radius:2px;
  padding:9px 13px;
}
.flow-step.flag{border-color:var(--red-flag); color:var(--red-flag);}
.flow-step.gate{border-color:var(--green); color:var(--green);}
.flow-arrow{font-family:'IBM Plex Mono',monospace; color:var(--ink-faint); padding:0 9px; font-size:14px;}
@media (max-width:600px){
  .flow-steps{flex-direction:column; align-items:flex-start; gap:8px;}
  .flow-arrow{transform:rotate(90deg); padding:2px 0 2px 8px;}
}

.article-footer{max-width:66ch; margin:0 auto; padding:36px 0 0; border-top:1px solid var(--line); text-align:left;}
.article-footer p{color:var(--ink-soft); font-size:15.5px; margin:0 0 18px;}

/* ---------- THANKS PAGE (contact form landing) ---------- */
.thanks{padding:80px 0 110px;}
.thanks h1{max-width:18ch; line-height:1.15;}
.thanks-links{display:flex; align-items:center; flex-wrap:wrap; gap:18px 26px; margin-top:32px;}

/* Breadcrumb on subpages: the first part links home */
.crumbs a{color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;}
.crumbs a:hover{color:var(--ink); text-decoration-color:var(--ink);}
.article-footer .nav-cta + p{margin:18px 0 0; font-size:15px;}
.article-footer .nav-cta + p a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;}

/* ---------- KEEP IT: a free tool inside a Field Note ----------
   The tool steps out of the story: an ink rule, a "Keep it · free tool" label and a dashed
   "Yours to keep" stamp, so it reads as something for the reader, not the next step of the note. */
.keep{margin:56px 0 34px; padding:14px 0 0; border-top:1.5px solid var(--ink); scroll-margin-top:96px;}
.keep-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 4px;}
.keep-k{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green);}
.keep-stamp{font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--green); background:var(--green-bg); border:1.5px dashed var(--green); border-radius:2px; padding:5px 8px; transform:rotate(-4deg); white-space:nowrap;}
.prose .keep h2{margin:14px 0 14px;}
.prose .keep p.keep-why{font-size:17px; color:var(--ink); margin:0 0 16px;}
.prose .keep p.keep-use{font-family:'IBM Plex Mono',monospace; font-size:12.5px; line-height:1.6; letter-spacing:.02em; color:var(--ink-soft); margin:0 0 6px;}
.prose .keep p.keep-use b{font-weight:500; color:var(--ink); text-transform:uppercase; letter-spacing:.1em; font-size:11px; margin-right:6px;}
.prose .keep p.tool-own{margin:10px 0 0;}
.prose .keep + .keep{margin-top:40px;}
/* Toolkit pages: one line under the intro saying the tool is the reader's to keep */
p.keep-note,.prose p.keep-note,.notes-header p.keep-note{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin:-6px 0 8px;}
.notes-header p.keep-note{margin:14px 0 0;}
.keep-note .keep-stamp{font-size:10px; padding:4px 7px;}

/* YOU GET items link to the part of the note that holds them */
.tb-v a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-faint); text-underline-offset:3px;}
.tb-v a:hover{text-decoration-color:var(--ink);}
.tb-v a::after{content:" ↓"; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}
.keep-note a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;}