/* ==========================================================================
   surpluselectricalwirebuyers.com
   Design system: "Reel Tag" — industrial spec-sheet clarity, MOBILE-FIRST.
   Palette: white page, black ink and black identity surfaces, #ffd400 yellow
   as the single accent (it does ALL the accent work on dark surfaces since
   those are now black). Flat fills, squarish corners, no gradients on
   surfaces, no dark mode, ZERO JavaScript.
   Structure rules:
     * base styles = phone; min-width media queries add desktop
     * two header tiers, nav is a horizontal scroll rail on phones
     * sticky bottom action bar on phones only
     * hero is ONE banded unit (black + wire photo + scrim)
     * sections alternate white / wash / black so ideas stay separated
     * every tap target >= 44px, buttons full-width on phones
   ========================================================================== */

:root {
  --ink-900: #111111;
  --ink-950: #000000;
  --ink-link: #1a1a1a;
  --hair: #e6e6e6;
  --wash: #fafaf7;
  --yellow: #ffd400;
  --yellow-deep: #e6bf00;
  --yellow-wash: #fff9db;
  --ink: #141414;
  --ink-deep: #000;
  --white: #fff;
  --gray-100: #f5f5f4;
  --gray-150: #ededec;
  --gray-200: #e3e3e3;
  --gray-300: #b7b7b7;
  --gray-600: #595959;
  --gray-800: #353535;
  --cond: "Barlow Condensed", "Oswald", "Arial Narrow", "Helvetica Neue",
    Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --wrap: 1180px;
  --gut: 18px;
  --pad-y: 34px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 15.6px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  /* the floating call button overlays the corner, so no reserved strip is
     needed — just enough room that it never sits on the last line of text */
  padding-bottom: 18px;
}

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

a {
  color: var(--ink-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--ink-950);
}

