/* backhousestudios.com — layered on Bootstrap 5.3 (data-bs-theme="dark")
 *
 * Contrast targets, measured against #000000:
 *   --fg     #DADADA  15.0:1   body copy, headings
 *   --fg-2   #B3B3B3  10.0:1   subheads, table data
 *   --muted  #959595   7.0:1   metadata, fine print (still AAA)
 * Bootstrap's own dark theme ships ~11:1 on a blue-grey ground, so its
 * variables are remapped below rather than left at defaults.
 */

:root,
[data-bs-theme="dark"] {
  --bhs-bg: #000000;
  --bhs-panel: #0b0b0b;
  --bhs-fg: #dadada;
  --bhs-fg-2: #b3b3b3;
  --bhs-muted: #959595;
  --bhs-line: #262626;
  --bhs-line-2: #3a3a3a;

  --bs-body-bg: var(--bhs-bg);
  --bs-body-color: var(--bhs-fg);
  --bs-emphasis-color: var(--bhs-fg);
  --bs-secondary-color: var(--bhs-fg-2);
  --bs-tertiary-color: var(--bhs-muted);
  --bs-border-color: var(--bhs-line);
  --bs-link-color: var(--bhs-fg);
  --bs-link-hover-color: #ffffff;
  --bs-table-bg: transparent;
  --bs-table-color: var(--bhs-fg-2);
  --bs-heading-color: var(--bhs-fg);
}

/* Impact is present on macOS and Windows, so no webfont download. The mirrored
   logo is an image; this stack is for headings only. */
.display-face {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bhs-fg);
}

body {
  background: var(--bhs-bg);
  color: var(--bhs-fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- nav ---------- */
.bhs-nav {
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bhs-line);
}
.bhs-nav .navbar-brand img { height: 26px; width: auto; }
.bhs-nav .nav-link { color: var(--bhs-fg-2); font-size: .95rem; }
.bhs-nav .nav-link:hover,
.bhs-nav .nav-link:focus-visible { color: var(--bhs-fg); }
/* Current section: never signalled by colour alone (WCAG 1.4.1) */
.bhs-nav .nav-link[aria-current="true"] {
  color: var(--bhs-fg);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- dual hero ---------- */
.hero-split { border-bottom: 1px solid var(--bhs-line); }
.hero-half {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  overflow: hidden;
  text-decoration: none;
}
.hero-half + .hero-half { border-left: 1px solid var(--bhs-line); }
@media (max-width: 991.98px) {
  .hero-half { min-height: 58vh; }
  .hero-half + .hero-half { border-left: 0; border-top: 1px solid var(--bhs-line); }
}
.hero-half .hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 22%;
  filter: grayscale(100%) contrast(1.05);
  transform: scale(1.02);
  transition: transform .6s ease, filter .6s ease;
}
.hero-half:hover .hero-bg { transform: scale(1.06); }
/* Scrim guarantees the 15:1 text ratio survives over any photograph. */
.hero-half .hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.35) 100%);
}
.hero-half .hero-body { position: relative; max-width: 30rem; }
.hero-kicker {
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--bhs-muted); margin-bottom: .6rem;
}
.hero-title { font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: .95; margin-bottom: .75rem; }
.hero-half .lead { color: var(--bhs-fg-2); font-size: 1.02rem; margin-bottom: 1.1rem; }
.hero-cue { color: var(--bhs-fg); font-weight: 600; font-size: .95rem; }
.hero-half:hover .hero-cue,
.hero-half:focus-visible .hero-cue { text-decoration: underline; text-underline-offset: 4px; }
/* Type over photography needs a shadow to hold its ratio; flat sections do not. */
.hero-body .hero-title,
.hero-body .lead { text-shadow: 0 2px 14px rgba(0,0,0,.85); }

/* ---------- sections ---------- */
.sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-bottom: 1px solid var(--bhs-line); }
.sec-label {
  font-size: .76rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--bhs-muted); margin-bottom: 1.75rem;
}
.sec h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 1.25rem; }
.sec p { color: var(--bhs-fg-2); }
.sec .lede { font-size: 1.1rem; color: var(--bhs-fg); max-width: 46rem; }

