/* ==========================================================================
   The Roof Champion of Columbus
   style.css   Gate 1 skeleton, 2026-08-30
   One stylesheet for the whole site. No build step. No framework.
   Sections:  1 tokens  2 reset  3 type  4 layout  5 header  6 breadcrumbs
              7 blocks  8 forms  9 how-we-work  10 footer  11 utilities
   ========================================================================== */

/* 1 ---------------------------------------------------------------- tokens */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand */
  --navy:        #002554;
  --navy-deep:   #001b3e;
  --navy-line:   #1b3d6b;
  --gold:        #f5a800;
  --gold-deep:   #8a5e00;
  --ink:         #231f20;

  /* neutrals */
  --paper:       #ffffff;
  --paper-2:     #f2f5f8;
  --rule:        #d7dde6;
  --muted:       #4e5867;
  --on-navy:     #edf2f9;
  --on-navy-dim: #a6b7ce;

  /* type */
  --display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* measure and rhythm */
  --measure: 36rem;
  --shell: 1120px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 96px);
}

/* 2 ----------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus {
  left: 8px;
  top: 8px;
}

/* 3 ------------------------------------------------------------------ type */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(25px, 3.4vw, 36px); }
h3 { font-size: clamp(19px, 1.9vw, 22px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
h4 { font-size: 17px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.35; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.5;
  color: var(--muted);
}

.eyebrow {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}

.fineprint {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

ul, ol { max-width: var(--measure); padding-left: 1.25em; }
li { margin-bottom: 0.5em; }

/* 4 ---------------------------------------------------------------- layout */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--paper2 { background: var(--paper-2); }

.measure { max-width: var(--measure); }

/* 5 ---------------------------------------------------------------- header */

.masthead {
  background: var(--paper);
  border-bottom: 3px solid var(--gold);
  position: relative;
}

.masthead__row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 14px;
}

.masthead__logo { margin-right: auto; flex: none; }
.masthead__logo img { flex: none; }
.masthead__logo img { height: 52px; width: auto; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

.tel-btn {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
}
.tel-btn:hover { color: var(--ink); filter: brightness(1.06); }

.nav-toggle {
  display: none;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 3px;
  padding: 10px 14px;
  cursor: pointer;
}

/* 2026-09-03. The band between the toggle breakpoint and a wide desktop was
   still overflowing by a few pixels, and chasing the breakpoint number upward
   just moves the problem: at 1241 it was 13px over, at 1201 it was 33px over.
   The real fix is to make the desktop nav ask for less room in that band rather
   than to hand laptops the mobile menu. A 1280px laptop should keep the full
   nav. Tightening the gap by 10px across six gaps buys 60px, which is more than
   the worst overflow measured. */
@media (max-width: 1440px) {
  .nav { gap: 16px; }
  .nav a { font-size: 12.5px; letter-spacing: 0.07em; }
  .tel-btn { padding: 10px 12px; }
}

/* 2026-09-03. RAISED FROM 1000px TO 1200px, and this was a live bug on every
   page of the site.

   The desktop masthead needs about 1190px to fit: logo, seven nav items at 811px,
   and the 159px phone button. The mobile toggle only appeared below 1000px. So
   between 1001px and roughly 1190px the phone button ran off the right edge and
   THE WHOLE PAGE SCROLLED SIDEWAYS. Measured at a 1021px viewport: document
   scrollWidth 1187 against a 1021 viewport, and the only offending element was
   .tel-btn ending at x=1187.

   That band is iPads in landscape, small laptops, and any browser window that is
   not maximised. Nobody caught it because the site had only ever been looked at
   full-screen on a desktop. Found while checking whether the new contact form
   embed caused an overflow. It did not. This did.

   1200 was tried first and was still 33px short at a 1201px viewport, so the
   real requirement is about 1234px, not the 1190 the first measurement implied.
   1240 gives a little slack. VERIFY WITH A WIDTH SWEEP AFTER ANY MASTHEAD
   CHANGE: adding one nav item will break this again, silently, and it breaks
   every page at once. */
@media (max-width: 1240px) {
  .masthead__logo img { height: 42px; }
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 3px solid var(--gold);
    box-shadow: 0 14px 30px rgba(0, 37, 84, 0.14);
    padding: 8px var(--gutter) 20px;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
  }
  .nav a:hover,
  .nav a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--gold-deep); }
}

