/* HanDI: Your Digital Handyman
   Tokens and layout per the approved design handoff. */

/* Self-hosted variable fonts (latin subset), no third-party request on load. */
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('assets/fonts/familjen-grotesk.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/hanken-grotesk.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --amber: #E9B44C;
  --amber-deep: #B27F1C;
  --amber-deeper: #8F6410;  /* AA-safe amber on Paper (4.66:1) */
  --amber-hover: #DCA53A;      /* amber darkened ~8% for hover */
  --ink: #23272E;
  --ink-2: #1C2026;
  --paper: #F4F1EC;
  --white: #FFFFFF;
  --steel-dark: #8E9299;       /* secondary text on dark */
  --steel-light: #5A5E66;      /* secondary text on light */
  --nav-link: #C9CCD2;
  --border: #E3DED4;

  --display: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1160px;
  --gutter: 56px;
  --nav-h: 90px;
  --ease: 170ms ease;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--amber-deeper); }
a:hover { color: var(--ink); }

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 3px solid var(--amber-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Type ---------- */

.eyebrow {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--amber-deeper);   /* #B27F1C is only 3.13:1 at 13px, fails AA */
}

.h1__accent { color: var(--amber-deep); }

.h1 {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin-top: 16px;
}

.h2 {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
}

.h2--invert { font-size: 38px; color: var(--paper); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  transition: background-color var(--ease), color var(--ease), transform var(--ease), border-color var(--ease);
}

.btn--primary {
  background: var(--amber);
  color: var(--ink);
  font-size: 17px;
  padding: 16px 32px;
}
.btn--primary:hover { background: var(--amber-hover); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.btn--lg { font-size: 18px; padding: 16px 40px; }

.btn--outline {
  border: 2px solid var(--ink);
  color: var(--ink);
  font-size: 17px;
  padding: 14px 30px;
}
.btn--outline:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }

.btn--pill {
  background: var(--amber);
  color: var(--ink);
  font-size: 15px;
  padding: 11px 22px;
  border-radius: 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.btn--pill:hover { background: var(--amber-hover); }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__logo { display: block; line-height: 0; }
.nav__lockup { width: 196px; height: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__link {
  color: var(--nav-link);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--ease);
}
.nav__link:hover { color: var(--amber); }

.nav__toggle {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(244,241,236,0.22);
  border-radius: 10px;
  cursor: pointer;
}
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; }
.nav__bars::before { transform: translateY(-6px); }
.nav__bars::after { transform: translateY(6px); }
body.nav-open .nav__bars { background: transparent; }
body.nav-open .nav__bars::before { transform: rotate(45deg); }
body.nav-open .nav__bars::after { transform: rotate(-45deg); }

.mobilebar { display: none; }

/* ---------- Hero (full-bleed) ---------- */

.hero-band {
  position: relative;
  overflow: hidden;
  min-height: 580px;
  display: flex;
  align-items: center;
  padding: 72px var(--gutter);
  background: var(--paper);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
  z-index: 0;
}

/* scrim keeps the copy on solid Paper no matter how the art crops */
.hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
      var(--paper) 0%,
      var(--paper) 28%,
      rgba(244,241,236,0.88) 44%,
      rgba(244,241,236,0) 64%);
}

.hero {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__copy { max-width: 560px; }

.hero__lede {
  font-size: 18px;
  color: var(--steel-light);
  max-width: 480px;
  margin: 24px 0 36px;
}

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.trust__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
}
.trust__item strong { color: var(--amber-deeper); }

.trust {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
  color: var(--steel-light);
  font-size: 13px;
  font-weight: 600;
}

/* dark hero, matches the shared-link social card */

.hero-band--dark { background: var(--ink); }

/* The hero art now spans the full width, so the scrim is translucent rather than
   solid: it holds ~0.80 across the whole text column (which ends at 58%) and only
   then fades, because the worst contrast was never on the left, it was at the RIGHT
   end of the copy where the old scrim had already faded out. Measured against the
   real artwork: paper 7.0:1, secondary text 4.9:1, both clearing WCAG AA. */
