/* =========================================================================
   VIGILINT — Brand foundation + reusable class library (design system)
   Loaded on frontend + Bricks canvas via functions.php.

   HOW TO USE IN BRICKS:
   Select any element → Style tab → "CSS classes" field → type the class name
   (without the dot), e.g.  vig-title  or  vig-band vig-band--navy.
   Edit the look here in one place and it updates everywhere it's used.
   ========================================================================= */

/* ------------------------------------------------------------------ Fonts */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit/Outfit-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- Tokens */
:root {
  --vig-red: #b12028;          /* Pantone 7621 C */
  --vig-red-dark: #8f1a20;
  --vig-navy: #201747;         /* Pantone 275 C */
  --vig-navy-deep: #1a1238;
  --vig-gray-band: #eef0f2;    /* light section band */
  --vig-gray-300: #d3d5d9;
  --vig-white: #ffffff;

  --vig-font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vig-container: 1140px;
  --vig-radius-pill: 999px;
  --vig-section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

/* --------------------------------------------------------------- Base */
body { font-family: var(--vig-font); color: #3e3854; line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: var(--vig-font); color: var(--vig-navy); line-height: 1.15; }

/* =========================================================================
   TYPOGRAPHY CLASSES
   ========================================================================= */

/* Two-line page/section title: bold lead line + light second line + red rule.
   Usage: heading with class "vig-title". Put the lighter part in a <span>. */
.vig-title {
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  color: var(--vig-navy);
  display: inline-block;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--vig-red);
  margin-bottom: 1.5rem;
}
.vig-title span { font-weight: 300; }
.vig-band--navy .vig-title { color: var(--vig-white); }

/* Section heading (h2-scale) */
.vig-h2 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--vig-navy);
}
.vig-band--navy .vig-h2 { color: var(--vig-white); }

/* Sub-heading inside a section (e.g. "RESCUE SPECIALIST TEAMS") */
.vig-sub {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .01em;
  margin: 0 0 1rem;
  color: inherit;
}

/* Eyebrow / ribbon label — centered, uppercase, letter-spaced */
.vig-ribbon {
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--vig-navy);
  margin-bottom: 2.5rem;
}
.vig-band--navy .vig-ribbon { color: var(--vig-white); }

/* Larger intro paragraph */
.vig-lead { font-size: 1.125rem; line-height: 1.7; }

/* Text color helpers */
.vig-c-red  { color: var(--vig-red)  !important; }
.vig-c-navy { color: var(--vig-navy) !important; }
.vig-c-white{ color: var(--vig-white)!important; }

/* =========================================================================
   LAYOUT / SECTION BANDS
   ========================================================================= */

/* Full-width band (place inside a full-width container; content centered by .vig-inner). */
.vig-band { padding: var(--vig-section-y) 1.5rem; }
.vig-band--gray { background: var(--vig-gray-band); color: var(--vig-navy); }
.vig-band--navy { background: var(--vig-navy); color: var(--vig-white); }
.vig-band--navy p, .vig-band--navy li { color: var(--vig-white); }

/* Centered max-width content wrapper */
.vig-inner { max-width: var(--vig-container); margin-inline: auto; width: 100%; }

/* Two-column: content + image (image sits in the narrower right column) */
.vig-2col {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2.5rem 3rem;
  align-items: start;
}
.vig-2col--reverse > :first-child { order: 2; }

/* Three equal columns (used for team / capability lists) */
.vig-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 1.75rem; }

@media (max-width: 820px) {
  .vig-2col, .vig-3col { grid-template-columns: 1fr; }
  .vig-2col--reverse > :first-child { order: 0; }
}

/* Responsive image that fills its column */
.vig-img { width: 100%; height: auto; border-radius: 4px; display: block; }

/* =========================================================================
   LISTS — red bullet
   ========================================================================= */
