/* ==========================================================================
   Jay Insurance Group - shared stylesheet
   Cloned 1:1 from https://www.jayinsurancegroup.net (source platform: Wix).

   OWNERSHIP: the ORCHESTRATOR owns everything above the line that reads
   "END OF SHARED BLOCK". Page agents append their own rules BELOW it, each
   under a banner comment whose text is the word page, a colon, then the page
   slug. Page agents must never edit the shared block.

   Font substitutions for the proprietary Wix faces (noted in CLONE-REPORT):
     Moglan Demo (display serif) -> Playfair Display
     Aether      (section heads) -> Archivo
     Manrope     (body)          -> Manrope (exact, Google Fonts)
     DIN Next W01 Light (nav)    -> Barlow
   Fonts are loaded per page with a link tag to fonts.googleapis.com, never
   with a CSS import, so every page renders correctly on its own.
   ========================================================================== */

:root {
  /* palette, taken from the source theme variables */
  --blue: #198ab6;            /* source color_41 / 43 / 44 -> rgb(25,138,182) */
  --blue-deep: #12718f;       /* darkened blue, hover state only */
  --band: #e4f2fb;            /* source color_36 / color_11 */
  --band-2: #d9ecf7;          /* the ABOUT ME band */
  --ink: #121212;             /* source color_37 / 45 / 46 */
  --ink-soft: #474a4c;        /* source color_14 */
  --white: #ffffff;
  --dark: #121212;            /* footer / mission band base */
  --rule: rgba(18, 18, 18, 0.45);
  --rule-light: rgba(228, 242, 251, 0.6);
  --card-line: rgba(25, 138, 182, 0.75);

  /* type */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-head: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-nav: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* metrics */
  --wrap: 1140px;
  --wrap-narrow: 940px;
  --header-h: 100px;
  --radius: 0px;

  /* motion, ported from the source keyframes and transition timings */
  --t-fast: 0.15s ease-out;
  --t: 0.3s ease;
  --t-slow: 0.6s cubic-bezier(0.83, 0, 0.17, 1);
}

/* --------------------------------------------------------------- base ---- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; border: 0; }

a { color: inherit; text-decoration: none; transition: color var(--t), opacity var(--t); }

h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; }

ul, ol { padding: 0; }

button { font: inherit; }

/* the source's content column is exactly 1140px wide, centred (x390-1530 at
   a 1920 viewport), so the max-width has to include the gutter padding or
   every section sits 20px in from where the original has it */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 40px);
  margin: 0 auto;
  padding: 0 20px;
}

.wrap-narrow {
  width: 100%;
  max-width: calc(var(--wrap-narrow) + 40px);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--blue);
  color: var(--white);
  padding: 10px 18px;
  font-family: var(--font-nav);
}

.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- typography ---- */

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
}

.h-section {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--blue);
}

.h-footer {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--blue);
}

.body-20 { font-size: 20px; line-height: 1.6; letter-spacing: 0.05em; }

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  height: 0;
  margin: 0;
}

.rule--light { border-top-color: var(--rule-light); }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 158px;
  min-height: 50px;
  padding: 12px 24px;
  background: var(--blue);
  color: var(--band);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), transform var(--t-fast);
}

.btn:hover,
.btn:focus-visible { background: var(--blue-deep); color: var(--white); }

.btn--light {
  background: var(--band);
  color: var(--blue);
}

.btn--light:hover,
.btn--light:focus-visible { background: var(--white); color: var(--blue-deep); }

.btn--wide { min-width: 208px; }

/* -------------------------------------------------------------- header --- */

.site-header {
  position: relative;
  z-index: 50;
  background: var(--white);
  height: var(--header-h);
}

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* logo: the source renders the word JAY with writing-mode vertical-rl beside
   a two line INSURANCE GROUP lockup, both in the display serif */
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.logo__jay {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 45px;
  line-height: 1;
  color: var(--blue);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: block;
}

.logo__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  max-width: 160px;
}

.site-nav { margin-left: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
  animation: fadeIn 0.1s ease-in-out both;
}

.site-nav__link:hover,
.site-nav__link:focus-visible { color: var(--blue); }

.site-nav__link[aria-current="page"] { color: var(--blue); }

.site-header__cta { flex: 0 0 auto; }

/* -------------------------------------------------------------- footer --- */