/* ---------- rental tables ---------- */
.rent-h { font-size: 1.5rem; margin: 2.5rem 0 .5rem; }
.rent-blurb { color: var(--bhs-muted); max-width: 44rem; margin-bottom: 1.25rem; }
table.gear { --bs-table-bg: transparent; margin-bottom: 0; }
table.gear thead th {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bhs-muted); border-bottom: 1px solid var(--bhs-line-2);
  padding-bottom: .6rem; font-weight: 600;
}
table.gear tbody td { border-bottom: 1px solid var(--bhs-line); padding: .7rem .5rem; }
table.gear tbody td:first-child { color: var(--bhs-fg); }
table.gear tr.gear-group th {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bhs-fg); padding: 1.6rem .5rem .4rem; font-weight: 700;
  border-bottom: 1px solid var(--bhs-line-2); background: transparent;
}
.gear-note { display: block; font-size: .82rem; color: var(--bhs-muted); margin-top: .25rem; max-width: 34rem; }

/* ---------- delivery ---------- */
.zones { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 1.25rem; }
.zone { border: 1px solid var(--bhs-line-2); border-radius: 10px; padding: 1.1rem 1.2rem; background: var(--bhs-panel); }
.zone .z-r { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bhs-muted); }
.zone .z-f { font-size: 1.6rem; margin-top: .2rem; }
.zone.free { border-color: var(--bhs-fg-2); }

/* ---------- portrait grid ---------- */
.pgrid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 1.5rem; }
.pgrid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2 / 3; border-radius: 6px; }

/* ---------- testimonials ---------- */
.quote { border-left: 2px solid var(--bhs-line-2); padding: .25rem 0 .25rem 1.25rem; margin-bottom: 1.75rem; }
.quote blockquote { font-size: 1.12rem; color: var(--bhs-fg); margin: 0 0 .5rem; }
.quote figcaption { font-size: .88rem; color: var(--bhs-muted); }

/* ---------- form ----------
   Explicit single-column grid and 16px inputs. Bootstrap handles most of this,
   but iOS zooms the viewport on focus for any font-size under 16px, which is
   what makes mobile forms feel broken. */
.bhs-form { max-width: 620px; display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.bhs-form label { display: block; font-size: .85rem; color: var(--bhs-muted); margin-bottom: .4rem; }
.bhs-form .form-control {
  width: 100%; font-size: 16px; background: var(--bhs-panel);
  border: 1px solid var(--bhs-line-2); color: var(--bhs-fg); border-radius: 8px; padding: .8rem .9rem;
}
.bhs-form .form-control:focus {
  background: var(--bhs-panel); color: var(--bhs-fg);
  border-color: var(--bhs-fg-2); box-shadow: 0 0 0 3px rgba(218, 218, 218, .14);
}
.bhs-form textarea.form-control { min-height: 165px; resize: vertical; }
.bhs-form .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4rem; font-size: .95rem; margin: 0; }
.form-status.ok { color: var(--bhs-fg); }
.form-status.err { color: #ff8f8f; }

.btn-bhs {
  background: var(--bhs-fg); color: #000; border: 1px solid var(--bhs-fg);
  font-weight: 700; letter-spacing: .04em; padding: .8rem 1.75rem; border-radius: 999px;
}
.btn-bhs:hover, .btn-bhs:focus-visible { background: #fff; border-color: #fff; color: #000; }
.btn-outline-bhs {
  background: transparent; color: var(--bhs-fg); border: 1px solid var(--bhs-line-2);
  font-weight: 600; padding: .8rem 1.75rem; border-radius: 999px;
}
.btn-outline-bhs:hover, .btn-outline-bhs:focus-visible { border-color: var(--bhs-fg); color: #fff; }

footer.bhs-foot { padding: 3rem 0; color: var(--bhs-muted); font-size: .9rem; }
footer.bhs-foot img { height: 22px; width: auto; margin-bottom: 1rem; }

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

@media (prefers-reduced-motion: reduce) {
  .hero-half .hero-bg, .hero-half:hover .hero-bg { transition: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- long testimonial (Bootstrap collapse) ----------
   Excerpted rather than truncated: the remaining paragraphs stay in the DOM,
   so search engines and screen readers get the whole testimonial even while it
   is visually collapsed. The button label swaps via [aria-expanded], which
   Bootstrap maintains for us. */
.quote-long blockquote p { margin-bottom: .9rem; }
.quote-long blockquote p:last-child { margin-bottom: 0; }
.quote-more {
  background: none; border: 0; padding: 0; margin: .35rem 0 .6rem;
  color: var(--bhs-fg); font-size: .9rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.quote-more:hover, .quote-more:focus-visible { color: #fff; }
.quote-more[aria-expanded="true"]  .lbl-more { display: none; }
.quote-more[aria-expanded="false"] .lbl-less { display: none; }