:root{
  --paper:#FBF7F1; --card:#FFFFFF; --ink:#191512; --mute:#6B6158;
  --rust:#BC4527; --rust-dk:#93331B; --deep:#17384F; --gold:#D8A13C;
  --on-rust:#FFFFFF;
  --line:#E2D8C9; --line-hard:#C9BCA8;
  --shell:1180px;
  --disp:"Bricolage Grotesque","Archivo",Helvetica,Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"DM Mono","SFMono-Regular",Consolas,monospace;
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14110E; --card:#1D1915; --ink:#F3EDE3; --mute:#A79B8C;
    --rust:#E4683F; --rust-dk:#C1512C; --deep:#9EC4DC; --gold:#E0B25C;
    --on-rust:#190D07;
    --line:#2E2822; --line-hard:#3E362D;
  }
}
:root[data-theme="dark"]{
  --paper:#14110E; --card:#1D1915; --ink:#F3EDE3; --mute:#A79B8C;
  --rust:#E4683F; --rust-dk:#C1512C; --deep:#9EC4DC; --gold:#E0B25C;
  --on-rust:#190D07;
  --line:#2E2822; --line-hard:#3E362D;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:var(--rust);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:1.05;
  letter-spacing:-.02em;margin:0 0 .6rem}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.9vw,2.9rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1.05rem}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--rust);color:var(--on-rust);
  padding:.6rem 1rem;z-index:99;border-radius:2px}
:focus-visible{outline:3px solid var(--rust);outline-offset:2px}

/* --- header ------------------------------------------------------------ */
.bar{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line)}
.bar .shell{display:flex;align-items:center;gap:1rem;
  padding-block:.7rem;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .nm{font-family:var(--disp);font-weight:800;font-size:1.12rem;
  line-height:1;letter-spacing:-.02em;display:block}
.brand .sb{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);display:block;margin-top:.22rem}
.navlinks{display:flex;align-items:center;gap:1.35rem}
.navlinks a{color:var(--ink);font-size:.93rem;font-weight:500}
.navlinks a[aria-current="page"]{color:var(--rust)}
.phonepill{font-family:var(--mono);font-weight:500;font-size:.92rem;
  background:var(--rust);color:var(--on-rust);padding:.5rem .95rem;border-radius:999px}
.phonepill:hover{background:var(--rust-dk);text-decoration:none;color:var(--on-rust)}
.burger{display:none;background:none;border:1px solid var(--line-hard);
  color:var(--ink);font-size:1.15rem;border-radius:4px;padding:.3rem .6rem;
  cursor:pointer}

/* --- buttons ----------------------------------------------------------- */
.btns{display:flex;flex-wrap:wrap;gap:.65rem;margin:1.4rem 0 0}
.btn{display:inline-block;font-weight:600;font-size:.98rem;
  padding:.82rem 1.35rem;border-radius:3px;border:1.5px solid transparent}
.btn:hover{text-decoration:none}
.btn-go{background:var(--rust);color:var(--on-rust)}
.btn-go:hover{background:var(--rust-dk);color:var(--on-rust)}
.btn-line{border-color:var(--line-hard);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.wide{width:100%;text-align:center}

/* --- hero -------------------------------------------------------------- */
.hero{padding-block:clamp(2.6rem,6vw,4.6rem) clamp(2rem,4vw,3.2rem)}
.hero .shell{display:grid;grid-template-columns:1.35fr .9fr;
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rust);margin:0 0 1rem}
.lede{font-size:clamp(1.06rem,1.9vw,1.24rem);color:var(--mute);
  max-width:56ch;margin-top:1.1rem}
.hero h1 em{font-style:normal;color:var(--rust)}

/* the job card. a ruled slip, not a shadowed box */
.slip{border:1.5px solid var(--ink);background:var(--card);border-radius:3px}
.slip .sh{background:var(--ink);color:var(--paper);font-family:var(--mono);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.6rem .95rem}
.slip dl{margin:0;padding:0}
.slip .row{display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem .95rem;border-bottom:1px solid var(--line)}
.slip .row:last-child{border-bottom:0}
.slip dt{font-size:.85rem;color:var(--mute);margin:0}
.slip dd{margin:0;font-family:var(--mono);font-size:.85rem;font-weight:500;
  text-align:right;color:var(--ink)}
.slip .big{font-family:var(--disp);font-size:1.5rem;font-weight:800;
  letter-spacing:-.02em}

/* --- section furniture -------------------------------------------------- */
section{padding-block:clamp(2.4rem,5vw,4rem)}
.rule{height:1px;background:var(--line)}
.rule-hard{height:2px;background:var(--ink)}
.sec-head{max-width:62ch;margin-bottom:2rem}
.sec-head p{color:var(--mute);margin-bottom:0}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin:0 0 .7rem}

/* --- the numbered list. the signature block of this site ---------------- */
.numlist{border-top:2px solid var(--ink)}
.numrow{display:grid;grid-template-columns:4.2rem 1fr auto;gap:1.2rem;
  align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--line);
  color:var(--ink)}
a.numrow:hover{text-decoration:none;background:linear-gradient(
  90deg,rgba(188,69,39,.07),transparent 60%)}
a.numrow:hover .nt{color:var(--rust)}
.numrow .nn{font-family:var(--mono);font-size:.95rem;color:var(--rust);
  font-weight:500}
.numrow .nt{font-family:var(--disp);font-weight:800;font-size:1.3rem;
  letter-spacing:-.01em;display:block;margin-bottom:.3rem}