h1,
h2,
h3,
h4 {
  font-family: var(--cond);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.62rem, 6.6vw, 3rem);
  letter-spacing: 0.002em;
  line-height: 1.06;
}
h2 {
  font-size: clamp(1.36rem, 5.1vw, 2.25rem);
}
h3 {
  font-size: clamp(1.06rem, 3.7vw, 1.4rem);
}
h4 {
  font-size: 1.08rem;
  text-transform: none;
  letter-spacing: 0;
}
p {
  margin: 0 0 1.05em;
  text-wrap: pretty;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.narrow {
  max-width: 820px;
}

/* skip link ------------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--yellow);
  color: var(--ink);
  padding: 10px 16px;
  font-weight: 700;
  z-index: 100;
}
.skip:focus {
  left: 0;
}

/* anchor targets must clear the sticky masthead */
:target,
[id] {
  scroll-margin-top: 76px;
}

/* ================================================================ header */
/* Tier 1: slim dark utility strip. Hidden on phones — the fixed bottom
   action bar already carries call + quote, so this bar is dead weight there. */
.topbar {
  display: none;
  background: var(--ink-deep);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 36px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.topbar b {
  color: var(--yellow);
}
.topbar a {
  color: #fff;
  text-decoration: none;
}
.topbar a:hover {
  color: var(--yellow);
}
.topbar ul {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar .tagline {
  display: none; /* phone: not enough room, restored at >=1120px */
}
.topbar .email {
  display: none; /* phone: the email is long; keep the phone number only */
}

/* Tier 2: sticky white masthead */
.masthead {
  border-bottom: 3px solid var(--ink-900);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 56px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.brand img {
  width: 27px;
  height: 32px;
  flex: none;
}
.brand .bwrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.brand .bt {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.04;
  font-size: 0.78rem;
  letter-spacing: 0.015em;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.brand .bt i {
  font-style: normal;
  color: var(--ink-900);
  letter-spacing: 0.01em;
}
.brand .bs {
  display: none; /* phone: drop the strapline, restored on desktop */
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-600);
  font-family: var(--body);
  font-weight: 600;
  margin-top: 4px;
}

.head-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
/* the masthead phone chip is desktop-only: phones get the fixed bottom bar */
.head-cta .tel,
.head-cta .btn {
  display: none;
}

.tel {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  padding: 9px 15px;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  border: 2px solid var(--ink);
  white-space: nowrap;
  transition: background 160ms var(--ease-out);
}
.tel span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tel:hover {
  background: var(--yellow-deep);
  color: var(--ink);
}

/* nav: horizontal scroll rail on phones, no wrapping stack ---------------- */
.mainnav {
  background: var(--ink-900);
  border-bottom: 1px solid var(--ink-950);
}
.mainnav .wrap {
  padding: 0;
}
/* the rail scrolls on phones; a fade on the right edge signals "more" so a
   half-cut word never reads as a broken layout */
.mainnav .rail {
  position: relative;
}
.mainnav .rail::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(17, 17, 17, 0), var(--ink-900) 72%);
}
.mainnav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 30px 0 8px;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mainnav ul::-webkit-scrollbar {
  display: none;
}
.mainnav a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: var(--cond);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 11px 12px;
  white-space: nowrap;
}
.mainnav a:hover,
.mainnav a[aria-current="page"] {
  background: var(--ink-950);
  color: #fff;
}

/* =========================================================== breadcrumbs */
.crumbs {
  font-size: 13px;
  color: var(--gray-600);
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-100);
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.crumbs ol::-webkit-scrollbar {
  display: none;
}
.crumbs li::after {
  content: "›";
  margin-left: 6px;
  color: var(--gray-300);
}
.crumbs li:last-child::after {
  content: "";
}
.crumbs a {
  color: var(--ink-link);
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
}

/* ================================================================== hero */
/* One banded unit: a solid BLACK surface carrying a yellow eyebrow, white
   headline and a white-mounted wire photo. The band is black at every
   breakpoint, so headline contrast never depends on the photo behind it. */
.hero {
  position: relative;
  background: var(--ink-950);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Faint yellow hairline grid: reads as engineering paper and keeps the black
   band from looking like dead space. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      90deg,
      rgba(255, 212, 0, 0.075) 1px,
      transparent 1px
    ),
    linear-gradient(180deg, rgba(255, 212, 0, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  z-index: -1;
  pointer-events: none;
}
/* The hero photo sits in its own white mount on the black band, with a yellow
   rule along the bottom edge tying it back to the accent. */
.hero-media {
  margin: 22px 0 0;
  border: 1px solid #303030;
  border-bottom: 4px solid var(--yellow);
  background: #fff;
  padding: 5px;
  display: block;
}
.hero-media img {
  width: 100%;
  /* Fixed landscape window rather than the photo's intrinsic 4:3. Letting the
     image run tall stretched the hero grid row far past the copy column and
     pushed the photo off the first screen. Cropping to 16:10 keeps the reels
     legible while the band stays roughly one viewport tall. */
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 auto;
}
.hero .wrap {
  padding-top: 26px;
  padding-bottom: 26px;
  position: relative;
}
.hero h1 {
  color: #fff;
  margin-bottom: 12px;
}
.hero .lede {
  color: #dcdcdc;
  font-size: 1.02rem;
  margin-bottom: 18px;
  max-width: 60ch;
}
.hero .eyebrow {
  color: var(--yellow);
}
.hero .eyebrow::before {
  background: var(--yellow);
}
/* trust row inside the hero */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  list-style: none;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #303030;
  font-size: 13.5px;
  color: #d0d0d0;
}
.hero-facts li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-facts li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--yellow);
  flex: none;
}

.eyebrow {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink-900);
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 4px;
  background: var(--yellow);
  flex: none;
}
.lede {
  font-size: 1.1rem;
  color: #333;
  max-width: 62ch;
}

