/* Ki — Sustainability Hero
   Source: Ki Sustainability.html lines 73–96. All selectors scoped under
   .ki-scope .ki-sustain-hero. */

.ki-scope .ki-sustain-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
}

.ki-scope .ki-sustain-hero .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(12,16,20,0.5) 0%, rgba(12,16,20,0.12) 38%, rgba(12,16,20,0.72) 100%),
    linear-gradient(160deg, #2a2620, #161310 60%, #0c0a08);
}
.ki-scope .ki-sustain-hero .hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

.ki-scope .ki-sustain-hero .hero-art-wrap { position: absolute; inset: 0; z-index: 0; opacity: 0.95; }
.ki-scope .ki-sustain-hero .hero-art-wrap svg,
.ki-scope .ki-sustain-hero .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }

.ki-scope .ki-sustain-hero .hero-overlay { position: absolute; inset: 0; z-index: 1; }

.ki-scope .ki-sustain-hero .hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.ki-scope .ki-sustain-hero .hero-eyebrow-bar {
  position: absolute; top: 96px; left: 0; right: 0; z-index: 5;
  text-align: center; color: rgba(255,255,255,0.72);
  font-family: var(--ki-sans); font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
}

.ki-scope .ki-sustain-hero .hero-content {
  position: relative; z-index: 5;
  max-width: 1280px; margin: 0 auto; padding: 0 48px; width: 100%;
  /* Horizontal offset is driven by the "Content horizontal offset" Elementor
     control (Style → Layout & spacing); default −60px desktop / 0 tablet+mobile. */
}

.ki-scope .ki-sustain-hero .hero-tag {
  font-family: var(--ki-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.8);
  margin-bottom: 30px; display: flex; align-items: center; gap: 14px;
}
.ki-scope .ki-sustain-hero .hero-tag::before {
  content: ""; width: 48px; height: 1px; background: rgba(255,255,255,0.55);
}

.ki-scope .ki-sustain-hero h1 {
  font-family: var(--ki-serif); font-weight: 400;
  font-size: clamp(60px, 9vw, 132px); line-height: 0.98; letter-spacing: -0.01em;
  margin: 0; max-width: 11ch; color: #fff;
}
.ki-scope .ki-sustain-hero h1 em { font-family: var(--ki-serif-italic); font-style: italic; color: #E8D9C0; }

/* Subheadline — a short, slightly bolder line directly under the big heading. */
.ki-scope .ki-sustain-hero .hero-subhead-lead {
  font-family: var(--ki-sans); font-weight: 600;
  font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; letter-spacing: 0.005em;
  color: rgba(255,255,255,0.94); margin: 22px 0 0; max-width: 40ch;
}

/* 3-part subhead — muted sans opening + closing, with a larger serif cream
   emphasis line between them (mirrors the Slow Intro is-emphasis treatment). */
.ki-scope .ki-sustain-hero .hero-sub-group { margin: 28px 0 0; max-width: 52ch; }
/* Per-part padding below is driven by the "Subhead — padding below each part"
   Elementor control (Style → Layout & spacing); base = 0 so it never doubles. */
.ki-scope .ki-sustain-hero .hero-sub-group > p { padding-bottom: 0; }

.ki-scope .ki-sustain-hero .hero-sub {
  font-family: var(--ki-sans); font-size: clamp(17px, 1.5vw, 19px);
  color: rgba(255,255,255,0.78); margin: 0; line-height: 1.6; font-weight: 400;
}

.ki-scope .ki-sustain-hero .hero-sub-em {
  font-family: var(--ki-serif); font-weight: 400; font-style: normal;
  font-size: clamp(23px, 2.3vw, 30px); line-height: 1.32; letter-spacing: -0.005em;
  color: #E8D9C0; margin: 0;
}

.ki-scope .ki-sustain-hero .hero-foot {
  margin-top: 56px; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}

.ki-scope .ki-sustain-hero .btn-paper {
  display: inline-flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 30px;
  background: #fff; color: #000;
  font-family: var(--ki-sans); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  border-radius: 2px; border: 1px solid #fff;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.ki-scope .ki-sustain-hero .btn-paper:hover { background: transparent; color: #fff; transform: translateY(-1px); }
.ki-scope .ki-sustain-hero .btn-paper .ar { font-family: var(--ki-serif); font-size: 18px; letter-spacing: 0; transition: transform 220ms ease; }
.ki-scope .ki-sustain-hero .btn-paper:hover .ar { transform: translateX(4px); }

.ki-scope .ki-sustain-hero .hero-scroll {
  color: rgba(255,255,255,0.6); font-family: var(--ki-sans); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; text-align: right; display: flex; flex-direction: column; align-items: flex-end;
  gap: 14px; font-weight: 500;
}
.ki-scope .ki-sustain-hero .hero-scroll .line {
  display: block; width: 1px; height: 48px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
  margin-left: auto; animation: kiSustainHeroPulse 2.4s ease-in-out infinite;
}
@keyframes kiSustainHeroPulse { 50% { opacity: 0.4; height: 60px; } }

@media (max-width: 1100px) {
  .ki-scope .ki-sustain-hero .hero-foot { flex-direction: column; align-items: flex-start; }
  .ki-scope .ki-sustain-hero .hero-scroll { display: none; }
}

/* ───── Mobile (≤760px) — declutter the stack ─────
   On small screens the old layout felt cramped: a 60px headline, a wide
   letter-spaced eyebrow that wrapped, a tag with the same problem, and tight
   spacing all stacked at the very bottom. This tier scales the type down,
   relaxes the letter-spacing, gives each block more vertical rhythm, and
   lets the hero size to its content instead of forcing a full 100vh.        */
@media (max-width: 760px) {
  .ki-scope .ki-sustain-hero {
    min-height: auto;
    padding: 150px 0 64px;   /* room for the absolute eyebrow bar at the top */
    align-items: flex-start;
  }
  .ki-scope .ki-sustain-hero .hero-content { padding: 0 24px; }

  .ki-scope .ki-sustain-hero .hero-eyebrow-bar {
    top: 64px; padding: 0 24px;
    font-size: 10px; letter-spacing: 0.26em; line-height: 1.5;
  }

  .ki-scope .ki-sustain-hero .hero-tag {
    font-size: 12px; letter-spacing: 0.22em; gap: 12px; margin-bottom: 22px;
  }
  .ki-scope .ki-sustain-hero .hero-tag::before { width: 28px; }

  .ki-scope .ki-sustain-hero h1 {
    font-size: clamp(40px, 12vw, 56px); line-height: 1.04; max-width: 14ch;
  }

  .ki-scope .ki-sustain-hero .hero-subhead-lead {
    font-size: 18px; margin-top: 18px; max-width: none;
  }

  .ki-scope .ki-sustain-hero .hero-sub-group { margin-top: 22px; max-width: none; }
  .ki-scope .ki-sustain-hero .hero-sub { font-size: 16px; line-height: 1.62; }
  .ki-scope .ki-sustain-hero .hero-sub-em { font-size: clamp(20px, 6vw, 25px); }

  .ki-scope .ki-sustain-hero .hero-foot { margin-top: 38px; gap: 24px; }
  .ki-scope .ki-sustain-hero .btn-paper { height: 52px; width: 100%; justify-content: center; }
}

/* Very small phones — trim the headline a touch more. */
@media (max-width: 400px) {
  .ki-scope .ki-sustain-hero h1 { font-size: clamp(36px, 11vw, 44px); }
  .ki-scope .ki-sustain-hero .hero-eyebrow-bar { letter-spacing: 0.18em; }
}