/* Strykia — The Tape and the Estimate. See DESIGN.md. */
:root{
  --blade:#F2C500;
  --ink:#141414;
  --stud:#C8231A;
  --case:#1B1D1F;
  --case-2:#26292C;
  --case-line:#3A3E42;
  --on-case:#ECEDE8;
  --on-case-2:#AEB2AB;
  --paper:#EEF0EA;
  --field:#FBFBF7;
  --rule:rgba(46,86,166,.32);
  --rule-strong:#2E56A6;
  --pad-edge:#CDD2C6;

  --display:"Figtree",system-ui,sans-serif;
  --text:"Figtree",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --in:48px; /* one inch on the blade */
  --bar-h:4.25rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,svg,iframe{display:block;max-width:100%;border:0}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.01em;word-spacing:.06em;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-case :focus-visible{outline-color:var(--blade)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:var(--blade);padding:.75rem 1rem;font-weight:700}
.skip:focus{top:1rem}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.sec{padding-block:clamp(3.5rem,2.4rem + 4vw,6.5rem)}
.sec--case{background:var(--case);color:var(--on-case)}
.sec--blade{background:var(--blade)}
.sec--paper{background:var(--paper)}
.sec--flush{padding-top:0}
.sec-top + .sheet{margin-top:clamp(2rem,1.5rem + 2vw,3.25rem)}
.sec-h{font-size:clamp(2.3rem,1.5rem + 3.2vw,4.2rem);max-width:18ch}
.sec-lede{margin-top:1.2rem;max-width:60ch;font-size:1.12rem}
.sec--case .sec-lede{color:var(--on-case-2)}
.sec-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:end}
.sec-top .sec-lede{margin-top:0}
@media (max-width:820px){.sec-top{grid-template-columns:minmax(0,1fr)}.sec-top .sec-lede{margin-top:0}}

/* ------------------------------------------------ buttons & links */
.btn{display:inline-flex;align-items:center;gap:.7rem;min-height:3.25rem;padding:.55rem 1.35rem;border:2px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--blade);font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{background:var(--stud);border-color:var(--stud);color:#fff}
.btn svg{width:1.1rem;height:1.1rem;flex:none}
.btn--blade{background:var(--blade);border-color:var(--blade);color:var(--ink)}
.btn--blade:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn[disabled]{opacity:.6;cursor:progress}
.more{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:700}
.more svg{width:1rem;height:1rem;flex:none}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:clamp(1.75rem,1.2rem + 1.4vw,2.6rem)}

/* ------------------------------------------------ header: the case */
.bar{position:sticky;top:0;z-index:40;background:var(--ink);color:var(--on-case)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--bar-h)}
.mark{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--blade);font-family:"Sofia Sans Extra Condensed","Arial Narrow",sans-serif;font-weight:900;font-size:1.9rem;letter-spacing:.06em;line-height:1;text-transform:uppercase}
.mark svg{width:1.2em;height:1.2em;flex:none}
/* the A tape strip under the name: hook on the left, one red stud marker, graduations hanging from the top edge */
.mark__name{display:flex;flex-direction:column;gap:.2em;line-height:.7}
.mark__tape{display:block;position:relative;height:.3em;margin-right:.06em;background-color:var(--blade);background-image:linear-gradient(90deg,var(--ink) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px);background-size:.8em 66%,.4em 44%,.2em 28%;background-repeat:repeat-x;background-position:0 0}
.mark__tape::before{content:"";position:absolute;left:-.2em;top:-.1em;bottom:0;width:.2em;background:#5A5F63;border-radius:1px}
.mark__tape::after{content:"";position:absolute;left:62%;bottom:0;width:.2em;height:55%;background:var(--stud)}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0}
.nav ul a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700;font-size:.98rem;color:var(--on-case);border-bottom:3px solid transparent;padding-top:3px}
.nav ul a:hover{color:var(--blade)}
.nav ul a[aria-current="page"]{color:var(--blade);border-bottom-color:var(--blade)}
.bar .btn{min-height:2.85rem;font-size:1.15rem;padding-inline:1rem}
.mnav{display:none}
.bar .btn{white-space:nowrap}
@media (max-width:420px){.mark{font-size:1.6rem;gap:.6rem}.bar .btn{font-size:1.05rem;padding-inline:.7rem}.mnav summary{padding:0 .6rem}}
@media (max-width:900px){
  .nav ul{display:none}
  .mnav{display:block}
  .nav{gap:.75rem}
}
.mnav summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;min-height:2.85rem;padding:0 .8rem;border:2px solid var(--on-case-2);border-radius:2px;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;color:var(--on-case)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary svg{width:1rem;height:1rem}
.mnav[open] summary{border-color:var(--blade);color:var(--blade)}
/* small phones: the lockup is wider than the old mark, so scale it and tighten the bar so Menu never leaves the screen (320px reflow) */
@media (max-width:380px){.mark{font-size:1.25rem;gap:.5rem}.bar .wrap{gap:.5rem}.nav{gap:.4rem}.bar .btn{font-size:1rem;padding-inline:.55rem}.mnav summary{padding:0 .45rem;gap:.3rem}}
.mnav__panel{position:absolute;left:0;right:0;top:100%;background:var(--ink);border-top:1px solid var(--case-line);padding:.5rem 1.25rem 1.25rem}
.mnav__panel ul{list-style:none;margin:0;padding:0;display:grid}
.mnav__panel a{display:flex;align-items:center;min-height:3.25rem;border-bottom:1px solid var(--case-line);text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--on-case)}
.mnav__panel a[aria-current="page"]{color:var(--blade)}

