/* Shared by every page that is not the home page. Built from the same
   vocabulary as the home page so the site reads as one thing. */

/* ============ PAGE OPENER ============ */
.phero{background:var(--stone);padding:138px 0 70px;text-align:center}
.phero .lab{display:block;margin-bottom:24px}
.phero h1{max-width:16ch;margin:0 auto}
.phero .sub{max-width:52ch;margin:22px auto 0;color:#4A5342}
.phero .pair{justify-content:center;margin-top:30px}
.phero .fine{margin-top:14px;font-size:15px;color:#6B7464}
.phero.tight{padding:150px 0 64px}
.phero.left{text-align:left}
.phero.left h1,.phero.left .sub{margin-left:0}
@media (max-width:600px){.phero{padding:112px 0 60px}}

/* ============ THE FLOW, how it works in detail ============ */
/* The four steps are a sequence, so they read as one run down a spine
   rather than as four separate cards. The rule is continuous, each number
   sits on it, and a hairline divides one step from the next. */
.flow{position:relative;margin:44px auto 0;max-width:880px;display:flex;flex-direction:column}
.flow::before{content:"";position:absolute;left:35px;top:34px;bottom:34px;width:1px;
  background:var(--rule);pointer-events:none}
.fstep{position:relative;background:transparent;box-shadow:none;border-radius:0;
  display:grid;grid-template-columns:72px 1fr;padding:34px 0;border-top:1px solid var(--rule)}
.fstep:first-child{border-top:0;padding-top:4px}
.fstep:last-child{padding-bottom:4px}
.fstep .n{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:flex-start;
  padding:2px 0 0;font-family:"Martian Mono";font-size:12px;letter-spacing:.06em;color:var(--ember)}
/* the number sits on the rule, so the rule appears to pass behind it */
.fstep .n::before{content:"";position:absolute;left:-13px;top:-6px;width:40px;height:30px;
  background:var(--stone);border-radius:4px;z-index:-1}
.fstep .b{padding:0 0 0 4px;max-width:70ch}
.fstep h3{font-size:clamp(21px,2.3vw,27px);margin-bottom:10px}
.fstep .lead{font-size:17px;line-height:1.5;color:var(--grey1);margin-bottom:0}
.fstep .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:18px;border-top:1px solid var(--rule)}
.fstep .cols h6{margin:0 0 10px;font-family:"Martian Mono";font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey3);font-weight:400}
.fstep .cols ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.fstep .cols li{display:flex;gap:10px;font-size:15.5px;line-height:1.38;color:var(--grey1)}
.fstep .cols li b{width:5px;height:5px;border-radius:50%;background:var(--sage);flex:none;margin-top:8px;font-size:0}
.fstep .cols li.e b{background:var(--ember)}
@media (max-width:760px){
  .fstep{grid-template-columns:1fr}
  .fstep .n{padding:20px 0 0;justify-content:flex-start;padding-left:26px;background:transparent}
  .fstep .b{padding:14px 26px 28px}
  .fstep .cols{grid-template-columns:1fr;gap:20px}
}

/* ============ REAL PLACEMENTS ============ */
.plc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;text-align:left}
.plc.two{grid-template-columns:repeat(2,1fr);max-width:840px;margin-left:auto;margin-right:auto}
.plc.one{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
.pcard{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh1);padding:24px 24px;
  display:flex;flex-direction:column;transition:box-shadow var(--t)}
.pcard:hover{box-shadow:var(--sh2)}
.pcard .who{font-family:"Martian Mono";font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ember);display:block;margin-bottom:18px}
.pcard h5{margin-bottom:16px;font-size:19px}
.pcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pcard li{display:flex;gap:11px;font-size:16px;line-height:1.4;color:var(--grey1)}
.pcard li b{width:5px;height:5px;border-radius:50%;background:var(--sage);flex:none;margin-top:8px;font-size:0}
.pcard .tail{margin-top:auto;padding-top:22px;font-family:"Martian Mono";font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grey3)}
.plc.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.plc.four{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){.plc,.plc.two{grid-template-columns:1fr}}
@media (max-width:640px){.plc.four{grid-template-columns:1fr}}

