/* BiDR website styles
   Style: neo-brutalism, matched to the PO-approved style reference.
   Syne (display) + Manrope (body), primary colors, sharp corners,
   thick black borders, hard offset shadows.
   All tokens via CSS custom properties.

   Canonical palette (source of truth, sampled from the PO style
   reference screenshots, see issue #5):
   yellow #fcff42, red #dc361f, blue #2400f6, ink #000000,
   paper #f7f4ec, white #ffffff, muted #666666. */

:root {
  --bg: #ffffff;
  --white: #ffffff;
  --paper: #f7f4ec;
  --ink: #000000;
  --muted: #666666;

  --yellow: #fcff42;
  --red: #dc361f;
  --blue: #2400f6;

  /* Semantic exceptions on dark sections (named on purpose, issue #5) */
  --line-on-dark: rgba(255, 255, 255, 0.25);
  --text-on-dark-muted: rgba(255, 255, 255, 0.7);
  --text-on-dark-soft: rgba(255, 255, 255, 0.6);
  --overlay: rgba(0, 0, 0, 0.6);

  --border-w: 3px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);
  --shadow-blue: 10px 10px 0 var(--blue);

  --display: "Syne", sans-serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --container: 1180px;
  --gap: 26px;
  --header-h: 90px; /* anchor offset below the sticky header */
}

*, *::before, *::after { box-sizing: border-box; }
/* Anchor navigation jumps instantly on purpose: CSS smooth scrolling proved
   unreliable for hash navigation in testing, and instant jumps are the
   accessible default. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

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

h1, h2, h3, h4 { margin: 0 0 0.5em; color: var(--ink); line-height: 1.02; }
h1, h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.12; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration: none; }
img, svg { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section.tight { padding: 52px 0; }
.section.paper { background: var(--paper); }

/* Anchor targets never hide behind the sticky header */
[id] { scroll-margin-top: var(--header-h); }

/* Skip link: hidden until keyboard focus */
.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 200;
  background: var(--yellow); color: var(--ink);
  border: var(--border-w) solid var(--ink); box-shadow: var(--shadow);
  padding: 10px 16px; font-weight: 700; text-transform: uppercase; font-size: 0.85rem;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* Highlight blocks on words */
.mark, .mark-blue, .mark-red {
  padding: 0.02em 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.mark { background: var(--yellow); color: var(--ink); }
.mark-blue { background: var(--blue); color: var(--white); }
.mark-red { background: var(--red); color: var(--white); }

/* Scoped line-break control for "built in" (issue #31) — does not affect .mark itself */
.mark-nowrap { white-space: nowrap; }

/* Eyebrow tag */
.eyebrow {
  display: inline-block; font-family: var(--sans); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink);
  border: var(--border-w) solid var(--ink); padding: 6px 12px; margin-bottom: 20px;
}
.eyebrow.plain { background: transparent; border: none; padding: 0; color: var(--muted); }
.lead { font-size: 1.18rem; color: var(--muted); }

.sec-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }
.sec-head p { color: var(--muted); font-size: 1.08rem; margin: 12px 0 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 26px; border: var(--border-w) solid var(--ink);
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: 0; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
.btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--yellow); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { color: var(--white); }
.btn-lg { min-height: 60px; padding: 16px 34px; font-size: 1.02rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.btn-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.9rem; border-bottom: 3px solid var(--yellow); min-height: 44px; }

