/* Computer Village preview — ruby is the only accent. */

:root {
  --ruby: #b9111e;
  --black: #000000;
  --white: #ffffff;
  --silver: #c0c0c0;
  --fog: #e3e4e3;
  --graphite: #5a5a5a;
  --bone: #f0f1f0;
  --charcoal: #2e2e2e;
  --ink-soft: #3a3a3a;
  --display: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  --body: "Work Sans", "Segoe UI", "Helvetica Neue", sans-serif;
  --t: 160ms;
  --ease: ease-out;
  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 2.25rem);
  --radius: 0.35rem;
  --radius-box: 0.45rem;
}

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

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

html:focus-within {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--bone);
}

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

a {
  color: inherit;
}

a:hover {
  color: var(--ruby);
}

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

.skip {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 40;
  background: var(--white);
  color: var(--black);
  padding: 0.5rem 0.85rem;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip:focus {
  top: 0.75rem;
}

/* ——— Mast (small mark in chrome) ——— */

.mast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1rem;
  padding: 0.85rem var(--gutter) 0.7rem;
}

.mast-mark {
  display: grid;
  place-items: center;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mast-mark:hover {
  color: inherit;
}

.mast-mark img {
  height: 1.85rem;
  width: 1.85rem;
  aspect-ratio: 1;
}

.mast-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  align-items: baseline;
  font-size: 0.8125rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.mast-locs {
  white-space: nowrap;
}

.mast-meta a,
.mast-link,
.mast-nav a {
  text-decoration: none;
}

.mast-meta a:hover,
.mast-link:hover,
.mast-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mast-meta .tel {
  color: var(--ruby);
  font-weight: 600;
}

.mast-link,
.mast-nav {
  margin-left: auto;
  font-size: 0.8125rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.mast-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

.nav-pipe {
  color: var(--silver);
  user-select: none;
  font-weight: 400;
}

.mast-nav a[aria-current="page"] {
  font-weight: 600;
}

.dot {
  color: var(--silver);
  user-select: none;
}

/* ——— Type ——— */

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  margin: 0 0 0.55rem;
}

h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin: 2.1rem 0 0.4rem;
}

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

.lede {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 1.35rem;
  color: var(--ink-soft);
}

.small,
.legal,
.hint {
  font-size: 0.8125rem;
  color: var(--graphite);
  line-height: 1.5;
}

/* ——— Buttons ——— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  border: 0;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
  background: var(--charcoal);
  color: var(--white);
  padding: 0.85rem 1.3rem;
  min-height: 44px;
  transition:
    background var(--t) var(--ease),
    color var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.btn:hover {
  background: var(--black);
  color: var(--white);
}

.btn:active {
  transform: scale(0.97);
}

body.theme-dark .btn {
  background: var(--white);
  color: var(--charcoal);
}

body.theme-dark .btn:hover {
  background: var(--fog);
  color: var(--charcoal);
}

/* ——— Pages ——— */

.page-main {
  padding: 0.85rem var(--gutter) 1.75rem;
}

.page-main--narrow {
  max-width: 38rem;
  margin: 0;
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.page-client .page-main--narrow {
  max-width: 48rem;
}

/* ——— Fork: hover-accordion slices ——— */

body.page-fork {
  background: var(--charcoal);
}

body.page-fork .site-foot {
  background: var(--bone);
  max-width: none;
  padding-top: 1.25rem;
}

.mast--over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  color: var(--white);
  background: linear-gradient(to bottom, rgba(20, 16, 14, 0.55), transparent);
  padding-bottom: 1.6rem;
}

.mast--over .mast-meta a,
.mast--over .mast-link,
.mast--over .mast-nav a {
  color: var(--white);
}

.mast--over .mast-meta a:hover,
.mast--over .mast-link:hover,
.mast--over .mast-nav a:hover {
  color: var(--white);
}

.mast--over .nav-pipe {
  color: rgba(255, 255, 255, 0.55);
}

.mast--over .mast-meta .tel {
  color: #ffd7d4;
}

.mast--over .dot {
  color: rgba(255, 255, 255, 0.55);
}

.fork {
  position: relative;
  min-height: 100dvh;
}

.fork-slices {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  min-height: 100dvh;
  gap: 0;
}

.slice {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 44px;
  color: var(--white);
  text-decoration: none;
  isolation: isolate;
}

.slice:hover,
.slice:focus-visible {
  color: var(--white);
}

.slice img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 42%;
}

.slice--business img {
  object-position: 68% 48%;
}

.slice-label {
  position: absolute;
  z-index: 2;
  left: clamp(1rem, 3vw, 1.75rem);
  top: 46%;
  bottom: auto;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.2vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}

.slice-label::before {
  content: "";
  display: block;
  width: 1.65rem;
  height: 2px;
  background: var(--ruby);
  margin-bottom: 0.55rem;
}

.slice--home::after,
.slice--business::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Rem-width left column + bottom-left pool. Hands/board stay clear. */
.slice--home::after {
  background:
    linear-gradient(
      to right,
      rgba(18, 14, 12, 0.76) 0,
      rgba(18, 14, 12, 0.48) 7.5rem,
      rgba(18, 14, 12, 0.16) 12.5rem,
      transparent 16.5rem
    ),
    radial-gradient(
      16rem 8rem at 4.5rem 47%,
      rgba(18, 14, 12, 0.62),
      transparent 74%
    ),
    radial-gradient(
      56rem 18rem at 8rem 100%,
      rgba(18, 14, 12, 0.86) 0%,
      rgba(18, 14, 12, 0.52) 42%,
      transparent 76%
    );
}

/* Fixed-width left column so the word reads in the narrow strip too. */
.slice--business::after {
  background: linear-gradient(
    to right,
    rgba(16, 18, 22, 0.78) 0,
    rgba(16, 18, 22, 0.46) 8.5rem,
    rgba(16, 18, 22, 0.14) 14rem,
    transparent 19rem
  );
}

.slice--business {
  box-shadow: inset 18px 0 28px rgba(16, 18, 22, 0.28);
}

.slice:has(.slice-panel)::after {
  background:
    linear-gradient(
      to right,
      rgba(18, 14, 12, 0.7) 0,
      rgba(18, 14, 12, 0.28) 12rem,
      transparent 22rem
    ),
    linear-gradient(
      to top,
      rgba(18, 14, 12, 0.82) 0,
      rgba(18, 14, 12, 0.4) 42%,
      transparent 72%
    );
}

.fork-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  pointer-events: none;
  padding: 4.5rem var(--gutter) 1.6rem;
  background: none;
  color: var(--white);
}

.fork-copy h1 {
  font-size: clamp(1.55rem, 3.4vw, 2.55rem);
  letter-spacing: -0.04em;
  margin: 0 0 0.4rem;
  max-width: 22ch;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.72);
}

.fork-copy p {
  margin: 0;
  font-size: clamp(0.95rem, 1.5vw, 1.12rem);
  max-width: 28ch;
  color: rgba(240, 241, 240, 0.94);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.72);
}

@media (prefers-reduced-motion: no-preference) {
  .fork-slices {
    transition: grid-template-columns var(--t) var(--ease);
  }

  .fork:has(.slice--home:hover) .fork-slices,
  .fork:has(.slice--home:focus-visible) .fork-slices,
  .fork[data-active="home"] .fork-slices {
    grid-template-columns: minmax(0, 8.4fr) minmax(0, 1.6fr);
  }

  .fork:has(.slice--business:hover) .fork-slices,
  .fork:has(.slice--business:focus-visible) .fork-slices,
  .fork[data-active="business"] .fork-slices {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 7.6fr);
  }
.fork[data-locked="home"] .fork-slices {
  grid-template-columns: minmax(0, 8.4fr) minmax(0, 1.6fr);
}

.fork[data-locked="business"] .fork-slices {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 7.6fr);
}

.slice:not(a) {
  cursor: default;
}

.slice-panel {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5.5rem clamp(1rem, 3vw, 1.75rem) 1.7rem;
  color: var(--white);
  max-width: 38rem;
  pointer-events: auto;
}

.slice-kicker {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.slice-kicker::before {
  content: "";
  display: block;
  width: 1.65rem;
  height: 2px;
  background: var(--ruby);
  margin-bottom: 0.55rem;
}

.slice-panel h1 {
  font-size: clamp(1.55rem, 3.2vw, 2.45rem);
  margin: 0 0 0.4rem;
  max-width: 16ch;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.72);
}

.slice-panel .lede {
  color: rgba(240, 241, 240, 0.94);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.72);
  max-width: 36ch;
}

.slice-panel .needs legend,
.slice-panel .need-list label {
  color: rgba(255, 255, 255, 0.9);
}

.slice-panel .need-list label:hover,
.slice-panel .need-list label:has(input:checked) {
  color: var(--white);
}

.slice-panel .need-echo {
  color: rgba(240, 241, 240, 0.94);
}

.slice-panel .receipts {
  color: rgba(240, 241, 240, 0.88);
}

.slice-panel .addr {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.45);
}

.slice-panel .addr:hover {
  border-bottom-color: var(--white);
}

.slice-panel .btn {
  background: var(--white);
  color: var(--charcoal);
}

.slice-panel .btn:hover {
  background: var(--fog);
  color: var(--charcoal);
}


  .btn:hover {
    transform: translateY(-1px);
  }

  .btn:active {
    transform: scale(0.97);
  }
}

