/* Page-specific styles: home. Prefer the shared design-system classes; add only what is genuinely page-specific.
   All page classes are prefixed home- (plus the owner's slide-* / about-* classes). Art is decorative and always sized by attributes.
   Rule of thumb for this file: ONE definition per component, with at most one block per breakpoint (no stacked override layers). */

/* ---------- shared bits ---------- */
.hero .lead { overflow-wrap: anywhere; }
.stat-label { overflow-wrap: anywhere; }
.stat-num { overflow-wrap: anywhere; }
.section-head h2 { overflow-wrap: anywhere; }

/* =========================================================================
   1. HERO SLIDER (photographic). Slides share one grid cell so the hero keeps the height of the tallest slide (no layout shift).
   Motion is opt-in: fade, Ken Burns, staggered copy and the progress line only run inside prefers-reduced-motion: no-preference.
   --ui-bottom reserves the space the verify band overlaps (.home-band margin-top) plus a 1rem gap.
   ========================================================================= */
.hero-slider { --slide-h: clamp(30rem, 78vh, 46rem); --ui-bottom: 5.75rem; --slide-ms: 8000ms; --fade-ms: 1100ms; padding: 0; background: var(--navy-950); background-image: none; }
.hero-slider::after { display: none; }
.hero-slider .carousel-inner { display: grid; }
.hero-slider .carousel-inner::after { display: none; }
.hero-slider .carousel-item { display: grid; grid-area: 1 / 1; float: none; margin-right: 0; visibility: hidden; }
.hero-slider .carousel-item.active, .hero-slider .carousel-item-next, .hero-slider .carousel-item-prev { visibility: visible; }

/* photo + layered navy overlay (left-to-right wash for the copy, bottom vignette for the controls and the verify band) */
.slide-media { position: absolute; inset: 0; overflow: hidden; background: var(--navy-900); }
.slide-media::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(0deg, rgba(8, 23, 47, .92) 0, rgba(8, 23, 47, .55) 22%, rgba(8, 23, 47, 0) 48%),
  linear-gradient(90deg, rgba(8, 23, 47, .94) 0, rgba(11, 31, 63, .84) 34%, rgba(11, 31, 63, .42) 62%, rgba(11, 31, 63, .08) 100%); }
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transform-origin: var(--origin, 60% 50%); }
.slide-look-1 { --pos: 55% 45%; --origin: 62% 55%; --kb-x: -1.1%; --kb-y: -.7%; }
.slide-look-2 { --pos: 50% 55%; --origin: 70% 45%; --kb-x: -1.4%; --kb-y: .6%; }
.slide-look-2 .slide-media::after { background:
  radial-gradient(ellipse 70% 55% at 72% 105%, rgba(216, 150, 60, .3), rgba(216, 150, 60, 0) 70%),
  linear-gradient(0deg, rgba(8, 23, 47, .85) 0, rgba(8, 23, 47, .45) 22%, rgba(8, 23, 47, 0) 48%),
  linear-gradient(90deg, rgba(8, 23, 47, .94) 0, rgba(11, 31, 63, .8) 34%, rgba(11, 31, 63, .34) 62%, rgba(11, 31, 63, .04) 100%); }
.slide-look-3 { --pos: 50% 62%; --origin: 45% 60%; --kb-x: 1.2%; --kb-y: -.8%; }
/* the night photo is already very dark: let the light trails read through the wash */
.slide-look-3 .slide-media::after { background:
  linear-gradient(0deg, rgba(8, 23, 47, .85) 0, rgba(8, 23, 47, .4) 24%, rgba(8, 23, 47, 0) 50%),
  linear-gradient(90deg, rgba(8, 23, 47, .92) 0, rgba(11, 31, 63, .74) 34%, rgba(11, 31, 63, .3) 64%, rgba(11, 31, 63, .06) 100%); }

