/* Blueprint Projects company site. Converted from the Claude Design export (October 2026). */

/* Lato, self-hosted (latin subset, SIL Open Font License: assets/fonts/OFL.txt). */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/lato-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/lato-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/lato-900-latin.woff2') format('woff2'); }

:root {
  --blue: #253EA2;
  --blue-dark: #1A2D78;
  --blue-tint: #EEF1FA;
  --focus-ring: #DCE2F5;
  --ink: #1C2233;
  --text: #3A4256;
  --muted: #6B7185;
  --line: #E6E8EF;
  --line-strong: #C9CFE3;
  --surface: #F6F7FB;
  --pvp-green: #39ff15;
}

html, body { margin: 0; padding: 0; background: #fff; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
* { box-sizing: border-box; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); text-decoration: underline; }
input, textarea, button { font-family: inherit; }
img { max-width: 100%; }

.page { font-family: 'Lato', sans-serif; color: var(--ink); background: #fff; min-height: 100vh; position: relative; }
.content { position: relative; z-index: 1; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.section { padding-top: 112px; padding-bottom: 112px; }
.center { text-align: center; }
.mb-20 { margin-bottom: 20px !important; }
.mb-56 { margin-bottom: 56px !important; }
.mt-56 { margin-top: 56px; }

/* Faint logo behind the page; main.js fades it as the visitor scrolls past the hero. Its right edge lines up
   with the content column (.wrap), so on wide screens the spare room is to the right of the B. */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: flex; align-items: flex-start; justify-content: flex-end; padding: 90px max(4vw, calc((100vw - 1160px) / 2 + 32px)) 0 0; overflow: hidden; }
.backdrop img { height: min(72vh, 42vw, 600px); width: auto; opacity: 1; transition: opacity 0.15s linear; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .backdrop img { transition: none; }
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-logo img { height: 52px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav a { color: var(--text); }
/* Phone menu button; main.js adds .has-menu to the header, so without script the stacked nav still shows. */
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); cursor: pointer; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.15s ease, background-color 0.15s ease; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-open .menu-icon { background: transparent; }
.menu-open .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

/* Buttons */
.btn { display: inline-block; border-radius: 6px; font-weight: 700; font-size: 16px; padding: 16px 26px; border: none; cursor: pointer; }
.btn:hover { text-decoration: none; }
.btn-primary, .nav a.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover, .nav a.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--blue); border: 1px solid var(--line-strong); }
.btn-outline:hover { border-color: var(--blue); }
.btn-small { padding: 10px 18px; font-size: 15px; }
.link-button, .inline-link { background: none; border: none; padding: 0; color: var(--blue); cursor: pointer; }
.link-button { font-size: 14px; font-weight: 700; }
.inline-link { font: inherit; }
.link-button:hover, .inline-link:hover { text-decoration: underline; }

