/* ═══════════════════════════════════════════════════════════════
   bfc-theme.css — Black Flag design tokens + shared components
   ───────────────────────────────────────────────────────────────
   :root HOLDS THE DARK PALETTE and there is no light mode. That is
   deliberate, not laziness. The identity is a black flag; a light
   theme would invert the one thing the brand is named after. The
   only surfaces that go light are photographs and the quote card.

   Every colour here comes from the brand kit's six-value system.
   Adding a seventh is how a brand starts looking like a template,
   so if something needs emphasis, reach for --navy or --silver
   before inventing a colour.

   TYPE. Bebas Neue for display, Montserrat for everything else.
   Both are SIL Open Font Licence — free forever, no sign-off from
   anyone, which matters when a sign shop or a printer asks what
   fonts they are allowed to use.

   CONSUMERS: every page. Loaded before the page's own <style>.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ground */
  --ink:        #0D0D0D;   /* page background */
  --hull:       #1A1D21;   /* raised surfaces: cards, nav */
  --hull-2:     #232830;   /* photo wells, empty media slots */
  --line:       #2B3137;   /* hairlines, card borders */
  --line-2:     #3A4046;   /* stronger dividers */

  /* type */
  --paper:      #E8EBED;   /* primary text */
  --paper-soft: #8B949B;   /* secondary text */
  --paper-mute: #6E767D;   /* captions, legal */

  /* brand */
  --silver:     #C0C0C0;
  --navy:       #0E3A64;
  --blue:       #17578F;   /* water accent — links, dots, focus */
  --blue-lift:  #2E7FC4;   /* hover only */

  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;

  --radius:  12px;
  --shadow:  0 2px 20px rgba(0,0,0,.45);

  /* Page gutter. Clamped rather than a media query so the padding
     grows smoothly instead of jumping at one arbitrary width. */
  --gutter: clamp(18px, 5vw, 56px);
  --maxw:   1180px;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.02;
  margin: 0;
}
h1 { font-size: clamp(42px, 9vw, 88px); }
h2 { font-size: clamp(30px, 5.5vw, 52px); }
h3 { font-size: clamp(21px, 3vw, 27px); }

p { margin: 0 0 1em; }
a { color: var(--blue-lift); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* Photographs fade in once decoded. Without this a slow connection
   shows a half-painted JPEG, which reads as a broken site. */
img[data-photo] { opacity: 0; transition: opacity .45s ease; background: var(--hull); }
img[data-photo].ready { opacity: 1; }

/* Visible focus. Never remove this — it is the only way a keyboard
   user can tell where they are. */
:focus-visible { outline: 3px solid var(--blue-lift); outline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(56px, 9vw, 104px) 0; }
.section--tight { padding: clamp(38px, 6vw, 64px) 0; }

/* ── eyebrow: the small tracked label above a heading ─────────── */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--blue-lift);
  margin: 0 0 14px;
}
.lede { font-size: clamp(16px, 2.2vw, 19px); color: var(--paper-soft); max-width: 62ch; }
.rule { height: 2px; background: var(--line); border: 0; margin: 0; }

/* ── buttons ──────────────────────────────────────────────────
   min-height 52px, not 44px. This site's whole job is getting a
   phone call from someone standing in their driveway on a cracked
   screen in bright sun. Give them room to miss.               */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 2px solid transparent;
  border-radius: 999px; font-family: var(--font-body);
  font-size: 15px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-lift); }
.btn--ghost { border-color: var(--line-2); color: var(--paper); background: transparent; }
.btn--ghost:hover { border-color: var(--silver); }
.btn--block { width: 100%; }