/* ============ THE PRICE ============ */
.price{background:var(--forest);border-radius:var(--r-card);padding:40px 40px;text-align:center;
  max-width:720px;margin:40px auto 0;position:relative;overflow:hidden}
.price .lab{color:var(--sage);display:block;margin-bottom:26px}
.price .big{font-family:Archivo;font-stretch:115%;font-weight:450;
  font-size:clamp(58px,9vw,108px);line-height:.9;letter-spacing:-.03em;color:var(--cream)}
.price .big em{font-style:normal;font-size:.32em;color:var(--haze);letter-spacing:-.01em}
.price .u{margin-top:18px;font-size:19px;color:var(--haze)}
.price .u b{color:var(--cream);font-weight:500}
.price .row{margin-top:26px;padding-top:22px;border-top:1px solid var(--moss);
  display:flex;justify-content:center;gap:0;flex-wrap:wrap}
.price .row div{padding:0 26px;border-left:1px solid var(--moss)}
.price .row div:first-child{border-left:0}
.price .row .k{display:block;font-family:"Martian Mono";font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sage);margin-bottom:9px}
.price .row .v{display:block;font-family:Archivo;font-stretch:115%;font-weight:450;font-size:26px;
  color:var(--cream);letter-spacing:-.015em}
.price .row .m{display:block;margin-top:7px;font-size:13.5px;color:var(--sage);letter-spacing:0}
@media (max-width:600px){
  .price{padding:38px 22px}
  .price .row div{padding:12px 16px;border-left:0}
}

/* included / not included
   A ledger, not two cards. One rule down the middle does the dividing, so the
   two lists read as one statement about the same money. Boxing the right hand
   column made it look like a second product, and the dashed border Even had
   removed from the homepage calculator was doing the same job badly here. */
.ledger{display:grid;grid-template-columns:1fr 1fr;margin:40px auto 0;max-width:940px;
  text-align:left;border-top:1px solid var(--rule)}
.ledger > div{padding:32px 40px 36px}
.ledger > div:first-child{padding-left:0;border-right:1px solid var(--rule)}
.ledger > div:last-child{padding-right:0}
/* the heading sits over its column and the list is centred as a block under
   it, so the pair balances beneath a centred section heading. The lines
   themselves stay left aligned, because a centred list stops scanning. */
.ledger h5{margin-bottom:20px;font-size:19px;text-align:center}
.ledger ul{width:fit-content;max-width:100%;margin-inline:auto}
.ledger .cap{font-size:15px;color:var(--grey2);margin-bottom:24px}
.ledger ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.ledger li{display:flex;gap:12px;font-size:16px;line-height:1.42;color:var(--grey1)}
.ledger li svg{width:11px;height:11px;color:var(--sage);flex:none;margin-top:5px}
.ledger .no li b{width:5px;height:5px;border-radius:50%;background:var(--ember);
  flex:none;margin-top:8px;font-size:0}
.ledger .foot{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--rule);
  font-size:15.5px;line-height:1.45;color:var(--ink)}
@media (max-width:860px){
  .ledger{grid-template-columns:1fr}
  .ledger > div{padding:28px 0 30px;border-bottom:1px solid var(--rule)}
  /* the divider is a first-child border, and a media query adds no
     specificity, so turning it off has to be said at the same weight or the
     stacked column keeps a stray rule down its right hand side */
  .ledger > div:first-child{padding-left:0;padding-right:0;border-right:0}
  .ledger > div:last-child{border-bottom:0;padding-bottom:0}
}

/* ============ RESOURCES ============ */
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;text-align:left}
.rcard{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh1);padding:0;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t);cursor:pointer;
  border:0;font-family:inherit;text-align:left;width:100%}