.hero-band--dark::after {
  background: linear-gradient(90deg,
      rgba(35,39,46,0.82) 0%,
      rgba(35,39,46,0.80) 58%,
      rgba(35,39,46,0) 76%);
}

.hero-band--dark .eyebrow { color: var(--amber); }
.hero-band--dark .h1 { color: var(--paper); }
.hero-band--dark .h1__accent { color: var(--amber); }
.hero-band--dark .hero__lede { color: var(--nav-link); }

.hero-band--dark .btn--outline {
  border-color: var(--paper);
  color: var(--paper);
}
.hero-band--dark .btn--outline:hover {
  background: var(--paper);
  color: var(--ink);
}

.hero-band--dark .trust { color: var(--steel-dark); }
.hero-band--dark .trust__item {
  background: rgba(244,241,236,0.06);
  border-color: rgba(244,241,236,0.18);
  color: var(--nav-link);
}
.hero-band--dark .trust__item strong { color: var(--amber); }
.hero-band--dark .trust__item a { color: var(--amber); }

/* the "what do you need done?" search, now inside the dark hero */

.sg__title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 34px;
}
.sg--hero { max-width: none; margin-top: 16px; }
.hero__search { margin-top: 34px; width: 100%; }

.hero-band--dark .sg__title { color: var(--paper); }
/* keeps a readable measure even though the search bar beside it runs full width */
.sg__lede { max-width: 640px; font-size: 17px; margin-top: 10px; }
.hero-band--dark .sg__lede { color: var(--nav-link); }
.hero-band--dark .lede__empathy { color: var(--paper); }
.hero-band--dark .sg__hint { color: var(--nav-link); }
.hero-band--dark .chip {
  background: rgba(35,39,46,0.74);
  border-color: rgba(244,241,236,0.24);
  color: var(--paper);
}
.hero-band--dark .chip:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}
.hero-band--dark .sg__browse a { color: var(--amber); }

@media (min-width: 901px) {
  /* ---------- Homepage: hero art runs to the top, behind the nav ---------- */
  /* The nav is a sticky bar in normal flow, so the hero is pulled up by exactly
     its height and given that height back as padding. Scoped to .home because the
     interior pages share this nav but have no hero for it to sit over. */

  .home .hero-band {
    margin-top: calc(-1 * var(--nav-h));
    padding-top: calc(var(--nav-h) + 72px);
  }
  /* The hero sits under a full-bleed nav, so its content lines up with the logo
     rather than with the centred 1160px measure the content bands use.
     .hero__copy keeps its own max-width, so line length is still readable. */
  .home .hero { max-width: none; margin-left: 0; margin-right: 0; }
  .home .nav {
    background: transparent;
    transition: background var(--ease);
  }
  /* Keeps the nav links legible where they cross the artwork. Sits behind the
     links but in front of the hero, since .nav's z-index makes a stacking context. */
  .home .nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(35,39,46,0.95) 0%,
        rgba(35,39,46,0.74) 55%,
        rgba(35,39,46,0) 100%);
    transition: opacity var(--ease);
  }
  /* Past the hero the nav sits over white bands, so it goes solid. */
  .home .nav--solid { background: var(--ink); }
  .home .nav--solid::before { opacity: 0; }
  /* The open mobile menu needs a solid backdrop whatever is behind it. */
  .home body.nav-open .nav,
  body.nav-open .home .nav,
  .home .nav.is-open { background: var(--ink); }
}

/* ---------- Bands ---------- */

.band { padding: 80px var(--gutter); }

.band--white {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.wrap { max-width: var(--wrap); margin: 0 auto; }

[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- Cards ---------- */

.grid { display: grid; gap: 20px; margin-top: 36px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  border-radius: 14px;
  padding: 28px;
  transition: transform var(--ease), box-shadow var(--ease);
}

.card--paper { background: var(--paper); }

.card--outlined {
  background: var(--white);
  border: 1px solid var(--border);
}

.card__num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--amber-deep);
  margin-bottom: 8px;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--white);
  margin-bottom: 16px;
}
.card__icon svg { fill: var(--amber-deeper); }
.card--paper .card__icon { background: var(--white); }