/* photo frame ----------------------------------------------------------- */
.shot {
  border: 1px solid var(--gray-300);
  background: #fff;
  padding: 6px;
  margin: 0;
}
.shot figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--gray-600);
  text-transform: uppercase;
  padding: 8px 3px 2px;
  border-top: 1px solid var(--gray-200);
  margin-top: 6px;
}
.shot img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 42%;
  width: 100%;
}

/* =============================================================== buttons */
.btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--yellow);
  color: var(--ink-950);
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
  padding: 11px 22px;
  min-height: 44px;
  text-decoration: none;
  border: 2px solid var(--ink-950);
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:hover {
  background: var(--yellow-deep);
  border-color: var(--ink-950);
  color: var(--ink-950);
}
.btn:active {
  transform: scale(0.97);
}
.btn-yellow {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--ink-950);
}
.btn-yellow:hover {
  background: var(--yellow-deep);
  border-color: var(--yellow-deep);
  color: var(--ink);
}
.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}
.btn-ghost:hover {
  background: #fff;
  color: var(--ink-950);
  border-color: #fff;
}
.btn-alt {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-alt:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btnrow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

/* ================================================================ blocks */
.band {
  padding: var(--pad-y) 0;
}
.band + .band {
  border-top: 1px solid var(--gray-200);
}
.band-tint {
  background: var(--gray-100);
  border-top: 1px solid var(--gray-200);
}
.band-wash {
  background: var(--wash);
  border-top: 1px solid var(--hair);
}
.band-dark {
  background: var(--ink-950);
  color: #fff;
  border-top: none;
}
.band-dark h2,
.band-dark h3 {
  color: #fff;
}
.band-dark a {
  color: var(--yellow);
}

.sechead {
  border-bottom: 3px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.sechead h2 {
  margin: 0;
}
.sechead p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gray-600);
}
.band-dark .sechead {
  border-bottom-color: var(--yellow);
}
.band-dark .sechead p {
  color: #cfcfcf;
}

/* value props: solid tinted cards, 2-up on phones ------------------------ */
.props {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--gray-200);
}
.props div {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  border-left: 4px solid var(--ink-900);
  padding: 13px 0 13px 13px;
}
.props b {
  font-family: var(--cond);
  text-transform: uppercase;
  font-size: 1.04rem;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0.02em;
  line-height: 1.14;
}
.props p {
  margin: 0;
  font-size: 14.2px;
  color: #444;
  line-height: 1.5;
}
.props .n {
  display: none; /* the 01/02/03/04 numerals read as a wireframe */
}

/* credibility stat strip ------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.stats div {
  background: var(--ink-950);
  padding: 11px 9px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 74px;
}
.stats b {
  display: block;
  font-family: var(--cond);
  font-size: 1.18rem;
  line-height: 1.05;
  color: var(--yellow);
  letter-spacing: 0.01em;
}
.stats span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d8efdf;
  margin-top: 4px;
  line-height: 1.26;
}

/* generic column grids -------------------------------------------------- */
.cols2,
.cols3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* card ------------------------------------------------------------------ */
.card {
  border: 1px solid var(--gray-200);
  padding: 18px;
  background: #fff;
}
.card h3 {
  margin-bottom: 8px;
}
.card p:last-child {
  margin-bottom: 0;
}
.card-tint {
  background: var(--wash);
  border-color: var(--hair);
}