/* copy: bottom-anchored above the control strip, so the buttons sit in the same place on every slide */
.slide-body { position: relative; z-index: 2; display: flex; align-items: flex-end; min-height: var(--slide-h); padding-top: 3.25rem; padding-bottom: 11.5rem; }
/* a single slide has no control strip: the copy needs only the room for the verify band that overlaps the hero */
.hero-slider-single .slide-body { padding-bottom: 8rem; }
.slide-copy { max-width: 38rem; }
.slide-title { color: #fff; font-family: var(--font-serif); font-size: clamp(2rem, 1.1rem + 2.9vw, 3.5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 var(--sp-4); overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 2px 28px rgba(8, 23, 47, .5); }
.hero-slider .lead { color: var(--navy-100); font-size: clamp(1rem, .94rem + .35vw, 1.2rem); line-height: 1.55; max-width: 34rem; margin: 0 0 var(--sp-5); overflow-wrap: anywhere; text-wrap: pretty; text-shadow: 0 1px 18px rgba(8, 23, 47, .5); }
.slide-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.slide-actions .btn { min-height: 3rem; padding-inline: 1.4rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: normal; }
.slide-actions .btn-outline-light { background: rgba(8, 23, 47, .3); border-color: rgba(255, 255, 255, .6); backdrop-filter: blur(4px); }
.slide-actions .btn-outline-light:hover { background: rgba(255, 255, 255, .16); }

/* chips: figures ({dealers}, {categories}), category names ({category-names}) and plain text lines */
.slide-chips { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.slide-chips li { display: inline-flex; align-items: baseline; gap: .5rem; max-width: 100%; padding: .4rem .8rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-sm); background: rgba(8, 23, 47, .5); color: #fff; font-size: var(--fs-sm); font-weight: 550; backdrop-filter: blur(4px); }
.slide-chips strong { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; line-height: 1; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.slide-chips span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slide-chips .slide-chip-cat, .slide-chips .slide-chip-more { max-width: 17rem; }
.slide-chip-cat::before { content: ''; flex: none; align-self: center; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold-400); }
.slide-chips .slide-chip-more { background: transparent; border-style: dashed; color: var(--navy-100); }

/* control strip: counter + numbered progress bars (left), pause/play + arrows (right) */
.slider-ui { position: absolute; left: 0; right: 0; bottom: var(--ui-bottom); z-index: 5; }
.slider-bar { display: flex; align-items: center; gap: .5rem 1rem; padding-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .24); }
.slider-count { display: flex; align-items: baseline; gap: .4rem; margin: 0; min-width: 4.6rem; font-family: var(--font-serif); font-variant-numeric: tabular-nums; color: #fff; }
.slider-count-now { font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: .02em; }
.slider-count-total { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--navy-300); }
.hero-slider .carousel-indicators { position: static; display: flex; flex: 1 1 auto; min-width: 0; justify-content: flex-start; margin: 0; padding: 0; gap: 0; }
.hero-slider .carousel-indicators [data-bs-target] { position: relative; box-sizing: border-box; flex: 0 1 4.5rem; min-width: 1.5rem; height: var(--tap); margin: 0; padding: 0; border: 0; background: none; opacity: 1; text-indent: 0; transition: none; }
.hero-slider .carousel-indicators [data-bs-target]::before, .hero-slider .carousel-indicators [data-bs-target]::after { content: ''; position: absolute; left: .3rem; right: .3rem; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.hero-slider .carousel-indicators [data-bs-target]::before { background: rgba(255, 255, 255, .42); transition: background var(--motion); }
.hero-slider .carousel-indicators [data-bs-target]:hover::before { background: rgba(255, 255, 255, .8); }
.hero-slider .carousel-indicators [data-bs-target]::after { background: var(--gold-400); transform: scaleX(0); transform-origin: left center; }
/* current slide: a full gold bar (static while paused); while playing JS adds .is-playing and the bar fills over the slide interval */
.hero-slider .carousel-indicators .active::after { transform: scaleX(1); }
.hero-slider .carousel-indicators .active::before { background: rgba(255, 255, 255, .75); }
.slider-tools { display: flex; gap: .5rem; margin-left: auto; }
.slider-btn { position: static; width: auto; min-width: var(--tap); height: var(--tap); padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; opacity: 1; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .42); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); transition: background var(--motion), border-color var(--motion); }
.slider-btn:hover { background: rgba(255, 255, 255, .2); border-color: var(--gold-300); color: #fff; opacity: 1; }
.slider-btn i { font-size: 1.15rem; line-height: 1; }
.slider-toggle { padding: 0 1rem 0 .8rem; }
.slider-toggle i { font-size: 1.35rem; }
/* Bootstrap resets the outline on these buttons (.carousel-control-prev:focus { outline: 0 }); keep a visible ring on the dark hero */
.hero-slider .slider-btn:focus-visible, .hero-slider .carousel-indicators [data-bs-target]:focus-visible { outline: var(--focus-w) solid var(--focus-on-dark); outline-offset: 2px; }

@media (min-width: 992px) and (max-width: 1199.98px) {
  .slide-copy { max-width: 34rem; }
}
@media (max-width: 991.98px) {
  /* narrow screens: the copy spans most of the width, so the wash comes from the bottom instead of the left */
  .slide-media::after, .slide-look-2 .slide-media::after { background:
    linear-gradient(0deg, rgba(8, 23, 47, .97) 0, rgba(8, 23, 47, .94) 50%, rgba(8, 23, 47, .9) 72%, rgba(8, 23, 47, .5) 90%, rgba(8, 23, 47, .1) 100%); }
  .slide-look-2 .slide-media::after { background:
    radial-gradient(ellipse 90% 40% at 70% 105%, rgba(216, 150, 60, .26), rgba(216, 150, 60, 0) 70%),
    linear-gradient(0deg, rgba(8, 23, 47, .94) 0, rgba(8, 23, 47, .86) 48%, rgba(8, 23, 47, .6) 76%, rgba(8, 23, 47, .12) 100%); }
  .slide-look-3 .slide-media::after { background:
    linear-gradient(0deg, rgba(8, 23, 47, .95) 0, rgba(8, 23, 47, .86) 48%, rgba(8, 23, 47, .6) 74%, rgba(8, 23, 47, .1) 100%); }
}
@media (max-width: 767.98px) {
  /* portrait crop, copy bottom-aligned */
  .hero-slider { --slide-h: 38rem; --ui-bottom: 4.75rem; }
  .slide-look-1 { --pos: 40% 50%; }
  .slide-look-2 { --pos: 60% 50%; }
  .slide-body { align-items: flex-end; padding-top: 1.75rem; padding-bottom: 9rem; }
  .hero-slider-single .slide-body { padding-bottom: 6.5rem; }
  .slide-copy { max-width: none; }
  .slide-title { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.3rem); margin-bottom: .6rem; }
  .slide-actions { gap: .6rem; }
}
@media (max-width: 575.98px) {
  .slide-actions .btn { flex: 1 1 100%; }
  .hero-slider .lead { margin-bottom: 1rem; }
  .slide-chips { margin-bottom: 1rem; gap: .4rem; }
  .slide-chips li { padding: .28rem .6rem; font-size: var(--fs-xs); }
  .slide-chips strong { font-size: 1.05rem; }
  .slider-bar { gap: .25rem .6rem; }
  .slider-count { min-width: 3.9rem; }
  .hero-slider .carousel-indicators [data-bs-target] { flex-basis: 3rem; }
  .slider-tools .carousel-control-prev, .slider-tools .carousel-control-next { display: none; }
  .slider-toggle { padding: 0; width: var(--tap); }
  .slider-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359.98px) {
  .slider-count-total { display: none; }
  .slider-count { min-width: 1.75rem; }
}