.card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}

.card__body {
  color: var(--steel-light);
  font-size: 14px;
  line-height: 1.7;
  margin-top: 10px;
}

.card--outlined .card__body { margin-top: 8px; }

.h3--tight { margin-top: 34px; font-size: 18px; letter-spacing: 0.3px; }
.linklist--tight li { font-size: 14px; padding: 6px 0; }
.band__more { margin-top: 30px; }
.btn--sm { font-size: 15px; padding: 12px 24px; }

/* ---------- US tile map ---------- */

.usmap { margin: 34px 0 8px; max-width: 720px; }
.usmap svg { width: 100%; height: auto; overflow: visible; }

.usmap__tile {
  cursor: pointer;
  animation: tileIn 480ms cubic-bezier(.2,.7,.3,1) both;
  animation-delay: var(--d, 0ms);
}
.usmap__tile rect {
  fill: var(--white);
  stroke: var(--border);
  stroke-width: 1.5;
  transition: fill 160ms ease, stroke 160ms ease;
}
.usmap__tile text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  fill: var(--steel-light);
  transition: fill 160ms ease;
  pointer-events: none;
}
.usmap__tile:hover rect,
.usmap__tile:focus-visible rect {
  fill: var(--amber);
  stroke: var(--amber-deep);
}
.usmap__tile:hover text,
.usmap__tile:focus-visible text { fill: var(--ink); }
.usmap__tile:focus-visible { outline: none; }
.usmap__tile:focus-visible rect { stroke: var(--ink); stroke-width: 3; }

@keyframes tileIn {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

.usmap__hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--steel-light);
}

@media (max-width: 640px) {
  .usmap { margin: 24px 0 4px; max-width: none; }
  .usmap__tile text { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .usmap__tile { animation: none; }
}

/* ---------- Practical-use search, audits, directory ---------- */

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

.wrap--mid { max-width: 900px; }

.modes { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; }
.modes span {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(233,180,76,0.4);
  border-radius: 999px;
  padding: 5px 12px;
}

/* --- search --- */
.band--ask { background: var(--white); border-bottom: 1px solid var(--border); }

.sg { position: relative; margin-top: 28px; }

.sg__box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 0 18px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.sg__box:focus-within {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(233,180,76,0.22);
}
.sg__icon { color: var(--steel-light); flex: none; }

.sg__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--body);
  font-size: 18px;
  color: var(--ink);
  padding: 20px 0;
  min-width: 0;
}
.sg__input:focus { outline: none; }
.sg__input::placeholder { color: #7f838a; }

.sg__list {
  position: absolute;
  z-index: 40;
  left: 0; right: 0;
  top: calc(100% + 8px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(35,39,46,0.16);
  padding: 6px;
  max-height: 62vh;
  overflow-y: auto;
}
.sg__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  min-height: 46px;
}
.sg__opt.is-active, .sg__opt:hover { background: var(--paper); }
.sg__label { color: var(--ink); }
.sg__cat {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--steel-light);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sg__opt--all {
  justify-content: flex-start;
  font-weight: 700;
  font-family: var(--display);
  color: var(--amber-deeper);
  border-top: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  margin-top: 4px;
}

.sg__hint {
  margin-top: 26px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--steel-light);
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.chip {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.chip:hover { background: var(--amber); border-color: var(--amber); transform: translateY(-1px); }

/* --- flexible card grid --- */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

/* --- ink band (audits) --- */
.band--ink { background: var(--ink); }
.band--ink .h2--invert { margin-top: 6px; }
.band--ink .eyebrow { color: var(--amber); }
.band--ink .band__lede, .band--ink .band__lede--invert { color: var(--nav-link); }

.card--ink {
  background: rgba(244,241,236,0.05);
  border: 1px solid rgba(244,241,236,0.16);
  display: flex;
  flex-direction: column;
}
.card--ink .card__title { color: var(--paper); }
.card--ink .card__body { color: var(--nav-link); }
.card__cta {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--amber);
  text-decoration: none;
}
.card__cta:hover { color: var(--paper); text-decoration: underline; }

.btn--ghost { border: 2px solid rgba(244,241,236,0.35); color: var(--paper); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }

.smallprint {
  margin-top: 26px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--steel-dark);
  max-width: 720px;
}
.band .smallprint, .band--white .smallprint { color: var(--steel-light); }
.band--ink .smallprint { color: var(--steel-dark); }

