/* BuilderK A5 look, approved by Kevin on 9/26/2026.
   Dark hero, light concrete and white sections, orange only as an accent outside the hero,
   Barlow Condensed headings, DM Sans text, orange highlighter bands on key words.
   Shared by every page; page specific rules live in each page's own <style>. */

:root {
  --a5-dark: #0C0B0A;
  --a5-on-dark: #F5F2ED;
  --a5-on-dark-soft: #DDD7CE;
  --a5-on-dark-muted: #BDB7AE;
  --a5-on-dark-faint: #8E887F;
  --a5-concrete: #F2F1ED;
  --a5-paper: #F6F5F2;
  --a5-white: #FFFFFF;
  --a5-line: #E2DED7;
  --a5-ink: #1B1A18;
  --a5-body: #57534D;
  --a5-muted: #6B665F;
  --a5-finance: #E8EDF0;
  --a5-finance-ink: #1E2A33;
  --a5-finance-body: #3B4852;
  --a5-finance-label: #3E5566;
  --a5-orange: #F77F00;
  --a5-cond: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --a5-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --a5-gutter: 64px;
  --a5-max: 1440px;
  --a5-ease-out: cubic-bezier(.23, 1, .32, 1);
}
@media (max-width: 899px) { :root { --a5-gutter: 16px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; accent-color: var(--a5-orange); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--a5-sans); font-size: 16px; line-height: 1.5; color: var(--a5-ink); background: var(--a5-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { max-width: 100%; }
img, video { display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--a5-orange); outline-offset: 3px; }
/* on light surfaces an orange ring is too faint (2.6:1), so it turns ink there; orange stays on dark */
:is(.a5-bg-white, .a5-bg-concrete, .a5-bg-paper, .a5-bg-finance, .a5-form-card) :focus-visible { outline-color: var(--a5-ink); }
::selection { background: #FDDDB8; color: var(--a5-ink); }
input, textarea { caret-color: var(--a5-orange); }
[id] { scroll-margin-top: 16px; }
.a5-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.a5-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--a5-orange); color: #0C0B0A; font-weight: 700; text-decoration: none; }
.a5-skip:focus { top: 12px; }

/* ---------- layout ---------- */
.a5-wrap { width: 100%; max-width: var(--a5-max); margin: 0 auto; padding-inline: var(--a5-gutter); }
.a5-section { padding-block: 96px; }
.a5-section-tight { padding-block: 72px; }
@media (max-width: 899px) { .a5-section, .a5-section-tight { padding-block: 48px 44px; } }
.a5-bg-white { background: var(--a5-white); }
.a5-bg-concrete { background: var(--a5-concrete); }
.a5-bg-paper { background: var(--a5-paper); }
.a5-bg-finance { background: var(--a5-finance); color: var(--a5-finance-ink); }
.a5-bg-dark { background: var(--a5-dark); color: var(--a5-on-dark); }
.a5-stack { display: flex; flex-direction: column; gap: var(--gap, 20px); }
.a5-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 14px); }
.a5-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 40px; }
.a5-head-text { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.a5-head-text .a5-h2 + .a5-p { margin-top: 4px; }
.a5-head-center { justify-content: center; text-align: center; }
.a5-head-center .a5-head-text { align-items: center; margin-inline: auto; }
@media (max-width: 899px) { .a5-head { margin-bottom: 28px; align-items: flex-start; } }

/* ---------- type ---------- */
.a5-label { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a5-muted); }
.a5-bg-dark .a5-label { color: var(--a5-on-dark-muted); }
.a5-bg-finance .a5-label { color: var(--a5-finance-label); }
.a5-h1 { margin: 0; font-family: var(--a5-cond); font-weight: 800; font-size: clamp(50px, 5.6vw, 80px); line-height: 0.9; text-transform: uppercase; text-wrap: balance; }
.a5-h2 { margin: 0; font-family: var(--a5-cond); font-weight: 800; font-size: clamp(40px, 4.1vw, 58px); line-height: 0.92; text-transform: uppercase; text-wrap: balance; color: var(--a5-ink); }
.a5-bg-dark .a5-h2 { color: var(--a5-on-dark); }
.a5-bg-finance .a5-h2 { color: var(--a5-finance-ink); }
.a5-h3 { margin: 0; font-family: var(--a5-cond); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--a5-ink); }
.a5-bg-dark .a5-h3 { color: var(--a5-on-dark); }
.a5-p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--a5-body); max-width: 36em; }
.a5-bg-dark .a5-p { color: var(--a5-on-dark-soft); }
.a5-bg-finance .a5-p { color: var(--a5-finance-body); }
.a5-small { font-size: 14px; line-height: 1.55; color: var(--a5-muted); }
.a5-accent { color: var(--a5-orange); }
@media (max-width: 899px) { .a5-p { font-size: 16px; } .a5-h3 { font-size: 24px; } }

