/*
 * Critter Stop — Consolidated Global Styles
 * Version: 3.0
 *
 * v3.0 changes: fixed ordered-list counter reset; fixed reduced-motion
 * breaking the slider; rebuilt the author card to collapse on available width;
 * added a site-wide focus-visible style; corrected five WCAG contrast
 * failures; replaced fixed iframe heights with an intrinsic ratio; merged the
 * duplicate 767/768px breakpoints.
 *
 * Replaces the inherited Oxygen Universal stylesheet, the older supplemental
 * stylesheet, and the maintained site-global stylesheet after staged QA.
 *
 * JacksonsMC page ID 35248 is excluded from broad typography and Gravity Forms
 * rules because that replica carries its own visual system.
 */

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  --cs-black: #101820;
  --cs-navy: #003a70;
  --cs-teal: #00587c;
  --cs-lightblue: #92c1e9;
  --cs-paleblue: #e9f4fb;
  --cs-orange: #cf4520;

  /* Text-on-white variant of --cs-orange. #cf4520 passes on white at 4.64:1
     but its lighter cousins do not; use this for copy, --cs-orange for fills. */
  --cs-orange-text: #b35c00;

  /* --cs-softred and --cs-lightblue are unused in this file. They are kept
     because Oxygen's per-page stylesheets may reference them. */
  --cs-softred: #a45248;
  --cs-cream: #efdbb2;
  --cs-yellow: #f1c400;
  --cs-white: #fff;
  --cs-card: #f8faf9;
  --cs-border: #e5e7eb;
  --cs-radius: 14px;
  --cs-max: 1200px;
  --cs-pad: clamp(0px, 2.5vw, 28px);
  --cs-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}

/* ==========================================================================
   Base and typography
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin-top: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
}

body:not(.page-id-35248) :where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.2;
}

body:not(.page-id-35248) :where(h1, .fs-1) {
  font-weight: 700 !important;
}

body:not(.page-id-35248) :where(h2, .fs-2) {
  margin: 32px 0 16px;
  font-weight: 700 !important;
}

body:not(.page-id-35248) :where(h3, .fs-3) {
  margin: 32px 0 16px;
  font-weight: 700 !important;
}

body:not(.page-id-35248) :where(h4, .fs-4) {
  font-weight: 700 !important;
}

body:not(.page-id-35248) :where(h5, .fs-5) {
  font-weight: 700 !important;
}

body:not(.page-id-35248) :where(h6, .fs-6) {
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

body:not(.page-id-35248) :where(p) {
  font-size: 16px;
  line-height: 1.6;
}

.fs-0 {
  font-size: 60px;
  font-weight: 700 !important;
}

.fc-white {
  color: var(--cs-white);
}

.single-post p {
  padding-top: 15px !important;
}

/* The rule above targets every p on a post, including form and widget copy,
   where the extra padding breaks field spacing. */
.single-post :where(.gform_wrapper, .wp-gr, .aioseo-author-bio-compact) p {
  padding-top: 0 !important;
}

/* ==========================================================================
   Oxygen layout, editor content and common utilities
   ========================================================================== */

.oxy-header-container {
  padding: 0 !important;
}

.header-row .oxy-header-left {
  width: 100%;
}

.header-row .oxy-header-center,
.header-row .oxy-header-right {
  display: none;
}

.cs-main-footer {
  display: block;
}

.gs-template .cs-main-footer {
  display: none;
}

.cs-wrap {
  max-width: var(--cs-max);
  margin-inline: auto;
  padding: var(--cs-pad);
}

.cs-h1 {
  margin: 0 0 .5rem;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
}

