/* ============================================================
   02-hero — scoped under .sec-02-hero
   ============================================================ */

.sec-02-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3.5rem));
  padding-bottom: clamp(4rem, 10vw, 7rem);
  overflow: clip;
}

/* --- Layered background --- */
.sec-02-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate; /* contain mix-blend-mode to this layer only */
}

.sec-02-hero__photo {
  position: absolute;
  inset: -10% -5% -20% -5%;
  will-change: transform;
  animation: sec-02-hero-kenburns 28s ease-in-out infinite alternate;
}
.sec-02-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Duotone grade: strip color from the source photo, then let the tint
     layer below inject the accent hue via mix-blend-mode. */
  filter: grayscale(1) brightness(0.7) contrast(1.05);
  /* The lobby photo's ASCEND wall sign fills the top third of the frame, right behind the
     headline. Scaling up from the bottom edge lifts the sign out of view and leaves the calmer
     desk, plant, and wall behind the copy. Background layer only, so the upscale stays soft. */
  transform: scale(1.6);
  transform-origin: 35% 100%;
}
@keyframes sec-02-hero-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}
html.reduced-motion .sec-02-hero__photo { animation: none; transform: none; }

/* Accent duotone tint — blends with the grayscale photo beneath it */
.sec-02-hero__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    hsl(var(--accent-h) 60% 18% / 0.85),
    hsl(var(--accent-h) 30% 8% / 0.92)
  );
  mix-blend-mode: color;
}

.sec-02-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, hsl(200 40% 5% / 0.94) 0%, hsl(200 35% 6% / 0.72) 32%, hsl(200 30% 6% / 0.32) 58%, hsl(200 30% 6% / 0.18) 100%),
    linear-gradient(0deg, hsl(200 40% 4% / 0.9) 0%, hsl(200 35% 5% / 0.35) 32%, transparent 62%);
}

.sec-02-hero__glow {
  position: absolute;
  top: 10%;
  left: 55%;
  width: min(60vw, 900px);
  height: min(60vw, 900px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(10px);
  opacity: 0.7;
  animation: sec-02-hero-drift 16s var(--ease-out) infinite alternate;
}
@keyframes sec-02-hero-drift {
  from { transform: translate(-3%, -2%) scale(1); }
  to   { transform: translate(4%, 5%) scale(1.12); }
}
html.reduced-motion .sec-02-hero__glow { animation: none; }

/* --- Content row (left copy column + right figure column) --- */
.sec-02-hero__inner {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .sec-02-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}

.sec-02-hero__content {
  min-width: 0;
}

.sec-02-hero__eyebrow {
  margin-bottom: 1.4rem;
}

.sec-02-hero__headline {
  margin: 0 0 1.4rem;
  max-width: 18ch;
}

.sec-02-hero__line {
  display: block;
}

.sec-02-hero__line--rotator {
  color: var(--accent-soft);
}

/* Rotating word: sizer establishes intrinsic width from the widest option */
.sec-02-hero__rotator {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  color: var(--accent-light);
}
.sec-02-hero__rotator-sizer {
  visibility: hidden;
  display: grid;
}
.sec-02-hero__rotator-sizer span {
  grid-area: 1 / 1;
}
.sec-02-hero__rotator-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
}
.sec-02-hero__rotator-word.is-leaving {
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  opacity: 0;
  transform: translateY(0.35em);
}
.sec-02-hero__rotator-word.is-entering {
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 1;
  transform: translateY(0);
}
html.reduced-motion .sec-02-hero__rotator-word {
  transition: none;
}

.sec-02-hero__line--static {
  color: var(--white);
}

.sec-02-hero__word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.28em;
}
.sec-02-hero__word {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 700ms var(--ease-out);
}
html.is-loaded .sec-02-hero__word-wrap:nth-of-type(1) .sec-02-hero__word { transition-delay: 260ms; }
html.is-loaded .sec-02-hero__word-wrap:nth-of-type(2) .sec-02-hero__word { transition-delay: 340ms; }
html.is-loaded .sec-02-hero__word { transform: translateY(0); }
html.reduced-motion .sec-02-hero__word { transform: none; transition: none; }

.sec-02-hero__subhead {
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  color: var(--text-on-ink-dim);
  margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
}

.sec-02-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(2.2rem, 4vw, 3rem);
}

/* --- Google rating chip --- */
.sec-02-hero__rating {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--white);
  color: var(--text-on-bone);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.25rem 0.7rem 0.75rem;
  box-shadow: var(--shadow-lift);
  animation: sec-02-hero-float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes sec-02-hero-float {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}