.site-footer { background: var(--dark); }

.site-footer__bands {
  position: relative;
  overflow: hidden;
  background: var(--dark);
}

/* full bleed footer photo: explicit width AND height so the replaced element
   actually fills the band (an img is not stretched by left/right alone) */
.site-footer__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.site-footer__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

.site-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1920px;
  margin: 0 auto;
  padding: 58px 100px 40px;
  min-height: 379px;
}

.site-footer__col {
  padding-left: 18px;
  padding-right: 24px;
  /* the source's footer columns are ~265px wide, which is what makes
     LOCATIONS SERVICED and Small Business Benefit Options wrap onto two
     lines the way the screenshot shows */
  max-width: 283px;
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 34px 30px;
}

.site-footer__logo .logo__name { color: var(--band); }

.site-footer__follow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--band);
  text-align: center;
  max-width: 182px;
  margin: 0 0 14px 30px;
}

.social-bar {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 14px;
  max-width: 182px;
  margin: 0 0 0 30px;
  padding: 0;
}

.social-bar a { display: inline-flex; }

.social-bar img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  transition: transform var(--t), opacity var(--t);
}

.social-bar a:hover img { transform: scale(1.15); opacity: 0.85; }

.footer-text {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--band);
  line-height: 2;
}

.footer-text--16 { font-size: 16px; max-width: 260px; }
.footer-text--18 { font-size: 18px; }

.site-footer__col .h-footer { margin-bottom: 8px; }

.site-footer__col a:hover,
.site-footer__col a:focus-visible { color: var(--white); text-decoration: underline; }

.site-footer__legal {
  background: var(--blue);
  color: var(--band);
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  padding: 9px 20px;
}

/* ------------------------------------------------------- bands + cards --- */

.band { background: var(--band); }
.band--alt { background: var(--band-2); }
.band--white { background: var(--white); }

/* a photo band: the image is a real background-image so it can never
   collapse the way an absolutely positioned img can */
.band--photo {
  position: relative;
  overflow: hidden;
  background-color: var(--dark);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.band--photo > .band__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.band--photo > .wrap,
.band--photo > .wrap-narrow { position: relative; z-index: 1; }

/* ------------------------------------------ shared blog / article parts --- */

/* every blog post page sits on the light band from the header down to the
   footer, exactly like the blog index does */
.p-post { background: var(--band); }

.breadcrumb {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--blue);
  padding: 22px 0 0;
}

.breadcrumb a:hover { text-decoration: underline; }

/* the post article card: measured from the source screenshot as 940px wide,
   the SAME light band colour as the page, with a 1px #BEC8D1 hairline and
   100px of horizontal padding (so the 740px cover image fits exactly) */
.article-card {
  position: relative;
  background: var(--band);
  border: 1px solid #bec8d1;
  width: 940px;
  max-width: calc(100% - 40px);
  margin: 100px auto 0;
  padding: 55px 100px 26px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 26px;
}

.article-meta__sep { color: var(--ink-soft); }

.article-meta__kebab { margin-left: auto; color: var(--ink-soft); }

.article-meta__kebab svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--band-2);
  border: 1px solid rgba(18, 18, 18, 0.12);
  flex: 0 0 30px;
  display: inline-block;
}

.article-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 30px;
}

/* Wix prints an "Updated: <date>" line under the title on posts whose
   modified date differs from their published date (two of the five) */
.article-updated {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

.article-cover {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 30px;
}

.prose { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink); }

.prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  margin: 34px 0 14px;
}

.prose p { margin: 0 0 17px; }

.prose ul,
.prose ol { margin: 0 0 17px; padding-left: 24px; }

.prose li { margin: 0 0 6px; }

.prose strong { font-weight: 700; }

.prose em { font-style: italic; }

.prose a { color: var(--blue); text-decoration: underline; }

.article-share {
  display: flex;
  align-items: center;
  gap: 22px;
  border-top: 1px solid rgba(18, 18, 18, 0.1);
  margin-top: 30px;
  padding-top: 16px;
  color: var(--ink-soft);
}

.article-share svg { width: 15px; height: 15px; fill: currentColor; }

.article-share a:hover { color: var(--blue); }

.article-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-soft);
  padding: 12px 0 0;
}

.article-stats__spacer { margin-left: auto; }