/* Type */
.eyebrow { margin: 0 0 16px; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
h2 { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; font-weight: 700; color: var(--ink); text-wrap: balance; }
h3 { color: var(--ink); }
.intro { margin: 0 0 56px; max-width: 600px; font-size: 18px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.intro.narrow { margin-bottom: 32px; max-width: 440px; }
.prose { display: flex; flex-direction: column; gap: 20px; font-size: 18px; line-height: 1.7; color: var(--text); padding-top: 6px; }
.prose p { margin: 0; text-wrap: pretty; }

/* Hero */
.hero { border-bottom: 1px solid var(--line); }
.hero-inner { padding-top: 120px; padding-bottom: 128px; padding-right: max(32px, min(40vw, 480px)); }
.eyebrow-hero { margin-bottom: 20px; font-size: 14px; }
.hero h1 { margin: 0; font-size: clamp(30px, 4.1vw, 72px); line-height: 1.05; font-weight: 900; color: var(--blue); letter-spacing: -0.02em; }
.hero h1 span { display: block; white-space: nowrap; }
.lead { margin: 28px 0 0; max-width: 560px; font-size: 20px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 64px; align-items: start; }

/* Products */
.band { background: rgba(246,247,251,0.6); border-top: 1px solid var(--line); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 40px; display: flex; flex-direction: column; gap: 24px; }
/* One product, laid out across the full width: description on the left, a slot for the public preview on the right. */
.card-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px; align-items: stretch; }
.card-main { display: flex; flex-direction: column; gap: 24px; }
.card-preview { min-height: 280px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--blue-tint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.card-preview img { height: 64px; width: auto; opacity: 0.35; }
.card-preview p { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pvp-name { display: flex; align-items: center; gap: 14px; }
.pvp-name img { height: 56px; width: auto; display: block; }
.pvp-wordmark { font-size: 22px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); line-height: 1; }
.pvp-wordmark span { color: var(--pvp-green); }
.pvp-wordmark sup { font-size: 10px; font-weight: 400; margin-left: 2px; }
.card-text { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.card-foot { margin: auto 0 0; font-size: 14px; color: var(--muted); }
.pill { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.pill-blue { color: var(--blue); background: var(--blue-tint); }

/* Team */
.team-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 32px; }
.member { display: flex; flex-direction: column; gap: 16px; width: 440px; max-width: 100%; align-items: center; text-align: center; }
.member-lead { width: 640px; }
.headshot { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; }
.member-name { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: -12px; }
.member-name.small { font-size: 19px; }
.member-role { font-size: 15px; color: var(--muted); }
.member-summary { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); text-wrap: pretty; }

.bio { max-width: 860px; margin: 40px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 48px; }
.bio[hidden] { display: none; }
.team-row > .bio { flex-basis: 100%; margin-top: 0; text-align: left; }
.bio .eyebrow { margin-bottom: 12px; }
.bio h3 { margin: 0 0 20px; font-size: 28px; line-height: 1.2; font-weight: 700; }
.bio-text { display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.7; color: var(--text); }
.bio-text p { margin: 0; text-wrap: pretty; }

/* Contact */
.contact-email { font-size: 18px; font-weight: 700; }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form[hidden] { display: none; }
/* Focus is moved here by script for screen readers; no ring needed on non-interactive targets. */
.thanks:focus, .legal h2[tabindex="-1"]:focus { outline: none; }
/* Honeypot field for bots: off-screen rather than display:none, which some bots skip. */
.contact-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.contact-form input, .contact-form textarea { font-size: 16px; font-weight: 400; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); outline: none; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus-ring); }
/* Cloudflare Turnstile box; functions/_middleware.js unhides it when the site key is set. Reserves its 65px height. */
.turnstile { min-height: 65px; }
.turnstile[hidden] { display: none; }
.fine-print { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.btn-submit { align-self: flex-start; padding: 16px 28px; }
.btn-submit:disabled { opacity: 0.6; cursor: wait; }
.form-error { margin: 0; font-size: 14px; color: #B42318; }
.thanks { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.thanks[hidden] { display: none; }
.thanks-title { font-size: 26px; font-weight: 700; color: var(--blue); }
.thanks-text { font-size: 17px; line-height: 1.6; color: var(--text); }

/* Footer and legal */
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { padding-top: 32px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; color: var(--muted); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-links a, .footer-link { color: var(--muted); }
.footer-link { background: none; border: none; padding: 0; font-size: 14px; cursor: pointer; }
.footer-link:hover { color: var(--blue); text-decoration: underline; }
.footer-note { font-size: 13px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.legal { border-top: 1px solid var(--line); background: var(--surface); }
.legal[hidden] { display: none; }
.legal-inner { max-width: 760px; margin: 0 auto; padding: 64px 32px 80px; }
.legal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 40px; }
.legal-head .eyebrow { margin-bottom: 12px; }
.legal-head h2 { margin: 0 0 8px; font-size: 32px; }
.legal-date { margin: 0; font-size: 14px; color: var(--muted); }
.close-button { background: none; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--blue); cursor: pointer; white-space: nowrap; }
.close-button:hover { border-color: var(--blue); }
.legal-body { display: flex; flex-direction: column; gap: 28px; font-size: 16px; line-height: 1.7; color: var(--text); }
.legal-body p { margin: 0; }
.legal-body > div { display: flex; flex-direction: column; gap: 10px; }
.legal-body h3 { margin: 0; font-size: 19px; font-weight: 700; }
.legal-body strong { color: var(--ink); }
.legal-back { margin: 56px 0 0; font-size: 15px; font-weight: 700; }

/* Phones: the design's nav doesn't fit beside the logo. With script it moves into a menu under the ☰ button;
   without, it stacks under the logo. */
@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .has-menu .header-inner { flex-direction: row; align-items: center; }
  .has-menu .menu-toggle { display: flex; }
  .has-menu .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 16px 16px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(28, 34, 51, 0.08); font-size: 17px; }
  .has-menu.menu-open .nav { display: flex; }
  .has-menu .nav a { padding: 12px 0; }
  .has-menu .nav a.btn { margin-top: 8px; padding: 14px; text-align: center; }
  .header-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .header-logo img { height: 40px; }
  .nav { gap: 18px; flex-wrap: wrap; }
  .hero-inner { padding-top: 64px; padding-bottom: 72px; padding-right: 16px; }
  .hero h1 { font-size: 38px; }
  .hero h1 span { white-space: normal; }
  .section { padding-top: 72px; padding-bottom: 72px; }
  .card, .bio, .thanks { padding: 28px; }
  .two-col { gap: 40px; }
}