/* Strategy + Design: coordinates follow page 3, with its 42pt navigation removed. */
#strategy { background: var(--olive); color: var(--white); --u: calc(min(100cqi, 1440px) / 1024.5); --scrim: rgb(0 0 0 / .88); --control-bg: rgb(0 0 0 / .58); }
#strategy .strategy-method-frame { height: calc(1458.75 * var(--u)); }
#strategy .frame { width: min(100%, calc(1024.5 * var(--u))); }
#strategy h2, #strategy h3 { letter-spacing: -.05em; font-family: var(--font-display); font-weight: 400; }
#strategy-title { position: absolute; top: calc(40.7608 * var(--u)); left: calc(247.5356 * var(--u)); width: calc(524.5 * var(--u)); text-align: center; font-size: calc(98.5769 * var(--u)); line-height: .771114; text-transform: uppercase; }
#strategy .strategy-title-shadow { position: absolute; left: calc(258.72 * var(--u)); top: calc(10.08 * var(--u)); width: calc(521.28 * var(--u)); height: calc(213.6 * var(--u)); }
#strategy .strategy-fruit-enter { position: absolute; top: calc(20.25623 * var(--u)); left: calc(698.0423 * var(--u)); width: calc(338.25 * var(--u)); height: calc(422.25 * var(--u)); opacity: .58; --dur: 1300ms; }
#strategy .strategy-fruit { width: 100%; height: 100%; }
#strategy .strategy-fruit img { width: 100%; height: 100%; }
#strategy .strategy-case-link { position: absolute; top: calc(203.333 * var(--u)); left: calc(370 * var(--u)); width: calc(284.5 * var(--u)); text-align: center; font-size: max(15px, calc(25.995 * var(--u))); line-height: calc(24 * var(--u)); text-decoration: none; }
#strategy .strategy-draw span { background: linear-gradient(var(--white), var(--white)) left bottom / 100% calc(2.25 * var(--u)) no-repeat; }
#strategy .strategy-flower-clip { position: absolute; left: 0; top: calc(882.75 * var(--u)); width: calc(420 * var(--u)); height: calc(576 * var(--u)); overflow: clip; pointer-events: none; }
#strategy .strategy-flower { position: absolute; width: calc(399 * var(--u)); height: calc(640.5 * var(--u)); top: calc(-32.21277 * var(--u)); left: calc(-1.63342 * var(--u)); opacity: .43; transform-origin: 66% 100%; animation: strategy-flower-sway 7s var(--ease-in-out) 1s infinite alternate; }
#strategy .strategy-flower img { width: 100%; height: 100%; }
#strategy .strategy-steps { position: absolute; inset: 0; }
#strategy .strategy-step { position: absolute; inset: calc(var(--top) * var(--u)) 0 auto; }
#strategy .strategy-number { position: absolute; top: 0; left: calc(var(--nx) * var(--u)); width: calc(var(--nw) * var(--u)); height: calc(var(--nh) * var(--u)); --ease: var(--spring); }
#strategy .strategy-glitter { position: relative; width: 100%; height: 100%; }
#strategy .strategy-glitter img { width: 100%; height: 100%; }
#strategy .strategy-glint-mask { position: absolute; inset: 0; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
#strategy .strategy-glint-mask::after { content: ""; position: absolute; inset: -15% -100%; background: linear-gradient(110deg, transparent 42%, rgb(255 255 255 / .9) 49%, transparent 56%); translate: -50% 0; opacity: 0; animation: strategy-glint 9s var(--ease-in-out) var(--glint-delay) infinite; }
#strategy:not(.is-visible) .strategy-glint-mask::after { animation-play-state: paused; }
#strategy .strategy-step h3 { position: absolute; top: calc(var(--hy) * var(--u)); left: calc(var(--tx) * var(--u)); font-size: max(20px, calc(var(--hs) * var(--u))); line-height: 1; white-space: nowrap; }
#strategy .strategy-step p { position: absolute; top: calc(var(--by) * var(--u)); left: calc(var(--tx) * var(--u)); font-size: max(15px, calc(25.995 * var(--u))); line-height: calc(30.75 * var(--u)); white-space: nowrap; letter-spacing: -.015em; }
#strategy .strategy-step em { font-weight: 400; font-style: italic; }
#strategy .strategy-design { position: relative; background: var(--pink); }
#strategy .strategy-design-header { position: relative; height: calc(314.25 * var(--u)); }
#strategy .strategy-header-skin { position: absolute; inset: 0; overflow: clip; }
#strategy .strategy-header-skin img { position: absolute; top: 0; left: calc(50% - 514.125 * var(--u)); width: calc(576 * var(--u)); max-width: none; height: calc(1028.25 * var(--u)); transform-origin: top left; transform: translateY(calc(576 * var(--u))) rotate(-90deg); }
#strategy .strategy-design-title-frame { height: 100%; }
#strategy-design-title { position: absolute; top: calc(56.5598 * var(--u)); right: calc(61.43866 * var(--u)); font-size: calc(76.56982 * var(--u)); text-transform: uppercase; text-align: right; line-height: .776214; }
#strategy .strategy-portfolio-link { position: absolute; left: calc(689.95844 * var(--u)); top: calc(248.658 * var(--u)); font-size: max(15px, calc(25.995 * var(--u))); line-height: calc(30.75 * var(--u)); white-space: nowrap; text-decoration: none; }
#strategy .strategy-wall { position: relative; }
#strategy .strategy-wall-skin { position: absolute; left: 0; width: 100%; overflow: clip; }
#strategy .strategy-wall-skin img { position: absolute; max-width: none; }
#strategy .strategy-wall-skin-top { top: 0; height: calc(931.5 * var(--u)); }
#strategy .strategy-wall-skin-top img { top: calc(-626.73193 * var(--u)); left: 0; width: 100%; height: calc(1829.25 * var(--u)); }
#strategy .strategy-wall-skin-bottom { top: calc(931.5 * var(--u)); bottom: 0; }
#strategy .strategy-wall-skin-bottom img { top: calc(-922.33008 * var(--u)); left: -23.5825%; width: 147.145%; height: calc(2692.5 * var(--u)); }
#strategy .strategy-posters { height: calc(2701.5 * var(--u)); }
#strategy .strategy-poster { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--pw) * var(--u)); height: calc(var(--ph) * var(--u)); }
#strategy .strategy-poster-button { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; overflow: hidden; cursor: zoom-in; background: transparent; color: var(--white); transition: translate 220ms var(--ease-out), scale 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
#strategy .strategy-poster-button img { position: absolute; left: calc(var(--ix) * var(--u)); top: calc(var(--iy) * var(--u)); width: calc(var(--iw) * var(--u)); height: calc(var(--ih) * var(--u)); max-width: none; }
#strategy .strategy-poster:focus-within { z-index: 3; }
#strategy .strategy-poster-button:focus-visible { outline: 3px solid var(--white); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  #strategy .strategy-poster:hover { z-index: 2; }
  #strategy .strategy-poster-button:hover { translate: 0 -6px; scale: 1.03; box-shadow: 0 12px 25px rgb(0 0 0 / .3); }
}
@media (prefers-reduced-motion: no-preference) {
  .js #strategy .strategy-fruit-enter:not(.is-in) { translate: calc(90 * var(--u)) calc(18 * var(--u)); rotate: 14deg; }
}
@keyframes strategy-flower-sway { from { rotate: -2deg; } to { rotate: 2deg; } }
@keyframes strategy-glint { 0%, 3% { translate: -50% 0; opacity: 0; } 5% { opacity: .85; } 16% { translate: 50% 0; opacity: 0; } 100% { translate: 50% 0; opacity: 0; } }

