/* ==========================================================================
   VIVID — HOME
   Sections that only the homepage uses. Everything reusable lives in
   components.css. Logical properties only — the whole page mirrors in RTL.
   ========================================================================== */

/* ==========================================================================
   HERO — a SPLIT hero. Oversized headline + two CTAs on one side; a stacked,
   overlapping packaging composition sitting on a solid red block on the other.
   Deliberately NOT a bento grid.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.6rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4.5vw, 6rem);
}

/* A hard-edged ink wedge bleeding off the far edge. Flat, never blurred. */
.hero::before {
  content: '';
  position: absolute;
  inset-block-start: -140px;
  inset-inline-end: -160px;
  inline-size: 460px;
  block-size: 460px;
  background: var(--surface-sunken);
  border-radius: var(--r-xl);
  transform: rotate(24deg);
  pointer-events: none;
  z-index: 0;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* ---- copy ---------------------------------------------------------------- */
.hero__copy { min-inline-size: 0; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--invert-bg);
  color: var(--invert-fg);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  margin-block-end: var(--sp-6);
}
.hero__badge-dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--red-brand);
  flex: none;
}

.hero__h1 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text);
  text-wrap: balance;
}
/* The second line is knocked out in red — flat colour, no gradient. */
.hero__h1 span { display: block; }
.hero__h1 .hero__hl {
  position: relative;
  display: inline-block;
  color: var(--red-500);
}
/* A solid red rule underneath it, drawn as a block, not an underline. */
.hero__hl::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.06em;
  block-size: 5px;
  background: var(--red-brand);
  border-radius: 3px;
  transform: scaleX(0);
  /* Transforms have no logical properties — mirror the origin explicitly so the
     rule always draws OUT from the start edge of the line. */
  transform-origin: var(--hl-origin, left) center;
  animation: hlIn var(--dur-slow) var(--ease-out) 260ms forwards;
}
[dir="ltr"] .hero__hl::after { --hl-origin: left; }
[dir="rtl"] .hero__hl::after { --hl-origin: right; }
@keyframes hlIn { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__hl::after { transform: scaleX(1); animation: none; }
}

.hero__sub {
  margin-block-start: var(--sp-6);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-muted);
  max-inline-size: 48ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-8);
}
/* On a phone the two CTAs stack full-width rather than sitting ragged. */
@media (max-width: 479px) {
  .hero__actions .btn { flex: 1 1 100%; }
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: var(--bw) solid var(--line);
}

/* ---- art: the stacked composition ---------------------------------------- */
.hero__art {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  min-inline-size: 0;
}
@media (min-width: 560px) and (max-width: 959px) {
  .hero__art { max-inline-size: 520px; margin-inline: auto; }
}

/* THE solid colour block — hard-edged, sitting behind the photographs so it
   reads as a printed offset, never as a glow. */
.hero__block {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 54%;
  block-size: 50%;
  background: var(--red-brand);   /* THE brand block — no text sits on it */
  border-radius: var(--r-lg);
  z-index: 0;
}
.hero__shot {
  position: absolute;
  overflow: hidden;
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  background: var(--media-bed);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-4) var(--ease);
}
.hero__shot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* main — the doypack, the star of the shelf */
.hero__shot--a {
  inset-block-start: 10%;
  inset-inline-start: 0;
  inline-size: 62%;
  block-size: 78%;
  z-index: 2;
}
/* top-end — sits ON the red block, leaving it as a hard frame */
.hero__shot--b {
  inset-block-start: 6%;
  inset-inline-end: 4%;
  inline-size: 36%;
  block-size: 34%;
  z-index: 3;
}
/* bottom-end — overlaps the main shot */
.hero__shot--c {
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 47%;
  block-size: 42%;
  z-index: 3;
}
.hero__art:hover .hero__shot--a { transform: translate(-4px, -4px); }
.hero__art:hover .hero__shot--b { transform: translate(4px, -4px); }
.hero__art:hover .hero__shot--c { transform: translate(4px, 4px); }
[dir="rtl"] .hero__art:hover .hero__shot--a { transform: translate(4px, -4px); }
[dir="rtl"] .hero__art:hover .hero__shot--b { transform: translate(-4px, -4px); }
[dir="rtl"] .hero__art:hover .hero__shot--c { transform: translate(-4px, 4px); }

/* A caption pinned to each shot, so a reviewer knows what they are looking at. */
.hero__cap {
  position: absolute;
  inset-block-end: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: 2;
  padding: 4px var(--sp-2);
  font-size: clamp(0.5rem, 0.42rem + 0.3vw, 0.6875rem);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink-900);
  border-radius: var(--r-xs);
  max-inline-size: calc(100% - var(--sp-4));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero__cap--top {
  inset-block-end: auto;
  inset-block-start: var(--sp-2);
}

