/* =========================
Fonts
========================= */

@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');

@font-face {
font-family: 'Uhudscript';
src: url('/-global-assets/fonts/Uhudscript-Demo.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesqueRegular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesque-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesqueDEMO-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}

/* =========================
Theme Tokens
========================= */

:root {
--life-brand-gradient: linear-gradient(90deg, #02bcdd 0%, #06d1e5 24%, #64eda8 62%, #d0f88d 100%);
--life-brand-gradient-soft: linear-gradient(62deg, #02bcdd, #06d1e5, #64eda8, #d0f88d);
--life-conic-gradient: conic-gradient(from var(--life-angle), #02bcdd, #06d1e5, #64eda8, #d0f88d, #64eda8, #06d1e5, #02bcdd);
--life-navy: #02253d;
--life-deep: #061622;
--life-white: #f8f8ff;
--life-footer-space: 58px;
--projects-card-surface: linear-gradient(90deg, #010203 0%, #011321 42%, #022035 100%);
--big-card-border-gradient: linear-gradient(89.79deg, #04c7e1 -10.66%, #000000 50.25%, #06d1e5 110.31%);
}

@property --life-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}

/* =========================
Base Reset
========================= */

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background: var(--life-navy);
}

/* =========================
Page Shell
========================= */

body.life-page {
font-family: 'Galano', Arial, sans-serif;
color: var(--life-white);
}

a {
text-decoration: none;
}

.life-stage {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: var(--life-footer-space);
height: auto;
overflow: hidden;
background: var(--life-navy);
user-select: none;
}

.story-background,
.story-background img {
position: absolute;
inset: 0;
display: block;
}

.story-background {
z-index: 2;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 420ms ease,
visibility 420ms ease;
}

body.life-story-active .story-background {
opacity: 1;
visibility: visible;
}

.story-background img {
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 53% center;
max-width: none;
}

body.life-footer-active .life-stage {
bottom: 0;
}

body.life-footer-active #footer-placeholder {
display: none;
}

body.life-footer-active .site-logo img {
display: none !important;
}

/* =========================
Slide State
========================= */

.life-screen {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(1.015);
transition:
opacity 720ms ease,
visibility 720ms ease,
transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.life-screen.is-active {
z-index: 5;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1);
}

.life-screen.is-leaving {
z-index: 6;
opacity: 0;
transform: scale(0.985);
}

/* =========================
Global Footer Slide
========================= */

.footer-screen {
background: var(--life-navy);
overflow: var(--life-footer-overflow, hidden);
transform: translateY(34px);
}

.footer-screen.is-active {
transform: translateY(0);
}

.footer-screen #website-footer-placeholder {
position: var(--life-footer-placeholder-position, absolute);
left: 0;
right: 0;
bottom: var(--life-footer-placeholder-bottom, 0);
z-index: 4;
width: 100%;
min-height: var(--life-footer-placeholder-min-height, 0);
}

/* =========================
Slide Backgrounds
========================= */

.screen-picture,
.screen-picture img {
position: absolute;
inset: 0;
display: block;
}

.screen-picture {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}

.screen-picture img {
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 52% center;
max-width: none;
}

.welcome-screen .screen-picture img {
object-position: 52% center;
}

.callout-screen .screen-picture img {
object-position: right center;
}

.callout-blur-layer,
.callout-blur-layer img {
position: absolute;
inset: 0;
display: block;
}

.callout-blur-layer {
z-index: 2;
overflow: hidden;
pointer-events: none;
}

.callout-blur-layer img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 52% center;
filter: blur(2.6px);
transform: scale(1.04);
transform-origin: left center;
}

.story-screen .screen-picture img {
object-position: 53% center;
}

.story-screen .screen-picture {
display: none;
}

.final-screen .screen-picture img {
object-position: 52% 50%;
}

/* =========================
Shared Typography
========================= */

.gradient-text {
background: var(--life-brand-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

.eyebrow {
font-family: 'Itim', cursive;
font-weight: 400;
font-size: clamp(30px, 2.1vw, 46px);
line-height: 1.1;
letter-spacing: 0;
}

/* =========================
Welcome Slide
========================= */

.welcome-copy {
position: absolute;
left: 5.6vw;
top: 26vh;
z-index: 4;
width: min(47vw, 760px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 28px;
}

.welcome-copy h1 {
font-family: 'Galano', Arial, sans-serif;
font-size: 38px;
font-weight: 600;
line-height: 1.18;
color: #ffffff;
letter-spacing: 0;
}

.welcome-copy .eyebrow {
font-size: clamp(34px, 2.5vw, 48px);
}

.intro-copy {
font-family: 'Galano', Arial, sans-serif;
font-size: clamp(16px, 1.15vw, 24px);
font-weight: 400;
line-height: 1.65;
color: rgba(255, 255, 255, 0.82);
letter-spacing: 0;
}

.text-line {
display: block;
}

.welcome-doit {
position: absolute;
right: 28vw;
bottom: 3vh;
z-index: 3;
width: clamp(140px, 14vw, 270px);
height: auto;
object-fit: contain;
filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.32));
}

/* =========================
CTA Button
========================= */

.life-cta {
--cta-height: 58px;
--cta-icon: 40px;
--cta-edge: 8px;
--cta-space: 16px;
--cta-border: 2px;

position: relative;
width: fit-content;
max-width: 100%;
height: var(--cta-height);
padding: var(--cta-edge) var(--cta-space) var(--cta-edge) calc(var(--cta-edge) + var(--cta-icon) + var(--cta-space));
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 999px;
background: var(--life-conic-gradient);
box-shadow: 0 8px 17px rgba(0, 0, 0, 0.24);
cursor: pointer;
text-decoration: none;
transition:
padding 0.35s ease,
box-shadow 0.35s ease,
opacity 0.45s ease,
transform 0.45s ease;
animation: life-spin 2.5s linear infinite;
}

.life-cta::after {
content: '';
position: absolute;
inset: var(--cta-border);
z-index: 0;
border-radius: inherit;
background: var(--life-deep);
transition: background 0.35s ease, inset 0.35s ease;
}

.life-cta-icon {
position: absolute;
left: calc(var(--cta-edge) + var(--cta-border));
top: 50%;
z-index: 1;
width: var(--cta-icon);
height: var(--cta-icon);
display: grid;
place-items: center;
border-radius: 50%;
color: var(--life-navy);
background: var(--life-brand-gradient-soft);
transform: translateY(-50%);
transition:
left 0.45s cubic-bezier(0.2, 0.75, 0.2, 1),
background 0.3s ease,
color 0.3s ease;
}

.life-cta-icon i {
font-size: 22px;
line-height: 1;
}

.life-cta-text {
position: relative;
z-index: 1;
display: block;
font-family: 'Uhudscript', 'Itim', cursive;
font-size: clamp(25px, 1.75vw, 34px);
font-weight: 400;
letter-spacing: 1px;
white-space: nowrap;
background: var(--life-brand-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
transition: color 0.25s ease, -webkit-text-fill-color 0.25s ease;
}

.life-cta:hover,
.life-cta:focus-visible {
padding: var(--cta-edge) calc(var(--cta-edge) + var(--cta-icon) + var(--cta-space)) var(--cta-edge) var(--cta-space);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
outline: none;
}

.life-cta:hover::after,
.life-cta:focus-visible::after {
background: var(--life-brand-gradient-soft);
inset: 0;
}

.life-cta:hover .life-cta-icon,
.life-cta:focus-visible .life-cta-icon {
left: calc(100% - var(--cta-icon) - var(--cta-edge) - var(--cta-border));
color: var(--life-navy);
background: var(--life-white);
}

.life-cta:hover .life-cta-text,
.life-cta:focus-visible .life-cta-text {
color: var(--life-navy);
background: none;
-webkit-text-fill-color: var(--life-navy);
}

.life-cta.is-sliding-out {
opacity: 0;
transform: translateX(80px);
pointer-events: none;
}

/* =========================
Callout Slide
========================= */

.speech-bubble {
position: absolute;
left: 31.5vw;
top: 46vh;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: clamp(390px, 32.5vw, 660px);
aspect-ratio: 1.92;
padding: 0;
background: transparent;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
transition:
opacity 550ms ease 220ms,
transform 700ms cubic-bezier(0.18, 0.9, 0.3, 1.15) 220ms;
}

.speech-bubble-image {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
pointer-events: none;
}

.life-screen.is-active .speech-bubble {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

.speech-bubble p {
position: relative;
z-index: 2;
width: 72%;
margin: 0;
transform: translate(3%, -2%);
font-family: 'Itim', cursive;
font-size: clamp(23px, 1.9vw, 38px);
font-weight: 400;
line-height: 1.45;
text-align: center;
color: var(--life-navy);
letter-spacing: 0;
}

/* =========================
Mr DoIT Characters
========================= */

.callout-doit {
position: absolute;
left: 5vw;
bottom: 3.5vh;
z-index: 4;
width: clamp(150px, 13.5vw, 270px);
height: auto;
object-fit: contain;
filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.32));
transform: translateY(26px);
opacity: 0;
transition:
opacity 540ms ease 180ms,
transform 760ms cubic-bezier(0.18, 0.9, 0.3, 1.1) 180ms;
}

.life-screen.is-active .callout-doit {
opacity: 1;
transform: translateY(0);
}

.screen-doit {
position: absolute;
left: 36vw;
bottom: 8vh;
z-index: 4;
width: clamp(145px, 13.5vw, 270px);
height: clamp(190px, 18vw, 350px);
object-fit: cover;
object-position: center bottom;
filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.3));
transform: translateY(26px);
opacity: 0;
transition:
opacity 540ms ease 180ms,
transform 760ms cubic-bezier(0.18, 0.9, 0.3, 1.1) 180ms;
}

.life-screen.is-active .screen-doit {
opacity: 1;
transform: translateY(0);
}

/* Slide 4 (Time to sync up) - same cover behavior, slightly bigger box */
.life-screen[data-screen="4"] .screen-doit {
width: clamp(167px, 15.5vw, 310px);
height: clamp(218px, 20.5vw, 400px);
}

/* Slides 6, 8, 10, 12 - switch to contain so animated elements that move
above/beside the standing pose (thought bubbles, floating icons, tilted
head) are never cropped, with a bigger box to compensate for the extra
breathing room contain leaves around the character */
.life-screen[data-screen="6"] .screen-doit,
.life-screen[data-screen="8"] .screen-doit,
.life-screen[data-screen="10"] .screen-doit,
.life-screen[data-screen="12"] .screen-doit {
width: clamp(200px, 19vw, 375px);
height: clamp(260px, 24.5vw, 470px); 
object-fit: contain;
object-position: center bottom;
z-index: 6;  
}

/* =========================
Story Cards And Media Panels
========================= */

.story-card,
.media-panel {
position: absolute;
z-index: 4;
transform: translateX(70px);
opacity: 0;
transition:
opacity 560ms ease 270ms,
transform 850ms cubic-bezier(0.18, 0.9, 0.3, 1.05) 270ms;
}

.story-card {
right: 7vw;
top: 23vh;
width: min(45vw, 630px);
min-height: clamp(280px, 40vh, 500px);
border-radius: 18px;
background:
var(--projects-card-surface) padding-box,
var(--big-card-border-gradient) border-box;
border: 1.5px solid transparent;
box-shadow: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: clamp(38px, 4vw, 72px) clamp(42px, 5vw, 96px);
gap: clamp(18px, 2.3vh, 28px);
}

.life-screen.is-active .story-card,
.life-screen.is-active .media-panel {
opacity: 1;
transform: translateX(0);
}

.story-card .eyebrow {
font-size: clamp(30px, 2.25vw, 48px);
}

.q-emoji {
display: inline-block;
position: relative;
top: -3px;
font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
font-size: 32px;
font-weight: 400;
line-height: 1.2;
background: none;
background-clip: initial;
-webkit-background-clip: initial;
-webkit-text-fill-color: initial;
color: initial;
vertical-align: middle;
}

.story-card h2 {
font-family: 'Galano', Arial, sans-serif;
font-size: clamp(34px, 2.5vw, 58px);
font-weight: 600;
line-height: 1.24;
color: #ffffff;
letter-spacing: 0;
}

.story-card h2 .accent-word {
background: var(--life-brand-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

.accent-line {
width: clamp(76px, 5vw, 110px);
height: 3px;
border-radius: 999px;
background: var(--life-brand-gradient);
}

.story-card p:last-child {
font-family: 'Galano', Arial, sans-serif;
font-size: clamp(17px, 1.15vw, 24px);
font-weight: 400;
line-height: 1.72;
color: rgba(255, 255, 255, 0.82);
letter-spacing: 0;
}

.media-panel {
right: 2.5vw;
top: 20.5vh;
width: min(48vw, 700px);
/*min-height: clamp(310px, 43vh, 540px);*/
background:
var(--projects-card-surface) padding-box,
var(--big-card-border-gradient) border-box;
border: 1.5px solid transparent;
outline: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
overflow: hidden;
}

.media-panel img {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
/*object-fit: contain;*/
object-position: center;
background: transparent;
border: 0;
outline: 0;
box-shadow: none;
}

.media-tab-label {
position: absolute;
z-index: 5;
right: calc(48vw + 40px); 
left: auto;
top: 50%;
transform: translateY(-50%) translateX(70px);
max-width: 28vw;         
text-align: right;    
white-space: normal;
overflow-wrap: break-word;
font-family: 'Galano', Arial, sans-serif;
font-weight: 400;
color: #ffffff;
font-size: clamp(28px, 2.1vw, 18px);
line-height: 1.4;
}

.life-screen.is-active .media-tab-label {
transform: translateY(-50%) translateX(0);
}

@media (max-width: 768px) {
.media-screen {
display: flex;
flex-direction: column;
align-items: center;
}
.media-tab-label {
position: static !important;
transform: none !important;
opacity: 1 !important;
order: 1;
margin: 192px 0 16px;
max-width: 90%;
text-align: center;
line-height: 1.6;
font-family: 'Galano', sans-serif;
font-weight: 400;
color: #ffffff;
font-size: 20px;
}
.media-panel {
order: 2;
}
}

.media-slider-dots {
position: absolute;
right: 2.5vw;
top: calc(38vh + clamp(310px, 43vh, 540px) + 18px);
z-index: 5;
width: min(48vw, 700px);
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
opacity: 0;
transform: translateX(70px);
transition:
opacity 560ms ease 330ms,
transform 850ms cubic-bezier(0.18, 0.9, 0.3, 1.05) 330ms;
pointer-events: none;
}

.media-slider-dot {
width: 10px;
height: 10px;
border: 0;
border-radius: 999px;
background: rgba(0, 0, 0, 0.44);
padding: 0;
cursor: pointer;
transition:
width 220ms ease,
background-color 220ms ease,
opacity 220ms ease;
}

.media-slider-dot.is-active {
width: 40px;
background: linear-gradient(90deg, #02bcdd 0%, #06d1e5 24%, #64eda8 62%, #d0f88d 100%);
}

.media-slider-dot:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 4px;
}

/* =========================
Final CTA Slide
========================= */

.final-copy {
position: absolute;
left: 55vw;
top: 18vh;
z-index: 4;
width: min(43vw, 760px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(28px, 3.3vh, 46px);
opacity: 0;
transform: translateY(34px);
transition:
opacity 650ms ease 220ms,
transform 780ms cubic-bezier(0.18, 0.9, 0.3, 1.05) 220ms;
}

.life-screen.is-active .final-copy {
opacity: 1;
transform: translateY(0);
}

.final-title {
font-family: 'Itim', cursive;
font-size: clamp(30px, 2.25vw, 48px);
font-weight: 400;
line-height: 1.1;
}

.final-copy h2 {
font-family: 'Galano', Arial, sans-serif;
font-size: clamp(26px, 2vw, 42px);
font-weight: 500;
line-height: 1.42;
color: #ffffff;
letter-spacing: 0;
}

.final-copy p {
font-family: 'Galano', Arial, sans-serif;
font-size: clamp(20px, 1.45vw, 32px);
font-weight: 400;
line-height: 1.62;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0;
}

.final-copy .final-title {
font-family: 'Itim', cursive;
font-size: clamp(30px, 2.25vw, 48px);
font-weight: 400;
line-height: 1.1;
}

.final-copy .join-line {
font-family: 'Itim', cursive;
font-size: clamp(24px, 1.75vw, 38px);
font-weight: 400;
line-height: 1;
}

.final-cta {
--cta-height: 70px;
--cta-icon: 48px;
--cta-edge: 9px;
--cta-space: 22px;
}

/* =========================
Navigation Arrows
========================= */

.cursor-arrow {
position: fixed;
left: 50%;
top: 50%;
z-index: 30;
width: clamp(58px, 3.6vw, 68px);
height: clamp(58px, 3.6vw, 68px);
display: grid;
place-items: center;
border: 1.3px solid rgba(255, 255, 255, 0.98);
border-radius: 50%;
background: transparent;
color: #ffffff;
opacity: 0;
pointer-events: none;
visibility: visible;
box-shadow: none;
transition: opacity 180ms ease, transform 180ms ease;
}

.cursor-arrow i {
font-size: clamp(23px, 1.65vw, 30px);
line-height: 1;
}

/* =========================
Animations
========================= */

@keyframes life-spin {
to { --life-angle: 360deg; }
}

@keyframes life-doit-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

/* =========================
Large Desktop
========================= */

@media (min-width: 1600px) {
.story-card {
right: 8vw;
top: 20vh;
}

.screen-doit {
left: 37.5vw;
}
}

/* =========================
Tablet Base
========================= */

@media (max-width: 1024px) {
html,
body {
overflow: hidden;
}

.life-stage {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: var(--life-footer-space);
min-height: 0;
height: auto;
}

.cursor-arrow {
display: none;
}

.welcome-copy {
left: 6vw;
/*top: 11vh;*/
width: min(62vw, 640px);
gap: 16px;
}

.welcome-copy h1 {
font-size: clamp(34px, 4.5vw, 52px);
}

.intro-copy {
font-size: clamp(15px, 2vw, 20px);
}

.welcome-doit {
right: 29vw;
bottom: 10vh;
width: clamp(150px, 24vw, 260px);
}

}

/* =========================
Tablet Emoji Sizing
========================= */

@media (max-width: 1024px) and (min-width: 768px) {
.q-emoji {
font-size: 24px;
top: -2px;
}
}

/* =========================
Tablet Landscape
========================= */

@media (max-width: 1368px) and (min-width: 768px) and (orientation: landscape) {
.life-screen[data-screen="0"] .welcome-copy {
/*top: 14vh;*/
}

.callout-screen .screen-picture img,
.callout-screen .callout-blur-layer img {
object-position: 75% center;
transform-origin: right center;
}

.story-background img,
.story-screen .screen-picture img {
object-position: left center;
}

.story-card {
right: 4vw;
top: 32vh;
}

.media-panel {
top: 32vh;
}

.media-slider-dots {
}

.screen-doit {
left: 30vw;
bottom: 8vh;
/*width: clamp(145px, 18.5vw, 270px);*/
}

.final-screen .screen-picture img {
object-position: 28% 50%;
}

.final-copy {
left: 60vw;
}

.life-screen[data-screen="1"] .speech-bubble {
left: 31.5vw;
top: 62vh;
width: clamp(300px, 27vw, 410px);
}

.life-screen[data-screen="1"] .speech-bubble p {
font-size: clamp(17px, 1.45vw, 24px);
line-height: 1.38;
}

.life-screen[data-screen="1"] .callout-doit {
left: 5.6vw;
bottom: 6.5vh;
width: clamp(135px, 12.5vw, 180px);
}

.media-tab-label {
    position: absolute !important;
    top: 18vh !important;
    left: 75% !important;
    transform: translateX(-50%) !important;
    width: 80vw !important;
    text-align: center !important;
    max-width: 45vw !important;
    text-align: center !important;
    line-height: 1.5 !important;
    font-size: clamp(24px, 2.5vw, 32px) !important;
}
.media-tab-label .text-line {
    display: inline !important;
}
}

/*@media (width: 1024px) and (height: 768px) and (orientation: landscape) {*/
    
/*}*/

/* =========================
Tablet Portrait
========================= */

@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
.story-background img,
.life-screen:not(.callout-screen):not(.footer-screen) .screen-picture img {
object-position: center 95%;
}

.callout-screen .screen-picture img,
.callout-screen .callout-blur-layer img {
object-position: 75% center;
transform-origin: right center;
}

.welcome-copy {
left: 6vw;
top: 11vh;
width: min(62vw, 640px);
gap: 16px;
}

.welcome-doit {
right: auto;
left: 27vw;
bottom: 2vh;
width: clamp(122px, 42vw, 210px);
}

.speech-bubble {
left: 50%;
top: 46%;
width: clamp(390px, 52vw, 590px);
}

.speech-bubble p {
width: 72%;
transform: translate(3%, -2%);
}

.callout-doit {
left: 5vw;
bottom: 3.5vh;
width: clamp(150px, 18vw, 260px);
}

.screen-doit {
left: 36vw;
bottom: 8vh;
width: clamp(145px, 18vw, 270px);
}

.story-card,
.media-panel {
right: auto;
left: 6vw;
top: 23vh;
width: min(52vw, 630px);
min-height: clamp(280px, 34vh, 500px);
}

.media-slider-dots {
right: 7vw;
left: auto;
top: calc(23vh + clamp(280px, 34vh, 500px) + 16px);
width: min(52vw, 630px);
}

.story-card {
padding: 0;
gap: clamp(16px, 2vh, 26px);
min-height: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
align-items: flex-start;
justify-content: flex-start;
}

.story-card > * {
margin-left: 0;
margin-right: 0;
}

.media-panel {
right: 2.5vw;
left: auto;
top: 20.5vh;
width: min(56vw, 700px);
min-height: clamp(310px, 40vh, 540px);
}

.media-panel img {
min-height: clamp(310px, 0vh, 540px);
}

.final-copy {
left: auto;
right: 5vw;
top: 12vh;
width: 82vw;
align-items: flex-end;
text-align: right;
gap: 22px;
}

.final-copy .text-line {
display: block;
}

.final-copy h2 .text-line + .text-line {
margin-top: 8px;
}

.life-screen[data-screen="0"] .welcome-copy {
left: 6vw;
top: 14vh;
width: min(62vw, 640px);
gap: 16px;
}

.life-screen[data-screen="0"] .welcome-doit {
right: auto;
left: 27vw;
bottom: 5vh;
width: clamp(122px, 42vw, 210px);
}

.life-screen[data-screen="1"] .speech-bubble {
left: 50%;
top: 66%;
width: clamp(390px, 52vw, 590px);
}

.life-screen[data-screen="1"] .speech-bubble p {
width: 72%;
transform: translate(3%, -2%);
}

.life-screen[data-screen="1"] .callout-doit {
left: 5vw;
bottom: 4.5vh;
width: clamp(190px, 18vw, 260px);
}

.life-screen[data-screen="2"] .story-card {
left: 6vw;
right: auto;
/*top: 14vh;*/
width: min(52vw, 630px);
min-height: clamp(280px, 34vh, 500px);
}

.life-screen[data-screen="2"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="3"] .media-panel {
left: 50%;
right: auto;
top: 30vh;
width: min(76vw, 860px);
min-height: clamp(310px, 40vh, 540px);
transform: translateX(-50%) translateY(44px);
}

.life-screen[data-screen="3"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="4"] .story-card {
left: 6vw;
right: auto;
/*top: 14vh;*/
width: min(52vw, 630px);
min-height: clamp(280px, 34vh, 500px);
}

.life-screen[data-screen="4"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="5"] .media-panel {
left: 50%;
right: auto;
top: 30vh;
width: min(76vw, 860px);
min-height: clamp(310px, 40vh, 540px);
transform: translateX(-50%) translateY(44px);
}

.life-screen[data-screen="5"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="6"] .story-card {
left: 6vw;
right: auto;
/*top: 14vh;*/
width: min(52vw, 630px);
min-height: clamp(280px, 34vh, 500px);
}

.life-screen[data-screen="6"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="7"] .media-panel {
left: 50%;
right: auto;
top: 30vh;
width: min(76vw, 860px);
min-height: clamp(310px, 40vh, 540px);
transform: translateX(-50%) translateY(44px);
}

.life-screen[data-screen="7"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="8"] .story-card {
left: 6vw;
right: auto;
/*top: 14vh;*/
width: min(52vw, 630px);
min-height: clamp(280px, 34vh, 500px);
}

.life-screen[data-screen="8"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="9"] .media-panel {
left: 50%;
right: auto;
top: 30vh;
width: min(76vw, 860px);
min-height: clamp(310px, 40vh, 540px);
transform: translateX(-50%) translateY(44px);
}

.life-screen[data-screen="9"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="10"] .story-card {
left: 6vw;
right: auto;
/*top: 14vh;*/
width: min(52vw, 630px);
min-height: clamp(280px, 34vh, 500px);
}

.life-screen[data-screen="10"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="11"] .media-panel {
left: 50%;
right: auto;
top: 30vh;
width: min(76vw, 860px);
min-height: clamp(310px, 40vh, 540px);
transform: translateX(-50%) translateY(44px);
}

.life-screen[data-screen="11"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="12"] .story-card {
left: 6vw;
right: auto;
/*top: 14vh;*/
width: min(64vw, 640px);
min-height: clamp(280px, 34vh, 500px);
}

.life-screen[data-screen="12"] .story-card h2 .text-line {
white-space: nowrap;
}

.life-screen[data-screen="12"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="13"] .media-panel {
left: 50%;
right: auto;
top: 30vh;
width: min(76vw, 860px);
min-height: clamp(310px, 40vh, 540px);
transform: translateX(-50%) translateY(44px);
}

.life-screen[data-screen="13"] .screen-doit {
left: 36vw;
bottom: 5vh;
width: clamp(165px, 22vw, 310px);
}

.life-screen[data-screen="14"] .final-copy {
left: auto;
right: 5vw;
top: 12vh;
width: 82vw;
align-items: flex-end;
text-align: right;
gap: 22px;
}

.life-screen.is-active .media-panel {
transform: translateX(-50%);
}

.media-slider-dots {
position: absolute;
left: 50%;
right: auto;
bottom: clamp(360px, 8vh, 82px);
z-index: 8;
width: max-content;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
opacity: 0;
transform: translateX(-50%);
transition: opacity 240ms ease;
pointer-events: none;
}
}

/* =========================
Mobile
========================= */

@media (max-width: 767px) {
:root {
--life-footer-space: 42px;
}

body.life-page {
background: #001d31;
}

.footer-screen {
--life-footer-overflow: auto;
--life-footer-placeholder-position: relative;
--life-footer-placeholder-bottom: auto;
--life-footer-placeholder-min-height: 100%;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}

.life-stage {
height: auto;
min-height: 0;
}

.life-screen {
height: 100%;
}

.callout-blur-layer {
display: none;
}

.screen-picture img {
object-position: center bottom;
}

.welcome-screen .screen-picture img,
.story-screen .screen-picture img,
.final-screen .screen-picture img {
object-position: center bottom;
}

.callout-screen .screen-picture img {
object-position: right center;
transform-origin: right center;
}

.final-screen .screen-picture img {
transform: translateY(7vh) scale(1.07);
transform-origin: center bottom;
}

.welcome-copy {
left: 7.5vw;
top: 20vh;
width: min(72vw, 360px);
gap: 16px;
}

.eyebrow,
.welcome-copy .eyebrow {
font-size: 20px;
line-height: 1.12;
}

.welcome-copy h1 {
font-size: clamp(21px, 6.3vw, 32px);
line-height: 1.24;
max-width: 16ch;
}

.intro-copy {
font-size: clamp(11px, 3.15vw, 15px);
line-height: 1.58;
max-width: 30ch;
color: rgba(255, 255, 255, 0.86);
}

.text-line {
display: inline;
}

.text-line + .text-line::before {
content: " ";
}

.final-copy .text-line {
display: block;
}

.final-copy .text-line + .text-line::before {
content: none;
}

.final-copy h2 .text-line + .text-line {
margin-top: 7px;
}

.welcome-doit {
right: auto;
left: 27vw;
bottom: 2vh;
width: clamp(122px, 42vw, 210px);
}

.life-cta {
--cta-height: 42px;
--cta-icon: 30px;
--cta-edge: 6px;
--cta-space: 10px;
margin-top: 2px;
}

.life-cta-icon i {
font-size: 15px;
}

.life-cta-text {
font-size: clamp(18px, 5.4vw, 25px);
letter-spacing: 0.4px;
}

.speech-bubble {
left: 66%;
top: 74%;
width: min(75vw, 330px);
}

.speech-bubble p {
font-size: clamp(18px, 4.5vw, 25px);
line-height: 1.32;
text-align: center;
transform: translate(5%, -1%);
width: 58%;
}

.callout-doit {
left: 3vw;
bottom: 2vh;
width: clamp(118px, 36vw, 176px);
}

.story-screen .screen-picture img {
object-position: center bottom;
}

.screen-doit {
left: var(--mobile-doit-left, 12vw);
bottom: var(--mobile-doit-bottom, 2vh);
width: var(--mobile-doit-width, clamp(112px, 35vw, 165px));
}

.story-card,
.media-panel {
left: var(--mobile-card-left, 0vw);
right: auto;
width: var(--mobile-card-width, 86vw);
min-height: 200px;
border-radius: 14px;
transform: translateY(44px);
}

.life-screen.is-active .story-card {
transform: translateY(0);
padding: 30px;
}

.life-screen.is-active .media-panel {
transform: translateY(0);
padding: 10px;
}

.story-card {
padding: clamp(24px, 7vw, 42px);
gap: 14px;
min-height: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}

.story-card .eyebrow {
font-size: clamp(21px, 6.1vw, 30px);
}

.q-emoji {
font-size: 20px;
top: -1px;
}

.story-card h2 {
font-size: clamp(24px, 7vw, 36px);
line-height: 1.22;
}

.story-card p:last-child {
font-size: clamp(13px, 4vw, 17px);
line-height: 1.62;
}

.accent-line {
width: 70px;
height: 2px;
}

.media-panel {
left: var(--mobile-media-left, 4vw);
width: var(--mobile-media-width, 92vw);
/*min-height: var(--mobile-media-min-height, 290px);*/
max-height: 42vh;
transform: translateY(44px);
}

.media-panel img {
/*min-height: var(--mobile-media-min-height, 290px);*/
}

.life-screen.is-active .media-panel {
transform: translateY(0);
}

.media-slider-dots {
left: var(--mobile-media-left, 4vw);
right: auto;
top: -28vh;
width: var(--mobile-media-width, 92vw);
gap: 16px;
transform: translateY(44px);
}

.media-slider-dot {
width: 9px;
height: 9px;
}

.media-slider-dot.is-active {
width: 34px;
}

.life-screen[data-screen="2"] {
--mobile-card-left: 0vw;
--mobile-card-top: 24vh;
--mobile-card-width: 86vw;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="3"] {
--mobile-media-left: 4vw;
--mobile-media-top: 26vh;
--mobile-media-width: 92vw;
--mobile-media-min-height: 290px;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="4"] {
--mobile-card-left: 0vw;
--mobile-card-top: 24vh;
--mobile-card-width: 86vw;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="5"] {
--mobile-media-left: 4vw;
--mobile-media-top: 26vh;
--mobile-media-width: 92vw;
--mobile-media-min-height: 290px;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="6"] {
--mobile-card-left: 0vw;
--mobile-card-top: 12vh;
--mobile-card-width: 86vw;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="7"] {
--mobile-media-left: 4vw;
--mobile-media-top: 16vh;
--mobile-media-width: 92vw;
--mobile-media-min-height: 290px;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="8"] {
--mobile-card-left: 0vw;
--mobile-card-top: 24vh;
--mobile-card-width: 86vw;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="9"] {
--mobile-media-left: 4vw;
--mobile-media-top: 26vh;
--mobile-media-width: 92vw;
--mobile-media-min-height: 290px;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="10"] {
--mobile-card-left: 0vw;
--mobile-card-top: 24vh;
--mobile-card-width: 86vw;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="11"] {
--mobile-media-left: 4vw;
--mobile-media-top: 26vh;
--mobile-media-width: 92vw;
--mobile-media-min-height: 290px;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="12"] {
--mobile-card-left: 0vw;
--mobile-card-top: 12vh;
--mobile-card-width: 86vw;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.life-screen[data-screen="13"] {
--mobile-media-left: 4vw;
--mobile-media-top: 16vh;
--mobile-media-width: 92vw;
--mobile-media-min-height: 290px;
--mobile-doit-left: 12vw;
--mobile-doit-bottom: 2vh;
--mobile-doit-width: clamp(112px, 35vw, 165px);
}

.final-copy {
left: auto;
right: 5vw;
top: 12vh;
width: 82vw;
align-items: baseline;
text-align: left;
gap: 22px;
}

.final-copy .final-title {
font-size: clamp(21px, 6.1vw, 30px);
line-height: 1.12;
}

.final-copy h2 {
font-size: clamp(18px, 5.2vw, 26px);
line-height: 1.32;
}

.final-copy p {
font-size: clamp(15px, 4.5vw, 20px);
line-height: 1.7;
}

.final-copy .join-line {
font-size: clamp(20px, 6vw, 28px);
}

.final-cta {
--cta-height: 52px;
--cta-icon: 36px;
--cta-edge: 7px;
--cta-space: 12px;
}

.media-slider-dots {
position: absolute;
left: 50%;
right: auto;
bottom: clamp(280px, 8vh, 82px);
z-index: 8;
width: max-content;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
opacity: 0;
transform: translateX(-50%);
transition: opacity 240ms ease;
pointer-events: none;
}
}

/* =========================
Small Mobile
========================= */

@media (max-width: 420px) {
.welcome-copy {
top: 18vh;
}

.welcome-copy h1 {
font-size: clamp(20px, 6vw, 26px);
}

.intro-copy {
font-size: 14px;
}

.story-card {
padding: 0;
}

.story-card h2 {
font-size: clamp(23px, 6.4vw, 30px);
}

.story-card p:last-child {
font-size: 13px;
}

.media-slider-dots {
position: absolute;
left: 50%;
right: auto;
bottom: clamp(280px, 8vh, 82px);
z-index: 8;
width: max-content;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
opacity: 0;
transform: translateX(-50%);
transition: opacity 240ms ease;
pointer-events: none;
}

}

/* =========================
Reduced Motion
========================= */

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms;
animation-iteration-count: 1;
scroll-behavior: auto;
transition-duration: 0.01ms;
}
}

.media-panel .static-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 18px;
}

@media only screen and (max-width: 767px) {
.media-panel .static-image {
width: 100% ;
height: 100% ;
object-fit: contain;
object-position: center center;
display: block;
border-radius: 18px;
}
}

.media-slider-dots {
position: absolute;
left: 75%;
right: auto;
bottom: clamp(42px, 7vh, 82px);
z-index: 8;
width: max-content;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
opacity: 0;
transform: translateX(-50%);
transition: opacity 240ms ease;
pointer-events: none;
}

body.life-story-active .media-slider-dots {
opacity: 1;
pointer-events: auto;
}

@media (max-width: 768px) {
.media-slider-dots {
position: absolute;
left: 50%;
right: auto;
bottom: clamp(320px, 8vh, 82px);
z-index: 8;
width: max-content;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
opacity: 0;
transform: translateX(-50%);
transition: opacity 240ms ease;
pointer-events: none;
}

.media-slider-dot {
width: 10px;
height: 10px;
border: 0;
border-radius: 999px;
background: rgb(216 215 215 / 44%);
padding: 0;
cursor: pointer;
transition: width 220ms ease, background-color 220ms ease, opacity 220ms ease;
}
}

@media (max-width: 1024px) and (orientation: portrait) {
.media-slider-dots {
left: 50%;
bottom: clamp(340px, 22vh, 390px);
transform: translateX(-50%);
}
}
@media (max-width: 767px) {
    .media-panel {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}
@media (max-width: 361px) {
    .media-tab-label {
        margin: 140px 0 16px;
        font-size: 20px;
    }
    .media-slider-dots {
        top: -18vh;
    }
}

@media (width: 768px) and (height: 1024px) and (orientation: portrait) {
.life-screen[data-screen="2"] .story-card {
left: 6vw;
right: auto;
/*top: 14vh;*/
width: min(52vw, 630px);
min-height: clamp(280px, 34vh, 500px);
}
.media-slider-dots{
    position: absolute;
    top: 14vh;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100 ;
}

    .media-tab-label{
    max-width: 380px;
    white-space: normal;
    line-height: 1.4;
}

.media-tab-label .text-line{
    display: inline;
}
}