html.reduced-motion .sec-02-hero__rating { animation: none; }

.sec-02-hero__rating-badge {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  border-radius: 50%;
  flex-shrink: 0;
}

.sec-02-hero__rating-text {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
.sec-02-hero__rating-text strong {
  color: var(--text-on-bone);
  font-family: var(--font-display);
  font-weight: 700;
}
.sec-02-hero__rating-dot {
  margin: 0 0.15rem;
  color: var(--text-on-bone-dim);
}

/* --- Right visual column: duotone portrait in an arch frame --- */
.sec-02-hero__figure {
  display: none; /* desktop-only composition; mobile hero is unchanged */
}

@media (min-width: 1024px) {
  .sec-02-hero__figure {
    /* In-flow grid child: vertically centered against the headline/copy column */
    display: block;
    position: relative;
    align-self: center;
    justify-self: center;
    width: min(340px, 100%);
  }

  .sec-02-hero__figure-glow {
    position: absolute;
    inset: -22% -30%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 72%);
    filter: blur(30px);
    opacity: 0.8;
  }

  .sec-02-hero__figure-ring {
    position: absolute;
    inset: -14px;
    z-index: 1;
    border: 1.5px solid hsl(var(--accent-h) 70% 62% / 0.4);
    border-radius: 999px 999px 32px 32px;
    transform: translate(16px, 20px);
    pointer-events: none;
  }

  .sec-02-hero__figure-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 7 / 9;
    border-radius: 999px 999px 24px 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
  }

  .sec-02-hero__figure-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.78) contrast(1.05);
    transform: scale(1.02);
    transition: filter 550ms var(--ease-out), transform 550ms var(--ease-out);
  }

  .sec-02-hero__figure-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      165deg,
      hsl(var(--accent-h) 60% 20% / 0.75),
      hsl(var(--accent-h) 35% 10% / 0.85)
    );
    mix-blend-mode: color;
    transition: opacity 550ms var(--ease-out);
  }

  /* Warm slightly on hover — less tinted, a touch of life comes back in */
  .sec-02-hero__figure:hover .sec-02-hero__figure-img,
  .sec-02-hero__figure:focus-within .sec-02-hero__figure-img {
    filter: grayscale(0.5) brightness(0.92) contrast(1.02);
    transform: scale(1.05);
  }
  .sec-02-hero__figure:hover .sec-02-hero__figure-tint,
  .sec-02-hero__figure:focus-within .sec-02-hero__figure-tint {
    opacity: 0.6;
  }

  /* --- Docked chips: rating (lower-left of frame) + openings (upper-right) --- */
  .sec-02-hero__chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    color: var(--text-on-bone);
    border-radius: var(--radius-pill);
    padding: 0.55rem 0.95rem 0.55rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-lift);
    will-change: transform;
  }
  .sec-02-hero__chip-icon {
    color: var(--accent-strong);
    flex-shrink: 0;
  }

  .sec-02-hero__chip--openings {
    top: clamp(-0.75rem, -2vw, -0.25rem);
    right: clamp(-1rem, -3vw, -0.4rem);
    animation: sec-02-hero-float-b 7s ease-in-out infinite;
  }
  @keyframes sec-02-hero-float-b {
    0%, 100% { transform: translateY(3px); }
    50% { transform: translateY(-5px); }
  }
  html.reduced-motion .sec-02-hero__chip--openings { animation: none; }

  /* Move the Google rating chip out of the copy column and dock it onto
     the frame's lower-left edge. */
  .sec-02-hero__rating {
    margin-top: clamp(-1.5rem, -3vw, -0.5rem);
    margin-left: clamp(0px, 4vw, 3rem);
    margin-right: clamp(-14rem, -16vw, -10rem);
  }
}

/* --- Curved bottom divider --- */
.sec-02-hero__divider {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(50px, 8vw, 110px);
  z-index: 1;
  pointer-events: none;
}

/* --- Layout: rating chip overlaps photo edge on tablet (figure not shown yet) --- */
@media (min-width: 900px) and (max-width: 1023px) {
  .sec-02-hero__rating {
    margin-left: clamp(0px, 4vw, 3rem);
  }
}

@media (max-width: 640px) {
  .sec-02-hero__headline { max-width: 100%; }
  .sec-02-hero__cta { flex-direction: column; align-items: stretch; }
  .sec-02-hero__cta .btn { width: 100%; }
  .sec-02-hero__rating { margin-top: 0.5rem; }
}