/* ==========================================================================
   Diligence Remodeling — "Job Site" theme
   The truck wrap and the Affirm flyer, as a website: full dark mode in the
   wrap's navy, heavy condensed caps (Barlow Condensed), electric blue, and
   the logo's speed-line slashes as the recurring motif.

   Loaded after styles.css, which keeps the layout and every behaviour hook;
   this file changes the look only. Chosen from the three designs in
   variations/ (Oct 2026).

   Token flip: --ink becomes the light text colour and --white the raised
   dark surface, so every base rule that colours text or cards follows. The
   handful of base rules that use --ink as a *background* are reset below.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --ink:        #EEF2FB;
  --ink-2:      #DCE3F4;
  --ink-3:      #C3CCE2;
  --muted:      #A3AECB;
  --muted-2:    #7E89A8;
  --paper:      #0A1129;
  --paper-2:    #0E1734;
  --paper-3:    #15204A;
  --line:       #223060;
  --line-soft:  #1A264F;
  --white:      #111B3E;
  --navy:       #0A1129;
  --navy-deep:  #060B1D;
  --fill:       #2259D4;           /* button and band fills (white text 5.9:1) */
  --brand:      #6B97FF;           /* blue for text on navy (6.2:1) */
  --brand-dk:   #8FB0FF;
  --brand-lt:   #8FB0FF;
  --brand-tint: rgba(107,151,255,.14);

  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
  --r-sm: 2px;
  --r:    4px;
  --r-lg: 6px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --shadow:    0 6px 20px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.30);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.40);
}

body { background: var(--paper); color: var(--ink); }
h1, h2, h3, h4 { font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: .95; }
h3 { font-weight: 700; letter-spacing: .005em; }
:focus-visible { outline-color: var(--brand); }

/* The logo's slash-lines: three skewed blue bars before every eyebrow. */
.eyebrow, .eyebrow--light {
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .2em;
  color: var(--brand);
}
.eyebrow::before, .eyebrow--light::before {
  width: 2.6rem; height: 6px; transform: skewX(-35deg);
  background: linear-gradient(90deg, var(--fill) 0 28%, transparent 28% 36%, var(--fill) 36% 64%, transparent 64% 72%, var(--fill) 72%);
}

.btn {
  --btn-bg: var(--fill);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: .08em;
  border-radius: 999px; padding: .85em 1.7em;
}
.btn:hover { background: #3A6FE8; border-color: #3A6FE8; box-shadow: 0 10px 26px rgba(34,89,212,.45); }
.btn--onDark, .btn--ghost { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.4); }
.btn--onDark:hover, .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* ---------- Header ---------- */
.header { background: rgba(6,11,29,.94); border-bottom: 1px solid var(--line); }
.header.is-stuck { box-shadow: 0 2px 24px rgba(0,0,0,.5); }
.nav a { font-family: var(--font-display); font-size: .98rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.nav a:hover { color: #fff; }
.nav a::after { height: 3px; background: var(--fill); bottom: -6px; }
.header__phone { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; }
.header__phone svg { color: var(--brand); width: 17px; height: 17px; }
@media (max-width: 1140px) {
  .nav { background: var(--navy-deep); border-bottom-color: var(--line); }
  .nav a { font-size: 1.15rem; border-bottom-color: var(--line-soft); }
}

/* ---------- Hero: full-bleed photo, huge condensed caps, slashed edge ---------- */
.hero { background: var(--navy-deep); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%); }
.hero__media::after {
  background:
    linear-gradient(100deg, rgba(6,11,29,.96) 0%, rgba(6,11,29,.88) 38%, rgba(6,11,29,.45) 70%, rgba(6,11,29,.25) 100%),
    linear-gradient(to top, rgba(6,11,29,.85) 0%, rgba(6,11,29,0) 50%);
}
.hero__inner { padding-block: clamp(5rem, 12vw, 9.5rem) clamp(6rem, 12vw, 9.5rem); max-width: 1100px; }
.hero h1 { font-size: clamp(3rem, 1.6rem + 4.4vw, 6rem); line-height: .92; letter-spacing: -.005em; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__sub { font-size: 1.2rem; color: var(--ink-3); }
.hero__scroll { font-family: var(--font-display); font-size: .9rem; letter-spacing: .24em; }

/* ---------- Stats: a solid blue band with slash texture ---------- */
.trust {
  background: var(--fill) repeating-linear-gradient(-60deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px);
  margin-top: -3.5vw; position: relative; z-index: 1; border-top: 0;
  clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%);
  padding-top: 3.5vw;
}
.trust__inner { background: rgba(255,255,255,.18); }
.trust__item { background: transparent; padding-block: 1.6rem 1.9rem; }
.trust__k { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.9rem); text-transform: uppercase; line-height: 1; }
.trust__v { font-family: var(--font-display); font-weight: 600; font-size: .9rem; letter-spacing: .16em; color: rgba(255,255,255,.82); }