.rcard:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.rcard:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.rcard .top{height:152px;background:var(--stone);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line)}
.rcard .sheet{position:absolute;left:30px;right:30px;top:26px;bottom:0;background:var(--paper);
  border-radius:8px 8px 0 0;box-shadow:0 -1px 0 rgba(20,24,15,.07), 0 -10px 30px rgba(20,24,15,.09);
  padding:18px 20px 0;transition:transform var(--t)}
.rcard:hover .sheet{transform:translateY(-4px)}
/* Six identical grey skeletons made six real documents look like six
   placeholders. The preview now carries the document's own first lines, so
   the grid reads as a shelf of different things. */
.rcard .sheet .ti{display:block;font-weight:550;font-size:12.5px;color:var(--ink);
  margin-bottom:11px;letter-spacing:-.005em}
.rcard .sheet .ln{display:grid;grid-template-columns:30px 1fr;gap:9px;font-size:10.5px;
  line-height:1.5;color:var(--grey2);padding:4px 0;border-top:1px solid #F2EEDF}
.rcard .sheet .ln:first-of-type{border-top:0}
.rcard .sheet .ln em{font-style:normal;font-family:"Martian Mono";font-size:8px;
  letter-spacing:.1em;color:var(--sage);padding-top:1px}
.rcard .sheet::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(to bottom, rgba(255,254,250,0), var(--paper));pointer-events:none}
.rcard .bd{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.rcard .kind{font-family:"Martian Mono";font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ember);display:block;margin-bottom:12px}
.rcard h5{margin-bottom:9px}
.rcard p{font-size:15.5px;line-height:1.42;color:var(--grey1)}
.rcard .go{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:450;color:var(--forest);transition:gap var(--t)}
.rcard:hover .go{gap:14px}
.rcard .go svg{width:12px;height:12px;color:var(--ember)}
@media (max-width:1000px){.res{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.res{grid-template-columns:1fr}}

/* ============ PROSE, legal pages ============ */
.prose{max-width:68ch;margin:0 auto}
.prose h2{font-size:clamp(22px,2.6vw,28px);margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:28px 0 8px}
.prose p,.prose li{font-size:16.5px;line-height:1.6;color:var(--grey1)}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{margin:0 0 7px}
.prose strong{color:var(--ink);font-weight:600}
.prose .updated{font-family:"Martian Mono";font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey3);margin-bottom:38px;display:block}

/* ============ SMALL SHARED BITS ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-top:44px;text-align:left}
.split.narrow{gap:44px}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:34px}}
.statline{display:flex;flex-wrap:wrap;gap:0;margin-top:36px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.statline div{flex:1 1 170px;padding:22px 22px;border-left:1px solid var(--line);text-align:left}
/* --line is a hairline for paper. On a band it is three points off the
   background and disappears, which is how the statline lost its grid inside
   the tinted sections. Anything that can sit on a band uses --rule. */
.mist .statline,.mist .statline div,.mist .qa,.mist .qa details{border-color:var(--rule)}
.statline div:first-child{border-left:0}
.statline .v{display:block;font-family:Archivo;font-stretch:115%;font-weight:500;font-size:34px;
  letter-spacing:-.02em;line-height:1;color:var(--forest);margin-bottom:10px}
.statline .v.hot{color:var(--ember)}
.statline .k{display:block;font-size:15.5px;color:var(--grey1);line-height:1.35}
@media (max-width:600px){.statline div{flex:1 1 100%;border-left:0;border-top:1px solid var(--line)}
  .statline div:first-child{border-top:0}
  .mist .statline div{border-color:var(--rule)}}
.quietq{max-width:620px;margin:0 auto}

/* the opening flow block carries the stat line too, so it runs tighter */
.flow + .flow,.flow{margin-top:40px}
.phero + section .statline{margin:30px auto 0;max-width:880px}