@media (max-width: 700px) {
  .fork-slices {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr);
  }

  .fork-copy h1 {
    font-size: 1.55rem;
    max-width: 12ch;
  }

  .slice-label {
    top: 38%;
    font-size: 1.45rem;
  }

  .slice--business {
    box-shadow: inset 0 16px 24px rgba(16, 18, 22, 0.28);
  }

  @media (prefers-reduced-motion: no-preference) {
    .fork:has(.slice--home:hover) .fork-slices,
    .fork:has(.slice--home:focus-visible) .fork-slices,
    .fork[data-active="home"] .fork-slices {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, 2.2fr) minmax(0, 0.8fr);
    }

    .fork:has(.slice--business:hover) .fork-slices,
    .fork:has(.slice--business:focus-visible) .fork-slices,
    .fork[data-active="business"] .fork-slices {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, 0.85fr) minmax(0, 2.15fr);
    }

    .fork[data-locked="home"] .fork-slices {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, 2.2fr) minmax(0, 0.8fr);
    }

    .fork[data-locked="business"] .fork-slices {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, 0.85fr) minmax(0, 2.15fr);
    }
  }
}

/* ——— Inner path photography ——— */

.path-photo {
  margin: 0;
  width: 100%;
  height: min(46vh, 22rem);
  overflow: hidden;
  background: var(--charcoal);
}

.path-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 42%;
}

.path-photo--cool {
  height: min(40vh, 18rem);
}

.path-photo--cool img {
  object-position: 68% 48%;
}

/* ——— Need picker ——— */

.needs {
  border: 0;
  margin: 0.35rem 0 1rem;
  padding: 0;
}

.needs legend {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 0;
  margin-bottom: 0.7rem;
}

.need-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.need-list li {
  display: flex;
}

.need-list label {
  position: relative;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 0.55rem 0 0.4rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition:
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.need-list input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
}

.need-list input:focus-visible + span {
  outline: 2px solid var(--ruby);
  outline-offset: 4px;
}

.need-list label:hover {
  color: var(--ruby);
}

.need-list label:has(input:checked) {
  color: var(--ruby);
  border-bottom-color: var(--ruby);
}

.need-echo {
  min-height: 1.6rem;
  margin: 0 0 1.2rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  align-items: center;
}

.addr {
  text-decoration: none;
  border-bottom: 1px solid var(--silver);
  padding-bottom: 0.08rem;
}

.addr:hover {
  border-bottom-color: var(--ruby);
}

/* ——— Business receipts ——— */

.receipts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.55rem;
  margin: 0 0 1.6rem;
  max-width: var(--measure);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--silver);
}

.receipts .dot {
  color: var(--ruby);
}

/* ——— Dark path ——— */

body.theme-dark {
  background: var(--charcoal);
  color: var(--white);
}

body.theme-dark .lede {
  color: #d8d8d8;
}

body.theme-dark .small,
body.theme-dark .legal,
body.theme-dark .hint {
  color: var(--silver);
}

body.theme-dark .mast-meta .tel {
  color: var(--ruby);
}

/* ——— Client directory ——— */

.dir {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

@media (min-width: 560px) {
  .dir {
    grid-template-columns: 1fr 1fr;
  }
}

.dir a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 5.4rem;
  padding: 1.15rem 1.2rem;
  text-decoration: none;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  background: var(--ruby);
  border-radius: 0.7rem;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}

.dir a:hover {
  color: var(--white);
  background: #9a0e18;
}

.dir a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.consent {
  margin: 1rem 0 0;
  max-width: var(--measure);
}

/* ——— Form ——— */

.request {
  margin: 1.15rem 0 0;
  max-width: 28rem;
}

.request label,
.request .field-label {
  display: block;
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0.95rem 0 0.35rem;
}

.request input[type="text"],
.request input[type="email"],
.request input[type="tel"],
.request textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--black);
  background: var(--white);
  border: 0;
  box-shadow: inset 0 0 0 1px #d4d5d4;
  border-radius: var(--radius-box);
  padding: 0.55rem 0.8rem;
  outline: none;
}

.request textarea {
  min-height: 7rem;
  resize: vertical;
}

.request input:focus,
.request textarea:focus {
  box-shadow: inset 0 0 0 1px var(--ruby);
}

.request .check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 1.15rem 0 1.25rem;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--graphite);
  max-width: var(--measure);
}

.request label.check {
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
}

.request .check input {
  margin-top: 0.3rem;
  accent-color: var(--ruby);
}

.request-done {
  margin: 1.5rem 0;
  padding: 0.85rem 0 0;
}

.request[hidden],
.request-done[hidden] {
  display: none;
}

/* ——— Footer ——— */

.site-foot {
  padding: 0.35rem var(--gutter) 1.7rem;
  margin-top: 0;
  max-width: 42rem;
}

.site-foot p {
  margin: 0 0 0.35rem;
  max-width: none;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.5rem;
}

.socials a {
  text-decoration: none;
  font-size: 0.8125rem;
  color: var(--graphite);
}

.socials a:hover {
  color: var(--ruby);
}

body.theme-dark .socials a {
  color: var(--silver);
}

a[aria-current="page"] {
  color: var(--ruby);
}

.mast--over a[aria-current="page"] {
  color: var(--white);
}

.mast-meta a.tel:hover {
  color: var(--ruby);
}

@media (min-width: 800px) {
  .page-home .page-main,
  .page-business .page-main,
  .page-client .page-main {
    padding-top: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  .btn,
  .dir a,
  .need-list label,
  .fork-slices {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .fork-slices,
  .fork:has(.slice:hover) .fork-slices,
  .fork:has(.slice:focus-visible) .fork-slices,
  .fork[data-active] .fork-slices {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    grid-template-rows: none;
  }
}

/* ============================================================
   Room first screen (rethink, 2026-09-12)
   One documentary room. The work is the hero. Two unequal doors.
   Replaces the hover-accordion fork on "/". Fork archived at /fork-v1/.
   ============================================================ */

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

.page-room {
  background: var(--bone);
}

.mast-since {
  white-space: nowrap;
}

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

.room {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.room-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 45%;
  z-index: -2;
}

/* Scrim is a corner wash, never a full-frame overlay. */
.room-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(20, 20, 20, 0.88) 0%,
      rgba(20, 20, 20, 0.66) 26%,
      rgba(20, 20, 20, 0) 62%
    ),
    linear-gradient(
      to right,
      rgba(20, 20, 20, 0.62) 0%,
      rgba(20, 20, 20, 0) 58%
    );
}

.room-copy {
  position: relative;
  width: 100%;
  max-width: 46rem;
  padding: var(--gutter);
  padding-block-end: clamp(2.5rem, 7vh, 4.5rem);
  color: var(--white);
}

.eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.eyebrow::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 3px;
  margin-bottom: 0.8rem;
  background: var(--ruby);
}

.eyebrow--dark {
  color: var(--graphite);
}

.room-copy h1 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  max-width: 15ch;
}

.room-copy .lede {
  margin: 0 0 1.8rem;
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  line-height: 1.5;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.9);
}

/* Two doors, deliberately unequal. Not two pills. */
.doors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
}

.door-alt {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
  transition: border-color var(--t) var(--ease);
}

.door-alt:hover,
.door-alt:focus-visible {
  border-bottom-color: var(--white);
}

.door-alt--dark {
  color: var(--charcoal);
  border-bottom-color: rgba(46, 46, 46, 0.4);
}

.door-alt--dark:hover,
.door-alt--dark:focus-visible {
  border-bottom-color: var(--charcoal);
}

/* --- facts band ------------------------------------------- */

.facts {
  background: var(--charcoal);
  color: var(--bone);
  padding: clamp(1.6rem, 4vw, 2.4rem) var(--gutter);
}

.fact-list {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 62rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem 2rem;
}

.fact-k {
  display: block;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 241, 240, 0.55);
  margin-bottom: 0.3rem;
}

.fact-v {
  display: block;
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fact-v a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 241, 240, 0.35);
}

.fact-v a:hover,
.fact-v a:focus-visible {
  border-bottom-color: var(--bone);
}

/* --- the work --------------------------------------------- */

.work {
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
  max-width: 72rem;
  margin: 0 auto;
}

.work-head {
  max-width: 40rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}

.work h2,
.says h2,
.close h2,
.one-team h2,
.covered h2 {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

/* 46ch was breaking one-line copy onto two lines in containers with 400px of
   room to spare: "Cities and contractors, tax firms and storage yards, and the
   house on your street" is 82 characters and had nowhere to put them. 60ch is
   still inside the 45-75ch measure that keeps long prose readable, and short
   ledes now stay on one line where the column allows it.

   text-wrap: balance is NOT the cause and stays. It evens out however many
   lines the width requires; it never adds one. */
.lede--dark {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.55;
  max-width: 60ch;
  color: var(--ink-soft);
}

.work-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem;
}

.work-item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius-box);
  background: var(--charcoal);
}

.work-cap {
  margin: 0.7rem 0 0;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--graphite);
}

/* --- questions the market actually asks -------------------- */

.asked {
  background: var(--fog);
  padding: clamp(2.4rem, 6vw, 4rem) var(--gutter);
}

.asked-list {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.8rem 2.4rem;
}

.asked-q {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--charcoal);
}

.asked-q::before {
  content: "";
  display: block;
  width: 1.6rem;
  height: 3px;
  margin-bottom: 0.7rem;
  background: var(--ruby);
}

.asked-a {
  margin: 0;
  font-size: 0.99rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --- clients ---------------------------------------------- */

.says {
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
  max-width: 72rem;
  margin: 0 auto;
}

.says-list {
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.6rem 2.2rem;
}

.says-item blockquote {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--ruby);
}

