/* =============================================================
   HZL Microsite — Section 6: CFO's Statement
   Full-bleed photo · oversized viewport-bleeding headline
   Pull-quote bottom bar
   ─────────────────────────────────────────────────────────────
   Z-layers:
     0  background photo
     1  dark gradient overlay
     2  "CFO'S"     — BEHIND portrait
     3  portrait PNG cutout
     4  "STATEMENT" — IN FRONT of portrait
     5  bottom bar: quote · nameplate · CTA
     6  section eyebrow top-left
   ============================================================= */

/* ── Section shell ─────────────────────────────────────────── */
.cfo-statement {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background: transparent;
  padding-bottom: 0!important;
}

/* ── Background photo (z:0) ────────────────────────────────── */
.cfo-statement__bg {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  bottom: -10%;
  z-index: 0;
}

.cfo-statement__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  will-change: transform;
}

/* ── Dark overlay (z:1) ────────────────────────────────────── */
.cfo-statement__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: none;
}

/* ── Oversized text — two z-layers ────────────────────────── */
.cfo-statement__giant-back,
.cfo-statement__giant-front {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.cfo-statement__giant-back {
  top: 35%;
  transform: translateY(-100%);
  z-index: 2;
}

.cfo-statement__giant-front {
  top: 35%;
  transform: translateY(calc(-0.08em));
  z-index: 4;
}

.cfo-statement__line {
  display: block;
  font-family: 'proxima-nova', var(--font-display), sans-serif;
  font-size: clamp(36px, 6.5vw, 96px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(238,242,246,0.90);
  will-change: transform;
}

.cfo-statement__line--1 { padding-left: var(--gutter); }
.cfo-statement__line--2 { padding-left: clamp(2rem, 12vw, 180px); text-align: left; }

/* ── Portrait PNG cutout (z:3) ─────────────────────────────── */
.cfo-statement__portrait-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.cfo-statement__portrait {
  position: absolute;
  height: 100%;
  width: auto;
  bottom: 0;
  left: 6%;
  display: block;
}

/* ── Section eyebrow — top-left (z:6) ─────────────────────── */
.cfo-statement__eyebrow-wrap {
  position: absolute;
  top: calc(var(--utility-h, 0px) + var(--bar-h, 0px) + 1.75rem);
  left: var(--gutter);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cfo-statement__section-no {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--teal-300);
  line-height: 1;
}

.cfo-statement__eyebrow-text {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7fb942;
  line-height: 1;
}

/* ── Bottom bar (z:5) ──────────────────────────────────────── */
.cfo-statement__bottom {
  position: absolute;
  bottom: calc(var(--arc-nav-h, 88px) + clamp(4rem, 10vh, 7rem));
  left: clamp(2rem, 12vw, 180px);
  right: auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0;
  max-width: clamp(400px, 62vw, 760px);
}

.cfo-statement__quote-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cfo-statement__quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.28;
  color: rgba(238,242,246,0.78);
  margin: 0;
}

.cfo-statement__quote::before { display: none; }

.cfo-statement__nameplate {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-self: flex-start;  /* shrink to content width — don't stretch over portrait */
}

.cfo-statement__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(238,242,246,0.96);
  line-height: 1.1;
}

.cfo-statement__designation {
  font-family: var(--font-display);
  font-size: 0.60rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(238,242,246,0.68);
  line-height: 1;
}

/* ── CTA shimmer pill ──────────────────────────────────────── */
@keyframes cfoCtaShimmer {
  0%   { background-position: 0 0, 0%   50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0%   50%; }
}

.cfo-statement__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.68em 1.6em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--navy-900), var(--navy-900)) padding-box,
    linear-gradient(
      135deg,
      #0060a3  0%, #4fe0cf 22%, #ffffff 44%,
      #7fb942 66%, #4fe0cf 82%, #0060a3 100%
    ) border-box;
  background-size: 100%, 300% 300%;
  animation: cfoCtaShimmer 2.8s ease-in-out infinite;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238,242,246,0.88);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  transition: color 0.22s;
}

.cfo-statement__cta:hover { color: #ffffff; }

.cfo-statement__cta-arrow {
  display: inline-block;
  transition: transform 0.22s;
}

.cfo-statement__cta:hover .cfo-statement__cta-arrow { transform: translateX(5px); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .cfo-statement__line   { font-size: clamp(44px, 11vw, 110px); }
  .cfo-statement__quote  { font-size: 22px; }
  .cfo-statement__bottom { max-width: clamp(400px, 62vw, 620px); }
}

@media (max-width: 640px) {
  .cfo-statement              { height: auto; min-height: 100svh; }
  .cfo-statement__giant-back  { top: 32%; }
  .cfo-statement__giant-front { top: 32%; transform: translateY(0); }
  .cfo-statement__line        { font-size: clamp(44px, 12vw, 80px); }
  .cfo-statement__bottom      {
    left: var(--gutter); right: var(--gutter);
    bottom: calc(var(--arc-nav-h, 88px) + 1rem);
    max-width: 100%; gap: 1rem; padding-bottom: 0;
  }
  .cfo-statement__quote       { font-size: 19px; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cfo-statement__photo    { will-change: auto; }
  .cfo-statement__portrait { will-change: auto; }
}