/* ================================================================
   FLEXIBILITY SECTION — "The Open Window"

   Phase 1: Fully styled static design — rendered in its final
   visual state. Window at full width, cityscape sharp, all four
   glass notes in position, closing line and CTA inside the frame.

   Phase 3 will activate scroll mechanics: section gets height:350vh,
   the sticky wrapper becomes position:sticky, and GSAP drives the
   zoom + sharpening + note entrances.
================================================================ */


/* ── Outer section ──────────────────────────────────────────────── */

.hs-flexibility {
  position:         relative;
  background-color: transparent;
  height:           350vh;
}


/* ── Layout wrapper ─────────────────────────────────────────────── */

.hs-flexibility__sticky {
  position:        sticky;
  top:             0;
  height:          100vh;
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding-top:     var(--hs-space-12);
  padding-bottom:  var(--hs-space-8);
  gap:             var(--hs-space-6);
}


/* ── Section header ─────────────────────────────────────────────── */

.hs-flexibility__header {
  text-align:     center;
  max-width:      var(--hs-container-md);
  padding-inline: var(--hs-container-pad-x);
  width:          100%;
}

.hs-flexibility__header .hs-eyebrow {
  margin-inline:  auto;
  margin-bottom:  var(--hs-space-5);
}

.hs-flexibility__headline {
  font-family:     var(--hs-font-display);
  font-size:       var(--hs-text-section-h);
  font-weight:     var(--hs-font-bold);
  line-height:     var(--hs-leading-heading);
  letter-spacing:  var(--hs-tracking-tight);
  color:           var(--hs-color-text-brand);
  max-width:       28ch;
  margin-inline:   auto;
  text-wrap:       balance;
}


/* ── Scene container ────────────────────────────────────────────── */

.hs-flexibility__scene {
  width:          100%;
  padding-inline: var(--hs-container-pad-x);
  flex:           1;
  display:        flex;
  flex-direction: column;
  min-height:     0;
  overflow:       hidden;
}


/* ── Frame wrapper — positioning context for notes ──────────────── */

.hs-flexibility__frame-wrap {
  position:       relative;
  width:          100%;
  flex:           1;
  display:        flex;
  flex-direction: column;
  min-height:     0;
}


/* ── The window frame ───────────────────────────────────────────── */
/*
 * Phase 1 shows the final visual state: full width, sharp cityscape.
 * Phase 3 starting state: scaled down + cityscape blurred.
 * Phase 3 end state: this exact appearance, driven by GSAP.
 */
.hs-flexibility__frame {
  position:      relative;
  width:         100%;
  flex:          1;
  min-height:    0;
  border:        7px solid var(--hs-palette-navy-800);
  border-radius: var(--hs-radius-2xl);
  box-shadow:    var(--hs-shadow-xl);
  overflow:      hidden;
  will-change:   transform;
}

.hs-flexibility__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      var(--hs-color-bg-overlay) 0%,
      transparent 24%,
      transparent 72%,
      var(--hs-color-bg-overlay) 100%
    );
}

.hs-flexibility__frame::after {
  content: '';
  position: absolute;
  inset: var(--hs-space-4);
  border: var(--hs-border-1) solid var(--hs-color-border-inverse-strong);
  border-radius: calc(var(--hs-radius-2xl) - var(--hs-space-2));
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}


/* ── Cityscape container ────────────────────────────────────────── */
/*
 * The mask fades the image to transparent at the top so the prismatic
 * sky fills the upper portion of the frame — city appears to rise from
 * below into open sky, creating genuine depth.
 * GSAP targets this element for the blur animation (filter: blur 14→0).
 */

.hs-flexibility__city {
  position:              absolute;
  inset:                 0;
  pointer-events:        none;
  will-change:           auto;
}

/* ── Skyline photograph ─────────────────────────────────────────── */

.hs-flexibility__skyline {
  position:        absolute;
  bottom:          0;
  left:            0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: bottom center;
  display:         block;
  opacity:         1;
  user-select:     none;
  -webkit-user-drag: none;
}