/* an inline SVG with only a viewBox has a 300x150 default intrinsic size, so
   the stats-row glyphs MUST be sized here or the like-heart renders as a
   several-hundred-pixel blob (it did, on one page, before this rule existed) */
.article-stats svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  vertical-align: -2px;
}

/* the source renders the like heart in a coral red, not the body ink */
.article-stats__heart { color: #e75450; }

.recent {
  width: 943px;
  max-width: calc(100% - 40px);
  margin: 48px auto 0;
  padding: 0 0 66px;
}

.recent__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding: 0 16px;
  margin-bottom: 16px;
}

.recent__see-all { font-size: 13px; font-weight: 400; color: var(--ink); }

.recent__see-all:hover { color: var(--blue); }

.recent__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 29px;
}

.post-card {
  background: var(--band);
  border: 1px solid #bec8d1;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t), transform var(--t);
}

.post-card:hover { box-shadow: 0 6px 18px rgba(18, 18, 18, 0.12); transform: translateY(-2px); }

.post-card__img {
  display: block;
  width: 100%;
  height: 162px;
  object-fit: cover;
}

.post-card__body { padding: 18px 20px 12px; flex: 1 1 auto; }

.post-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 20px;
  border-top: 1px solid #bec8d1;
  padding: 10px 0 12px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink);
}

.post-card__stats svg { width: 15px; height: 15px; fill: currentColor; vertical-align: -2px; }

.post-card__stats .article-stats__spacer { margin-left: auto; }

/* --------------------------------------------------------------- motion --- */
/* Ported from the source stylesheet. The only keyframe the source page
   actually shows is fadeIn (opacity 0 to 1, used on the menu items); the rest
   of its keyframes belong to Wix component skeletons and spinners that this
   static clone never renders. rise is the same fade with the small upward
   travel the source slideshow easing uses. Both are pure CSS, run on load and
   use animation-fill-mode both, so the element ALWAYS ends up visible even if
   no JavaScript runs. No rule in this file ever hides content. */

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes rise {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
  0% { opacity: 0; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

.anim-fade { animation: fadeIn 0.6s ease both; }
.anim-rise { animation: rise 0.6s cubic-bezier(0.83, 0, 0.17, 1) both; }
.anim-zoom { animation: zoomIn 0.8s ease both; }

.anim-d1 { animation-delay: 0.08s; }
.anim-d2 { animation-delay: 0.16s; }
.anim-d3 { animation-delay: 0.24s; }
.anim-d4 { animation-delay: 0.32s; }

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 1100px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); padding: 48px 40px 36px; }
  .site-footer__col { padding-left: 0; }
  .site-footer__logo,
  .site-footer__follow,
  .social-bar { margin-left: 0; }
}

@media (max-width: 900px) {
  .site-header { height: auto; }
  .site-header__inner { flex-wrap: wrap; padding: 14px 20px; }
  /* The nav stays VISIBLE at every breakpoint and simply wraps onto its own
     row. A collapsed menu would mean a stylesheet rule hiding real links
     behind a :hover / :focus reveal, and if that reveal ever failed to fire
     the whole site navigation would be unreachable. Wrapping cannot fail. */
  .site-nav { order: 3; width: 100%; margin-left: 0; }
  .site-header__cta { order: 2; }
  .site-nav__list { flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px 0 4px; }
  .article-card { padding: 28px 22px 20px; }
  .article-title { font-size: 27px; }
  .recent__grid { grid-template-columns: 1fr; }
  .h-section { font-size: 32px; }
}

@media (max-width: 600px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .footer-text--16 { max-width: none; }
}

/* ===================== END OF SHARED BLOCK ==============================
   Page agents append below this line only, each under a banner comment
   whose text is the word page, a colon and the page slug.
   ====================================================================== */


/* ---------------------------------------------------------------------- */
/* page: home */

/* --------------------------------------------------------------- hero --- */