/* ---- motion: only for visitors who have not asked for reduced motion ---- */
@media (prefers-reduced-motion: no-preference) {
  /* crossfade (Bootstrap .carousel-fade) at a calmer 1.1s */
  .hero-slider .carousel-fade .carousel-item { transition-duration: var(--fade-ms); transition-timing-function: ease; }
  .hero-slider .carousel-fade .active.carousel-item-start, .hero-slider .carousel-fade .active.carousel-item-end { transition: opacity 0s var(--fade-ms); }

  /* slow Ken Burns on the active slide's photo only (also on the incoming one so it does not restart when the fade ends) */
  @keyframes slide-zoom {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.085) translate3d(var(--kb-x, -1%), var(--kb-y, -.6%), 0); }
  }
  .slide.active .slide-img, .slide.carousel-item-next .slide-img, .slide.carousel-item-prev .slide-img { animation: slide-zoom 14s ease-out both; will-change: transform; }

  /* staggered copy entrance: eyebrow, headline, lead, chips/figures, buttons */
  @keyframes slide-rise {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to { opacity: 1; transform: none; }
  }
  .slide.active .slide-copy > *, .slide.carousel-item-next .slide-copy > *, .slide.carousel-item-prev .slide-copy > * { animation: slide-rise .8s cubic-bezier(.2, .65, .2, 1) both; animation-delay: var(--d, 0s); }
  .slide-copy > :nth-child(1) { --d: .3s; }
  .slide-copy > :nth-child(2) { --d: .42s; }
  .slide-copy > :nth-child(3) { --d: .54s; }
  .slide-copy > :nth-child(4) { --d: .66s; }
  .slide-copy > :nth-child(5) { --d: .78s; }
  /* the outgoing copy clears quickly so the two texts never overlap */
  .slide.active.carousel-item-start .slide-copy, .slide.active.carousel-item-end .slide-copy { opacity: 0; transition: opacity .3s ease; }

  /* progress line: the current bar fills over the slide interval (JS sets .is-playing, holds it on hover/focus and restarts it with the timer) */
  @keyframes slider-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  .hero-slider .is-playing .carousel-indicators .active::after { animation: slider-fill var(--slide-ms) linear both; }
  .hero-slider .is-playing.is-hold .carousel-indicators .active::after { animation-play-state: paused; }
}