/* ---------- Section heads ---------- */
.head h2 { font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.6rem); }
.head p:not(.eyebrow) { color: var(--muted); }

/* ---------- Services: dark plates with a blue edge ---------- */
.services { background: var(--paper); }
.svc-grid { border: 0; gap: 2px; background: var(--line-soft); }
.svc { border: 0; background: var(--paper-2); }
.svc:hover { background: var(--white); }
.svc::after { top: 0; bottom: auto; height: 4px; background: var(--fill); }
.svc__n {
  font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; line-height: 1; letter-spacing: 0;
  color: transparent; -webkit-text-stroke: 1.5px #3A4C86; margin-bottom: .9rem;
}
.svc:hover .svc__n { -webkit-text-stroke-color: var(--fill); }
.svc__icon { color: var(--brand); stroke-width: 1.6; width: 34px; height: 34px; }
.svc h3 { font-size: 1.55rem; }
.svc p { color: var(--muted); }

/* ---------- Before / after ---------- */
.ba { background: var(--navy-deep); clip-path: polygon(0 2.5vw, 100% 0, 100% calc(100% - 2.5vw), 0 100%); padding-block: calc(var(--sec) + 2.5vw); }
.ba .head p:not(.eyebrow), .ba__copy p { color: var(--muted); }
.ba__copy h3 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); }
.ba__tag { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .16em; color: #fff; background: var(--fill); border: 0; border-radius: var(--r-sm); transform: skewX(-12deg); }
.cmp { border-radius: var(--r); }
.cmp__label { font-family: var(--font-display); font-size: .82rem; font-weight: 700; border-radius: var(--r-sm); }
.cmp__label--a { background: var(--fill); }
.cmp__knob { color: var(--navy); }
.cmp__hint { font-family: var(--font-display); font-size: .78rem; border-radius: var(--r-sm); }

/* ---------- Gallery ---------- */
.filter {
  font-family: var(--font-display); font-size: .95rem; font-weight: 700; letter-spacing: .12em;
  border-radius: var(--r-sm); color: var(--muted); border-color: var(--line);
}
.filter:hover { background: var(--white); color: #fff; border-color: var(--muted-2); }
.filter[aria-pressed="true"] { background: var(--fill); border-color: var(--fill); color: #fff; }
.tile { border-radius: var(--r); box-shadow: none; background: var(--paper-3); }
.tile:hover { box-shadow: 0 0 0 2px var(--fill), var(--shadow); }

/* ---------- Walkthroughs ---------- */
.walk { background: var(--paper-2); border-color: var(--line); }
.walk__next { border-top-color: var(--line); }
.walk__next h3 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); }
.walk__next p { color: var(--muted); }
.shot { border-radius: var(--r); background: var(--paper-3); }
.shot:hover { box-shadow: 0 0 0 2px var(--fill), var(--shadow); }
.shot__n { font-family: var(--font-display); font-size: .9rem; font-weight: 800; background: var(--fill); border-radius: var(--r-sm); }

/* ---------- Reviews ---------- */
.reviews { background: var(--paper); }
.review { background: var(--paper-2); border-color: var(--line); }
.review__name { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; }
.badge { background: var(--paper-2); border-color: var(--line); }
.badge:hover { background: var(--white); border-color: var(--fill); }
.badge__k { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; }
.badge__stars { color: #FFC83D; }

/* ---------- Process: outlined giant numbers ---------- */
.process { background: var(--paper-2); border-color: var(--line); }
.step { border-top: 4px solid var(--line); }
.step:nth-child(1) { border-top-color: var(--fill); }
.step__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 6vw, 5rem); color: transparent; -webkit-text-stroke: 1.5px #3A4C86; }
.step h3 { font-size: 1.6rem; }

/* ---------- Area ---------- */
#area { background: var(--paper); }
#area h2 { font-size: clamp(2.4rem, 1.7rem + 3vw, 4.2rem) !important; }
.lede { color: var(--ink-3); }
.counties { background: var(--line); border-color: var(--line); }
.county { background: var(--paper-2); }
.county:hover { background: var(--white); }
.county__n { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; }

/* ---------- Financing ---------- */
.fin { background: var(--navy-deep); border-top-color: var(--line); }
.fin h2 { font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.6rem); }
.fin__art:hover { box-shadow: 0 0 0 3px var(--fill), 0 30px 70px rgba(0,0,0,.4); }

