/* ==========================================================================
   SVIND v2 - hro.css
   Reference adaptation: the arrodz.com hero composition, folded onto the
   EXISTING .core-lockup component rather than replacing it.

   Load order: tokens → base → components → core → foc → abt → arz → mpz → hro
   This file MUST load after core.css. Every rule here is scoped with .hro on
   the section, so `.core-band--lockup.hro` outranks the plain
   `.core-band--lockup` rules in core.css §4b without a single !important and
   without touching that file. Remove the class from the markup and the hero
   reverts to the stock core lockup exactly as documented there.

   WHAT THE REFERENCE ACTUALLY DOES (arrodz.com, hero + logo strip):
     · full-bleed photograph fills the first screen, no boxed frame
     · a large statement line top-left, a small lead paragraph top-right
     · the wordmark drawn as individual giant letters along the bottom edge,
       spanning the full content measure, with one letter replaced by a
       circular CTA
     · two small pill tags overlapping the top of the letter run
     · a white auto-scrolling client-logo strip abutting the hero

   WHAT WE KEEP FROM core. The one accent stays navy -- the reference's wine
   disc is their palette, not ours, and core §4 allows exactly one. The 50%
   radius on the CTA is already the single documented radius exception in the
   system (core.css §4b); the pills below are the only other rounded shapes
   here and they are the reference's own form, so they are declared against
   --hro-tag-radius rather than smuggled into --radius-*.

   ACCESSIBILITY CONTRACT - UNCHANGED FROM core.css §4b, DO NOT DRIFT:
     · .core-lockup__letters stays aria-hidden="true". It is the brand mark
       drawn large; a reader that spells S-V-I-N gets nothing.
     · the CTA is a SIBLING of that run, never a child. An aria-hidden
       element must never contain a focusable one.
     · the real accessible opener is the <h1>, which is also what the
       section's aria-labelledby points at.
   ========================================================================== */

.hro {
  /* Veil stops. Two rather than one: the photograph is bright at the top
     (sky and lit steel) and the white statement line needs contrast there,
     while the bottom has to go dark enough to carry the giant white letters
     without them dissolving into the plate. Matches the approach in
     abt.css, which solved the same problem over the team photo. */
  --hro-veil-top: rgba(12, 16, 22, 0.52);
  --hro-veil-mid: rgba(12, 16, 22, 0.38);
  --hro-veil-bottom: rgba(12, 16, 22, 0.74);

  --hro-tag-radius: 4px;
  --hro-gap-block: clamp(40px, 6vw, 88px);
}

/* --------------------------------------------------------------------------
   1. THE BAND
   .core-band--stage pins height: 959.18px and .core-band--lockup relaxes that
   to a clamped min-height. Neither is what the reference does: it fills the
   first screen and no more. Height is the viewport minus the sticky nav, so
   the logo strip below sits exactly at the fold like the reference.

   Two min-height declarations, not one. svh is the correct unit -- it does
   not jump when a mobile URL bar collapses -- but vh is the fallback for
   anything that does not know svh, and a browser that ignores the second
   line keeps the first.
   -------------------------------------------------------------------------- */

.core-band--lockup.hro {
  height: auto;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  /* Statement row pinned to the top, letter run pinned to the bottom, all
     slack in the middle -- the reference composition. .core-band--stage says
     flex-end, which would stack both at the bottom. */
  justify-content: space-between;
  padding-block-end: clamp(28px, 3.4vw, 52px);
  background-color: var(--color-ink);   /* seen only while the photo decodes */
  color: var(--color-text-on-dark);
}

/* --------------------------------------------------------------------------
   2. THE PLATE
   An <img>, not a background-image: this is the LCP element on the home page
   and a real element is what lets the markup carry fetchpriority, width and
   height. The band already sets overflow: hidden, so the crop is free.
   -------------------------------------------------------------------------- */

.hro__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hro__shot {
  display: block;
  width: 100%;
  height: 100%;
  /* The load hangs from the top of the frame, so bias the crop upward:
     `center` throws away the hook and the hanging steel on a short viewport. */
  object-fit: cover;
  object-position: 50% 32%;
}

/* The veil. Sits over the photograph and under every piece of type. A mask
   on flat colour rather than a painted gradient fill, same as abt.css --
   core §4's no-gradients rule is about decorative fills, and this is a
   legibility scrim over a photograph. */
