/* SWORD base: 1) bricks-reset.css 2) fonts.css 3) child-theme.css, in that order. Generated from the kit; do not hand-edit. */
/* SWORD Roofing: undo the Bricks defaults the static site never had. Load FIRST in the child theme.
   Bricks 2.x puts its own CSS in a cascade layer, so these plain rules win over it. :where() keeps their
   specificity at zero, so every rule from the site itself (Tailwind, child-theme.css, the global classes)
   still wins over them. Each value is "revert": the element goes back to the browser default, which is
   what the static page had (a <section> is a block, a <span> stays inline). */

/* Bricks ships html { font-size: 62.5% }, which shrinks every rem-based size to 62.5%. */
html { font-size: 100%; }

:where(.brxe-block, .brxe-div, .brxe-container, .brxe-section, .brxe-text-basic, .brxe-heading, .brxe-image) {
  display: revert;
  flex-direction: revert;
  flex-wrap: revert;
  align-items: revert;
  align-self: revert;
  justify-content: revert;
  width: revert;
  max-width: revert;
}

/* Bricks wraps page content in #brx-content; the static page's equivalent is a plain <main>. */
:where(#brx-content) { display: block; position: revert; }

/* Bricks sets body to 15px; the static site leaves it at the browser default (16px). */
:where(body) { font-size: revert; }

/* Bricks' element defaults that Tailwind's preflight does not already undo. Back to browser defaults,
   as on the static site. Zero specificity, so every site rule still wins. */
:where(h1, h2, h3, h4, h5, h6) { text-rendering: revert; }
:where(h4, h5, h6) { line-height: revert; }
:where(figcaption) { color: revert; font-size: revert; margin: revert; text-align: revert; }
:where(blockquote) { font-family: revert; font-size: revert; padding: revert; position: revert; }
:where(blockquote cite) { display: revert; font-size: revert; font-style: revert; margin-top: revert; opacity: revert; text-transform: revert; }
:where(pre) { background-color: revert; color: revert; padding: revert; white-space: revert; }
:where(table) { width: revert; }
:where(label) { color: revert; display: revert; font-weight: revert; margin-bottom: revert; }
:where(button, img) { outline: revert; }
:where(select) { -webkit-appearance: revert; appearance: revert; background-color: revert; background-image: revert; background-position: revert; background-repeat: revert; background-size: revert; border-radius: revert; }
:where(textarea) { height: revert; min-height: revert; padding: revert; }
:where(svg:not([width])) { min-width: revert; }
:where(svg:not([height])) { min-height: revert; }
:where(iframe, audio) { max-width: revert; }
:where(button, input, optgroup, select, textarea) { text-align: revert; }

/* The header logo is served as a 185x128 WebP (8.7 KB) instead of the 2131x1475 PNG (35 KB). Pin the
   original proportions so the box is identical to the static site to the sub-pixel. */
:where(.brand img) { aspect-ratio: 2131 / 1475; }

/* Self-hosted SWORD fonts: Latin subset of the exact Google Fonts request the static site makes.
   Upload these files to the child theme at fonts/ ; URLs are relative to this stylesheet. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/figtree-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/fraunces-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* SWORD Roofing: rules that are not owned by one global class. Load once from the child theme. */
:root { --navy: #0053a1; --navy-deep: #063a70; --navy-ink: #071f3d;
    --gold: #ffca08; --charcoal: #2d3036; --paper: #f7f4ee;
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --shadow-base: 0 1px 2px rgba(7, 31, 61, .06), 0 6px 16px -6px rgba(7, 31, 61, .10);
    --shadow-raised: 0 2px 4px rgba(7, 31, 61, .05), 0 14px 30px -12px rgba(7, 31, 61, .18), 0 34px 60px -30px rgba(0, 83, 161, .22);
    --shadow-float: 0 4px 8px rgba(7, 31, 61, .06), 0 24px 48px -16px rgba(7, 31, 61, .28), 0 60px 90px -40px rgba(0, 83, 161, .35); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: Figtree, Helvetica, Arial, sans-serif; color: var(--charcoal); background: var(--paper); line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-optical-sizing: auto; }
h1, h2, h3 { color: var(--navy-ink); }
h1, h2 { letter-spacing: -0.03em; line-height: 1.04; font-weight: 560; }
h3 { letter-spacing: -0.015em; line-height: 1.2; font-weight: 600; }
section[id] { scroll-margin-top: 110px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold); }
.inspect-card { background: rgba(255,255,255,.97); color: var(--charcoal); border-radius: 16px; padding: 28px; box-shadow: var(--shadow-float); }
.tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; margin-top: 3px; }
@keyframes fill { to { transform: scaleX(1); } }
.step-num { font: 440 italic 56px/1 Fraunces, serif; color: var(--navy); letter-spacing: -.04em; }
details.qa { border-top: 1px solid rgba(7,31,61,.14); }
details.qa:last-of-type { border-bottom: 1px solid rgba(7,31,61,.14); }
details.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font: 560 clamp(20px, 2.2vw, 26px)/1.2 Fraunces, serif; letter-spacing: -.02em; color: var(--navy-ink); }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary .pm { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); transition: transform .4s var(--spring); }
details.qa summary:hover .pm { transform: scale(1.1); }
details.qa summary:active .pm { transform: scale(.92); }
details.qa[open] summary .pm { transform: rotate(45deg); background: var(--gold); }
details.qa .a { padding: 0 56px 26px 0; max-width: 64ch; }
.js .area-all:not(.open) { display: none; }
.placeholder { border: 2px dashed rgba(0,83,161,.4); border-radius: 14px; background: repeating-linear-gradient(135deg, rgba(0,83,161,.04) 0 12px, rgba(0,83,161,0) 12px 24px); }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s linear, transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
.no { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; }
.no { background: rgba(7,31,61,.1); }
dialog.lightbox { padding: 0; border: 0; background: transparent; max-width: min(94vw, 1200px); max-height: 92vh; }
dialog.lightbox::backdrop { background: rgba(7,31,61,.86); }
dialog.lightbox img { display: block; max-width: 100%; max-height: 84vh; border-radius: 12px; box-shadow: var(--shadow-float); }
dialog.lightbox { overflow: visible; }
dialog.lightbox img { cursor: pointer; margin-inline: auto; }
dialog.lightbox img.swap { animation: lbswap .4s var(--ease-out) both; }
@keyframes lbswap { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.lightbox img.swap { animation: none; } }
@media (max-width: 1023px) { body:has(.sticky-cta) { padding-bottom: 70px; } }
@media (max-width: 639px) { .js .snaprow.reveal { transform: none; } }
mark.nor { background: var(--gold); color: var(--navy-ink); font-weight: 700; padding: 2px 6px; border-radius: 4px; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@keyframes rot { 0% { opacity: 0; transform: translateY(70%); } 5%, 30% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateY(-70%); } }
@media (max-width: 479px) { form button[type=submit].btn { font-size: 17px !important; padding-inline: 16px; } }

/* Bricks frontend-light-layer ships WordPress gallery/post-meta styles whose class names collide with the
   site's own .gallery and .post-meta (found by intersecting every class selector in that file with every
   class on the 140 static pages). Zero-specificity reverts; the site's own rules still win. */
:where(.gallery){margin-inline:0}
:where(.post-meta){align-items:revert}

/* Bryan (2026-10-16): Gravity Forms submit button full width at the bottom of every form. */
/* GF Orbital sets inline-size: var(--gf-local-width) (auto) with a later, more specific rule; !important beats it. */
body .gform_wrapper .gform_footer .gform_button.button{inline-size:100% !important}

/* Bryan (2026-10-16, screenshot): a Gravity Forms dropdown showed a tiled zigzag (Bricks' 4px gradient arrow repeating).
   Pin GF selects to Gravity Forms' own single arrow, never repeated; matches what Chrome and WebKit already render. */
body .gform_wrapper select{background-image:var(--gf-ctrl-select-icon) !important;background-repeat:no-repeat !important;background-position:var(--gf-ctrl-select-icon-position) !important;background-size:var(--gf-ctrl-select-icon-size) !important}