/* ============================================================
   BINGE BUILT - shared section chrome
   Extracted from the per-page inline <style> blocks,
   which each carried byte-identical copies of the header lockup,
   the contact form and the footer. One cached file, one source of
   truth. Load order on every page:
     _ds/.../styles.css  ->  styles.css  ->  bp.css  ->  sections.css
     ->  the page's own inline <style>
   so a page can still override anything here from its own block.
   Nothing in this file animates: the motion grammar stays in bp.css
   and in the page blocks, behind its prefers-reduced-motion gates.
   ============================================================ */

/* ---- brand logo (image wordmark, generated from Logo.png) ---- */
.wordmark {
  align-items: center;
}

.wordmark .logo-img {
  height: 44px;
  width: auto;
  display: block;
}

/* header wordmark: image stacked over a small architectural strapline (matches hero) */
.site-header .wordmark {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  line-height: 1;
}

.site-header .wordmark .logo-img {
  height: 40px;
}

.wordmark__strap {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-on-dark);
  white-space: nowrap;
}

.site-header__inner {
  height: 74px;
}

.site-footer .wordmark .logo-img {
  height: 58px;
  margin-bottom: 2px;
}

@media (max-width: 880px) {
  .site-header__inner {
    height: 64px;
  }

  .site-header .wordmark .logo-img {
    height: 34px;
  }

  /* Pricing has always kept a 40px header logo on phones where every other page
     steps down to 34px. Pinned here rather than inline so the rule lives in one
     place. If that difference turns out to be drift rather than intent, delete
     this block and Pricing falls in line with the rest. */
  .pp2 .site-header .wordmark .logo-img {
    height: 40px;
  }

  .wordmark__strap {
    font-size: 10px;
    letter-spacing: 0.13em;
  }
}

/* Thumb floor for the header CTA. The computed height is already 48px
   (11px padding twice, a 22.4px line box, two 2px borders), so this is a
   guard against future trims, not a resize: the header is 74px tall (64px
   under 880px) and does not grow. Coarse pointers only, so mouse users
   keep the compact button. */
@media (pointer: coarse) {
  .site-header .nav .btn {
    min-height: 44px;
  }
}

/* ---- image placeholder contents ---- */
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- contact band: the form and the "or just message me" aside ---- */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}

@media (max-width: 820px) {
  .contact-split {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

.form {
  display: grid;
  gap: 16px;
}

.form .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .form .row2 {
    grid-template-columns: 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--grey-on-dark);
}

.field input,
.field textarea {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--paper);
  background: var(--ink-2);
  border: var(--rule) solid var(--ink-line);
  border-radius: var(--radius);
  padding: 14px 16px;
  outline: none;
  transition: border-color .15s ease;
}

.field textarea {
  resize: vertical;
  min-height: 112px;
  line-height: 1.5;
}

/* A placeholder is text and owes the same 4.5:1 as any other. #5C6679 on the
   ink-800 field measured 2.72:1. This is 4.84:1 and still nowhere near the
   14.44:1 the typed answer reads at, so it cannot be mistaken for one. No
   design-system token fits: the greys that pass here would fail on the white
   fields inside the wizard, which is the opposite surface. */
.field input::placeholder,
.field textarea::placeholder {
  color: #828FAB;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--orange);
}

.form .btn {
  margin-top: 6px;
  justify-content: center;
}

.contact-aside {
  padding-top: 8px;
}

.contact-aside .or {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--grey-on-dark);
  margin-bottom: 18px;
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  text-decoration: none;
  color: var(--paper);
}

.contact-line:hover {
  color: var(--orange);
}

.contact-line .ic {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--ink-2);
  border: var(--rule) solid var(--ink-line);
  display: grid;
  place-items: center;
  flex: none;
}

.contact-line .ic svg {
  width: 20px;
  height: 20px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* email line can be long - let it shrink + wrap rather than overflow on narrow screens */
.contact-line--email {
  font-size: clamp(17px, 2.4vw, 26px);
  word-break: break-word;
}

/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* the privacy line + inline status message under the button */
.form-note {
  margin-top: -4px;
  font-size: 13px;
}

.form-note a {
  color: var(--paper);
  text-decoration: underline;
}

.form-note a:hover {
  color: var(--orange);
}

/* The privacy link measured 87x16, which is a poor thumb target, and it is a
   word inside a sentence so it cannot simply grow: an inline-flex 44px box
   would break the line it sits on. An invisible pad carries the tap instead.
   The note is nudged down first, because at its usual -4px the pad would have
   reached back over the send button and started stealing ITS taps, which is
   the very fault being fixed inside the wizard. */
@media (pointer: coarse) {
  .form-note { margin-top: 8px; }
  .form-note a { position: relative; }
  .form-note a::after {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

.form-status {
  margin-top: 2px;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 15px;
}

.form-status--ok {
  color: var(--orange);
}

.form-status--err {
  color: #ff9a8b;
}

/* The prefilled mailto bp.js injects here when a send fails. There is no global
   a{} rule anywhere on this site, so a bare anchor would render browser-blue on
   the dark contact band and read as a broken bit of page. Same treatment as
   .form-note a above, which sits in the same band. */
.form-status a {
  color: var(--paper);
  text-decoration: underline;
}

.form-status a:hover {
  color: var(--orange);
}

/* JS off: the noscript rule in each page's head hides the form and reveals this,
   because with no JS there is no way to reach the worker and no relay to fall
   back to. Sits outside the form so hiding the form cannot hide it too. */
.contact-noscript {
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.6;
}

.contact-noscript a {
  color: var(--paper);
  text-decoration: underline;
}

.contact-noscript a:hover {
  color: var(--orange);
}

/* ---- footer title block ---- */
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-tag {
  color: var(--grey-on-dark);
  margin-top: 12px;
  font-size: 16px;
}

.footer-area {
  color: var(--grey-on-dark);
  margin-top: 6px;
  font-size: 14px;
  max-width: 34ch;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}

@media (max-width: 600px) {
  .footer-meta {
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .contact-line {
    align-items: flex-start;
    gap: 12px;
  }

  .contact-line .ic {
    width: 42px;
    height: 42px;
  }

  .form .btn { width: 100%; }

  .site-footer { padding: 52px 0 32px; }
  .footer-grid { gap: 36px; }
  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
  }
}

.footer-built {
  font-size: 13px;
  color: var(--grey-on-dark);
}

.footer-built a {
  color: var(--grey-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-built a:hover {
  color: var(--orange);
}