/* ── header ───────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(13,13,13,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.hdr__logo { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.hdr__logo img { height: 38px; width: auto; }
.hdr__name {
  font-family: var(--font-display); font-size: 27px;
  letter-spacing: .07em; color: var(--paper); line-height: 1;
}
.hdr__name small {
  display: block; font-family: var(--font-body); font-size: 8.5px;
  letter-spacing: .19em; color: var(--silver); margin-top: 3px; font-weight: 600;
}
.hdr__nav { display: none; gap: 26px; }
.hdr__nav a {
  color: var(--paper-soft); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.hdr__nav a:hover, .hdr__nav a[aria-current="page"] { color: var(--paper); text-decoration: none; }
.hdr__nav a[aria-current="page"] { border-bottom: 2px solid var(--blue-lift); padding-bottom: 3px; }
.hdr__cta { display: none; }
.burger {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: none; border: 1px solid var(--line-2); border-radius: 10px;
  cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--paper); box-shadow: 0 6px var(--paper), 0 -6px var(--paper); }

@media (min-width: 900px) {
  .hdr__nav, .hdr__cta { display: flex; }
  .burger { display: none; }
}

/* ── mobile drawer ────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 70;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.scrim.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 340px);
  background: var(--hull); z-index: 80; padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  transform: translateX(100%); transition: transform .3s cubic-bezier(.3,.7,.3,1);
  overflow-y: auto; border-left: 1px solid var(--line);
}
.drawer.show { transform: translateX(0); }
.drawer__close {
  width: 52px; height: 52px; margin-left: auto; display: grid; place-items: center;
  background: none; border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--paper); font-size: 22px; cursor: pointer;
}
.drawer a.drawer__link {
  display: block; padding: 17px 4px; border-bottom: 1px solid var(--line);
  color: var(--paper); font-size: 15px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.drawer a.drawer__link:hover { text-decoration: none; color: var(--blue-lift); }

/* ── cards ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--hull); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--hull-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { margin-bottom: 8px; }
.card__body p { color: var(--paper-soft); font-size: 15px; margin-bottom: 16px; }
.card__more {
  margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-lift);
}

/* ── trust bar ────────────────────────────────────────────────── */
.trust { border-block: 1px solid var(--line); background: var(--hull); }
.trust ul {
  list-style: none; margin: 0; padding: 20px 0; display: flex;
  flex-wrap: wrap; gap: 14px 34px; justify-content: center;
}
.trust li {
  font-size: 12px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--paper-soft);
  display: flex; align-items: center; gap: 9px;
}
.trust li::before { content: ""; width: 7px; height: 7px; background: var(--blue-lift); transform: rotate(45deg); }

/* ── footer ───────────────────────────────────────────────────── */
.ftr { border-top: 1px solid var(--line); background: var(--hull); margin-top: 40px; }
.ftr__grid { display: grid; gap: 34px; padding: 52px 0 34px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ftr h4 { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--silver); margin: 0 0 14px; font-weight: 700; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 9px; font-size: 14px; color: var(--paper-soft); }
.ftr a { color: var(--paper-soft); }
.ftr a:hover { color: var(--paper); }
.ftr__legal {
  border-top: 1px solid var(--line); padding: 20px 0 calc(30px + env(safe-area-inset-bottom));
  font-size: 12px; color: var(--paper-mute); display: flex; flex-wrap: wrap;
  gap: 8px 20px; justify-content: space-between;
}

/* ── sticky mobile call bar ───────────────────────────────────
   Below 900px a call button is pinned to the bottom of the screen.
   Most visitors arrive on a phone, already outside, looking at the
   thing they want cleaned. Making them scroll to find a number is
   how the lead is lost.                                        */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(13,13,13,.96); border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.callbar .btn { flex: 1; padding: 0 12px; font-size: 13px; }
@media (min-width: 900px) { .callbar { display: none; } }
body { padding-bottom: 84px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* ── forms ────────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--silver); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; background: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: 10px;
  padding: 13px 15px; color: var(--paper);
  /* 16px minimum or iOS Safari zooms the whole page on focus. */
  font-size: 16px; font-family: inherit;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-lift);
}
.checks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.check {
  display: flex; align-items: center; gap: 11px; min-height: 52px;
  padding: 0 15px; border: 1.5px solid var(--line-2); border-radius: 10px;
  font-size: 14px; cursor: pointer; background: var(--ink);
}
.check input { width: 20px; height: 20px; accent-color: var(--blue-lift); flex: none; }
.check:has(input:checked) { border-color: var(--blue-lift); background: rgba(23,87,143,.14); }

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