/* ------------------------------------------------ the blade (shared) */
.ticks{height:34px;background-image:
  linear-gradient(90deg,var(--ink) 2px,transparent 2px),
  linear-gradient(90deg,var(--ink) 1.5px,transparent 1.5px),
  linear-gradient(90deg,var(--ink) 1px,transparent 1px),
  linear-gradient(90deg,var(--ink) 1px,transparent 1px);
  background-size:var(--in) 34px,calc(var(--in)/2) 22px,calc(var(--in)/4) 14px,calc(var(--in)/8) 8px;
  background-repeat:repeat-x}
.ticks--up{transform:scaleY(-1)}
.ticks--sm{height:22px;background-size:var(--in) 22px,calc(var(--in)/2) 15px,calc(var(--in)/4) 10px,calc(var(--in)/8) 6px}
.nums{display:flex;height:26px;overflow:hidden;font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:26px;white-space:nowrap}
.nums span{flex:0 0 var(--in);text-align:right;padding-right:5px}
.nums .ft{color:var(--stud)}
.nums span.stud{background:var(--stud);color:#fff;padding-right:4px;box-shadow:inset 3px 0 0 var(--blade)}
.edge{overflow:hidden}

/* ------------------------------------------------ home hero */
.hero{background:var(--blade);overflow:hidden;position:relative}
.hero__body{position:relative;padding-block:clamp(2.5rem,1.4rem + 4.5vw,5.25rem) clamp(2.25rem,1.4rem + 3.5vw,4.25rem)}
.hook{position:absolute;left:0;top:0;bottom:0;width:clamp(10px,1.4vw,18px);background:linear-gradient(90deg,#8C9194,#C9CDCF 45%,#7E8386);box-shadow:2px 0 0 rgba(0,0,0,.18)}
.hero h1{font-size:clamp(2.7rem,1.35rem + 5.6vw,6rem);max-width:15ch;font-weight:900;letter-spacing:-.012em}
.hero__lede{margin-top:clamp(1.25rem,.9rem + 1vw,1.9rem);max-width:54ch;font-size:clamp(1.08rem,1rem + .3vw,1.25rem)}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:clamp(1.75rem,1.2rem + 1.4vw,2.6rem)}
.hero__act a.plain{font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.hero__who{margin-top:clamp(2rem,1.4rem + 1.8vw,3rem);font-weight:700;font-size:.98rem}
.hero__who span{white-space:nowrap}
.print{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;padding:.55rem 0 .6rem;font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase}
.print b{background:var(--stud);color:#fff;font-weight:900;padding:0 .35rem}
.reads{display:none}
@media (min-width:1180px){
  .reads{display:block;list-style:none;margin:0;padding:0}
  .read{position:absolute;top:60px;left:calc(var(--x) - 1px);padding-top:var(--drop);border-left:2px solid var(--stud)}
  .read b{display:block;background:var(--stud);color:#fff;font-family:var(--display);font-weight:900;font-size:2.3rem;line-height:1;padding:.25rem .6rem .2rem .55rem;white-space:nowrap}
  .read b small{font-size:1.2rem;font-weight:800}
  .read span{display:block;padding:.45rem 0 0 .6rem;font-weight:700;font-size:.95rem;line-height:1.3;max-width:16ch}
  .read:nth-child(1){--x:calc(48px * 16);--drop:clamp(6.5rem,11vh,8.5rem)}
  .read:nth-child(2){--x:calc(48px * 21);--drop:clamp(12rem,22vh,15.5rem)}
  .read:nth-child(3){--x:calc(48px * 26);--drop:clamp(17.5rem,33vh,22.5rem)}
}
@media (min-width:1180px) and (max-width:1379px){
  .read:nth-child(1){--x:calc(48px * 12)}
  .read:nth-child(2){--x:calc(48px * 16)}
  .read:nth-child(3){--x:calc(48px * 20)}
  .hero h1{font-size:clamp(4rem,6.4vw,5rem);max-width:530px}
}

/* ------------------------------------------------ inner page hero (a short length of blade) */
.phero{background:var(--blade);position:relative;overflow:hidden}
.phero__body{position:relative;padding-block:clamp(2.25rem,1.5rem + 3vw,4rem) clamp(2.25rem,1.5rem + 3vw,4rem)}
.phero h1{font-size:clamp(2.6rem,1.5rem + 4.4vw,5.2rem);font-weight:900;max-width:16ch}
.phero h1 ~ p{margin-top:1.1rem;max-width:58ch;font-size:clamp(1.05rem,1rem + .25vw,1.2rem)}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:end}
@media (max-width:900px){.phero__grid{grid-template-columns:minmax(0,1fr)}}
.phero__meta{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.phero__meta li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;border-top:2px solid var(--ink);padding-top:.45rem;font-weight:700}
.phero__meta b{font-family:var(--display);font-weight:900;font-size:1.7rem;line-height:1;white-space:nowrap}
.phero--case{background:var(--case);color:var(--on-case)}
.phero--case .phero__meta li{border-top-color:var(--on-case-2)}

/* ------------------------------------------------ estimate sheets */
.sheet{background:var(--field);border:1px solid var(--pad-edge);box-shadow:0 18px 40px -26px rgba(20,20,20,.45);position:relative;color:var(--ink)}
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:2.75rem;width:2px;background:rgba(200,35,26,.55);pointer-events:none}
.sheet__head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline;padding:1rem 1.25rem .8rem 3.25rem;border-bottom:2px solid var(--rule-strong)}
.sheet__head strong,.sheet__title{font-family:var(--display);font-weight:900;font-size:1.45rem;letter-spacing:.06em;text-transform:uppercase}
.sheet__head span{font-size:.88rem;color:#3F4448}
.sheet__foot{padding:1rem 1.25rem 1.1rem 3.25rem;border-top:2px solid var(--rule-strong);font-weight:700}
.sheet__foot p + p{margin-top:.4rem;font-weight:400}
.lines{list-style:none;margin:0;padding:0}
.lines li{display:grid;grid-template-columns:1.9rem minmax(0,1fr);gap:1.1rem;padding:.8rem 1.25rem .8rem .25rem;border-bottom:1px solid var(--rule);line-height:1.45}
.lines li:last-child{border-bottom:0}
.lines .n{font-family:var(--display);font-weight:800;font-size:1.15rem;text-align:right;color:var(--rule-strong)}

.est{width:100%;border-collapse:collapse}
.est-scroll{overflow-x:auto}
.est th,.est td{text-align:left;vertical-align:top;padding:1.1rem 1.25rem;border-bottom:1px solid var(--rule)}
.est thead th{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rule-strong);padding-block:.7rem;border-bottom:2px solid var(--rule-strong)}
.est td:first-child,.est th:first-child{padding-left:3.25rem}
.est tbody tr:last-child td{border-bottom:0}
.est .item{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1;display:block}
.est .sub{display:block;margin-top:.35rem;font-size:.92rem;font-weight:700;color:#3F4448}
.inc{margin:0;padding:0;list-style:none;font-size:.98rem;line-height:1.5}
.inc li{padding-left:1rem;position:relative}
.inc li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:2px;background:currentColor}
.est .time{white-space:nowrap;font-weight:700}
.est .amt{font-family:var(--display);font-weight:900;font-size:clamp(2rem,1.5rem + 1.6vw,2.9rem);line-height:1;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.est .amt small{display:block;font-size:.5em;font-weight:800;letter-spacing:.02em;margin-top:.2rem}
.est th.amt{font-size:1rem;text-align:right}
.extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--rule-strong)}
.extras div{padding:1rem 1.25rem 1.1rem 3.25rem;border-right:1px solid var(--rule)}
.extras div:last-child{border-right:0}
.extras b{display:block;font-family:var(--display);font-weight:900;font-size:1.9rem;line-height:1}
@media (max-width:760px){
  .extras{grid-template-columns:minmax(0,1fr)}
  .extras div{border-right:0;border-bottom:1px solid var(--rule)}
  .est thead{display:none}
  .est,.est tbody,.est tr,.est td{display:block;width:100%}
  .est tr{padding:1rem 1.25rem 1.1rem 3.25rem;border-bottom:1px solid var(--rule)}
  .est td{padding:0;border:0}
  .est td:first-child{padding-left:0}
  .est td + td{margin-top:.6rem}
  .est .amt{text-align:left}
  .est .time::before{content:"Time: ";font-weight:400}
  .est .amt small{display:inline}
  .est [data-label]::before{content:attr(data-label) ": ";font-weight:400;font-family:var(--text);font-size:1rem;letter-spacing:0}
}

/* ------------------------------------------------ home: two work orders */
.orders{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.25rem,1rem + 1.5vw,2.5rem);margin-top:clamp(2rem,1.5rem + 2vw,3.25rem);align-items:start}
@media (max-width:860px){.orders{grid-template-columns:minmax(0,1fr)}}
.order .sheet__head strong,.sheet__title{font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem);letter-spacing:.02em}
.order__body{padding:1.1rem 1.25rem 1.25rem 3.25rem}
.order__body > p{max-width:46ch}
.order .lines{margin-top:.9rem;border-top:1px solid var(--rule)}
.order .lines li{grid-template-columns:minmax(0,1fr) auto;padding:.7rem 0;gap:1rem;align-items:baseline}
.order .lines b{font-family:var(--display);font-weight:900;font-size:1.5rem;line-height:1;white-space:nowrap}
.order .more{margin-top:.9rem}