@media (max-width: 560px) {
  .masthead__row { gap: 12px; }
  .masthead__logo img { height: 36px; }
  .nav-toggle { font-size: 11px; padding: 9px 11px; border-width: 2px; }
  .tel-btn { font-size: 13px; padding: 10px 12px; }
}

@media (max-width: 400px) {
  .masthead__row { gap: 9px; }
  .masthead__logo img { height: 32px; }
  .tel-btn { font-size: 12.5px; padding: 9px 10px; letter-spacing: 0; }
}

/* 6 ----------------------------------------------------------- breadcrumbs */

.crumbs {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: 18px 0;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  max-width: none;
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; color: var(--rule); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* 7 ---------------------------------------------------------------- blocks */

.page-head { padding-block: clamp(36px, 5vw, 60px) 0; }

.stack > * + * { margin-top: 1.15em; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--gold);
  border-radius: 3px;
  padding: clamp(22px, 3vw, 32px);
}

.slot {
  border: 2px dashed var(--rule);
  background: var(--paper-2);
  border-radius: 3px;
  padding: clamp(22px, 3vw, 32px);
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.slot strong { display: block; color: var(--gold-deep); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; margin-bottom: 8px; }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.01em;
  padding: 15px 26px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { color: var(--ink); filter: brightness(1.06); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { color: #fff; background: var(--navy-deep); }

.contact-strip {
  background: var(--navy);
  color: var(--on-navy);
}
.contact-strip h2 { color: #fff; }
.contact-strip p { color: var(--on-navy-dim); }
.contact-strip a.big {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.contact-strip a.big:hover { color: var(--gold); }

/* 8 ----------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field textarea {
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 13px 14px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible { border-color: var(--gold); }
.field .opt { font-weight: 400; letter-spacing: 0.04em; text-transform: none; font-size: 13px; }

/* 9 ----------------------------------------------------------- price rule */
/* One rule, repeated above the footer on every page. It was four rules
   until 2026-08-31. Three of them were already said better elsewhere on
   the page above it; this is the one that is said nowhere else and the one
   that answers the complaint this market actually has, which is that the
   price moved. Claim on top, mechanism under it. */

.pricerule {
  background: var(--navy);
  color: var(--on-navy);
  /* the contact strip above is also navy. Without this seam the two bands
     read as one long field of navy. */
  border-top: 1px solid var(--navy-line);
}
.pricerule__label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.pricerule__lead {
  font-family: var(--display);
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: #fff;
  max-width: 22rem;
  margin: 0;
  text-wrap: balance;
}
.pricerule__note {
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--on-navy-dim);
  max-width: 30rem;
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--navy-line);
}

/* 10 --------------------------------------------------------------- footer */

.sitefoot {
  background: var(--navy-deep);
  color: var(--on-navy-dim);
  font-size: 15px;
  padding-block: clamp(32px, 4vw, 44px) 28px;
}
.sitefoot a { color: var(--on-navy-dim); text-decoration: none; }
.sitefoot a:hover { color: var(--gold); }

.sitefoot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--navy-line);
  list-style: none;
  margin: 0;
  padding-left: 0;
  max-width: none;
}
.sitefoot__links li { margin: 0; }
.sitefoot__links a {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-navy);
}

.sitefoot__base {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  align-items: baseline;
}
.sitefoot__creds {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
}
.sitefoot__legal { font-size: 13px; color: var(--on-navy-dim); opacity: 0.8; }

/* 11 ------------------------------------------------------------ utilities */

.center { text-align: center; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .masthead, .sitefoot, .howwework, .nav-toggle, .skip { display: none; }
  body { font-size: 12pt; }
}

/* 12 -------------------------------------------------------------- hero    */

