/* ============================================================
   Arche Advisory — hero
   v4.0

   The supplied React hero, followed as specified, with the three
   listed exceptions:

     1. sage accent instead of the yellow-green
     2. Permanent Marker for the hero text
     3. marquee content summarised from the Evidence section

   Structure, as the component sets it:
     section        h-screen, flex column, items-start, justify-end
     background     bg-cover bg-center + a black/40 scrim
     top block      max-w-4xl, the marquee (avatar stack removed v4.1)
     bottom block   two columns, aligned to their baseline
     left           h1 + a square button with a divided arrow box
     right          italic paragraph, right-aligned from sm up

   Tailwind values resolved: size-13 = 52px, -space-x-3 = -12px,
   border-2 = 2px, gap-6 = 24px, pb-16/24/32 = 64/96/128px,
   px-4/8/16 = 16/32/64px, max-w-4xl = 896px, text-4xl..7xl =
   36/48/60/72px, [--duration:30s], [--gap:2rem].
   ============================================================ */

.hm {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ---- Background: the image from the component, plus black/40 ---- */

.hm-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-image: url("https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a");
}
.hm-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* ---- Top block: avatars over the marquee ---- */

.hm-top {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 896px;          /* max-w-4xl */
  padding-inline: 16px;
  color: #fff;
}
@media (min-width: 640px) { .hm-top { padding-inline: 32px; } }
@media (min-width: 1024px) { .hm-top { padding-inline: 64px; } }

.hm-top-stack > * + * { margin-top: 16px; }   /* space-y-4 */

/* The avatar stack was removed in v4.1; its rules went with it. */

/* ---- Marquee ---- */

.hm-marquee {
  --duration: 30s;
  --gap: 2rem;
  position: relative;
  display: flex;
  overflow: hidden;
  gap: var(--gap);
  border-block: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.3);
  padding-block: 8px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hm-marquee .track {
  display: flex;
  flex: none;
  gap: var(--gap);
  min-width: 100%;
  align-items: center;
  animation: hm-scroll var(--duration) linear infinite;
}
.hm-marquee:hover .track { animation-play-state: paused; }   /* pauseOnHover */
@keyframes hm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--gap))); }
}

.hm-stat { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.hm-stat .v {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--sage-bright);          /* text-primary, exception 1 */
}
.hm-stat .l {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.hm-stat .e { font-size: 16px; }

/* ---- Bottom block ---- */

.hm-bottom {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-inline: 16px;
  padding-bottom: 64px;
}
@media (min-width: 640px) { .hm-bottom { padding-inline: 32px; padding-bottom: 96px; } }
@media (min-width: 1024px) { .hm-bottom { padding-inline: 64px; padding-bottom: 128px; } }

.hm-cols { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 640px) { .hm-cols { flex-direction: row; align-items: flex-end; } }
.hm-left, .hm-right { width: 100%; }
@media (min-width: 640px) { .hm-left, .hm-right { width: 50%; } }
.hm-left > * + * { margin-top: 16px; }

/* ---- Title — Nevera (v4.1) ----
   The component sets text-4xl..lg:text-7xl (36..72px). Nevera is
   caps-only and measured 30% WIDER than Permanent Marker, so those
   sizes no longer hold. Bottom-anchored content measured against
   the viewport:

     3440x1440   72px   3 lines    +963px headroom
     1920x1080   72px   5 lines    +452px
     1600x900    72px   7 lines    +121px
     1440x900    72px   8 lines     +45px
     1280x800    72px   8 lines     -55px   OVERFLOWS

   A 1280x800 laptop loses the bottom of the button. The ladder is
   rebuilt so every common viewport clears:

     >=1920  72px    >=1440  68px    >=1200  60px
     >=1024  50px    >=768   50px    >=640   42px    base 32px

   Re-measured, the tightest case is now 1024x768 with +79px of
   headroom. Large screens still get the component's 72px. */
.hm-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: none;
}
@media (min-width: 640px)  { .hm-title { font-size: 42px; } }
@media (min-width: 768px)  { .hm-title { font-size: 50px; } }
@media (min-width: 1024px) { .hm-title { font-size: 50px; } }
@media (min-width: 1200px) { .hm-title { font-size: 60px; } }
@media (min-width: 1440px) { .hm-title { font-size: 68px; } }
@media (min-width: 1920px) { .hm-title { font-size: 72px; } }
.hm-title .ac { color: var(--sage-bright); }   /* text-primary, exception 1 */
.hm-title .wt { color: #fff; }

/* ---- Button: rounded-none, py-0, pr-0, divided arrow box ---- */

.hm-btn {
  display: inline-flex;
  align-items: stretch;
  border-radius: 0;
  padding: 0 0 0 20px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  background: var(--sage-bright);      /* bg-primary, exception 1 */
  color: #000;                         /* text-black, as specified */
  border: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hm-btn:hover { background: #B6CEB8; }
.hm-btn:focus-visible { outline: 2px solid var(--sage-bright); outline-offset: 3px; }
.hm-btn .lbl { display: inline-flex; align-items: center; padding-block: 14px; }
.hm-btn .ic {
  display: inline-flex;
  align-items: center;
  border-left: 1px solid #737373;      /* border-neutral-500 */
  padding: 12px;                        /* p-3 */
  margin-left: 12px;
}
.hm-btn .ic svg { width: 20px; height: 20px; display: block; }

/* ---- Right column ---- */

.hm-right p {
  /* v4.2 — Playfair Display italic, per instruction. Archivo has a
     true italic but Playfair's is the one the design system already
     uses for pull quotes, so the hero now rhymes with them. */
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sage-bright);           /* text-primary, exception 1 */
  margin: 0;
}
@media (min-width: 640px) { .hm-right p { text-align: right; } }
/* Playfair sets smaller than Archivo at the same size, so the
   steps go up a little to hold the same optical weight. */
@media (min-width: 768px) { .hm-right p { font-size: 27px; line-height: 1.42; } }

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .hm-marquee .track { animation: none; }
  .hm-marquee { overflow-x: auto; }
}

/* ---- Print ---- */

@media print {
  .hm { height: auto; padding-block: 40px; }
  .hm-bg, .hm-marquee { display: none; }
  .hm-title, .hm-right p { color: #000; }
  .hm-btn { background: none; color: #000; border: 1px solid #000; }
}