/* --- directory --- */
.dir__tools { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.dir__filter {
  flex: 1 1 280px;
  font-family: var(--body);
  font-size: 16px;
  padding: 13px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  min-height: 48px;
}
.dir__filter:focus { outline: none; border-color: var(--amber); }
.dir__note { margin-top: 14px; font-size: 14px; color: var(--steel-light); }

.dir { margin-top: 22px; columns: 2; column-gap: 24px; }
.dir__cat {
  break-inside: avoid;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--paper);
}
.dir__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  min-height: 52px;
}
.dir__sum::-webkit-details-marker { display: none; }
.dir__sum::after {
  content: "+";
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--amber-deeper);
  flex: none;
}
.dir__cat[open] > .dir__sum::after { content: "\2212"; }
.dir__name { font-family: var(--display); font-weight: 700; font-size: 16px; }
.dir__count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--steel-light); }
.dir__list { padding: 0 18px 4px; }
.dir__item { border-top: 1px solid var(--border); }
.dir__job {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
  padding: 11px 0;
  cursor: pointer;
  min-height: 44px;
}
.dir__job:hover { color: var(--amber-deeper); }
.dir__more { padding: 10px 18px 16px; font-size: 13px; }

/* --- picked job --- */
.picked {
  background: rgba(233,180,76,0.12);
  border: 1px solid rgba(233,180,76,0.4);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 34px;
  text-align: center;
}
.picked__kicker {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber);
}
.picked__label {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--paper);
  margin: 8px 0 18px;
}

/* --- audit page lists --- */
.ticks, .crosses { margin-top: 16px; }
.ticks li, .crosses li {
  position: relative;
  padding: 7px 0 7px 30px;
  font-size: 16px;
  color: var(--steel-light);
  line-height: 1.55;
}
.ticks li::before {
  content: "";
  position: absolute; left: 2px; top: 15px;
  width: 12px; height: 7px;
  border-left: 2.5px solid var(--amber-deeper);
  border-bottom: 2.5px solid var(--amber-deeper);
  transform: rotate(-45deg);
}
.ticks--plain li::before { display: none; }
.ticks--plain li { padding-left: 0; }
.ticks--plain strong { color: var(--ink); font-weight: 600; }
.crosses li::before {
  content: "\00d7";
  position: absolute; left: 4px; top: 5px;
  font-size: 18px; font-weight: 700; color: #8b8f96;
}

@media (max-width: 900px) {
  .dir { columns: 1; }
  .sg__input { font-size: 17px; padding: 17px 0; }
}
@media (max-width: 640px) {
  .sg__input { font-size: 16px; }
  .sg__cat { display: none; }
  .modes span { font-size: 11px; padding: 4px 10px; }
  .picked__label { font-size: 19px; }
}

/* ---------- Suggestion + directory rows with icon and description ---------- */

.sg__opt {
  align-items: flex-start;
  gap: 14px;
  padding: 13px 14px;
}
.sg__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--paper);
  color: var(--amber-deeper);
}
.sg__text { flex: 1; min-width: 0; }
.sg__label { display: block; color: var(--ink); font-weight: 600; line-height: 1.35; }
.sg__desc {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--steel-light);
}
.sg__cat { align-self: center; }

.sg__opt--all { align-items: center; }
.sg__opt--all .sg__ico { display: none; }

