/* Housecall PA Co. — rebuilt 2026-08-05.
   Replaces page-forge's generated stylesheet outright.

   The world: an equipment cut sheet. DIN, the rate card and every Instagram
   asset commit this brand to spec-sheet register — measured, unfussy, the
   vendor you'd be relieved to find. So the page is built from hairline rules,
   a strict left rag, tabular figures, and amber used as a signal rather than
   as decoration. Sauce comes from precision, not volume. */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Ground and ink */
  --black:       #0D0D0F;   /* the rate card's field */
  --black-soft:  #141416;   /* alternate bands, barely separated */
  --amber:       #F79E4A;   /* signal. Never a background for light text. */
  --amber-deep:  #9E5613;   /* the same hue, legible on white */
  --paper:       #FBFAF9;
  --ink:         #101012;
  --ink-soft:    #57565A;   /* on paper: 7.1:1 */
  --dim:         #A5A2A0;   /* on black: 7.4:1 */
  --rule:        #2A2A2D;
  --rule-light:  #E3E1DE;

  /* Barlow Condensed, self-hosted. DIN Condensed is an Apple system face and
     cannot legally be redistributed on a website; without a real web font the
     page fell back to HelveticaNeue-Condensed, which exists only on Macs — so
     every Windows and Android visitor got generic sans and none of the brand.
     Barlow is the closest open-licensed match (SIL OFL): same narrow grotesque
     skeleton, same flat terminals. Latin subset only, two weights, 30KB total,
     served from this origin so there is no third-party request. */
  --font-display: "Barlow Condensed", "HelveticaNeue-CondensedBold",
                  "Arial Narrow", sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;

  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 40px);
  --step: clamp(56px, 9vw, 104px);
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

a { color: inherit; }

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

/* Display type. Tracking is negative at every size — the condensed fallbacks
   set loose next to DIN, and letting them run wide is what would make this
   read as a default rather than a decision. */
h1, h2, h3, .mark, .cta, .spec dt, .rate-table td, .rate-table strong {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
}

/* The small tracked labels drop to 600. At 12–15px with 0.16–0.2em tracking,
   700 reads as a smudge rather than as a label — the weight step is what
   separates the page's signage from its headlines. */
.mark, .spec dt, h2 { font-weight: 600; }

/* ------------------------------------------------------------- masthead */
.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
.masthead .wrap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.mark {
  color: var(--amber);
  font-size: 15px;
  letter-spacing: 0.16em;
}
.mark-loc {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------- hero */
.hero { padding: clamp(56px, 11vw, 116px) 0 var(--step); }

.hero h1 {
  margin: 0;
  font-size: clamp(52px, 11.5vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lede {
  max-width: 46ch;
  margin: 28px 0 0;
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--dim);
}

.actions { margin-top: 40px; }

.actions-note {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--dim);
}
.actions-note strong { color: var(--paper); font-weight: 600; }

/* The single call to action. No emoji — the arrow is drawn, one stroke
   weight, and it is the only icon on the page. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--amber);
  color: var(--black);
  font-size: 19px;
  letter-spacing: 0.02em;
  padding: 17px 26px;
  text-decoration: none;
  border: 1px solid var(--amber);
  transition: background 180ms cubic-bezier(.16,1,.3,1),
              color 180ms cubic-bezier(.16,1,.3,1);
}
.cta:hover, .cta:focus-visible {
  background: transparent;
  color: var(--amber);
}
.cta-arrow {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
}
.cta:hover .cta-arrow, .cta:focus-visible .cta-arrow { transform: translateX(4px); }

/* ----------------------------------------------------------- spec strip */
.spec {
  border-block: 1px solid var(--rule);
  background: var(--black-soft);
}
.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.spec-row:last-child { border-bottom: 0; }
.spec dt {
  color: var(--amber);
  font-size: 13px;
  letter-spacing: 0.18em;
}
.spec dd {
  margin: 0;
  color: var(--paper);
  font-size: 15px;
  text-align: right;
}

@media (min-width: 720px) {
  .spec-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }
  .spec-row {
    display: block;
    border-bottom: 0;
    border-left: 1px solid var(--rule);
    padding: 26px 20px;
  }
  .spec-row:first-child { border-left: 0; padding-left: 0; }
  .spec dd { text-align: left; margin-top: 8px; }
}