/* Native dialog keeps keyboard navigation inside the viewer and restores the opener. */
#strategy .strategy-lightbox { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100svh; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--white); opacity: 0; scale: .96; transition: opacity 250ms var(--ease-out), scale 250ms var(--ease-out), display 250ms allow-discrete, overlay 250ms allow-discrete; }
#strategy .strategy-lightbox[open] { display: grid; place-items: center; opacity: 1; scale: 1; }
#strategy .strategy-lightbox::backdrop { background: var(--scrim); opacity: 0; transition: opacity 250ms var(--ease-out), display 250ms allow-discrete, overlay 250ms allow-discrete; }
#strategy .strategy-lightbox[open]::backdrop { opacity: 1; }
@starting-style {
  #strategy .strategy-lightbox[open] { opacity: 0; scale: .96; }
  #strategy .strategy-lightbox[open]::backdrop { opacity: 0; }
}
#strategy .strategy-lightbox-figure { display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
#strategy .strategy-lightbox-image { display: block; width: auto; height: auto; max-width: 88vw; max-height: 82vh; max-height: 82svh; object-fit: contain; pointer-events: auto; touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
#strategy .strategy-lightbox-counter { font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
#strategy .strategy-lightbox-control { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; border: 1px solid rgb(255 255 255 / .32); border-radius: 50%; background: var(--control-bg); color: var(--white); cursor: pointer; }
#strategy .strategy-lightbox-control svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#strategy .strategy-lightbox-close { top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
#strategy .strategy-lightbox-prev { left: max(16px, env(safe-area-inset-left, 0px)); top: calc(50% - 24px); }
#strategy .strategy-lightbox-next { right: max(16px, env(safe-area-inset-right, 0px)); top: calc(50% - 24px); }
#strategy .strategy-lightbox-control:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
@media (max-width: 699px) {
  #strategy .strategy-method-frame { height: auto; padding: calc(46 * var(--m)) max(16px, env(safe-area-inset-right, 0px)) calc(72 * var(--m)) max(16px, env(safe-area-inset-left, 0px)); }
  #strategy-title { position: relative; inset: auto; width: 100%; font-size: calc(64 * var(--m)); line-height: .82; z-index: 1; }
  #strategy .strategy-title-shadow { left: calc(25 * var(--m)); top: calc(24 * var(--m)); width: calc(347 * var(--m)); height: calc(142.2 * var(--m)); }
  #strategy .strategy-fruit-enter { top: calc(100 * var(--m)); left: calc(270 * var(--m)); width: calc(174 * var(--m)); height: calc(217.2 * var(--m)); opacity: .5; }
  #strategy .strategy-case-link { position: relative; inset: auto; display: block; width: fit-content; margin: calc(24 * var(--m)) auto calc(65 * var(--m)); font-size: max(16px, calc(19 * var(--m))); line-height: 1.12; min-height: 44px; z-index: 1; }
  #strategy .strategy-draw span { background-size: 100% 2px; }
  #strategy .strategy-steps { position: relative; inset: auto; display: grid; gap: calc(48 * var(--m)); z-index: 1; }
  #strategy .strategy-step { position: relative; inset: auto; display: grid; grid-template-columns: calc(66 * var(--m)) minmax(0, 1fr); column-gap: calc(12 * var(--m)); align-content: start; }
  #strategy .strategy-number { position: relative; inset: auto; grid-row: 1 / span 2; width: calc(64 * var(--m)); height: auto; aspect-ratio: var(--nw) / var(--nh); }
  #strategy .strategy-glitter { height: auto; }
  #strategy .strategy-step h3 { position: relative; inset: auto; padding-top: calc(6 * var(--m)); font-size: calc(25 * var(--m)); line-height: 1.08; white-space: normal; }
  #strategy .strategy-step p { position: relative; inset: auto; margin-top: calc(13 * var(--m)); font-size: max(15px, calc(16 * var(--m))); line-height: 1.48; white-space: normal; letter-spacing: -.015em; }
  #strategy .strategy-step p br { display: none; }
  #strategy .strategy-step p em { display: inline; }
  #strategy .strategy-step p em:first-of-type::before { content: ""; display: block; height: .2em; }
  #strategy .strategy-flower-clip { top: auto; bottom: 0; left: calc(-54 * var(--m)); width: calc(300 * var(--m)); height: calc(510 * var(--m)); }
  #strategy .strategy-flower { left: 0; top: 0; width: calc(302 * var(--m)); height: calc(485 * var(--m)); opacity: .16; }
  #strategy .strategy-design-header { height: calc(300 * var(--m)); }
  #strategy .strategy-header-skin img { width: calc(300 * var(--m)); height: calc(535.5 * var(--m)); left: calc(50% - 267.75 * var(--m)); transform: translateY(calc(300 * var(--m))) rotate(-90deg); }
  #strategy-design-title { top: calc(53 * var(--m)); right: max(16px, env(safe-area-inset-right, 0px)); font-size: calc(60.5 * var(--m)); line-height: .85; }
  #strategy .strategy-portfolio-link { top: calc(233 * var(--m)); left: auto; right: max(16px, env(safe-area-inset-right, 0px)); display: flex; align-items: center; min-height: 44px; font-size: calc(18 * var(--m)); line-height: 1.3; }
  #strategy .strategy-posters { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1px; column-gap: calc(12 * var(--m)); padding: calc(18 * var(--m)) max(16px, env(safe-area-inset-right, 0px)) calc(28 * var(--m)) max(16px, env(safe-area-inset-left, 0px)); align-items: start; }
  #strategy .strategy-poster { position: relative; inset: auto; width: auto; height: auto; grid-row-end: span var(--rows, 230); }
  #strategy .strategy-poster-button { height: auto; }
  #strategy .strategy-poster-button img { position: static; width: 100%; height: auto; max-width: 100%; }
  #strategy .strategy-wall-skin-top { inset: 0; height: 100%; }
  #strategy .strategy-wall-skin-top img { top: 0; width: 100%; height: 100%; object-fit: cover; }
  #strategy .strategy-wall-skin-bottom { display: none; }
  #strategy .strategy-lightbox-prev, #strategy .strategy-lightbox-next { top: auto; bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  #strategy .strategy-lightbox-counter { position: absolute; bottom: max(30px, calc(env(safe-area-inset-bottom, 0px) + 14px)); left: 50%; translate: -50% 0; }
  #strategy .strategy-lightbox-image { max-height: 78svh; }
}
@media (prefers-reduced-motion: reduce) {
  #strategy .strategy-glint-mask::after { animation: none; }
  #strategy .strategy-lightbox, #strategy .strategy-lightbox[open] { scale: 1; transition-property: opacity, display, overlay; }
  @starting-style { #strategy .strategy-lightbox[open] { opacity: 0; scale: 1; } }
  #strategy .strategy-poster-button { transition: opacity 150ms; }
  #strategy .strategy-poster-button:hover { translate: none; scale: 1; }
}
@media (min-width: 1441px) {
  #strategy .strategy-header-skin img { left: -.2074vw; width: 56.22255vw; height: 100.4158vw; transform: translateY(56.22255vw) rotate(-90deg); }
}

/* WCAG AA: steps 4 and 5 sit over the anthurium (white on #a0a179 measured 2.67:1).
   A soft shadow under all five step texts keeps them legible and consistent. */
#strategy .strategy-step h3, #strategy .strategy-step p { text-shadow: 0 1px 2px rgb(0 0 0 / .45), 0 0 14px rgb(0 0 0 / .4); }

/* Round 2: scroll-only transforms live between entrance and hover/glitter layers.
   Their view timelines return to the original composition outside the viewport. */
#strategy .strategy-poster-depth,
#strategy .strategy-number-turn,
#strategy .strategy-fruit-scroll { width: 100%; height: 100%; }
@media (max-width: 699px) {
  #strategy .strategy-poster-depth { height: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js #strategy .strategy-poster { view-timeline: --strategy-poster block; }
    .js #strategy .strategy-number { view-timeline: --strategy-number block; }
    .js #strategy .strategy-fruit-enter { view-timeline: --strategy-fruit block; }
    .js #strategy.is-visible .strategy-number-turn {
      animation: strategy-number-turn linear both;
      animation-timeline: --strategy-number;
    }
    .js #strategy.is-visible .strategy-fruit-scroll {
      animation: strategy-fruit-scroll linear both;
      animation-timeline: --strategy-fruit;
    }
    @media (min-width: 700px) {
      .js #strategy.is-visible .strategy-poster-depth {
        animation: strategy-poster-depth linear both;
        animation-timeline: --strategy-poster;
      }
    }
  }
}
/* Monotonic: each layer slides one way as the page scrolls, crossing her exact layout when
   it sits mid-screen. --depth is a seeded value in her pt units (see strategy.js). */
@keyframes strategy-poster-depth {
  from { transform: translateY(clamp(-24px, calc(var(--depth, 16) * var(--u)), 24px)); }
  to { transform: translateY(calc(clamp(-24px, calc(var(--depth, 16) * var(--u)), 24px) * -1)); }
}
@keyframes strategy-number-turn { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes strategy-fruit-scroll { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* Tiny four-point facets lift off the glitter as its light passes. The flight
   wrappers belong only to anime; the number's entrance and turn remain untouched. */
#strategy .strategy-glitter:not(.is-sparkle-visible) .strategy-glint-mask::after { animation-play-state: paused; }
#strategy .strategy-sparkle-burst { position: absolute; inset: 0; pointer-events: none; }
#strategy .strategy-sparkle-flight { position: absolute; width: var(--facet-size); height: var(--facet-size); opacity: 0; }
#strategy .strategy-sparkle-facet { display: block; width: 100%; height: 100%; background: var(--facet-color); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }