/* =====================================================================
   LIFE+ — Life at DDT in the Home system. Scoped by html.lfx (life-plus.js).
   ===================================================================== */
.lfx .lifeHero, .lfx .lifeDesc, .lfx .lifeCulture, .lfx .lifeMoments, .lfx .coGrow { position: relative; isolation: isolate; background: #fff !important; }
/* frame: outer lines at the page padding + quarter lines (Home's white sections) */
.lfx .lifeHero::before, .lfx .lifeDesc::before, .lfx .lifeCulture::before, .lfx .lifeMoments::before, .lfx .coGrow::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); z-index: -1; pointer-events: none;
  border-left: 1px solid rgba(17, 19, 31, .07); border-right: 1px solid rgba(17, 19, 31, .07);
  background-image: linear-gradient(90deg, transparent calc(25% - .5px), rgba(17, 19, 31, .05) calc(25% - .5px) calc(25% + .5px), transparent calc(25% + .5px) calc(50% - .5px), rgba(17, 19, 31, .05) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px) calc(75% - .5px), rgba(17, 19, 31, .05) calc(75% - .5px) calc(75% + .5px), transparent calc(75% + .5px)); }
.lfx .lifeDesc::after, .lfx .lifeCulture::after, .lfx .lifeMoments::after, .lfx .coGrow::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #e3e4ea; z-index: -1; }