/* ── Glass notes ────────────────────────────────────────────────── */
/*
 * Four small glass cards, one on each edge of the window frame.
 * Each one carries a bullet from the copy. They sit absolutely
 * positioned within the frame (overflow:hidden clips the frame,
 * so notes are positioned well within its bounds).
 *
 * Phase 3 will animate each note in from its respective edge via GSAP.
 */

.hs-flexibility__note {
  position:                 absolute;
  z-index:                  var(--hs-z-raised);
  width:                    240px;
  display:                  flex;
  align-items:              flex-start;
  gap:                      var(--hs-space-3);

  background:
    linear-gradient(
      145deg,
      var(--hs-glass-bg-hover) 0%,
      var(--hs-glass-bg) 100%
    );
  backdrop-filter:          var(--hs-glass-blur);
  -webkit-backdrop-filter:  var(--hs-glass-blur);
  border:                   var(--hs-border-1) solid var(--hs-glass-border);
  border-left:              var(--hs-border-3) solid var(--hs-palette-accent-500);
  border-radius:            var(--hs-radius-xl);
  padding:                  var(--hs-space-5);
  box-shadow:               var(--hs-shadow-xl);
  overflow:                 hidden;
}

/* Iridescent edge-light — same treatment as hero glass cards */
.hs-flexibility__note::before {
  content:         '';
  position:        absolute;
  inset:           0;
  border-radius:   inherit;
  pointer-events:  none;
  background:
    linear-gradient(to bottom,
      var(--hs-glass-edge-top)  0px,
      transparent               3px),
    linear-gradient(to right,
      var(--hs-glass-edge-left) 0px,
      transparent               2px);
}

.hs-flexibility__note::after {
  content: '';
  position: absolute;
  inset: auto auto calc(var(--hs-space-8) * -1) calc(var(--hs-space-8) * -1);
  width: var(--hs-space-24);
  height: var(--hs-space-24);
  border-radius: var(--hs-radius-full);
  background: var(--hs-gradient-orb-accent);
  opacity: 0.85;
  pointer-events: none;
}

/* All direct children sit above the ::before edge-light */
.hs-flexibility__note > * {
  position: relative;
  z-index:  1;
}

.hs-flexibility__note .hs-icon {
  width: var(--hs-space-8);
  height: var(--hs-space-8);
  padding: var(--hs-space-2);
  border-radius: var(--hs-radius-full);
  background: var(--hs-color-bg-accent-subtle);
  color: var(--hs-color-icon-accent);
  box-shadow: var(--hs-shadow-accent-sm);
  flex-shrink: 0;
}

.hs-flexibility__note span {
  font-family: var(--hs-font-body);
  font-size:   var(--hs-text-md);
  font-weight: var(--hs-font-semibold);
  line-height: var(--hs-leading-subhead);
  color:       var(--hs-color-text-primary);
}


/* ── Note positions ─────────────────────────────────────────────── */
/*
 * Composition: four distinct quadrants of the frame, leaving the
 * centre clear for the closing line and CTA.
 *
 * Left  → upper-left area   (top: 14%)
 * Right → lower-right area  (bottom: 14%)
 * Top   → top edge, right of the left note (left: 28%)
 * Bottom→ bottom edge, left of the right note (right: 26%)
 */

.hs-flexibility__note--left {
  left:      var(--hs-space-8);
  top:       14%;
  transform: translateY(-50%);
}

.hs-flexibility__note--right {
  right:     var(--hs-space-8);
  bottom:    14%;
  transform: translateY(50%);
}

.hs-flexibility__note--top {
  top:  var(--hs-space-8);
  left: 28%;
  transform: rotate(-2deg);
}

.hs-flexibility__note--bottom {
  bottom: var(--hs-space-8);
  right:  26%;
  transform: rotate(2deg);
}


/* ── Reveal — closing line + CTA ────────────────────────────────── */
/*
 * Centred in the frame, clear of all four notes.
 * pointer-events:none on the wrapper so the frame itself remains
 * hoverable/clickable; re-enabled on the CTA button only.
 */