.says-item blockquote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.says-who {
  margin: 0.8rem 0 0 1.1rem;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* --- close ------------------------------------------------ */

.close {
  padding: clamp(3rem, 8vw, 5rem) var(--gutter);
  max-width: 72rem;
  margin: 0 auto;
  border-top: 1px solid var(--silver);
}

.close-actions {
  margin: 1.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
}

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

.foot {
  background: var(--charcoal);
  color: rgba(240, 241, 240, 0.72);
  padding: clamp(2rem, 5vw, 2.8rem) var(--gutter);
  font-size: 0.88rem;
  line-height: 1.6;
}

.foot p {
  margin: 0 0 0.3rem;
  max-width: 72rem;
  margin-inline: auto;
}

.foot a {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 241, 240, 0.3);
}

.foot a:hover,
.foot a:focus-visible {
  border-bottom-color: var(--bone);
}

.foot-social {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

/* --- narrow ----------------------------------------------- */

@media (max-width: 700px) {
  .room {
    min-height: 92dvh;
  }

  .room-plate {
    object-position: 60% 42%;
  }

  .room-copy h1 {
    max-width: 13ch;
  }

  .doors {
    gap: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .door-alt,
  .fact-v a {
    transition: none;
  }
}

/* Ruby is the only accent, so the one primary action wears it.
   White on #b9111e measures 6.6:1, which clears AA for body text. */
.btn--primary {
  background: var(--ruby);
  color: var(--white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: #9b0f19;
  color: var(--white);
}

/* The masthead sits on photography, so it carries its own thin wash.
   Without it the nav lands on the bright top-right of the plate. */
.room::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8.5rem;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 20, 0.62) 0%,
    rgba(20, 20, 20, 0.28) 52%,
    rgba(20, 20, 20, 0) 100%
  );
}

/* On narrow screens the meta line wraps and leaves a dangling separator.
   Drop the dots and let flex gaps do the separating instead. */
@media (max-width: 700px) {
  .page-room .mast-meta,
  .page-client .mast-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
  }

  .page-room .mast-meta .dot,
  .page-client .mast-meta .dot {
    display: none;
  }
}

/* ============================================================
   Inner pages in the room system (/home/, /business/, /client/)
   ============================================================ */

/* Inner heroes are shorter than the front door: the visitor has already
   chosen a path, so the photograph proves rather than introduces. */
.room--short {
  min-height: 68dvh;
}

@media (max-width: 700px) {
  .room--short {
    min-height: 62dvh;
  }
}

/* --- one team (business) ----------------------------------- */

.one-team {
  padding: clamp(3rem, 8vw, 5rem) var(--gutter);
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 3.4rem);
  align-items: start;
}

.one-team-copy .lede--dark {
  max-width: 48ch;
}

.one-team-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.1rem;
  /* Grid align-content defaults to stretch, so the moment the copy column grew
     a photo these three items spread out to fill the new height and the gaps
     read as a mistake. Pack them to the top and let the column be taller. */
  align-content: start;
}

.one-team-list li {
  border-left: 3px solid var(--ruby);
  padding-left: 1rem;
}

.ot-k {
  display: block;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 0.25rem;
}

.ot-v {
  display: block;
  font-size: 0.99rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 820px) {
  .one-team {
    grid-template-columns: 1fr;
  }
}

/* --- what we cover (business) ------------------------------ */

.covered {
  background: var(--fog);
  padding: clamp(3rem, 8vw, 5rem) var(--gutter);
}

.covered > .eyebrow,
.covered > h2 {
  max-width: 72rem;
  margin-inline: auto;
}

.covered > h2 {
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}

.covered-list {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.8rem 2.4rem;
}

.covered-list h3 {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--charcoal);
}

.covered-list h3::before {
  content: "";
  display: block;
  width: 1.6rem;
  height: 3px;
  margin-bottom: 0.7rem;
  background: var(--ruby);
}

.covered-list p {
  margin: 0;
  font-size: 0.99rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --- need picker (home) ------------------------------------ */

.needs-block {
  padding: clamp(2.6rem, 7vw, 4rem) var(--gutter);
  max-width: 72rem;
  margin: 0 auto;
}

.needs-block h2 {
  margin: 0 0 1.2rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.needs-block .needs {
  border: 0;
  margin: 0;
  padding: 0;
}

.needs-block .need-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.needs-block .need-list label {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--silver);
  border-radius: 2rem;
  background: var(--white);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  transition:
    border-color var(--t) var(--ease),
    background var(--t) var(--ease);
}

.needs-block .need-list input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.needs-block .need-list label:hover {
  border-color: var(--graphite);
}

.needs-block .need-list input:focus-visible + span {
  outline: 2px solid var(--ruby);
  outline-offset: 4px;
  border-radius: 2px;
}

.needs-block .need-list label:has(input:checked) {
  background: var(--ruby);
  border-color: var(--ruby);
  color: var(--white);
}

.needs-block .need-echo {
  margin: 1.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  min-height: 2.4rem;
}

/* --- client area ------------------------------------------- */

.page-client {
  background: var(--bone);
}

.client-main {
  padding-block-end: clamp(2rem, 5vw, 3rem);
}

.help-now {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.2rem) var(--gutter) clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
}

.help-now h1 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--charcoal);
}

.help-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}

.dir-block {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.6rem) var(--gutter) clamp(2rem, 5vw, 2.8rem);
}

.dir {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

/* Six tiles want to land 3 + 3, not 4 + 2 with a ragged row. */
@media (max-width: 900px) {
  .dir {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .dir {
    grid-template-columns: 1fr;
  }
}

.dir li {
  display: flex;
}

.dir a {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-height: 6.2rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-box);
  background: var(--ruby);
  color: var(--white);
  text-decoration: none;
  transition: background var(--t) var(--ease);
}

.dir a:hover,
.dir a:focus-visible {
  background: #9b0f19;
}

.dir a:active {
  transform: scale(0.99);
}

.dir-label {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.dir-sub {
  font-family: var(--body);
  font-size: 0.86rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}

.dir-block .small {
  margin: 1.1rem 0 0;
  font-size: 0.86rem;
  color: var(--graphite);
}

.request-block {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) var(--gutter);
  border-top: 1px solid var(--silver);
}

/* The form itself stays a comfortable reading width, left aligned with
   everything above it rather than centerd in the page. */
.request-block > * {
  max-width: 38rem;
}

.request-block h2 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.request-block .hint {
  margin: 0 0 1.6rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--graphite);
}

.request {
  display: grid;
  gap: 0.35rem;
}

.request label {
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-top: 0.7rem;
}

.request input[type="text"],
.request input[type="email"],
.request input[type="tel"],
.request textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--charcoal);
}

.request textarea {
  min-height: 8rem;
  resize: vertical;
}

.request input:focus-visible,
.request textarea:focus-visible {
  outline: 2px solid var(--ruby);
  outline-offset: 1px;
  border-color: var(--ruby);
}

.request .check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  margin-top: 1.4rem;
  font-weight: 400;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--graphite);
}

.request .check input {
  margin-top: 0.2rem;
}

.request button {
  margin-top: 1.5rem;
  justify-self: start;
  padding: 0.8rem 1.4rem;
}

.request-done {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--ruby);
  background: var(--fog);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .help-now {
    align-items: flex-start;
  }

  .help-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ============================================================
   Direction A: the split front door (2026-09-13)
   The photograph is capped at 55% of the first screen so the action
   has its own territory instead of competing with the image. Stacks
   to a photo band over a full-width panel below 900px.
   ============================================================ */

.page-split {
  background: var(--bone);
}

/* A plain (non-overlay) masthead: the split has no photo behind the chrome. */
.mast--plain {
  background: var(--white);
  border-bottom: 1px solid var(--silver);
}

.mast-name {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  min-height: calc(100dvh - 4.5rem);
}

.split-plate {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  isolation: isolate;
}

.split-plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 45%;
}

.split-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 20, 20, 0.76) 0%,
    rgba(20, 20, 20, 0.28) 34%,
    rgba(20, 20, 20, 0) 62%
  );
}

.split-cap {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1.5rem, 4vh, 2.4rem);
  margin: 0;
  color: var(--white);
}

.split-cap::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 3px;
  margin-bottom: 0.85rem;
  background: var(--ruby);
}

.split-cap-k {
  display: block;
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.split-cap-v {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.split-panel {
  background: var(--white);
  padding: clamp(1.75rem, 3.6vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.2rem, 2.4vw, 1.7rem);
}

.split-panel h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.026em;
  max-width: 14ch;
  color: var(--charcoal);
}

.split-panel .lede--dark {
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  max-width: 42ch;
}

/* Doors are the action. Big hit areas, a clear primary, and each says
   where it goes rather than just naming a category. */
.doorset {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.door {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 1.05rem 1.35rem;
  border-radius: var(--radius-box);
  background: var(--ruby);
  color: var(--white);
  text-decoration: none;
  border: 2px solid var(--ruby);
  transition:
    background var(--t) var(--ease),
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.door:hover,
.door:focus-visible {
  background: #9b0f19;
  border-color: #9b0f19;
}

.door:active {
  transform: scale(0.995);
}

.door--quiet {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--charcoal);
}

.door--quiet:hover,
.door--quiet:focus-visible {
  background: var(--fog);
  border-color: var(--black);
  color: var(--charcoal);
}

.door-k {
  display: block;
  font-family: var(--display);
  font-size: 1.26rem;
  font-weight: 700;
  letter-spacing: -0.016em;
}

.door-v {
  display: block;
  margin-top: 0.16rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.87);
}

.door--quiet .door-v {
  color: var(--graphite);
}

.door-arrow {
  flex-shrink: 0;
}

.panel-tel {
  margin: 0;
  font-size: 0.96rem;
  color: var(--graphite);
}

.panel-tel a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 2px solid var(--ruby);
}

