/* Beyond Topographic: the Field Book look (Land Survey and About).
   A survey field book spread: ruled notes on the left, grid sketch page on the right, red pencil marks.
   Sibling of set.css (the Construction Set look); same brand colors and type. */
:root{
  --blue:#2B5EA7; --deep:#1E4A85; --orange:#E07820; --cream:#F0EAD6; --ink:#111111;
  --paper:#F5F0E2; --paper-edge:#DDD3B8; --rule:rgba(43,94,167,.24); --grid:rgba(43,94,167,.11); --grid2:rgba(43,94,167,.22);
  --tint:rgba(245,240,226,.9);
  --r:28px;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif; --body:"Barlow",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--deep);background-image:radial-gradient(ellipse at 50% 0%, #2B5EA7 0%, #1E4A85 55%);background-attachment:fixed;color:var(--ink);font:400 17px/var(--r) var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:2px}
.back a:focus-visible,.skip:focus-visible{outline-color:var(--cream)}
.skip{position:absolute;left:12px;top:-60px;background:var(--cream);color:var(--ink);padding:8px 14px;z-index:50;font-weight:600}
.skip:focus{top:12px}
.lbl{font:500 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.icons{position:absolute;width:0;height:0;overflow:hidden}

/* the book */
.book{max-width:1240px;margin:0 auto;padding:28px 28px 0}
.leaf{position:relative;background:var(--paper);border-radius:3px;margin-bottom:34px;scroll-margin-top:16px;
  box-shadow:0 1px 0 var(--paper-edge),0 2px 0 var(--paper),0 3px 0 var(--paper-edge),0 4px 0 var(--paper),0 5px 0 var(--paper-edge),0 6px 0 #cfc4a6,0 22px 50px rgba(8,20,40,.45)}

/* header: the inside cover */
.top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 28px;padding:18px 32px 16px;border-bottom:3px double var(--blue)}
.brand img{width:150px}
.top .desc{margin:0;display:flex;flex-direction:column;gap:7px;border-left:1px solid var(--rule);padding-left:22px}
.top .desc b{font:700 19px/1 var(--cond);letter-spacing:.06em;color:var(--deep);text-transform:uppercase}
.top .desc span{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.found{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-decoration:none;color:var(--deep)}
.found span{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.found b{font:700 26px/1 var(--cond);letter-spacing:.02em;position:relative}
.nav{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--rule);padding-top:12px;margin-top:4px}
.nav a{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--deep);text-decoration:none;padding:9px 12px;border-radius:2px;position:relative}
.nav a:hover{background:rgba(43,94,167,.08)}
.nav a .pg{color:var(--blue);opacity:.75;margin-left:7px;font-size:10.5px}
.nav a[aria-current="page"]{font-weight:600;color:var(--ink)}
.nav a[aria-current="page"] .pg{opacity:1;color:var(--deep)}
.nav a .mk{position:absolute;left:-3px;top:-4px;width:calc(100% + 6px);height:calc(100% + 8px)}
.nav a.cta{margin-left:auto;background:var(--orange);color:var(--ink)}
.nav a.cta:hover{background:#eb8a37}
.idx-toggle{display:none}

/* spread: notes page on the left, sketch page on the right */
.spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sketch::before,.head.right::before{content:"";position:absolute;top:0;bottom:0;left:-35px;width:70px;pointer-events:none;
  background:linear-gradient(90deg,rgba(30,74,133,0) 0%,rgba(30,74,133,.07) 40%,rgba(17,17,17,.20) 50%,rgba(30,74,133,.07) 60%,rgba(30,74,133,0) 100%)}
.head{display:flex;align-items:flex-end;gap:14px;padding:16px 40px 10px 40px;border-bottom:2px solid var(--blue);position:relative;min-width:0}
.hf{display:flex;align-items:baseline;gap:10px;flex:1;min-width:0;margin:0;max-width:none}
.hf .v{flex:1;border-bottom:1px solid var(--rule);font:600 19px/1.2 var(--cond);color:var(--deep);letter-spacing:.02em;padding:0 2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf.pg{flex:0 0 auto}
.hf.pg .v{min-width:44px;text-align:center}
.notes{position:relative;padding:var(--r) 44px calc(var(--r)*2) 96px;
  background-image:linear-gradient(to bottom,transparent calc(var(--r) - 1px),var(--rule) calc(var(--r) - 1px));background-size:100% var(--r);background-position:0 -4px}
.notes::before{content:"";position:absolute;top:0;bottom:0;left:68px;width:4px;border-left:1px solid rgba(43,94,167,.45);border-right:1px solid rgba(43,94,167,.45)}
.sketch{position:relative;padding:var(--r) 44px calc(var(--r)*2) 56px;
  background-image:linear-gradient(90deg,transparent calc(50% - 1px),rgba(224,120,32,.45) calc(50% - 1px),rgba(224,120,32,.45) calc(50% + 1px),transparent calc(50% + 1px)),
   linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px),
   linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:100% 100%,70px 70px,70px 70px,14px 14px,14px 14px;background-position:0 0,center top,center top,center top,center top}
.sketch > *{position:relative}
.margin-no{position:absolute;left:0;width:68px;top:var(--r);text-align:center;font:500 12px/var(--r) var(--mono);color:var(--blue)}
.margin-no b{display:block;font:700 30px/calc(var(--r)*1.5) var(--cond);color:var(--deep)}

/* a heading row across both pages */
.span-head{grid-column:1/-1;padding:var(--r) 44px var(--r) 96px;position:relative;
  background-image:linear-gradient(to bottom,transparent calc(var(--r) - 1px),var(--rule) calc(var(--r) - 1px));background-size:100% var(--r);background-position:0 -4px;border-bottom:2px solid var(--blue)}
.span-head::before{content:"";position:absolute;top:0;bottom:0;left:68px;width:4px;border-left:1px solid rgba(43,94,167,.45);border-right:1px solid rgba(43,94,167,.45)}
.span-head .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0 96px;align-items:end}
.span-head h2{margin-bottom:0}
.span-head .intro{margin:0}

/* type on the ruling */
h1,h2,h3{font-family:var(--cond);color:var(--deep);margin:0;letter-spacing:.005em}
h1{font-weight:700;font-size:78px;line-height:calc(var(--r)*3);margin:0 0 var(--r);text-wrap:balance}
h2{font-weight:700;font-size:46px;line-height:calc(var(--r)*2);margin:0 0 var(--r);text-wrap:balance}
h3{font-weight:700;font-size:28px;line-height:calc(var(--r)*1.5);margin:0 0 calc(var(--r)/2)}
p{margin:0 0 var(--r);max-width:34em}
.eyebrow{display:block;font:500 12px/var(--r) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0}
.sub{font:600 26px/calc(var(--r)*1.5) var(--cond);color:var(--ink);margin-bottom:calc(var(--r)/2)}
.lead,.intro{font-size:18px}
.sketch .tinted{background:var(--tint);box-shadow:0 0 0 8px var(--tint)}

/* red pencil marks */
.mk{color:var(--orange);pointer-events:none}
.pencil{position:relative;white-space:nowrap;display:inline-block}
.pencil > .mk{position:absolute;overflow:visible}
.pencil.ring.sm{margin:0 3px 0 7px}
.pencil.ring.sm > .mk{left:-10px;width:calc(100% + 18px);top:-4px;height:calc(100% + 8px)}
h1 .pencil.ring,h2 .pencil.ring{margin-left:.28em}
.ring > .mk{left:-14px;right:-16px;top:-8px;bottom:-10px;width:calc(100% + 30px);height:calc(100% + 18px)}
.uline > .mk{left:-4px;right:-6px;bottom:-10px;height:16px;width:calc(100% + 10px)}
.js .mk.draw{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.5,.1,.3,1)}
.js .mk.draw.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.js .mk.draw{clip-path:none;transition:none}}
.tag{display:inline-block;font:500 12px/var(--r) var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);padding:0 10px}