/* type cards with imagery: 2-up on phones -------------------------------- */
.typegrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-200);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}
.tcard:hover {
  border-color: var(--ink-900);
  color: var(--ink);
  transform: translateY(-2px);
}
.tcard img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 42%;
}
.tcard .tc-bd {
  padding: 11px 12px 13px;
  border-top: 3px solid var(--ink-900);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tcard strong {
  font-family: var(--cond);
  text-transform: uppercase;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  display: block;
}
.tcard .go {
  font-family: var(--cond);
  text-transform: uppercase;
  font-size: 0.84rem;
  letter-spacing: 0.07em;
  color: var(--ink-link);
  margin-top: auto;
  padding-top: 9px;
}

/* numbered process steps ------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 20px 52px;
  border-left: 2px solid var(--gray-200);
  margin-left: 16px;
}
.steps li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: -17px;
  top: 0;
  width: 32px;
  height: 32px;
  background: var(--ink-900);
  color: #fff;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.16rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps h3 {
  margin: 3px 0 6px;
  font-size: 1.12rem;
}
.steps p {
  margin: 0;
  font-size: 15.5px;
  color: #444;
}

/* spec table ------------------------------------------------------------ */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0 0 18px;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-600);
  padding-bottom: 8px;
}
.spec th,
.spec td {
  border: 1px solid var(--gray-300);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.spec th {
  background: var(--gray-100);
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
}
.spec td.mono {
  font-family: var(--mono);
  font-size: 13.5px;
}

/* checklist ------------------------------------------------------------- */
ul.check {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
ul.check li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
ul.check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 11px;
  height: 11px;
  background: var(--ink-900);
}

/* link lists ------------------------------------------------------------ */
.linkgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  font-size: 14.4px;
}
.linkgrid a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
}
.linkgrid a:hover {
  text-decoration: underline;
}
/* One form per screen. On phones the split collapses, so the sidebar copy of
   the quote form would appear a second time directly above the footer one.
   Hide the sidebar instance until there is a real sidebar to put it in. */
.quote-side {
  display: none;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 6px;
  list-style: none;
}
.chips a {
  display: inline-block;
  border: 1px solid var(--gray-300);
  padding: 9px 13px;
  text-decoration: none;
  font-size: 14.5px;
  background: #fff;
  color: var(--ink);
}
.chips a:hover {
  border-color: var(--ink-900);
  color: var(--ink-950);
  background: var(--wash);
}

/* ============================================================ quote form */
.quote {
  border: 1px solid var(--gray-300);
  background: #fff;
}
.quote-hd {
  background: var(--ink-950);
  color: #fff;
  padding: 16px 18px;
}
.quote-hd h2,
.quote-hd h3 {
  margin: 0;
  color: #fff;
  font-size: 1.4rem;
}
.quote-hd p {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: #d6d6d6;
}
.quote-bd {
  padding: 18px;
}
.fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.f-full {
  grid-column: 1 / -1;
}
.quote label {
  display: block;
  font-family: var(--cond);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.quote label i {
  font-style: normal;
  color: var(--ink-900);
}
.quote input,
.quote select,
.quote textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* prevents iOS zoom-on-focus */
  padding: 12px;
  min-height: 46px;
  border: 1px solid var(--gray-600);
  background: #fff;
  color: var(--ink);
  border-radius: 0;
}
.quote textarea {
  min-height: 110px;
  resize: vertical;
}
.quote input:focus,
.quote select:focus,
.quote textarea:focus {
  outline: 3px solid var(--ink-900);
  outline-offset: 1px;
  border-color: var(--ink-900);
}
.quote button {
  font-family: var(--cond);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 1.18rem;
  background: var(--yellow);
  color: var(--ink-950);
  border: 2px solid var(--ink-950);
  padding: 15px 30px;
  min-height: 52px;
  cursor: pointer;
  width: 100%;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.quote button:hover {
  background: var(--yellow-deep);
  border-color: var(--ink-950);
}
.quote button:active {
  transform: scale(0.98);
}
.quote .fineprint {
  font-size: 13px;
  color: var(--gray-600);
  margin: 12px 0 0;
}
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =================================================================== faq */
.faq {
  border-top: 1px solid var(--gray-300);
}
.faq > div {
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 0;
}
.faq h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--cond);
}
.faq p {
  margin: 0;
  color: #333;
}

/* callout / phone strip -------------------------------------------------- */
.strip {
  background: var(--ink-900);
  color: #fff;
  padding: 26px 0;
}
.strip .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.strip h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 5vw, 2rem);
}
.strip p {
  margin: 5px 0 0;
  color: #eafff1;
  font-size: 15px;
}
.strip .tel {
  width: 100%;
  justify-content: center;
}