/* ---------- FAQ ---------- */
.faq { background: var(--paper); }
.faq .head a { color: var(--brand); }
.faq__list, .qa { border-color: var(--line); }
.qa summary { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; text-transform: uppercase; letter-spacing: .02em; }
.qa summary:hover { color: var(--brand); }
.qa summary::after { border-radius: var(--r-sm); background-color: var(--paper-2); border-color: var(--line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B97FF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.qa[open] summary::after { background-color: var(--fill); border-color: var(--fill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.qa__a { color: var(--muted); }

/* ---------- CTA band ---------- */
.band { background: var(--fill) repeating-linear-gradient(-60deg, rgba(255,255,255,.07) 0 2px, transparent 2px 22px); }
.band h2 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); max-width: 16ch; }
.band .btn { --btn-bg: #fff; --btn-fg: var(--navy); border-color: #fff; }
.band .btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }

/* ---------- Contact ---------- */
#contact { background: var(--paper); }
#contact h2 { font-size: clamp(2.4rem, 1.7rem + 3vw, 4rem) !important; }
.label { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .14em; color: var(--ink-3); }
.input, .select, .textarea { background-color: var(--paper-2); border-color: var(--line); color: var(--ink); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted-2); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(107,151,255,.2); }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3AECB' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.select option { background: var(--paper-2); color: var(--ink); }
.form__note.is-ok { color: #7BE0A0; }
.form__note.is-error { color: #FF9A9A; }
.detail { border-bottom-color: var(--line); }
.detail__ico { background: var(--brand-tint); color: var(--brand); }
a.detail:hover .detail__ico { background: var(--fill); }
.detail__k { font-family: var(--font-display); font-size: .82rem; letter-spacing: .16em; }
.detail__v { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: .02em; }
.detail__v small { font-family: var(--font-body); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); border-top: 1px solid var(--line); }
.footer h4 { font-family: var(--font-display); font-size: .95rem; letter-spacing: .18em; }
.footer__verse { font-family: var(--font-display); font-size: .95rem; letter-spacing: .24em; color: var(--brand); }
.social a:hover { background: var(--fill); border-color: var(--fill); }

/* ---------- Phone bar ---------- */
@media (max-width: 760px) { .mbar { background: rgba(6,11,29,.97); border-top-color: var(--line); } }
.mbar__btn { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: .1em; border-radius: 999px; }
.mbar__btn--main { background: var(--fill); border-color: var(--fill); }

.skip { background: var(--fill); font-family: var(--font-display); }
.lb__count { font-family: var(--font-display); font-size: .82rem; }
@media (max-width: 720px) {
  .trust { clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%); }
}