/* lists with check marks */
.checks{list-style:none;margin:0 0 var(--r);padding:0}
.checks li{position:relative;padding-left:36px;line-height:var(--r)}
.checks li .mk{position:absolute;left:2px;top:1px;width:24px;height:24px}
.checks a{color:var(--ink);text-decoration-color:rgba(43,94,167,.5);text-underline-offset:4px}
.checks a:hover{color:var(--deep);text-decoration-color:var(--orange)}
.numbered{list-style:none;margin:0 0 var(--r);padding:0;counter-reset:n}
.numbered li{position:relative;line-height:var(--r)}
.numbered li::before{counter-increment:n;content:counter(n,decimal-leading-zero);position:absolute;left:-96px;width:68px;text-align:center;font:500 12px/var(--r) var(--mono);color:var(--blue)}
.numbered li .mk{position:absolute;left:-26px;top:1px;width:22px;height:22px}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 var(--r)}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;background:var(--orange);color:var(--ink);font:600 16px/1 var(--body);text-decoration:none;border:2px solid var(--ink);border-radius:3px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn.ink{background:transparent;color:var(--deep);border-color:var(--deep);box-shadow:none}
.btn.ink:hover{background:rgba(43,94,167,.08);transform:none}
.btn svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* taped prints: the photo placeholders */
.print{position:relative;background:#fff;padding:10px 10px 0;margin:0 0 var(--r);box-shadow:0 1px 2px rgba(17,17,17,.2),0 10px 22px rgba(17,17,17,.14);transform:rotate(-1.3deg)}
.print.r{transform:rotate(1.1deg)}
.print::before{content:"";position:absolute;top:-12px;left:50%;width:92px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(240,234,214,.82);border:1px solid rgba(17,17,17,.06);box-shadow:0 1px 1px rgba(17,17,17,.06)}
.print.narrow{width:82%}
.print.narrow.end{margin-left:auto}
.ph{position:relative;aspect-ratio:4/3;background-color:var(--deep);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23F0EAD6' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M-10 230 C60 200 110 240 180 210 S300 150 410 180'/%3E%3Cpath d='M-10 200 C70 170 120 205 190 178 S300 120 410 150'/%3E%3Cpath d='M-10 170 C80 140 130 170 200 146 S300 92 410 120'/%3E%3Cpath d='M-10 140 C90 112 140 136 210 114 S300 66 410 92'/%3E%3Cpath d='M-10 110 C100 86 150 104 220 84 S300 42 410 64'/%3E%3Cpath d='M-10 260 C50 236 100 272 170 244 S300 184 410 212'/%3E%3C/g%3E%3C/svg%3E"),
  linear-gradient(155deg,#2B5EA7 0%,#1E4A85 70%,#173a69 100%);background-size:100% 100%,100% 100%;display:flex;align-items:center;justify-content:center}
.ph.tall{aspect-ratio:5/6}
.ph.wide{aspect-ratio:16/10}
.ph .vf{position:relative;width:58%;max-width:220px;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(var(--cream),var(--cream)) 0 0/18px 2px no-repeat,linear-gradient(var(--cream),var(--cream)) 0 0/2px 18px no-repeat,
   linear-gradient(var(--cream),var(--cream)) 100% 0/18px 2px no-repeat,linear-gradient(var(--cream),var(--cream)) 100% 0/2px 18px no-repeat,
   linear-gradient(var(--cream),var(--cream)) 0 100%/18px 2px no-repeat,linear-gradient(var(--cream),var(--cream)) 0 100%/2px 18px no-repeat,
   linear-gradient(var(--cream),var(--cream)) 100% 100%/18px 2px no-repeat,linear-gradient(var(--cream),var(--cream)) 100% 100%/2px 18px no-repeat}
.ph .vf span{white-space:nowrap;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.print figcaption{font:400 12px/18px var(--mono);color:#333;padding:10px 4px 12px;letter-spacing:.01em}
.print figcaption b{font-weight:500;color:var(--deep)}

/* drawn sketches */
.sk{display:block;width:100%;height:auto;overflow:visible}
.sk .ink{stroke:var(--deep);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sk .thin{stroke:var(--deep);fill:none;stroke-width:1;stroke-opacity:.7}
.sk .dash{stroke:var(--deep);fill:none;stroke-width:1.2;stroke-dasharray:16 5 3 5}
.sk .dim{stroke:var(--blue);fill:none;stroke-width:1}
.sk .red{stroke:var(--orange);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sk .fill{fill:var(--deep)}
.sk .paper{fill:var(--paper)}
.sk text{font-family:var(--mono);font-size:11px;fill:var(--deep);letter-spacing:.06em}
.sk text.big{font-family:var(--cond);font-weight:700;font-size:22px}
.sk-cap{display:block;font:500 11px/var(--r) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);text-align:left;margin:0 0 var(--r)}
.sketch .sk-cap{background:var(--tint);display:inline-block;padding:0 6px}

/* hero spread */
.hero h1 .uline > .mk{bottom:-6px;height:22px}
.hero .sketch{display:flex;flex-direction:column}
.hero-sk{display:grid;grid-template-columns:1fr 112px;gap:20px;align-items:start}
.hero-sk .print{margin-top:14px;margin-bottom:0}
.north{width:110px;margin-top:6px}
.north.end{margin:0 0 0 auto;width:96px}
.cp-note{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:var(--r)}
.cp-note svg{width:100%;max-width:420px}

/* contents: the land survey section index */
.contents{margin:0 0 var(--r)}
.contents ol{list-style:none;margin:0;padding:0;max-width:34em}
.contents li{line-height:var(--r)}
.contents a{display:flex;align-items:baseline;gap:10px;min-height:var(--r);padding:0;text-decoration:none;color:var(--ink);font-weight:500}
.contents a .n{flex:0 0 auto;font:500 12px/var(--r) var(--mono);color:var(--blue);width:22px}
.contents a .t{flex:0 1 auto}
.contents a::after{content:"";flex:1 1 20px;order:2;border-bottom:1.5px dotted rgba(43,94,167,.55);margin:0 2px;transform:translateY(-6px)}
.contents a .p{order:3;flex:0 0 auto;font:500 11.5px/var(--r) var(--mono);letter-spacing:.06em;color:var(--blue)}
.contents a:hover .t{color:var(--deep);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}

/* finder: "find the survey for your job" */
.finder{list-style:none;margin:0 0 var(--r);padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px}
.finder li{border-top:1.5px solid var(--blue)}
.finder li:nth-last-child(-n+2){border-bottom:1.5px solid var(--blue)}
.finder a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px;align-items:start;padding:calc(var(--r)/2) 0;text-decoration:none;color:var(--ink);min-height:calc(var(--r)*3)}
.finder a b{display:block;font:700 22px/var(--r) var(--cond);color:var(--deep);letter-spacing:.01em}
.finder a .s{display:block;grid-column:1;line-height:var(--r)}
.finder a .go{grid-column:2;grid-row:1/span 2;align-self:center;display:flex;align-items:center;gap:6px;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.finder a .go svg{width:16px;height:16px;color:var(--orange)}
.finder a:hover b{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:5px}
.finder a:hover .go{color:var(--deep)}

/* service entries: one per job type, numbered in the margin */
main{counter-reset:sec}
.sec{counter-reset:svc;counter-increment:sec}
.sec .span-head h2{font-size:52px}
.svc{position:relative;margin:0 0 var(--r)}
.svc::before{counter-increment:svc;content:counter(sec) "." counter(svc);font:500 12px/var(--r) var(--mono);color:var(--blue)}
.notes .svc::before{position:absolute;left:-96px;top:0;width:68px;text-align:center}
.sketch .svc::before{display:block;letter-spacing:.06em}
.svc h3{font-size:25px;line-height:var(--r);margin:0;letter-spacing:.01em}
.svc p{margin:0}
.svc .needs{font-size:16px;color:#2b2b2b}
.svc .needs .lbl{display:inline-block;font-size:11px;line-height:1;color:var(--deep);font-weight:500;margin-right:4px;position:relative}
.svc .needs .lbl::after{content:"";position:absolute;left:0;right:2px;bottom:-4px;height:2px;background:var(--orange);opacity:.8;border-radius:2px}
.svc a{color:var(--deep);text-underline-offset:3px}
.sketch .svc{background:var(--tint);box-shadow:0 0 0 8px var(--tint)}
.sec .sketch .sk{margin:calc(var(--r)*.5) 0 var(--r)}

/* towns: county and the towns in it */
.towns{margin:0 0 var(--r);border-top:1.5px solid var(--blue)}
.town{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 24px;padding:calc(var(--r)/2) 0;border-bottom:1px solid rgba(43,94,167,.4)}
.town h3{font-size:22px;line-height:var(--r);margin:0}
.town p{margin:0;max-width:none}

/* tables: the field columns */
.cols{width:100%;border-collapse:collapse;margin:0 0 var(--r);font-size:16px}
.cols th{font:500 11px/var(--r) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);text-align:left;padding:0 14px;border-bottom:1.5px solid var(--blue)}
.cols td{vertical-align:top;padding:0 14px;line-height:var(--r)}
.cols td + td,.cols th + th{border-left:1px solid rgba(43,94,167,.4)}
.cols td:first-child,.cols th:first-child{padding-left:0}
.cols td b{font-weight:600;color:var(--deep)}
.cols.tools td:first-child{white-space:nowrap}

.quote{font:italic 500 30px/calc(var(--r)*1.5) var(--body);color:var(--deep);margin:0 0 var(--r);padding-left:22px;border-left:3px solid var(--orange);max-width:18em}
.sketch .quote{background:var(--tint)}
.people{list-style:none;margin:0 0 var(--r);padding:0}
.people li{position:relative;padding-left:36px;line-height:var(--r);margin-bottom:calc(var(--r)/2)}
.people li .mk{position:absolute;left:2px;top:1px;width:24px;height:24px}
.people b{color:var(--deep)}

/* form blanks on the sketch side */
.blanks{margin:0 0 var(--r);padding:0;list-style:none}
.blanks li{display:flex;align-items:flex-end;gap:12px;height:calc(var(--r)*2)}
.blanks .lbl{flex:0 0 96px;padding-bottom:6px}
.blanks span.line{flex:1;border-bottom:1.5px solid var(--deep);height:36px;position:relative}
.call{display:inline-block;margin:0 0 var(--r) 22px;text-decoration:none;color:var(--deep);font:700 56px/calc(var(--r)*3) var(--cond);letter-spacing:.01em}
.call .pencil{padding:0 4px}
.call .ring > .mk{left:-22px;right:-22px;top:-4px;bottom:-4px;width:calc(100% + 44px);height:calc(100% + 8px)}
.reach .phone{font:700 26px/var(--r) var(--cond);color:var(--deep);text-decoration:none;letter-spacing:.02em}
.reach .phone:hover{text-decoration:underline;text-decoration-color:var(--orange)}

/* back cover */
.back{max-width:1240px;margin:0 auto;padding:12px 28px 90px;color:var(--cream)}
.back .in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;padding:34px 0;border-top:1px solid rgba(240,234,214,.25)}
.plate{display:inline-block;background:var(--cream);padding:14px 18px;border-radius:3px}
.plate img{width:170px}
.back p{color:var(--cream);font-size:15px;line-height:24px;margin:14px 0 0}
.back .lbl{color:var(--cream);opacity:.8;display:block;margin-bottom:14px}
.back ul{list-style:none;margin:0;padding:0}
.back li{line-height:30px}
.back a{color:var(--cream);text-decoration:none;font-size:15px}
.back a:hover{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
.back a .pg{font:500 10.5px/1 var(--mono);letter-spacing:.08em;opacity:.7;margin-left:8px}
.back .tel{font:700 26px/1 var(--cond);letter-spacing:.02em}
.back .legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:400 11.5px/1.6 var(--mono);letter-spacing:.05em;color:rgba(240,234,214,.7);border-top:1px solid rgba(240,234,214,.25);padding-top:16px}

/* desktop tuning */
@media (min-width:1100px){
  .hero .notes{padding-right:56px}
}
@media (max-width:1099px) and (min-width:861px){
  h1{font-size:64px;line-height:calc(var(--r)*2.5)}
  .nav a{padding:9px 8px}
  .finder{gap:0 32px}
  .town{grid-template-columns:170px minmax(0,1fr)}
  .back .in{grid-template-columns:1fr 1fr}
}

/* phone and small tablet: one page at a time */
@media (max-width:860px){
  body{font-size:16px}
  .book{padding:10px 10px 0}
  .leaf{margin-bottom:22px;scroll-margin-top:10px}
  .top{grid-template-columns:auto 1fr;padding:12px 16px;gap:10px 14px}
  .brand img{width:112px}
  .top .desc{padding-left:14px;gap:6px}
  .top .desc b{font-size:15px;letter-spacing:.04em}
  .top .desc span{font-size:9.5px}
  .found{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid var(--rule);padding-top:10px}
  .found b{font-size:22px}
  .js .idx-toggle{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;width:100%;background:transparent;border:1.5px solid var(--deep);border-radius:3px;color:var(--deep);font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;cursor:pointer;min-height:44px}
  .idx-toggle i{font-style:normal;font-size:16px;line-height:1}
  .nav{flex-direction:column;align-items:stretch;gap:0;border-top:0;padding-top:0;margin-top:-4px}
  .js .nav{display:none}
  .js .nav.open{display:flex}
  .nav a{display:flex;align-items:baseline;gap:6px;padding:13px 2px;border-bottom:1px solid var(--rule);font-size:12.5px}
  .nav a::after{content:"";flex:1;order:1;border-bottom:1.5px dotted rgba(43,94,167,.5);margin:0 4px}
  .nav a .pg{order:2;margin:0}
  .nav a .mk{display:none}
  .nav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--orange);padding-left:12px}
  .nav a.cta{margin:12px 0 4px;justify-content:center;border-bottom:0;padding:15px}
  .nav a.cta::after{display:none}
  .spread{grid-template-columns:minmax(0,1fr)}
  .sketch::before,.head.right::before{display:none}
  .head{padding:12px 16px 8px;gap:10px}
  .head.right{display:none}
  .notes{padding:var(--r) 18px calc(var(--r)*1) 52px}
  .notes::before,.span-head::before{left:34px}
  .margin-no{width:34px}
  .margin-no b{font-size:22px}
  .sketch{padding:var(--r) 18px var(--r);border-top:2px solid var(--blue)}
  .span-head{padding:var(--r) 18px var(--r) 52px}
  .span-head .wrap{grid-template-columns:1fr;gap:0}
  .span-head h2{margin-bottom:0}
  h1{font-size:50px;line-height:calc(var(--r)*2)}
  h2,.sec .span-head h2{font-size:36px;line-height:calc(var(--r)*1.5);margin-bottom:calc(var(--r)/2)}
  h3{font-size:25px}
  .sub{font-size:22px;line-height:var(--r)}
  .lead,.intro{font-size:17px}
  .numbered li::before{left:-52px;width:34px;font-size:11px}
  .numbered li{padding-left:6px}
  .numbered li .mk{left:-20px}
  .notes .svc::before{left:-52px;width:34px;font-size:10.5px;letter-spacing:-.02em}
  .svc h3{font-size:23px}
  .svc{margin-bottom:calc(var(--r)*1.5)}
  .sec .sketch{padding-left:52px}
  .sec .sketch .svc::before{position:absolute;left:-52px;top:0;width:34px;text-align:center;font-size:10.5px;letter-spacing:-.02em}
  .sketch .svc{box-shadow:0 0 0 6px var(--tint)}
  .sec .sketch .sk{margin-left:-34px;width:calc(100% + 34px)}
  .hero-sk{grid-template-columns:1fr 84px;gap:12px}
  .north{width:80px}
  .finder{grid-template-columns:minmax(0,1fr)}
  .finder li:nth-last-child(2){border-bottom:0}
  .finder a{min-height:0}
  .finder a b{font-size:21px}
  .finder a .go span{display:none}
  .town{grid-template-columns:minmax(0,1fr);padding:calc(var(--r)/2) 0}
  .quote{font-size:24px;line-height:36px}
  .call{font-size:40px;line-height:calc(var(--r)*2.5);margin-left:16px}
  .cols{font-size:15px}
  .cols th,.cols td{padding:0 10px}
  .cols.tools td:first-child{white-space:normal}
  .sk text{font-size:15px}
  .sk text.big{font-size:26px}
  .blanks .lbl{flex-basis:84px}
  .btn{height:50px;padding:0 18px}
  .actions .btn{flex:1 1 100%;justify-content:center}
  .print.narrow{width:92%}
  .back{padding:6px 18px 80px}
  .back .in{grid-template-columns:1fr 1fr;gap:28px 20px}
  .back .in > :first-child{grid-column:1/-1}
}
@media (max-width:400px){
  .back .in{grid-template-columns:1fr}
}

/* Real job photos in the taped-in prints */
.ph.has-photo{background:none;display:block}
.ph.has-photo > img{display:block;width:100%;height:100%;object-fit:cover}

/* Title companies spread (Pg 02A): its own service numbers, T.1 to T.5 */
.title-sec{counter-reset:svc}
.title-sec .svc::before{content:"T." counter(svc)}

/* ===== Spacing and balance pass (11/05/2026): spacing, alignment and symmetry only ===== */

/* Anchor links land below the sticky top bar, not under it */
.leaf{scroll-margin-top:84px}

/* Sketch captions run the width of the page instead of wrapping early at the paragraph measure */
.sk-cap{max-width:none}

@media (min-width:861px){
  /* Right-page service numbers sit in the outer margin, level with the heading,
     mirroring the left page's margin numbers, so headings line up across the spread */
  .sketch .svc::before{position:absolute;top:0;right:-44px;width:44px;text-align:center;letter-spacing:.02em}

  /* Pg 02A: the sketch page's three groups spread down the page so it ends level with the notes page */
  .title-sec .sketch{display:flex;flex-direction:column;row-gap:var(--r)}
  .title-sec .sketch > .tinted > :last-child{margin-bottom:0}
  .title-sec .sketch > .tinted + .tinted,.title-sec .sketch > .actions{margin-top:auto !important}
  .title-sec .sketch > .actions{margin-bottom:0}
  .title-sec .sketch > .actions + p{margin-top:calc(18px - var(--r)) !important;margin-bottom:0}

  /* Where we work header: the intro lines up with the sketch page's column and starts level with the eyebrow */
  .span-head .wrap{grid-template-columns:minmax(0,calc(50% - 70px)) minmax(0,1fr);gap:0 100px;align-items:start}
  .span-head .wrap .intro{margin-top:calc(var(--r)*-1)}

  /* About Pg 06: "Reach us" starts on the same line as "Where we work" across the fold */
  .sketch > .reach:first-child{margin-top:var(--r)}
}

/* wide: an extra ruled line between left-page entries balances the two pages of each section */
@media (min-width:1100px){
  .sec .notes .svc{margin-bottom:calc(var(--r)*2)}
  .sec .notes .svc:last-child{margin-bottom:0}
}

/* small desktop: the hero print takes the full sketch page width, the north arrow drops below it
   on the right, so the narrower sketch page fills as far down as the notes page */
@media (max-width:1239px) and (min-width:861px){
  .hero-sk:has(+ .cp-note){grid-template-columns:minmax(0,1fr);gap:0}
  .hero-sk:has(+ .cp-note) .print{max-width:430px}
  .hero-sk:has(+ .cp-note) .north{width:84px;justify-self:end;margin-top:var(--r)}
}

/* tablet, one page at a time: prints and sketches keep a reading size instead of filling the width */
@media (max-width:860px) and (min-width:561px){
  .sk text{font-size:12px}
  .sk text.big{font-size:22px}
  .sketch .print:not(.narrow){max-width:520px;margin-left:auto;margin-right:auto}
  .sketch .print.narrow{max-width:440px}
  .hero-sk{grid-template-columns:minmax(0,440px) 84px;justify-content:space-between}
  .hero-sk .print{margin-left:0}
}

/* phone and tablet */
@media (max-width:860px){
  .leaf{scroll-margin-top:78px}
  .span-head .wrap{row-gap:calc(var(--r)/2)}
  .notes > .svc:last-child{margin-bottom:var(--r)}
}
@media (min-width:861px){
  /* About Pg 04 and 05: when the notes page runs longer, the print or sketch settles lower on the
     sketch page instead of leaving the bottom of the grid empty */
  .sketch:has(> .quote + .print:last-child),.sketch:has(> .print + .sk:last-child){display:flex;flex-direction:column}
  .sketch > .quote + .print:last-child{margin-top:auto;margin-bottom:auto}
  .sketch > .print + .sk:last-child{margin-top:auto}
}
/* narrow desktop: the ringed phone number stays inside its page instead of crossing the fold */
@media (max-width:980px) and (min-width:861px){
  .call{font-size:46px;margin-left:16px}
}

/* A photo print shows a faint brand-blue tint while its picture loads, never a white box */
.ph.has-photo{background:rgba(43,94,167,.10)}