/* ------------------------------------------------ work pieces */
.group{margin-top:clamp(3rem,2.2rem + 3vw,5rem)}
.group:first-of-type{margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
.pieces{padding-top:clamp(.5rem,.2rem + 1vw,1rem)}
.group h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);color:var(--blade);padding-bottom:.75rem;border-bottom:2px solid var(--case-line);display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.group h2 small{font-family:var(--text);font-weight:400;font-size:.95rem;color:var(--on-case-2);letter-spacing:0}
.piece{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);align-items:start;padding-top:clamp(2rem,1.5rem + 1.5vw,3rem)}
.piece + .piece{margin-top:clamp(1rem,.5rem + 1.5vw,2rem);border-top:1px solid var(--case-line)}
.piece:nth-child(odd of .piece) .shot{order:2}
@media (max-width:820px){.piece{grid-template-columns:minmax(0,1fr)}.piece:nth-child(odd of .piece) .shot{order:0}}
.dim{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem;font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.08em;color:var(--on-case-2);position:relative}
.dim::before,.dim::after{content:"";flex:1;height:1px;background:var(--on-case-2)}
.dim span{white-space:nowrap}
.dim i{position:absolute;top:0;width:1px;height:.9rem;background:var(--on-case-2)}
.dim i:first-child{left:0}.dim i:last-child{right:0}
.frame{position:relative;display:block;aspect-ratio:1440/900;overflow:hidden;background:var(--case-2);border:1px solid var(--case-line);text-decoration:none}
.frame iframe{width:1440px;max-width:none;height:900px;transform-origin:0 0;transform:scale(var(--s,.4));pointer-events:none;background:var(--case-2)}
.no-js .frame iframe{width:100%;height:100%;transform:none}
.frame__go{position:absolute;right:.75rem;bottom:.75rem;background:var(--blade);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase;padding:.4rem .75rem;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.frame:hover .frame__go,.frame:focus-visible .frame__go{opacity:1;transform:none}
@media (hover:none){.frame__go{opacity:1;transform:none}}
.piece h2,.piece h3{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,1.5rem + 1.2vw,2.6rem);line-height:1;margin:0}
.where{margin-top:.35rem;font-weight:700;color:var(--on-case-2)}
.tag{display:inline-block;margin-top:.9rem;padding:.15rem .55rem;border:1px solid var(--on-case-2);font-size:.85rem;font-weight:700;color:var(--on-case)}
.tag--real{border-color:var(--blade);color:var(--blade)}
.piece dl{margin:1.2rem 0 0;display:grid;gap:.9rem}
.piece dt{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blade)}
.piece dd{margin:.1rem 0 0;max-width:46ch}
.piece .more{margin-top:1rem;color:var(--on-case)}
/* two-up pieces for the longer Work page (16 demos): preview on top, notes below */
.group__lede{margin-top:.9rem;max-width:62ch;color:var(--on-case-2)}
.pieces--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,1rem + 2.5vw,3.5rem)}
.pieces--two .piece{grid-template-columns:minmax(0,1fr);gap:1.25rem;align-content:start;border-top:1px solid var(--case-line);margin-top:clamp(1rem,.5rem + 1.5vw,2rem)}
.pieces--two .piece:nth-child(odd of .piece) .shot{order:0}
.pieces--two .piece:nth-child(-n+2){border-top:0;margin-top:0}
.pieces--two .piece h3{font-size:clamp(1.7rem,1.4rem + .9vw,2.2rem)}
@media (max-width:900px){.pieces--two{grid-template-columns:minmax(0,1fr)}.pieces--two .piece:nth-child(2){border-top:1px solid var(--case-line);margin-top:clamp(1rem,.5rem + 1.5vw,2rem)}}

