/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
.g-content {
  margin: 0.625rem;
  padding: 1.5rem;
}
.g-flushed .g-content {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1rem;
  line-height: 1.5;
}
h1 {
  font-size: 2.25rem;
}
h2 {
  font-size: 1.9rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.15rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.85rem;
}
small {
  font-size: 0.875rem;
}
cite {
  font-size: 0.875rem;
}
sub, sup {
  font-size: 0.75rem;
}
code, kbd, pre, samp {
  font-size: 1rem;
  font-family: "Menlo", "Monaco", monospace;
}
textarea, select[multiple=multiple], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
  border-radius: 0.1875rem;
}
.tk-proxima-nova {
  font-family: "proxima-nova", sans-serif;
}
/* Header Styles (Golden Ratio, Inter) */
/* .tm-title included so JL titles demoted to <div> for semantic heading order
   (hero slides 2+, the 'legacy' kicker) keep the heading typography. */
h1, h2, h3, h4, h5, h6, .tm-title {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 500 !important;
  line-height: 1.1;
  margin-top: 0;
}
/* Start at h1 and divide down by the golden ratio */
h1 {
  font-size: 3.618rem;
  color: #004F71;
  margin-bottom: 0.6em;
}
/* 3.618 */
h2 {
  font-size: 2.236rem;
  margin-bottom: 0.5em;
}
/* 3.618/1.618 */
h3 {
  font-size: 1.382rem;
  margin-bottom: 0.4em;
}
/* 2.236/1.618 */
h4 {
  font-size: 0.855rem;
  margin-bottom: 0.3em;
}
/* 1.382/1.618 */
h5 {
  font-size: 0.529rem;
  margin-bottom: 0.2em;
}
/* 0.855/1.618 */
h6 {
  font-size: 0.327rem;
  margin-bottom: 0.15em;
}
/* 0.529/1.618 */
.num1859 {
  font-family: "matrix-ii" !important;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}