.vig-list { list-style: none; padding: 0; margin: 0; }
.vig-list li {
  position: relative;
  padding-left: 1.1rem;
  margin: .5rem 0;
  line-height: 1.5;
}
.vig-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vig-red);
}
/* Small red column label above a list (THE TEAM / CAPABILITIES) */
.vig-list-label {
  color: var(--vig-red);
  text-transform: uppercase;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .05em;
  margin: 0 0 .6rem;
}

/* =========================================================================
   BUTTONS — red pill
   ========================================================================= */
.vig-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vig-red); color: var(--vig-white);
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .85em 2.2em; border: none; border-radius: var(--vig-radius-pill);
  text-decoration: none; cursor: pointer; transition: background .18s ease;
}
.vig-btn:hover { background: var(--vig-red-dark); color: var(--vig-white); }
.vig-btn--ghost {
  background: transparent; color: var(--vig-white);
  box-shadow: inset 0 0 0 2px var(--vig-white);
}
.vig-btn--ghost:hover { background: var(--vig-white); color: var(--vig-navy); }

/* Four-column grid (e.g. program benefits) */
.vig-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; margin-top: 2rem; }

/* Numbered process steps (image on the right) */
.vig-steps { display: grid; gap: 1rem; margin-top: 2rem; }
.vig-step {
  display: grid; grid-template-columns: 2.5rem 1fr 165px; gap: 1.5rem; align-items: center;
  background: var(--vig-white); border-radius: 6px; padding: 1.1rem 1.4rem;
  box-shadow: 0 1px 4px rgba(32,23,71,.08); color: var(--vig-navy);
}
.vig-step img { width: 165px; height: 95px; object-fit: cover; border-radius: 4px; }
.vig-num { color: var(--vig-red); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.vig-step-t { text-transform: uppercase; font-weight: 700; color: var(--vig-navy); margin: 0 0 .2rem; font-size: 1rem; }

/* Inline red-bullet tag row (e.g. vaccination / medication lists) */
.vig-tags { display: flex; flex-wrap: wrap; gap: .45rem 1.25rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.vig-tags li { position: relative; padding-left: 1rem; }
.vig-tags li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--vig-red); }

@media (max-width: 820px) {
  .vig-4col { grid-template-columns: 1fr 1fr; }
  .vig-step { grid-template-columns: 2.5rem 1fr; }
  .vig-step img { display: none; }
}

/* Spacing / alignment helpers */
.vig-mt { margin-top: 1.75rem; }
.vig-center { text-align: center; }
.vig-narrow { max-width: 900px; margin-inline: auto; }

/* =========================================================================
   BASE POLISH (Jul 11) — selection, focus, body link treatment
   ========================================================================= */