.p-home .hero {
  position: relative;
  height: 703px;
  display: flex;
  align-items: flex-end;
  background-image:
    linear-gradient(90deg, rgba(25, 138, 182, 0.97) 0%, rgba(25, 138, 182, 0.55) 28%, rgba(25, 138, 182, 0) 62%),
    url("orig/01.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.p-home .hero__inner { width: 100%; padding-bottom: 55px; }

.p-home .hero__title {
  color: #ffffff;
  margin: 0 0 24px;
  /* the source's hero column is ~600px wide, which is what makes
     INSURANCE GROUP wrap onto two lines under JAY */
  max-width: 620px;
}

.p-home .hero__jay { display: block; font-size: 163px; }

.p-home .hero__name { display: block; font-size: 70px; letter-spacing: 0.1em; }

.p-home .hero__lede {
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 0 28px;
}

.p-home .hero__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.p-home .hero__mail {
  flex: 0 0 auto;
  width: 49px;
  height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.75);
  transition: background-color var(--t), border-color var(--t);
}

.p-home .hero__mail:hover { background: rgba(255, 255, 255, 0.15); }

.p-home .hero__email p {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

.p-home .hero__email a { color: #ffffff; }
.p-home .hero__email a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .p-home .hero { height: auto; padding-top: 60px; }
  .p-home .hero__inner { padding-bottom: 40px; }
  .p-home .hero__jay { font-size: 90px; }
  .p-home .hero__name { font-size: 40px; }
}

/* -------------------------------------------------------------- about --- */

.p-home .about { padding: 90px 0; }

.p-home .about__grid {
  display: grid;
  grid-template-columns: 408px 1fr;
  gap: 70px;
  align-items: start;
}

.p-home .about__media { position: relative; width: 408px; height: 488px; }

.p-home .about__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-home .about__media::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  z-index: 2;
  pointer-events: none;
}

.p-home .about__accent {
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 140px;
  height: 70px;
  background: var(--blue);
  z-index: 0;
}

.p-home .about__rule { width: 110px; margin: 0 0 24px; }

.p-home .about__content h1 { margin: 0 0 24px; }

.p-home .about__content p { margin: 0; }

/* The source separates these paragraphs with its own zero-width-space
   paragraphs rather than margins, and that spacer renders ~34px tall.
   Keeping the source's spacer elements but giving them the measured height
   (instead of a full 32px line PLUS two paragraph margins) is what makes the
   block match the original's height. */
.p-home .about__spacer { height: 34px; line-height: 34px; }

.p-home .about__cta { margin-top: 49px; }

@media (max-width: 900px) {
  .p-home .about__grid { grid-template-columns: 1fr; }
  .p-home .about__media { margin: 0 auto; }
}

/* ------------------------------------------------------------ reviews --- */

.p-home .reviews { padding: 80px 0; }

.p-home .reviews__title { text-align: center; }

.p-home .reviews__rule { margin: 24px 0 40px; }

.p-home .reviews__swiper { position: relative; padding: 0 60px; }

.p-home .review-slide {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 40px;
  background-image: url("orig/03.jpg");
  background-size: cover;
  background-position: center;
}

.p-home .review-slide__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--band);
}

.p-home .review-slide__quote {
  position: absolute;
  z-index: 1;
  bottom: -30px;
  font-family: var(--font-display);
  font-size: 190px;
  line-height: 1;
  color: rgba(25, 138, 182, 0.14);
}

.p-home .review-slide__text {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.4;
  color: #121212;
  max-width: 950px;
  margin: 0 0 20px;
}

.p-home .review-slide__author {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  color: var(--blue);
}

.p-home .swiper-button-prev,
.p-home .swiper-button-next { color: rgba(18, 18, 18, 0.28); }

.p-home .swiper-button-disabled { opacity: 0.6; }

/* ----------------------------------------------------------- services --- */

.p-home .services { padding: 80px 0; }

.p-home .services__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}

.p-home .services__rule { flex: 1; }

.p-home .services__grid {
  display: grid;
  grid-template-columns: repeat(3, 370px);
  gap: 10px;
  justify-content: center;
}

.p-home .service-tile { position: relative; width: 370px; height: 370px; overflow: hidden; }

.p-home .service-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.p-home .service-tile:hover img { transform: scale(1.08); }

.p-home .service-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* ~300px of usable label width, which is what makes DENTAL & VISION
     INSURANCE wrap onto two lines while FAMILY & LIFE INSURANCE stays on
     one, exactly as the source screenshot shows */
  padding: 0 46px 26px 24px;
  /* the source puts these labels straight onto the photo with no scrim; a
     gradient here would be an improvement on the original, not a clone */
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .p-home .services__grid { grid-template-columns: repeat(2, 1fr); }
  .p-home .service-tile { width: 100%; height: 300px; }
}

