@charset "UTF-8";
/* --------------------------------------------------------------------------
   1. IMPORTS & FONTS
   -------------------------------------------------------------------------- */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
/* Public Sans */
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans/PublicSans-Black.woff2") format("woff2"), url("/assets/fonts/PublicSans/PublicSans-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans/PublicSans-Bold.woff2") format("woff2"), url("/assets/fonts/PublicSans/PublicSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans/PublicSans-ExtraBold.woff2") format("woff2"), url("/assets/fonts/PublicSans/PublicSans-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans/PublicSans-ExtraLight.woff2") format("woff2"), url("/assets/fonts/PublicSans/PublicSans-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans/PublicSans-Medium.woff2") format("woff2"), url("/assets/fonts/PublicSans/PublicSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans/PublicSans-Light.woff2") format("woff2"), url("/assets/fonts/PublicSans/PublicSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans/PublicSans-Regular.woff2") format("woff2"), url("/assets/fonts/PublicSans/PublicSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans/PublicSans-SemiBold.woff2") format("woff2"), url("/assets/fonts/PublicSans/PublicSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans/PublicSans-Thin.woff2") format("woff2"), url("/assets/fonts/PublicSans/PublicSans-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
/* Bootstrap Icons */
@font-face {
  font-family: "bootstrap-icons";
  src: url("/assets/fonts/BootstrapIcons/bootstrap-icons.woff2") format("woff2"), url("/assets/fonts/BootstrapIcons/bootstrap-icons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/* --------------------------------------------------------------------------
   2. CSS VARIABLES (Design Tokens)
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  /* Breakpoints */
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --xxl: 1400px;
  --xxxl: 1600px;
  --sm-max: 575.999px;
  --md-max: 767.999px;
  --lg-max: 991.999px;
  --xl-max: 1199.999px;
  --xxl-max: 1399.999px;
  /* Colors — Blue */
  --blue-1: #E4F4FF;
  --blue-2: #CBEAFF;
  --blue-3: #94D4FF;
  --blue-4: #57B3F1;
  --blue-5: #0067AB;
  --blue-6: #004A7C;
  --blue-7: #00385D;
  --blue-8: #00263F;
  --blue-9: #00111D;
  /* Colors — Green */
  --green-1: #D8FFF2;
  --green-2: #B5FFE6;
  --green-3: #7BECC6;
  --green-4: #29C28F;
  --green-5: #008558;
  --green-5-light: #CEE8D3;
  --green-6: #006240;
  --green-7: #004A30;
  --green-8: #003221;
  --green-9: #00170F;
  --green-10: #00492B;
  /* Colors — Neutral */
  --neutral-0: #FFFFFF;
  --neutral-1: #F2F2F2;
  --neutral-2: #E6E6E6;
  --neutral-3: #CCCCCC;
  --neutral-4: #A6A6A6;
  --neutral-5: #525252;
  --neutral-6: #414141;
  --neutral-7: #313131;
  --neutral-8: #212121;
  --neutral-9: #0F0F0F;
  --neutral-10: #000000;
  --neutral-100: #EAEAEA;
  /* Colors — Orange */
  --orange-1: #FFEEE2;
  --orange-2: #FFDFC6;
  --orange-3: #FFBE8A;
  --orange-4: #F29E5A;
  --orange-5: #C25700;
  --orange-6: #AD5000;
  --orange-7: #8E3800;
  --orange-8: #721F00;
  --orange-9: #580000;
  --orange-10: #440000;
  /* Colors — Red */
  --red-1: #FFF0EE;
  --red-2: #FFD9D4;
  --red-3: #FFB0A6;
  --red-4: #FF7A6B;
  --red-5: #D93025;
  --red-6: #B01F16;
  --red-7: #8A1510;
  --red-8: #650D09;
  --red-9: #3D0604;
  --red-10: #2c0301;
  /* RGB variants */
  --green-5-rgb: 0, 133, 88;
  --green-6-rgb: 0, 98, 64;
  --neutral-9-rgb: 15, 15, 15;
  --neutral-5-rgb: 82, 82, 82;
  /* Semantic — Primary */
  --primary: #007A52;
  --primary-rgb: 0, 122, 82;
  --primary-dark: var(--green-6);
  --primary-dark-rgb: var(--green-6-rgb);
  --secondary: var(--neutral-9);
  --secondary-rgb: var(--neutral-9-rgb);
  --tertiary: var(--neutral-5);
  --tertiary-rgb: var(--neutral-5-rgb);
  /* Oakland County aliases */
  --oc-green: var(--green-5);
  --oc-dark-green: var(--green-6);
  --oc-darker-green: var(--green-8);
  --oc-darkest-green: var(--green-8);
  --oc-faded-green: hsl(150deg 40% 95%);
  --oc-blue: var(--blue-5);
  --oc-dark-blue: var(--blue-6);
  --oc-orange: #DF5F1E;
  --oc-ada-orange: #c4541a;
  --oc-ada-orange-hover: #b04a17;
  --oc-dark-orange: #73310f;
  --oc-darkest-orange: #632a0d;
  --oc-black: var(--neutral-0);
  --oc-alert-red: #AD160B;
  --oc-alert-red-hover: #901209;
  --oc-po-blue: #375599;
  --oc-po-dark-blue: #1d2f56;
  --oc-po-darkest-blue: #131f39;
  --oc-to-green: #007A49;
  --oc-to-dark-green: #004B2D;
  --oc-to-darker-green: #004429;
  --oc-to-darkest-green: #003E25;
  --oc-to-blue: #2169ff;
  --oc-to-dark-blue: #0047E0;
  --oc-to-darker-blue: #003BB9;
  --oc-to-darkest-blue: #002D8B;
  /* Units */
  --br-s: .25rem;
  --br-m: .50rem;
  --br-l: .75rem;
  --lh-s: 1.20;
  --lh-m: 1.35;
  --lh-l: 1.50;
  --10px: 0.625rem;
  --11px: 0.6875rem;
  --12px: 0.75rem;
  --14px: 0.875rem;
  --16px: 1rem;
  --18px: 1.125rem;
  --24px: 1.5rem;
  --32px: 2rem;
  --48px: 3rem;
  --56px: 3.5rem;
  /* Fonts */
  --serif: 'Merriweather', Georgia, serif;
  --sans-serif: 'Public Sans', Helvetica, sans-serif;
  --monospace: 'Roboto Mono', Courier, monospace;
  --icon: 'Material Symbols Rounded';
  /* Bootstrap overrides (for compatibility) */
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

/* --------------------------------------------------------------------------
   3. BASE / RESET
   -------------------------------------------------------------------------- */
html,
body {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-weight: normal;
  color: #333;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--green-5);
  border: 2px solid transparent;
  border-radius: var(--br-m);
  color: #fff !important;
  font-weight: 700;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--green-6);
  border-color: transparent;
  color: #fff !important;
  transform: scale(0.99);
  box-shadow: 0 4px 12px rgba(0, 133, 88, 0.35);
}

.btn-primary:focus-visible {
  background-color: var(--green-6);
  border-color: transparent;
  color: #fff !important;
  outline: 3px solid var(--green-3);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-primary:active {
  background-color: var(--green-7) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: scale(0.97);
  box-shadow: none;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--neutral-3);
  border-color: transparent;
  color: #fff !important;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.btn-secondary {
  background-color: var(--neutral-1);
  border-radius: var(--br-m);
  border-color: transparent;
  color: var(--neutral-10);
  font-family: var(--sans-serif);
  padding: 1em;
  transition: 0.3s ease-in-out;
}

.btn-secondary:hover {
  background-color: var(--neutral-2);
  color: var(--neutral-10);
  border-color: transparent;
}

.btn-secondary:focus-visible {
  scale: 0.95;
  border-color: transparent;
  outline: 3px solid var(--green-3);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-secondary:active {
  border-color: transparent !important;
  transform: scale(0.97);
  box-shadow: none;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
  border-color: transparent;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--green-5);
  border-radius: var(--br-m);
  color: var(--green-5);
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-outline:hover,
.btn-outline:focus {
  background-color: var(--green-5);
  border-color: var(--green-5);
  color: var(--neutral-0);
  scale: 0.99;
}

.btn-outline:active {
  background-color: var(--green-6) !important;
  border-color: var(--green-6) !important;
  color: var(--neutral-0) !important;
  scale: 0.97;
}

.btn-white {
  background: var(--neutral-0);
  border-color: transparent !important;
  border-radius: var(--br-m);
  color: var(--green-8);
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active {
  background-color: var(--neutral-0) !important;
  border-color: transparent;
  border-radius: var(--br-m);
  color: var(--green-7);
  opacity: 0.99;
  scale: 0.99;
}

.btn-sm,
.btn-md {
  font-size: 0.875rem !important;
}

.btn-lg,
.btn-xl {
  font-size: 1rem !important;
}

.btn-xl {
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  padding: 0.875rem 1rem;
  transition: all 0.3s ease;
}

.btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  max-width: 12.5rem;
  min-width: 12.5rem;
  padding: 0.875rem 1rem;
}

.btn-wide {
  width: 12.5rem;
}

/* --------------------------------------------------------------------------
   5. STYLEGUIDE (scoped form/list overrides)
   -------------------------------------------------------------------------- */
.styleGuide {
  --sg-accent: var(--green-5);
  accent-color: var(--sg-accent);
}

.styleGuide .form-check-input {
  border-color: rgba(0, 0, 0, 0.25);
}

.styleGuide .form-check-input:focus {
  border-color: var(--sg-accent);
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.08);
}

.styleGuide .form-check-input:checked {
  background-color: var(--sg-accent);
  border-color: var(--sg-accent);
}

.styleGuide .form-check-input[type=radio]:checked {
  background-color: var(--sg-accent);
  border-color: var(--sg-accent);
}

.styleGuide .form-switch .form-check-input:checked {
  background-color: var(--sg-accent);
  border-color: var(--sg-accent);
}

.styleGuide .form-range {
  accent-color: var(--sg-accent);
}

.styleGuide .form-range::-webkit-slider-thumb {
  background-color: var(--sg-accent);
}

.styleGuide .form-range::-moz-range-thumb {
  background-color: var(--sg-accent);
  border-color: var(--sg-accent);
}

.styleGuide .form-range::-webkit-slider-runnable-track {
  background-color: rgba(0, 0, 0, 0.12);
}

.styleGuide .form-range::-moz-range-track {
  background-color: rgba(0, 0, 0, 0.12);
}

.styleGuide .list-group-item.active {
  background-color: var(--sg-accent);
  border-color: var(--sg-accent);
  color: #fff;
}

.styleGuide .badge.bg-primary,
.styleGuide .bg-primary,
.styleGuide .text-bg-primary {
  background-color: var(--sg-accent) !important;
  border-color: var(--sg-accent) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   6. LAYOUT & CONTENT
   -------------------------------------------------------------------------- */
.page-title {
  color: #000;
  line-height: 120% !important;
  font-weight: bold;
  font-size: 2.5rem !important;
  text-transform: none;
  font-family: Helvetica, Arial, sans-serif;
  padding: 0 !important;
  margin: 0 0 0.75em 0;
  overflow: hidden;
}

.content-area p {
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: #333;
}

.content-area a {
  color: var(--blue-5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.content-area a:link {
  color: var(--blue-5);
}

.content-area a:visited {
  color: var(--blue-6);
}

.content-area a:hover {
  color: var(--blue-6);
  text-decoration: underline;
}

.content-area a:focus-visible {
  color: var(--blue-6);
  outline: 2px solid var(--blue-5);
  outline-offset: 2px;
  border-radius: 2px;
  text-decoration: none;
}

.content-area a:active {
  color: var(--blue-7);
  text-decoration: underline;
}

.heading-line {
  align-items: center;
  display: flex;
  gap: 1em;
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.2;
  margin-top: 2rem;
}
@media (min-width: var(--md)) {
  .heading-line {
    margin-top: 0;
  }
}

.heading-line::after {
  background-color: var(--neutral-7);
  content: "";
  flex: 1;
  height: 1px;
}

/* Contact Info */
.contact-info {
  border: 1px solid var(--neutral-3);
  border-radius: 10px;
}
.contact-info .list-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  padding: 15px;
  border-bottom: 1px solid var(--neutral-3);
}
.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-info ul li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--neutral-3);
}
.contact-info ul li:last-child {
  border-bottom: none;
}
.contact-info .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 1rem;
}
.contact-info .text {
  padding: 1rem;
  border-left: 1px solid var(--neutral-3);
}