/* ======================================== floating call button (phones) */
/* One tap target, one job: dial the cell. Sits clear of the content in the
   bottom-right corner and never covers a form field. */
.callfab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 3px solid var(--yellow);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition:
    transform 160ms var(--ease-out),
    background 160ms var(--ease-out);
}
.callfab svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  display: block;
}
.callfab:hover {
  background: var(--ink-950);
}
.callfab:active {
  transform: scale(0.94);
}
/* screen-reader-only label so the button is not an unlabelled icon */
.callfab span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ================================================================ footer */
.contactblock {
  margin: 22px 0 0;
  border-left: 4px solid var(--ink-900);
  padding-left: 18px;
}
.contactblock p {
  margin: 0 0 16px;
}
.contactblock p:last-child {
  margin-bottom: 0;
}
.contactblock strong {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.86rem;
  color: var(--gray-600);
}
.biglink {
  font-family: var(--cond);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink-link);
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.biglink:hover {
  text-decoration: underline;
  color: var(--ink-950);
}

footer {
  background: var(--ink-deep);
  color: #cfcfcf;
  padding: 32px 0 24px;
  font-size: 15px;
}
footer h4 {
  color: #fff;
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.04rem;
  margin: 0 0 11px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--ink-900);
}
footer a {
  color: #cfcfcf;
  text-decoration: none;
}
footer a:hover {
  color: var(--yellow);
  text-decoration: underline;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer li {
  margin-bottom: 8px;
}
.fgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}
.fbrand img {
  width: 42px;
  height: 50px;
  margin-bottom: 10px;
}
.legal {
  border-top: 1px solid #3a3536;
  margin-top: 26px;
  padding-top: 16px;
  font-size: 13px;
  color: #9a9a9a;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==================================================== >= 620px (phablet) */
@media (min-width: 620px) {
  :root {
    --gut: 22px;
    --pad-y: 46px;
  }
  .topbar .email {
    display: inline;
  }
  .topbar .wrap {
    justify-content: flex-end;
  }
  .props {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    border-top: none;
  }
  .props div {
    border: 1px solid var(--gray-200);
    border-top: 4px solid var(--ink-900);
    padding: 16px 15px;
  }
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .typegrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .btnrow {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .btn {
    display: inline-block;
    width: auto;
  }
  .strip .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .strip .tel {
    width: auto;
  }
  .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .legal {
    flex-direction: row;
    justify-content: space-between;
  }
  .cols2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .linkgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sechead {
    padding-bottom: 10px;
  }
  .sechead p {
    max-width: 74ch;
  }
}

/* ====================================================== >= 900px (tablet) */
@media (min-width: 900px) {
  :root {
    --pad-y: 58px;
  }
  .topbar {
    display: block;
  }
  body {
    padding-bottom: 0; /* floating call button is hidden from here up */
  }
  .callfab {
    display: none;
  }
  .masthead .wrap {
    padding-top: 14px;
    padding-bottom: 14px;
    min-height: 84px;
    gap: 18px;
  }
  .quote-side {
    display: block; /* a real sidebar exists from here up */
  }
  .brand img {
    width: 44px;
    height: 53px;
  }
  .brand {
    gap: 14px;
  }
  .brand .bt {
    font-size: 1.16rem;
    white-space: normal;
  }
  .brand .bs {
    display: block;
  }
  .head-cta .tel,
  .head-cta .btn {
    display: inline-flex;
  }
  .head-cta .btn {
    display: inline-block;
  }
  .mainnav .wrap {
    padding: 0 var(--gut);
  }
  .mainnav ul {
    padding: 0;
    overflow: visible;
    flex-wrap: wrap;
  }
  .mainnav .rail::after {
    display: none;
  }
  .hero .wrap {
    padding-top: 60px;
    padding-bottom: 56px;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 44px;
    align-items: center;
  }
  .cols3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 372px);
    gap: 44px;
  }
  .quote-side {
    position: sticky;
    top: 104px;
  }
  .props {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .typegrid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 34px;
  }
  .linkgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .fgrid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 30px;
  }
  .hero h1 {
    margin-bottom: 16px;
  }
  .hero .lede {
    font-size: 1.16rem;
  }
}