@media (max-width: 600px) {
  .p-home .services__grid { grid-template-columns: 1fr; }
  .p-home .services__head { flex-wrap: wrap; }
}

/* ------------------------------------------------------------ mission --- */

.p-home .mission { height: 447px; display: flex; align-items: center; }

.p-home .mission .band__veil { background: rgba(0, 0, 0, 0.58); }

.p-home .mission__rule { width: 110px; margin: 0 0 20px; }

.p-home .mission__title { color: var(--band); margin: 0 0 20px; }

.p-home .mission__copy {
  color: var(--band);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 0 28px;
}

@media (max-width: 900px) {
  .p-home .mission { height: auto; padding: 60px 0; }
}

/* --------------------------------------------------------------- news --- */

.p-home .news { padding: 80px 0; }

.p-home .news__title { text-align: center; margin: 0 0 40px; }

.p-home .news__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 940px;
  margin: 0 auto;
}

.p-home .news-card {
  display: flex;
  background: #ffffff;
  border: 3px solid rgba(25, 138, 182, 0.75);
  transition: box-shadow var(--t);
}

.p-home .news-card:hover { box-shadow: 0 8px 20px rgba(18, 18, 18, 0.12); }

.p-home .news-card__img { flex: 0 0 auto; width: 454px; height: 340.5px; object-fit: cover; }

.p-home .news-card__body {
  padding: 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-home .news-card__date {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-soft);
}

.p-home .news-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
}

.p-home .news-card__title:hover { color: var(--blue); }

@media (max-width: 900px) {
  .p-home .news-card { flex-direction: column; }
  .p-home .news-card__img { width: 100%; height: 220px; }
}

/* ------------------------------------------------------------ contact --- */

.p-home .contact { padding: 80px 0 0; position: relative; }

.p-home .contact__title { text-align: center; }

.p-home .contact__lede {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: #121212;
  margin: 16px 0 32px;
}

.p-home .contact__pills {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.p-home .contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid var(--blue);
  background: var(--band);
  font-family: var(--font-body);
  font-size: 15px;
  color: #121212;
}

.p-home .contact-pill a { color: var(--blue); }
.p-home .contact-pill a:hover { text-decoration: underline; }

.p-home .contact-pill__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-home .form-card {
  position: relative;
  z-index: 2;
  background: #ffffff;
  max-width: 1140px;
  margin: 0 auto -90px;
  padding: 56px 64px 64px;
}

.p-home .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 24px;
}

.p-home .form-row--full { grid-template-columns: 1fr; }

.p-home .form-field { display: flex; flex-direction: column; gap: 8px; }

.p-home .form-field label {
  font-family: var(--font-body);
  font-size: 15px;
  color: #121212;
}

.p-home .form-field input,
.p-home .form-field select,
.p-home .form-field textarea {
  height: 34px;
  background: #e8f3f8;
  border: 1px solid #61afcd;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #121212;
}

.p-home .form-field textarea {
  height: 100px;
  padding: 10px 12px;
  resize: vertical;
}

.p-home .form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #61afcd 50%), linear-gradient(135deg, #61afcd 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.p-home .form-field input::placeholder,
.p-home .form-field textarea::placeholder { color: #5c8fa8; }

.p-home .form-field__icon-wrap { position: relative; }

.p-home .form-field__icon-wrap input { padding-left: 34px; }

.p-home .form-field__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.p-home .form-submit {
  width: 100%;
  height: 34px;
  background: var(--blue);
  color: var(--band);
  border: 0;
  font-family: var(--font-nav);
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--t);
}

.p-home .form-submit:hover { background: var(--blue-deep); }

.p-home .hp-wrap { position: absolute; left: -9999px; overflow: hidden; }

.p-home .contact-blue-band {
  position: relative;
  z-index: 1;
  height: 260px;
  background: var(--blue);
}

@media (max-width: 900px) {
  .p-home .form-card { padding: 40px 28px 96px; }
  .p-home .form-row { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------- */
/* page: gallery */

/* -------------------------------------------------------------- hero --- */

.p-gallery .gallery-hero {
  position: relative;
  height: 277px;
  background-image: url("orig/16.jpg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-gallery .gallery-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(25, 138, 182, 0.98) 0%,
    rgba(25, 138, 182, 0.6) 22%,
    rgba(25, 138, 182, 0) 55%
  );
}

.p-gallery .gallery-hero__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 108px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--white);
  text-align: center;
}