.border-right-neutral-3 {
  border-right: 1px solid var(--neutral-3);
}

/* --------------------------------------------------------------------------
   7. SUBSCRIBE & CONNECT SECTIONS
   -------------------------------------------------------------------------- */
.subscribe-heading {
  font-size: 2.5rem;
  max-height: 2.75rem;
  padding: 0 5%;
  margin: 0 0 1.4375rem 0;
}

@media (min-width: 768px) {
  .subscribe-summary {
    font-size: 1.25rem;
    padding: 0 23%;
  }
}
.subscribe-wrap {
  padding: 7.75rem 0 7rem 0;
}

.btn-signup {
  margin: 3.375rem auto 0;
}

.connect-social-section {
  padding: 1.125rem 0 7.1875rem 0;
  background: transparent linear-gradient(180deg, #ffffff 0%, var(--green-1) 100%) 0% 0% no-repeat padding-box;
}

.connect_header {
  display: block;
  position: relative;
  line-height: normal;
  width: 100%;
  height: 58px;
  padding: 0;
  text-indent: -9999px;
  background: url("/assets/img/social-title.svg") center top no-repeat;
  background-size: contain;
  margin: 0 0 4.1875rem 0;
}

.connect-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  justify-content: center;
  margin: 0 auto 1.1875rem auto;
}