.hs-flexibility__reveal {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  z-index:        var(--hs-z-raised);
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--hs-space-8);
  width:          100%;
  padding-inline: var(--hs-space-20);
  pointer-events: none;
}

.hs-flexibility__reveal::before {
  content: '';
  position: absolute;
  inset: calc(var(--hs-space-8) * -1) var(--hs-space-12);
  border-radius: var(--hs-radius-3xl);
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      var(--hs-color-bg-overlay) 20%,
      var(--hs-color-bg-overlay) 80%,
      transparent 100%
    );
  opacity: 0.82;
  filter: blur(var(--hs-space-8));
  z-index: 0;
  pointer-events: none;
}

.hs-flexibility__reveal .hs-btn {
  pointer-events: auto;
}

.hs-flexibility__closing {
  font-family:    var(--hs-font-display);
  font-size:      clamp(var(--hs-text-xl), 2.6vw, var(--hs-text-4xl));
  font-weight:    var(--hs-font-extrabold);
  line-height:    var(--hs-leading-heading);
  letter-spacing: var(--hs-tracking-tight);
  color:          var(--hs-color-text-inverse);
  max-width:      30ch;
  text-wrap:      balance;
}


/* ── Mobile content — hidden at desktop ─────────────────────────── */
.hs-flexibility__mobile-content { display: none; }


/* ── 1024px — tablet, animation active ──────────────────────────── */

@media (max-width: 1024px) {
  .hs-flexibility__sticky {
    padding-top:    var(--hs-space-8);
    padding-bottom: var(--hs-space-6);
    gap:            var(--hs-space-4);
  }

  .hs-flexibility__note {
    width: 190px;
  }

  .hs-flexibility__note .hs-icon {
    width: var(--hs-space-7);
    height: var(--hs-space-7);
  }

  .hs-flexibility__note span {
    font-size: var(--hs-text-sm);
  }

  .hs-flexibility__note--left  { left:  var(--hs-space-6); }
  .hs-flexibility__note--right { right: var(--hs-space-6); }

  .hs-flexibility__reveal {
    padding-inline: var(--hs-space-16);
  }

  .hs-flexibility__closing {
    font-size: clamp(var(--hs-text-lg), 2vw, var(--hs-text-2xl));
  }
}


/* ── 900px — tighter tablet, notes smaller ───────────────────────── */

@media (max-width: 900px) {
  .hs-flexibility__note {
    width:   165px;
    padding: var(--hs-space-3) var(--hs-space-4);
    gap:     var(--hs-space-2);
  }

  .hs-flexibility__note .hs-icon {
    width: var(--hs-space-6);
    height: var(--hs-space-6);
    padding: var(--hs-space-1-5);
  }

  .hs-flexibility__note span {
    font-size: var(--hs-text-xs);
  }

  .hs-flexibility__note--left   { left:  var(--hs-space-4); }
  .hs-flexibility__note--right  { right: var(--hs-space-4); }
  .hs-flexibility__note--top    { left:  24%; }
  .hs-flexibility__note--bottom { right: 18%; }

  .hs-flexibility__reveal {
    padding-inline: var(--hs-space-10);
  }

  .hs-flexibility__closing {
    font-size: var(--hs-text-lg);
    max-width: 26ch;
  }
}


/* ── 768px — static layout, all 4 notes visible ─────────────────── */

@media (max-width: 768px) {
  .hs-flexibility {
    height: auto;
  }

  .hs-flexibility__sticky {
    position:       static;
    height:         auto;
    overflow:       visible;
    padding-top:    var(--hs-section-pad-y);
    padding-bottom: var(--hs-space-12);
    gap:            var(--hs-space-8);
  }

  .hs-flexibility__scene {
    flex:     none;
    display:  block;
    overflow: visible;
  }

  .hs-flexibility__frame-wrap {
    display: block;
    flex:    none;
  }

  .hs-flexibility__frame {
    flex:         none;
    height:       auto;
    min-height:   560px;
    border-width: 4px;
  }

  .hs-flexibility__note {
    width:   175px;
    padding: var(--hs-space-3) var(--hs-space-4);
    gap:     var(--hs-space-2);
  }

  .hs-flexibility__note span {
    font-size: var(--hs-text-xs);
  }

  .hs-flexibility__note--left   { left:   var(--hs-space-4); top:    14%; }
  .hs-flexibility__note--right  { right:  var(--hs-space-4); bottom: 14%; }
  .hs-flexibility__note--top    { top:    var(--hs-space-5); left:   30%; }
  .hs-flexibility__note--bottom { bottom: var(--hs-space-5); right:  22%; }

  .hs-flexibility__reveal {
    padding-inline: var(--hs-space-6);
    gap:            var(--hs-space-5);
  }

  .hs-flexibility__closing {
    font-size: var(--hs-text-lg);
    max-width: 22ch;
  }
}