.sg__browse { margin-top: 18px; font-size: 15px; font-weight: 600; }

/* directory */
.dir__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--white);
  color: var(--amber-deeper);
}
.dir__name { flex: 1; }

.dir__job {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
}
.dir__jobico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--white);
  color: var(--amber-deeper);
}
.dir__jobico svg { width: 18px; height: 18px; }
.dir__jobtext { flex: 1; min-width: 0; }
.dir__joblabel { display: block; font-weight: 600; line-height: 1.4; }
.dir__jobdesc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--steel-light);
}
.dir__job:hover .dir__joblabel { color: var(--amber-deeper); }
.dir__job:hover .dir__jobico { background: var(--amber); color: var(--ink); }

.picked__desc {
  color: var(--nav-link);
  font-size: 15px;
  line-height: 1.5;
  margin: -8px 0 18px;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .sg__ico { width: 32px; height: 32px; }
  .sg__ico svg { width: 18px; height: 18px; }
  .sg__desc { font-size: 13px; }
}

.lede__empathy { color: var(--ink); font-weight: 700; }

/* ---------- Estimates on jobs ---------- */

.est {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 74px;
  margin-left: 4px;
}
.est__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.1;
}
.est__hours {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--steel-light);
  white-space: nowrap;
}

.sg__opt .est { align-self: center; }
.dir__job .est { align-self: center; }
.dir__job:hover .est__price { color: var(--amber-deeper); }

.picked__est {
  color: var(--nav-link);
  font-size: 14px;
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 auto 20px;
}
.picked__est strong { color: var(--amber); font-size: 17px; }

.steps--pricing li { font-size: 16.5px; padding-bottom: 14px; }

@media (max-width: 640px) {
  .est { min-width: 0; }
  .est__price { font-size: 14px; }
  .est__hours { font-size: 11px; }
}

.picked__note {
  color: var(--paper);
  background: rgba(233,180,76,0.16);
  border: 1px solid rgba(233,180,76,0.45);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 14px;
  margin: 0 auto 16px;
  max-width: 52ch;
}

/* ---------- Promo banner, ways to pay, coupon ---------- */

.promo {
  background: var(--ink);
  border-radius: 16px;
  padding: 30px 32px;
  margin-bottom: 44px;
}
.promo__tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--amber);
  border-radius: 999px;
  padding: 5px 12px;
}
.promo__h {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  color: var(--paper);
  margin-top: 14px;
  line-height: 1.15;
}
.promo__h span { color: var(--amber); }
.promo__body {
  color: var(--nav-link);
  font-size: 16.5px;
  line-height: 1.6;
  margin-top: 12px;
  max-width: 62ch;
}
.promo__body strong { color: var(--amber); }
.promo__terms {
  color: var(--steel-dark);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 14px;
  max-width: 62ch;
}

/* ways to pay */
.ways { margin-top: 30px; }
.way { display: flex; flex-direction: column; }
.way__kind {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--steel-light);
}
.way__rate {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 8px;
}
.way__rate span { font-size: 15px; font-weight: 600; color: var(--steel-light); }
.way__rate s {
  font-size: 20px;
  color: var(--steel-light);
  text-decoration-thickness: 2px;
  margin-right: 6px;
}
.way--promo { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(233,180,76,0.16); }
.way--promo .way__rate { color: var(--amber-deeper); }
.way__note {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--amber-deeper);
}