/* --- locations --------------------------------------------- */

.places {
  background: var(--charcoal);
  color: var(--bone);
  padding: clamp(2rem, 5vw, 3rem) var(--gutter);
}

.place-list {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.6rem 2.4rem;
}

.place-tag {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.28rem 0.6rem;
  border-radius: 3px;
  background: var(--ruby);
  color: var(--white);
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.place-tag--quiet {
  background: var(--graphite);
}

.place-name {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--white);
}

.place-detail {
  margin: 0 0 0.45rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(240, 241, 240, 0.88);
}

.place-detail a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 241, 240, 0.4);
}

.place-detail a:hover,
.place-detail a:focus-visible {
  border-bottom-color: var(--bone);
}

.place-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(240, 241, 240, 0.6);
}

/* --- questions now lead somewhere --------------------------- */

.asked-cta {
  margin: 0.6rem 0 0;
}

.asked-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ruby);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.asked-cta a::after {
  content: "→";
  font-size: 1rem;
  line-height: 1;
}

.asked-cta a:hover,
.asked-cta a:focus-visible {
  border-bottom-color: var(--ruby);
}

.says-lede {
  margin-top: 0.5rem;
}

.foot-brand {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bone);
}

/* --- stacking ----------------------------------------------- */

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* The photo becomes a band rather than half a screen, so the doors
     are above the fold on a phone instead of below a full-height image. */
  .split-plate {
    height: clamp(13rem, 32dvh, 20rem);
  }

  .split-panel {
    justify-content: flex-start;
  }

  .split-panel h1 {
    max-width: 16ch;
  }
}

@media (max-width: 700px) {
  .page-split .mast {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .page-split .mast-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.55rem;
  }

  .page-split .mast-meta .dot {
    display: none;
  }

  .door {
    min-height: 4.25rem;
  }
}

/* On a phone the doors must clear the fold without scrolling, so the photo
   band gives up height first. Measured: at 390 the doors ended 10px from the
   bottom edge and at 320 they fell below it. */
@media (max-width: 700px) {
  .split-plate {
    height: clamp(9rem, 22dvh, 13rem);
  }

  .split-panel {
    padding: 1.35rem var(--gutter) 1.6rem;
    gap: 1rem;
  }

  .split-panel h1 {
    font-size: clamp(1.65rem, 7.4vw, 2.1rem);
    max-width: 15ch;
  }

  .split-panel .lede--dark {
    font-size: 0.98rem;
  }

  .split-cap-v {
    display: none;
  }
}

@media (max-width: 380px) {
  .door-v {
    display: none;
  }

  .split-panel h1 {
    font-size: 1.55rem;
  }
}

/* ============================================================
   Review pass 2026-09-13 (Brian's second round)
   ============================================================ */

/* The masthead stays put while scrolling: on a site this shallow the nav is
   the fastest way between the four pages, and losing it costs a scroll back. */
.mast--plain {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Four coverage areas were landing 3 + 1 with a ragged empty cell.
   Two by two reads as a set; it collapses to one column on a phone. */
.covered-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .covered-list {
    grid-template-columns: 1fr;
  }
}

/* On a large monitor a 55/45 split at full viewport height made the photo
   enormous. Cap it, and let the panel keep its own rhythm. */
@media (min-width: 1100px) {
  .split {
    max-height: 41rem;
  }
}

/* Pull the vertical rhythm in. The white space was doing real work at the
   section level but there was too much of it between sections. */
@media (min-width: 900px) {
  .work,
  .says,
  .close {
    padding-block: clamp(2.4rem, 5vw, 3.6rem);
  }

  .asked {
    padding-block: clamp(2.2rem, 4.5vw, 3.2rem);
  }
}

/* ============================================================
   Review pass 3 (2026-09-13): sticky chrome everywhere, a call
   button, and a third quieter door for the client area.
   ============================================================ */

.mast--plain {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--white);
  border-bottom: 1px solid var(--silver);
}

/* The nav pushes right; the call button sits outside it so it never wraps
   into the link run. */
.mast--plain .mast-nav {
  margin-left: auto;
}

.mast-call {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius);
  background: var(--ruby);
  color: var(--white);
  text-decoration: none;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transition: background var(--t) var(--ease);
}

.mast-call:hover,
.mast-call:focus-visible {
  background: #9b0f19;
  color: var(--white);
}

.mast-call:active {
  transform: scale(0.97);
}

/* Client Area pops a little without competing with the ruby actions. */
.nav-client {
  color: var(--charcoal);
}

/* The third door: present, useful, and visibly not one of the two that sell. */
.door--client {
  background: var(--fog);
  color: var(--charcoal);
  border-color: var(--fog);
  min-height: 3.6rem;
}

.door--client:hover,
.door--client:focus-visible {
  background: var(--silver);
  border-color: var(--silver);
  color: var(--charcoal);
}

.door--client .door-k {
  font-size: 1.05rem;
}

.door--client .door-v {
  color: var(--graphite);
}

/* --- narrow: the call button is the point of a sticky bar on a phone --- */

@media (max-width: 760px) {
  .mast--plain {
    padding-block: 0.6rem;
    row-gap: 0.5rem;
  }

  .mast--plain .mast-meta {
    flex-basis: 100%;
    order: 3;
  }

  .mast--plain .mast-nav {
    order: 4;
    flex-basis: 100%;
    margin-left: 0;
  }
}

@media (max-width: 460px) {
  /* Superseded: the wordmark is back on a phone. See "Masthead on a phone"
     at the end of this file. Only the very narrowest case still hides it,
     because mark + name + button genuinely will not fit in 320px. */
  .mast-call-t {
    font-size: 0.9rem;
  }
}

/* Three doors need more room than two. On the smallest screens the client
   door loses its subtitle and the photo band gives up more height, so all
   three still clear the fold. */
@media (max-width: 460px) {
  .split-plate {
    height: clamp(7.5rem, 17dvh, 10rem);
  }

  .door--client .door-v {
    display: none;
  }

  .door--client {
    min-height: 3.1rem;
  }
}

/* No lopsided grids. Four items land two by two, not three plus a gap. */
.asked--pairs .asked-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .asked--pairs .asked-list {
    grid-template-columns: 1fr;
  }
}

/* The menu carries more weight now that it is pinned to every page. */
.mast-nav a {
  font-size: 1rem;
}

.mast-name {
  font-size: 1.05rem;
}

/* Urgency and the action that resolves it, side by side. */
.urgent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.6rem;
  font-size: 0.96rem;
  color: var(--charcoal);
}

.foot-legal {
  margin-top: 0.7rem;
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 0.7rem;
}

.consent-link {
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
}

.consent-link a {
  color: var(--graphite);
}

/* ============================================================
   Review pass 5 (2026-09-13)
   ============================================================ */

.mast-name {
  color: var(--charcoal);
  text-decoration: none;
}

.mast-name:hover,
.mast-name:focus-visible {
  color: var(--ruby);
}

/* The offer gets its own line inside the door, set apart from the service
   list so it reads as a thing you receive rather than more description. */
.door-offer {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.28rem 0.6rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
}

/* --- footer, organised --------------------------------------- */

.foot-grid {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.8rem 2.2rem;
}

.foot-col p {
  margin: 0;
  max-width: none;
}

.foot-h {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 241, 240, 0.55);
  margin-bottom: 0.55rem !important;
}

.foot-brand {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--bone);
  margin-bottom: 0.3rem !important;
}

.foot-line {
  line-height: 1.65;
}

/* Footer links were 76x17px with 22.4px of safe space between them, under the
   24px of WCAG 2.5.8. It only started failing when "Home" became
   "Residential": the wider label overlaps its neighbor horizontally, so the
   vertical gap started governing where before the two circles missed each
   other. Padding gives each link a 25px target and ends the geometry argument. */
.foot-line a {
  display: inline-block;
  padding-block: 4px;
}

/* 0.5 alpha composited to #8f908f on the charcoal footer: 4.24:1, under the
   4.5:1 WCAG 1.4.3 asks for at this size. 0.56 lands at 4.9:1, which keeps the
   line quiet and leaves headroom if the footer ground ever shifts. Measured,
   not eyeballed. */
.foot-quiet {
  color: rgba(240, 241, 240, 0.56);
}

.foot-tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}

.foot-base {
  max-width: 72rem;
  margin: 1.8rem auto 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(240, 241, 240, 0.16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
}

.foot-base p {
  margin: 0;
}

.foot-legal {
  margin-top: 0 !important;
}

/* A secondary action that is neither the primary call nor a quiet text link:
   the remote support tool, which people arrive looking for. */
.btn--tool {
  background: var(--white);
  color: var(--charcoal);
  border: 2px solid var(--charcoal);
}

.btn--tool:hover,
.btn--tool:focus-visible {
  background: var(--charcoal);
  color: var(--white);
}

/* --- trust strip (home) -------------------------------------- */

.trust {
  background: var(--fog);
  padding: clamp(1.6rem, 4vw, 2.4rem) var(--gutter);
}

.trust-list {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 72rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 3rem;
  align-items: baseline;
}

.trust-list a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.trust-list a:hover .trust-score,
.trust-list a:focus-visible .trust-score {
  color: var(--ruby);
}

.trust-list li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.trust-score {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--charcoal);
  transition: color var(--t) var(--ease);
}