/* ---- phone proportions ---- */
@media (max-width:760px){
  .flow{margin-top:30px}
  .flow::before{left:21px}
  .fstep{grid-template-columns:52px 1fr;padding:26px 0}
  .fstep .n::before{left:-11px;width:34px;height:26px}
  .fstep .cols{grid-template-columns:1fr 1fr;gap:16px}
  .fstep .cols li{font-size:14px}
  .statline{margin-top:26px}
  .statline div{flex:1 1 44%;padding:18px 16px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .mist .statline div{border-color:var(--rule)}
  .statline div:nth-child(-n+2){border-top:0}
  .statline div:nth-child(odd){border-left:0}
  .statline .v{font-size:29px}
  .statline .k{font-size:14.5px}
  .price{padding:32px 20px;margin-top:32px}
  .price .row div{padding:10px 14px}
  .split{gap:28px;margin-top:32px}
  .prose h2{margin:32px 0 10px}
}
@media (max-width:600px){
  .phero{padding:104px 0 52px}
  .phero .sub{font-size:18px}
}

@media (max-width:760px){
  .form .row2{grid-template-columns:1fr 1fr}
  .fld textarea{min-height:96px}
  .fld input,.fld textarea{font-size:16px;padding:11px 13px}
}

/* ============ INSIDE THE SYSTEM, the role page signature ============
   The homepage strip promises "inside the system", so each role page opens by
   showing one rather than describing it. Paper on forest is the strongest
   pairing in the brand, and a document laid on the dark ground reads as the
   artefact it is rather than as an illustration beside some copy. */
.sysdoc{max-width:720px;margin:40px auto 0;text-align:left;position:relative}
.sysdoc .frame{box-shadow:0 0 0 1px rgba(20,24,15,.05), 0 40px 80px -30px rgba(10,20,12,.55)}
.sysdoc .frame .well{min-height:0;padding:20px 26px 26px}
.sysdoc .cap{margin:26px auto 0;max-width:54ch;text-align:center;font-size:16.5px;
  line-height:1.5;color:var(--haze)}
.sysdoc .cap b{color:var(--cream);font-weight:500}
@media (max-width:600px){
  .sysdoc{margin-top:30px}
  .sysdoc .frame .well{padding:16px 17px 20px}
  .sysdoc .cap{font-size:15.5px;margin-top:22px}
}

/* ============ THE PULL QUOTE ============
   One line of the founder's own words, set large enough to stop the page.
   Editorial, so the type does all the work and nothing is boxed. */
.pull{max-width:22ch;margin:0 auto;font-family:Archivo;font-stretch:115%;font-weight:450;
  font-size:clamp(34px,5.6vw,64px);line-height:1.04;letter-spacing:-.028em;color:var(--ink)}
.pull .mk{display:block;color:var(--ember);font-size:.46em;line-height:1;margin-bottom:.06em}

/* ============ THE NARRATIVE COLUMN ============
   The about page is a story, so it is set as one column at reading width
   rather than as two columns of body text racing each other. */
.story{max-width:62ch;margin:0 auto;text-align:left}
.story .open{font-size:clamp(20px,2.4vw,25px);line-height:1.45;color:var(--ink);margin:0 0 26px}
.story h3{font-size:21px;color:var(--forest);margin:38px 0 12px}
.story h3:first-of-type{margin-top:0}
.story p{font-size:17px;line-height:1.62;color:var(--grey1);margin:0 0 14px}
.story p:last-child{margin-bottom:0}
@media (max-width:600px){
  .story .open{font-size:19px;margin-bottom:22px}
  .story h3{margin:28px 0 8px}
  .story p{font-size:16.5px}
}

/* Paper cards on the forest band. --sh1 is tuned for paper on paper and
   vanishes completely on dark green, which left the cards looking pasted on. */
.deep .pcard{box-shadow:0 0 0 1px rgba(20,24,15,.06), 0 30px 60px -28px rgba(10,20,12,.55)}
.deep .pcard:hover{box-shadow:0 0 0 1px rgba(20,24,15,.06), 0 38px 76px -28px rgba(10,20,12,.65)}

/* A ghost button on the forest band. The default border is tuned for paper. */
.deep .btn.ghost{border-color:var(--moss);color:var(--cream)}
.deep .btn.ghost:hover{border-color:var(--sage);background:rgba(241,240,204,.06)}
.deep .quietq{max-width:620px}

/* A filled button on the forest band. The default fill is forest on forest,
   which is to say invisible. */
.deep .btn.fill{background:var(--cream);color:var(--forest)}
.deep .btn.fill:hover{background:var(--paper)}

/* Two columns of prose should start level. Centring is for a column of text
   beside a picture, not for two columns of text racing each other. */
.split.top{align-items:start}

/* Below about 400px the step's two columns cannot both hold a line, and the
   body pushed past the viewport. The spine stays, the columns stack. */
.fstep .b{min-width:0}
@media (max-width:420px){
  .fstep .cols{grid-template-columns:1fr;gap:18px}
}

/* A timing label above each step. It replaces both the stat row that sat
   over the steps and the per step You line: the one fact worth keeping from
   either was when each step happens, and here it turns the spine into a
   timeline without adding a single block to the page. */
.fstep .when{display:block;font-family:"Martian Mono";font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ember);margin:4px 0 9px}
.fstep h3{margin-bottom:12px}