/* ── 600px — collapse to 2 notes to prevent overlap ─────────────── */

@media (max-width: 600px) {
  .hs-flexibility__note--top,
  .hs-flexibility__note--bottom {
    display: none;
  }

  .hs-flexibility__note { width: 160px; }

  .hs-flexibility__note--left  { top: 20%; }
  .hs-flexibility__note--right { bottom: 20%; }
}


/* ── 425px — mobile redesign ─────────────────────────────────────── */

@media (max-width: 425px) {
  .hs-flexibility__sticky {
    padding:    var(--hs-section-pad-y) var(--hs-container-pad-x);
    gap:        var(--hs-space-6);
    align-items: stretch;
  }

  .hs-flexibility__header {
    text-align:     left;
    padding-inline: 0;
  }

  .hs-flexibility__headline {
    font-size:  var(--hs-text-2xl);
    max-width:  none;
    text-align: left;
  }

  .hs-flexibility__scene {
    padding-inline: 0;
    overflow:       visible;
  }

  /* Frame becomes a pure cityscape banner */
  .hs-flexibility__frame {
    min-height:    0;
    height:        200px;
    border-width:  3px;
    border-radius: var(--hs-radius-xl);
  }

  /* Lighter mask so more city shows in the short banner */
  .hs-flexibility__city {
    -webkit-mask-image: none;
    mask-image:         none;
  }

  /* Hide all frame internals — mobile content handles them */
  .hs-flexibility__note,
  .hs-flexibility__reveal {
    display: none;
  }

  /* Show mobile content */
  .hs-flexibility__mobile-content {
    display:        flex;
    flex-direction: column;
    gap:            var(--hs-space-5);
  }

  .hs-flexibility__mobile-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--hs-space-3);
    list-style:     none;
  }

  .hs-flexibility__mobile-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--hs-space-3);
    padding:     var(--hs-space-4) var(--hs-space-5);

    background:
      linear-gradient(
        145deg,
        var(--hs-glass-bg-hover) 0%,
        var(--hs-glass-bg) 100%
      );
    backdrop-filter:   var(--hs-glass-blur);
    -webkit-backdrop-filter: var(--hs-glass-blur);
    border:            var(--hs-border-1) solid var(--hs-glass-border);
    border-left:       var(--hs-border-3) solid var(--hs-palette-accent-500);
    border-radius:     var(--hs-radius-xl);
    box-shadow:        var(--hs-shadow-lg);

    font-family:  var(--hs-font-body);
    font-size:    var(--hs-text-sm);
    font-weight:  var(--hs-font-semibold);
    line-height:  var(--hs-leading-subhead);
    color:        var(--hs-color-text-primary);
  }

  .hs-flexibility__mobile-item .hs-icon {
    width: var(--hs-space-7);
    height: var(--hs-space-7);
    padding: var(--hs-space-1-5);
    border-radius: var(--hs-radius-full);
    background: var(--hs-color-bg-accent-subtle);
    color: var(--hs-color-icon-accent);
    box-shadow: var(--hs-shadow-accent-sm);
    flex-shrink: 0;
  }

  .hs-flexibility__mobile-closing {
    font-family: var(--hs-font-display);
    font-size:   var(--hs-text-base);
    font-weight: var(--hs-font-medium);
    font-style:  italic;
    line-height: var(--hs-leading-relaxed);
    color:       var(--hs-color-text-secondary);
    text-align:  center;
    padding-inline: var(--hs-space-2);
  }

  .hs-flexibility__mobile-cta {
    width:           100%;
    justify-content: center;
  }
}