.trust-score--word {
  color: var(--ruby);
}

.trust-where {
  font-size: 0.96rem;
  color: var(--graphite);
}

/* The photo was still too tall on a large monitor, leaving dead air above
   and below the buttons in the panel beside it. */
@media (min-width: 1100px) {
  .split {
    max-height: 33rem;
  }
}

/* Eight coverage items, two by four. Even at every width. */
.covered-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The offer line made the business door taller, which pushed the set below
   the fold once the layout stacks. The photo band gives up the height. */
@media (max-width: 900px) {
  .split-plate {
    height: clamp(9rem, 22dvh, 14rem);
  }

  .split-panel {
    gap: 0.95rem;
    padding-block: 1.4rem 1.7rem;
  }
}

@media (max-width: 460px) {
  .split-plate {
    height: clamp(6.5rem, 14dvh, 8.5rem);
  }

  .door-offer {
    font-size: 0.8rem;
    margin-top: 0.35rem;
  }

  .split-panel h1 {
    font-size: 1.5rem;
  }
}

/* 320px with three doors and an offer line is the tightest case on the site.
   The service list goes; the door label and the offer carry it. */
@media (max-width: 380px) {
  .split-plate {
    height: 5.5rem;
  }

  .door .door-v {
    display: none;
  }

  .split-panel .lede--dark {
    font-size: 0.94rem;
  }
}

/* Headings and ledes were capped narrow enough to wrap early on a wide
   screen, which added rows of height while leaving the space beside them
   empty. Let them use the room they have; the measure still holds.

   62ch was still not enough. Measured on the built pages: "Cities and
   contractors, tax firms and storage yards, and the house on your street"
   needs 671px and had 1080px of room, and "Not a call center and not a queue
   of strangers" needs 772px in 864px. Both were breaking onto a second line
   because of the cap alone, not the column.

   78ch clears both. It is the top of the readable measure rather than the
   middle, which is the right trade for a one or two line lede sitting under a
   heading; running prose elsewhere keeps its own narrower cap.

   Two ledes still wrap and should: "Tell us what is not working, or what is
   coming up..." needs 1023px, which is about 100 characters. Fitting that on
   one line would mean a line nobody can comfortably read back. The fix for
   those is shorter copy, not a wider column. */
@media (min-width: 900px) {
  .work-head {
    max-width: 54rem;
  }

  .lede--dark,
  .lede.lede--dark {
    max-width: 78ch;
  }

  .one-team-copy .lede--dark {
    max-width: 58ch;
  }
}

/* The global a:hover turns links ruby, which on a ruby button made the label
   and arrow read red-on-dark-red and nearly vanish. Doors and buttons keep
   their own color on every state. */
.door:hover,
.door:focus-visible,
.door:active {
  color: var(--white);
}

.door--quiet:hover,
.door--quiet:focus-visible,
.door--quiet:active,
.door--client:hover,
.door--client:focus-visible,
.door--client:active {
  color: var(--charcoal);
}

.btn:hover,
.btn:focus-visible,
.btn--primary:hover,
.btn--primary:focus-visible,
.mast-call:hover,
.mast-call:focus-visible {
  color: var(--white);
}

.btn--tool:hover,
.btn--tool:focus-visible {
  color: var(--white);
}

.dir a:hover,
.dir a:focus-visible {
  color: var(--white);
}

/* --- the offer band (business) -------------------------------- */

.offer {
  background: var(--charcoal);
  color: var(--bone);
  padding: clamp(2.4rem, 6vw, 3.6rem) var(--gutter);
}

.offer-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 3.4rem);
  align-items: center;
}

.eyebrow--light {
  color: rgba(240, 241, 240, 0.7);
}

.offer h2 {
  margin: 0 0 0.8rem;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--white);
}

.offer-lede {
  margin: 0 0 1.1rem;
  font-size: 1.04rem;
  line-height: 1.55;
  max-width: 58ch;
  color: rgba(240, 241, 240, 0.85);
}

.offer-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.offer-points li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.97rem;
  line-height: 1.5;
  color: rgba(240, 241, 240, 0.78);
}

.offer-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ruby);
}

.offer-action {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-start;
}

.btn--big {
  padding: 1.1rem 1.6rem;
  font-size: 1.1rem;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.offer-alt {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(240, 241, 240, 0.62);
}

.offer-alt a {
  color: var(--bone);
  border-bottom: 1px solid rgba(240, 241, 240, 0.35);
  text-decoration: none;
}

@media (max-width: 860px) {
  .offer-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .offer-action {
    width: 100%;
  }
}

/* The hook sits above the headline, the way a differentiator line does on a
   page that has earned attention before it explains anything. */
.hook {
  margin: 0 0 0.55rem;
  font-family: var(--display);
  font-size: clamp(0.98rem, 1.5vw, 1.14rem);
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ruby);
}

.room-copy .hook {
  color: var(--white);
}

.room-copy .hook::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 3px;
  margin-bottom: 0.8rem;
  background: var(--ruby);
}

/* The hook adds a line above the headline, which the 320px case cannot
   afford alongside three doors. It is the least load-bearing element there. */
@media (max-width: 380px) {
  .split-panel .hook {
    display: none;
  }
}

/* Stretched-link card: the whole door is clickable via the label's ::after,
   and the offer link sits above it. Valid HTML, two real targets, no nesting. */
.door--stack {
  position: relative;
  cursor: pointer;
}

.door-stretch {
  text-decoration: none;
  color: inherit;
}

.door-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-box);
}

.door--stack .door-text {
  position: static;
}

/* ---------------------------------------------------------------------------
   The business door (C2)

   Ruby is the loudest color in this palette, so a button sitting inside a
   ruby card can never out-shout the card it sits on. That is arithmetic, not
   taste, and it is why two rounds of recoloring the chip failed: charcoal on
   ruby measures 2.04:1, black only 3.16:1. The card had to stop being ruby.

   So: a white card carrying a ruby rule, and a solid ruby chip. The rule
   keeps Business visibly outranking Home without a full red slab; the chip is
   now the loudest control on the page, at 6.64:1 against its own card.
   --------------------------------------------------------------------------- */

.door--stack {
  background: var(--white);
  border-color: #d6d8d6;
  border-left: 5px solid var(--ruby);
  color: var(--charcoal);
}

.door--stack:hover,
.door--stack:focus-within {
  background: #f6f7f6;
  border-color: #c4c6c4;
  border-left-color: var(--ruby);
}

/* The global a:hover turns links ruby, which put ruby text on a ruby chip
   twice before. Every state is pinned from here on. Do not remove. */
.door-stretch,
.door-stretch:hover,
.door-stretch:focus-visible,
.door-stretch:active,
.door--stack:hover .door-stretch,
.door--stack .door-arrow,
.door--stack:hover .door-arrow {
  color: var(--charcoal);
}

.door--stack .door-v {
  color: var(--graphite);
}

.door-stretch:focus-visible::after {
  outline: 3px solid var(--ruby);
  outline-offset: 3px;
}

/* The chip has to clear the stretched link to be clickable on its own. */
.door-offer--link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.66rem 1rem;
  border-radius: var(--radius);
  background: var(--ruby);
  color: var(--white);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  /* Shrinking the label to hold one line on a phone took the button under a
     thumb-sized target. The floor keeps it tappable however small the type
     gets. */
  min-height: 44px;
  box-sizing: border-box;
  transition:
    background var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.door-offer--link:hover,
.door-offer--link:focus-visible,
.door-offer--link:active {
  background: #9b0f19;
  color: var(--white);
}

.door-offer--link:hover,
.door-offer--link:focus-visible {
  transform: translateY(-1px);
}

.door-offer--link:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);
}

.door-offer--link:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 2px;
}

.chip-icon {
  flex-shrink: 0;
}

/* Two controls on one card must light up one at a time, or they read as a
   single thing. Card hover applies only when the pointer is not on the chip. */
.door--stack:hover:has(.door-offer--link:hover) {
  background: var(--white);
  border-color: #d6d8d6;
  border-left-color: var(--ruby);
}