.cs-h2 {
  margin: 0 0 .75rem;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;

  /* clip is deprecated but retained for pre-Safari-14 support; clip-path is
     the modern path and both are needed for full coverage. */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.desktop-only {
  display: flex;
}

.mobile-only {
  display: none;
}

.white-link a,
.color-text a {
  color: var(--cs-white) !important;
}

.link-color a {
  color: var(--cs-white) !important;
  font-size: 15px !important;
}

/* #7d7d7d dropped to 2.77:1 against the navy sections these links sit on. */
.link-color a:hover {
  color: #c2cddb !important;
}

.color-text a:hover,
.text-color a:hover {
  color: #89cff0 !important;
}

/* VERIFY: 5.13:1 on --cs-navy (passes) but 3.51:1 on --cs-teal (fails).
   Darken or restrict to navy sections once the usage is confirmed. */
.text-color a {
  color: #5db4ff !important;
}

.icon-boxes h2 {
  display: none !important;
}

.zoom-image {
  overflow: hidden;
}

/* The hover transform this class is named for was absent, so the wrapper was
   only clipping and the effect never fired. Remove this rule if unwanted;
   the reduced-motion block at the end of the file already neutralizes it. */
.zoom-image img {
  display: block;
  transition: transform .4s ease;
}

.zoom-image:hover img,
.zoom-image:focus-within img {
  transform: scale(1.06);
}

@media (min-width: 992px) {
  .sticky {
    position: sticky;
    top: 90px;
  }
}

/* ==========================================================================
   Focus visibility
   Only Gravity Forms inputs previously had a focus style, leaving keyboard
   users with no visible indicator on links, buttons, sliders or filters.
   Selectors are wrapped in :where() so this stays trivially overridable.
   ========================================================================== */

:where(a, button, summary, [tabindex]):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 3px solid var(--cs-navy);
  outline-offset: 2px;
}

/* Navy is invisible against the dark sections, so those get a light ring. */
:where(.white-link, .color-text, .link-color, .cs-main-footer) a:focus-visible,
.gstemp-arrow:focus-visible {
  outline-color: var(--cs-white);
}

/* Tables and structured content */

body:not(.page-id-35248) table {
  border-collapse: collapse;
}

body:not(.page-id-35248) :where(td, th) {
  padding: 8px;
  border-bottom: 1px solid var(--cs-border);
}

body:not(.page-id-35248) th {
  font-weight: 700 !important;
}

body:not(.page-id-35248) main .ct-section :where(ul, ol) {
  margin-bottom: 24px;
  padding: 0 20px;
}

/* Each ol starts its own counter. Without this, a second ol on the page
   continued numbering from the first (4, 5, 6...). */
body:not(.page-id-35248) main .ct-section ol {
  counter-reset: li;
}

body:not(.page-id-35248) main .ct-section li {
  position: relative;
  margin-bottom: 12px;
  list-style: none;
  line-height: 1.6;
}

/* Only ol items advance the counter. Incrementing on every li meant ul items
   silently inflated the starting number of any ol that followed them. */
body:not(.page-id-35248) main .ct-section ol > li {
  counter-increment: li;
}

body:not(.page-id-35248) main .ct-section ul li::before {
  content: "•";
  position: absolute;
  left: -20px;
  color: var(--cs-navy);
  font-weight: 900;
}

body:not(.page-id-35248) main .ct-section ol li::before {
  content: counter(li) ".";
  position: absolute;
  left: -20px;
  color: var(--cs-navy);
  font-weight: 600;
}

body:not(.page-id-35248) main .ct-section ol .breadcrumb-item::before {
  display: none;
}

ol.breadcrumb {
  margin: 0;
  padding: 0;
}

li.breadcrumb-item {
  margin-bottom: 0;
}

/* WordPress editor output */

.oxy-stock-content-styles :where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.2;
}

.oxy-stock-content-styles :where(h1, h2) {
  margin: 32px 0 16px !important;
  font-size: 40px;
}

.oxy-stock-content-styles h2 {
  display: block;
  font-size: 28px;
}