.connect-header-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.connect-social-embed {
  margin: 0;
  list-style: none;
  height: 425px;
  overflow-y: hidden;
  border: 0 solid #E9ECEF;
  background: #F5F6F7;
  padding: 0;
}

.connect-social-link {
  font-family: inherit;
  color: #fff !important;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: none;
  background-color: var(--green-6);
  width: 100%;
  height: 4.375rem;
  line-height: 4.375rem;
  text-decoration: none !important;
  text-align: center;
  border: 0 solid #bbbbbb;
  border-radius: 0 0 5px 5px;
  margin: 0;
  display: block;
  transition: all 0.2s ease-out;
}

.connect-social-link:hover,
.connect-social-link:focus,
.connect-social-link:active {
  background: #00492B;
}

/* --------------------------------------------------------------------------
   8. HOME HEADING
   -------------------------------------------------------------------------- */
.home-heading {
  margin-bottom: min(7vw, 4.6875rem);
  text-align: center;
}

.home-heading-super {
  text-transform: uppercase;
  font-size: 1.125rem;
  font-weight: normal;
  letter-spacing: 1px;
  color: #00492B;
  margin-bottom: 0;
}

.home-heading-main {
  font-size: 3.125rem;
  font-size: clamp(1.625rem, 1.275rem + 1.55vw, 3.125rem);
  font-weight: bold;
  color: #000;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. OC ALERT BUTTON
   -------------------------------------------------------------------------- */
a.oc-alert-button {
  background-color: var(--blue-5);
  border-radius: var(--br-m);
  color: var(--neutral-0) !important;
  display: block;
  margin-top: 35px;
  overflow: hidden;
  padding: 20px 20px 20px 95px;
  position: relative;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

a.oc-alert-button::before,
a.oc-alert-button::after {
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  z-index: 1;
}

a.oc-alert-button::before {
  font-family: "bootstrap-icons";
  content: " \f431";
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 65px;
}

a.oc-alert-button::after {
  font-family: "bootstrap-icons";
  content: "\f285";
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  right: 40px;
  top: 0;
  transition: transform 0.2s ease-in-out;
}

a.oc-alert-button:hover::after {
  transform: translate(10px, 0);
}

/* OC Alert / CTA color variants */
p.oc-cta.green a {
  background-color: var(--green-5);
}

p.oc-cta.green a::before {
  background-color: var(--green-6);
}

p.oc-cta.green a:hover::before {
  background-color: var(--green-8);
}

p.oc-cta.orange a {
  background-color: var(--oc-ada-orange);
}

p.oc-cta.orange a::before {
  background-color: var(--oc-dark-orange);
}

p.oc-cta.orange a:hover::before {
  background-color: var(--oc-darkest-orange);
}

p.oc-alert.green a {
  background-color: var(--green-5);
}

p.oc-alert.green a::before {
  background-color: var(--green-6);
}

p.oc-alert.orange a {
  background-color: var(--oc-ada-orange);
}

p.oc-alert.orange a::before {
  background-color: var(--oc-dark-orange);
}

/* --------------------------------------------------------------------------
   10. PAGE THEMES
   -------------------------------------------------------------------------- */
/* Landing Primary (green default) */
[data-theme=landing-primary],
[data-theme=landing-primay] {
  --theme-bg: #ffffff;
  --theme-surface: #f7faf8;
  --theme-surface-alt: #edf5f1;
  --theme-border: #d6e5dd;
  --theme-text: #1d2b22;
  --theme-text-muted: #33483b;
  --theme-link: var(--green-6);
  --theme-link-hover: var(--green-7);
  --nav-bg: var(--green-5);
  --nav-panel-bg: var(--green-6);
  --nav-panel-bg-alt: var(--green-7);
  --subnav-bg: #ffffff;
  --subnav-header-bg: var(--green-7);
  --subnav-panel-bg: var(--green-6);
  --subnav-text: var(--neutral-7);
  --subnav-accent: var(--green-5);
}

/* Landing Dark */
[data-theme=landing-dark] {
  --theme-bg: #fff;
  --theme-surface: #1e1e1e;
  --theme-surface-alt: #2a2a2a;
  --theme-border: #3a3a3a;
  --theme-text: #f5f5f5;
  --theme-text-muted: #cfcfcf;
  --theme-link: #9fd0ff;
  --theme-link-hover: #c9e4ff;
  --nav-bg: #000000;
  --nav-panel-bg: #3a3a3a;
  --nav-panel-bg-alt: #2f2f2f;
  --subnav-bg: #1f1f1f;
  --subnav-header-bg: #000000;
  --subnav-panel-bg: #2b2b2b;
  --subnav-text: #ffffff;
  --subnav-accent: #7cc4ff;
}

/* Theme application — shared */
[data-theme=landing-primary],
[data-theme=landing-primay],
[data-theme=landing-dark] {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

[data-theme=landing-primary] .content-area p,
[data-theme=landing-primay] .content-area p,
[data-theme=landing-dark] .content-area p {
  color: var(--theme-text-muted);
}

[data-theme=landing-primary] .content-area a,
[data-theme=landing-primary] .content-area a:link,
[data-theme=landing-primary] .content-area a:visited,
[data-theme=landing-primay] .content-area a,
[data-theme=landing-primay] .content-area a:link,
[data-theme=landing-primay] .content-area a:visited,
[data-theme=landing-dark] .content-area a,
[data-theme=landing-dark] .content-area a:link,
[data-theme=landing-dark] .content-area a:visited {
  color: var(--theme-link);
}

[data-theme=landing-primary] .content-area a:hover,
[data-theme=landing-primary] .content-area a:focus-visible,
[data-theme=landing-primay] .content-area a:hover,
[data-theme=landing-primay] .content-area a:focus-visible,
[data-theme=landing-dark] .content-area a:hover,
[data-theme=landing-dark] .content-area a:focus-visible {
  color: var(--theme-link-hover);
}

[data-theme=landing-dark] .heading-line::after {
  background-color: var(--theme-border);
}

/* --------------------------------------------------------------------------
   11. Button grids
   -------------------------------------------------------------------------- */
.button-wrapper {
  height: 100%;
}
.button-wrapper .button-container:has(.item) {
  height: 100%;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .button-wrapper .button-container:has(.item) {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
@media (min-width: 992px) {
  .button-wrapper .button-container:has(.item) {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1200px) {
  .button-wrapper .button-container:has(.item) {
    grid-template-columns: repeat(2, 1fr);
  }
}
.button-wrapper .button-container:has(.item) .item a.button-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: var(--br-m);
  font-family: var(--sans-serif);
  font-weight: 600;
  text-decoration: none;
  padding: 1em;
  transition: background-color 0.2s ease-in-out, scale 0.2s ease-in-out;
  height: 100%;
  background-color: var(--green-5);
  color: var(--neutral-0);
}
@media (min-width: 768px) {
  .button-wrapper .button-container:has(.item) .item a.button-link {
    background-color: var(--neutral-1);
    color: var(--neutral-10);
  }
}
.button-wrapper .button-container:has(.item) .item a.button-link:hover, .button-wrapper .button-container:has(.item) .item a.button-link:focus-visible {
  scale: 0.99;
  background-color: var(--green-6);
}
@media (min-width: 768px) {
  .button-wrapper .button-container:has(.item) .item a.button-link:hover, .button-wrapper .button-container:has(.item) .item a.button-link:focus-visible {
    background-color: var(--neutral-2);
  }
}
.button-wrapper .button-container:has(.item) .item a.button-link:active {
  scale: 0.95;
  background-color: var(--green-7);
}
@media (min-width: 768px) {
  .button-wrapper .button-container:has(.item) .item a.button-link:active {
    background-color: var(--neutral-3);
  }
}
.button-wrapper .button-container:has(.item) .item a.button-link .button-content .button-text,
.button-wrapper .button-container:has(.item) .item a.button-link .button-content .button-desc {
  color: inherit;
  font-family: inherit;
}
.button-wrapper .button-container:has(.item) .item a.button-link .button-content .button-text {
  font-size: 1rem;
  font-weight: 600;
}
.button-wrapper .button-container:has(.item) .item a.button-link .button-content .button-desc {
  font-size: 0.9rem;
}

/* page social buttons */
.po-social-btns {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  margin-bottom: 20px;
}

.po-social-btns a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #555;
  border-radius: 8px;
  font-size: 28px;
  padding: 10px;
  color: #fff !important;
  text-decoration: none;
  transition: 0.2s ease-in-out;
}

.po-social-btns a:hover {
  background-color: #333;
}

.po-social-btns a:hover, .po-social-btns a:focus {
  text-decoration: none !important;
}

/*# sourceMappingURL=custom.css.map */