.tiers { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.tier {
  flex: 1 1 auto;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  background: var(--paper);
}
.tier__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.tier__mo { display: block; font-size: 13px; font-weight: 600; color: var(--steel-light); }
.tier__mo span { font-size: 11px; }

/* struck-through job prices */
.est--promo .est__was {
  display: block;
  font-size: 11.5px;
  color: var(--steel-light);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  line-height: 1.1;
}
.est--promo .est__price { color: var(--amber-deeper); }

.picked__est s { color: var(--steel-dark); text-decoration-thickness: 2px; }

/* coupon */
.coupon {
  margin-top: 34px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  max-width: 520px;
}
.coupon__label {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--steel-light);
  margin-bottom: 10px;
}
.coupon__row { display: flex; gap: 10px; flex-wrap: wrap; }
.coupon__input {
  flex: 1 1 220px;
  font-family: var(--body);
  font-size: 16px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  min-height: 48px;
  text-transform: uppercase;
}
.coupon__input:focus { outline: none; border-color: var(--amber); }
.coupon__msg { margin-top: 10px; font-size: 14px; color: var(--steel-light); min-height: 1.2em; }
.coupon__msg--ok { color: var(--amber-deeper); font-weight: 600; }

@media (max-width: 640px) {
  .promo { padding: 24px 20px; }
  .promo__h { font-size: 24px; }
  .way__rate { font-size: 30px; }
}

.buy { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 22px; }
.buy__card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.buy__kind {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--steel-light);
}
.buy__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.buy__select {
  font-family: var(--body);
  font-size: 16px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  min-height: 48px;
}
.buy__select:focus { outline: none; border-color: var(--amber); }
.buy__total { font-size: 15px; color: var(--steel-light); line-height: 1.5; }
.buy__total strong { font-family: var(--display); font-size: 22px; color: var(--ink); }
.buy__total s { color: var(--steel-light); text-decoration-thickness: 2px; }
.buy__card .btn { align-self: flex-start; margin-top: auto; }
.buy__pending {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--steel-light);
  background: var(--paper);
  border-left: 3px solid var(--amber);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  max-width: 70ch;
}
.way__cta { margin-top: auto; padding-top: 16px; }

/* ---------- Sign-up form ---------- */

.signup { margin-top: 30px; }

.fs {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px 26px;
  margin: 0 0 20px;
  background: var(--white);
}
.fs__legend {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--amber-deeper);
  padding: 0 8px;
}
.fs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.fld { display: flex; flex-direction: column; gap: 6px; }
.fld--wide { grid-column: 1 / -1; }
.fld > span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.fld > span b { color: var(--amber-deeper); }
.fld input,
.fld select,
.fld textarea {
  font-family: var(--body);
  font-size: 16px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  min-height: 48px;
  width: 100%;
}
.fld textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.fld input:focus,
.fld select:focus,
.fld textarea:focus { outline: none; border-color: var(--amber); }
.fld input:invalid:not(:placeholder-shown) { border-color: #b4552f; }

.signup__note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--steel-light);
  max-width: 62ch;
}
.signup__msg {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--amber-deeper);
}

.footer__links { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }

.legal__date {
  font-size: 13px;
  font-weight: 600;
  color: var(--steel-light);
  margin-top: 8px;
}
.legal .h3 { margin-top: 38px; }
.legal p { font-size: 16px; line-height: 1.65; color: var(--steel-light); margin-top: 12px; }
.legal p strong { color: var(--ink); }
.legal .ticks { margin-top: 14px; }
.legal .ticks li { font-size: 16px; }

/* ---------- Recent work ---------- */

.band__lede {
  color: var(--steel-light);
  font-size: 17px;
  max-width: 620px;
  margin-top: 14px;
}

.work .card { display: flex; flex-direction: column; }

.work__kind {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber-deeper);
  background: var(--paper);
  border-radius: 999px;
  padding: 5px 11px;
  margin-bottom: 14px;
}

.work__link {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--amber-deeper);
  text-decoration: none;
  transition: color var(--ease);
}
.work__link::after { content: " →"; }
.work__link:hover { color: var(--ink); text-decoration: underline; }

.work .card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(35,39,46,0.07); }


/* ---------- Interior pages (services, locations) ---------- */

.wrap--narrow { max-width: 780px; }

.h1--sub { font-size: 44px; margin-top: 10px; }
.h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin-top: 44px;
}

.crumbs {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px var(--gutter) 0;
  font-size: 13px;
  color: var(--steel-light);
}
.crumbs a { color: var(--steel-light); text-decoration: none; }
.crumbs a:hover { color: var(--amber-deeper); text-decoration: underline; }
.crumbs__sep { padding: 0 8px; color: var(--border); }