.oxy-stock-content-styles h2::after {
  content: "";
  display: block;
  width: 50%;
  max-width: 80px;
  height: 16px;
  padding: 4px 0;
  border-bottom: 3px solid var(--cs-navy);
}

.oxy-stock-content-styles :where(h3, h4, h5, h6) {
  margin: 32px 0 16px !important;
}

.oxy-stock-content-styles h3 {
  font-size: 22px;
}

.oxy-stock-content-styles h4 {
  font-size: 18px;
}

.oxy-stock-content-styles :where(img, figure, iframe) {
  width: 100%;
}

.oxy-stock-content-styles img {
  height: auto;
}

.oxy-stock-content-styles figure {
  margin: 0;
}

.oxy-stock-content-styles figcaption {
  margin: -16px 0 32px;
  font-weight: 300;
  font-style: italic;
}

/* Intrinsic ratio replaces the four fixed-height media queries this rule
   used to need, and removes the letterboxing at in-between widths. */
.oxy-stock-content-styles iframe {
  aspect-ratio: 16 / 9;
  height: auto;
}

.oxy-stock-content-styles table {
  width: 95%;
}

.oxy-stock-content-styles thead {
  background: #333;
  color: var(--cs-white);
  font-size: 22px;
}

.oxy-stock-content-styles thead tr {
  border: 0;
  font-size: 24px;
}

.oxy-stock-content-styles tr {
  border: 1px solid var(--cs-border);
  font-size: 16px;
}

.oxy-stock-content-styles td {
  padding: 8px 16px;
}

.oxy-stock-content-styles blockquote {
  margin: 16px 0;
  padding: 4px 20px;
  background: var(--cs-paleblue);
  color: var(--cs-black);
}

.oxy-stock-content-styles pre {
  padding: 0 40px;
  color: var(--cs-navy);
  white-space: pre-wrap;
}

.oxy-stock-content-styles strong {
  color: var(--cs-navy) !important;
}

.oxy-stock-content-styles .wp-block-media-text__content {
  padding: 0 8% 0 0;
}

/* ==========================================================================
   Navigation, footer and breadcrumbs
   ========================================================================== */

.sub-menu {
  background-color: var(--cs-white) !important;
}

.page-list {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Catamaran, Arial, sans-serif;
}

.page-list li {
  color: var(--cs-teal);
  text-align: center;
}

.location-menu #menu-location {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
}

.location-menu.oxy-nav-menu .oxy-nav-menu-list li.menu-item {
  position: relative;
  margin-right: 5px;
}

.location-menu.oxy-nav-menu .oxy-nav-menu-list li.menu-item::before {
  content: "•";
  position: absolute;
  left: -12px;
  margin-top: -1px;
}

/* BRITTLE: #_nav_menu-332-10732 is an Oxygen-generated ID and will change if
   that element is rebuilt. Add a custom class in Oxygen and target that. */
.cs-main-footer .oxy-nav-menu-list,
#_nav_menu-332-10732 .oxy-nav-menu-list {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: center !important;
  gap: 10px;
  margin: 0;
  padding: 0;
}

#_nav_menu-332-10732 .oxy-nav-menu-list li.menu-item {
  flex: 1 1 auto;
  white-space: normal;
}

.hide-wmpml-div {
  display: none !important;
}

.aioseo-breadcrumb a {
  transition: color .25s ease;
}

.aioseo-breadcrumb a:hover {
  color: var(--cs-orange);
}

.foo-loc-link:first-child a::before {
  display: none;
}