/* -------------------------------------------------------------- sections */
.section { padding: var(--step) 0; }
.section-alt { background: var(--black-soft); border-block: 1px solid var(--rule); }

h2 {
  margin: 0 0 8px;
  font-size: clamp(13px, 1.6vw, 14px);
  letter-spacing: 0.2em;
  color: var(--amber);
}

.points {
  display: grid;
  gap: 0;
  margin-top: 28px;
}
.points article {
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
.points article:last-child { border-bottom: 1px solid var(--rule); }
.points h3 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: -0.015em;
}
.points p {
  margin: 0;
  max-width: var(--measure);
  color: var(--dim);
}

@media (min-width: 800px) {
  .points { grid-template-columns: repeat(3, 1fr); gap: 0 36px; }
  .points article { border-bottom: 1px solid var(--rule); }
}

/* Built-for list. Hairline rows, not tabbed cards — it has to sit in the same
   system as the rate table, which is the page's other list of facts. */
.built {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.built li {
  padding: 13px 0 13px 20px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  color: var(--paper);
}
.built li:first-child { border-top: 1px solid var(--rule); }
.built li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.35em;
  width: 5px; height: 5px;
  background: var(--amber);
}

@media (min-width: 720px) {
  .built { columns: 2; column-gap: 44px; }
  .built li { break-inside: avoid; }
}

/* The page's sharpest line gets the page's only inverted block. */
.not-for {
  margin: 32px 0 0;
  padding: 20px 22px;
  background: var(--amber);
  color: var(--black);
  max-width: var(--measure);
  font-size: 16px;
}
.not-for strong { font-weight: 700; }

/* ---------------------------------------------------------------- rates */
.rate-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 28px;
  font-variant-numeric: tabular-nums;
}
.rate-table tr { border-bottom: 1px solid var(--rule); }
.rate-table tr:first-child { border-top: 1px solid var(--rule); }
.rate-table th {
  text-align: left;
  font-weight: 400;
  font-size: 16px;
  padding: 18px 12px 18px 0;
  color: var(--paper);
}
.rate-table th span {
  display: block;
  font-size: 13px;
  color: var(--dim);
  margin-top: 3px;
}
.rate-table td {
  text-align: right;
  padding: 18px 0;
  font-size: clamp(22px, 3.6vw, 30px);
  color: var(--dim);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.rate-table strong { color: var(--amber); font-weight: 700; }

.terms {
  margin: 24px 0 0;
  max-width: var(--measure);
  font-size: 15px;
  color: var(--dim);
}
.terms strong { color: var(--paper); font-weight: 600; }

/* -------------------------------------------------------------- closing */
.closing {
  padding: var(--step) 0;
  border-top: 1px solid var(--rule);
}
.closing h2 { color: var(--amber); }
.closing p {
  margin: 12px 0 32px;
  max-width: 42ch;
  color: var(--dim);
  font-size: clamp(17px, 2.1vw, 19px);
}
.cta-light {
  background: transparent;
  color: var(--amber);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-text);
  font-weight: 600;
}
.cta-light:hover, .cta-light:focus-visible {
  background: var(--amber);
  color: var(--black);
}
.closing-ig { margin: 24px 0 0; font-size: 15px; }
.closing-ig a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--rule); }
.closing-ig a:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* --------------------------------------------------------------- footer */
footer {
  border-top: 1px solid var(--rule);
  padding: 26px 0 40px;
  font-size: 13px;
  color: var(--dim);
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

/* --------------------------------------------------------------- motion */
/* One authored moment: the headline settles in from a soft mask on load.
   It starts visible — the animation refines an already-readable page rather
   than gating content behind JavaScript or a delay. */
@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
.reveal { animation: settle 900ms cubic-bezier(.16, 1, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}