/* Flat secondary button (style-reference "Get in touch"): white, black border, no shadow */
.btn-secondary { background: var(--bg); box-shadow: none; }
.btn-secondary:hover { transform: none; box-shadow: none; background: var(--paper); }
.btn-secondary:active { transform: translate(2px, 2px); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: var(--border-w) solid var(--ink); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 74px; }
.brand { display: inline-flex; align-items: center; color: var(--ink); }
.brand .bidr-logo { height: 24px; width: auto; display: block; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.site-nav a { font-weight: 700; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.05em; padding: 8px 12px; min-height: 44px; display: inline-flex; align-items: center; }
.site-nav a:hover { background: var(--yellow); }
.header-cta { margin-left: 8px; }

/* Mobile nav toggle (hamburger button): hidden on desktop, shown under the
   breakpoint below. Reuses the existing inline-SVG icon language (currentColor
   stroke) instead of a text button or external icon library (issue #30). */
.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: var(--border-w) solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.nav-toggle:hover { background: var(--yellow); }
.nav-toggle:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.nav-toggle svg { width: 22px; height: 22px; display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile nav panel: no-JS/closed default is a normal hidden state driven by
   the [hidden] attribute; JS toggles it via aria-expanded on the button. */
.mobile-nav-panel { display: none; }

@media (max-width: 820px) {
  .header-inner { flex-wrap: nowrap; }
  .site-nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Panel drops below the sticky header, same hard-edged neo-brutalist
     language as the rest of the site: thick border, hard shadow, solid
     background, no rounded corners. Sits in normal flow (not overlay) so it
     never covers content behind a translucent layer, and it pushes the page
     down rather than floating over the header seam. */
  .mobile-nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 59;
    background: var(--bg);
    border-bottom: var(--border-w) solid var(--ink);
    box-shadow: var(--shadow-lg);
    padding: 10px 24px 20px;
  }
  .mobile-nav-panel[hidden] { display: none; }
  .mobile-nav-panel:not([hidden]) { display: block; }

  .mobile-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .mobile-nav-list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    border-bottom: var(--border-w) solid var(--ink);
  }
  .mobile-nav-list li:last-child a { border-bottom: none; }
  .mobile-nav-list a:hover,
  .mobile-nav-list a:focus-visible { background: var(--yellow); }

  .mobile-nav-cta { margin-top: 16px; width: 100%; }
}

/* Hero */
.hero { padding: 64px 0 44px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 54px; align-items: center; }
.hero-copy h1 { margin-bottom: 22px; }
.hero-copy .sub { font-size: 1.2rem; color: var(--ink); max-width: 46ch; font-weight: 400; }
.hero-media { position: relative; }
.hero-media .frame { position: relative; border: var(--border-w) solid var(--ink); box-shadow: var(--shadow-blue); background: var(--yellow); }
.hero-media .frame img { width: 100%; height: auto; display: block; }
.hero-media::before { content: ""; position: absolute; top: -18px; left: -18px; width: 90px; height: 90px; background: var(--red); border: var(--border-w) solid var(--ink); z-index: -1; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-copy .sub { max-width: none; } }

/* Check list */
.checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.checks li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.checks .ck { flex: none; width: 26px; height: 26px; background: var(--yellow); border: var(--border-w) solid var(--ink); display: grid; place-items: center; }
.checks .ck svg { width: 15px; height: 15px; }