.mutual {
  font-family: "matrix-ii" !important;
  font-weight: 300;
  font-feature-settings: "smcp" on;
}
.jl-navbar-item .jl-logo .num1859 {
  font-family: "matrix-ii" !important;
  font-weight: 700 !important;
  font-variant-numeric: lining-nums !important;
  -moz-font-feature-settings: "lnum" !important;
  -webkit-font-feature-settings: "lnum" !important;
  font-feature-settings: "lnum" !important;
}
.jl-navbar-item .jl-logo .mutual {
  font-family: "matrix-ii" !important;
  font-weight: 300 !important;
  font-feature-settings: "smcp" on !important;
}
.jl-hidden-s {
  display: none;
}
@media (max-width: 639px) {
  .jl-hidden-s {
    display: block;
    /* Make visible on small devices */
  }
  .jl-grid-small {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Center items horizontally */
    gap: 10px;
    /* Small gap between items */
  }
  .jl-flex-center {
    display: flex;
    justify-content: center;
  }
  .jl-button-small {
    padding: 5px 10px;
    /* Smaller padding for small buttons */
    font-size: 0.8rem;
    /* Smaller font size for readability on mobile */
  }
}
#g-top {
  font-size: 0.8rem !important;
}
.list-label, .loc-name, .loc-dist, .loc-addr, .loc-address, .loc-city, .loc-state, .loc-postcode, .loc-phone {
  font-size: 0.85rem;
  text-transform: uppercase;
  /* This applies the uppercase transformation */
}
.jl-text-uppercase {
  text-transform: uppercase;
}
.footer-fsr img {
  width: 180px;
  height: auto;
  /* Ensures the aspect ratio is maintained */
}
body#fsr #g-hero {
  position: relative;
  background-image: url('../../../../images/slide-rating.webp') !important;
  background-size: cover;
  background-position: center;
}
body#fsr #g-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 79, 113, 0.8);
  z-index: 1;
}
body#fsr #g-hero h1, body#fsr #g-hero p, body#fsr #g-hero a {
  position: relative;
  color: #ffffff;
  z-index: 2;
}
body#mutual #g-hero {
  position: relative;
  background-image: url('../../../../images/slide-mutual.webp') !important;
  background-size: cover;
  background-position: center;
}
body#mutual #g-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 79, 113, 0.8);
  z-index: 1;
}
body#mutual #g-hero h1, body#mutual #g-hero p, body#mutual #g-hero a {
  position: relative;
  color: #ffffff;
  z-index: 2;
}
body#about #g-hero {
  position: relative;
  background-image: url('../../../../images/slide-about.webp') !important;
  background-size: cover;
  background-position: center;
}
body#about #g-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 79, 113, 0.8);
  z-index: 1;
}
body#about #g-hero h1, body#about #g-hero p, body#about #g-hero a {
  position: relative;
  color: #ffffff;
  z-index: 2;
}
/* Responsive scaling for hero H1 */
@media (max-width: 768px) {
  body#fsr #g-hero h1, body#mutual #g-hero h1 {
    font-size: 2rem;
    /* Adjust size for tablets and large phones */
    line-height: 1.2;
  }
}
@media (max-width: 480px) {
  body#fsr #g-hero h1, body#mutual #g-hero h1 {
    font-size: 1.6rem;
    /* Smaller size for small phones */
    line-height: 1.2;
  }
}
#g-footer, #g-copyright {
  font-size: 12px;
  text-transform: uppercase;
}
.agency-list {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}
.agency-header, .agency-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.agency-header {
  background: #f6f7f8;
  font-weight: 700;
  border-bottom: 2px solid #e3e3e3;
  padding: 0.7em 0;
}
.agency-row {
  border-bottom: 1px solid #e3e3e3;
  padding: 0.6em 0;
}
.agency-cell {
  flex: 1;
  padding: 0.5em 0.8em;
  min-width: 0;
  font-size: 1em;
  word-break: break-word;
}
@media (max-width: 700px) {
  .agency-header {
    display: none !important;
    /* Hide header on mobile */
  }
  .agency-row {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 0;
    border: 2px solid #e3e3e3;
    border-bottom: 2px solid #e3e3e3 !important;
    margin-bottom: 1.1em;
    background: #fafbfc;
    box-shadow: none;
    padding: 1em 1.2em;
    font-weight: 400;
  }
  .agency-cell {
    padding: 0.18em 0;
    font-size: 1em;
    width: 100%;
  }
}
/* ABOUT → Timeline particle */
body#about #module-jltimeline-258 {
  color: #ffffff;
}
/* Section & item titles → Inter */
body#about #module-jltimeline-258 h2, body#about #module-jltimeline-258 h3, body#about #module-jltimeline-258 .g5-title, body#about #el-module-jltimeline-258 {
  color: #ffffff !important;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}
/* Date meta → Proxima Nova */
body#about #module-jltimeline-258 .tm-meta {
  display: inline-block;
  font-family: "Proxima Nova", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2f2f2f;
  /* brand ink — 4.77:1 on tan (white would be 2.81:1, the payment-button trap) */
  background-color: #ad9779;
  /* brand tan — warm accent against the navy scrim (Steve 2026-08-09: reintroduce warmth) */
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  /* rectangular */
  line-height: 1.3;
  letter-spacing: 0.02em;
}
/* Paragraph/body copy → Proxima Nova */
body#about #module-jltimeline-258 .tm-content, body#about #module-jltimeline-258 .tm-content p {
  font-family: "Proxima Nova", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.6;
  margin: 0.5rem 0 0;
}
/* Timeline line + icons */
body#about #module-jltimeline-258 .jl-timeline-line {
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
body#about #module-jltimeline-258 .el-timeline-icon.jl-timeline-icon-default {
  border-color: #ffffff !important;
}
/* ABOUT page → "Our History" section: the tornado image (kept for the Cyclone
   Association heritage, Steve 2026-08-09) under a navy scrim. The tan gradient
   this replaces failed at 2.3:1 for white body copy — unfixable at any tan
   opacity. A flat #004f71 scrim at 88% keeps the storm visible while white text
   reaches 6.57:1 at the image's brightest pixel (proof-sheet approved, option B).
   Solid navy matches the retired-gradient CTA standard; the section already sets
   color:#ffffff below (no !important override needed — 3.1's second half was
   already clean). */
body#about #g-feature {
  position: relative;
  background: url('../../../../images/1859_submit-claim.jpg') center center / cover no-repeat;
  color: #ffffff;
}
/* Navy scrim (was a failing tan gradient) */
body#about #g-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 79, 113, 0.88);
  z-index: 1;
}
/* Content above overlay */
body#about #g-feature > * {
  position: relative;
  z-index: 2;
}
/* ============================================================
   Accessibility — WCAG AA cleanup (2026-08-05)
   ============================================================ */
