/* ==========================================================================
   Parklane — Homepage sections
   ========================================================================== */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--obsidian { background: var(--c-obsidian); color: var(--c-ivory); }
.section--charcoal { background: var(--c-charcoal); color: var(--c-ivory); }
.section--vault    { background: var(--c-vault); color: var(--c-ivory); }
.section--ivory    { background: var(--c-ivory); color: var(--c-obsidian); }

.section--ivory .lead { color: rgba(11, 13, 12, 0.7); }
.section--ivory .eyebrow { color: var(--c-bronze); }

.section-head {
  display: grid;
  gap: var(--s-5);
  max-width: var(--measure);
}

/* 1. HERO ==================================================================
   Static image. Crop is tuned per viewport through --hero-pos, and a
   dedicated portrait crop is served to portrait tablets and phones.       */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--c-obsidian);
  isolation: isolate;
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__media {
  z-index: -2;
}

.hero__media img {
  object-fit: cover;
  object-position: var(--hero-pos, 50% 50%);
}

/* Hand-off to the Strategy Visualizer: the lower ~20% eases into the exact
   visualizer ground (--c-vault). Eased stops (not linear) avoid a visible band. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 18, 13, 0) 0%,
    rgba(8, 18, 13, 0.03) 10%,
    rgba(8, 18, 13, 0.09) 20%,
    rgba(8, 18, 13, 0.18) 30%,
    rgba(8, 18, 13, 0.3) 40%,
    rgba(8, 18, 13, 0.44) 50%,
    rgba(8, 18, 13, 0.59) 60%,
    rgba(8, 18, 13, 0.73) 70%,
    rgba(8, 18, 13, 0.85) 80%,
    rgba(8, 18, 13, 0.94) 90%,
    var(--c-vault) 100%
  );
}

/* Left-side shade only; a faint top band keeps the nav legible against the glass roof. */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 13, 12, 0.42) 0, rgba(11, 13, 12, 0) 160px),
    linear-gradient(
      90deg,
      rgba(11, 13, 12, 0.86) 0%,
      rgba(11, 13, 12, 0.66) 24%,
      rgba(11, 13, 12, 0.28) 44%,
      rgba(11, 13, 12, 0) 62%
    );
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: clamp(4.5rem, 3rem + 8vh, 9rem);
}

.hero__content {
  max-width: 34rem;
}

.hero__title {
  margin-top: var(--s-6);
}

.hero__title span {
  display: block;
}

.hero__copy {
  margin-top: var(--s-6);
  max-width: 25rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-ivory-muted);
}

.hero__actions {
  margin-top: var(--s-7);
}

.hero__values {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-ivory-faint);
}

.hero__values li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.75rem;
  margin-bottom: var(--s-5);
  background: var(--c-brass-line);
  vertical-align: middle;
}

/* Hero load-in: text only, the image never moves */
.js .hero [data-hero-item] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay: var(--d, 0ms);
}

.js .hero.is-ready [data-hero-item] {
  opacity: 1;
  transform: none;
}

/* Crop tuning -------------------------------------------------------------- */

/* Desktop wide (≥1600): image is wider than tall-viewport; hold the sculpture and roofline */
@media (min-width: 1600px) {
  .hero { --hero-pos: 50% 42%; }
}

/* Laptop (1025–1599): pull the frame left so the sculpture sits right of the copy */
@media (min-width: 1025px) and (max-width: 1599px) {
  .hero { --hero-pos: 22% 50%; }
  .hero__content { max-width: 30rem; }
}

/* Tablet landscape / small laptop */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
  .hero { --hero-pos: 18% 50%; }
  .hero__content { max-width: 26rem; }
}

/* Portrait tablets and phones use the portrait crop (sculpture centred at 50%) */
/* Portrait: the image occupies the upper frame so the whole sculpture reads,
   then settles into obsidian beneath the copy. --hero-floor sets where. */
@media (max-width: 1024px) and (orientation: portrait) {
  /* Tablets get the wide crop, framed on the sculpture */
  .hero {
    --hero-pos: 58% 50%;
    --hero-floor: 38%;
  }

  .hero__media {
    bottom: var(--hero-floor);
    height: auto;
  }

  .hero__shade {
    background:
      linear-gradient(180deg, rgba(11, 13, 12, 0.5) 0, rgba(11, 13, 12, 0) 140px),
      linear-gradient(
        0deg,
        var(--c-obsidian) 0%,
        var(--c-obsidian) var(--hero-floor),
        rgba(11, 13, 12, 0.78) calc(var(--hero-floor) + 10%),
        rgba(11, 13, 12, 0.2) calc(var(--hero-floor) + 26%),
        rgba(11, 13, 12, 0) calc(var(--hero-floor) + 38%)
      );
  }

  .hero__values { display: none; }
}

@media (max-width: 640px) and (orientation: portrait) {
  /* Phones: one framed composition in normal flow.
     The portrait crop (760 × 941) loses 8% of its glass-roof headroom from the
     top; the sculpture, its base and the reflective floor are untouched.
     In the cropped frame the sculpture base sits at ≈ 74% and the floor runs
     from there to the bottom edge. The copy block rises into that floor zone,
     so the eyebrow lands on the reflections with clear air below the base and
     the rest of the copy follows down through the fade into obsidian. */
  .hero {
    --hero-pos: 50% 100%;
    /* cropped frame height as a share of its width: 941 × 0.92 / 760 */
    --hero-frame: 113.9%;
    /* depth of the floor zone the copy rises into: lower 17.4% of the frame */
    --hero-floor-zone: calc(var(--hero-frame) * 0.174);
    display: block;
    min-height: 0;
  }

  .hero__media {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: var(--hero-frame);
  }

  /* The photograph itself dissolves into the obsidian ground, beginning just
     under the sculpture's base, so there is no image edge to read as a break */
  .hero__media img {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, 0.86) 78%,
      rgba(0, 0, 0, 0.64) 83%, rgba(0, 0, 0, 0.4) 88%, rgba(0, 0, 0, 0.18) 93%,
      rgba(0, 0, 0, 0.05) 97%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, 0.86) 78%,
      rgba(0, 0, 0, 0.64) 83%, rgba(0, 0, 0, 0.4) 88%, rgba(0, 0, 0, 0.18) 93%,
      rgba(0, 0, 0, 0.05) 97%, transparent 100%);
  }

  /* Faint top band for the nav legibility */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 13, 12, 0.5) 0, rgba(11, 13, 12, 0) 110px);
    pointer-events: none;
  }

  .hero__shade { display: none; }

  /* Percentage margins resolve against width, as the frame does, so the copy
     meets the floor at the same point on every phone */
  .hero__inner {
    margin-top: calc(var(--hero-floor-zone) * -1);
    padding-top: 0;
    padding-bottom: calc(var(--s-7) + env(safe-area-inset-bottom, 0px));
  }

  .hero__title { margin-top: var(--s-5); }
  .hero__copy { margin-top: var(--s-4); font-size: 1rem; }
  .hero__actions { margin-top: var(--s-6); }
}

@media (max-width: 1024px) {
  .hero__values { display: none; }
}

/* 2. STRATEGY VISUALIZER — see strategy-visualizer.css */

/* 3. PROCESS — see process.css */

/* 4. GENERATIONAL THINKING — see generational.css */

/* 5. INSIGHTS — see insights.css */

/* 6. FINAL CTA + 7. FOOTER — see closing.css */