/* Marquee ticker */
.marquee { background: var(--ink); color: var(--white); border-top: var(--border-w) solid var(--ink); border-bottom: var(--border-w) solid var(--ink); overflow: hidden; }
.marquee-track { display: inline-flex; gap: 0; white-space: nowrap; animation: marquee 26s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 22px; padding: 15px 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.05rem; }
.marquee-track span::after { content: "\2726"; color: var(--yellow); margin: 0 22px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Proof strip: grayscale organisation logos under the marquee (issue #8) */
.proof { padding: 50px 0 44px; text-align: center; }
.proof-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px 46px; margin-top: 26px; }
.proof-strip img {
  height: 34px; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(100%); opacity: 0.8;
}
.proof-strip img.logo-tall { height: 52px; }
.proof-note { margin: 26px auto 0; max-width: 62ch; color: var(--muted); font-size: 0.86rem; font-weight: 500; }

/* Split (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 34px; } }
.frame-img { border: var(--border-w) solid var(--ink); box-shadow: var(--shadow-lg); }
.frame-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Founder card */
.founder { display: flex; gap: 16px; align-items: center; margin-top: 28px; padding: 18px; background: var(--bg); border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); }
.founder-avatar { flex: none; width: 62px; height: 62px; overflow: hidden; border: var(--border-w) solid var(--ink); }
.founder-avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }
.founder-name { font-weight: 700; text-transform: uppercase; }
.founder .role { color: var(--muted); font-size: 0.86rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.founder-quote { font-weight: 600; margin: 4px 0 0; }

/* Case studies (issue #9) */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 860px) { .case-grid { grid-template-columns: 1fr; } }
.case-card { background: var(--bg); border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.case-media { border-bottom: var(--border-w) solid var(--ink); aspect-ratio: 16 / 9; overflow: hidden; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; }
.case-chip { display: inline-block; font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; padding: 4px 8px; border: var(--border-w) solid var(--ink); margin-bottom: 10px; }
.case-chip.y { background: var(--yellow); }
.case-chip.b { background: var(--blue); color: var(--white); }
.case-chip.r { background: var(--red); color: var(--white); }
.case-title { margin: 0; font-size: 1.2rem; }
.icon-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: var(--border-w) solid var(--ink);
  background: var(--bg); color: var(--ink); cursor: pointer; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.icon-btn:hover { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); background: var(--yellow); }
.icon-btn svg { width: 22px; height: 22px; }

/* Dialog / flyout (shared by cases, adoption details, team) */
.bx-dialog {
  border: var(--border-w) solid var(--ink); box-shadow: var(--shadow-lg);
  padding: 0; max-width: 700px; width: calc(100vw - 48px);
  background: var(--bg); color: var(--ink);
}
.bx-dialog::backdrop { background: var(--overlay); }
/* No-JS fallback: opening via anchor shows the panel in the page flow */
.bx-dialog:target { display: block; position: static; margin: 26px auto; }
.dialog-media { border-bottom: var(--border-w) solid var(--ink); }
.dialog-media img { width: 100%; height: auto; }
.dialog-body { padding: 24px 26px 26px; }
.dialog-body h3 { font-size: 1.45rem; margin-bottom: 4px; }
/* Dialogs are always light, also when nested in a dark section */
.dark .bx-dialog h2, .dark .bx-dialog h3 { color: var(--ink); }
.dialog-kicker { display: block; color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; margin-bottom: 14px; }
.dialog-body p:last-child { margin-bottom: 0; }
.dialog-close { position: absolute; top: 12px; right: 12px; z-index: 5; }
.bx-dialog:target .dialog-close { display: inline-flex; }
.placeholder-note { border: var(--border-w) dashed var(--muted); color: var(--muted); padding: 10px 14px; font-size: 0.88rem; font-weight: 600; margin-top: 16px; }

/* Numbered services (dark section) */
.dark { background: var(--ink); color: var(--white); }
.dark h2, .dark h3 { color: var(--white); }
.dark .eyebrow.plain { color: var(--text-on-dark-soft); }
.svc-list { border-top: var(--border-w) solid var(--line-on-dark); }
.svc { display: grid; grid-template-columns: 90px 1fr 1.1fr auto; gap: 20px; align-items: center; padding: 26px 6px; border-bottom: var(--border-w) solid var(--line-on-dark); }
.svc .no { font-family: var(--display); font-weight: 700; font-size: 2.2rem; }
.svc:nth-child(1) .no { color: var(--red); }
.svc:nth-child(2) .no { color: var(--blue); }
.svc:nth-child(3) .no { color: var(--yellow); }
.svc h3 { margin: 0; font-size: 1.5rem; font-family: var(--display); }
.svc p { margin: 0; color: var(--text-on-dark-muted); }
.svc .icon-btn { justify-self: end; background: var(--ink); color: var(--white); border-color: var(--white); box-shadow: none; }
.svc .icon-btn:hover { background: var(--yellow); color: var(--ink); border-color: var(--white); transform: none; }
@media (max-width: 820px) {
  .svc { grid-template-columns: 60px 1fr auto; }
  .svc p { grid-column: 1 / -1; }
}