/* The hook carries the page now, so give it the weight to do that. */
.hook {
  font-size: clamp(1.08rem, 1.9vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.014em;
}

/* ---------------------------------------------------------------------------
   Request form, Netlify Forms wiring
   --------------------------------------------------------------------------- */

/* Honeypot. Hidden from sight and from assistive tech, reachable by bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.request-error {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--ruby);
  background: #fdf2f3;
  color: #2e2e2e;
  font-size: 0.95rem;
  line-height: 1.5;
}

.request-error a {
  color: var(--ruby);
}

.request-done-h {
  margin: 0 0 0.4rem;
  font-family: var(--display, inherit);
  font-size: 1.35rem;
  font-weight: 600;
  color: #2e2e2e;
}

.request [data-request-submit][disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* ---------------------------------------------------------------------------
   Primary buttons on dark ground

   The pixel audit was right that these had no edge: ruby on the charcoal
   offer band measures 2.16:1, ruby on the scrimmed hero 2.89:1. Inverting the
   fill to white fixed the number and broke the brand. Ruby is the action
   color on this site; a white button is a different control.

   So keep the ruby fill and give it a ring instead. The border carries the
   edge at 13.58:1 while the button stays unmistakably the red CTA.
   --------------------------------------------------------------------------- */

/* A ring, not a border: .btn carries no border at all, and box-shadow cannot
   shift the layout the way adding 2px of border would. */
.room-copy .btn--primary,
.offer .btn--primary {
  background: var(--ruby);
  color: var(--white);
  box-shadow:
    0 0 0 2px var(--white),
    0 3px 0 rgba(0, 0, 0, 0.35);
}

.room-copy .btn--primary:hover,
.room-copy .btn--primary:focus-visible,
.room-copy .btn--primary:active,
.offer .btn--primary:hover,
.offer .btn--primary:focus-visible,
.offer .btn--primary:active {
  background: #9b0f19;
  color: var(--white);
  box-shadow:
    0 0 0 2px var(--white),
    0 3px 0 rgba(0, 0, 0, 0.35);
}

.room-copy .btn--primary:focus-visible,
.offer .btn--primary:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* The business card framed lighter than the Home card below it, which put the
   secondary door in a heavier box than the primary one. Match the frames and
   let the ruby rule and the ruby chip carry the hierarchy. */
.door--stack {
  border-color: var(--charcoal);
  border-left-color: var(--ruby);
}

.door--stack:hover,
.door--stack:focus-within,
.door--stack:hover:has(.door-offer--link:hover) {
  border-color: var(--black);
  border-left-color: var(--ruby);
}

/* The Client Area card was a fog fill inside a fog border: 1.27:1 against the
   page, so it had no measurable edge at all. A graphite outline gives it a
   real boundary while the muted fill keeps it third in the stack. */
.door--client {
  border-color: var(--graphite);
}

.door--client:hover,
.door--client:focus-visible {
  border-color: var(--charcoal);
}

/* On a phone the chip wrapped to two lines with the icon floating beside the
   pair, which reads as an accident rather than a button. Tighten it until the
   label sits on one line. */
@media (max-width: 460px) {
  .door-offer--link {
    font-size: 0.84rem;
    padding: 0.6rem 0.8rem;
    gap: 0.38rem;
    letter-spacing: -0.005em;
  }

  .door-offer--link .chip-icon {
    width: 15px;
    height: 15px;
  }
}

/* 360px and below is still a real phone size. Go one step tighter so the
   label holds a single line there too. */
@media (max-width: 380px) {
  .door-offer--link {
    font-size: 0.78rem;
    padding: 0.58rem 0.7rem;
  }
}

/* ---------------------------------------------------------------------------
   Form field requirements

   Every text field is required and the consent box is not, and nothing on the
   page said so. A badge on each label said it loudly enough to become the
   loudest thing in the form, so: an asterisk, which everyone already reads,
   plus one legend above the first field. aria-hidden on the marks because the
   inputs carry aria-required and a screen reader saying it twice is worse.
   --------------------------------------------------------------------------- */

.req {
  margin-left: 0.15rem;
  color: var(--ruby);
  font-weight: 700;
}

/* Required field that has been touched and left empty. :user-invalid only
   fires after interaction, so it never scolds someone mid-typing. */
.request input:user-invalid,
.request textarea:user-invalid {
  border-color: var(--ruby);
  background: #fffafa;
}

/* ---------------------------------------------------------------------------
   Request support, beside the phone number on every page

   Calling is the fast path and stays ruby. This is the second path for people
   who do not want to phone, so it sits next to the call button in the same
   shape but outlined rather than filled: clearly a button, clearly secondary.
   It goes to the client area, where the form and the tools already live.
   --------------------------------------------------------------------------- */

.mast-support {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: 2px solid var(--ruby);
  border-radius: var(--radius);
  background: var(--ruby);
  color: var(--white);
  text-decoration: none;
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transition:
    background var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

/* The global a:hover turns links ruby. Pin it, same bug as the door chip. */
/* The only action in the chrome now that the call button has gone, so it takes
   the action color. Every state pinned, because the global a:hover would turn
   the label ruby on a ruby fill. */
.mast-support:hover,
.mast-support:focus-visible,
.mast-support:active {
  background: #9b0f19;
  border-color: #9b0f19;
  color: var(--white);
}

.mast-support:active {
  transform: scale(0.97);
}

/* The short label is for narrow screens only; one of the pair is always
   hidden so the button never reads as "Request supportSupport". */
.mast-support-s {
  display: none;
}

/* Narrow: two full labels plus four nav links will not fit. Shorten this one
   rather than reducing it to a bare icon. An unlabelled speech bubble is a
   guessing game, and plenty of the people who need this button least want to
   guess. The 44px floor keeps it thumb-sized once the type shrinks. */
@media (max-width: 720px) {
  .mast-support-t {
    display: none;
  }

  .mast-support-s {
    display: inline;
  }

  .mast-support {
    padding: 0.5rem 0.7rem;
    min-height: 44px;
    box-sizing: border-box;
  }
}


/* ---------------------------------------------------------------------------
   One look per action

   The masthead call button carried a phone icon and every in-body call button
   did not, so the same action wore two faces on the same page. The booking CTA
   had the same problem plus two different labels.

   The icon comes from CSS rather than repeated inline SVG, so a new call
   button cannot be added without it and the mark cannot drift between pages.
   Masked, not a background image, so it follows currentColor through every
   state including the inverted buttons on dark ground.
   --------------------------------------------------------------------------- */

.btn--call::before,
.btn--book::before {
  content: "";
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.btn--call {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.btn--book {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

/* The call button measured 41px tall on every phone width. It is the control
   most likely to be pressed with a thumb, in a hurry, by someone whose
   computer just died. Floor it like the others. */
@media (max-width: 720px) {
  .mast-call {
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* ---------------------------------------------------------------------------
   Line breaking

   "You can see where your…" and "Installing a remote tool…" both wrapped to a
   last line holding one word. That reads as a mistake, and I have hand-fixed
   it string by string twice, which does not hold: any copy edit or new width
   puts it back.

   Fix the mechanism instead. `balance` evens the lines of short blocks, which
   is what headings and ledes are; the spec limits it to six lines in Chromium
   and ten in Firefox, so it is only applied where blocks are short. `pretty`
   asks the browser to spend more effort on body copy specifically to avoid
   short last lines. Browsers without either ignore the declaration and wrap
   the way they do today, so there is nothing to fall back to.
   MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap-style
   --------------------------------------------------------------------------- */

h1,
h2,
h3,
.hook,
.lede,
.lede--dark,
.door-v,
.dir-sub,
.work-cap,
.asked-q,
.foot-line,
.offer-lede,
.hint {
  text-wrap: balance;
}

/* Short blocks take balance, which is at 92.7% global support. They are all
   well under the six-line ceiling Chromium puts on it.
   https://caniuse.com/css-text-wrap-balance */
.small,
.asked-a,
.check span,
.request-error,
.offer-points li,
.need-echo {
  text-wrap: balance;
}

/* pretty only as a bonus on long body copy. It needs Chrome 146, Safari 26.4
   or Firefox 149, so today it does nothing for almost everyone: never rely on
   it to fix a widow someone can actually see.
   https://caniuse.com/mdn-css_properties_text-wrap_pretty */
p,
li {
  text-wrap: pretty;
}

/* Short fixed strings should never break at all. An address or an opening
   time split across two lines is just harder to read. */
.foot-line,
.mast-since,
.trust-where,
.fact-v {
  text-wrap: balance;
  overflow-wrap: break-word;
}


/* ---------------------------------------------------------------------------
   Nav weight and separators

   Client Area was set at 600 while its neighbors sat at 400. A customer read
   the extra weight as "you are here" and went looking for a page they were
   already on. Weight in a nav means current page and nothing else, so the
   only bold item is now the one carrying aria-current.

   The separators go ruby to put some of the brand between the links, which is
   flair the nav can afford now that nothing else in it is competing.
   --------------------------------------------------------------------------- */

.nav-pipe {
  color: var(--ruby);
  opacity: 0.55;
  font-weight: 400;
}

.mast--over .nav-pipe {
  color: #ff9ba2;
  opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   Request support, in body

   The phone buttons on the front, business and home pages became these. The
   number now lives in the client area and the footer only, which keeps one
   path forward on every other page. Same speech bubble as the masthead
   button, so the two read as the same action.
   --------------------------------------------------------------------------- */

.btn--support {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.btn--support::before {
  content: "";
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
   Client area: form first, tools beside it

   The page used to be six equal tiles above the form. That asked someone with
   a broken machine to work out which of six things they wanted, when almost
   all of them wanted the form. The form is 1003px tall at desktop, taller than
   the viewport, so putting it on top alone would have pushed every tool below
   the fold. Two columns instead: the form leads, the tools stay in sight.

   One column under 980px, form first. Nothing about the form markup changed,
   because it is wired to Netlify and tested.
   --------------------------------------------------------------------------- */

.client-split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4rem);
  max-width: 78rem;
  margin: 0 auto;
}

@media (min-width: 980px) {
  .client-split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

.client-split .request-block {
  padding: 0;
  max-width: none;
}

.client-side {
  display: grid;
  gap: 1.75rem;
  align-content: start;
}

.tool-group {
  padding: 1.25rem 1.35rem 1.4rem;
  border: 2px solid var(--fog);
  border-left: 4px solid var(--ruby);
  border-radius: var(--radius-box);
  background: var(--white);
}

.tool-group h2 {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--charcoal);
}

.tool-lead {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--graphite);
}

/* The order is the instruction: request first, install second. Someone who
   installs and waits is the failure this exists to prevent. */
.tool-steps {
  margin: 0 0 1rem;
  padding: 0 0 0 1.15rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--charcoal);
}

.tool-steps li::marker {
  color: var(--ruby);
  font-weight: 700;
}

.tool-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

/* Outlined, not filled. The one ruby fill on this page is Send request; these
   are the things you reach for after it, and they should read that way. */
.tool-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.6rem 0.85rem;
  border: 2px solid var(--charcoal);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  text-decoration: none;
  transition:
    background var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

/* The global a:hover turns links ruby, which is the bug that has bitten this
   site three times. Pin every state. */
.tool-list a:hover,
.tool-list a:focus-visible,
.tool-list a:active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}

.tool-list a:hover .tool-v,
.tool-list a:focus-visible .tool-v {
  color: rgba(255, 255, 255, 0.8);
}

.tool-list a::after {
  content: "→";
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: inherit;
}

.tool-k {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.tool-v {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--graphite);
  transition: color var(--t) var(--ease);
}

.tool-group .small {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--graphite);
}

/* The label and description were flex siblings, so at phone width they sat in
   a row and "Work machine" broke across two lines beside its own subtitle.
   Wrapping them makes the row [text][arrow] and lets the text stack. */
.tool-t {
  display: block;
  min-width: 0;
}

/* The lead group carries the two ways to reach a person, so it gets weight the
   others do not: a filled ruby edge rather than a rule, and buttons instead of
   list rows. */
.tool-group--lead {
  border-color: var(--charcoal);
  border-left-width: 5px;
  border-left-color: var(--ruby);
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
}

.tool-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
}

/* Outlined twin of btn--primary. Booking is the unhurried path, so it should
   not compete with the phone beside it or with Send request in the column
   alongside. Every state pinned, because the global a:hover turns links ruby. */
.btn--ghost,
.btn--ghost:hover,
.btn--ghost:focus-visible,
.btn--ghost:active {
  color: var(--charcoal);
}

.btn--ghost {
  background: var(--white);
  border: 2px solid var(--charcoal);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--fog);
  border-color: var(--black);
}

.btn--ghost:focus-visible {
  outline: 3px solid var(--ruby);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Masthead on a phone

   Two full rows and 116px of it, 14% of the screen before any content. Worse,
   .mast-meta was display:none under 720px, so the wordmark vanished exactly
   where the tap target for "take me home" matters most. Elderly customers were
   the reason that link exists.

   So: bring the name back beside the mark, drop the tagline that was making it
   too wide, and tighten the nav so the whole thing costs less height.
   --------------------------------------------------------------------------- */

/* The bar is two rows everywhere under about 1000px, so it gets the tighter
   padding across that whole range, not only on phones. At 768 it was still
   138px, 16% of the screen before any content. */
@media (max-width: 1000px) {
  .mast {
    padding: 0.42rem 1rem;
    gap: 0.3rem 0.7rem;
  }
}

@media (max-width: 720px) {

  /* 320px cannot hold mark, name and button on one line. Everything above it
     can, and that is where the name earns its place. .mast--plain prefix
     because an earlier rule hides it at that specificity. */
  .mast--plain .mast-meta,
  .page-room .mast-meta,
  .page-client .mast-meta {
    display: none;
  }

  /* .mast--plain gave meta order 3 and nav order 4 while the support button
     kept the default 0, so it sorted in ahead of the wordmark and landed
     between the logo and the name. Order the whole bar explicitly instead of
     leaving three of four items to the default. */
  .mast-mark {
    order: 1;
  }

  .mast--plain .mast-meta,
  .page-room .mast-meta,
  .page-client .mast-meta {
    order: 2;
  }

  .mast-support {
    order: 3;
    margin-left: auto;
  }

  .mast--plain .mast-nav,
  .mast-nav {
    order: 4;
  }
}

@media (min-width: 360px) and (max-width: 720px) {
  .mast--plain .mast-meta,
  .page-room .mast-meta,
  .page-client .mast-meta {
    display: flex;
    align-items: center;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .mast-meta .dot,
  .mast-since {
    display: none;
  }

  .mast-name {
    font-size: 1rem;
    white-space: nowrap;
  }

  .mast-nav {
    flex: 1 0 100%;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.88rem;
  }

  .mast-support {
    font-size: 0.86rem;
    padding: 0.45rem 0.7rem;
  }
}


/* The privacy link now ends the consent sentence rather than sitting under it
   as another line. Inline, so it reads as part of the sentence, and given a
   little space so it is still findable at a glance. */
.consent-link {
  display: inline;
  margin-left: 0.25rem;
  color: var(--graphite);
  text-underline-offset: 0.18em;
}

.consent-link:hover,
.consent-link:focus-visible {
  color: var(--ruby);
}

/* ---------------------------------------------------------------------------
   Sectors: industries without an industries page

   Closed by default, so the band costs five rows rather than five screens.
   <details> rather than a JS accordion: it works with scripting off, it is
   keyboard operable for free, and Ctrl+F finds text inside a closed one in
   current browsers.
   --------------------------------------------------------------------------- */

.sectors {
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  max-width: 62rem;
  margin: 0 auto;
}

.sectors-head {
  margin-bottom: 1.5rem;
}

.sectors-head h2 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.sector-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.sector details {
  border: 2px solid var(--fog);
  border-left: 4px solid var(--ruby);
  border-radius: var(--radius-box);
  background: var(--white);
}

.sector details[open] {
  border-color: var(--charcoal);
  border-left-color: var(--ruby);
}

.sector summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 44px;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--t) var(--ease);
}

.sector summary::-webkit-details-marker {
  display: none;
}

/* The chevron is the affordance, so it has to rotate on open. */
.sector summary::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 2px solid var(--ruby);
  border-bottom: 2px solid var(--ruby);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform var(--t) var(--ease);
}

.sector details[open] summary::after {
  transform: rotate(-135deg);
}

.sector summary:hover {
  background: #f6f7f6;
}

.sector summary:focus-visible {
  outline: 3px solid var(--ruby);
  outline-offset: -2px;
}

.sector-k {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--charcoal);
  flex-shrink: 0;
}

