/* Hero composition: every visual is an independent transparent layer. */
.hero {
  min-height: 720px;
  background:
    radial-gradient(circle at 88% 32%, rgba(126, 0, 45, .58), transparent 38%),
    linear-gradient(110deg, #120105 0%, #250008 47%, #4a0017 100%);
}

.hero::before {
  background: linear-gradient(90deg, rgba(8, 0, 3, .9) 0%, rgba(20, 0, 7, .64) 45%, rgba(44, 0, 15, .08) 76%);
}

.hero-shade {
  background:
    radial-gradient(circle at 78% 74%, rgba(239, 8, 101, .13), transparent 30%),
    radial-gradient(circle at 72% 40%, transparent 0 30%, rgba(10, 1, 5, .12) 61%, rgba(10, 1, 5, .28) 100%);
}

.hero-inner {
  max-width: 1540px;
  min-height: 720px;
  padding: 132px 0 48px;
  grid-template-columns: .92fr 1.08fr;
  gap: 12px;
}

.hero h1 {
  max-width: 700px;
  font-family: var(--font-display);
  font-size: clamp(58px, 5.25vw, 88px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.hero .eyebrow {
  color: #d6b36b;
}

.hero-visual {
  position: relative;
  min-height: 540px;
  align-self: end;
  isolation: isolate;
}

.hero-visual::before,
.hero-visual::after,
.hero-visual .orb {
  display: none;
}

.hero-visual .hero-layer {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  margin: 0;
  transform: none;
  filter: drop-shadow(0 24px 28px rgba(9, 0, 3, .34));
  pointer-events: none;
  user-select: none;
}

.hero-ribbon {
  z-index: 1 !important;
  width: 130% !important;
  top: 4%;
  left: -12%;
  opacity: .72;
  filter: drop-shadow(0 16px 24px rgba(17, 0, 7, .28)) !important;
}

.hero-notebook {
  z-index: 2 !important;
  width: 117% !important;
  top: 17%;
  left: -12%;
}

.hero-mug,
.hero-steam {
  z-index: 3 !important;
  width: 66% !important;
  right: -1%;
  bottom: -1%;
}

.hero-mug {
  filter: drop-shadow(0 30px 26px rgba(8, 0, 3, .48)) !important;
}

.hero-steam {
  z-index: 4 !important;
  overflow: visible;
  filter: none !important;
  will-change: transform, opacity;
}

.steam-wisp {
  fill: none;
  stroke: url(#hero-steam-gradient);
  stroke-width: 34;
  stroke-linecap: round;
  filter: url(#hero-steam-soft);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.steam-wisp--one,
.steam-wisp--three {
  stroke-width: 28;
}

/* Gold logos at rest; original brand colours on hover. */
.clients {
  color: #3d1e22;
  background:
    radial-gradient(circle at 18% 0, rgba(198, 154, 76, .14), transparent 34%),
    linear-gradient(135deg, #fffaf1, #f3e5cf);
  border-top: 1px solid rgba(166, 116, 42, .16);
  border-bottom: 1px solid rgba(166, 116, 42, .16);
}

.clients .logo-viewport {
  width: 88%;
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
}

.clients .section-heading.light h2 { color: #5a0a28; }
.clients .section-heading.light > p:last-child { color: #66514f; }
.clients .section-heading .kicker { color: #a77527; }

.clients .logo-viewport::before {
  background: linear-gradient(90deg, #f8eddc, transparent);
}

.clients .logo-viewport::after {
  background: linear-gradient(-90deg, #f5e8d4, transparent);
}

.logo-set img {
  width: auto;
  max-width: 220px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.logo-set figure,
.logo-set figure:hover {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 150px;
  padding: 12px 20px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.logo-set {
  gap: 24px;
  padding-right: 24px;
}

.logo-track { animation-duration: 120s; }

.logo-set figure:hover img {
  filter: none;
  opacity: 1;
}

@media (max-width: 1100px) {
  .hero,
  .hero-inner { min-height: 700px; }
  .hero-inner { grid-template-columns: 1fr .95fr; }
  .hero-visual { min-height: 470px; }
  .hero-notebook { width: 123% !important; left: -17%; top: 20%; }
  .hero-mug,
  .hero-steam { width: 64% !important; right: -4%; bottom: 2%; }
}

@media (max-width: 820px) {
  .hero { min-height: auto; }
  .hero-inner {
    min-height: auto;
    padding: 124px 0 38px;
    grid-template-columns: 1fr;
  }
  .hero h1 { font-size: clamp(48px, 12vw, 68px); line-height: 1.06; }
  .hero-visual {
    width: min(100%, 680px);
    min-height: 430px;
    margin: 12px auto 0;
  }
  .hero-ribbon { width: 120% !important; left: -10%; top: 3%; }
  .hero-notebook { width: 110% !important; left: -8%; top: 18%; }
  .hero-mug,
  .hero-steam { width: 58% !important; right: 2%; bottom: 1%; }
}

@media (max-width: 560px) {
  .hero::before { background: linear-gradient(180deg, rgba(10, 1, 5, .94), rgba(30, 2, 13, .62)); }
  .hero h1 { font-size: 47px; line-height: 1.08; }
  .hero-visual { min-height: 300px; margin-top: 8px; }
  .hero-ribbon { width: 132% !important; left: -18%; top: 0; opacity: .58; }
  .hero-notebook { width: 117% !important; left: -11%; top: 19%; }
  .hero-mug,
  .hero-steam { width: 62% !important; right: -1%; bottom: 0; }
  .logo-set { gap: 18px; padding-right: 18px; }
  .logo-set figure,
  .logo-set figure:hover { width: auto; height: 125px; padding: 10px 16px; }
  .logo-set img { max-width: 180px; max-height: 82px; }
  .logo-track { animation-duration: 100s; }
}