::selection { background: var(--vig-red); color: #fff; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(177, 32, 40, 0.45);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Content links: red with soft underline that solidifies on hover */
.brxe-text a:not([class]) {
  color: var(--vig-red);
  text-decoration: underline;
  text-decoration-color: rgba(177, 32, 40, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.brxe-text a:not([class]):hover { text-decoration-color: var(--vig-red); }
.section-blue .brxe-text a:not([class]) { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.4); }
.section-blue .brxe-text a:not([class]):hover { color: var(--vig-red); text-decoration-color: var(--vig-red); }
/* Footer: links stay white with full-red rollover, no underline (VIG-109) */
#brx-footer .footer-links a:not([class]) { color: var(--vig-white); text-decoration: none; }
#brx-footer .footer-links a:not([class]):hover { color: var(--vig-red); }
#brx-footer .footer-legal a:not([class]) { color: var(--vig-white); text-decoration: none; }
#brx-footer .footer-legal a:not([class]):hover { color: var(--vig-red); }
/* Chevron tab headers: keep centered on small screens (VIG-109) */
@media (max-width: 820px) {
  .brxe-container:has(> .tab-header-gray),
  .brxe-container:has(> .tab-header-blue) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==========================================================================
   Global form field styling (VIG-109) — consistent across every Bricks form
   ========================================================================== */
.brxe-form .form-group {
  margin-bottom: 22px;
  padding-bottom: 0;
}
.brxe-form .form-group:last-of-type { margin-bottom: 0; }

.brxe-form label {
  display: block;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--vig-navy);
  margin-bottom: 8px;
}

.brxe-form input[type="text"],
.brxe-form input[type="email"],
.brxe-form input[type="tel"],
.brxe-form input[type="url"],
.brxe-form input[type="number"],
.brxe-form input[type="password"],
.brxe-form input[type="search"],
.brxe-form input[type="date"],
.brxe-form textarea,
.brxe-form select {
  width: 100%;
  background: #fff;
  border: 1px solid #c7c8d0;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--vig-navy);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.brxe-form textarea { min-height: 150px; resize: vertical; }

.brxe-form input[type="text"]:focus,
.brxe-form input[type="email"]:focus,
.brxe-form input[type="tel"]:focus,
.brxe-form input[type="url"]:focus,
.brxe-form input[type="number"]:focus,
.brxe-form input[type="password"]:focus,
.brxe-form input[type="search"]:focus,
.brxe-form input[type="date"]:focus,
.brxe-form textarea:focus,
.brxe-form select:focus {
  border-color: var(--vig-red) !important;
  box-shadow: 0 0 0 3px rgba(177, 32, 40, 0.12) !important;
  outline: none;
}
.brxe-form input::placeholder,
.brxe-form textarea::placeholder { color: #9a9aa4; }

/* checkbox / radio groups */
.brxe-form ul.options-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.brxe-form ul.options-wrapper label,
.brxe-form .checkbox-wrap label,
.brxe-form [data-type="checkbox"] label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  font-weight: 400;
  font-size: 0.95rem;
  margin-bottom: 0;
  color: var(--vig-navy);
}
.brxe-form input[type="checkbox"],
.brxe-form input[type="radio"] { width: auto; accent-color: var(--vig-red); }

/* submit button */
.brxe-form button[type="submit"] {
  background: var(--vig-red);
  color: #fff;
  border: none;
  border-radius: 40px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 13px 42px;
  width: auto;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.brxe-form button[type="submit"]:hover {
  background: #8f1a20;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .brxe-form .form-group { width: 100% !important; }
}

/* ==========================================================================
   Gravity Forms — same brand field styling as the Bricks form (VIG-109).
   Inert until Gravity Forms is installed; then every GF field is consistent.
   ========================================================================== */
.gform_wrapper,
.gform_wrapper.gform-theme,
.gform-theme--foundation,
.gform-theme--framework {
  --gf-color-primary: #b12028 !important;
  --gf-color-primary-rgb: 177, 32, 40 !important;
  --gf-color-primary-contrast: #ffffff !important;
  --gf-color-primary-darker: #8f1a20 !important;
  --gf-color-primary-darker-rgb: 143, 26, 32 !important;
  --gf-ctrl-radius: 6px;
  --gf-ctrl-border-color: #c7c8d0;
  --gf-ctrl-border-color-focus: #b12028;
}
.gform_wrapper .gfield { margin-bottom: 16px; }
.gform_wrapper .gform_fields { row-gap: 0 !important; }
.gform_wrapper .gform_footer { margin-top: 6px; padding-top: 0; }
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 10px 30px;
}
.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice { margin: 0; width: auto !important; flex: 0 0 auto; }
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
  display: block;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--vig-navy);
  margin-bottom: 8px;
}
/* Required fields: red asterisk prefix, per comp (hide GF's "(Required)") */
.gform_wrapper .gfield_required { display: none !important; }
.gform_wrapper .gfield_contains_required > .gfield_label::before,
.gform_wrapper .gfield_contains_required > legend.gfield_label::before {
  content: "*";
  color: var(--vig-red);
  margin-right: 2px;
}
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield input[type="password"],
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select {
  width: 100%;
  background: #fff;
  border: 1px solid #c7c8d0;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--vig-navy);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gform_wrapper .gfield textarea { min-height: 120px; resize: vertical; }
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield textarea:focus,
.gform_wrapper .gfield select:focus {
  border-color: var(--vig-red) !important;
  box-shadow: 0 0 0 3px rgba(177, 32, 40, 0.12) !important;
  outline: none;
}
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] { accent-color: var(--vig-red); }
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper button.gform_button,
.gform_wrapper input.gform_button {
  background: var(--vig-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 40px !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 13px 42px;
  width: auto;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper input.gform_button:hover {
  background: #8f1a20 !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   Careers job board (VIG-109) — matches the approved comp
   ========================================================================== */
.vig-jobs {
  background: #fff;
  border-radius: 16px;
  padding: clamp(20px, 3vw, 34px);
  box-shadow: 0 6px 26px rgba(32, 23, 71, 0.08);
}
.vig-jobs__controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.vig-jobs__search {
  width: 100%;
  border: 1px solid #c7c8d0;
  border-radius: 8px;
  padding: 11px 14px 11px 38px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--vig-navy);
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a6a75' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")
    no-repeat 13px center;
}
.vig-jobs__search:focus { outline: none; border-color: var(--vig-red); box-shadow: 0 0 0 3px rgba(177, 32, 40, 0.12); }
.vig-jobs__filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.vig-jobs__filter {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  border: 1px solid #c7c8d0;
  border-radius: 8px;
  padding: 10px 34px 10px 13px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--vig-navy);
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23201747' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 13px center;
  cursor: pointer;
}
.vig-jobs__filter:focus { outline: none; border-color: var(--vig-red); }
.vig-jobs__list { list-style: none; margin: 0; padding: 0; }
.vig-jobs__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 16px;
  align-items: center;
  padding: 18px 4px;
  border-top: 1px solid rgba(32, 23, 71, 0.12);
  margin: 0;
}
.vig-jobs__row:last-child { border-bottom: 1px solid rgba(32, 23, 71, 0.12); }
.vig-jobs__title {
  display: block;
  color: var(--vig-red);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
}
.vig-jobs__title:hover { text-decoration: underline; }
.vig-jobs__posted { display: block; color: #6a6a75; font-size: 0.85rem; margin-top: 4px; }
.vig-jobs__meta { color: #55555f; font-size: 0.88rem; line-height: 1.35; }
.vig-jobs__empty { display: none; color: #6a6a75; padding: 22px 4px 4px; margin: 0; }
@media (max-width: 700px) {
  .vig-jobs__row { grid-template-columns: 1fr; gap: 4px; }
  .vig-jobs__meta { font-size: 0.85rem; }
}

/* ==========================================================================
   Living brand guide (VIG-109) — reads the site's real tokens, so any
   global change to colors / type / font is reflected here automatically.
   ========================================================================== */
.bg-h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--vig-navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 22px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--vig-red);
}
.bg-grid { display: grid; gap: 20px; }
.bg-grid-2 { grid-template-columns: 1fr 1fr; }
.bg-grid-swatch { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.bg-logo-card {
  background: #fff;
  border: 1px solid rgba(32, 23, 71, 0.1);
  border-radius: 12px;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.bg-logo-card img { max-width: 72%; height: auto; display: block; }
.bg-logo-card--navy { background: var(--vig-navy); border-color: var(--vig-navy); }
.bg-cap { font-size: var(--text-sm); color: #6a6a75; text-transform: uppercase; letter-spacing: 0.06em; }
.bg-logo-card--navy .bg-cap { color: rgba(255, 255, 255, 0.7); }
.bg-swatch { border: 1px solid rgba(32, 23, 71, 0.1); border-radius: 10px; overflow: hidden; background: #fff; }
.bg-swatch-chip { display: block; height: 100px; }
.bg-swatch-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.bg-swatch-name { font-weight: 600; color: var(--vig-navy); font-size: 0.95rem; }
.bg-hex { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8rem; color: #6a6a75; text-transform: uppercase; }
.bg-pms { font-size: 0.72rem; color: #9a9aa4; }
.bg-weights { display: flex; flex-wrap: wrap; gap: 28px; margin: 4px 0 8px; font-size: var(--text-xl); color: var(--vig-navy); align-items: baseline; }
.bg-type-row { display: flex; align-items: baseline; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(32, 23, 71, 0.08); }
.bg-type-row .samp { color: var(--vig-navy); font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: -0.01em; }
.bg-type-meta { font-family: ui-monospace, monospace; font-size: 0.8rem; color: #9a9aa4; margin-left: auto; white-space: nowrap; }
.bg-note { font-size: var(--text-sm); color: #6a6a75; margin-top: 8px; }
@media (max-width: 640px) {
  .bg-grid-2 { grid-template-columns: 1fr; }
  .bg-type-row .samp { font-size: clamp(1.4rem, 8vw, 2.4rem) !important; }
}

/* ==========================================================================
   ROUND 2 (VIG-109 notes 8/10)
   ========================================================================== */
/* Footer LinkedIn icon: white by default, red on rollover */
#brx-footer .footer-links a[aria-label="LinkedIn"] { color: var(--vig-white); display: inline-block; }
#brx-footer .footer-links a[aria-label="LinkedIn"] svg circle { stroke: currentColor; }
#brx-footer .footer-links a[aria-label="LinkedIn"] svg path { fill: currentColor; }
#brx-footer .footer-links a[aria-label="LinkedIn"]:hover { color: var(--vig-red); }

/* VIGILINT wordmark in body copy: bold two-tone on light, all-white on navy */
.vigword { font-weight: 700; color: var(--vig-navy); }
.vigword > span { color: var(--vig-red); }
.section-blue .vigword, .section-blue .vigword > span,
.glow-band .vigword,   .glow-band .vigword > span,
.font-white .vigword,  .font-white .vigword > span,
#brx-footer .vigword,  #brx-footer .vigword > span { color: #fff; }

/* GF submit: match the site's button treatment (GF3 foundation theme overrides these) */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper button.gform_button,
.gform_wrapper input.gform_button {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  font-size: 0.9375rem !important;
  font-family: inherit !important;
}

/* ==========================================================================
   MOBILE / TABLET PASS (VIG-109, 2026-08-19)
   ========================================================================== */

/* Gravity Forms — "Area of Interest" choices run ragged when they wrap in a
   row at phone widths (checkbox column never lines up). Stack them instead. */
@media (max-width: 767px) {
  .gform_wrapper .gfield_checkbox,
  .gform_wrapper .gfield_radio { flex-direction: column !important; gap: 12px; }
  .gform_wrapper .gfield_checkbox .gchoice,
  .gform_wrapper .gfield_radio .gchoice { width: 100% !important; }
}

/* Brand guide — the type specimens are white-space:nowrap for the desktop
   ruler, which pushed the page to ~580px of horizontal scroll on a phone.
   Let them wrap and drop the meta label onto its own line. */
@media (max-width: 767px) {
  .bg-type-row { flex-wrap: wrap; gap: 4px 16px; }
  .bg-type-row .samp { white-space: normal; font-size: clamp(1.15rem, 6.4vw, 2.4rem) !important; }
  .bg-type-meta { margin-left: 0; white-space: normal; }
  .bg-weights { gap: 14px 22px; }
  .bg-logo-card { padding: 30px 22px; }
}

/* Off-canvas menu — the Solutions submenu chevron ships as a 76x16 button,
   which is too small to hit reliably with a thumb. Give it a real target. */
@media (max-width: 767px) {
  #brx-header .brx-submenu-toggle > button {
    min-height: 44px;
    min-width: 52px;
    align-items: center;
    justify-content: center;
  }
}