/* =========================================================================
   2. VERIFY BAND (overlaps the slider)
   ========================================================================= */
.home-band { position: relative; z-index: 3; margin-top: -4.5rem; }
.home-band-card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold-400); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; }
.home-band-main { display: grid; gap: 1.1rem 2.25rem; padding: 1.4rem 1.5rem 1.5rem; }
.home-band-copy h2 { font-size: var(--fs-xl); margin: 0 0 .35rem; color: var(--navy-900); }
.home-band-copy p:not(.eyebrow) { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.home-band-copy .eyebrow { margin-bottom: .4rem; }
.home-verify.verify { background: none; box-shadow: none; border: 0; padding: 0; max-width: none; border-radius: 0; }
.home-band .statband-grid { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.home-band .stat:first-child { border-left: 0; }
@media (min-width: 1200px) {
  .home-band-main { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: center; }
}
@media (max-width: 575.98px) {
  .home-band { margin-top: -3.75rem; }
  .home-band-main { padding: 1.1rem 1rem 1.2rem; }
  .home-band-copy p:not(.eyebrow) { display: none; }
  .home-band .stat { padding: .65rem .9rem; }
  .home-band .stat-ic { display: none; }
  .home-band .stat-num { font-size: 1.5rem; }
}

/* =========================================================================
   3. ABOUT
   ========================================================================= */
.home-about-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem); margin: 0 0 .5rem; overflow-wrap: anywhere; }
.home-about-tagline { font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--navy-700); margin: 0 0 var(--sp-4); max-width: 38rem; overflow-wrap: anywhere; }
.about-home { border-left: 3px solid var(--gold-400); padding-left: 1.25rem; }
.about-home p { font-size: var(--fs-md); line-height: 1.7; color: var(--ink-2); margin: 0; }
.about-home p:first-child { color: var(--ink); }
.about-home p + p { margin-top: 1rem; }
.home-about-links { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.home-facts-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; }
.home-facts-head { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem; background-color: var(--navy-900); background-image: url('../../img/grid-pattern.svg'); border-bottom: 3px solid var(--gold-400); }
.home-facts-head .emblem { width: 2.1rem; height: 2.3rem; flex: none; }
.home-facts-head h3 { margin: 0; color: #fff; font-family: var(--font-serif); font-size: var(--fs-lg); }
.home-facts { margin: 0; padding: .25rem 1.25rem; }
.home-facts > div { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.home-facts > div:last-child { border-bottom: 0; }
.home-facts dt { display: flex; gap: .55rem; align-items: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.home-facts dt i { color: var(--gold-700); font-size: 1rem; }
.home-facts dd { margin: .25rem 0 0 1.6rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.home-facts address { font-style: normal; margin: 0; overflow-wrap: anywhere; }
.home-facts-foot { padding: .6rem 1.25rem; background: var(--navy-50); border-top: 1px solid var(--line); }
.home-facts-foot .link-arrow { font-weight: 600; }
@media (max-width: 575.98px) {
  .about-home { padding-left: .9rem; }
  .about-home p { font-size: 1rem; line-height: 1.6; }
  .home-about-links { margin-top: var(--sp-4); }
  .home-facts { padding: .1rem 1rem; }
  .home-facts > div { padding: .65rem 0; }
  .home-facts dd { margin-left: 0; }
}

/* =========================================================================
   4. OBJECTIVE CARDS
   ========================================================================= */
.home-obj { height: 100%; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-bottom: 3px solid var(--navy-700); border-radius: var(--r-md); padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--shadow-1); transition: box-shadow var(--motion), border-color var(--motion); }
.home-obj:hover { box-shadow: var(--shadow-2); border-bottom-color: var(--gold-500); }
.home-obj-art { width: 6rem; height: 6rem; margin: 0 0 1rem; display: block; }
.home-obj h3 { font-family: var(--font-serif); font-size: var(--fs-lg); margin: 0 0 .5rem; color: var(--navy-900); }
.home-obj p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 1rem; }
.home-obj .link-arrow { margin-top: auto; }
@media (max-width: 575.98px) {
  .home-obj { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; padding: .9rem 1rem; align-items: start; }
  .home-obj-art { width: 4.5rem; height: 4.5rem; grid-row: 1 / span 3; margin: 0; }
  .home-obj h3 { font-size: var(--fs-md); margin-bottom: .3rem; }
  .home-obj p { margin-bottom: 0; }
  .home-obj .link-arrow { display: none; }
}

/* =========================================================================
   5. CATEGORIES
   ========================================================================= */
.home-cat { padding: 0; overflow: hidden; border-top-width: 1px; border-top-color: var(--line); }
.home-cat:hover { border-top-color: var(--line); }
.home-cat-art { background: var(--navy-50); border-bottom: 1px solid var(--line); border-top: 3px solid var(--navy-700); }
.home-cat:hover .home-cat-art { border-top-color: var(--gold-500); }
.home-cat-art img { display: block; width: 100%; height: auto; max-height: 13.5rem; object-fit: contain; margin-inline: auto; }
.home-cat-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.2rem 1.35rem 1.1rem; min-width: 0; }
.home-cat-body h3 { overflow-wrap: anywhere; }
.home-cat .cat-top { flex-wrap: wrap; }
.home-cat .cat-code { max-width: 100%; overflow-wrap: anywhere; }
.home-cat-desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cat-meta strong { overflow-wrap: anywhere; }
.home-cat-docs { margin: 0 0 1rem; }
.home-cat-docs-title { display: flex; gap: .45rem; align-items: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-700); margin: 0 0 .5rem; }
.home-cat-docs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--fs-sm); color: var(--ink-2); }
.home-cat-docs li { display: flex; gap: .5rem; align-items: flex-start; }
.home-cat-docs li i { color: var(--success); flex: none; margin-top: .1rem; }
.home-cat-docs li span { overflow-wrap: anywhere; min-width: 0; }
/* the fee/validity row (.cat-meta, margin-top:auto) pins to the bottom of every card, so it lines up across a row; the link follows it */
.home-cat-link { margin-top: 0; }
/* a single category, or an orphaned last card on the two-column tablet grid, becomes a horizontal card */
@media (min-width: 768px) {
  .home-cat-wide { flex-direction: row; }
  .home-cat-wide .home-cat-art { flex: 0 0 38%; display: grid; place-items: center; border-bottom: 0; border-right: 1px solid var(--line); padding: 1rem; }
  .home-cat-wide .home-cat-art img { max-height: 16rem; }
  .home-cat-wide .home-cat-body { padding: 1.5rem 1.75rem; }
  .home-cat-wide .home-cat-docs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.5rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .home-cat-col.col-md-6:last-child:nth-child(odd) { flex: 0 0 100%; width: 100%; }
  .home-cat-col.col-md-6:last-child:nth-child(odd) .home-cat { flex-direction: row; }
  .home-cat-col.col-md-6:last-child:nth-child(odd) .home-cat-art { flex: 0 0 38%; display: grid; place-items: center; border-bottom: 0; border-right: 1px solid var(--line); padding: 1rem; }
  .home-cat-col.col-md-6:last-child:nth-child(odd) .home-cat-body { padding: 1.5rem 1.75rem; }
  .home-cat-col.col-md-6:last-child:nth-child(odd) .home-cat-docs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.5rem; }
}
@media (max-width: 575.98px) {
  .home-cat-art img { max-height: 7.5rem; }
  .home-cat-body { padding: 1rem 1.1rem .9rem; }
  .home-cat-body h3 { font-size: var(--fs-md); }
  .home-cat-desc { -webkit-line-clamp: 2; line-clamp: 2; }
  .home-cat-docs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .75rem; }
}