.card__link { color: inherit; text-decoration: none; }
.card__link:hover { color: var(--amber-deeper); }
.card__meta {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--steel-light);
}

.linklist {
  margin-top: 32px;
  columns: 3;
  column-gap: 32px;
}
.linklist--cols { columns: 3; }
.linklist--inline { columns: 2; }
.linklist li {
  break-inside: avoid;
  padding: 7px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.linklist a { color: var(--ink); text-decoration: none; }
.linklist a:hover { color: var(--amber-deeper); text-decoration: underline; }
.linklist__meta { float: right; color: var(--steel-light); font-size: 13px; }

.steps { counter-reset: step; margin-top: 20px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 16px 44px;
  color: var(--steel-light);
  font-size: 16px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--amber-deeper);
}
.steps strong { color: var(--ink); }

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .linklist, .linklist--cols { columns: 2; }
}

@media (max-width: 900px) {
  :root { --gutter: 32px; --nav-h: 78px; }

  .hero-band {
    display: block;
    min-height: 0;
    padding: 0 0 52px;
  }
  .hero-band::after { display: none; }
  .hero__bg {
    position: static;
    height: 320px;
    object-position: 74% center;
  }
  .hero { padding: 30px var(--gutter) 0; }
  .hero__copy { max-width: none; }
  .hero__search { margin-top: 28px; }

  .h1 { font-size: 40px; }
  .h2 { font-size: 30px; }
  .h2--invert { font-size: 32px; }

  .grid--3 { grid-template-columns: 1fr; }
  .work.grid--3 { grid-template-columns: repeat(2, 1fr); }
  .h1--sub { font-size: 34px; }
  .linklist, .linklist--cols { columns: 2; }
  .band, .cta { padding-top: 64px; padding-bottom: 64px; }

  /* nav collapses to a real menu, every link stays reachable */
  .nav { flex-wrap: wrap; padding: 12px var(--gutter); }
  .nav__toggle { display: inline-flex; position: relative; }
  .nav__links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 4px;
  }
  body.nav-open .nav__links { display: flex; }
  .nav__links .nav__link {
    min-height: 52px;
    font-size: 16px;
    border-top: 1px solid rgba(244,241,236,0.10);
  }
  .nav__links .btn--pill {
    margin-top: 12px;
    justify-content: center;
    font-size: 16px;
    min-height: 50px;
  }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --nav-h: 68px; }

  .nav__lockup { width: 158px; }

  .hero__bg { height: 240px; object-position: 76% center; }
  .hero { padding-top: 24px; }
  .h1 { font-size: 36px; line-height: 1.05; }
  .hero__lede { font-size: 17px; margin: 18px 0 28px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 100%; text-align: center; }
  .trust { gap: 8px; margin-top: 26px; }
  .trust__item { font-size: 12px; padding: 6px 12px; }

  .grid--4, .work.grid--3 { grid-template-columns: 1fr; }
  .grid { gap: 14px; }
  .h1--sub { font-size: 28px; }
  .crumbs { font-size: 12px; padding-top: 16px; }
  .linklist, .linklist--cols, .linklist--inline { columns: 1; }
  .linklist--tight { columns: 2; }        /* state names are short, two fit */
  .linklist li { padding: 9px 0; }        /* 44px tap targets */
  .linklist__meta { font-size: 12px; }
  .card { padding: 22px; }
  .footer { justify-content: center; text-align: center; }

  /* sticky quote bar: the CTA is always one thumb away */
  .mobilebar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(35,39,46,0.97);
    border-top: 1px solid rgba(244,241,236,0.12);
  }
  .mobilebar__text {
    color: var(--nav-link);   /* #8E9299 was 4.42:1 on the bar, fails AA at 12px */
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    max-width: 40%;
  }
  .mobilebar__btn { font-size: 15px; padding: 13px 20px; }
  body { padding-bottom: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}