/* Murray Exterminating — the Service Record.
 *
 * The site is the label a Murray tech leaves inside your cabinet door: white
 * die-cut label stock printed in black, the brand band in Murray red, and
 * ballpoint blue for what a person writes. Red fields carry the hero, page
 * heads and the closing band; on white, red marks only what you can act on.
 *
 * Type: League Gothic (Alternate Gothic, Benton/ATF 1903) for printed headers,
 * Libre Franklin (Franklin Gothic, Benton/ATF 1902) for everything else: the
 * American gothics of labels, service tickets and truck lettering.
 */

@font-face { font-family: "League Gothic"; src: url(/assets/fonts/league-gothic-wdth.woff2) format("woff2"); font-weight: 400; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url(/assets/fonts/libre-franklin-wght.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url(/assets/fonts/libre-franklin-wght-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --red: #BF0101;
  --red-deep: #8E0303;
  --red-ink: #B00000;      /* red text on white: 6.9:1 */
  --on-red: #FFFFFF;       /* white on red: 6.5:1 */
  --on-red-soft: #FFD9D5;  /* secondary on red, tinted from the hue: 5.0:1 */
  --ink: #141518;
  --ink-2: #454950;        /* 9.4:1 on white */
  --rule: #141518;
  --rule-soft: #CDD1D7;
  --ground: #ECEEF1;       /* cool near-white: the painted inside of a cabinet door */
  --label: #FFFFFF;
  --ball: #1F3A93;         /* ballpoint blue: typed field values, focus, the open stamp */
  --hover-red: #FFF3F2;

  --gothic: "League Gothic", "Arial Narrow", "Roboto Condensed", sans-serif;
  --franklin: "Libre Franklin", "Franklin Gothic Book", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --line: 1.5px;
  --shadow-label: 0 1px 2px rgba(20, 21, 24, .10), 0 22px 40px -22px rgba(70, 0, 0, .55);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--red) var(--ground); scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--franklin);
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ball);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol { list-style: none; padding: 0; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
abbr[title] { text-decoration: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 6px; font-weight: 700; }
.skip:focus { top: 12px; }
.tel { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* ── Masthead ─────────────────────────────────────────────────────────── */
.masthead { position: sticky; top: 0; z-index: 20; background: var(--label); border-bottom: var(--line) solid var(--ink); }
.masthead__in { max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__mark { width: 46px; height: 46px; }
.brand__name { font: 400 1.9rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .02em; }
.nav { margin-left: auto; }
.nav__bar { display: none; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__bar a, .nav__menu a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 10px; border-radius: 6px; display: block; white-space: nowrap; }
.nav__bar a:hover, .nav__menu a:hover { background: var(--ground); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--red); border-radius: 0; }
.nav__menu summary { list-style: none; cursor: pointer; font-weight: 700; font-size: .95rem; padding: 10px 14px 10px 38px; border: var(--line) solid var(--ink); border-radius: 8px; position: relative; min-height: 44px; display: flex; align-items: center; }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu summary::before { content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 12px; transform: translateY(-50%); background: linear-gradient(var(--ink) 0 0) top / 100% 2px no-repeat, linear-gradient(var(--ink) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--ink) 0 0) bottom / 100% 2px no-repeat; }
.nav__menu[open] summary { background: var(--ink); color: #fff; }
.nav__menu[open] summary::before { background: linear-gradient(#fff 0 0) top / 100% 2px no-repeat, linear-gradient(#fff 0 0) center / 100% 2px no-repeat, linear-gradient(#fff 0 0) bottom / 100% 2px no-repeat; }
.nav__menu ul { position: absolute; left: 0; right: 0; top: 100%; background: var(--label); border-bottom: var(--line) solid var(--ink); list-style: none; margin: 0; padding: 8px var(--gutter) 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 16px; }
.nav__menu ul a { font-size: 1.1rem; padding: 12px 10px; border-bottom: 1px solid var(--rule-soft); border-radius: 0; }
.masthead__call { flex: none; background: var(--red); color: #fff; text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; padding: 11px 16px; border-radius: 8px; min-height: 46px; display: flex; align-items: center; gap: 6px; box-shadow: 0 1px 0 var(--red-deep); }
.masthead__call:hover { background: var(--red-deep); }
/* 1220, not 1100, since "Work With Us" made it eight links (2026-11-13): logo,
   bar and call button need 1114px between the gutters (measured), so the bar
   fits from a 1209px window. At 1100 it pushed the call button off-screen. */
@media (max-width: 1219px) { .nav { margin-left: auto; } }
@media (min-width: 1220px) {
  /* With the full bar showing, the octagon carries the name on its own. */
  .nav__menu { display: none; }
  .nav__bar { display: flex; }
  .brand__name { display: none; }
  .brand__mark { width: 54px; height: 54px; }
}
@media (max-width: 560px) {
  .masthead__in { gap: 10px; }
  .brand__name span { display: none; }
  .brand__mark { width: 40px; height: 40px; }
  .masthead__call { padding: 10px 12px; font-size: .95rem; }
}
@media (max-width: 400px) { .brand__name { display: none; } }

/* ── Labels: die-cut white stock, black print ─────────────────────────── */
.label { background: var(--label); color: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-label); }
.label__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: var(--red); color: var(--on-red); padding: 12px 16px; border-bottom: var(--line) solid var(--ink); }
.label__head--slim { grid-template-columns: 1fr; background: var(--ink); padding: 14px 20px; }
.label__mark { width: 52px; height: 52px; }
.label__name { font: 400 1.85rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .02em; }
.label__name span { display: block; font: 500 .9rem/1.35 var(--franklin); text-transform: none; letter-spacing: .01em; color: var(--on-red-soft); margin-top: 6px; }
.label__head--slim .label__name span { color: #C3C7CE; }
.label__kind { font: 400 1.05rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .08em; border: var(--line) solid currentColor; border-radius: 4px; padding: 5px 8px 4px; }

table { border-collapse: collapse; width: 100%; }
thead th { font: 600 .72rem/1.3 var(--franklin); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); text-align: left; padding: 10px 16px 8px; border-bottom: var(--line) solid var(--ink); }

/* The office record (hero, contact, 404) */
.rec__table tbody th, .rec__table td { padding: 0 16px; border-top: 1px solid var(--rule-soft); text-align: left; }
.rec__table tbody tr:first-child > * { border-top: 0; }
.rec__table tbody th { font-weight: 650; font-size: 1.06rem; padding-block: 12px; }
.rec__town { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-soft); text-underline-offset: .2em; }
.rec__town:hover { text-decoration-color: currentColor; }
.rec__note { display: block; font: 500 .74rem/1.3 var(--franklin); color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.rec__table td { text-align: right; }
.rec__table thead th:last-child { text-align: right; }
.rec__tel { display: inline-flex; align-items: center; min-height: 52px; font-weight: 750; font-size: 1.42rem; color: var(--red-ink); text-decoration: none; letter-spacing: .01em; }
.rec__table tbody tr:hover { background: var(--hover-red); }
.rec__tel:hover { text-decoration: underline; }
.rec__toll > * { border-top: var(--line) solid var(--ink) !important; }
.rec__foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px dashed var(--ink); font-size: .92rem; color: var(--ink-2); }
.rec__stamp { flex: none; font: 400 1rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .08em; border: var(--line) solid currentColor; border-radius: 4px; padding: 5px 7px 4px; color: var(--ink); }
.rec--big .rec__tel { font-size: 1.6rem; }
@media (max-width: 479px) { .rec--big .rec__tel { font-size: 1.42rem; } }

/* ── Hero: a red field and the record ─────────────────────────────────── */
.hero, .phead { background: var(--red); color: var(--on-red); }
.hero ::selection, .phead ::selection, .close ::selection { background: #fff; color: var(--red); }
.hero :focus-visible, .phead :focus-visible, .close :focus-visible { outline-color: #fff; }
.hero__in, .phead__in { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(48px, 7vw, 104px); display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero__kicker { font: 400 clamp(1.15rem, 2vw, 1.45rem)/1.1 var(--gothic); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.hero__h1 { font: 400 clamp(4rem, 17vw, 6rem)/.9 var(--gothic); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.hero__dek { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 40ch; margin-top: 22px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 26px; font: 400 1.3rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .06em; color: var(--on-red-soft); }
.hero__facts span + span::before { content: ""; display: inline-block; width: 1.5px; height: .9em; background: currentColor; opacity: .6; margin: 0 14px; vertical-align: -.08em; }
/* Four facts never fit the 7-column text on one line: print them as a 2 x 2 block. */
@media (min-width: 560px) {
  .hero__facts { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 0; }
  .hero__facts span:nth-child(odd)::before { display: none; }
}
.hero__label .label { max-width: 480px; margin-inline: auto; }
@media (max-width: 559px) {
  .hero__facts { flex-direction: column; gap: 10px; }
  .hero__facts span + span::before { display: none; }
}
@media (max-width: 479px) {
  .label__kind { display: none; }
  .label__head { grid-template-columns: auto 1fr; }
  .label__name { font-size: 1.6rem; }
}
/* The record sits level on the red (client request, 2026-11-13): it was stuck
   on at -1.2deg, which read as a diagonal across the screen. */
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero__label .label { margin-right: 0; }
}
@media (max-width: 899px) {
  /* Phone first: on a phone the numbers come straight after the headline. */
  .hero__in { gap: 0; }
  .hero__text { display: contents; }
  .hero__h1 { order: 1; }
  .hero__label { order: 2; margin-top: 24px; }
  .hero__dek { order: 3; margin-top: 28px; }
  .hero__facts { order: 4; }
}

.hiring { max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gutter); font-size: 1rem; line-height: 1.9; border-bottom: 1px solid var(--rule-soft); }
.hiring__k { display: inline-block; margin-right: 10px; font: 400 1.05rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .08em; background: var(--ink); color: #fff; padding: 6px 8px 5px; border-radius: 4px; vertical-align: 1px; }
.hiring .tel, .hiring__go { color: var(--red-ink); font-weight: 700; }
/* The sector lists' drawn arrow, nudged on hover the same way. */
.hiring__go { white-space: nowrap; }
.hiring__go::after { content: ""; display: inline-block; width: 18px; height: 12px; margin-left: 8px; vertical-align: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h15M11.5 1.5 16 6l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h15M11.5 1.5 16 6l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--ease-out); }
.hiring__go:hover::after { transform: translateX(4px); }
@media (max-width: 479px) { .hiring__go { white-space: normal; } }

/* ── Sections ─────────────────────────────────────────────────────────── */
.sec { max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gutter) 0; }
.sec:last-of-type:not(.close) { padding-bottom: clamp(56px, 8vw, 104px); }
.sec__head { margin-bottom: clamp(24px, 3vw, 36px); display: grid; gap: 12px; }
.sec__h { font: 400 clamp(2.6rem, 5.4vw, 4.1rem)/.92 var(--gothic); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.sec__h--sm { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.sec__dek { font-size: 1.15rem; color: var(--ink-2); max-width: 58ch; }
.prose { max-width: 66ch; }
.prose p + p { margin-top: 1em; }
.prose h2 { font: 400 1.9rem/1 var(--gothic); text-transform: uppercase; margin: 1.6em 0 .5em; }
.prose ul { padding-left: 1.2em; margin: .6em 0; }
.prose li + li { margin-top: .35em; }
.more { color: var(--red-ink); font-weight: 700; }

/* Services: torn-off ticket stubs. The counterfoil carries the action; the
   perforation between body and stub ends in die-cut notches at both edges. */
.tickets { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ticket { position: relative; border-radius: 12px; filter: drop-shadow(0 1px 1px rgba(20, 21, 24, .14)) drop-shadow(0 14px 16px rgba(70, 0, 0, .16)); }
.ticket__card {
  --stub: 64px; --notch: 9px;
  position: relative; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--stub);
  background: var(--label); border: var(--line) solid var(--ink); border-radius: 12px;
  -webkit-mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket__card::before, .ticket__card::after { content: ""; position: absolute; left: calc(100% - var(--stub) - var(--notch) - 1.5px); width: calc(2 * var(--notch) + 3px); height: calc(2 * var(--notch) + 3px); border: var(--line) solid var(--ink); border-radius: 50%; pointer-events: none; }
.ticket__card::before { top: calc(-1 * var(--notch) - 1.5px - var(--line)); }
.ticket__card::after { bottom: calc(-1 * var(--notch) - 1.5px - var(--line)); }
.ticket__body { display: grid; gap: 10px; align-content: start; padding: 24px 22px 24px 24px; }
.ticket__name { font: 400 2.05rem/.95 var(--gothic); text-transform: uppercase; letter-spacing: .01em; }
.ticket__name a { text-decoration: none; }
.ticket__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ticket__name a:focus-visible { outline: none; }
.ticket__dek { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.ticket__stub { display: flex; align-items: center; justify-content: center; border-left: 2px dashed var(--rule-soft); color: var(--red-ink); }
.ticket__stub span { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 10px; font: 400 1.2rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.ticket__stub span::after { content: ""; width: 12px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M6 17V2M1.5 6.5 6 1.5l4.5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M6 17V2M1.5 6.5 6 1.5l4.5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--ease-out); }
.ticket:hover .ticket__card { background: var(--hover-red); }
.ticket:hover .ticket__stub span { text-decoration: underline; text-underline-offset: .2em; }
.ticket:hover .ticket__stub span::after { transform: translateY(-4px); }
.ticket:focus-within { outline: 3px solid var(--ball); outline-offset: 4px; }
@media (min-width: 620px) { .tickets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tickets { grid-template-columns: repeat(3, 1fr); gap: 22px; } .ticket__body { padding: 28px 24px 28px 28px; min-height: 200px; } }
/* Four across when the count divides by four (the 8 on a service page), three
   across otherwise (the full sheet of 9, the 6 on /other-services/), so no row
   is left half empty.
   Below 1200px four columns squeeze the lines to ~15 characters: stay at two. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .tickets:is([data-count="4"], [data-count="8"]) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .tickets:is([data-count="4"], [data-count="8"]) { grid-template-columns: repeat(4, 1fr); }
  .tickets:is([data-count="4"], [data-count="8"]) .ticket__name { font-size: 1.75rem; }
  .tickets:is([data-count="4"], [data-count="8"]) .ticket__card { --stub: 56px; }
  .tickets:is([data-count="4"], [data-count="8"]) .ticket__body { padding: 24px 18px 24px 22px; }
}

/* Residential & commercial: two slim labels, one sentence each, then the
   services that apply as ruled rows. A row is a link, so its arrow is red. */
.sectors { display: grid; gap: clamp(20px, 3vw, 32px); align-items: start; }
.sector .label__name { font-size: clamp(2.2rem, 4vw, 2.9rem); }
.sector__line { padding: 22px 24px 20px; font-size: clamp(1.12rem, 1.5vw, 1.25rem); line-height: 1.5; max-width: 46ch; }
.sector__list { border-top: var(--line) solid var(--ink); }
.sector__list li + li { border-top: 1px solid var(--rule-soft); }
.sector__list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 12px 24px; font-weight: 650; text-decoration: none; }
.sector__list a::after { content: ""; flex: none; width: 18px; height: 12px; background: var(--red-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h15M11.5 1.5 16 6l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h15M11.5 1.5 16 6l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--ease-out); }
.sector__list a:hover { background: var(--hover-red); }
.sector__list a:hover::after { transform: translateX(4px); }
.sector__list a:focus-visible { outline-offset: -3px; border-radius: 0; }
@media (min-width: 900px) { .sectors { grid-template-columns: 1fr 1fr; } }

/* Founder */
.founder { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.founder__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 20%; border: var(--line) solid var(--ink); border-radius: var(--radius); }
.founder__fig figcaption { font-size: .92rem; color: var(--ink-2); padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--rule-soft); }
.founder__text { display: grid; gap: 18px; max-width: 64ch; }
.founder__lead { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.4; font-weight: 500; }
@media (min-width: 900px) { .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .founder__text { padding-top: 12px; } }

/* The record */
.ledger__table thead th { padding-inline: 20px; }
.ledger__table tbody td, .ledger__table tbody th { padding: 18px 20px; border-top: 1px solid var(--rule-soft); vertical-align: top; text-align: left; }
.ledger__table tbody tr:first-child > * { border-top: 0; }
.ledger__years { font: 400 1.6rem/1.05 var(--gothic); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; width: 9ch; }
.ledger__who { font-weight: 650; width: 17ch; }
.ledger__remark q { quotes: "“" "”"; color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; }
.ledger__remark { max-width: 70ch; }
@media (max-width: 819px) {
  .ledger__table thead { display: none; }
  .ledger__table, .ledger__table tbody, .ledger__row { display: block; }
  .ledger__row { display: grid; grid-template-columns: 1fr; grid-template-areas: "years" "who" "remark"; gap: 4px 12px; padding: 18px 18px 20px; border-top: 1px solid var(--rule-soft); }
  .ledger__row:first-child { border-top: 0; }
  .ledger__table tbody .ledger__row > * { padding: 0; border: 0; width: auto; }
  .ledger__years { grid-area: years; } .ledger__who { grid-area: who; } .ledger__remark { grid-area: remark; margin-top: 6px; }
}

/* Where we work */
.area { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
.area__text { display: grid; gap: 16px; max-width: 46ch; }
.area__text p { color: var(--ink-2); font-size: 1.12rem; }
.route { display: grid; grid-template-columns: 1fr; border-top: var(--line) solid var(--ink); }
.route li { display: grid; gap: 6px; padding: 14px 0 16px; border-bottom: 1px solid var(--rule-soft); }
.route__c { font: 400 1.6rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .02em; }
.route__t { font-size: 1.02rem; line-height: 1.45; }
@media (min-width: 900px) { .area { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .route { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* Closing band */
.close { background: var(--red); color: var(--on-red); margin-top: clamp(64px, 9vw, 120px); }
.close__in { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--gutter); display: grid; gap: clamp(24px, 3vw, 36px); }
.close__h { font: 400 clamp(3.2rem, 9vw, 6rem)/.9 var(--gothic); text-transform: uppercase; text-wrap: balance; }
.close__phones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; border-top: var(--line) solid rgba(255, 255, 255, .7); }
.close__phones li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .35); display: grid; gap: 2px; }
.close__phones span { font: 600 .74rem/1.3 var(--franklin); text-transform: uppercase; letter-spacing: .12em; color: var(--on-red-soft); }
.close__phones .tel { font-weight: 750; font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: #fff; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.close__phones .tel:hover { text-decoration: underline; }
.close__meta { color: var(--on-red-soft); font-size: 1rem; }
.close__meta a { color: #fff; }
@media (min-width: 900px) { .close__phones { grid-template-columns: repeat(5, 1fr); } .close__phones li { border-bottom: 0; } }

/* ── Inner page heads ─────────────────────────────────────────────────── */
.phead__h1 { font: 400 clamp(3.2rem, 8vw, 5.6rem)/.9 var(--gothic); text-transform: uppercase; text-wrap: balance; }
.phead__text { display: grid; gap: 20px; }
.phead__stand { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 44ch; }
.phead__stand a, .phead__call a { color: #fff; }
/* The office email, printed large (client request, 2026-11-13). */
.phead__email { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.phead__email span { font: 400 1.15rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .08em; color: var(--on-red-soft); }
.phead__email a { color: #fff; font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.2; overflow-wrap: anywhere; }
.phead__call { color: var(--on-red-soft); font-size: 1.02rem; }
/* A page's standing offer ("Free estimates for termite protection"), printed as a stuck-on label. */
.phead__offer { justify-self: start; font: 400 1.4rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .06em; background: var(--label); color: var(--red-ink); border: var(--line) solid var(--ink); border-radius: 4px; padding: 9px 12px 7px; transform: rotate(-1.2deg); }
.phead__tel { font-weight: 750; color: #fff; font-size: 1.2rem; }
.phead__alt { margin-left: 6px; }
.phead__fig img { width: 100%; max-height: 460px; aspect-ratio: 4 / 3; object-fit: cover; border: 6px solid #fff; border-radius: 6px; box-shadow: 0 24px 40px -24px rgba(40, 0, 0, .7); }
@media (min-width: 900px) {
  .phead__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .phead__in--solo { grid-template-columns: minmax(0, 1fr); }
  .phead__fig img { transform: rotate(1.2deg); }
}

/* Service pages */
.intro { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.covers { display: grid; }
.covers li { padding: 18px 0; border-top: var(--line) solid var(--ink); display: grid; gap: 6px; }
.covers li:last-child { border-bottom: 1px solid var(--rule-soft); }
.covers h3 { font: 400 1.65rem/1 var(--gothic); text-transform: uppercase; letter-spacing: .01em; }
.covers p { color: var(--ink-2); font-size: 1rem; }
@media (min-width: 900px) { .intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.sched__dek { padding: 18px 20px 4px; color: var(--ink-2); max-width: 70ch; }
.sched__table thead th { padding-inline: 20px; }
.sched__table tbody th, .sched__table td { padding: 16px 20px; border-top: 1px solid var(--rule-soft); text-align: left; vertical-align: top; }
.sched__table tbody tr:first-child > * { border-top: 0; }
.sched__table tbody th { font-weight: 700; width: 34%; font-size: 1.04rem; }
.sched__table td { color: var(--ink-2); }
/* A service ticket can link straight to its row (/other-services/#yard-services). */
.sched__table tbody tr:target { background: var(--hover-red); }
@media (max-width: 699px) {
  .sched__table thead { display: none; }
  .sched__table, .sched__table tbody, .sched__table tr, .sched__table th, .sched__table td { display: block; width: auto !important; }
  .sched__table tbody tr { padding: 14px 18px; border-top: 1px solid var(--rule-soft); }
  .sched__table tbody tr:first-child { border-top: 0; }
  .sched__table tbody th, .sched__table td { padding: 0; border: 0; }
  .sched__table td { margin-top: 4px; }
}

.agreement__list { counter-reset: clause; }
.agreement__list li { counter-increment: clause; display: grid; gap: 6px 32px; padding: 22px 20px; border-top: 1px solid var(--rule-soft); }
.agreement__list li:first-child { border-top: 0; }
.agreement__list h3 { font: 400 1.6rem/1 var(--gothic); text-transform: uppercase; display: flex; gap: 12px; align-items: baseline; }
.agreement__list h3::before { content: counter(clause) "."; color: var(--ink-2); font-size: .8em; }
.agreement__list p { color: var(--ink-2); max-width: 68ch; }
.agreement__list--plain h3::before { content: none; }
.how { display: grid; gap: clamp(20px, 3vw, 32px); align-items: start; }
@media (min-width: 900px) {
  .how { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .how .agreement__list li { grid-template-columns: 1fr; padding: 22px 26px; align-content: start; }
  .how .agreement__list--plain { display: grid; grid-template-columns: 1fr 1fr; }
  .how .agreement__list--plain li { border-top: 1px solid var(--rule-soft); }
  .how .agreement__list--plain li:nth-child(odd) { border-right: 1px solid var(--rule-soft); }
  .how .agreement__list--plain li:nth-child(-n+2) { border-top: 0; }
}
@media (min-width: 900px) { .agreement__list li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding: 26px 28px; } }

.closer { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.closer__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--line) solid var(--ink); border-radius: var(--radius); }
@media (min-width: 900px) { .closer--fig { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
@media (min-width: 1000px) { .more-svc .ticket__name { font-size: 1.75rem; } .more-svc .ticket__card { --stub: 56px; } }

/* About */
.values { display: grid; gap: clamp(28px, 4vw, 56px); }
.values__list { display: grid; }
.values__list > div { padding: 18px 0; border-top: var(--line) solid var(--ink); display: grid; gap: 6px; }
.values__list dt { font: 400 1.7rem/1 var(--gothic); text-transform: uppercase; }
.values__list dd { color: var(--ink-2); }
@media (min-width: 900px) { .values { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }

/* Crew roster: a pyramid (client request, 2026-11-13), kept casual (2026-11-13,
   second pass): no org-chart lines, no stamps, no printed gothic. The founder
   alone on top in the biggest card, the two family members who run the
   business under him, the crew below. Size alone makes the pyramid. Each
   person is a snapshot: photo to the edges, a soft hairline and shadow, names
   in sentence case. */
.roster__body { display: grid; justify-items: center; gap: clamp(20px, 3vw, 32px); }
.roster__join { margin-top: clamp(28px, 4vw, 40px); text-align: center; font-size: 1.15rem; }
.roster__tier { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; }
.crew { background: var(--label); border: 1px solid var(--rule-soft); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 21, 24, .06), 0 14px 26px -18px rgba(20, 21, 24, .4); display: grid; align-content: start; }
.crew__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.crew__txt { padding: 12px 14px 16px; display: grid; gap: 2px; }
.crew__name { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.crew__role, .crew__since { color: var(--ink-2); font-size: .88rem; line-height: 1.4; }
.crew__since { margin-top: 6px; }
.crew__bio { color: var(--ink-2); font-size: 1rem; margin-top: 12px; max-width: 52ch; }

/* Tier 1: the founder, the biggest card. */
.roster__tier--1 .crew { width: min(100%, 700px); }
.roster__tier--1 .crew__img { aspect-ratio: 4 / 3; object-position: 50% 35%; }   /* faces sit 40% down the square */
.roster__tier--1 .crew__txt { padding: 20px 22px 24px; }
.roster__tier--1 .crew__name { font-weight: 750; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.15; letter-spacing: -.01em; }
.roster__tier--1 .crew__role { font-size: 1.05rem; font-weight: 600; color: var(--ink); }

/* Tier 2: the family. */
.roster__tier--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); justify-content: center; }
.roster__tier--2 .crew__txt { padding: 14px 16px 18px; }
.roster__tier--2 .crew__name { font-size: 1.2rem; }
.roster__tier--2 .crew__role { font-size: .95rem; }

/* Tier 3: everyone else, centred so a short last line stays under the middle. */
.roster__tier--3 .crew { width: calc(50% - 8px); }
@media (min-width: 620px) {
  .roster__tier--1 .crew { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .roster__tier--1 .crew__img { aspect-ratio: auto; height: 100%; }
  .roster__tier--1 .crew__txt { padding: 26px 28px 28px; align-content: center; }
  .roster__tier--3 .crew { width: 172px; }
}
/* Wide: the crew sits on one line. */
@media (min-width: 1100px) {
  .roster__tier--3 { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .roster__tier--3 .crew { width: auto; }
}

/* Office pages */
.office { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
.facts > div { display: grid; grid-template-columns: 9ch 1fr; gap: 12px; align-items: baseline; padding: 14px 20px; border-top: 1px solid var(--rule-soft); }
.facts > div:first-child { border-top: 0; }
.facts dt { font: 600 .74rem/1.3 var(--franklin); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.facts dd { margin: 0; }
.facts__tel { font-weight: 750; font-size: 1.5rem; color: var(--red-ink); text-decoration: none; }
.facts__tel:hover { text-decoration: underline; }
.facts__map { color: var(--red-ink); font-weight: 700; font-size: .95rem; }
.office__local { padding-top: 6px; }
@media (min-width: 900px) { .office { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* Common questions (service pages, once the client answers) */
.faq__list > div { padding: 18px 20px; border-top: 1px solid var(--rule-soft); }
.faq__list > div:first-child { border-top: 0; }
.faq__list dt { font-weight: 700; font-size: 1.08rem; }
.faq__list dd { margin: 6px 0 0; color: var(--ink-2); max-width: 70ch; }

/* Contact */
.contact { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact__side { display: grid; gap: 14px; }
.contact__side .sec__h + p { color: var(--ink-2); margin-bottom: 18px; }
.contact__side .route { grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.ticketform__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.field { display: grid; gap: 6px; padding: 14px 20px; border-top: 1px solid var(--rule-soft); }
.field:first-child { border-top: 0; }
.field > label, .field__label { font: 600 .74rem/1.3 var(--franklin); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
/* Home or business: two choices, the picked one written in ballpoint. */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 2px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: grid; gap: 1px; min-height: 52px; align-content: center; padding: 7px 12px 7px 38px; border: var(--line) solid var(--ink); border-radius: 8px; font-weight: 650; font-size: 1.05rem; line-height: 1.2; position: relative; }
.choice small { font-weight: 500; font-size: .8rem; color: var(--ink-2); }
.choice span::before { content: ""; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: var(--line) solid var(--ink); border-radius: 50%; }
.choice:hover span { background: var(--hover-red); }
.choice input:checked + span { border-color: var(--ball); color: var(--ball); box-shadow: inset 0 0 0 1px var(--ball); }
.choice input:checked + span::before { border-color: var(--ball); background: radial-gradient(circle, var(--ball) 0 4px, transparent 4.5px); }
.choice input:focus-visible + span { outline: 3px solid var(--ball); outline-offset: 3px; }
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 500; }
.field input, .field select, .field textarea { font: 500 1.12rem/1.4 var(--franklin); color: var(--ball); background: transparent; border: 0; border-bottom: var(--line) solid var(--ink); border-radius: 0; padding: 8px 2px; min-height: 46px; width: 100%; }
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161412' stroke-width='1.8'/%3E%3C/svg%3E") right 4px center / 12px 8px no-repeat; padding-right: 24px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ball); box-shadow: 0 2px 0 var(--ball); }
.field [aria-invalid="true"] { border-bottom-color: var(--red-ink); box-shadow: 0 2px 0 var(--red-ink); }
.field__hint { font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.field__hint--error { color: var(--red-ink); font-weight: 600; }
/* The resume picker (/work-with-us/): no baseline, the button is the control.
   The chosen file's name is the visitor's, so it turns ballpoint (site.js sets .is-set). */
.field input[type="file"] { border-bottom: 0; padding: 2px 0 0; min-height: 0; font: 500 .98rem/1.4 var(--franklin); color: var(--ink-2); cursor: pointer; max-width: 100%; }
.field input[type="file"].is-set { color: var(--ball); }
.field input[type="file"]::file-selector-button { font: 650 1rem/1 var(--franklin); color: var(--ink); background: var(--label); border: var(--line) solid var(--ink); border-radius: 8px; min-height: 46px; padding: 0 16px; margin-right: 14px; cursor: pointer; transition: background .2s; }
.field input[type="file"]:hover::file-selector-button { background: var(--hover-red); }
.field input[type="file"]:focus { box-shadow: none; }
.field input[type="file"]:focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; border-radius: 8px; }
.field input[type="file"][aria-invalid="true"] { box-shadow: none; }
.field input[type="file"][aria-invalid="true"]::file-selector-button { border-color: var(--red-ink); color: var(--red-ink); }
.hp { position: absolute; left: -9999px; }
.ticketform { position: relative; }
.ticketform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 20px; border-top: 1px dashed var(--ink); }
.ticketform__note { color: var(--ink-2); font-size: .92rem; flex: 1 1 260px; }
.ticketform__status:empty { display: none; }
.ticketform__status { margin: 0 20px 20px; padding: 12px 14px; border-radius: 8px; border: var(--line) solid currentColor; font-weight: 600; }
.ticketform__status[data-kind="error"] { color: var(--red-ink); background: var(--hover-red); }
.ticketform__status[data-kind="ok"], .ticketform__status[data-kind="info"] { color: var(--ball); background: #F1F4FB; }
@media (min-width: 700px) {
  .ticketform__grid { grid-template-columns: 1fr 1fr; }
  .field:nth-child(2) { border-top: 0; border-left: 1px solid var(--rule-soft); }
  .field:nth-child(4), .field:nth-child(6) { border-left: 1px solid var(--rule-soft); }
  .field--wide { grid-column: 1 / -1; }
  .ticketform__grid .field--wide { border-left: 0; }
  .field--choice.field--wide .choices { max-width: 520px; }
}

.btn { font: 700 1.05rem/1 var(--franklin); background: var(--red); color: #fff; border: 0; border-radius: 8px; padding: 15px 24px; min-height: 50px; cursor: pointer; box-shadow: 0 1px 0 var(--red-deep), 0 10px 18px -10px rgba(120, 0, 0, .7); transition: background .2s, transform .2s var(--ease-out); }
.btn:hover { background: var(--red-deep); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--ink-2); cursor: progress; box-shadow: none; }

/* Reading (privacy) */
.reading__label { max-width: 860px; margin: 0 auto; }
.reading__body { padding: 28px clamp(20px, 4vw, 44px) 36px; max-width: none; }
.reading__body > * { max-width: 66ch; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { background: var(--ink); color: #E4E6EA; font-size: .98rem; }
.close + .footer, main:has(> .close:last-child) + .footer { margin-top: 0; }
main > :last-child:not(.close) { margin-bottom: clamp(56px, 8vw, 104px); }
.footer ::selection { background: #fff; color: var(--ink); }
.footer :focus-visible { outline-color: #fff; }
.footer__in { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) 28px; display: grid; gap: 32px; }
.footer__motto { font: 400 2.2rem/.95 var(--gothic); text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.footer__id p + p { color: #B8BCC3; max-width: 40ch; }
.footer__lic { font-size: .85rem; letter-spacing: .04em; }
.footer__h { font: 600 .74rem/1.3 var(--franklin); text-transform: uppercase; letter-spacing: .12em; color: #A3A8B0; margin-bottom: 12px; }
.footer__phones { list-style: none; padding: 0; margin: 0; }
.footer__phones li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #33363B; }
.footer__phones a { color: #fff; font-weight: 700; text-decoration: none; }
.footer__phones a.footer__office { font-weight: 400; color: #E4E6EA; text-decoration: underline; text-decoration-color: #5A5E66; }
.footer__phones a:hover, .footer__links a:hover { text-decoration: underline; }
.footer p + p { margin-top: 10px; }
.footer a { color: #fff; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer__links a { text-decoration: none; }
.footer__legal { max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gutter) 28px; border-top: 1px solid #33363B; color: #A3A8B0; font-size: .85rem; }
@media (min-width: 800px) { .footer__in { grid-template-columns: 1.4fr 1fr 1fr .8fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}