/* =========================================================================
   6. AUDIENCES (white horizontal cards on the navy band)
   ========================================================================= */
.home-aud { height: 100%; display: grid; grid-template-columns: minmax(11rem, 38%) minmax(0, 1fr); background: var(--white); color: var(--ink); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-2); border-top: 3px solid var(--gold-400); --focus-color: var(--focus); }
.home-aud-art { display: block; width: 100%; height: 100%; min-height: 11rem; object-fit: contain; padding: .5rem; background: var(--navy-50); border-right: 1px solid var(--line); }
.home-aud-body { display: flex; flex-direction: column; min-width: 0; padding: 1.3rem 1.4rem 1.4rem; }
.home-aud h3 { font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--navy-900); margin: 0 0 .5rem; overflow-wrap: anywhere; }
.home-aud p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; margin: 0 0 1.1rem; }
.home-aud-body > .btn, .home-aud-links { margin-top: auto; align-self: flex-start; }
.home-aud-links { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 767.98px) {
  /* stacked: the artwork becomes a banner strip so the illustration is kept at a small cost in height */
  .home-aud { display: flex; flex-direction: column; }
  .home-aud-art { height: 12rem; min-height: 0; padding: 0; object-fit: cover; object-position: center 55%; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 575.98px) {
  .home-aud-art { height: 9.5rem; }
  .home-aud-body { padding: 1rem 1.1rem 1.1rem; }
  .home-aud h3 { font-size: var(--fs-md); margin-bottom: .3rem; }
  .home-aud-body > .btn, .home-aud-links .btn { width: 100%; }
  .home-aud-links { align-self: stretch; }
}

/* =========================================================================
   7. MEMBERSHIP JOURNEY
   ========================================================================= */
.home-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.home-journey > li { position: relative; padding: 1.4rem 1.3rem 1.5rem; border-left: 1px solid var(--line); }
.home-journey > li:first-child { border-left: 0; }
.home-journey > li:not(:last-child)::after { content: '\F285' / ''; font-family: 'bootstrap-icons'; position: absolute; right: -.7rem; top: 4.2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--gold-400); color: var(--navy-950); display: grid; place-items: center; font-size: .7rem; z-index: 1; }
.home-step-art { display: block; width: 6.25rem; height: 6.25rem; margin: 0 0 1rem; }
.home-step-no { font-family: var(--font-serif); font-size: var(--fs-sm); font-weight: 600; color: var(--gold-700); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .35rem; }
.home-step-text h3 { font-size: var(--fs-md); margin: 0 0 .4rem; color: var(--navy-900); }
.home-step-text p:not(.home-step-no) { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; line-height: 1.55; }
@media (max-width: 991.98px) {
  .home-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-journey > li:nth-child(odd) { border-left: 0; }
  .home-journey > li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .home-journey > li::after { display: none !important; }
}
@media (max-width: 575.98px) {
  .home-journey { grid-template-columns: 1fr; }
  .home-journey > li { border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: 1rem; align-items: center; padding: .75rem 1rem; }
  .home-journey > li:first-child { border-top: 0; }
  .home-step-art { width: 3.75rem; height: 3.75rem; margin: 0; }
}
.home-ready { height: 100%; background: var(--white); border: 1px solid var(--navy-200); border-left: 3px solid var(--gold-500); border-radius: var(--r-md); padding: 1.3rem 1.4rem; }
.home-ready h3, .home-private h3 { display: flex; gap: .6rem; align-items: center; font-size: var(--fs-md); margin: 0 0 .8rem; }
.home-ready h3 { color: var(--navy-900); }
.home-ready h3 i { color: var(--gold-700); font-size: 1.2rem; }
.home-ready-sub { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.home-ready-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: var(--fs-sm); color: var(--ink); }
.home-ready-list li { display: flex; gap: .55rem; align-items: flex-start; }
.home-ready-list i { color: var(--success); margin-top: .12rem; flex: none; }
.home-ready-list span { overflow-wrap: anywhere; min-width: 0; }
.home-ready-extra { list-style: none; margin: 0; padding: .9rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .55rem; font-size: var(--fs-sm); color: var(--ink-2); }
.home-ready-extra li { display: flex; gap: .65rem; align-items: flex-start; }
.home-ready-extra .chip { flex: none; }
.home-ready-extra span:not(.chip) { overflow-wrap: anywhere; min-width: 0; }
.home-ready-note { display: flex; gap: .55rem; align-items: flex-start; margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.home-ready-note i { color: var(--navy-500); flex: none; margin-top: .12rem; }
.home-private { height: 100%; background-color: var(--navy-900); background-image: url('../../img/grid-pattern.svg'); color: var(--navy-200); border-radius: var(--r-md); border-top: 3px solid var(--gold-400); padding: 1.3rem 1.4rem; --focus-color: var(--focus-on-dark); }
.home-private h3 { color: #fff; font-family: var(--font-serif); font-size: var(--fs-lg); }
.home-private h3 i { color: var(--gold-400); font-size: 1.3rem; }
.home-private ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .65rem; font-size: var(--fs-sm); }
.home-private li { display: flex; gap: .6rem; align-items: flex-start; }
.home-private li i { color: var(--gold-400); margin-top: .1rem; flex: none; }
.home-private .link-arrow { color: var(--gold-300); }
.home-private .link-arrow:hover { color: #fff; }
@media (max-width: 575.98px) {
  .home-ready { padding: 1rem; }
  .home-ready-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .75rem; }
  .home-private { padding: 1rem; }
}

/* =========================================================================
   8. REGISTER PREVIEW, NOTICES, HELP CARD, LEADERSHIP
   ========================================================================= */
.register .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.register .chip-soft { white-space: normal; }
.home-dealer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
.home-dealer-card { display: flex; flex-direction: column; gap: .9rem; min-width: 0; padding: 1.15rem; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold-400); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.home-dealer-card:hover, .home-dealer-card:focus-within { border-color: var(--navy-300); border-top-color: var(--gold-500); box-shadow: var(--shadow-2); }
.home-dealer-card-head { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.home-dealer-icon { display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; color: var(--navy-700); background: var(--navy-50); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 1.2rem; }
.home-dealer-identity { min-width: 0; }
.home-dealer-kicker { margin: 0 0 .15rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.home-dealer-identity h3 { margin: 0; font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700; line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; }
.home-dealer-identity h3 a { color: var(--navy-900); text-decoration: none; }
.home-dealer-identity h3 a:hover { color: var(--navy-600); text-decoration: underline; }
.home-dealer-verified { display: grid; place-items: center; width: 1.9rem; aspect-ratio: 1; color: var(--success); background: var(--success-bg); border: 1px solid var(--success-line); border-radius: 50%; }
.home-dealer-category { display: flex; align-items: center; gap: .55rem; min-width: 0; color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.home-dealer-facts { display: grid; gap: .65rem; margin: auto 0 0; padding: .85rem 0 0; border-top: 1px solid var(--line); }
.home-dealer-facts > div { min-width: 0; }
.home-dealer-facts dt { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.home-dealer-facts dt i { color: var(--navy-500); }
.home-dealer-facts dd { margin: .15rem 0 0 1.15rem; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .home-dealer-card { transition: border-color .15s ease, box-shadow .15s ease; } }
@media (max-width: 991.98px) { .home-dealer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .home-dealer-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: .75rem; } .home-dealer-card { padding: 1rem; } }
.feed li { grid-template-columns: 4.5rem minmax(0, 1fr); }
.feed li:hover { background: transparent; }
.feed h3 { color: var(--navy-900); overflow-wrap: anywhere; }
.feed p.ex + p.ex { margin-top: .5rem; }
.feed p.ex { overflow-wrap: anywhere; }
.home-feed-note { margin: .75rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 575.98px) { .feed li { grid-template-columns: 3.5rem minmax(0, 1fr); } }
.help-card li address { overflow-wrap: anywhere; }
.help-card li span { min-width: 0; overflow-wrap: anywhere; }
.home-help-art { display: block; width: 6rem; height: 6rem; margin: 0 0 .9rem; }
@media (max-width: 575.98px) { .home-help-art { width: 4rem; height: 4rem; } }
.leaders-single { max-width: 28rem; }
.leader .role { overflow-wrap: anywhere; }

/* =========================================================================
   9. FAQ
   ========================================================================= */
.home-faq-art { display: block; width: 100%; max-width: 13rem; height: auto; margin: 0 0 1rem; }
.home-faq-intro .sub { color: var(--muted); margin: .5rem 0 .75rem; max-width: 24rem; }
@media (min-width: 992px) { .home-faq-intro { position: sticky; top: 7.5rem; } }
@media (max-width: 575.98px) { .home-faq-art { max-width: 6rem; } }
.home-faq { --bs-accordion-bg: var(--white); box-shadow: var(--shadow-1); border-radius: var(--r-md); }
.home-faq .accordion-header { margin: 0; font-family: var(--font-sans); letter-spacing: 0; }
.home-faq .accordion-button { font-size: var(--fs-md); overflow-wrap: anywhere; }
.home-faq .accordion-body { color: var(--ink-2); font-size: var(--fs-base); line-height: 1.6; overflow-wrap: anywhere; }
.home-faq .accordion-body > p { margin: 0 0 .75rem; }
.home-faq .accordion-body > p.mb-0 { margin-bottom: 0; }
.home-faq-list { margin: 0 0 .75rem; padding-left: 1.1rem; }
.home-faq-list li + li { margin-top: .3rem; }

/* =========================================================================
   10. CLOSING CTA (a lighter navy than the footer so the road artwork reads and the two do not merge)
   ========================================================================= */
.home-cta { background-color: var(--navy-700); background-image: linear-gradient(90deg, rgba(20, 48, 92, .97) 0, rgba(20, 48, 92, .85) 42%, rgba(20, 48, 92, 0) 100%), url('../../img/illustrations/cta-road.svg'); background-size: auto, cover; background-position: center, center bottom; background-repeat: no-repeat; padding: clamp(2.5rem, 2rem + 2vw, 3.75rem) 0; min-height: 15rem; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.home-cta > .container { width: 100%; }
.home-cta::after { display: none; }
.cta-band h2, .cta-band p { overflow-wrap: anywhere; }
@media (max-width: 991.98px) {
  .home-cta { background-image: linear-gradient(180deg, rgba(20, 48, 92, .94) 0, rgba(20, 48, 92, .88) 100%), url('../../img/illustrations/cta-road.svg'); }
}

/* =========================================================================
   Small-screen spacing and shared touch-target rules
   ========================================================================= */
@media (max-width: 575.98px) {
  .home-sec { padding-block: 1.75rem; }
  .section-head { margin-bottom: var(--sp-4); }
  .section-head .sub { font-size: var(--fs-sm); }
}
/* contact links inside fact rows and the help card keep a >= 24px target */
.home-facts dd a, .home-help li a, .home-faq-list a { display: inline-block; min-height: 1.5rem; padding: .15rem 0; line-height: 1.3; }

/* Association logo beside the About heading (home page only) */
.home-about-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3, 1rem); margin-bottom: .5rem; }
.home-about-head .eyebrow { margin-bottom: .15rem; }
.home-logo { width: clamp(16rem, 12rem + 20vw, 28rem); height: auto; max-width: 100%; flex: none; filter: drop-shadow(0 8px 18px rgba(11, 31, 63, .18)); }

/* New logo mark in the header (home page only) */
.brand .brand-mark { width: 2.9rem; height: 2.9rem; flex: none; filter: drop-shadow(0 2px 6px rgba(11, 31, 63, .3)); }
@media (max-width: 1199.98px) { .site-banner .brand .brand-mark { width: 2.4rem; height: 2.4rem; } }