/* ═══════════════════════════════════════════════════════════════════════
   Task 365 — form restyle pilot. SCOPED TO .ao-form (Gravity Form 5 only).

   Every selector below is prefixed .ao-form, which mu-plugins/ao-form-restyle.php
   wraps around form 5 and nothing else. Forms 4, 6, 11 and 12 are untouched.

   Colours are existing brand tokens, and every pair was measured against
   --navy-deep #001c3d before being used:

     label      --dark-body  #F4F6F8   15.72:1   (was 1.07:1 — the audit's headline failure)
     sublabel   --ondark-muted #B9BEC6  9.12:1
     error text --red-ondark #EB7066    5.71:1   (plain --red is only 3.50:1 — text would FAIL)
     field      white surface          17.02:1   at the boundary (1.4.11 wants 3:1)
     field text --ink #17181A          17.77:1   on white
     submit     white on --red          4.87:1

   --red is deliberately NOT used for any text on this ground. It is a
   3.50:1 colour: fine for a border or a filled button, not for a message.
   ═══════════════════════════════════════════════════════════════════════ */

.ao-form {
  --aof-radius: 4px;
  --aof-field-bg: #fff;
  --aof-gap: 28px;

}

/* ── Gravity Forms' OWN theming API ──────────────────────────────────────
   These MUST be declared on the GF wrapper, not on .ao-form. Gravity Forms
   re-declares every --gf-* property on `.gform_wrapper.gform-theme`, which
   sits INSIDE our wrapper — and custom properties resolve to the nearest
   ancestor that declares them, so an override on .ao-form never reaches the
   controls. Measured: .ao-form said 52px and the control still computed 38px
   because .gform_wrapper re-declared it one level down.

   Declaring them here, at higher specificity than GF's own rule on the same
   element, is what actually lands. The orbital theme's control sizing
   (--gf-ctrl-line-height: 38px with --gf-ctrl-padding-y: 0) is what pinned the
   field height. */
.ao-form .gform_wrapper,
.ao-form .gform-theme {
  --gf-ctrl-size: 52px;
  --gf-ctrl-size-md: 52px;
  --gf-ctrl-line-height: 1.4;
  --gf-ctrl-padding-y: 15px;
  --gf-ctrl-padding-x: 16px;
  --gf-ctrl-font-size: 16px;          /* 16px = iOS does not zoom on focus */
  --gf-ctrl-radius: 4px;
  --gf-ctrl-bg-color: #fff;
  --gf-ctrl-color: #17181A;
  --gf-ctrl-border-color: rgba(255, 255, 255, 0.55);
  --gf-ctrl-border-color-hover: rgba(255, 255, 255, 0.85);
  --gf-ctrl-border-color-focus: #EB7066;
  --gf-ctrl-border-color-error: #EB7066;
  --gf-ctrl-accent-color: #DA291C;
  --gf-ctrl-choice-size: 24px;        /* 2.5.8 — the audit measured 20px */
  --gf-ctrl-choice-size-md: 24px;
  --gf-ctrl-choice-check-color: #DA291C;
  --gf-label-choice-field-space-primary: 14px;
  --gf-label-space-primary: 10px;
  --gf-label-req-gap: 6px;
}


/* ── layout ─────────────────────────────────────────────────────────────
   GF's orbital theme drives spacing off its own custom properties; setting
   them is cleaner than fighting each margin rule individually. */