/* Muted eyebrow/meta labels render #868686 on white = 3.64:1 (fails AA).
   Darken to #6f6f6f = 5.02:1. The light/inverse hero eyebrows are
   re-asserted to their original translucent white so they are untouched. */
.tm-meta.jl-text-meta {
  color: #6f6f6f;
}
/* 2026-08-09: the inverse eyebrows were re-asserted at 0.6 alpha, which measures
   3.54-4.59:1 across the heroes — under AA. Darkening the overlay cannot fix it
   (a fully opaque #004f71 panel still only reaches 4.28:1); the alpha is the
   lever. 0.85 takes every hero eyebrow past 4.5:1. */
.jl-light .tm-meta.jl-text-meta, [class*="jl-inverse"] .tm-meta.jl-text-meta, .jl-inverse .tm-meta.jl-text-meta {
  color: rgba(255, 255, 255, 0.85);
}
/* Phone links in the top bar are ~18px tall on mobile — below the 24px
   tap-target minimum. Give them adequate vertical hit area. */
a[href^="tel:"] {
  display: inline-block;
  min-height: 24px;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.7;
}
/* W2 semantic hygiene: the 'legacy' card's "What You Get" was an <h4>, promoted
   to <h2> so the page heading order doesn't skip after the hero <h1>. Keep it a
   modest in-card sub-heading, not a full-size h2. */
.tm-content h2.card-subhead {
  font-size: 1.15rem;
  font-weight: 600 !important;
  margin: 0.6em 0 0.35em;
}
.jl-button-secondary {
  background-color: #004f71;
  color: #ffffff;
}
.jl-button-secondary:hover, .jl-button-secondary:focus, .jl-button-secondary:active {
  background-color: #ffffff;
  color: #004f71;
  box-shadow: inset 0 0 0 1px #004f71;
}
#g-feature .jl-light .jl-button-primary, #g-feature .jl-button-primary, body.outline-39 #g-header .jl-light .jl-button-primary, body.outline-39 #g-header .jl-button-primary {
  background-color: #ffffff;
  color: #004f71;
  border: 1px solid #ffffff;
}
#g-feature .jl-light .jl-button-primary:hover, #g-feature .jl-light .jl-button-primary:focus, #g-feature .jl-light .jl-button-primary:active, #g-feature .jl-button-primary:hover, #g-feature .jl-button-primary:focus, #g-feature .jl-button-primary:active, body.outline-39 #g-header .jl-light .jl-button-primary:hover, body.outline-39 #g-header .jl-light .jl-button-primary:focus, body.outline-39 #g-header .jl-light .jl-button-primary:active, body.outline-39 #g-header .jl-button-primary:hover, body.outline-39 #g-header .jl-button-primary:focus, body.outline-39 #g-header .jl-button-primary:active {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
#jlfeaturebox-9395-particle .item-wrapper {
  overflow: hidden;
}
#jlfeaturebox-9395-particle .tm-image {
  display: block;
  width: 100%;
  aspect-ratio: 2.3333333333;
  object-fit: cover;
  object-position: center;
}
/* Form success state, all ConvertForms forms (Steve 2026-11-05): no colored box or card.
   A green Font Awesome check + plain text in the site's own type. Color inherits from the page,
   so a form on a dark band stays readable. The check uses Joomla's core Font Awesome (the site's
   kit is a subset without it). The error state (.cf-error) keeps the plugin's styling. */
.convertforms.cf-success {
  background-color: transparent;
  box-shadow: none;
  color: inherit;
}
.convertforms.cf-success .cf-content-wrap {
  display: none;
}
.convertforms.cf-success .cf-form-wrap {
  padding: 0;
}
.convertforms.cf-success .cf-response {
  position: relative;
  padding: 0 0 0 1.75rem;
  background-color: transparent;
  color: inherit;
  line-height: 1.5;
  text-align: left;
}
.convertforms.cf-success .cf-response::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-success);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.convertforms.cf-success .cf-response strong {
  color: inherit;
}
/*# sourceMappingURL=custom_73.css.map */