/* Homepage hero only. Layout order: shared defaults, desktop sizing, compact
   tablet/phone layouts, shared vertical highlights, then short-wide screens.
   Keep the compact query in sync with the header rules in styles.css. */
.hero {
  min-height: 0;
  display: grid;
  grid-template-columns: 45% 55%;
  overflow: hidden;
}
.hero-copy,.hero-media {
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hero-copy {
  grid-column: 2;
  align-self: stretch;
  justify-content: space-between;
  padding: 34px 6vw;
}
.hero-media {
  grid-column: 1;
  width: 100%;
  min-height: 0;
  gap: 12px;
  padding: 34px var(--site-gutter);
  background: #ccd4d8;
}
.hero-copy-inner,.hero-media-inner {
  display: contents;
}
.hero-copy-inner {
  container-type: inline-size;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.hero h1 {
  font-size: clamp(23px,3.8vw,82px);
}
.hero h1>span,.hero h1>em {
  display: block;
  white-space: nowrap;
}
.hero-copy .eyebrow {
  margin: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.hero-intro {
  max-width: 570px;
  margin: 0;
  font-size: 18px;
  color: #526159;
}
.hero-actions {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
}
.hero-actions .button {
  min-height: 44px;
  line-height: 1.4;
  white-space: nowrap;
}
.video-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16/9;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
  box-shadow: 0 22px 55px rgba(32,41,37,.18);
}
.video-frame iframe {
  display: block;
  width: 100%;
  height: calc(100% + 2px);
  margin: -1px 0;
  border: 0;
  background: transparent;
}

/* Static highlights use five equal columns. Only the overflowing layouts
   animate; duplicated groups stay hidden in static/reduced-motion layouts. */
.trust-row {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: none;
  margin-top: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(32,41,37,.13);
  border-radius: 4px;
  background: rgba(251,250,246,.72);
}
.trust-track {
  width: 100%;
  min-width: 0;
  display: block;
}
.trust-group {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5,20%);
  gap: 0;
}
.trust-group[aria-hidden="true"] {
  display: none;
}
.trust-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(23,34,29,.22);
  text-align: center;
}
.trust-stat:first-child {
  border-left: 0;
}
.trust-stat strong {
  font-family: "DM Sans",Arial,sans-serif;
  font-style: normal;
  font-weight: 650;
  font-size: clamp(15px,1.25vw,19px);
  color: #526c84;
}
.trust-stat span {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .03em;
  white-space: nowrap;
  text-transform: uppercase;
  color: #44564b;
}
.marquee {
  display: block;
  padding: 18px 0;
  overflow: hidden;
  background: #c79eaa;
  text-transform: uppercase;
  letter-spacing: .14em;
  white-space: nowrap;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
}
.marquee i {
  font-style: normal;
}
.marquee-track {
  width: max-content;
  display: flex;
  animation: home-auto-scroll 90s linear infinite;
  will-change: transform;
}
.marquee-group {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  gap: 24px;
  padding-right: 24px;
}
@keyframes home-auto-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes home-auto-scroll-vertical {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@media(max-width:1560px) {
  .trust-track {
    width: max-content;
    display: flex;
    flex-direction: row;
    animation: home-auto-scroll 30s linear infinite;
    will-change: transform;
  }
  .trust-group,.trust-group[aria-hidden="true"] {
    width: auto;
    display: flex;
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding-right: 14px;
  }
  .trust-stat {
    width: 136px;
    min-width: 136px;
    align-items: flex-start;
    padding-left: 10px;
    text-align: left;
  }
  .trust-stat:first-child {
    border-left: 1px solid rgba(23,34,29,.22);
  }
}

/* Desktop: measure only content/header sizes, never the chosen layout. CSS
   owns breakpoints so resizing cannot create a JS layout-selection loop. */
@media(min-width:1201px) {
  .hero {
    --hero-content-height: var(--hero-measured-content,calc(25.3125vw + clamp(24px,2vw,36px) + 56px));
    /* Full-screen fitting is optional: cap spare space more tightly as the
       window gets taller relative to its width, even on large displays. */
    --hero-max-buffer: clamp(64px,calc((100vw - 100svh) * .22),280px);
    --hero-before-fallback: calc(var(--site-header-height,143px) + 42px);
    --hero-available-height: calc(100svh - var(--hero-before-height,var(--hero-before-fallback)) - var(--hero-marquee-height,52px));
    --hero-block-padding: clamp(16px,calc((var(--hero-available-height) - var(--hero-content-height)) / 2),clamp(28px,3.8svh,34px));
    min-height: min(var(--hero-available-height),calc(var(--hero-content-height) + var(--hero-max-buffer) * 2));
  }
  .hero-copy,.hero-media {
    justify-content: center;
    padding-block: var(--hero-block-padding);
  }
  .hero-copy {
    gap: clamp(24px,3.2svh,42px);
  }
  /* Container-relative headline sizing needs a real box, including below
     the 700px height alignment rule. display:contents makes cqw fall back
     to the viewport and can enlarge the three-line headline past its column. */
  .hero-copy-inner {
    display: flex;
    flex-direction: column;
    gap: inherit;
  }
}
@media(min-width:1201px) and (min-height:700px) {
  .hero-copy,.hero-media {
    height: auto;
    align-self: stretch;
    gap: 0;
  }
  .hero-copy-inner,.hero-media-inner {
    width: 100%;
    height: var(--hero-content-height);
    align-self: center;
    display: flex;
    flex-direction: column;
  }
  .hero-copy-inner {
    justify-content: space-between;
  }
  .hero-media-inner {
    justify-content: flex-start;
    gap: clamp(24px,2vw,36px);
  }
  .trust-row {
    margin-top: auto;
  }
}

/* Shared compact layout. Tablet/phone rules below refine the inner columns,
   spacing and typography without repeating the media-first stacking rules. */
@media(max-width:1200px),
      (max-width:1440px) and (min-height:calc(27.3125vw + 510px)) {
  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .hero-copy {
    grid-column: 1;
    grid-row: 2;
    display: block;
  }
  .hero h1 {
    font-size: clamp(23px,calc(9vw - 4.5px),82px);
  }
  .hero-copy .eyebrow {
    font-size: 12px;
    line-height: 1.6;
    white-space: normal;
    letter-spacing: .04em;
  }
  .hero-copy .eyebrow:before {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: calc(.8em - .5px);
  }
  .hero-actions .button {
    font-size: 13px;
    gap: 6px;
  }
}
/* Size the slogan from its own column, not the entire viewport. */
@supports(font-size:1cqw) {
  .hero h1 { font-size: clamp(23px,9cqw,82px); }
}
/* Tablet/tall intermediate window: video and vertical highlights above a
   two-column copy section. The header uses this exact same compact query. */
@media(min-width:901px) and (max-width:1200px),
      (min-width:901px) and (max-width:1440px) and (min-height:calc(27.3125vw + 510px)) {
  .hero {
    --hero-stats-width: 220px;
    --hero-stats-gap: 24px;
  }
  .hero-media {
    justify-content: flex-start;
    gap: 0;
    padding: 36px var(--site-gutter);
  }
  .hero-copy {
    padding: 76px 6vw;
  }
  .hero-copy-inner {
    max-width: none;
    height: auto;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) var(--hero-stats-width);
    gap: 40px var(--hero-stats-gap);
  }
  .hero h1 {
    grid-column: 1;
    grid-row: 2 / 4;
    align-self: stretch;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: clamp(40px,5vw,60px);
    font-size: clamp(40px,calc((100cqw - var(--hero-stats-width) - var(--hero-stats-gap)) / 10),82px);
    line-height: 1.22;
  }
  .hero-copy .eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .hero-intro {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding-top: 12px;
    font-size: 16px;
    line-height: 1.55;
  }
  .hero-actions {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    flex-direction: column;
    gap: 10px;
  }
  .hero-actions .button {
    padding: 12px 10px;
    font-size: 12px;
  }
}
@media(min-width:901px) and (max-width:1180px) {
  .hero-copy .eyebrow { gap: 8px; }
  .hero-copy .eyebrow:before { width: 18px; }
}
/* Phones/smaller tablets: video first, horizontal highlights, then copy. */
@media(max-width:900px) {
  .hero-media {
    gap: 18px;
    padding-block: 24px;
  }
  .hero-copy {
    padding: 75px 24px 34px;
  }
  .hero-copy .eyebrow { gap: 7px; margin-bottom: 22px; }
  .hero-copy .eyebrow:before { width: 18px; }
  .hero-intro {
    margin: 24px 0;
    font-size: clamp(15px,2vw,17px);
    line-height: 1.55;
  }
  .video-frame iframe { height: calc(100% + 6px); margin: -3px 0; }
}
@media(max-width:760px) {
  .hero-copy { padding: 55px 24px 32px; }
  .hero h1 { max-width: 100%; }
  .hero-media { padding-block: 20px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button {
    min-width: 0;
    flex: 1 1 0;
    padding: 13px 5px;
  }
  .trust-stat { width: 132px; min-width: 132px; }
  .marquee { padding: 17px 0; line-height: 1.6; }
  .marquee-group { gap: 20px; padding-right: 20px; }
}
@media(max-width:560px) {
  .hero-media { gap: 14px; }
  .hero-copy .eyebrow { gap: 5px; margin-bottom: 19px; }
  .hero-copy .eyebrow:before { width: 13px; }
  .hero-intro { margin: 20px 0; font-size: 15px; line-height: 1.5; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { padding: 13px 6px; font-size: 12px; }
  .hero-actions .button:last-child { flex-grow: 1.35; }
}
@media(max-width:420px) {
  .hero-media { padding-block: 16px; }
  .hero-copy { padding: 48px 20px 32px; }
}
@media(max-width:360px) {
  .hero-actions .button { text-align: center; }
}

/* Both tablet and short-wide modes use the same vertical highlights rail.
   Absolute positioning binds its height to the 16:9 video in WebKit too. */
@media(min-width:901px) and (max-width:1200px),
      (min-width:901px) and (max-width:1440px) and (min-height:calc(27.3125vw + 510px)),
      (min-width:1201px) and (max-height:850px) and (min-aspect-ratio:21/10) {
  .hero-media-inner {
    width: 100%;
    height: auto;
    align-self: center;
    position: relative;
    display: block;
    padding-right: calc(var(--hero-stats-width) + var(--hero-stats-gap));
  }
  .trust-row {
    --scroll-axis: vertical;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--hero-stats-width);
    margin-top: 0;
    min-height: 0;
    padding: 0 14px;
  }
  .trust-track {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    animation: home-auto-scroll-vertical 24s linear infinite;
    will-change: transform;
  }
  .trust-group,.trust-group[aria-hidden="true"] {
    width: 100%;
    height: auto;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .trust-stat,.trust-stat:first-child {
    width: auto;
    min-width: 0;
    height: 120px;
    min-height: 120px;
    padding: 0;
    border-left: 0;
    border-top: 1px solid rgba(23,34,29,.22);
    align-items: flex-start;
  }
  .trust-stat strong { font-size: clamp(17px,1.6vw,19px); line-height: 1.2; }
  .trust-stat span { margin-top: 3px; }
  .trust-row.scroll-strip--draggable { touch-action: pan-x pinch-zoom; }
}
/* Short-wide desktop: prefer fitting, but never shrink the media group more
   than 10% or remove comfortable padding just to pin the marquee on screen.
   When that is not enough, its natural height takes priority and we scroll. */
@media(min-width:1201px) and (max-height:850px) and (min-aspect-ratio:21/10) {
  .hero {
    --hero-stats-width: clamp(160px,10vw,200px);
    --hero-stats-gap: clamp(16px,1.3vw,24px);
    --hero-wide-padding: 28px;
    --hero-video-max-height: max(240px,calc(var(--hero-available-height) - var(--hero-wide-padding) * 2));
    grid-template-columns: 60% 40%;
  }
  .hero-copy,.hero-media {
    padding-block: var(--hero-wide-padding);
    gap: 0;
  }
  .hero-media-inner {
    width: clamp(90%,calc(var(--hero-video-max-height) * 16 / 9 + var(--hero-stats-width) + var(--hero-stats-gap)),100%);
    align-self: flex-start;
  }
  .hero-copy { padding-inline: clamp(24px,2.5vw,48px); }
  .hero-copy-inner {
    justify-content: space-between;
    height: auto;
    min-height: var(--hero-content-height);
    gap: clamp(12px,2svh,20px);
  }
  /* Readability follows column width, not the window's height. The copy's
     automatic height above lets the hero grow when the text needs room. */
  .hero h1 {
    font-size: clamp(32px,3.15vw,72px);
    font-size: clamp(32px,9cqw,72px);
    line-height: 1.08;
  }
  .hero-copy .eyebrow {
    font-size: 12px;
    letter-spacing: .04em;
    gap: 8px;
    white-space: normal;
  }
  .hero-copy .eyebrow:before {
    width: 18px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: calc(.825em - .5px);
  }
  .hero-intro { font-size: clamp(16px,1.1vw,18px); line-height: 1.55; }
  .hero-actions .button { font-size: 13px; padding: 13px 16px; }
}

/* Native scrolling remains available when automatic motion is disabled. */
@media(prefers-reduced-motion:reduce) {
  .trust-row,.marquee { overflow-x: auto; scrollbar-width: none; }
  .trust-row::-webkit-scrollbar,.marquee::-webkit-scrollbar { display: none; }
  .trust-track,.marquee-track { animation: none; }
  .trust-group[aria-hidden="true"],.marquee-group[aria-hidden="true"] { display: none; }
  .trust-stat:first-child { border-left: 0; }
}
@media(min-width:901px) and (max-width:1200px) and (prefers-reduced-motion:reduce),
      (min-width:901px) and (max-width:1440px) and (min-height:calc(27.3125vw + 510px)) and (prefers-reduced-motion:reduce),
      (min-width:1201px) and (max-height:850px) and (min-aspect-ratio:21/10) and (prefers-reduced-motion:reduce) {
  .trust-row { overflow-x: hidden; overflow-y: auto; }
  .trust-track { transform: none; will-change: auto; }
}

/* Video failure UI: no provider permissions or behavior are changed here. */
.video-backup-photo {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-frame[data-video-state="fallback"] .video-backup-photo { display: block; }
.video-frame [data-livid-player] { position: absolute; inset: 0; }
.video-recovery {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 12px 14px;
  border-radius: 5px;
  background: rgba(251,250,246,.97);
  color: var(--ink);
}
.video-recovery p { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.video-recovery>div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.video-recovery button,.video-recovery a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 11px;
  border: 0;
  border-radius: 4px;
  background: #3d5872;
  color: #fff;
  font: 600 12px "DM Sans",Arial,sans-serif;
  cursor: pointer;
  transition: background-color .2s;
}
.video-recovery button:hover,.video-recovery a:hover,.video-recovery button:focus-visible,.video-recovery a:focus-visible { background: #526f8c; }
.video-recovery[hidden] { display: none; }
@media(max-width:420px) {
  .video-recovery { left: 8px; right: 8px; bottom: 8px; padding: 9px 10px; }
  .video-recovery p { font-size: 12px; }
  .video-recovery>div { gap: 6px; }
  .video-recovery button,.video-recovery a { font-size: 12px; padding: 7px 9px; }
}