/* Cards grid */
.grid { display: grid; gap: var(--gap); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.card { background: var(--bg); border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); padding: 26px; transition: transform .12s ease, box-shadow .12s ease; }
.card:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--ink); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); margin: 0; }
.card .tag { display: inline-block; font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; padding: 4px 8px; border: var(--border-w) solid var(--ink); margin-bottom: 14px; }
.card .tag.y { background: var(--yellow); }
.card .tag.b { background: var(--blue); color: var(--white); }
.card .tag.r { background: var(--red); color: var(--white); }

/* Testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote-card { background: var(--bg); border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); padding: 26px; display: flex; flex-direction: column; }
.stars { color: var(--ink); letter-spacing: 3px; margin-bottom: 14px; font-size: 1.1rem; }
.quote-card blockquote { margin: 0 0 18px; font-weight: 600; }
.q-author { font-weight: 700; text-transform: uppercase; }
.q-role { color: var(--muted); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.q-meta { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.q-photo { flex: none; width: 54px; height: 54px; border: var(--border-w) solid var(--ink); overflow: hidden; }
.q-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Google reviews line under the testimonials (issue #12) */
.google-review {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px;
  margin: 38px auto 0; font-weight: 700; text-transform: uppercase; font-size: 0.95rem;
  letter-spacing: 0.03em; width: fit-content; border-bottom: 3px solid var(--yellow);
  padding-bottom: 6px;
}
.google-review[hidden] { display: none; }
.google-review img { height: 28px; width: auto; }
.google-review:hover { background: var(--yellow); }

/* USP checklist */
.usp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 940px; margin: 0 auto; }
@media (max-width: 720px) { .usp-list { grid-template-columns: 1fr; } }
.usp-item { display: flex; gap: 14px; align-items: center; font-weight: 700; border: var(--border-w) solid var(--ink); padding: 14px 16px; background: var(--bg); box-shadow: var(--shadow); }
.usp-item .ck { flex: none; width: 26px; height: 26px; background: var(--yellow); border: var(--border-w) solid var(--ink); display: grid; place-items: center; }
.usp-item .ck svg { width: 15px; height: 15px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; } }
.stat { border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); padding: 30px 22px; text-align: center; background: var(--bg); }
.stat:nth-child(2) { background: var(--yellow); }
.stat .num { font-family: var(--display); font-weight: 700; font-size: 2.8rem; line-height: 1; }
.stat .label { margin-top: 10px; font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--muted); }
.stat:nth-child(2) .label { color: var(--ink); }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 16px; }
details.faq-item { border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); background: var(--bg); }
details.faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; text-transform: uppercase; font-size: 0.98rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; font-family: var(--display); font-size: 1.5rem; line-height: 1; }
details.faq-item[open] summary { background: var(--yellow); }
details.faq-item[open] summary::after { content: "\2212"; }
details.faq-item .faq-body { padding: 4px 22px 22px; color: var(--muted); font-weight: 500; }
.faq-media { margin-top: 16px; border: var(--border-w) solid var(--ink); }
.faq-media img { width: 100%; height: auto; }

details.about-story { margin-top: 28px; border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); background: var(--bg); }
details.about-story summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
details.about-story summary::-webkit-details-marker { display: none; }
details.about-story summary::after { content: "+"; font-family: var(--display); font-size: 1.5rem; line-height: 1; }
details.about-story[open] summary { background: var(--yellow); }
details.about-story[open] summary::after { content: "\2212"; }
details.about-story .about-story-body { padding: 4px 20px 20px; color: var(--muted); font-weight: 500; }
details.about-story .about-story-body p + p { margin-top: 14px; }