.hero {
  position: relative;
  background: var(--navy-deep);
  overflow: hidden;
  isolation: isolate;
}
.hero picture { display: contents; }
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 18%;
  z-index: -2;
}
.hero__tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(0, 27, 62, 0.93) 0%,
    rgba(0, 27, 62, 0.88) 34%,
    rgba(0, 30, 68, 0.62) 54%,
    rgba(0, 37, 84, 0.34) 74%,
    rgba(0, 37, 84, 0.26) 100%);
}
.hero__inner {
  padding-block: clamp(56px, 7vw, 92px);
  min-height: clamp(380px, 34vw, 480px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(31px, 4.6vw, 56px);
  line-height: 1.02;
  max-width: 9.6em;
  margin-bottom: 22px;
  text-shadow: 0 2px 22px rgba(0, 20, 45, 0.45);
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p {
  color: #dce5f1;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  max-width: 30rem;
  text-shadow: 0 1px 12px rgba(0, 20, 45, 0.5);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(237, 242, 249, 0.45);
}
.btn--ghost:hover { color: var(--ink); background: #fff; border-color: #fff; }

.trustline {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--on-navy-dim);
}
.trustline span { display: flex; align-items: center; gap: 9px; }
.trustline span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

@media (max-width: 700px) {
  .hero picture { display: contents; }
.hero__img { object-position: 68% 14%; }
  .hero__tint {
    background: linear-gradient(180deg,
      rgba(0, 27, 62, 0.72) 0%,
      rgba(0, 27, 62, 0.86) 46%,
      rgba(0, 27, 62, 0.95) 100%);
  }
  .hero__inner { min-height: 0; padding-block: 56px; }
  .hero h1 { max-width: none; }
}

/* 13 --------------------------------------------------- home page blocks   */

.four-up {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  margin-top: 40px;
  border: 1px solid var(--rule);
}
@media (max-width: 720px) { .four-up { grid-template-columns: 1fr; } }
.four-up > div { background: var(--paper); padding: clamp(22px, 3vw, 30px); }
.four-up h3 { margin-bottom: 10px; }
.four-up p { color: var(--muted); font-size: 17px; }

.options {
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}
.options > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px) { .options > div { grid-template-columns: 1fr; gap: 8px; } }
.options .n {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 7px;
}
.options h3 { margin-bottom: 8px; }
.options p { color: var(--muted); }

.townlist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 28px;
  max-width: 46rem;
  padding: 0;
  list-style: none;
}
.townlist li { margin: 0; }
.townlist a {
  display: block;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 8px 15px;
}
.townlist a:hover { border-color: var(--gold); color: var(--gold-deep); }

/* 14 ------------------------------------------------------------ pullquote */