.sector-v {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--graphite);
}

.sector-body {
  display: grid;
  gap: 1.1rem;
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid var(--fog);
  margin-top: -0.2rem;
  padding-top: 1rem;
}

@media (min-width: 720px) {
  .sector-body {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
  }
}

.sector-h {
  margin: 0 0 0.25rem;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ruby);
}

.sector-body p:not(.sector-h) {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--charcoal);
}

/* Narrow: the one-line description under each name would push the chevron off
   on a phone, so it stacks under the name instead of sitting beside it. */
@media (max-width: 640px) {
  .sector summary {
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
    align-items: baseline;
  }

  .sector summary .sector-k {
    flex: 1 1 auto;
  }

  .sector summary::after {
    align-self: center;
  }

  .sector summary .sector-v {
    flex: 1 0 100%;
  }
}

/* ---------------------------------------------------------------------------
   Going horizontal on wide screens

   The business page ran five screens at 1440px with a 1152px content cap, so
   there was unused width beside almost every band. These rules spend that
   width and do nothing below 960px, where the page is already one column and
   the vertical stack is correct.

   Both grids stay EVEN at every count. Eight coverage items go 2 or 4 across,
   never 3, and the sector list is six cells so it is 2 x 3 rather than 5 and a
   gap. Brian's rule: no lopsided tables.
   --------------------------------------------------------------------------- */

@media (min-width: 1180px) {
  .covered-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 78rem;
    gap: 1.6rem 2rem;
  }
}

@media (min-width: 960px) {
  .sectors {
    max-width: 78rem;
  }

  .sector-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1rem;
    align-items: start;
  }
}

/* The count is proof, not decoration: it is the number of active companies in
   that segment in Autotask. Quiet, beside the name, never a headline. */
/* Two columns means the summary has to stack: name and count on one line, the
   description under it, chevron to the right of both. */
@media (min-width: 960px) {
  .sector summary {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.9rem;
    padding: 0.9rem 1.1rem;
  }

  .sector summary .sector-k {
    flex: 1 1 auto;
  }

  .sector summary::after {
    align-self: center;
  }

  .sector summary .sector-v {
    flex: 1 0 100%;
  }
}

/* The sixth cell is a card, not a disclosure, so it carries its own frame. */
.sector--other {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 2px dashed #c9cbc9;
  border-radius: var(--radius-box);
  background: transparent;
}

.sector--other .sector-k {
  font-size: 1.02rem;
}

.sector--other .sector-v {
  margin: 0;
}

.sector--other .btn {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  padding: 0.6rem 0.9rem;
  min-height: 44px;
  box-sizing: border-box;
}

/* Wide screens were spending 750px of a 4435px page on vertical padding
   between bands, 17% of the scroll. Those gaps are sized for a phone, where
   one column needs the separation to read as separate sections. On a wide
   screen the bands already read apart because each one is a different width
   and color, so the gap can come down without them running together.
   Nothing here applies below 1180px. */
@media (min-width: 1180px) {
  .covered,
  .one-team {
    padding-block: 3.4rem;
  }

  .sectors {
    padding-block: 3rem;
  }

  .work,
  .says,
  .offer,
  .close {
    padding-block: 2.9rem;
  }
}

/* ---------------------------------------------------------------------------
   Offer band: who does the looking

   The right column of this band went empty when its second booking button was
   removed, and an empty half at the top of the page reads as unfinished. It
   now carries the case for us doing the review: the left side says what the
   review is, this says who turns up.
   --------------------------------------------------------------------------- */

.offer-why {
  border-left: 3px solid var(--ruby);
  padding-left: 1.2rem;
}

.offer-why-h {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.offer-why-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.95rem;
}

.why-k {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--white);
}

.why-v {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.76);
  text-wrap: balance;
}

/* Under the two-column breakpoint the band is one column, so the rule becomes
   a divider above rather than a spine beside. */
@media (max-width: 860px) {
  .offer-why {
    border-left: 0;
    padding-left: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.16);
    padding-top: 1.3rem;
    margin-top: 0.4rem;
  }
}