/* shared voice: petal eyebrow, ink heading, grey tail that sweeps to ink on hover */
.lfx .lfxEye { margin: 0 0 18px; display: inline-flex; align-items: center; gap: 8px; color: #6b7183; font: 700 12.5px/1 "Geologica", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.lfx .lfxEye::before { content: ""; width: 10px; height: 10px; border-radius: 50% 50% 0 50%; background: #4a3dcc; }
.lfx .lifeHero__title, .lfx .lifeDesc__title, .lfx .lifeCulture__title, .lfx .lifeMoments__title, .lfx .coGrow__title { color: #11131f !important; font-weight: 500 !important; letter-spacing: -.03em !important; line-height: 1.06 !important; }
.lfx .lifeHero__t2, .lfx .lifeCulture__title em.is-teal, .lfx .lifeMoments__title em { font-style: normal !important; font-weight: inherit !important; color: transparent !important;
  background: linear-gradient(90deg, #11131f 0 50%, #a3a8b5 50% 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; transition: background-position 1s cubic-bezier(.65, 0, .35, 1); }
.lfx .lifeCulture__title em.is-brand { font-style: normal !important; font-weight: inherit !important; color: inherit !important; }
.lfx .lifeHero__title:hover .lifeHero__t2, .lfx .lifeCulture__title:hover em.is-teal, .lfx .lifeMoments__title:hover em { background-position: 0 0; }
.lfx .lifeMoments__title em.is-brand { background: none; color: #11131f !important; }

/* hero: the petal mosaic unfolds from each tile's sharp corner */
.lfx .lifeHero__text { padding-left: 24px; }
.lfx .lifeHero__title { font-size: clamp(44px, 5vw, 76px) !important; }
.lfx .lifeHero__lead { color: #555a6b; max-width: 460px; }
.lfx .lifeHero__media img { opacity: 0; transform: scale(.82); transition: opacity .6s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.lfx .lifeHero__row img:nth-child(1) { transform-origin: 100% 100%; }
.lfx .lifeHero__row img:nth-child(2) { transform-origin: 0 100%; transition-delay: .12s; }
.lfx .lifeHero__big { transform-origin: 0 0; transition-delay: .24s !important; }
.lfx .lifeHero__media.is-in img { opacity: 1; transform: none; }
.lfx .lifeHero__actions .btn--brandline { display: inline-flex; }

/* a place to learn: white, the photo sits square inside the lines, a rhythms row under the copy */
.lfx .lifeDesc { padding: clamp(96px, 10vw, 140px) var(--pad-x) !important; gap: 0 !important; min-height: 0 !important; }
.lfx .lifeDesc__text { padding: 0 clamp(24px, 4vw, 64px) 0 24px; justify-content: flex-start !important; }
.lfx .lifeDesc__title { font-size: clamp(34px, 3.6vw, 56px) !important; margin-bottom: 18px !important; }
.lfx .lifeDesc__p { color: #555a6b !important; font-size: 17px !important; line-height: 1.65 !important; }
.lfx .lifeDesc__media { border: 0 !important; border-radius: 0 !important; min-height: 520px !important; }
.lfx .lfxRhythm { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e3e4ea; }
.lfx .lfxRhythm li { display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px 18px 0; border-bottom: 1px solid #e3e4ea; }
.lfx .lfxRhythm li:nth-child(odd) { border-right: 1px solid #e3e4ea; }
.lfx .lfxRhythm li:nth-child(even) { padding-left: 16px; }
.lfx .lfxRhythm b { display: block; color: #11131f; font: 600 15px/1.3 "Geologica", sans-serif; }
.lfx .lfxRhythm small { display: block; margin-top: 4px; color: #7a7f8f; font: 400 13.5px/1.45 Inter, sans-serif; }

/* line icons that draw themselves when their section arrives */
.lfx .lfxIc { flex: none; display: inline-block; width: 26px; height: 26px; color: #4a3dcc; }
.lfx .lfxIc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lfx .lfxIc svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lfx .is-in .lfxIc svg * { animation: lfxDraw 1s cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: calc(.15s + var(--i, 0) * .1s); }
@keyframes lfxDraw { to { stroke-dashoffset: 0; } }

/* culture: the four values in a hairline grid; clip-art gone; corner brackets on hover */
.lfx .lifeCulture { padding: clamp(96px, 10vw, 140px) 0 !important; align-items: stretch !important; gap: 48px !important; min-height: 0 !important; }
.lfx .lifeCulture__head { align-items: flex-start !important; text-align: left !important; max-width: none !important; padding: 0 calc(var(--pad-x) + 24px); }
.lfx .lifeCulture__title { font-size: clamp(34px, 3.6vw, 56px) !important; }
.lfx .lifeCulture__title br { display: none; }
.lfx .lifeCulture__sub { color: #555a6b !important; font-size: 17px !important; max-width: 560px; }
.lfx .lifeCulture__grid { gap: 0 !important; margin: 0 var(--pad-x); width: auto !important; border-top: 1px solid #e3e4ea; border-bottom: 1px solid #e3e4ea; }
.lfx .lifeVal { position: relative; align-items: flex-start !important; text-align: left !important; gap: 0 !important; padding: 32px 24px 36px; min-height: 260px; }
.lfx .lifeVal + .lifeVal { border-left: 1px solid #e3e4ea; }
.lfx .lifeVal:nth-child(2) { --i: 1; } .lfx .lifeVal:nth-child(3) { --i: 2; } .lfx .lifeVal:nth-child(4) { --i: 3; }
.lfx .lifeVal__ill { display: none !important; }
.lfx .lfxIc--val { width: 34px; height: 34px; margin-bottom: auto; }
.lfx .lifeVal__text { align-items: flex-start !important; margin-top: 48px; }
.lfx .lifeVal__title { color: #11131f !important; font: 500 22px/1.25 "Geologica", sans-serif !important; letter-spacing: -.015em; }
.lfx .lifeVal__desc { color: #555a6b !important; font-size: 15.5px !important; }
.lfx .lifeVal::after { content: ""; position: absolute; inset: 12px; pointer-events: none; opacity: 0; transform: scale(1.05); transition: opacity .3s, transform .5s cubic-bezier(.2, .8, .2, 1);
  --c: #4a3dcc; --l: 14px;
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px var(--l), linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px var(--l), linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px var(--l);
  background-repeat: no-repeat; }
.lfx .lifeVal:hover::after { opacity: 1; transform: none; }

/* moments: one story per column, photo to the lines, tags as text */
.lfx .lifeMoments { padding: clamp(96px, 10vw, 140px) 0 !important; align-items: stretch !important; gap: 48px !important; min-height: 0 !important; }
.lfx .lifeMoments__head { align-items: flex-start !important; text-align: left !important; padding: 0 calc(var(--pad-x) + 24px); gap: 0 !important; }
.lfx .lifePill { background: none !important; border: 0 !important; padding: 0 !important; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; color: #6b7183 !important; font: 700 12.5px/1 "Geologica", sans-serif !important; letter-spacing: .16em; box-shadow: none !important; }
.lfx .lifePill::before { content: ""; width: 10px; height: 10px; border-radius: 50% 50% 0 50%; background: #4a3dcc; }
.lfx .lifeMoments__title { font-size: clamp(34px, 3.6vw, 56px) !important; }
.lfx .lifeMoments__grid { gap: 0 !important; margin: 0 var(--pad-x); width: auto !important; border-top: 1px solid #e3e4ea; border-bottom: 1px solid #e3e4ea; }
.lfx .lifeMoment { gap: 0 !important; }
.lfx .lifeMoment + .lifeMoment { border-left: 1px solid #e3e4ea; }
.lfx .lifeMoment__img { position: relative; border-radius: 0 !important; aspect-ratio: 4 / 3 !important; }
.lfx .lifeMoment__img img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.lfx .lifeMoment:hover .lifeMoment__img img { transform: scale(1.05); }
.lfx .lifeMoment__body { padding: 22px 24px 30px; gap: 12px !important; }
.lfx .lifeMoment__tags { gap: 12px !important; }
.lfx .lifeTag { background: none !important; padding: 0 !important; border-radius: 0 !important; color: #4a3dcc !important; font: 700 11.5px/1.2 "Geologica", sans-serif !important; letter-spacing: .14em; text-transform: uppercase; }
.lfx .lifeTag + .lifeTag::before { content: "\00b7"; margin-right: 12px; color: #c3c6d0; }
.lfx .lifeMoment__title { font: 500 20px/1.3 "Geologica", sans-serif !important; letter-spacing: -.012em !important; }
.lfx .lifeMoment__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color .35s; }
.lfx .lifeMoment:hover .lifeMoment__title { text-decoration-color: currentColor; }
.lfx .lifeMoment__desc { color: #555a6b !important; font-size: 15px !important; line-height: 1.6 !important; }
.lfx .lifeMoment .inxGo { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #4a3dcc; display: grid; place-items: center; overflow: hidden; box-shadow: 0 10px 24px -10px rgba(14, 16, 32, .5); opacity: 0; transform: scale(.6) rotate(-45deg); transition: opacity .3s, transform .55s cubic-bezier(.3, 1.4, .5, 1); }
.lfx .lifeMoment .inxGo svg { position: absolute; width: 17px; height: 17px; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.lfx .lifeMoment .inxGo svg + svg { transform: translate(-150%, 150%); }
.lfx .lifeMoment:hover .inxGo { opacity: 1; transform: none; }
.lfx .lifeMoment:hover .inxGo svg:first-child { transform: translate(150%, -150%); transition-delay: .25s; }
.lfx .lifeMoment:hover .inxGo svg + svg { transform: none; transition-delay: .25s; }

/* grow with us: heading voice, one action, the photo as a single petal tile */
.lfx .coGrow { padding: clamp(96px, 10vw, 140px) var(--pad-x) !important; }
.lfx .coGrow__text { padding-left: 24px; }
.lfx .coGrow__title { font-size: clamp(40px, 4.4vw, 64px) !important; }
.lfx .coGrow__desc { color: #555a6b !important; }
.lfx .coGrow__actions .btn--brandline { display: none !important; }
.lfx .coGrow__visual { border-radius: 50% 50% 0 50% !important; overflow: hidden; }

@media (max-width: 900px) {
  .lfx .lifeHero::before, .lfx .lifeDesc::before, .lfx .lifeCulture::before, .lfx .lifeMoments::before, .lfx .coGrow::before { background-image: none; }
  .lfx .lifeCulture__grid { grid-template-columns: 1fr 1fr !important; }
  .lfx .lifeVal:nth-child(3) { border-left: 0; }
  .lfx .lifeVal:nth-child(n + 3) { border-top: 1px solid #e3e4ea; }
  .lfx .lifeMoments__grid { grid-template-columns: 1fr !important; }
  .lfx .lifeMoment + .lifeMoment { border-left: 0; border-top: 1px solid #e3e4ea; }
  .lfx .lifeDesc__media { min-height: 320px !important; margin-top: 32px; }
}
@media (max-width: 560px) {
  .lfx .lifeCulture__grid { grid-template-columns: 1fr !important; }
  .lfx .lifeVal + .lifeVal { border-left: 0; border-top: 1px solid #e3e4ea; }
  .lfx .lifeVal { min-height: 0; }
  .lfx .lifeVal__text { margin-top: 20px; }
  .lfx .lfxRhythm { grid-template-columns: 1fr; }
  .lfx .lfxRhythm li:nth-child(odd) { border-right: 0; }
  .lfx .lfxRhythm li:nth-child(even) { padding-left: 0; }
  .lfx .lifeHero__text, .lfx .lifeDesc__text, .lfx .coGrow__text { padding-left: 4px; }
  .lfx .lifeCulture__head, .lfx .lifeMoments__head { padding: 0 calc(var(--pad-x) + 4px); }
}
@media (prefers-reduced-motion: reduce) { .lfx .lfxIc svg * { stroke-dashoffset: 0; animation: none !important; } .lfx .lifeHero__media img { opacity: 1; transform: none; } }
/* fixes: no quarter lines behind text (outer frame only), culture title keeps its break, values align, one action in Grow */
.lfx .lifeHero::before, .lfx .lifeDesc::before, .lfx .lifeCulture::before, .lfx .lifeMoments::before, .lfx .coGrow::before { background-image: none !important; }
.lfx .lifeCulture__title br { display: inline !important; }
.lfx .lfxIc--val { margin-bottom: 0 !important; }
.lfx .lifeVal { min-height: 0 !important; }
.lfx .lifeVal__text { margin-top: 36px !important; }
.lfx .coGrow__actions .btn + .btn { display: none !important; }
.lfx .lifeCulture, .lfx .lifeMoments { padding-bottom: clamp(72px, 7vw, 104px) !important; }
/* the team photo fills the section from line to line */
.lfx .lifeDesc { align-items: stretch !important; }
.lfx .lifeDesc__media { margin: calc(-1 * clamp(96px, 10vw, 140px)) 0 !important; align-self: stretch; min-height: 0 !important; }
@media (max-width: 900px) { .lfx .lifeDesc__media { margin: 32px 0 calc(-1 * clamp(96px, 10vw, 140px)) !important; min-height: 320px !important; } }
.lfx .lifeDesc__media { max-height: none !important; }

/* rhythm of backgrounds (as on Home): white · NIGHT (culture) · soft tint (moments) · white */
.lfx .lifeCulture { background: #0e1020 !important; }
.lfx .lifeCulture::before { border-color: rgba(255, 255, 255, .08) !important; }
.lfx .lifeCulture::after { background: rgba(255, 255, 255, .08) !important; }
.lfx .lifeCulture .lfxEye { color: #9aa0ae; }
.lfx .lifeCulture .lfxEye::before { background: #7b70e0; }
.lfx .lifeCulture__title { color: #fff !important; }
.lfx .lifeCulture__title em.is-teal { background-image: linear-gradient(90deg, #fff 0 50%, #6e7389 50% 100%) !important; }
.lfx .lifeCulture__sub { color: #9aa0ae !important; }
.lfx .lifeCulture__grid { border-color: rgba(255, 255, 255, .1) !important; }
.lfx .lifeCulture .lifeVal + .lifeVal { border-color: rgba(255, 255, 255, .1) !important; }
.lfx .lifeCulture .lifeVal__title { color: #fff !important; }
.lfx .lifeCulture .lifeVal__desc { color: #9aa0ae !important; }
.lfx .lifeCulture .lfxIc { color: #29ccb2; }
.lfx .lifeCulture .lifeVal::after { --c: #29ccb2; }
@media (max-width: 900px) { .lfx .lifeCulture .lifeVal:nth-child(n + 3) { border-top-color: rgba(255, 255, 255, .1) !important; } }
.lfx .lifeMoments { background: #f7f7fa !important; }
.lfx .lifeMoments .lifeMoment { background: #fff; }

/* =====================================================================
   FUN TONE (still on brand: purple/teal, the petal, our lines)
   ===================================================================== */
/* spinning stickers: circular text around a petal */
.lfx .lifeHero__media { position: relative; }
.lfx .lfxSticker { position: absolute; z-index: 3; width: 128px; height: 128px; border-radius: 50%; background: #29ccb2; color: #0e1020; display: grid; place-items: center; box-shadow: 0 18px 36px -14px rgba(14, 16, 32, .45); pointer-events: none; }
.lfx .lfxSticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: lfxSpin 16s linear infinite; }
.lfx .lfxSticker text { font: 800 10.5px "Geologica", sans-serif; letter-spacing: .14em; fill: currentColor; }
.lfx .lfxSticker i { width: 30px; height: 30px; border-radius: 50% 50% 0 50%; background: #4a3dcc; transform: rotate(-12deg); }
.lfx .lfxSticker--hero { left: 2%; bottom: 14%; }
.lfx .lfxSticker--grow { right: 2%; bottom: 8%; background: #4a3dcc; color: #fff; }
.lfx .lfxSticker--grow i { background: #29ccb2; }
@keyframes lfxSpin { to { transform: rotate(360deg); } }
.lfx .lifeHero__media img { transition: opacity .6s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1), translate .6s cubic-bezier(.2, .8, .2, 1); }

/* culture: each value owns a big petal that blooms behind its icon on hover; the icon does a little hop */
.lfx .lifeVal { overflow: hidden; isolation: isolate; }
.lfx .lifeVal::before { content: ""; position: absolute; z-index: -1; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50% 50% 0 50%; background: var(--pc, #4a3dcc); opacity: .14; transform: scale(.35) rotate(-20deg); transform-origin: 100% 0; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
.lfx .lifeVal:nth-child(even) { --pc: #29ccb2; }
.lfx .lifeVal:hover::before { transform: scale(1) rotate(0deg); opacity: .9; }
.lfx .lifeVal:hover .lfxIc--val { animation: lfxHop .6s cubic-bezier(.3, 1.6, .5, 1); }
.lfx .lifeCulture .lifeVal:hover .lfxIc { color: #fff; }
@keyframes lfxHop { 40% { transform: translateY(-8px) rotate(-8deg); } }
.lfx .lifeVal::after { display: none; }   /* the petal replaces the brackets here */

/* moments: pinned photos - white frames, a slight tilt each, they straighten and lift on hover */
.lfx .lifeMoments__grid { border: 0 !important; gap: clamp(20px, 2.4vw, 36px) !important; padding: 8px 0 12px; }
.lfx .lifeMoment, .lfx .lifeMoment + .lifeMoment { border: 0 !important; padding: 12px 12px 4px; background: #fff; box-shadow: 0 1px 0 rgba(17, 19, 31, .04), 0 18px 40px -22px rgba(17, 19, 31, .35); transform: rotate(var(--tilt, -1.2deg)); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), box-shadow .5s; }
.lfx .lifeMoment:nth-child(2) { --tilt: 1deg; } .lfx .lifeMoment:nth-child(3) { --tilt: -.6deg; }
.lfx .lifeMoment:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 1px 0 rgba(17, 19, 31, .04), 0 30px 60px -26px rgba(17, 19, 31, .45); }
.lfx .lifeMoment__body { padding: 18px 8px 22px !important; }
/* a strip of tape on each photo */
.lfx .lifeMoment::before { content: ""; position: absolute; z-index: 2; top: -10px; left: 50%; width: 84px; height: 22px; margin-left: -42px; background: rgba(41, 204, 178, .55); transform: rotate(calc(var(--tilt, -1.2deg) * -3)); }
.lfx .lifeMoment:nth-child(2)::before { background: rgba(74, 61, 204, .4); }
.lfx .lifeMoment { position: relative; }

@media (max-width: 900px) { .lfx .lfxSticker { width: 96px; height: 96px; } .lfx .lfxSticker text { font-size: 9px; } .lfx .lifeMoments__grid { padding: 8px 16px; } }
@media (prefers-reduced-motion: reduce) { .lfx .lfxSticker svg { animation: none; } }
.lfx .lfxSticker--grow { right: calc(var(--pad-x) + 24px); bottom: 12%; }
/* rhythms row runs from the frame line to the photo: no side inset; content keeps its inset */
.lfx .lfxRhythm { margin-left: -24px !important; margin-right: calc(-1 * clamp(24px, 4vw, 64px)) !important; }
.lfx .lfxRhythm li:nth-child(odd) { padding-left: 24px !important; }
.lfx .lfxRhythm li:nth-child(even) { padding-left: 20px !important; padding-right: 20px; }
@media (max-width: 900px) { .lfx .lfxRhythm { margin-right: -24px !important; } }
/* audit fixes */
.lfx .lfxSticker--hero { bottom: 34% !important; left: -2% !important; }
.lfx .lifeVal::before { transform: scale(0) rotate(-20deg) !important; opacity: 0 !important; }
.lfx .lifeVal:hover::before { transform: scale(1) rotate(0deg) !important; opacity: .9 !important; }
.lfx .lifeVal { display: grid !important; grid-template-rows: 34px auto; row-gap: 36px; align-content: start; }
.lfx .lifeVal__text { margin-top: 0 !important; }
.lfx .lifeMoments__grid { margin: 0 calc(var(--pad-x) + 20px) !important; }
@media (max-width: 900px) { .lfx .lifeMoments__grid { margin: 0 var(--pad-x) !important; } }
/* moments are not links: no underline on hover; the tape sits square to its card */
.lfx .lifeMoment:hover .lifeMoment__title { text-decoration-color: transparent !important; }
.lfx .lifeMoment::before { transform: none !important; }
/* phones: the rhythm rows share one inset; the hero sticker stays inside the hero */
@media (max-width: 560px) {
  .lfx .lfxRhythm li, .lfx .lfxRhythm li:nth-child(odd), .lfx .lfxRhythm li:nth-child(even) { padding: 16px 20px 16px 24px !important; }
  .lfx .lfxSticker--hero { bottom: auto !important; top: 38% !important; left: -4px !important; }
}
/* values: real space between icon and text; hover = the corner brackets (as on the partner logos), no petal bloom */
.lfx .lifeVal { row-gap: 32px !important; gap: 32px 0 !important; }
.lfx .lifeVal::before { display: none !important; }
.lfx .lifeVal::after { display: block !important; }
.lfx .lifeVal:hover .lfxIc--val { animation: none !important; }
.lfx .lfxSticker text { letter-spacing: 0 !important; }
/* the CTA globe, half of it, pinned top-right of the Culture band */
.lfx .lfxGlobe { position: absolute; z-index: -1; top: 0; right: var(--pad-x); width: min(46vw, 640px); aspect-ratio: 1 / 1; pointer-events: none; }
@media (max-width: 900px) { .lfx .lfxGlobe { width: 70vw; opacity: .7; } }
/* hero title: "Growing Together," on one line */
.lfx .lifeHero__title { font-size: clamp(40px, 4.1vw, 62px) !important; white-space: nowrap; }
@media (max-width: 560px) { .lfx .lifeHero__title { white-space: normal; } }
/* culture fills the screen; content sits centred in it */
.lfx .lifeCulture { min-height: 100vh !important; justify-content: center !important; box-sizing: border-box; }
@media (max-width: 900px) { .lfx .lifeCulture { min-height: 0 !important; } }
.lfx .lifeCulture { padding-top: 96px !important; padding-bottom: 96px !important; }
/* rhythms grid (2x2) grows to fill the column down to the section line */
.lfx .lifeDesc__text { align-self: stretch; }
.lfx .lfxRhythm { flex: 1 1 auto; grid-template-rows: 1fr 1fr; margin-bottom: calc(-1 * clamp(96px, 10vw, 140px)) !important; min-height: 220px; }
.lfx .lfxRhythm li { align-items: center; }
.lfx .lfxRhythm li:nth-child(n + 3) { border-bottom: 0; }
@media (max-width: 900px) { .lfx .lfxRhythm { margin-bottom: 0 !important; grid-template-rows: none; min-height: 0; } .lfx .lfxRhythm li:nth-child(n + 3) { border-bottom: 1px solid #e3e4ea; } }
/* rhythm boxes: icon on top, text below */
.lfx .lfxRhythm li { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 14px !important; }
.lfx .lfxRhythm .lfxIc { width: 30px; height: 30px; }
.lfx .lfxRhythm .lfxIc { width: 22px !important; height: 22px !important; }
.lfx .lfxG { color: transparent; background: linear-gradient(90deg, #11131f 0 50%, #a3a8b5 50% 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; transition: background-position 1s cubic-bezier(.65, 0, .35, 1); }
.lfx .lifeDesc__title:hover .lfxG { background-position: 0 0; }

/* Our team photo: keep all five people in frame (desktop crops the sides only, so lean right where the seated man is) */
.lfx .lifeDesc__media img { object-position: 78% 50%; }
/* phones: the photo follows the rhythm list with no gap, square, framed on the group rather than the ceiling */
@media (max-width: 900px) {
  .lfx .lifeDesc__media { margin-top: 0 !important; min-height: 0 !important; flex: none !important; width: 100%; aspect-ratio: 1 / 1; }
  .lfx .lifeDesc__media img { object-position: 50% 84%; }
}

/* Moment cards with a photo set (17 Agustus, buka puasa): the photos crossfade, a segmented bar in the
   corner fills for the photo on screen. The hover zoom still applies to every photo. */
.lifeMoment__img--set { position: relative; }
.lifeMoment__img--set img { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1) !important; }
.lifeMoment__img--set img.is-on { opacity: 1; }
.lifeMoment__dots { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 2; display: flex; gap: 6px; pointer-events: none; }
.lifeMoment__dots i { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .38); overflow: hidden; }
.lifeMoment__dots i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.lifeMoment__dots i.is-done::after { transform: none; }
.lifeMoment__dots i.is-on::after { animation: lfxSeg var(--seg, 3.6s) linear both; }
.lifeMoment__img--set.is-paused .lifeMoment__dots i.is-on::after { animation-play-state: paused; }
@keyframes lfxSeg { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lifeMoment__img--set img { transition: none !important; } .lifeMoment__dots i.is-on::after { animation: none; transform: none; } }