/* ===================================================== >= 1120px (desktop) */
@media (min-width: 1120px) {
  .topbar .tagline {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar .wrap {
    justify-content: space-between;
  }
}

/* ============================================= wire-site additions (v1) */
/* .hero-in wraps the whole hero payload. On phones it is a plain stack; on
   desktop it becomes the two-column copy/photo split so the hero reads as one
   banded unit rather than a headline sitting on top of a loose photo. */
.hero-in {
  display: block;
}

/* "see all" tail link under a section: quiet, but unmistakably a link */
.seeall {
  margin: 16px 0 0;
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  font-size: 0.98rem;
}
.seeall a {
  color: var(--ink-950);
  text-decoration: none;
  border-bottom: 3px solid var(--yellow);
  padding-bottom: 2px;
}
.seeall a:hover {
  background: var(--yellow);
}
.band-dark .seeall a {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}
.band-dark .seeall a:hover {
  background: var(--yellow);
  color: var(--ink-950);
}

/* inline "read more" link inside a card body */
a.more {
  display: inline-block;
  font-family: var(--cond);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.045em;
  color: var(--ink-950);
  text-decoration: none;
  border-bottom: 2px solid var(--yellow);
}
a.more::after {
  content: " \2192";
}
a.more:hover {
  background: var(--yellow);
}

/* footer phone: the single loudest thing in the footer */
.fphone {
  display: inline-block;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--yellow) !important;
  text-decoration: none;
  margin-bottom: 2px;
}
.fphone:hover {
  text-decoration: underline;
}

@media (min-width: 900px) {
  .hero-in {
    display: grid;
    /* Two columns, TWO rows. The copy items are auto-flowed down column 1 as
       subgrid-less rows would otherwise each earn a 44px row gap — spanning the
       photo across 99 rows made the band ~4600px tall. Column 1 is a nested
       flow instead: the copy items occupy rows 1..n with no row gap, the photo
       occupies the full column-2 height. */
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    column-gap: 46px;
    row-gap: 0;
    align-items: center;
  }
  /* copy items stack in column 1 with their own margins doing the spacing */
  .hero-in > .eyebrow {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }
  .hero-in > h1 {
    grid-column: 1;
    grid-row: 2;
  }
  .hero-in > .lede {
    grid-column: 1;
    grid-row: 3;
  }
  .hero-in > .btnrow {
    grid-column: 1;
    grid-row: 4;
  }
  .hero-in > .hero-facts {
    grid-column: 1;
    grid-row: 5;
    align-self: start;
  }
  /* the photo spans exactly the five copy rows, so the band is only as tall
     as the taller of (copy stack, photo) */
  .hero-in > .hero-media {
    grid-column: 2;
    grid-row: 1 / 6;
    margin: 0;
    align-self: center;
  }
  /* Any extra direct child (e.g. the secondary paragraph on /what-we-buy/)
     auto-places into row 6 of column 1, below the copy stack. Explicitly
     pin it to column 1 so it never lands under the photo. Do NOT use a
     blanket `.hero-in > *` rule here: it overrides .hero-media's column and
     collapses the two-column hero. */
  .hero-in > p:not(.lede) {
    grid-column: 1;
  }
  /* On desktop the photo fills its column at a taller crop so the two columns
     balance instead of the image dictating the band height. */
  .hero-in > .hero-media img {
    aspect-ratio: 4 / 3.15;
  }
}

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

@media print {
  .mainnav,
  .topbar,
  .strip,
  .quote,
  .callfab {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}