.hro__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
    180deg,
    var(--hro-veil-top) 0%,
    var(--hro-veil-mid) 38%,
    var(--hro-veil-bottom) 100%
  );
}

/* --------------------------------------------------------------------------
   3. S3 FRAME - INVERTED
   core.css paints the label navy and the counter ink-muted, which is correct
   on gray and invisible on a dark plate. The band is not .core-band--navy so
   the inverted rules there do not reach it; these are its equivalents.
   -------------------------------------------------------------------------- */

.hro > .core-frame {
  z-index: 4;
}

.hro .core-frame__label {
  color: var(--color-surface);
}

.hro .core-frame__counter {
  color: rgba(255, 255, 255, 0.62);
}

.hro .core-frame__counter b {
  color: var(--color-surface);
}

.hro .core-frame__rule {
  background-color: rgba(255, 255, 255, 0.42);
}

/* --------------------------------------------------------------------------
   4. TOP ROW - statement left, lead right
   Two columns at the reference's proportion: the statement takes the wider
   share and the lead sits in the right column, ragged, capped in ch so the
   measure is governed by the text and not by the column (the rule tokens.css
   states for the whole page).
   -------------------------------------------------------------------------- */

.hro__top {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: start;
  gap: clamp(20px, 3vw, 56px);
  padding-block-start: clamp(8px, 1.4vw, 24px);
}

/* The real accessible opener, restyled to the reference's treatment: heavy,
   uppercase, tight. Still ONE of the three permitted visible sizes -- it
   takes display-l's slot, it does not add a fourth step. */
.hro .core-lockup__h1,
.hero-home-title {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.3vw, 52px);
  font-weight: var(--weight-bold);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--color-surface);
}

/* Arrodz layout helpers - mapped onto existing tokens */
.hero-home-content-wrapper { position: relative; z-index: 3; display: flex; flex-direction: column; gap: clamp(32px, 6vw, 88px); }
.hero-home-top-content { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 56px); align-items: start; }
.max-width-small { max-width: 32ch; }
.text-size-small { font-size: var(--text-body-s); line-height: var(--lh-body-s); }
.text-color-white { color: var(--color-text-on-dark); }
.button-group.hide-desktop { display: none; }
.hero-logo-wrapper { position: relative; z-index: 3; display: flex; flex-direction: column; gap: var(--space-4); }
.hero-a-wrapper { display: flex; gap: clamp(2px,0.6vw,12px); }
.hero-logo-letter { font-family: var(--font-display); font-weight: 700; line-height: 0.78; }
.hero-logo-cta { display: flex; align-items: center; }
.hero-logo-cta.is-o { gap: clamp(6px,1vw,16px); }
.hero-o-cta { display: inline-flex; align-items: center; background: var(--color-navy); color: var(--color-surface); text-decoration: none; }
.hero-o-cta-content { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-micro-caps); letter-spacing: var(--tracking-micro-caps); text-transform: var(--case-micro-caps); }
.icon-embed-xsmall { width: 18px; height: 18px; display: flex; }
.hero-h1 { margin: 0; font-size: var(--text-micro-caps); letter-spacing: var(--tracking-micro-caps); text-transform: var(--case-micro-caps); color: rgba(255,255,255,0.72); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-h1-span-1, .hero-h1-span-2 { display: inline; }

@media (max-width: 900px) { .hero-home-top-content { grid-template-columns: 1fr; } .button-group.hide-desktop { display: flex; } }

.hro__lead {
  grid-column: 2;
  max-width: 46ch;
  margin: 0;
  margin-inline-start: auto;
  font-size: var(--text-lead);
  font-weight: var(--weight-lead);
  line-height: var(--lh-lead);
  color: var(--color-text-on-dark);
}

/* --------------------------------------------------------------------------
   5. BOTTOM - TAGS + LETTER RUN
   -------------------------------------------------------------------------- */

.hro__bottom {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: clamp(220px, 32vw, 360px);
  margin-block-start: auto;
  padding-block: 0 clamp(32px, 6vw, 88px);
}

/* The pills. In the reference they overlap the caps of the letter run and
   step down-and-right from each other. The overlap is a negative block
   margin on the list rather than absolute positioning, so the letters cannot
   be overlapped by a pill that has outgrown its box at a different font
   size or in a translation. */
.hro__tags {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2px, 0.4vw, 6px);
  margin: 0 0 clamp(-52px, -3.4vw, -10px);
  padding: 0;
  list-style: none;
}