/* ------------------------------------------------------------- band --- */

.p-gallery .gallery-band {
  background: var(--band);
  padding: 55px 0 220px;
}

.p-gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 362px);
  gap: 10px;
  max-width: 1106px;
  margin: 0 auto;
}

.p-gallery .gallery-grid__item {
  width: 362px;
  height: 362px;
  overflow: hidden;
}

.p-gallery .gallery-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t), filter var(--t);
}

.p-gallery .gallery-grid__item:hover img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 1180px) {
  .p-gallery .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
    padding: 0 20px;
  }

  .p-gallery .gallery-grid__item {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 720px) {
  .p-gallery .gallery-hero__title { font-size: 56px; }

  .p-gallery .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 460px) {
  .p-gallery .gallery-grid {
    grid-template-columns: 1fr;
  }
}


/* ---------------------------------------------------------------------- */
/* page: blog */

.p-blog__page {
  background: var(--band);
  padding-bottom: 60px;
}

.p-blog__inner {
  padding-top: 8px;
}

.p-blog__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.15;
  color: var(--ink);
  margin: 46px 0 40px;
}

.p-blog__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 4px;
}

.p-blog__card {
  display: flex;
  align-items: stretch;
  background: var(--band);
  border: 1px solid #bec8d1;
  transition: box-shadow var(--t), transform var(--t);
}

.p-blog__card:hover {
  box-shadow: 0 6px 18px rgba(18, 18, 18, 0.12);
  transform: translateY(-2px);
}

.p-blog__thumb {
  flex: 0 0 48%;
  max-width: 455px;
  display: block;
  overflow: hidden;
}

.p-blog__thumb img {
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
  display: block;
}

.p-blog__body {
  flex: 1 1 auto;
  padding: 24px 30px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.p-blog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.p-blog__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.p-blog__author .avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.p-blog__author-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-blog__author-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

.p-blog__author-sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}

.p-blog__dot { color: var(--ink-soft); }

.p-blog__more {
  width: 15px;
  height: 15px;
  fill: var(--ink-soft);
  flex: 0 0 auto;
  margin-top: 3px;
}

.p-blog__card-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 10px;
}

.p-blog__card-title a { color: inherit; }
.p-blog__card-title a:hover,
.p-blog__card-title a:focus-visible { color: var(--blue); }

.p-blog__excerpt {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  /* must NOT be a growable flex item: flex-grow lets the box stretch past
     the clamp, so a 4th line of the excerpt leaks through */
  flex: 0 0 auto;
}

.p-blog__rule {
  border: 0;
  border-top: 1px solid rgba(18, 18, 18, 0.1);
  /* auto top margin pushes the divider + stats row down to the bottom of
     the card, which is where the source puts them */
  margin: 16px 0 12px;
  margin-top: auto;
}

.p-blog__stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-soft);
}

.p-blog__like {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #e2593f;
}

.p-blog__like-count {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-soft);
}

.p-blog__heart {
  width: 16px;
  height: 16px;
  overflow: visible;
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 760px) {
  .p-blog__card { flex-direction: column; }
  .p-blog__thumb { flex: 0 0 auto; max-width: none; width: 100%; }
  .p-blog__thumb img { min-height: 220px; height: 220px; }
  .p-blog__heading { font-size: 32px; margin: 34px 0 28px; }
}


/* ---------------------------------------------------------------------- */
/* page: post-final-expense */

/* the like heart in the article stats row has no shared sizing rule (it
   carries no count on this page), so size + vertically align it here */
.p-post-final-expense .article-stats svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}


/* ---------------------------------------------------------------------- */
/* page: post-mortgage-protection */

/* This post has no in-article cover image, so no .article-cover override is
   needed. Two page-specific quirks, both verified against shot.png: */

/* 1. The source's modified date differs from its published date, so Wix
   renders a small "Updated: <date>" line between the H1 and the article
   body (visible in the screenshot, not present in page.md since it is a
   platform-generated label rather than article copy). */