/* ---------------------------------------------------------------------------
   One content column, and cards that line up

   Three faults on this page, all of them measurable rather than matters of
   taste: the heading started 80px left of the cards below it, the two cards
   were 246px and 205px tall, and the closing line was capped at 558px by the
   global paragraph measure while the cards beside it ran to 992px.

   The standard, applied to every band on the page:

     same column     one max-width and one gutter, so left edges line up all
                     the way down
     equal heights   side-by-side cards stretch, they do not sit at their own
                     content heights
     shared baseline the repeated element in each card, here the footnote, is
                     pushed to the bottom so the pair reads as a row

   The global p measure is right for running text and wrong for a band that is
   one sentence wide; it is overridden where a paragraph IS the band.
   --------------------------------------------------------------------------- */

.page-client .help-now,
.remote-split,
.remote-ask {
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

.remote-split {
  display: grid;
  gap: 1.1rem;
  padding-bottom: 1.1rem;
}

@media (min-width: 820px) {
  .remote-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.remote-split .tool-group {
  display: flex;
  flex-direction: column;
}

/* Footnotes to the bottom edge, so the two cards share a baseline even when
   one has a line more of lead text than the other. */
.remote-split .tool-group .small {
  margin-top: auto;
  padding-top: 0.85rem;
}

.remote-ask {
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* The ask sits under both tools rather than inside either, because it applies
   to both and is the step people skip. */
.remote-ask p {
  max-width: none;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--ruby);
  background: var(--white);
  border-radius: var(--radius-box);
  font-size: 0.95rem;
  color: var(--charcoal);
}

.remote-ask a {
  color: var(--ruby);
  font-weight: 700;
}

.remote-ask a:hover,
.remote-ask a:focus-visible {
  color: #9b0f19;
}

/* Cards in a row are the same height. Applying the same standard the remote
   page now follows to the two other card rows on the site: the sector list,
   where one description wrapping to a second line left a 105px step beside
   the "Not on this list?" card, and the One team row. */
.sector-list,
.one-team-list {
  align-items: stretch;
}

/* The card has to fill its list item so a stretched row does not leave a short
   card floating in it. Done with flex, not height:100%: a percentage height
   against an auto grid row is circular, and the browser resolved it to a row
   shorter than the content, which pushed the "Not on this list?" button 102px
   out through the bottom of its own card. */
.sector {
  display: flex;
}

.sector > details {
  flex: 1;
  min-width: 0;
}

.one-team-list > li {
  display: flex;
  flex-direction: column;
}

/* Same rule, the One team band: its copy column and list column sat 7px apart.
   Both are transparent, so matching them costs nothing and removes a step
   that is visible once you know to look for it. */
.one-team {
  align-items: stretch;
}

/* --- the crew, the mural, and a two-up work grid ------------ */

/* Matches .work exactly: same padding, same 72rem column, so the band lines
   up with the grid above it rather than floating in its own measure. */
.crew {
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
  max-width: 72rem;
  margin: 0 auto;
}

.crew-figure {
  margin: 0;
}

.crew-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-box);
  background: var(--charcoal);
}

/* The work grid auto-fits, so two items would stretch to half the row each and
   tower over a three-up grid on the next page. Cap them at a third apiece. */
.work-grid--pair {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem));
}

/* The team photo rides at the foot of the copy column in .one-team, which is
   already a two-column grid. Nothing here may add a third grid child. */
.team-figure {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
}

.team-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-box);
  background: var(--charcoal);
}

.team-figure figcaption {
  margin-top: 0.7rem;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--graphite);
}

/* The mural sits in .places, which is charcoal on bone. It is the only image
   on the site we did not make, so the credit is part of the component. */
/* Two of these sit side by side under the locations. Side by side means the
   image cannot sit beside its own text as well, so each block stacks: picture,
   then the line, then the reason. */
.plaque-pair {
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.6rem, 4vw, 2.6rem);
  align-items: stretch;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  padding-top: clamp(1.6rem, 4vw, 2.4rem);
}

.plaque {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* One ratio for both, enforced here rather than by cutting the two sources to
   match. A 1400x760 frame and a 1200x1162 one would otherwise leave the pair
   ending at different heights, which is the ragged row we keep fixing. */
.plaque img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-box);
  background: var(--charcoal);
}

.plaque-cap {
  display: grid;
  gap: 0.5rem;
  align-content: center;
}

.plaque-k {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 600;
  color: var(--bone);
}

.plaque-v {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: rgb(247 245 242 / 0.86);
  text-wrap: balance;
}

.plaque-credit {
  font-family: var(--body);
  font-size: 0.84rem;
  color: rgb(247 245 242 / 0.6);
}



/* --- the quote rail ---------------------------------------- */

/* A carousel without the carousel. Everything is in the DOM, so it is
   findable, printable and readable with styles off; there is no JavaScript, no
   auto-advance to fight, and nothing to pause. tabindex on the region is what
   makes it reachable by keyboard: a scroll container is not focusable on its
   own in every browser, and arrow keys need somewhere to land. */
.says-rail {
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 0.25rem;
}

.says-rail:focus-visible {
  outline: 2px solid var(--ruby);
  outline-offset: 4px;
  border-radius: var(--radius-box);
}

/* Inside the rail the list stops being a wrapping grid and becomes one row of
   fixed-width cards. Anything outside a rail keeps the old behavior. */
.says-rail .says-list {
  margin: 0;
  grid-template-columns: none;
  grid-auto-flow: column;
  /* --peek is how many cards fit across. The .5 is the point: the last one is
     cut in half, which is the whole affordance. */
  --peek: 3.5;
  --rail-gap: 2.2rem;
  grid-auto-columns: calc(
    (100% - (var(--peek) - 1) * var(--rail-gap)) / var(--peek)
  );
  gap: var(--rail-gap);
  align-items: start;
}

@media (max-width: 62rem) {
  .says-rail .says-list {
    --peek: 2.4;
  }
}

@media (max-width: 40rem) {
  .says-rail .says-list {
    --peek: 1.2;
    --rail-gap: 1.4rem;
  }
}

/* Cards in one row have to end level, and these quotes are different lengths
   that nobody gets to edit. So the row stretches, each card becomes a column,
   and the quote takes the slack -- which pushes the attribution to the foot of
   every card and runs the ruby rule the full height of it.

   flex: 1 1 auto, deliberately. A basis of 100% inside a flex column resolves
   against the container's HEIGHT, which is how a button escaped its card
   earlier in this build. */
.says-rail .says-list {
  align-items: stretch;
}

.says-rail .says-item {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.says-rail .says-item blockquote {
  flex: 1 1 auto;
}

/* The home page runs two quotes under the review scores, where a full-height
   rail would shout louder than the section it sits in. */
/* Who said it, and under whose sign they said it. The provenance line is part
   of the component, not decoration: these customers praised iTechCare 24/7 by
   name, and the attribution has to keep saying so. */
.says-prov {
  margin: 0.25rem 0 0 1.1rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--graphite);
  opacity: 0.85;
}

/* Arrow buttons, added by main.js. The scrollbar is hidden only on a rail
   that actually got them, so a browser where the script never ran keeps its
   native affordance instead of losing both. */
.says-rail--enhanced {
  scrollbar-width: none;
}

.says-rail--enhanced::-webkit-scrollbar {
  display: none;
}

.rail-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
}

.rail-wrap .says-rail {
  margin: 0;
}

/* No room to flank on a phone, and none needed: the half card already says
   there is more, and the rail takes a swipe. */
@media (max-width: 40rem) {
  .rail-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail-wrap .rail-btn {
    display: none;
  }
}

/* 44px square: over the 24px WCAG 2.5.8 floor at every width, and over the
   44px the audit asks for on phones, so one size serves both. */
.rail-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(46 46 46 / 0.22);
  border-radius: 999px;
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, opacity 0.15s ease;
}

/* Every state pinned. The global a:hover sets color on links, and a control
   that inherits it has burned this build four times; a button is not a link,
   but the habit is cheap. */
.rail-btn:hover:not(:disabled) {
  border-color: var(--ruby);
  background: var(--ruby);
  color: #fff;
}

.rail-btn:focus-visible {
  outline: 2px solid var(--ruby);
  outline-offset: 3px;
}

.rail-btn:disabled {
  opacity: 0.32;
  cursor: default;
}


/* The lead line above the SMS consent box. Same weight as a field label so it
   reads as part of the form rather than as more fine print, and it collapses
   the checkbox's own top margin so the two group as one block. */
.check-lead {
  margin: 1.4rem 0 0.45rem;
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--charcoal);
}

.check-lead + .check {
  margin-top: 0;
}

/* Inline notes under a form field: a shape complaint, or a suggested fix for
   a mistyped domain. Quiet by default because most of what they say is a
   question rather than an error, and a form that shouts at people gets
   abandoned. */
.field-note {
  margin: 0.35rem 0 0;
  font-family: var(--body);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--graphite);
}

.field-note[hidden] {
  display: none;
}

/* The suggestion is a real button, not a link: it changes the field rather
   than going anywhere. Styled as the sentence it sits in so it reads as part
   of the question, with the underline carrying the affordance. */
/* Scoped to .request because `.request button` sets a submit button's margin
   and padding, and a lone .field-fix loses to it on specificity. That is how
   the suggestion first rendered 160px wide with 24px of space above it. */
.request .field-fix {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ruby);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.request .field-fix:hover,
.request .field-fix:focus-visible {
  color: #9b0f19;
}