/* Team section on the homepage (issue #13) */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 54px; align-items: start; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
.team-heading { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; margin-bottom: 20px; }
.team-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 560px) { .team-cards { grid-template-columns: 1fr; } }
.team-card {
  display: block; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--bg); border: var(--border-w) solid var(--ink); box-shadow: var(--shadow);
  padding: 0; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.team-card:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.team-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--border-w) solid var(--ink); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter .25s ease; }
.team-card:hover .team-photo img,
.team-card:focus-within .team-photo img { filter: grayscale(0%); }
.team-info { display: block; padding: 14px 16px 16px; }
.team-name { font-weight: 700; text-transform: uppercase; }
.team-role { color: var(--muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.team-more { display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; border-bottom: 3px solid var(--yellow); }
.team-dialog-photo img { filter: grayscale(100%); }

/* Contact section (issue #14) */
.contact-section { background: var(--yellow); border-top: var(--border-w) solid var(--ink); border-bottom: var(--border-w) solid var(--ink); padding: 84px 0 130px; }
.contact-grid2 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 54px; align-items: start; }
@media (max-width: 900px) { .contact-grid2 { grid-template-columns: 1fr; gap: 44px; } }
.contact-info .eyebrow { background: var(--bg); }
.c-row { margin-bottom: 16px; }
.c-label { display: block; font-weight: 800; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.06em; }
.c-value a { font-weight: 700; }
.contact-form-card { background: var(--bg); border: var(--border-w) solid var(--ink); box-shadow: var(--shadow-lg); padding: 28px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.06em; margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; border: var(--border-w) solid var(--ink); border-radius: 0;
  background: var(--bg); color: var(--ink); font: inherit; padding: 12px 14px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.form-actions .btn { width: 100%; }
.form-note { margin: 14px 0 0; color: var(--muted); font-size: 0.85rem; font-weight: 500; }
/* Honeypot: invisible for people, present for bots */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { border: var(--border-w) solid var(--ink); padding: 12px 16px; font-weight: 700; margin-bottom: 18px; }
.form-status.ok { background: var(--yellow); }
.form-status.err { background: var(--red); color: var(--white); }

/* Footer photo strip: compact and centered under the contact block (issue #14) */
.foot-strip { text-align: center; background: var(--yellow); padding: 0 24px 0; }
.foot-strip img { display: block; width: min(720px, 100%); height: auto; margin: -52px auto 0; position: relative; z-index: 5; }

/* Footer */
.site-footer { background: var(--bg); border-top: var(--border-w) solid var(--ink); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--gap); padding: 54px 24px 26px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand .bidr-logo { height: 24px; }
.footer-brand p { color: var(--muted); margin-top: 14px; max-width: 38ch; font-weight: 500; }
.footer-col h2 { font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px; }
.footer-col a { display: block; font-weight: 700; padding: 5px 0; }
.footer-col a:hover { background: var(--yellow); }
.footer-legal { border-top: var(--border-w) solid var(--ink); padding: 18px 24px 40px; color: var(--muted); font-size: 0.86rem; font-weight: 500; }
.footer-legal p { margin: 4px 0; }

/* Inner-page helpers */
.page-hero { padding: 54px 0 8px; }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.4em; text-transform: uppercase; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.note { border: var(--border-w) solid var(--ink); background: var(--yellow); padding: 16px 18px; margin: 22px 0; box-shadow: var(--shadow); font-weight: 600; }
.page-media { border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); margin: 26px 0; max-width: 640px; }
.page-media img { width: 100%; height: auto; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 860px) { .team-grid { grid-template-columns: 1fr; } }
.person { border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); padding: 24px; text-align: center; }
.person .avatar { width: 110px; height: 110px; margin: 0 auto 16px; overflow: hidden; border: var(--border-w) solid var(--ink); }
.person .avatar img { width: 100%; height: 100%; object-fit: cover; }
.person .role { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.04em; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { border: var(--border-w) solid var(--ink); box-shadow: var(--shadow); padding: 24px; }