.p-post-mortgage-protection .article-updated {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

/* 2. Heading 4 ("MPI vs. Traditional Life Insurance: What's the /
   Difference?") is authored in the source as two consecutive heading
   blocks (confirmed in the DOM extraction) that render as one visually
   wrapped headline with no gap between the lines. Collapse the shared
   h2 top margin only when a heading directly follows another heading. */
.p-post-mortgage-protection .prose h2 + h2 {
  margin-top: 0;
}

/* The like-heart glyphs (article stats row + Recent Posts cards) render in
   a red/coral tone in the screenshot, not the neutral ink-soft/ink used by
   the surrounding text; the shared block has no colour rule for them. */
.p-post-mortgage-protection .article-stats__heart,
.p-post-mortgage-protection .article-stats__heart--liked {
  color: #e75450;
}


/* ---------------------------------------------------------------------- */
/* page: post-why-insurance */

/* All layout/typography for the article card, prose body, share row, stats
   row and Recent Posts grid is already provided by the shared .article-card,
   .prose, .article-share, .article-stats, .recent, .post-card classes in the
   shared block of site.css. This post has no in-article cover image, so no
   .article-cover override is needed here. Nothing page-specific remains
   beyond the shared layout, so this file intentionally stays minimal. */

.p-post-why-insurance .article-stats svg,
.p-post-why-insurance .post-card__stats svg {
  flex: 0 0 auto;
}


/* ---------------------------------------------------------------------- */
/* page: post-dental-vision */

.p-post-dental-vision {
  background: var(--band);
}

/* This post's cover image (assets/orig/33.jpg, the smaller 350x233
   rendition of the source photo) is rendered by the source as a
   Wix "text wrap" image: floated left at its natural size with the
   opening paragraph wrapping around it, not as a full-width block
   like the shared .article-cover default. Overriding here, scoped to
   this page only, per the screenshot ground truth. */
.p-post-dental-vision .article-cover {
  display: block;
  float: left;
  width: 350px;
  height: 233px;
  object-fit: cover;
  margin: 0 32px 20px 0;
}

.p-post-dental-vision .prose::after {
  content: "";
  display: table;
  clear: both;
}

/* the source uses an <h3> for the "Serving Communities" heading, styled
   identically to the shared .prose h2 rule (same Playfair 24px block) */
.p-post-dental-vision .prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  margin: 34px 0 14px;
  clear: both;
}

.p-post-dental-vision .prose h2 {
  clear: both;
}

/* icon sizing for the article's own stats row (not covered by the
   shared block, which only sizes .post-card__stats svg) */
.p-post-dental-vision .article-stats__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.p-post-dental-vision .article-stats svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  vertical-align: -3px;
}

.p-post-dental-vision .article-stats__heart {
  width: 18px;
  height: 18px;
  color: #e55750;
}

@media (max-width: 900px) {
  .p-post-dental-vision .article-cover {
    float: none;
    width: 100%;
    height: auto;
    margin: 0 0 20px;
  }
}


/* ---------------------------------------------------------------------- */
/* page: post-how-to-choose */

/* The cover image on this post is a square 350x350 photo that the source
   floats to the right of the opening paragraph + bullet list (not a
   full-width block like the other posts' covers), measured from the
   screenshot: it sits flush with the card's right inner edge, its top
   aligned with the first paragraph, with the intro copy wrapping to its
   left. Override the shared full-width .article-cover treatment for this
   page only. */
.p-post-how-to-choose .prose {
  overflow: visible;
}

.p-post-how-to-choose .article-cover {
  display: block;
  float: right;
  width: 350px;
  height: 350px;
  max-width: 45%;
  margin: 0 0 20px 30px;
}

/* clear the float once the intro list has finished wrapping so later
   paragraphs/headings always start at full width */
.p-post-how-to-choose .prose h2:first-of-type {
  clear: both;
}

/* the source's "Serving Tennessee and Kentucky Communities" sub-heading
   (a level-3 heading in page.md) renders smaller than the h2 steps and in
   an italic serif, per the screenshot; the shared block has no .prose h3
   rule to reuse */
.p-post-how-to-choose .prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin: 30px 0 14px;
}

@media (max-width: 640px) {
  .p-post-how-to-choose .article-cover {
    float: none;
    width: 100%;
    max-width: 350px;
    height: auto;
    margin: 0 0 20px;
  }
}