/* ============ THE SCOPE BLOCK, role pages ============
   What the role actually covers, dense enough to scan in one pass, then what
   the owner notices as the months go. Paragraphs here would read as selling;
   a list reads as an answer, which is what somebody on a role page wants. */
.jobs{margin:36px 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0 34px;text-align:left}
.jobs li{display:flex;gap:11px;font-size:16px;line-height:1.38;color:var(--grey1);
  padding:11px 0;border-top:1px solid var(--rule)}
.jobs li:nth-child(-n+3){border-top:0}
.jobs li svg{width:11px;height:11px;color:var(--sage);flex:none;margin-top:5px}

.beats{margin:46px 0 0;padding-top:36px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:left}
.beats .w{display:block;font-family:"Martian Mono";font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ember);margin-bottom:11px}
.beats p{margin:0;font-size:16.5px;line-height:1.46;color:var(--ink)}

@media (max-width:900px){
  .jobs{grid-template-columns:1fr 1fr}
  .jobs li:nth-child(3){border-top:1px solid var(--rule)}
  .beats{grid-template-columns:1fr;gap:26px;margin-top:36px;padding-top:28px}
}
@media (max-width:600px){
  .jobs{grid-template-columns:1fr;margin-top:28px}
  .jobs li:nth-child(2),.jobs li:nth-child(3){border-top:1px solid var(--rule)}
  .jobs li{padding:10px 0;font-size:15.5px}
}

/* --stone and --band are four points apart, so a hero sitting straight on a
   banded section reads as one continuous block rather than two surfaces.
   Prefer giving that first section paper. Where a page genuinely wants the
   band there, this at least draws the join. */
.phero + section.mist{border-top:1px solid var(--rule)}

/* ============ ROLE PAGE, the revamp (executive assistant first) ============
   What they take, grouped by the part of the business it frees, so an owner
   can scan straight to whichever part hurts. Then one ordinary day side by
   side, which is where they picture their own week, and the three numbers
   that make it concrete. The numbers are the homepage calculator's, so they
   match everywhere. */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin:40px auto 0;max-width:1000px;text-align:left}
.areas h5{font-family:"Martian Mono";font-size:10.5px;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ember);margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.areas ul{margin:0;padding:0;list-style:none}
.areas li{display:flex;gap:11px;font-size:16.5px;line-height:1.38;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--line)}
.areas li svg{width:11px;height:11px;color:var(--sage);flex:none;margin-top:5px}
.areas-foot{margin:28px 0 0;font-size:17px;color:var(--grey1)}