.numrow .nd{color:var(--mute);font-size:.96rem;margin:0;max-width:60ch}
.numrow .ng{font-family:var(--mono);font-size:.78rem;color:var(--mute);
  white-space:nowrap}

/* --- two column body ---------------------------------------------------- */
.layout{display:grid;grid-template-columns:1fr 340px;
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.prose p{max-width:68ch}
.prose h2{margin-top:2.2rem}
aside .slip{margin-bottom:1.2rem}

/* --- bite and snack ----------------------------------------------------- */
.bite{font-size:clamp(1.15rem,2.2vw,1.42rem);font-family:var(--disp);
  font-weight:700;line-height:1.3;letter-spacing:-.015em;max-width:40ch;
  margin:0 0 1.4rem}
.bite b{color:var(--rust);font-weight:800}
.snack{list-style:none;padding:0;margin:0 0 2rem;border-top:1px solid var(--line)}
.snack li{padding:.7rem 0 .7rem 1.7rem;border-bottom:1px solid var(--line);
  position:relative;font-size:.97rem}
.snack li::before{content:"";position:absolute;left:0;top:1.28rem;
  width:.6rem;height:.6rem;background:var(--rust);border-radius:1px}

/* --- local grid --------------------------------------------------------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.grid2 .cell{background:var(--paper);padding:1.5rem}
.grid2 .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rust);margin:0 0 .6rem}
.grid2 .cell p:last-child{margin-bottom:0;color:var(--mute);font-size:.97rem}

/* --- steps -------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.step .sn{font-family:var(--mono);font-size:.8rem;color:var(--rust);
  border-top:2px solid var(--rust);padding-top:.6rem;display:block;
  margin-bottom:.7rem}
.step h3{margin-bottom:.35rem}
.step p{color:var(--mute);font-size:.95rem;margin:0}

/* --- quotes ------------------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.quote{border-top:2px solid var(--ink);padding-top:1.1rem}
.quote p{font-family:var(--disp);font-weight:700;font-size:1.06rem;
  line-height:1.4;letter-spacing:-.01em}
.quote .who{font-family:var(--mono);font-size:.78rem;color:var(--mute);
  text-transform:uppercase;letter-spacing:.12em;margin:0}

/* --- tables ------------------------------------------------------------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.96rem}
th,td{text-align:left;padding:.85rem .6rem;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);border-bottom:2px solid var(--ink)}
td.num{font-family:var(--mono);white-space:nowrap;text-align:right}

/* --- chips -------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem;padding:0;
  list-style:none}
.chips a{border:1px solid var(--line-hard);border-radius:999px;
  padding:.4rem .9rem;font-size:.9rem;color:var(--ink);display:inline-block}
.chips a:hover{border-color:var(--rust);color:var(--rust);text-decoration:none}

/* --- deep band ---------------------------------------------------------- */
.band{background:var(--deep);color:#F2F6F8}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .band{background:#10222E;color:#E8F0F4}
}
:root[data-theme="dark"] .band{background:#10222E;color:#E8F0F4}
.band h2,.band h3{color:inherit}
.band p{color:rgba(242,246,248,.82)}
.band .btn-line{border-color:rgba(242,246,248,.45);color:#F2F6F8}
.band .btn-line:hover{border-color:#F2F6F8}
.band .eyebrow{color:var(--gold)}

/* --- faq ---------------------------------------------------------------- */
.faq{border-top:2px solid var(--ink);margin-top:2.4rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1rem 0;font-family:var(--disp);
  font-weight:700;font-size:1.06rem;letter-spacing:-.01em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--rust);
  font-family:var(--mono);font-weight:500}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 1.1rem;color:var(--mute);max-width:66ch}

/* --- crumbs, forms ------------------------------------------------------ */
.crumb{font-family:var(--mono);font-size:.74rem;color:var(--mute);
  padding-top:1.4rem;margin:0}
.crumb a{color:var(--mute)}
label{display:block;font-size:.85rem;font-weight:600;margin:1rem 0 .35rem}
input,select,textarea{width:100%;font:inherit;font-size:.97rem;
  padding:.7rem .8rem;border:1.5px solid var(--line-hard);border-radius:3px;
  background:var(--card);color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--rust);outline:none}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form button{margin-top:1.4rem}

/* --- footer ------------------------------------------------------------- */
footer{border-top:2px solid var(--ink);padding-block:3rem 6rem;
  margin-top:2rem}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
footer h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin:0 0 .8rem;font-weight:500}
footer .fgrid a{display:block;color:var(--ink);font-size:.93rem;
  padding:.2rem 0}
footer p{color:var(--mute);font-size:.94rem}
.fbot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1.4rem;
  font-size:.86rem;color:var(--mute)}
.fbot a{color:var(--mute)}

/* --- sticky call bar ---------------------------------------------------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50}
.callbar a{flex:1;text-align:center;padding:.95rem;font-weight:700;
  font-size:1rem}
.callbar .a1{background:var(--rust);color:var(--on-rust)}
.callbar .a2{background:var(--ink);color:var(--paper)}

/* --- responsive --------------------------------------------------------- */
@media (max-width:980px){
  .hero .shell{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .burger{display:block}
  .navlinks{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:.5rem 20px 1rem}
  .navlinks.open{display:flex}
  .navlinks a{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .phonepill{display:none}
  .bar .shell{position:relative}
  .grid2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .numrow{grid-template-columns:2.6rem 1fr;gap:.9rem}
  .numrow .ng{grid-column:2;white-space:normal}
  .fgrid{grid-template-columns:1fr}
  .callbar{display:flex}
}