.hro__tag {
  display: block;
  padding: clamp(6px, 0.7vw, 10px) clamp(12px, 1.2vw, 18px);
  border-radius: var(--hro-tag-radius);
  font-size: var(--text-micro-caps);
  font-weight: var(--weight-micro-caps);
  letter-spacing: var(--tracking-micro-caps);
  text-transform: var(--case-micro-caps);
  line-height: var(--lh-micro-caps);
}

/* Surface pill first, navy pill second and indented -- the reference's
   two-step. Indent is a margin on the second item, so the pair reads as one
   staggered lockup rather than two centred chips. */
.hro__tag--light {
  background-color: var(--color-surface);
  color: var(--color-navy);
}

.hro__tag--dark {
  margin-inline-start: clamp(16px, 3.4vw, 74px);
  background-color: var(--color-navy);
  color: var(--color-surface);
}

/* THE LETTER RUN. The reference fills the whole content measure edge to
   edge, which a natural-width flex row cannot do: at 1920 the four glyphs
   plus the disc measure about 1100px inside a 1670px column, so the run
   would float in the middle with 280px of slack per side -- the exact
   failure mode tokens.css warns about for the page as a whole.

   So the run takes the full width and distributes the slack BETWEEN the
   glyphs. `flex: 1` on the letters plus space-between on both levels means
   the S starts on the band's shoulder and the disc ends on it, at every
   width, with no magic numbers. */