.day{margin:42px auto 0;max-width:980px;text-align:left}
.day .row{display:grid;grid-template-columns:76px 1fr 1fr;gap:28px;padding:17px 0;border-top:1px solid var(--moss);align-items:start}
.day .row.h{border-top:0;padding-bottom:12px}
.day .row.h span{font-family:"Martian Mono";font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.day .row.h .a{color:var(--sage)} .day .row.h .b{color:var(--ember)}
.day .t{font-family:"Martian Mono";font-size:12px;letter-spacing:.06em;color:var(--sage);padding-top:3px}
.day .a{font-size:16.5px;line-height:1.45;color:#9DB3A2}
.day .b{font-size:16.5px;line-height:1.45;color:var(--cream)}

.gets{display:grid;grid-template-columns:repeat(3,1fr);margin:44px auto 0;max-width:980px;
  border-top:1px solid var(--moss);border-bottom:1px solid var(--moss)}
.gets > div{padding:28px 26px;border-left:1px solid var(--moss);text-align:left}
.gets > div:first-child{border-left:0;padding-left:0}
.gets .v{display:block;font-family:Archivo;font-stretch:115%;font-weight:450;font-size:clamp(36px,4.2vw,54px);
  line-height:1;letter-spacing:-.025em;color:var(--cream)}
.gets .v.hot{color:var(--ember)}
.gets .k{display:block;margin-top:12px;font-size:15.5px;line-height:1.4;color:var(--haze)}
.deep .calc{margin:26px 0 0;font-size:15.5px}
.deep .calc a{color:var(--cream);text-decoration:underline;text-underline-offset:4px}

@media (max-width:900px){
  .areas{grid-template-columns:1fr;gap:30px;max-width:520px}
  .gets{grid-template-columns:1fr}
  .gets > div{border-left:0;border-top:1px solid var(--moss);padding:22px 0}
  .gets > div:first-child{border-top:0}
}
@media (max-width:700px){
  .day .row{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .day .row.h{display:none}
  .day .a::before,.day .b::before{display:block;font-family:"Martian Mono";font-size:9.5px;
    letter-spacing:.13em;text-transform:uppercase;margin-bottom:4px}
  .day .a::before{content:"Yourself";color:var(--sage)}
  .day .b::before{content:"With an assistant";color:var(--ember);margin-top:8px}
}

/* Trigger, process, result, the custom role's forest band. A custom role has
   no fixed job list, so instead of a day it shows the method itself on four
   kinds of business, and the owner fills in a fifth row with their own job.
   The rows are kinds of business, not named clients. */
.tpr{margin:42px auto 0;max-width:980px;text-align:left}
.tpr .row{display:grid;grid-template-columns:96px 1fr 1.35fr 1.1fr;gap:26px;padding:19px 0;border-top:1px solid var(--moss);align-items:start}
.tpr .row.h{border-top:0;padding-bottom:12px}
.tpr .row.h span{font-family:"Martian Mono";font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.tpr .row.h .tr{color:var(--sage)} .tpr .row.h .pr{color:var(--haze)} .tpr .row.h .rs{color:var(--ember)}
.tpr .k{font-family:"Martian Mono";font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);padding-top:4px}
.tpr .tr{font-size:16.5px;line-height:1.45;color:#9DB3A2}
.tpr .pr{font-size:16.5px;line-height:1.45;color:var(--haze)}
.tpr .rs{font-size:16.5px;line-height:1.45;color:var(--cream)}
@media (max-width:860px){
  .tpr .row{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .tpr .row.h{display:none}
  .tpr .tr::before,.tpr .pr::before,.tpr .rs::before{display:block;font-family:"Martian Mono";font-size:9.5px;
    letter-spacing:.13em;text-transform:uppercase;margin:8px 0 3px}
  .tpr .tr::before{content:"Trigger";color:var(--sage)}
  .tpr .pr::before{content:"Process";color:var(--haze)}
  .tpr .rs::before{content:"Result";color:var(--ember)}
}

/* The about page beliefs, unboxed on forest like every other forest band.
   They were the last boxed cards on the site, numbered one to three though
   they are not a sequence. */
.creed{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:44px auto 0;max-width:1000px;text-align:left}
.creed > div{border-top:1px solid var(--moss);padding-top:24px}
.creed h5{font-family:Archivo;font-stretch:115%;font-weight:450;font-size:22px;line-height:1.2;
  letter-spacing:-.01em;color:var(--cream);margin:0 0 12px}
.creed p{margin:0;font-size:16.5px;line-height:1.5;color:var(--haze)}
@media (max-width:900px){.creed{grid-template-columns:1fr;gap:28px;max-width:560px}}

/* ============ BLOG ============
   The index is a list, not a grid of cards: date and category, the title, one
   line, read it. A post is one reading column with the answer first ("In
   short"), a table of contents when there are three or more sections, the
   body, the questions, and who wrote it. Search engines and AI answer engines
   both lift the summary and the questions, so they sit where a reader sees
   them first too. */
.blog-index{max-width:820px}
.postlist{display:flex;flex-direction:column;margin-top:8px}
.pl{display:block;padding:28px 0 30px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.pl:first-child{border-top:0;padding-top:4px}
.pl-meta{display:block;font-family:"Martian Mono";font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);margin-bottom:10px}
.pl-meta span,.post-meta span{color:var(--grey3);margin:0 4px}
.pl h3{font-size:clamp(22px,2.4vw,28px);line-height:1.2;margin:0 0 10px;color:var(--forest);transition:color var(--t)}
.pl p{margin:0;font-size:16.5px;line-height:1.5;color:var(--grey1);max-width:62ch}
.pl .go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:15px;font-weight:450;color:var(--forest);transition:gap var(--t)}
.pl .go svg{width:12px;height:12px;color:var(--ember)}
.pl:hover h3{color:var(--moss)} .pl:hover .go{gap:14px}
.pl-empty{font-size:18px;color:var(--grey1);text-align:center;padding:20px 0}
.pl-empty a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}

.post-hero h1{max-width:20ch}
.post-meta{margin-top:20px;font-size:15px;color:#6B7464}
.post-meta a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.post-wrap{padding-top:56px}
.post{max-width:68ch;margin:0 auto}
.inshort{background:var(--stone);border-radius:var(--r-small);padding:22px 26px 20px;margin-bottom:34px}
.inshort .lab{display:block;margin-bottom:10px;color:var(--moss)}
.inshort ul{margin:0;padding-left:18px}
.inshort li{font-size:17px;line-height:1.5;color:var(--ink);margin:0 0 6px}
.toc{margin:0 0 38px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.toc .lab{display:block;margin-bottom:10px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 6px;font-size:16px;line-height:1.4}
.toc a{color:var(--forest)}
.post-body h2{scroll-margin-top:96px;max-width:none;font-size:clamp(24px,2.6vw,30px);line-height:1.18;margin:46px 0 12px}
.post-body h3{scroll-margin-top:96px}
.post-body p,.post-body li{font-size:17.5px;line-height:1.65}
.post-body a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.post-body blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:2px solid var(--ember)}
.post-body blockquote p{font-size:20px;line-height:1.45;color:var(--ink)}
.post-body code{font-family:"Martian Mono";font-size:.85em;background:var(--stone);padding:1px 6px;border-radius:4px}
.post-faq{margin-top:40px}
.post-faq h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 6px}
.post .qa{grid-template-columns:1fr;margin-top:18px}
.author{margin-top:46px;padding-top:24px;border-top:1px solid var(--line)}
.author p{font-size:15.5px;line-height:1.55;color:var(--grey1)}
.author a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.related{max-width:820px;margin:70px auto 0;padding-top:40px;border-top:1px solid var(--line)}
.related h2{font-size:clamp(24px,2.8vw,32px);margin:0 0 20px}
@media (max-width:600px){
  .post-wrap{padding-top:40px}
  .inshort{padding:18px 18px 16px}
  .post-body p,.post-body li{font-size:17px}
}