/* orange highlighter behind a key word; draws itself again every 8 seconds while on screen (see effects below) */
.a5-hl { background-image: linear-gradient(180deg, transparent 58%, var(--a5-orange) 58%, var(--a5-orange) 92%, transparent 92%); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0; padding: 0 .08em; margin: 0 -.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.a5-hl-label { background-image: linear-gradient(180deg, transparent 50%, var(--a5-orange) 50%, var(--a5-orange) 95%, transparent 95%); padding: 0 2px; margin: 0 -2px; color: var(--a5-ink); }


/* ---------- buttons and links ---------- */
.a5-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 26px; border: 0; border-radius: 13px; font-family: var(--a5-cond); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 160ms var(--a5-ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease, filter 160ms ease; }
.a5-btn:active, .btn-primary:active { transform: scale(.98); }
.btn-primary { transition: transform 160ms var(--a5-ease-out), background-color 160ms ease, filter 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .a5-btn-hero:hover { filter: brightness(1.06); }
  .a5-btn-dark:hover, .btn-primary:hover { background-color: #34312C; }
  .a5-btn-outline:hover { background-color: var(--a5-ink); color: #FFFFFF; border-color: var(--a5-ink); }
  .a5-bg-dark .a5-btn-outline:hover, .a5-btn-call:hover { background-color: rgba(245, 242, 237, 0.08); color: var(--a5-on-dark); }
}
.a5-btn svg { flex-shrink: 0; }
.a5-btn-hero { background: var(--a5-orange); color: #0C0B0A; min-height: 62px; font-size: 24px; border-radius: 12px; }
.a5-btn-dark { background: var(--a5-ink); color: #FFFFFF; min-height: 60px; border-radius: 14px; }
.a5-btn-outline { background: transparent; color: var(--a5-ink); border: 1.5px solid currentColor; min-height: 52px; font-family: var(--a5-sans); font-weight: 700; font-size: 16px; letter-spacing: 0; text-transform: none; border-radius: 12px; }
.a5-bg-dark .a5-btn-outline { color: var(--a5-on-dark); }
.a5-btn-call { min-height: 54px; padding: 0 22px; background: transparent; border: 1.5px solid rgba(245, 242, 237, 0.38); color: var(--a5-on-dark); font-family: var(--a5-sans); font-weight: 700; font-size: 16px; letter-spacing: 0; text-transform: none; border-radius: 12px; }
.a5-link { font-weight: 700; color: var(--a5-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.a5-link:hover { color: #000; text-decoration-color: var(--a5-orange); }
@media (max-width: 899px) {
  .a5-btn-hero, .a5-btn-dark { min-height: 58px; font-size: 22px; }
  .a5-btn-full-sm { width: 100%; }
}

/* ---------- header ---------- */
.a5-header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
.a5-header-bar { max-width: var(--a5-max); margin: 0 auto; height: 88px; padding: 0 var(--a5-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.a5-logo { display: block; flex-shrink: 0; }
.a5-logo img { width: 138px; height: 22px; }
.a5-nav { display: flex; gap: 34px; font-size: 15px; font-weight: 500; }
.a5-nav a { color: #ECE7DF; text-decoration: none; padding: 6px 0 5px; border-bottom: 2px solid transparent; white-space: nowrap; }
.a5-nav a:hover { color: #FFFFFF; }
.a5-nav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--a5-orange); }
.a5-header-actions { display: flex; align-items: center; gap: 22px; }
.a5-header-phone { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--a5-on-dark); text-decoration: none; white-space: nowrap; }
.a5-header-cta { height: 48px; padding: 0 22px; display: flex; align-items: center; border-radius: 10px; background: var(--a5-orange); color: #0C0B0A; font-family: var(--a5-cond); font-weight: 800; font-size: 19px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.a5-header-call, .a5-menu-btn { display: none; }
/* the full menu needs about 1,000 px; the phone number only shows on wide screens */
@media (max-width: 1319px) { .a5-nav { gap: 24px; } .a5-header-phone { display: none; } }
@media (max-width: 1023px) {
  .a5-header-bar { height: 64px; padding: 0 max(10px, calc(var(--a5-gutter) - 6px)) 0 var(--a5-gutter); }
  .a5-logo img { width: 113px; height: 18px; }
  .a5-nav, .a5-header-phone, .a5-header-cta { display: none; }
  .a5-header-actions { gap: 6px; }
  .a5-header-call { display: flex; height: 44px; padding: 0 16px; align-items: center; gap: 8px; border-radius: 999px; background: var(--a5-orange); color: #0C0B0A; font-weight: 700; font-size: 15px; text-decoration: none; }
  .a5-menu-btn { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 10px; color: var(--a5-on-dark); padding: 0; cursor: pointer; }
}

/* phone menu */
.a5-menu { position: fixed; inset: 0; z-index: 90; background: var(--a5-dark); color: var(--a5-on-dark); overflow-y: auto; padding: 0 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.a5-menu[hidden] { display: none; }
.a5-menu-top { height: 64px; display: flex; align-items: center; justify-content: space-between; margin: 0 -6px 8px 0; }
.a5-menu-top img { width: 113px; height: 18px; }
.a5-menu-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--a5-on-dark); cursor: pointer; border-radius: 10px; }
.a5-menu-main { display: flex; flex-direction: column; }
.a5-menu-main a { font-family: var(--a5-cond); font-weight: 800; font-size: 32px; line-height: 1.1; text-transform: uppercase; color: var(--a5-on-dark); text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(245, 242, 237, 0.1); }
.a5-menu-main a[aria-current="page"] { color: var(--a5-orange); }
.a5-menu-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 22px; font-size: 16px; }
.a5-menu-more a { color: var(--a5-on-dark-soft); text-decoration: none; }
.a5-menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.a5-menu-actions .a5-btn { width: 100%; }
body.a5-menu-open { overflow: hidden; }
body.a5-menu-open .bk-call-bar, body.a5-menu-open .mobile-cta-bar, body.a5-menu-open .calc-sticky-cta { display: none !important; }

/* ---------- page hero (photo on the right on computers, photo band on top on phones) ---------- */
.a5-hero { position: relative; background: var(--a5-dark); color: var(--a5-on-dark); overflow: hidden; isolation: isolate; }
.a5-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 170px; background: linear-gradient(180deg, rgba(12, 11, 10, 0.72) 0%, rgba(12, 11, 10, 0) 100%); z-index: 1; pointer-events: none; }
.a5-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 51.4%; z-index: 0; }
.a5-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.a5-hero-photo::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; background: linear-gradient(90deg, var(--a5-dark) 0%, rgba(12, 11, 10, 0) 100%); z-index: 1; }
.a5-hero-inner { position: relative; z-index: 2; max-width: var(--a5-max); margin: 0 auto; min-height: var(--hero-min, 640px); padding: 150px var(--a5-gutter) var(--hero-pad-bottom, 72px); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.a5-hero-body { width: min(var(--hero-text, 620px), 100%); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.a5-hero-label { font-family: var(--a5-cond); font-weight: 600; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 242, 237, 0.88); }
.a5-hero .a5-h1 { color: var(--a5-on-dark); }
.a5-hero-lead { margin: 0; font-size: 21px; line-height: 1.4; font-weight: 700; }
.a5-hero-sub { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--a5-on-dark-soft); }
.a5-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.a5-hero-note { margin: 0; font-size: 15px; color: var(--a5-on-dark-muted); }
.a5-hero-note a { color: var(--a5-on-dark); font-weight: 700; text-decoration: none; }
/* narrower computers: the headline runs further into the photo, so keep the text a little narrower and fade more of the photo */
@media (min-width: 900px) and (max-width: 1279px) {
  .a5-hero { --hero-text: min(620px, 56vw); }
  .a5-hero-photo::before { width: 70%; background: linear-gradient(90deg, var(--a5-dark) 0%, rgba(12, 11, 10, 0.86) 40%, rgba(12, 11, 10, 0) 100%); }
}
@media (max-width: 899px) {
  .a5-hero::before { display: none; }
  .a5-hero-photo { position: relative; width: 100%; height: var(--hero-photo-h, 360px); }
  .a5-hero-photo::before { width: auto; right: 0; background: linear-gradient(180deg, rgba(12, 11, 10, 0.62) 0%, rgba(12, 11, 10, 0) 26%, rgba(12, 11, 10, 0) 55%, var(--a5-dark) 100%); }
  .a5-hero-inner { min-height: 0; padding: 4px 16px 36px; gap: 28px; }
  .a5-hero-noimg .a5-hero-inner { padding-top: 96px; }
  .a5-hero-body { gap: 16px; width: 100%; }
  .a5-hero .a5-h1 { font-size: clamp(42px, 12.8vw, 50px); line-height: 0.92; }
  .a5-hero-label { font-size: 15px; letter-spacing: 0.12em; }
  .a5-hero-lead { font-size: 18px; }
  .a5-hero-sub { font-size: 16px; color: #D8D2C9; }
  .a5-hero-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .a5-hero-actions .a5-btn { width: 100%; }
}

/* ---------- cards, grids, photos ---------- */
.a5-grid { display: grid; gap: var(--gap, 24px); }
.a5-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a5-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a5-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .a5-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a5-cols-3.a5-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .a5-grid { gap: var(--gap-sm, 16px); }
  .a5-cols-2, .a5-cols-3, .a5-cols-4, .a5-cols-3.a5-cols-md-2 { grid-template-columns: minmax(0, 1fr); }
  .a5-cols-sm-2, .a5-cols-3.a5-cols-sm-2, .a5-cols-4.a5-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.a5-card { background: var(--a5-white); border: 1px solid var(--a5-line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.a5-bg-white .a5-card { background: var(--a5-white); }
.a5-card-flat { background: var(--a5-paper); border-color: transparent; }
.a5-card .a5-p { font-size: 15.5px; line-height: 1.6; }
@media (max-width: 899px) { .a5-card { padding: 22px; border-radius: 16px; } }
.a5-photo { position: relative; border-radius: 16px; overflow: hidden; background: #E9E6E0; }
.a5-photo img, .a5-photo video { width: 100%; height: 100%; object-fit: cover; }
.a5-figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.a5-figure figcaption { font-size: 14px; font-weight: 700; color: var(--a5-ink); }
.a5-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; background: #F2F1ED; color: #57534D; }
.a5-tag-accent { background: #FDF1E3; color: #9A4D00; }
.a5-render-tag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 9px; border-radius: 6px; background: rgba(12, 11, 10, 0.78); color: #FFFFFF; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 899px) { .a5-render-tag { top: 8px; left: 8px; padding: 3px 7px; font-size: 10.5px; letter-spacing: 0.06em; } }
.a5-icon { width: 56px; height: 56px; flex-shrink: 0; }
.a5-num { width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; background: var(--a5-ink); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-family: var(--a5-cond); font-weight: 800; font-size: 19px; }
.a5-num-accent { background: var(--a5-orange); color: var(--a5-ink); }
.a5-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.a5-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--a5-body); }
.a5-checks li::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; background: no-repeat center / 22px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F77F00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E"); }
.a5-stat-num { font-family: var(--a5-cond); font-weight: 800; font-size: 44px; line-height: 1; }
.a5-stat-label { font-size: 15px; line-height: 1.45; color: var(--a5-body); }
.a5-bg-finance .a5-stat-label { color: var(--a5-finance-body); }

/* FAQ */
.a5-faq { display: flex; flex-direction: column; border-top: 1px solid var(--a5-line); }
.a5-faq details { border-bottom: 1px solid var(--a5-line); }
.a5-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--a5-ink); }
.a5-faq summary::-webkit-details-marker { display: none; }
.a5-faq summary::after { content: "+"; flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; background: var(--a5-concrete); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.a5-faq details[open] summary::after { content: "\2212"; }
.a5-faq .a5-faq-a { padding: 0 0 22px; font-size: 16px; line-height: 1.65; color: var(--a5-body); max-width: 40em; }
@media (max-width: 899px) { .a5-faq summary { font-size: 17px; padding: 18px 0; } }
@supports (interpolate-size: allow-keywords) {
  .a5-faq details { interpolate-size: allow-keywords; }
  .a5-faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size 280ms var(--a5-ease-out), content-visibility 280ms allow-discrete; }
  .a5-faq details[open]::details-content { block-size: auto; }
}

/* ---------- tape measure ---------- */
.a5-tape { position: relative; }

/* ---------- forms ---------- */
.a5-form-card { background: var(--a5-white); border: 1px solid var(--a5-line); border-radius: 22px; padding: 28px; box-shadow: 0 24px 60px rgba(12, 11, 10, 0.08); }
.a5-field { display: flex; flex-direction: column; gap: 7px; }
.a5-field label, .a5-form label { font-size: 14px; font-weight: 700; color: var(--a5-ink); }
.a5-form input[type="text"], .a5-form input[type="email"], .a5-form input[type="tel"], .a5-form input[type="number"], .a5-form select, .a5-form textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--a5-line); border-radius: 10px; background: var(--a5-paper); color: var(--a5-ink); font: 16px/1.4 var(--a5-sans); appearance: auto; }
.a5-form textarea { min-height: 110px; resize: vertical; }
.a5-form select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1A18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.a5-form select:invalid { color: var(--a5-muted); }
.a5-form select option { color: var(--a5-ink); }
.a5-form input::placeholder, .a5-form textarea::placeholder { color: var(--a5-muted); opacity: 1; }
.a5-form input:focus, .a5-form select:focus, .a5-form textarea:focus { outline: none; border-color: var(--a5-ink); background-color: var(--a5-white); box-shadow: 0 0 0 3px rgba(247, 127, 0, 0.25); }
.a5-form :is(input, select, textarea):user-invalid { border-color: #B42318; background-color: #FFF8F7; }
.a5-form small { font-size: 13.5px; line-height: 1.45; color: var(--a5-muted); }
.a5-form-card .req { color: #B35C00; }
/* the status line lead-submit.js adds: no empty gap, and success never looks like an error */
.a5-form > p[role="status"] { margin-bottom: 0; text-align: center; }
.a5-form > p[role="status"]:empty { display: none; }
.a5-form > p[role="status"][data-state="ok"], .a5-form > p[role="status"][data-state="error"] { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; text-align: left; font-size: 16px; transition: opacity 200ms ease-out, transform 200ms var(--a5-ease-out); }
.a5-form > p[role="status"][data-state="ok"] { background: var(--a5-paper); border: 1px solid var(--a5-line); color: var(--a5-ink); font-weight: 700; }
.a5-form > p[role="status"][data-state="ok"]::before { content: ""; flex: 0 0 22px; height: 22px; background: no-repeat center / 22px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F77F00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E"); }
.a5-form > p[role="status"][data-state="error"] { display: block; background: #FFF6EC; border: 1px solid #F1D3AE; color: #6B3A00; }
@starting-style { .a5-form > p[role="status"][data-state] { opacity: 0; transform: translateY(4px); } }

/* ---------- footer ---------- */
.a5-footer { background: var(--a5-dark); color: var(--a5-on-dark); }
.a5-footer-inner { max-width: var(--a5-max); margin: 0 auto; padding: 64px var(--a5-gutter) 36px; display: flex; flex-direction: column; gap: 44px; }
.a5-footer-cols { display: grid; grid-template-columns: 340px repeat(4, minmax(0, 1fr)); gap: 30px 40px; }
.a5-footer-brand { display: flex; flex-direction: column; gap: 14px; }
.a5-footer-brand img { width: 150px; height: 24px; }
.a5-footer-brand p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--a5-on-dark-muted); max-width: 300px; }
.a5-footer-brand .a5-footer-license { font-size: 14px; color: var(--a5-on-dark-faint); }
.a5-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.a5-footer-col h2 { margin: 0 0 4px; font-family: var(--a5-sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a5-on-dark-faint); }
.a5-footer-col a, .a5-footer-col span { color: #E4DFD7; text-decoration: none; }
.a5-footer-col a:hover { color: #FFFFFF; text-decoration: underline; }
.a5-footer-bottom { padding-top: 22px; border-top: 1px solid rgba(245, 242, 237, 0.14); display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 13.5px; color: var(--a5-on-dark-faint); }
.a5-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.a5-footer-legal a, .a5-footer-legal button { color: var(--a5-on-dark-muted); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.a5-footer-legal a:hover, .a5-footer-legal button:hover { color: #FFFFFF; text-decoration: underline; }
@media (max-width: 1099px) { .a5-footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } .a5-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 899px) {
  .a5-footer-inner { padding: 44px 16px 30px; gap: 32px; }
  .a5-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  .a5-footer-col { font-size: 14.5px; gap: 2px; }
  .a5-footer-col a { display: block; padding-block: 8px; }
  .a5-footer-bottom { flex-direction: column; align-items: flex-start; font-size: 12.5px; }
}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.12s !important; transition-property: opacity, color, background-color, border-color !important; }
}
@media print { .a5-header, .a5-menu, .bk-call-bar, .a5-mobile-bar { display: none !important; } }

/* ---------- tape measure (inch marks, foot labels, orange stud marks every 16 in) ---------- */
.a5-tapebar i, .a5-tapebar-y i { font-style: normal; }
.a5-tapebar { position: relative; height: var(--h, 70px); border-radius: 0 4px 4px 0; overflow: hidden; background: linear-gradient(180deg, #BFA02B 0%, #EDCD45 14%, #F6DD63 50%, #E8C53E 86%, #B39320 100%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); }
.a5-tapebar .hook { position: absolute; top: 0; left: 0; width: 18px; height: 100%; background: linear-gradient(90deg, #7F858B 0%, #D3D7DA 45%, #8A9095 100%); border-right: 1px solid rgba(0, 0, 0, 0.3); z-index: 1; }
.a5-tapebar .ticks { position: absolute; top: 0; left: 18px; right: 0; bottom: 0; background-image: repeating-linear-gradient(90deg, #1B1A18 0, #1B1A18 1.6px, transparent 1.6px, transparent 20px), repeating-linear-gradient(90deg, #1B1A18 0, #1B1A18 1.2px, transparent 1.2px, transparent 10px), repeating-linear-gradient(90deg, rgba(27, 26, 24, 0.85) 0, rgba(27, 26, 24, 0.85) 1px, transparent 1px, transparent 5px); background-size: 100% 30px, 100% 20px, 100% 12px; background-repeat: repeat-x; }
.a5-tapebar .nums { position: absolute; left: 18px; top: 33px; right: 0; display: flex; font-weight: 700; font-size: 11px; line-height: 1; color: #1B1A18; white-space: nowrap; }
.a5-tapebar .nums span { width: 20px; flex-shrink: 0; padding-left: 2px; display: flex; flex-direction: column; gap: 3px; }
.a5-tapebar .nums span.stud { background: linear-gradient(var(--a5-orange), var(--a5-orange)) no-repeat 0 -2px / 19px 15px; }
.a5-tapebar .nums small { font-size: 8.5px; }
.a5-tapebar-y { position: relative; width: 38px; overflow: hidden; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #BFA02B 0%, #EDCD45 14%, #F6DD63 50%, #E8C53E 86%, #B39320 100%); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }
.a5-tapebar-y .hook { display: block; height: 16px; background: linear-gradient(180deg, #7F858B 0%, #D3D7DA 45%, #8A9095 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
.a5-tapebar-y .ticks { position: absolute; top: 16px; left: 0; right: 0; bottom: 0; background-image: repeating-linear-gradient(180deg, #1B1A18 0, #1B1A18 1.6px, transparent 1.6px, transparent 32px), repeating-linear-gradient(180deg, #1B1A18 0, #1B1A18 1.2px, transparent 1.2px, transparent 16px), repeating-linear-gradient(180deg, #1B1A18 0, #1B1A18 1px, transparent 1px, transparent 8px), repeating-linear-gradient(180deg, rgba(27, 26, 24, 0.8) 0, rgba(27, 26, 24, 0.8) 0.8px, transparent 0.8px, transparent 4px); background-size: 28px 100%, 20px 100%, 13px 100%, 8px 100%; background-repeat: repeat-y; }
.a5-tapebar-y .nums { position: absolute; top: 16px; left: 0; right: 0; display: flex; flex-direction: column; font-weight: 700; font-size: 12px; line-height: 1; color: #1B1A18; }
.a5-tapebar-y .nums span { height: 32px; flex-shrink: 0; padding: 4px 5px 0 0; text-align: right; }
.a5-tapebar-y .nums span.stud { background: linear-gradient(var(--a5-orange), var(--a5-orange)) no-repeat right 2px top 2px / 22px 14px; }

/* ---------- effects: the same 8 second loops as the approved mockup ----------
   They only run while on screen (scripts/a5.js toggles .is-on) and never run with reduced motion (no html.a5-motion).
   Group a tape with its steps in a [data-a5-loop] container so they stay in step:
   steps .a5-step-a/b/c/d appear as the tape reaches them, their highlights use .a5-hl-a/b/c/d. */
@keyframes a5HlDraw { 0%, 3% { background-size: 0% 100%; background-position: 0 0; } 13%, 94% { background-size: 100% 100%; background-position: 0 0; } 94.01% { background-size: 100% 100%; background-position: 100% 0; } 100% { background-size: 0% 100%; background-position: 100% 0; } }
@keyframes a5HlA { 0%, 6% { background-size: 0% 100%; background-position: 0 0; } 13%, 94% { background-size: 100% 100%; background-position: 0 0; } 94.01% { background-size: 100% 100%; background-position: 100% 0; } 100% { background-size: 0% 100%; background-position: 100% 0; } }
@keyframes a5HlB { 0%, 15% { background-size: 0% 100%; background-position: 0 0; } 22%, 94% { background-size: 100% 100%; background-position: 0 0; } 94.01% { background-size: 100% 100%; background-position: 100% 0; } 100% { background-size: 0% 100%; background-position: 100% 0; } }
@keyframes a5HlC { 0%, 24.5% { background-size: 0% 100%; background-position: 0 0; } 31.5%, 94% { background-size: 100% 100%; background-position: 0 0; } 94.01% { background-size: 100% 100%; background-position: 100% 0; } 100% { background-size: 0% 100%; background-position: 100% 0; } }
@keyframes a5HlD { 0%, 35% { background-size: 0% 100%; background-position: 0 0; } 42%, 94% { background-size: 100% 100%; background-position: 0 0; } 94.01% { background-size: 100% 100%; background-position: 100% 0; } 100% { background-size: 0% 100%; background-position: 100% 0; } }
@keyframes a5TapeX { 0% { clip-path: inset(0 calc(100% - 18px) 0 0); } 37.5% { clip-path: inset(0 0 0 0); } 90% { clip-path: inset(0 0 0 0); opacity: 1; } 97% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 calc(100% - 18px) 0 0); opacity: 0; } }
@keyframes a5TapeY { 0% { clip-path: inset(0 0 calc(100% - 16px) 0); } 37.5% { clip-path: inset(0 0 0 0); } 90% { clip-path: inset(0 0 0 0); opacity: 1; } 97% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 0 calc(100% - 16px) 0); opacity: 0; } }
@keyframes a5StepA { 0%, 1% { opacity: 0; transform: translateY(10px); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes a5StepB { 0%, 10% { opacity: 0; transform: translateY(10px); } 15%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes a5StepC { 0%, 19.5% { opacity: 0; transform: translateY(10px); } 24.5%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes a5StepD { 0%, 30% { opacity: 0; transform: translateY(10px); } 35%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
html.a5-motion .a5-hl { animation: a5HlDraw 8s ease-in-out infinite paused; }
html.a5-motion .a5-hl.a5-hl-a { animation-name: a5HlA; }
html.a5-motion .a5-hl.a5-hl-b { animation-name: a5HlB; }
html.a5-motion .a5-hl.a5-hl-c { animation-name: a5HlC; }
html.a5-motion .a5-hl.a5-hl-d { animation-name: a5HlD; }
html.a5-motion .a5-tape-x { animation: a5TapeX 8s linear infinite paused; }
html.a5-motion .a5-tape-y { animation: a5TapeY 8s linear infinite paused; }
html.a5-motion .a5-step-a { animation: a5StepA 8s ease-out infinite paused; }
html.a5-motion .a5-step-b { animation: a5StepB 8s ease-out infinite paused; }
html.a5-motion .a5-step-c { animation: a5StepC 8s ease-out infinite paused; }
html.a5-motion .a5-step-d { animation: a5StepD 8s ease-out infinite paused; }
html.a5-motion .a5-hl.is-on, html.a5-motion .a5-tape-x.is-on, html.a5-motion .a5-tape-y.is-on,
html.a5-motion [data-a5-loop].is-on .a5-hl, html.a5-motion [data-a5-loop].is-on .a5-tape-x, html.a5-motion [data-a5-loop].is-on .a5-tape-y,
html.a5-motion [data-a5-loop].is-on .a5-step-a, html.a5-motion [data-a5-loop].is-on .a5-step-b, html.a5-motion [data-a5-loop].is-on .a5-step-c, html.a5-motion [data-a5-loop].is-on .a5-step-d { animation-play-state: running; }

/* the phone call bar from scripts/call-bar.js, in the A5 fonts */
.bk-call-bar a { font-family: var(--a5-sans) !important; }
.bk-call-bar .bk-talk { font-family: var(--a5-cond) !important; font-weight: 800; font-size: 19px !important; letter-spacing: 0.04em; text-transform: uppercase; }