/* ── Short viewport heights (landscape tablets, compact laptops) ──── */
/*
 * At ≥769px width the GSAP sticky layout is active and the frame height
 * shrinks with the viewport. When the frame is short (~300px or less),
 * note--left/right at top/bottom:14% + translateY(±50%) push their edges
 * past the frame boundary and get clipped by overflow:hidden.
 *
 * Fix: tighten wrapper padding to reclaim vertical space, scale down notes,
 * and push the anchor percentages inward so the ±50% translate stays within
 * the frame at any realistic height.
 */

@media (min-width: 769px) and (max-height: 700px) {
  .hs-flexibility__sticky {
    padding-top:    var(--hs-space-6);
    padding-bottom: var(--hs-space-4);
    gap:            var(--hs-space-3);
  }

  .hs-flexibility__note {
    width:   185px;
    padding: var(--hs-space-3) var(--hs-space-4);
    gap:     var(--hs-space-2);
  }

  .hs-flexibility__note .hs-icon {
    width:   var(--hs-space-6);
    height:  var(--hs-space-6);
    padding: var(--hs-space-1-5);
  }

  .hs-flexibility__note span {
    font-size: var(--hs-text-sm);
  }

  /* Move anchor points inward so translateY(±50%) stays inside frame */
  .hs-flexibility__note--left   { top:    clamp(var(--hs-space-14), 24%, 44%); }
  .hs-flexibility__note--right  { bottom: clamp(var(--hs-space-14), 24%, 44%); }
  .hs-flexibility__note--top    { top:    var(--hs-space-5); left: 26%; }
  .hs-flexibility__note--bottom { bottom: var(--hs-space-5); right: 22%; }

  .hs-flexibility__reveal {
    padding-inline: var(--hs-space-14);
    gap:            var(--hs-space-5);
  }

  .hs-flexibility__closing {
    font-size: var(--hs-text-lg);
    max-width:  24ch;
  }
}


/* ── Very short viewport — further compacted ────────────────────────── */
/*
 * Below 540px height the top and bottom notes risk overlapping the
 * left/right notes and the central reveal. Hide them the same way
 * the ≤600px width query does, keeping only the two side notes.
 */

@media (min-width: 769px) and (max-height: 540px) {
  .hs-flexibility__sticky {
    padding-top:    var(--hs-space-5);
    padding-bottom: var(--hs-space-3);
    gap:            var(--hs-space-2);
  }

  .hs-flexibility__note--top,
  .hs-flexibility__note--bottom {
    display: none;
  }

  .hs-flexibility__note--left   { top:    clamp(var(--hs-space-12), 26%, 48%); }
  .hs-flexibility__note--right  { bottom: clamp(var(--hs-space-12), 26%, 48%); }
}


/* ── Reduced motion ──────────────────────────────────────────────── */
/*
 * GSAP animations are skipped entirely for reduced-motion users
 * (HesseAnimations.init returns early). Undo the scroll layout so the
 * section renders as a normal static block showing the final state.
 */

@media (prefers-reduced-motion: reduce) {
  .hs-flexibility {
    height: auto;
  }

  .hs-flexibility__sticky {
    position:       static;
    height:         auto;
    overflow:       visible;
    padding-top:    var(--hs-section-pad-y);
    padding-bottom: var(--hs-space-16);
    gap:            var(--hs-space-8);
  }

  .hs-flexibility__scene {
    flex:     none;
    display:  block;
    overflow: visible;
  }

  .hs-flexibility__frame-wrap {
    display: block;
    flex:    none;
  }

  .hs-flexibility__frame {
    flex:        none;
    height:      auto;
    min-height:  520px;
    will-change: auto;
  }

  .hs-flexibility__city {
    filter:      none !important;
    will-change: auto;
  }

  .hs-flexibility__note,
  .hs-flexibility__reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}