.oxy-gallery-item .oxy-gallery-item-contents figcaption:not(:empty) {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
   Author card — AIOSEO E-E-A-T compact bio
   --------------------------------------------------------------------------
   CASCADE NOTE: the plugin stylesheet
   (aioseo-eeat/.../author-bio/global.*.css) is enqueued in the BODY, i.e.
   AFTER this file loads in the HEAD. It therefore wins every equal-specificity
   conflict. The !important flags below are load-bearing — do not strip them.

   LAYOUT NOTE: this block collapses on available width, not on viewport
   width, so it behaves identically inside a full-width section, a sidebar or
   a narrow embed. There is no author-card media query; do not add one.
   ========================================================================== */

/* Oxygen wraps shortcode output in a shrink-to-fit .ct-shortcode div, which
   sizes to the card's max-content and so stops short of the section on wide
   screens. Scoped with :has() so no other shortcode is affected; browsers
   without :has() simply keep the current shrink-to-fit behavior. */
.ct-shortcode:has(> .aioseo-author-bio-compact) {
  width: 100%;
}

.aioseo-author-bio-compact {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: flex-start !important;

  /* Oxygen nests this as .ct-section-inner-wrap > .ct-shortcode > card, and
     the inner wrap is a flex column with align-items: flex-start, so BOTH
     ancestors are shrink-to-fit. Anything that reduces this card's intrinsic
     width therefore drags the whole chain in with it. Do not add
     container-type here for the same reason: inline-size containment makes the
     card contribute nothing to intrinsic sizing and collapses .ct-shortcode to
     a few pixels. */
  width: 100% !important;

  /* No effect while side by side: the text column has flex-grow, so there is
     no free space to distribute. Once the card wraps, the avatar sits alone on
     the first line and this centers it. */
  justify-content: center !important;

  /* The plugin flips this to column inside its own
     @media screen and (width <= 430px). Pinning it to row hands the collapse
     decision entirely to the wrap logic above, so there is only one mechanism
     deciding when this card stacks. */

  /* Fixed, not viewport-scaled. The stack threshold below is derived from
     this plus the avatar width, so both must be predictable. */
  gap: 24px !important;
  padding: clamp(18px, 4vw, 24px) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  background: var(--cs-white) !important;
  box-shadow: var(--cs-shadow) !important;
}

/* Avatar column ----------------------------------------------------------- */

.aioseo-author-bio-compact-left {
  flex: 0 0 auto !important;
}

.aioseo-author-bio-compact-image {
  display: block !important;
  width: 140px !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  border: 3px solid var(--cs-navy) !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Text column ------------------------------------------------------------- */

/* The 260px flex-basis is the collapse trigger: once the text column can no
   longer hold 260px the whole card wraps to a stack. */
.aioseo-author-bio-compact-right {
  flex: 1 1 320px !important;
  min-width: 0 !important;

  /* Also centered by the plugin at <= 430px viewport. Alignment is owned by the
     media block at the end of this section instead, so that it can never
     center while the card is still side by side. */
  text-align: start !important;
}

.aioseo-author-bio-compact-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;

  /* The 12px column gap is the space BEFORE the divider; the job title's
     padding-left supplies the matching space after it. Keep the two equal. */
  gap: 2px 12px !important;

  /* Same reason as the text alignment above. */
  justify-content: flex-start !important;
  margin-bottom: 10px !important;
}

.aioseo-author-bio-compact-header .author-name {
  margin: 0 !important;
  color: var(--cs-navy) !important;
  font-size: clamp(19px, 2.2vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* The plugin draws a divider here as border-left with its own 12px margin and
   padding. Rather than removing it and redrawing it, this rule takes it over:
   the margin is dropped so the header's column-gap controls the space before
   the divider, and padding-left matches it on the other side. The stacked
   rules at the end of this section switch it off entirely. */
.aioseo-author-bio-compact-header .author-job-title {
  margin: 0 !important;
  padding: 0 0 0 12px !important;
  border: 0 !important;
  border-left: 1px solid rgba(0, 58, 112, .3) !important;
  color: var(--cs-orange-text) !important;
  font-size: clamp(14px, 1.4vw, 16px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.aioseo-author-bio-compact-main {
  margin: 0 !important;
  color: #2b2f33 !important;
  font-size: clamp(15px, 1.7vw, 17px) !important;
  line-height: 1.65 !important;
  text-wrap: pretty;
}

.aioseo-author-bio-compact-main > :last-child {
  margin-bottom: 0 !important;
}

.aioseo-author-bio-compact-footer {
  margin-top: 12px !important;
}

/* The plugin always prints the footer wrapper even with no social links
   configured, leaving dead space under the bio. :empty cannot be used here:
   the plugin fills the div with newlines and tabs, which count as content.
   :not(:has(*)) tests for no ELEMENT children instead. In a browser without
   :has() the selector is simply ignored, so this degrades safely. */
.aioseo-author-bio-compact-footer:not(:has(*)) {
  display: none !important;
}

.aioseo-author-bio-compact a:focus-visible {
  outline: 2px solid var(--cs-navy) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Once the card has stacked, center the avatar and text together. The header
   is a flex row, so it needs justify-content — inherited text-align does not
   move flex items. */

/* ONE number controls the collapse, and it forces the stack rather than
   waiting for the flex wrap, so the layout and the centring can never
   disagree. In this Oxygen section the card wraps naturally at about 575px of
   viewport; 600px fires just before that.

   This was a container query in an earlier revision, which read better in
   principle but required container-type on the card and that collapsed the
   shrink-to-fit Oxygen wrapper. The 320px flex-basis above is retained as a
   backstop: in a narrower context the card still stacks, just without the
   centring. */
@media (max-width: 600px) {
  .aioseo-author-bio-compact-left {
    flex: 0 0 100% !important;
  }

  .aioseo-author-bio-compact-image {
    margin-inline: auto !important;
  }

  .aioseo-author-bio-compact-right {
    text-align: center !important;
  }

  /* flex-wrap alone is not enough here. A flex item only moves to a new line
     when it cannot fit at its min-content width, so the name would compress
     and wrap onto two lines while the role stayed beside it. Switching the
     axis guarantees name and role each get their own line. */
  .aioseo-author-bio-compact-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  /* A vertical divider makes no sense once the items are stacked. */
  .aioseo-author-bio-compact-header .author-job-title {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

/* ==========================================================================
   Buttons, filters and panels
   ========================================================================== */

.cs-city-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.cs-city-btn {
  padding: .5rem 1rem;

  /* #ccc on #f8f8f8 was 1.51:1; UI component borders need 3:1 (WCAG 1.4.11). */
  border: 1px solid #8a8a8a;
  border-radius: 999px;
  background: #f8f8f8;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cs-city-btn.active {
  border-color: var(--cs-teal);
  background: var(--cs-teal);
  color: var(--cs-white);
}

.cs-city-dropdown {
  display: none;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.cs-city-select {
  padding: .5rem 2rem .5rem 1rem;
  border: 1px solid var(--cs-teal);
  border-radius: 999px;
  background-color: #f4f9fd;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20fill%3D%27%23666%27%20d%3D%27M504%20256c0%20137-111%20248-248%20248S8%20393%208%20256%20119%208%20256%208s248%20111%20248%20248zM273%20369.9l135.5-135.5c9.4-9.4%209.4-24.6%200-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9%200L256%20285.1%20154.4%20183.5c-9.4-9.4-24.6-9.4-33.9%200l-17%2017c-9.4%209.4-9.4%2024.6%200%2033.9L239%20369.9c9.4%209.4%2024.6%209.4%2034%200z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: .8rem;
  color: var(--cs-navy);
  font-size: 1rem;
  appearance: none;
  cursor: pointer;
}

.cs-city-panel {
  display: none;
}

.cs-city-panel.active {
  display: block;
}

.cta-btn {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.button-bg:hover {
  background-color: var(--cs-white) !important;
  color: #000 !important;
  font-weight: 700;
}

/* ==========================================================================
   Gravity Forms
   ========================================================================== */

body:not(.page-id-35248) .gform_wrapper :where(
  input[type="text"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="tel"],
  input[type="email"],
  textarea,
  select
) {
  min-height: 48px;
  border: 1px solid rgba(35, 66, 91, .1);
  border-radius: 2px;
  background: rgba(79, 148, 207, .1);
  color: var(--cs-navy);
  font: inherit;
  font-weight: 400 !important;
}

body:not(.page-id-35248) .gform_wrapper textarea {
  min-height: 140px;
}

body:not(.page-id-35248) .gform_wrapper :where(input, textarea, select):focus-visible {
  outline: 2px solid var(--cs-navy);
  outline-offset: 2px;
}

body:not(.page-id-35248) .gfield select option {
  color: var(--cs-navy);
  font-size: 16px;
}

.gform_wrapper .gform_footer {
  justify-content: flex-start;
}

body:not(.page-id-35248) :where(
  .gform_button,
  .gform_next_button,
  .gform_previous_button.button,
  .gform_save_link.button,
  .gform_wrapper.gravity-theme #field_submit input
) {
  margin-bottom: 0 !important;
  padding: 15px 28px;
  border: 1px solid var(--cs-teal);
  border-radius: 30px;
  background: var(--cs-orange);

  /* Cream on this orange was 3.41:1 and failed AA; white gives 4.64:1. */
  color: var(--cs-white) !important;
  font-family: Catamaran, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: .25em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

body:not(.page-id-35248) :where(
  .gform_button,
  .gform_next_button,
  .gform_previous_button.button,
  .gform_save_link.button,
  .gform_wrapper.gravity-theme #field_submit input
):hover {
  background: var(--cs-yellow);
  color: var(--cs-black) !important;
}

.gform_wrapper.gravity-theme .gfield {
  color: #000 !important;
}

.ginput_recaptcha > div {
  margin: 0;
}

/* ==========================================================================
   Plugin overrides
   ========================================================================== */

.wp-gr .wp-google-text,
.wp-gr .grw-review .wp-google-left {
  font-family: Arial, Helvetica, sans-serif !important;
}

.ays-pb-modal {
  background-color: #ededed !important;
}

/* ==========================================================================
   Guarantee and full-height utility sections
   ========================================================================== */

.page-id-32918 .cs-pdf {
  width: 100%;
  height: min(80vh, 900px);
  margin: 18px 0;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow);
}

.page-id-32918 .cs-guarantee-fallback {
  padding: 16px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-card);
}

@media (min-width: 1024px) {
  .cs-fullheight {
    min-height: 350px;
    flex-direction: column;
    justify-content: center;
  }

  .cs-fullheight-cta {
    display: flex;
    min-height: 170px;
    flex-direction: column;
    justify-content: center;
  }
}

/* ==========================================================================
   Custom sliders
   ========================================================================== */

.gstemp-slider1-wrapper,
.gstemp-slider2-wrapper {
  position: relative;
  margin-inline: auto;
}

.gstemp-slider1-wrapper {
  max-width: 800px;
}

.gstemp-slider2-wrapper {
  max-width: 1200px;
  padding: 20px 0;
}

.gstemp-slider1,
.gstemp-slider2 {
  overflow: hidden;
}

.gstemp-slider1 {
  position: relative;
  width: 100%;
  border-radius: var(--cs-radius);
}

.gstemp-track {
  display: flex;
  transition: transform .6s ease;
  will-change: transform;
}

.gstemp-slide {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  align-items: center;
}

.gstemp-slide img {
  display: block;
  width: 100%;
  max-width: 580px;
  height: 360px;
  border-radius: var(--cs-radius);
  object-fit: cover;
}

.gstemp-slide .caption {
  width: 100%;
  max-width: 580px;
  margin-top: 5px;
  padding: 10px;
  border-radius: var(--cs-radius);
  background: #f6fafd;
  color: #333;
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

.gstemp-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 30, 63, .75);
  color: var(--cs-white);
  place-items: center;
  transform: translateY(-50%);
  cursor: pointer;
}

.gstemp-arrow:hover {
  background: rgba(10, 30, 63, .9);
}

.gstemp-prev {
  left: 8px;
}

.gstemp-next {
  right: 8px;
}

.gstemp-arrow svg {
  width: 20px;
  height: 20px;
  fill: currentcolor;
}

.gstemp-dots {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 10px;
}

/* 24px hit area (WCAG 2.5.8) around an 8px visible dot, drawn with
   background-clip so the padding stays transparent. Colors raised from
   1.52:1 and 2.84:1 to meet the 3:1 non-text minimum. */
.gstemp-dot {
  width: 24px;
  height: 24px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: #7d90ad;
  background-clip: content-box;
  cursor: pointer;
}

.gstemp-dot[aria-current="true"] {
  background: var(--cs-orange);
  background-clip: content-box;
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes nd-attention {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.nd-animation-attention {
  animation: nd-attention 1.5s infinite;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1260px) {
  body:not(.page-id-35248) .fs-0 {
    font-size: 44px;
  }

  body:not(.page-id-35248) :where(h1, .fs-1) {
    font-size: 38px;
  }

  body:not(.page-id-35248) :where(h2, .fs-2) {
    font-size: 28px;
  }

  body:not(.page-id-35248) :where(h3, .fs-3) {
    font-size: 22px;
  }

  body:not(.page-id-35248) :where(h4, .fs-4) {
    font-size: 20px;
  }

  body:not(.page-id-35248) :where(h5, .fs-5) {
    font-size: 16px;
  }

  .oxy-stock-content-styles h2 {
    font-size: 28px;
  }

  .oxy-stock-content-styles h3 {
    font-size: 22px;
  }

  .oxy-stock-content-styles thead {
    font-size: 18px !important;
  }

}

@media (max-width: 991px) {
  body:not(.page-id-35248) .ct-section-inner-wrap {
    padding: 48px 32px;
  }

}

/* The 768px and 767px blocks were merged; a viewport of exactly 768px used to
   get mobile utilities with desktop typography. The author card rules that
   lived here are gone: it now collapses on available width instead. */
@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .cs-city-dropdown {
    display: flex;
  }

  .menu-location-container .menu-item {
    padding: 5px;
    font-size: 14px;
  }

  body:not(.page-id-35248) :where(h1, .fs-1) {
    font-size: 36px;
  }

  body:not(.page-id-35248) :where(h2, .fs-2) {
    font-size: 24px;
  }

  body:not(.page-id-35248) :where(h3, .fs-3) {
    font-size: 20px;
  }

  body:not(.page-id-35248) :where(h4, .fs-4) {
    font-size: 18px;
  }

  body:not(.page-id-35248) :where(h5, .fs-5) {
    font-size: 16px;
  }

  body:not(.page-id-35248) p {
    font-size: 16px;
  }

  body:not(.page-id-35248) .ct-section-inner-wrap {
    padding: 32px 16px;
  }

  .oxy-stock-content-styles h2 {
    font-size: 24px;
  }

  .oxy-stock-content-styles h3 {
    font-size: 20px;
  }

  .oxy-stock-content-styles thead td {
    font-size: 18px !important;
  }


  body:not(.page-id-35248) .gform_wrapper :where(
    .gform_footer input.button,
    .gform_footer input[type="submit"]
  ) {
    padding: 8px 16px;
  }

  .gform_wrapper.gravity-theme .gform_fields {
    row-gap: 8px !important;
  }

  .name_last {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 600px) {
  .gstemp-slide .caption {
    padding: 8px;
    font-size: 10px;
  }
}

@media (max-width: 479px) {
  body:not(.page-id-35248) :where(h4, .fs-4) {
    font-size: 16px;
  }

  body:not(.page-id-35248) p,
  body:not(.page-id-35248) .ct-section li {
    font-size: 14px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}