/* The floating proof chip. */
.hero__chip {
  position: absolute;
  inset-block-end: 6%;
  inset-inline-start: -2%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-md);
  box-shadow: var(--hard-ink-sm);
  max-inline-size: 62%;
}
.hero__chip-n {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--red-500);
  flex: none;
}
.hero__chip-l {
  font-size: clamp(0.5625rem, 0.48rem + 0.35vw, 0.75rem);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--text-muted);
  min-inline-size: 0;
}


/* ==========================================================================
   STATS BAND — the first INK band. The rhythm starts here.
   ========================================================================== */
.statband { padding-block: var(--section-y-tight); }
.statband__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-block-end: var(--sp-8);
}
.statband__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  /* It sits ON the band, so it follows the band's text token — not a raw white.
     (The band is the one surface whose luminance moves between the themes.) */
  color: var(--text-on-ink);
  letter-spacing: var(--ls-head);
  max-inline-size: 24ch;
}


/* ==========================================================================
   TICKER — the brands we print for. Proof, not decoration.
   ========================================================================== */
.ticker {
  padding-block: var(--sp-8);
  border-block-end: var(--bw-hair) solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.ticker__label {
  display: block;
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-block-end: var(--sp-6);
}


/* ==========================================================================
   CATEGORIES — the real hierarchy: 4 roots (one of them oversized, carrying
   its 7 children as chips) + a quote tile, then a rail of the 7 structures.
   ========================================================================== */
.cats {
  display: grid;
  gap: var(--rail-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .cats { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 250px; }
  .cats__hero { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1024px) {
  .cats { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; }
  .cats__hero { grid-column: span 2; grid-row: span 2; }
}
/* Below 620 everything is a single stacked column. */
@media (max-width: 619px) {
  .cats > * { min-block-size: 260px; }

  /* The tall card is the one place this theme could hurt itself. Its content
     (badge + title + 3-line desc + 7 chips + VIEW) was sized for the 420px+
     desktop tile, where the copy sits in the 0.78–0.92 end of the scrim. Shrink
     the tile without touching the content and the text block gets shoved up
     into the transparent top of that gradient — over the blown-out studio
     backdrop of the doypack shot it measured 2.11:1 (title) and 1.62:1 (desc).
     Two moves, no compromise on the image-dominant brief: */
  .cats__hero { min-block-size: 460px; }

  /* 1. Drop the child chips. They are pure redundancy here — the same 7
        structures render as a rail immediately below this grid — and they were
        what pushed the copy off the scrim in the first place. */
  .cats__hero .ccard__kids { display: none; }

  /* 2. Give the copy a hard ink plinth instead of a soft fade. Vivid's device
        IS the dark band, so a crisp edge is more on-brand than a long gradient:
        the bottom half is near-solid ink the text can never fall off, the top
        half stays pure photograph. */
  .cats__hero.ccard--tall::after {
    background: linear-gradient(to top,
      rgba(8, 9, 13, 0.97) 0%,
      rgba(8, 9, 13, 0.96) 50%,
      rgba(8, 9, 13, 0.80) 58%,
      rgba(8, 9, 13, 0.30) 80%,
      rgba(8, 9, 13, 0.12) 100%);
  }
}

/* The conversion tile that closes the 2×2 grid. */
.cats__quote {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--invert-bg);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.cats__quote:hover { transform: translate(-4px, -4px); box-shadow: var(--hard-red); }
/* The hard-edged offset block behind the copy. It is a shade OF the invert
   block it sits on, not an ink colour — an ink shape on the LIGHT invert tile
   (which is what --invert-bg becomes in dark) reads as a hole punched through
   the card and fights the body copy. --invert-bg-h is one step from the block
   in BOTH themes, so the shape stays a whisper either way. */
.cats__quote::before {
  content: '';
  position: absolute;
  inset-block-end: -40%;
  inset-inline-end: -25%;
  inline-size: 200px;
  block-size: 200px;
  background: var(--invert-bg-h);
  border-radius: var(--r-lg);
  transform: rotate(24deg);
}
.cats__quote > * { position: relative; z-index: 1; }
.cats__quote-title {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: 1.2;
  color: var(--invert-fg);
}
.cats__quote-body {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  /* It sits ON the invert block, so it must follow it: white type in light,
     ink type in dark. A fixed grey vanishes on one of the two. */
  color: var(--invert-fg);
  opacity: 0.74;
}

/* structures rail */
.structures { margin-block-start: var(--sp-14); }
.structures__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-block-end: var(--sp-6);
  padding-block-start: var(--sp-10);
  border-block-start: var(--bw) solid var(--line-bold);
}
.structures__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.structures__sub {
  margin-block-start: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}


/* ==========================================================================
   WORK — the second INK band. The packaging photography pops hard here;
   this is the section that sells the theme.
   ========================================================================== */
.work { position: relative; overflow: hidden; }
/* A single oversized ghost numeral, flush to the far edge. */
.work::before {
  content: '';
  position: absolute;
  inset-block-start: -120px;
  inset-inline-start: -120px;
  inline-size: 380px;
  block-size: 380px;
  background: var(--surface-ink-soft);
  border-radius: var(--r-xl);
  transform: rotate(24deg);
  pointer-events: none;
}
.work > * { position: relative; z-index: 1; }
.work__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-start: var(--sp-12);
  padding-block-start: var(--sp-10);
  border-block-start: var(--bw-hair) solid var(--line-on-ink);
}
.work__foot p {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  /* This line lives on the INK BAND, so it MUST take the band's muted token.
     --text-subtle is scaled for the PAGE: on the dark-mode band (#262C3C) it
     measured 4.31:1 at 14px — a real AA failure. --text-on-ink-muted is 7.4:1
     on the band in both themes. */
  color: var(--text-on-ink-muted);
}


/* ==========================================================================
   CAPABILITIES
   ========================================================================== */
.caps {
  display: grid;
  gap: var(--rail-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}


/* ==========================================================================
   PROCESS — 8 steps, hairline-gridded so they read as one machine.
   ========================================================================== */
.process__wrap {
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
}


/* ==========================================================================
   NETWORK — the agent strip. Eight monograms, dense, on one line.
   ========================================================================== */
.network {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.network__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  /* Logical padding: the avatar hugs the start edge, the label gets air at the
     end edge — and it mirrors itself in RTL with no override. */
  padding-block: var(--sp-2);
  padding-inline-start: var(--sp-2);
  padding-inline-end: var(--sp-4);
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.network__item:hover {
  border-color: var(--line-bold);
  transform: translate(-2px, -2px);
  box-shadow: var(--hard-red-sm);
}
.network__city {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  line-height: 1.2;
}
.network__region {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}


/* ==========================================================================
   CLOSING CTA — a full-bleed RED band. The only funnel on the site.
   ========================================================================== */
.close-cta {
  position: relative;
  overflow: hidden;
  /* The ground here is the RED band — theme-independent — so anything drawn
     against it is theme-independent too. This is the one legitimate place to
     pin a raw ramp value: a hard ink block on red, in light AND dark. */
  --block-on-red: var(--ink-950);
}
.close-cta::before,
.close-cta::after {
  content: '';
  position: absolute;
  background: var(--red-600);
  border-radius: var(--r-xl);
  transform: rotate(24deg);
  pointer-events: none;
}
.close-cta::before {
  inset-block-start: -30%;
  inset-inline-end: -8%;
  inline-size: 420px;
  block-size: 420px;
}
.close-cta::after {
  inset-block-end: -45%;
  inset-inline-start: -6%;
  inline-size: 300px;
  block-size: 300px;
}
.close-cta > * { position: relative; z-index: 1; }

.close-cta__grid {
  display: grid;
  gap: var(--sp-10);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .close-cta__grid { grid-template-columns: 1.25fr 1fr; gap: var(--sp-16); }
}
.close-cta__title {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--text-on-red);
}
.close-cta__body {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relax);
  color: var(--text-on-red);
  max-inline-size: 46ch;
}
.close-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-8);
}
.close-cta__note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-red);
}
.close-cta__note svg { inline-size: 15px; block-size: 15px; flex: none; }

/* The card that holds the direct lines.

   THE BLOCK. --hard-ink is built on --block, which FLIPS to a bright graphite
   in dark — correct when the ground is the near-black PAGE (a black block on a
   black page is invisible), but wrong here: this card's ground is the RED BAND,
   and the red band is identical in both themes. Following --block turned the
   offset into a pale grey smudge on the red in dark mode. On red, the ink block
   reads hard in BOTH themes, so it is pinned to the ink and does not flip. */
.close-cta__card {
  padding: var(--sp-6);
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 0 var(--block-on-red);
}
.close-cta__card-title {
  font-family: var(--font-head);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-block-end: var(--sp-4);
}
.close-cta__line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-block-start: var(--bw-hair) solid var(--line);
  transition: color var(--t-fast);
}
.close-cta__line:first-of-type { border-block-start: 0; }
.close-cta__line:hover { color: var(--brand-text); }
.close-cta__line svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  color: var(--red-500);
}
.close-cta__line-k {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.close-cta__line-v {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  color: var(--text);
  letter-spacing: var(--ls-tight);
}
.close-cta__line:hover .close-cta__line-v { color: var(--brand-text); }