/* featured strip on home */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,1rem + 1.5vw,2.25rem);margin-top:clamp(2rem,1.5rem + 2vw,3rem);list-style:none;padding:0}
@media (max-width:900px){.feat{grid-template-columns:minmax(0,1fr)}}
.feat h3{font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;margin-top:.9rem}
.feat .where{font-size:.95rem}
.feat .tag{margin-top:.6rem}
.feat-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:clamp(2rem,1.5rem + 1.5vw,3rem);padding-top:1.25rem;border-top:1px solid var(--case-line)}
.feat-foot p{color:var(--on-case-2);max-width:60ch;font-size:.95rem}

/* ------------------------------------------------ method */
.pad{margin-top:clamp(2.5rem,2rem + 2vw,4rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:start}
@media (max-width:900px){.pad{grid-template-columns:minmax(0,1fr)}}
.turns h3{font-size:clamp(1.6rem,1.25rem + 1vw,2.1rem)}
.turns ul{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:1.3rem}
.turns li{padding-top:1.1rem;border-top:2px solid currentColor}
.turns li strong{display:block;font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.05;margin-bottom:.35rem}
.turns li p{max-width:50ch}
.sec--case .turns li p{color:var(--on-case-2)}

/* ------------------------------------------------ process: tape on the job */
.run{margin-top:clamp(2.5rem,2rem + 2vw,4rem);position:relative}
.run__blade{background:var(--blade);overflow:hidden}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}
.steps li{position:relative;padding:1.4rem 1rem 0 0}
.steps li::before{content:"";position:absolute;left:0;top:0;width:2px;height:1rem;background:var(--stud)}
.when{display:inline-block;background:var(--stud);color:#fff;font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;padding:.05rem .45rem;margin-bottom:.6rem}
.steps strong{display:block;font-family:var(--display);font-weight:800;font-size:1.55rem;line-height:1.02;margin-bottom:.4rem}
.steps p{color:var(--on-case-2);font-size:.98rem;max-width:30ch}
@media (max-width:1000px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2rem}}
@media (max-width:620px){
  .run__blade{display:none}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:0;position:relative;padding-left:2.5rem}
  .steps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:20px;background-color:var(--blade);
    background-image:linear-gradient(180deg,var(--ink) 2px,transparent 2px),linear-gradient(180deg,var(--ink) 1.5px,transparent 1.5px),linear-gradient(180deg,var(--ink) 1px,transparent 1px);
    background-size:12px var(--in),8px calc(var(--in)/2),5px calc(var(--in)/4);background-repeat:repeat-y}
  .steps li{padding:0 0 1.75rem}
  .steps li::before{left:-1.25rem;top:.75rem;width:1rem;height:2px}
}
.terms{margin-top:clamp(3rem,2.5rem + 2vw,4.5rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;list-style:none;padding:0}
.terms li{border-top:2px solid var(--on-case);padding-top:.9rem}
.terms strong{display:block;font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1.05;margin-bottom:.35rem;color:var(--blade)}
.terms p{color:var(--on-case-2);font-size:.98rem}
@media (max-width:900px){.terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.terms{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------ agents */
.catalog .lines li{grid-template-columns:1.9rem minmax(0,1fr) auto;align-items:start}
.catalog h3{font-family:var(--display);font-weight:900;font-size:clamp(1.45rem,1.2rem + .8vw,1.85rem);line-height:1}
.catalog .lines p{margin-top:.3rem;max-width:62ch}
.fit{align-self:start;white-space:nowrap;font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--ink);padding:.1rem .5rem}
.fit--budget{background:var(--field)}
.fit--work{background:var(--blade)}
@media (max-width:640px){
  .catalog .lines li{grid-template-columns:1.9rem minmax(0,1fr)}
  .catalog .fit{grid-column:2;justify-self:start}
}
.tiers .amt{white-space:nowrap}
.models{display:block;margin-top:.35rem;font-weight:700;font-size:.98rem}
.notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;margin-top:clamp(1.5rem,1rem + 1.5vw,2.25rem);padding:1rem 1.25rem;background:var(--ink);color:var(--on-case);max-width:78ch}
.notice svg{width:1.6rem;height:1.6rem;color:var(--blade);margin-top:.1rem}
.notice strong{color:var(--blade)}
.sec--case .notice{background:var(--case-2);border:1px solid var(--case-line)}

.includes{list-style:none;margin:clamp(2rem,1.5rem + 2vw,3rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,1rem + 3vw,4rem)}
.includes li{position:relative;padding:1.1rem 0 1.1rem 1.9rem;border-top:1px solid var(--case-line)}
.includes li::before{content:"";position:absolute;left:0;top:1.45rem;width:.85rem;height:.85rem;background:var(--blade)}
.includes strong{display:block;font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.05;margin-bottom:.25rem;color:var(--on-case)}
.includes p{color:var(--on-case-2)}
@media (max-width:760px){.includes{grid-template-columns:minmax(0,1fr)}}

/* the estimator */
.calc{margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
.calc__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
@media (max-width:900px){.calc__grid{grid-template-columns:minmax(0,1fr)}}
.calc__in{padding:1.25rem 1.5rem 1.5rem 3.25rem;border-right:1px solid var(--rule)}
@media (max-width:900px){.calc__in{border-right:0;border-bottom:2px solid var(--rule-strong)}}
.calc fieldset{border:0;margin:0 0 1.4rem;padding:0;min-width:0}
.calc legend small{font-family:var(--text);font-weight:400;font-size:.85rem;letter-spacing:0;text-transform:none;color:#3F4448;margin-left:.4rem}
.calc legend{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rule-strong);margin-bottom:.6rem;padding:0}
.opts{display:grid;gap:.4rem}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:center;min-height:2.9rem;padding:.35rem .75rem;border:2px solid var(--pad-edge);background:#fff;cursor:pointer;font-weight:700;margin:0}
.opt:hover{border-color:var(--ink)}
.opt input{width:1.15rem;height:1.15rem;min-height:0;margin:0;accent-color:var(--ink)}
.opt small{font-weight:400;font-size:.88rem;color:#3F4448;white-space:nowrap}
.opt:has(input:checked){border-color:var(--ink);background:var(--blade)}
.opt:has(input:checked) small{color:var(--ink)}
.opt:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
.opts--row{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts--row .opt{grid-template-columns:auto minmax(0,1fr);align-items:start;padding-block:.6rem}
.opts--row .opt input{margin-top:.2rem}
#c-convs-box fieldset{margin-top:1.1rem}
.opts--row .opt small{grid-column:2;white-space:normal}
@media (max-width:480px){.opts--row{grid-template-columns:minmax(0,1fr)}}
.num{display:flex;align-items:center;gap:.75rem}
.num input[type=range]{flex:1;accent-color:var(--ink);min-height:2.75rem;padding:0;border:0;background:none}
.num input[type=number]{width:7.5rem;flex:none}
.calc .hint{margin-top:.4rem;font-size:.9rem;color:#3F4448}
.calc__out{padding:1.25rem 1.5rem 1.5rem;background:var(--blade);display:flex;flex-direction:column}
@media (max-width:900px){.calc__out{padding-left:3.25rem}}
.calc__out h3{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase}
.tally{margin:.6rem 0 0;display:grid}
.tally div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(20,20,20,.25)}
.tally dt{font-size:.98rem}
.tally dd{margin:0;font-family:var(--display);font-weight:900;font-size:1.55rem;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.tally .total{border-bottom:0;border-top:2px solid var(--ink);margin-top:.35rem;padding-top:.8rem}
.tally .total dt{font-weight:700}
.tally .total dd{font-size:clamp(2.4rem,1.8rem + 2vw,3.2rem);background:var(--stud);color:#fff;padding:.2rem .5rem .1rem}
.calc__setup{margin-top:1rem;font-weight:700}
.calc__out .btn{margin-top:auto;align-self:flex-start}
.calc__out .acts{margin-top:1.25rem}
.calc__static{padding:1.25rem 1.5rem 1.5rem 3.25rem;border-top:2px solid var(--rule-strong)}
.js .calc__static{display:none}
.no-js .calc__grid{display:none}
.calc__static table{width:100%;border-collapse:collapse;margin-top:.75rem}
.calc__static th,.calc__static td{text-align:left;padding:.5rem .5rem .5rem 0;border-bottom:1px solid var(--rule)}
.calc__static td:last-child,.calc__static th:last-child{text-align:right}

/* ------------------------------------------------ FAQ */
.faq__grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(1.5rem,1rem + 4vw,5rem);align-items:start}
@media (max-width:860px){.faq__grid{grid-template-columns:minmax(0,1fr)}}
.faq__grid + .faq__grid{margin-top:clamp(3rem,2.5rem + 2vw,4.5rem)}
.faq__grid h2{font-size:clamp(2rem,1.5rem + 2vw,3rem);position:sticky;top:calc(var(--bar-h) + 1.5rem)}
@media (max-width:860px){.faq__grid h2{position:static}}
.qa{border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid #BFC4B9}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;padding:.9rem 0;font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,1.15rem + .6vw,1.7rem);line-height:1.1}
.qa summary::-webkit-details-marker{display:none}
.qa summary svg{flex:none;width:1.25rem;height:1.25rem;transition:transform .3s var(--ease)}
.qa details[open] summary svg{transform:rotate(45deg)}
.qa summary:hover{color:var(--stud)}
.qa .a{padding:0 0 1.3rem;max-width:62ch}
.qa .a p + p{margin-top:.7rem}
.qa .a a{font-weight:700}

/* ------------------------------------------------ CTA band (end of every page) */
.cta{background:var(--blade);padding-top:clamp(3.5rem,2.5rem + 4vw,6rem)}
.cta__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem;align-items:end}
@media (max-width:860px){.cta__grid{grid-template-columns:minmax(0,1fr)}}
.cta h2{font-size:clamp(2.5rem,1.6rem + 3.8vw,4.8rem);max-width:13ch}
.cta p{max-width:44ch;font-size:1.1rem}
.cta ul{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem;font-weight:700}
.cta li{display:flex;gap:.6rem;align-items:baseline}
.cta li::before,.bullets li::before{content:"";flex:none;width:.7rem;height:.7rem;background:var(--stud);transform:translateY(-.05rem)}
.cta__edge{margin-top:clamp(3rem,2rem + 3vw,5rem);overflow:hidden}

/* ------------------------------------------------ contact */
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
@media (max-width:900px){.contact__grid{grid-template-columns:minmax(0,1fr)}}
.bullets{margin:1.4rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem;font-weight:700}
.bullets li{display:flex;gap:.6rem;align-items:baseline}
.mail{font-weight:700;overflow-wrap:anywhere}
form{display:grid;gap:1.15rem}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
@media (max-width:560px){.row2{grid-template-columns:minmax(0,1fr)}}
label{display:block;font-weight:700;margin-bottom:.35rem}
label small{font-weight:400}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--field);border:2px solid var(--ink);border-radius:2px;padding:.75rem .85rem;min-height:3.1rem}
textarea{min-height:8rem;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23141414' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;background-size:1rem;padding-right:2.5rem}
::placeholder{color:#5E625B;opacity:1}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--stud);box-shadow:inset 0 0 0 1px var(--stud)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.form__foot p{font-size:.92rem;max-width:36ch}
.hp{display:none}

/* ------------------------------------------------ prose (legal, thanks) */
.doc{max-width:66ch}
.doc h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);margin-top:2.5rem}
.doc p,.doc ul{margin:1rem 0 0}
.doc li{margin-top:.35rem}
.doc .meta{font-weight:700}

/* ------------------------------------------------ footer */
footer{background:var(--ink);color:var(--on-case);padding-block:clamp(2.75rem,2rem + 2vw,4rem)}
.foot{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr);gap:2rem}
@media (max-width:760px){.foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot > div:first-child{grid-column:1/-1}}
.foot .mark{font-size:2.2rem}
.foot p{color:var(--on-case-2);max-width:48ch;margin-top:.9rem}
.foot h2{font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blade);margin-bottom:.4rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;align-content:start}
.foot li a{display:inline-flex;min-height:44px;align-items:center;font-weight:700;overflow-wrap:anywhere}
.foot :focus-visible{outline-color:var(--blade)}
.foot .demo{grid-column:1/-1;border-top:1px solid var(--case-line);padding-top:1.4rem;font-size:.92rem;max-width:none}

/* ------------------------------------------------ the side tape (authored moment) */
.stape{display:none}
@media (min-width:1320px){
  .js .stape{display:block;position:fixed;z-index:30;right:10px;top:calc(var(--bar-h) + 14px);bottom:14px;width:34px;pointer-events:none}
  .stape__case{position:absolute;top:0;left:0;width:34px;height:46px}
  .stape__blade{position:absolute;left:4px;top:40px;width:26px;bottom:0;background:var(--blade);
    background-image:linear-gradient(180deg,var(--ink) 2px,transparent 2px),linear-gradient(180deg,var(--ink) 1.5px,transparent 1.5px),linear-gradient(180deg,var(--ink) 1px,transparent 1px);
    background-size:14px var(--in),9px calc(var(--in)/2),5px calc(var(--in)/4);background-repeat:repeat-y;
    clip-path:inset(0 0 calc(100% - var(--p,0) * 100%) 0)}
  .stape__hook{position:absolute;left:1px;width:32px;height:9px;top:calc(40px + var(--p,0) * (100% - 49px));background:linear-gradient(180deg,#C9CDCF,#7E8386);border-radius:1px}
  .stape__mark{position:absolute;right:0;width:15px;padding:.3rem 0;background:var(--stud);color:#fff;font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;transform:translateY(-2px)}
  .stape__mark.is-past{background:var(--ink);color:var(--blade)}
}
@media (prefers-reduced-motion:no-preference){.stape__mark{transition:background-color .3s var(--ease),color .3s var(--ease)}}
.sec--flush > .wrap > .group:first-child{margin-top:0;padding-top:clamp(2rem,1.5rem + 2vw,3rem)}