.hro .core-lockup__wordmark {
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.hro .core-lockup__letters {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 8px;
}

.hro .core-lockup__letter {
  font-size: clamp(64px, 18.5vw, 300px);
  line-height: 0.78;
  letter-spacing: -0.04em;
  /* White on the plate, not navy: the letters are the composition's mass and
     they sit on the darkest part of the veil. */
  color: var(--color-surface);
}

/* D plain solid hero - no hole, same size, hidden glyph */
.hro .core-lockup__cta-letter {
  width: auto;
  height: auto;
  padding-inline: 0.08em;
  font-size: clamp(64px, 18.5vw, 300px);
  line-height: 0.78;
  transform: none;
  color: transparent;
  opacity: 0;
  pointer-events: none;
}

.hro .core-lockup__cta {
  flex: none;
  width: auto;
  min-width: var(--d-size-closed);
  min-height: var(--d-height);
  padding: 0;
  overflow: hidden;
  transition: min-width var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-radius var(--dur-base) var(--ease-out);
}

/* Litter fix - arrodz hero uses icon-embed-xsmall 20x20 inside hero-o-cta-content, hide outer core 18x16 arrow in hero to keep one container */
.hro .core-lockup__cta-arrow { display: none; }

.hro .core-lockup__cta:hover,
.hro .core-lockup__cta:focus-visible {
  min-width: var(--d-size-open);
  border-radius: 0 clamp(28px, 5vw, 84px) clamp(28px, 5vw, 84px) 0;
}

.hro .core-lockup.is-cta-open .core-lockup__cta {
  min-width: var(--d-size-open);
  border-radius: 0 clamp(28px, 5vw, 84px) clamp(28px, 5vw, 84px) 0;
  background-color: var(--color-navy);
  transform: none;
  justify-content: flex-end;
  padding-inline-end: clamp(18px, 2vw, 30px);
}

/* plain D alignment - gap 8 only, SVIND same format, D pill right-aligned like screenshot */
div.hero-logo-cta.core-lockup__wordmark {
  row-gap: 8px;
  column-gap: 8px;
}

.hro .core-lockup__cta:focus-visible {
  outline-color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   6. ENTRANCE
   Extends the existing .is-armed / .is-in pair from core.css §4b to the two
   elements this file adds. Opt-IN exactly as documented there: the finished
   state is the CSS default and site.js only arms on the path where it will
   also release. If the script never runs, the hero reads as finished copy.
   initHeroLockup needs no change -- it toggles classes on .core-lockup and
   knows nothing about which children respond.
   -------------------------------------------------------------------------- */

.hro .core-lockup.is-armed .hro__lead,
.hro .core-lockup.is-armed .hro__tags {
  opacity: 0;
  transform: translateY(22px);
}

.hro .core-lockup.is-armed.is-in .hro__lead,
.hro .core-lockup.is-armed.is-in .hro__tags {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

/* Staggered behind the h1's own 90ms so the row reads top-down. */
.hro .core-lockup.is-armed.is-in .hro__lead {
  transition-delay: 150ms;
}

.hro .core-lockup.is-armed.is-in .hro__tags {
  transition-delay: 210ms;
}

.hro .core-lockup--static .hro__lead,
.hro .core-lockup--static .hro__tags {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces with --static, matching core.css: if the script never
     runs, the media query still guarantees the finished state. */
  .hro .hro__lead,
  .hro .hro__tags {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   7. THE LOGO STRIP UNDER THE HERO
   The reference puts its client strip on WHITE, immediately below the hero,
   as the closing element of the first screen. core.css paints
   .core-band--marquee on --color-canvas, which is correct for the strip in
   its old position mid-page and wrong directly under a dark plate: gray on
   near-black reads as a third band rather than as the hero's own footer.

   Scoped to the marquee that DIRECTLY FOLLOWS the hero, so the selector
   describes the composition instead of needing a second class in the markup,
   and any other marquee on any other page keeps the core fill.
   -------------------------------------------------------------------------- */

.hro + .logo-slider-section {
  background-color: var(--color-surface);
  padding-block: clamp(26px, 2.6vw, 40px);
  padding-inline: var(--band-inset);
}

.logo-slider-section {
  background-color: var(--color-surface);
  padding-block: clamp(26px, 2.6vw, 40px);
  padding-inline: var(--band-inset);
}

.logo-slider-component .splide__list { align-items: center; }

/* Logo slider moves slowly - tokenized */
.logo-slider .splide__list {
  width: max-content;
  animation: core-marquee-scroll var(--dur-marquee) linear infinite;
}

.logo-slider .splide__list:hover {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   8. NARROW
   Inlined breakpoint numbers, per the tokens.css note that media queries
   must not reference --bp-*.
   -------------------------------------------------------------------------- */

/* The two-column top row cannot hold a 22ch statement and a 46ch lead side
   by side much under 900px. */
@media (max-width: 900px) {
  .hro__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .hro__lead {
    grid-column: 1;
    max-width: 52ch;
    margin-inline-start: 0;
  }
}

/* Below 640px core.css stacks .core-lockup__wordmark into a column and drops
   the letter clamp so four glyphs fit 360px. That is the right call and this
   file must not fight it -- but `flex: 1` and space-between are meaningless
   once the axis is vertical, so both are released and the run goes back to
   its natural width, left-aligned under the tags. */
@media (max-width: 640px) {
  .core-band--lockup.hro {
    /* A phone viewport minus the nav is short, and the tags, statement, lead
       and stacked wordmark together need more than that. Let it grow. */
    min-height: 0;
    padding-block-end: clamp(32px, 8vw, 48px);
  }

  .hro .core-lockup__wordmark {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .hro .core-lockup__letters {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 8px;
  }

  .hro .core-lockup__letter,
  .hro .core-lockup__cta-letter {
    font-size: clamp(48px, 18vw, 88px);
  }

  .hro .core-lockup__cta-letter {
    width: auto;
    height: auto;
  }

  /* The negative overlap is tuned to a 300px cap. At phone sizes the letters
     are a fifth of that and a -52px pull would drag the pills through them. */
  .hro__tags {
    margin-block-end: var(--space-4);
  }

  .hro__bottom {
    margin-block-start: clamp(32px, 9vw, 56px);
  }

  .hro .core-lockup__cta {
    width: auto;
    height: auto;
    transform: none;
  }

  .hro .core-lockup__cta-letter {
    width: auto;
    height: auto;
    transform: none;
  }

  .hro .core-lockup.is-cta-open .core-lockup__cta {
    width: auto;
    height: auto;
    transform: none;
  }

  /* VisBug desktop nudges off on phone - stacked wordmark would clip */
  div.hero-logo-cta.core-lockup__wordmark,
  span.core-lockup__letters.hero-a-wrapper > span:nth-of-type(2),
  span.core-lockup__letters.hero-a-wrapper > span:nth-of-type(3),
  span.core-lockup__letters.hero-a-wrapper > span:nth-of-type(4),
  a.core-lockup__cta.hero-o-cta.w-inline-block {
    row-gap: initial;
    column-gap: initial;
    transform: none;
  }
}

/* Loader narrow - keep SVIND word stacked readable on phone */
@media (max-width: 640px) {
  .site-loader__letter {
    font-size: clamp(48px, 18vw, 88px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader,
  .site-loader__letter,
  .site-loader__tag {
    transition: none !important;
  }
}