.ao-form .gform_fields {
  display: grid;
  grid-row-gap: var(--aof-gap);
  row-gap: var(--aof-gap);
}
.ao-form .gfield { margin: 0; }
.ao-form fieldset.gfield { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ── labels ─────────────────────────────────────────────────────────────
   THE HEADLINE FIX. GF's orbital stylesheet sets label colour on
   `label.gfield_label`, which beats the theme's colour on the `.gfield`
   wrapper — so the label has to be targeted directly. Set in the site's
   own eyebrow idiom: condensed, uppercase, tracked. */
.ao-form .gfield_label,
.ao-form legend.gfield_label,
.ao-form .gform-field-label {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--ls-label, 0.10em);
  text-transform: uppercase;
  color: var(--dark-body, #F4F6F8);
  margin: 0 0 10px;
  line-height: 1.25;
}

/* Sub-labels (First / Last / ZIP) sit UNDER their input and are quieter —
   sentence case, not uppercase, so they read as help text not as a heading. */
.ao-form .gform-field-label--type-sub {
  font-family: "Barlow", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ondark-muted, #B9BEC6);
  margin: 7px 0 0;
}

.ao-form .gfield_required {
  color: var(--red-ondark, #EB7066);
  margin-left: 4px;
  font-weight: 700;
}

/* ── fields ─────────────────────────────────────────────────────────────
   A white surface on navy: 17.02:1 at the edge, which settles 1.4.11
   (the audit measured the old grey border at 2.97:1). 16px font is what
   stops iOS zooming the page when the field takes focus. */
.ao-form input[type="text"],
.ao-form input[type="email"],
.ao-form input[type="tel"],
.ao-form input[type="url"],
.ao-form input[type="number"],
.ao-form select,
.ao-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--aof-field-bg);
  color: var(--ink, #17181A);
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--aof-radius);
  transition: border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ao-form textarea { min-height: 160px; resize: vertical; }

.ao-form ::placeholder { color: #6B7280; opacity: 1; }

/* ── focus ──────────────────────────────────────────────────────────────
   The ring lands on the navy ground, where --red-ondark is 5.71:1. A plain
   --red ring would only be 3.50:1 — passable for a control boundary but weak,
   and invisible where it crosses the white field. The inner white line keeps
   it legible against the field itself. */
.ao-form input:focus-visible,
.ao-form select:focus-visible,
.ao-form textarea:focus-visible,
.ao-form button:focus-visible,
.ao-form a:focus-visible {
  outline: 3px solid var(--red-ondark, #EB7066);
  outline-offset: 3px;
  border-color: var(--red-ondark, #EB7066);
  box-shadow: 0 0 0 1px #fff inset;
}
/* Pointer users get the border cue without the ring. */
.ao-form input:focus,
.ao-form select:focus,
.ao-form textarea:focus { border-color: var(--red-ondark, #EB7066); }

/* ── checkbox / radio ───────────────────────────────────────────────────
   2.5.8 wants a 24x24 target; the audit measured 20x20. The control itself is
   24px and the whole row is a 44px-tall label, so the real hit area is larger
   than the minimum in both directions. */
.ao-form .gfield_checkbox,
.ao-form .gfield_radio { display: grid; row-gap: 12px; margin: 0; padding: 0; list-style: none; }

.ao-form .gchoice { display: flex; align-items: center; gap: var(--gf-label-choice-field-space-primary, 14px); margin: 0; }

.ao-form input[type="checkbox"],
.ao-form input[type="radio"] {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  background: var(--aof-field-bg);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--aof-radius);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color .16s ease, border-color .16s ease;
}
.ao-form input[type="radio"] { border-radius: 50%; }

.ao-form input[type="checkbox"]::after {
  content: "";
  width: 12px; height: 7px;
  border: solid #fff;
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg) translate(1px, -2px);
  opacity: 0;
  transition: opacity .12s ease;
}
.ao-form input[type="radio"]::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; opacity: 0; transition: opacity .12s ease;
}
.ao-form input[type="checkbox"]:checked,
.ao-form input[type="radio"]:checked {
  background: var(--red, #DA291C);
  border-color: var(--red, #DA291C);
}
.ao-form input[type="checkbox"]:checked::after,
.ao-form input[type="radio"]:checked::after { opacity: 1; }

/* The choice label is the rest of the target, and is body copy — not the
   uppercase treatment the field labels get. */
.ao-form .gform-field-label--type-inline {
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dark-body, #F4F6F8);
  margin: 0;
  line-height: 1.5;
  min-height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* ── submit ─────────────────────────────────────────────────────────────
   White on --red is 4.87:1, already passing; kept as the brand button with
   the site's condensed uppercase treatment. */
.ao-form .gform_footer { margin: 34px 0 0; padding: 0; }
.ao-form .gform_button,
.ao-form input[type="submit"] {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red, #DA291C);
  border: 0;
  border-radius: 2px;
  padding: 17px 40px;
  min-height: 52px;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.ao-form .gform_button:hover { background: var(--red-deep); } /* T614: token for the raw hex */
.ao-form .gform_button:active { transform: translateY(1px); }

/* ── error states ───────────────────────────────────────────────────────
   Never colour-only: the field gains a 2px border AND a tinted surface, and
   the message is text. --red-ondark is the only red on this ground that
   passes as TEXT (5.71:1). */
.ao-form .gform_validation_errors {
  background: rgba(235, 112, 102, 0.10);
  border: 1px solid var(--red-ondark, #EB7066);
  border-left-width: 4px;
  border-radius: var(--aof-radius);
  padding: 16px 20px;
  margin: 0 0 28px;
}
.ao-form .gform_validation_errors > h2,
.ao-form .gform_validation_errors .gform_submission_error {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red-ondark, #EB7066);
  margin: 0 0 6px;
}
.ao-form .gform_validation_errors ol,
.ao-form .gform_validation_errors ul { margin: 8px 0 0 18px; }
.ao-form .gform_validation_errors a { color: var(--red-ondark, #EB7066); }

.ao-form .gfield_error .gfield_label,
.ao-form .gfield_error legend.gfield_label { color: var(--dark-body, #F4F6F8); }

.ao-form .gfield_error input[type="text"],
.ao-form .gfield_error input[type="email"],
.ao-form .gfield_error input[type="tel"],
.ao-form .gfield_error textarea,
.ao-form input[aria-invalid="true"] {
  border: 2px solid var(--red-ondark, #EB7066);
  background: #FFF6F5;
}

.ao-form .validation_message,
.ao-form .gfield_validation_message {
  font-family: "Barlow", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--red-ondark, #EB7066);
  background: none;
  border: 0;
  padding: 0;
  margin: 8px 0 0;
}

/* ── misc ───────────────────────────────────────────────────────────────  */
.ao-form .gform_description,
.ao-form .gfield_description {
  font-family: "Barlow", sans-serif;
  font-size: 14.5px;
  color: var(--ondark-muted, #B9BEC6);
  margin-top: 8px;
}
.ao-form .gform_confirmation_message {
  font-family: "Barlow", sans-serif;
  font-size: 18px;
  color: var(--dark-body, #F4F6F8);
}
/* GF renders a 0x0 ajax iframe; make sure nothing here gives it a box. */
.ao-form iframe[name^="gform_ajax_frame"] { display: none; }

@media (max-width: 599px) {
  .ao-form { --aof-gap: 22px; }
  .ao-form .gform_button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ao-form input,
  .ao-form select,
  .ao-form textarea,
  .ao-form .gform_button { transition: none; }
  .ao-form .gform_button:active { transform: none; }
}

/* ═══ Task 365 — pilot review fixes ═════════════════════════════════════
   All three restated at .gform_wrapper specificity, because that is the
   element Gravity Forms styles and re-declares its variables on. */

/* ── checkbox / radio ───────────────────────────────────────────────────
   Three separate causes behind the "extra blue outline":
     1. GF draws a 2px near-black border (--ink) of its own,
     2. plus a box-shadow rgba(18,25,97,0.08) — that is the blue-navy glow,
     3. and .gchoice is a GF grid with `gap: 16px 0`, so the column gap is
        ZERO and the label sits flush against the box.
   One clean border, no shadow, and the ring stays :focus-visible only. */
.ao-form .gform_wrapper input[type="checkbox"],
.ao-form .gform_wrapper input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: #fff;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;      /* centres the tick in the box */
  cursor: pointer;
}
.ao-form .gform_wrapper input[type="radio"] { border-radius: 50%; }

.ao-form .gform_wrapper input[type="checkbox"]::after {
  content: "";
  width: 11px;
  height: 6px;
  border: solid #fff;
  border-width: 0 0 2.5px 2.5px;
  /* rotate about its own centre; the -1px lifts the tick to its optical centre */
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
}
.ao-form .gform_wrapper input[type="radio"]::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0;
}
.ao-form .gform_wrapper input[type="checkbox"]:checked,
.ao-form .gform_wrapper input[type="radio"]:checked {
  background: var(--red, #DA291C);
  border-color: var(--red, #DA291C);
  box-shadow: none;
}
.ao-form .gform_wrapper input[type="checkbox"]:checked::after,
.ao-form .gform_wrapper input[type="radio"]:checked::after { opacity: 1; }

/* The row itself: override GF's grid so the box and its label sit on one
   line, vertically centred, with a real 10px gap. */
.ao-form .gform_wrapper .gchoice {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
}
.ao-form .gform_wrapper .gchoice > label,
.ao-form .gform_wrapper .gform-field-label--type-inline {
  margin: 0;
  display: block;          /* was flex+min-height, which fought the centring */
  min-height: 0;
  line-height: 1.4;
}

/* ── ZIP label ──────────────────────────────────────────────────────────
   The field already has exactly ONE visible label ("ZIP / Postal Code") —
   GF renders it as a sub-label UNDER the input, inside a span that holds
   [input, label]. Reversing that span promotes it to a label above and
   removes the one underneath in the same move, so there is never a
   duplicate. NO form-settings change: same <label for>, same association,
   same field. Scoped by GF's own address-zip class so it generalises when
   we roll out to other forms. */
.ao-form .gform_wrapper .ginput_address_zip {
  display: flex;
  flex-direction: column-reverse;
}
/* Task 365e: the two name sub-labels are promoted to real field labels — same
   declarations as .gfield_label above, so First Name / Last Name are
   typographically identical to Email, Phone and ZIP. The markup filter moves
   them ABOVE their input, so no CSS reordering is involved. */
.ao-form .gform_wrapper .ginput_container--name .name_first > .gform-field-label--type-sub,
.ao-form .gform_wrapper .ginput_container--name .name_last > .gform-field-label--type-sub {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--ls-label, 0.10em);
  text-transform: uppercase;
  color: var(--dark-body, #F4F6F8);
  margin: 0 0 10px;
}

.ao-form .gform_wrapper .ginput_address_zip > .gform-field-label--type-sub {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--ls-label, 0.10em);
  text-transform: uppercase;
  color: var(--dark-body, #F4F6F8);
  margin: 0 0 10px;
}

/* The unchecked box was resolving to a 2px PURE BLACK border: something after
   our rule sets border-width/style without a colour, so border-color fell back
   to its initial value, currentColor — and the control inherits near-black
   text. Setting `color` as well as `border-color` closes both paths.
   A soft navy edge (not black, not white-on-white) is what actually reads as
   an input here: the box is white on a navy ground, so a white border would
   vanish into the fill. */
.ao-form .gform_wrapper input[type="checkbox"],
.ao-form .gform_wrapper input[type="radio"] {
  color: rgba(0, 40, 85, 0.45);
  border-color: rgba(0, 40, 85, 0.45);
}
.ao-form .gform_wrapper input[type="checkbox"]:checked,
.ao-form .gform_wrapper input[type="radio"]:checked {
  color: var(--red, #DA291C);
  border-color: var(--red, #DA291C);
}

/* ═══ Square corners ════════════════════════════════════════════════════
   The site's convention is square edges — buttons, cards, status pills and
   the footer social icons are all 0-radius. The form now matches.
   Set on GF's own radius variables as well as directly, because the orbital
   theme derives control radius from --gf-ctrl-radius and clamps it with
   min() in --gf-ctrl-radius-max-*; leaving those set would round the
   checkbox and the text inputs back up.
   Radios are deliberately left circular: a square radio reads as a checkbox
   and breaks the shape convention users rely on to tell them apart. Form 5
   has no radios, so nothing here changes today. */
.ao-form { --aof-radius: 0; }
.ao-form .gform_wrapper,
.ao-form .gform-theme {
  --gf-ctrl-radius: 0;
  --gf-ctrl-radius-max-sm: 0;
  --gf-ctrl-radius-max-md: 0;
  --gf-ctrl-radius-max-lg: 0;
  --gf-ctrl-checkbox-check-radius: 0;
}
.ao-form .gform_wrapper input[type="text"],
.ao-form .gform_wrapper input[type="email"],
.ao-form .gform_wrapper input[type="tel"],
.ao-form .gform_wrapper input[type="url"],
.ao-form .gform_wrapper input[type="number"],
.ao-form .gform_wrapper select,
.ao-form .gform_wrapper textarea,
.ao-form .gform_wrapper input[type="checkbox"],
.ao-form .gform_wrapper .gform_button,
.ao-form .gform_wrapper input[type="submit"],
.ao-form .gform_wrapper .gform_validation_errors { border-radius: 0; }

/* ═══ Task 365 — pilot refinements ══════════════════════════════════════ */

/* Checkbox to 28px. Set on GF's variable AND directly, since the orbital
   theme sizes the control from --gf-ctrl-choice-size. */
.ao-form .gform_wrapper,
.ao-form .gform-theme {
  --gf-ctrl-choice-size: 28px;
  --gf-ctrl-choice-size-md: 28px;
}
.ao-form .gform_wrapper input[type="checkbox"],
.ao-form .gform_wrapper input[type="radio"] {
  width: 28px;
  height: 28px;
  min-width: 28px;
}

/* The tick was sitting low-left: its BOX was centred, but a check drawn from
   two borders has its visual mass in the lower-left of that box, so centring
   the box does not centre the mark. Drawing it from the right+bottom borders
   and rotating +45deg puts the mark's own centre on the box centre; the small
   translate is the optical correction, in % so it holds at any box size. */
.ao-form .gform_wrapper input[type="checkbox"]::after {
  width: 30%;
  height: 55%;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: translate(0, -8%) rotate(45deg);
}

/* "Yes" at body-text size, centred against the box. */
.ao-form .gform_wrapper .gform-field-label--type-inline {
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dark-body, #F4F6F8);
  line-height: 1.5;
  margin: 0;
}

/* Placeholders are hints, so they must still be legible: #6B7280 on white
   measures 4.83:1, over the 4.5:1 minimum. */
.ao-form .gform_wrapper ::placeholder { color: #6B7280; opacity: 1; }

/* The tick was still landing bottom-left: the ::after was sized in PERCENT,
   and a percentage resolves against an indefinite grid track, so it collapsed
   to a few pixels in the corner. Fixed px against the known 28px box, with
   place-items:center restated so the mark is centred on both axes. */
.ao-form .gform_wrapper input[type="checkbox"] {
  display: grid;
  place-items: center;
  place-content: center;
}
.ao-form .gform_wrapper input[type="checkbox"]::after {
  content: "";
  width: 9px;
  height: 15px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  border-radius: 0;
  /* -2px is the optical lift: a check rotated 45deg sits low in its own box */
  transform: translateY(-2px) rotate(45deg);
  opacity: 0;
}
.ao-form .gform_wrapper input[type="checkbox"]:checked::after { opacity: 1; }

/* ═══ Required / optional ═══════════════════════════════════════════════
   The per-field "(Required)" markers are gone; one instruction carries the
   rule instead, and only the two optional fields are marked. */
.ao-form .ao-form-note {
  font-family: "Barlow", sans-serif;
  font-size: 16px;                       /* body text */
  line-height: 1.55;
  color: var(--ondark-muted, #B9BEC6);   /* 9.12:1 on --navy-deep */
  margin: 0 0 24px;
}
/* "(optional)" sits inside an uppercase, tracked label, so it has to opt out
   of both to read as a plain note at the same size. */
.ao-form .ao-optional {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  color: var(--ondark-muted, #B9BEC6);
}
.ao-form .gform-field-label--type-sub .ao-optional,
.ao-form .ginput_address_zip > .gform-field-label--type-sub .ao-optional { font-size: 15px; }

/* ═══ Task 365 — review round 3 ═════════════════════════════════════════ */

/* ── 1. checkbox: draw the tick ourselves ───────────────────────────────
   GF's own tick rendered bottom-left and clipped in Chrome and Firefox. Every
   attempt to place a border-drawn ::after fought the theme's own pseudo-element.
   So: appearance:none, no pseudo-element at all, and the check is an inline SVG
   background centred with background-position — which renders identically
   everywhere because the browser is only compositing an image. */
.ao-form .gform_wrapper input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin: 0;
  padding: 0;
  display: inline-block;          /* no grid — nothing to mis-place */
  background-color: #fff;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 17px 17px;
  border: 2px solid rgba(0, 40, 85, 0.45);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
/* Kill both pseudo-elements outright so nothing can paint a second mark. */
.ao-form .gform_wrapper input[type="checkbox"]::before,
.ao-form .gform_wrapper input[type="checkbox"]::after { content: none; display: none; }

.ao-form .gform_wrapper input[type="checkbox"]:checked {
  background-color: var(--red, #DA291C);
  border-color: var(--red, #DA291C);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* ── 2. error summary: a white panel, not red-on-navy ───────────────────
   Red text on the navy ground read badly. The summary is now a white panel,
   which lets the text be dark and the accents be full-strength --red.
   Measured on white: heading --red 4.87:1, body --ink 17.77:1, links --navy
   14.64:1, the 4px bar 4.87:1.
   NOTE: --red-ondark is only 2.98:1 on white, so it is NOT used in this panel
   even though it is the on-dark red elsewhere. Same token, different ground. */
.ao-form .gform_wrapper .gform_validation_errors {
  background: #fff;
  border: 0;
  border-left: 4px solid var(--red, #DA291C);
  border-radius: 0;
  padding: 18px 22px;
  margin: 0 0 28px;
  color: var(--ink, #17181A);
  box-shadow: 0 2px 10px rgba(0, 20, 45, 0.18);
}
/* Task 365e: the panel carries tabindex="-1" purely so GF's own autofocus can
   land on it, and a focused element draws a focus ring — measured as
   `outline: 3px solid rgba(192,43,10,0.65)`, which is the red box that appeared
   to ring the whole summary. It is not reachable by Tab, so removing the ring
   removes no keyboard affordance; the 4px --red bar stays as the marker. */
.ao-form .gform_wrapper .gform_validation_errors:focus,
.ao-form .gform_wrapper .gform_validation_errors:focus-visible { outline: none; }

.ao-form .gform_wrapper .gform_validation_errors > h2,
.ao-form .gform_wrapper .gform_validation_errors .gform_submission_error {
  color: var(--red, #DA291C);
  margin: 0 0 6px;
}
.ao-form .gform_wrapper .gform_validation_errors,
.ao-form .gform_wrapper .gform_validation_errors li,
.ao-form .gform_wrapper .gform_validation_errors p { color: var(--ink, #17181A); }
.ao-form .gform_wrapper .gform_validation_errors a { color: var(--navy, #002855); }

/* ── 3. field errors ────────────────────────────────────────────────────
   The border has TWO adjacent backgrounds — the navy page outside and the
   light fill inside — and 1.4.11 applies to both. --red-ondark passes against
   navy (5.71) but only manages 2.81 against the fill, so it FAILS as a border
   even though it is the correct on-dark token for TEXT. --red clears both:
   3.50 against navy, 4.58 against the fill.
   The message text stays --red-ondark, which is 5.71:1 on navy. */
.ao-form .gform_wrapper .gfield_error input[type="text"],
.ao-form .gform_wrapper .gfield_error input[type="email"],
.ao-form .gform_wrapper .gfield_error input[type="tel"],
.ao-form .gform_wrapper .gfield_error textarea,
.ao-form .gform_wrapper input[aria-invalid="true"] {
  border: 2px solid var(--red, #DA291C);
  background-color: #FFF6F5;
  color: var(--ink, #17181A);
}
.ao-form .gform_wrapper .validation_message,
.ao-form .gform_wrapper .gfield_validation_message {
  color: var(--red-ondark, #EB7066);
  background: none;
  border: 0;
  padding: 0;
  margin: 8px 0 0;
}

/* ── 4. submit hover ────────────────────────────────────────────────────
   shared.css turns .gform_button navy on hover — and this button sits ON navy,
   so it vanished. The site's only red-button hover (.btn-red:hover) is navy
   too, so there was nothing to reuse. Inverting is the brand-consistent answer:
   white fill, red text, red border. Measured: red on white 4.87:1, the border
   4.87:1 against the button and 3.50:1 against the page. */
/* T614 (2026-11-11): Task 365e's red border and white-fill/red-text hover are removed. At rest the button is solid red,
   white text, no border; on this dark ground hover/focus is --red-deep (shared.css). */

/* The longhands were being split apart — background-position computed 0% 0%
   and background-size auto, which is precisely why the tick sat in a corner.
   Declaring the whole thing as ONE background shorthand means position and
   size cannot be overridden independently, and .gchoice raises specificity
   above the theme rule that was winning. */
.ao-form .gform_wrapper .gchoice input[type="checkbox"] {
  background: #fff no-repeat center center / 17px 17px;
  border: 2px solid rgba(0, 40, 85, 0.45);
}
.ao-form .gform_wrapper .gchoice input[type="checkbox"]:checked {
  background: var(--red, #DA291C) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center center / 17px 17px;
  border-color: var(--red, #DA291C);
}