.quote {
  border-left: 4px solid var(--gold);
  padding-left: clamp(22px, 3vw, 34px);
  max-width: 42rem;
}
.quote p {
  font-size: clamp(20px, 2.1vw, 25px);
  line-height: 1.42;
  color: var(--ink);
  max-width: none;
}
.quote p + p { margin-top: 0.85em; }
.quote cite {
  display: block;
  margin-top: 22px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.punch {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  max-width: 30rem;
  margin: 0 0 1.1em;
}

/* 15 ---------------------------------------------------------- aside note */

.col-wide { max-width: 42rem; }
.col-wide p { max-width: none; }

.aside {
  margin-top: 40px;
  padding: clamp(22px, 3vw, 30px) clamp(24px, 3vw, 34px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: 0 3px 3px 0;
  max-width: 44rem;
}
.aside p { max-width: none; color: var(--muted); }
.aside p + p { margin-top: 0.9em; }

/* 16 ------------------------------------------------------- reading strip */

.readnext {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 34px;
}
@media (max-width: 760px) { .readnext { grid-template-columns: 1fr; } }
.readnext a {
  background: var(--paper);
  padding: 24px 22px;
  text-decoration: none;
  display: block;
}
.readnext a:hover { background: var(--paper-2); }
.readnext strong {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
  margin-bottom: 7px;
}
.readnext span { font-size: 15px; line-height: 1.5; color: var(--muted); }

.disqualify {
  border-top: 1px solid var(--rule);
  padding-top: 30px;
  margin-top: 8px;
}
.disqualify p {
  font-family: var(--display);
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 34rem;
}

/* 17 --------------------------------------------------- where we work map */

.wherewework {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 34px;
}
@media (max-width: 760px) { .wherewework { grid-template-columns: 1fr; } }
.wherewework > div {
  background: var(--paper);
  padding: clamp(24px, 3vw, 32px);
}
.wherewework h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
/* 2026-09-03. The county grid is gone from service-area.html, replaced by this.
   Chips that wrap. There is no cell, so there is nothing to leave empty: it
   cannot look unbalanced at any screen width or any number of towns, which is
   the failure mode Travis called out three separate times. The .wherewework
   rules below are kept only until the next full CSS pass. */
.townset {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.townset li {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.wherewework .drive {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
}
.wherewework ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.wherewework li {
  margin: 0;
  border-bottom: 1px solid var(--rule);
}
.wherewework li a,
.wherewework li span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 2px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.wherewework li a:hover { color: var(--gold-deep); }
.wherewework li a:hover em { color: var(--gold-deep); }
.wherewework li em {
  font-family: var(--body);
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-align: right;
  flex: none;
}
.wherewework li span { color: var(--muted); font-weight: 700; }

/* 18 ------------------------------------------------------- town page bits */

.townfacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 34px 0 0;
}
@media (max-width: 760px) { .townfacts { grid-template-columns: 1fr; } }
.townfacts > div {
  background: var(--paper);
  padding: 22px clamp(20px, 2.4vw, 26px);
}
.townfacts dt {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.townfacts dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.townfacts dd a { color: var(--navy); }

.jobcard {
  margin-top: 38px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.jobcard__img { display: block; width: 100%; height: auto; }
.jobcard__body { padding: clamp(24px, 3vw, 32px); }
.jobcard__meta {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.jobcard h3 { margin-bottom: 12px; }
.jobcard p { color: var(--muted); }
.jobcard p + p { margin-top: 0.85em; }

.photoslot {
  display: block;
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  padding: 46px 26px;
  text-align: center;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.sourcenote {
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 44rem;
}
.sourcenote a { color: var(--muted); }

/* 19 ------------------------------------------------------- scroll effect */
/* Light scrollytelling. No library. Approved by Travis 2026-08-31.
   Three pieces: a gold progress bar, a slow hero drift, and staggered
   reveals. Every conversion element is excluded: the header, the phone
   button, the whole hero, and the phone number in the contact strip are
   never reveal targets and are visible the instant the page paints.
   The .fx class is set by a one-line inline script in <head>, BEFORE the
   body paints, so nothing flashes visible and then hides. If that script
   never runs, .fx is absent and every rule below is inert. */

#scrollbar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 100;
  pointer-events: none;
}

.fx [data-rv] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity   .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.fx [data-rv].in {
  opacity: 1;
  transform: none;
  /* release the compositor layer once the element has landed. Leaving
     will-change on 40 elements per page is real memory on a mid phone. */
  will-change: auto;
}

/* a photograph slides in from the left instead of rising */
.fx [data-rv].fimg { transform: translateX(-30px); }
.fx [data-rv].fimg.in { transform: none; }

.fx .hero__inner { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .fx [data-rv] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  #scrollbar { display: none; }
}

/* 20 --------------------------------------------------- what happens block */

.steps {
  margin-top: 34px;
  border-top: 1px solid var(--rule);
  max-width: 46rem;
}
.steps > div {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.steps .n {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 900;
  color: var(--gold-deep);
  padding-top: 2px;
}
.steps h3 { margin-bottom: 7px; font-size: 19px; }
.steps p { color: var(--muted); max-width: none; }

/* 21 --------------------------------------------------------- founder note */

.founder {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  margin-top: 36px;
}
@media (max-width: 780px) {
  .founder { grid-template-columns: 1fr; gap: 26px; }
  .founder__img { max-width: 260px; }
}
.founder__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.founder__cap {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.founder .quote { margin: 0; border-left: none; padding-left: 0; }

/* 22 ------------------------------------------------------------ town line */

.townline {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.5;
  max-width: 40rem;
  margin-top: 22px;
}
.townline a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--rule);
}
.townline a:hover { border-bottom-color: var(--gold); }

/* 22b ------------------------------------------------------ handoff line */
/* Carries the reader across a change of register, story to practical. It sits
   in the eyebrow's slot but reads as a sentence, not a label. Rule 26. */

.handoff {
  display: block;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: var(--measure);
}

/* 23 ----------------------------------------------------------- photographs */

figure { margin: 0; }
.shot {
  margin-top: 34px;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot figcaption,
.splitshot figcaption {
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 34rem;
}

.splitshot {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  margin-top: 34px;
}
@media (max-width: 860px) {
  .splitshot { grid-template-columns: 1fr; }
  .splitshot > figure { max-width: 420px; }
}
.splitshot img { display: block; width: 100%; height: auto; }
.splitshot .four-up { margin-top: 0; grid-template-columns: 1fr; }