/* Keep wordmarks in normal flow at every viewport size. */
/* Align a transparent optical layer to the unchanged homepage photograph. */
.hero > img { z-index: 0; }
.hero::after { z-index: 2; pointer-events: none; }
.hero .hero-copy, .hero .hero-meta { z-index: 3; }
.iris-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; opacity: 0; mix-blend-mode: screen; }
.iris-overlay.is-aligned { animation: iris-arrive 1s ease 1.8s forwards; }
.iris-map { position: absolute; max-width: none; }
.iris-track { fill: none; stroke: #b2eaff; stroke-width: .65; opacity: .13; }
.iris-arc { fill: none; stroke: #b6f2ff; stroke-width: 1.1; stroke-linecap: round; opacity: .42; }
.iris-point { fill: #d8faff; opacity: .55; }
.iris-orbit { animation: iris-turn 24s linear infinite; transform-origin: 0 0; }
.iris-scan { animation: iris-turn 12s linear infinite; transform-origin: 0 0; }
.iris-fan { fill: #b5efff; opacity: .075; }
.iris-line { stroke: #c2f5ff; stroke-width: .8; opacity: .38; }
.iris-line-soft { stroke: #9ae5ff; stroke-width: 5; opacity: .07; }
.iris-ripple { fill: none; stroke: #b1ebff; stroke-width: .8; animation: iris-ripple 7s ease-out infinite; transform-origin: 0 0; }
.iris-ripple.ripple-b { animation-delay: -3.5s; }
.iris-breath { animation: iris-breathe 6s ease-in-out infinite; transform-origin: 0 0; }
.iris-overlay.is-paused * { animation-play-state: paused !important; }
.hero-motion-toggle { position: absolute; right: 8%; bottom: 75px; z-index: 4; background: #07101e75; border: 1px solid #d1eaff2b; color: #c6d8eb; border-radius: 20px; padding: 8px 12px; font-size: 10px; line-height: 1.5; }
@keyframes iris-arrive { to { opacity: 1; } }
@keyframes iris-turn { to { transform: rotate(360deg); } }
@keyframes iris-ripple { 0% { transform: scale(.76); opacity: 0; } 15% { opacity: .27; } 100% { transform: scale(1.97); opacity: 0; } }
@keyframes iris-breathe { 0%, 100% { opacity: .4; transform: scale(.95); } 50% { opacity: .9; transform: scale(1.02); } }
@media (max-width: 800px) { .hero-motion-toggle { right: 6%; bottom: 70px; font-size: 9px; } .iris-fan { opacity: .05; } }
@media (prefers-reduced-motion: reduce) { .iris-overlay, .hero-motion-toggle { display: none; } }
.brand { display: block; flex: 0 0 auto; }
.brand img { display: block; position: static; width: 100%; height: 100%; object-fit: contain; }
.footer { display: grid; grid-template-columns: 138px minmax(0, 650px); align-items: start; gap: 32px; }
.footer .brand { margin: 0; }
.footer p { min-width: 0; font-size: 12px; line-height: 1.8; }
.footer a:not(.brand) { text-decoration: underline; text-underline-offset: 3px; }
.evidence .textlink { text-decoration: none; line-height: 1.6; }
.care-content li::before { content: none; margin: 0; }
.paneltop { flex-wrap: wrap; align-items: center; gap: 12px; line-height: 1.6; }
.age-info { flex-wrap: wrap; gap: 12px; }
.button { white-space: normal; text-align: center; line-height: 1.5; }
.countline { flex-wrap: wrap; gap: 12px; }
.intro > *, .care-content > *, .evidence > *, .ritual > * { min-width: 0; }
/* Give the lifestyle copy a real column rather than padding a shrinking flex item. */
.life-banner { min-height: 660px; }
.life-banner > div { flex: 0 0 auto; width: min(610px, 84%); max-width: none; padding: 0; margin: 90px 8%; }
.life-banner h2 { font-size: clamp(42px, 4.2vw, 64px); max-width: 610px; line-height: 1.1; }
.life-banner p { max-width: 440px; margin: 0 0 28px; }
.life-banner .eyebrow { max-width: none; white-space: normal; }
.life-banner .button { display: inline-flex; align-self: flex-start; width: auto; max-width: 100%; }
.life-banner::after { background: linear-gradient(90deg, #050d19ed 0%, #050d19a8 32%, #050d1920 70%), linear-gradient(0deg, #050d19c9, transparent 75%); }
/* Optical concept: multiple independent layers keep motion fluid and legible. */
.wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 7%; min-height: 760px; padding: 80px 8%; }
.wide .wide-copy { margin: 0; max-width: 560px; }
.innovation { width: 100%; max-width: 550px; justify-self: center; min-width: 0; }
.signal-stage { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; color: #a8edff; --signal: #89dff5; }
.signal-halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, #68d8f83b 0%, #2f9dc320 40%, transparent 72%); filter: blur(14px); animation: signal-breathe 4s ease-in-out infinite; }
.signal-ring { position: absolute; border: 1px solid #8cdbf54f; border-radius: 50%; }
.ring-one { inset: 4%; border-color: #8cdbf52b; }
.ring-two { inset: 13%; border-style: dashed; border-color: #8cdbf573; animation: signal-turn 36s linear infinite; }
.ring-three { inset: 24%; border-color: #a3edff8c; box-shadow: 0 0 30px #5bc6ff16, inset 0 0 20px #5bc6ff1a; }
.signal-wave { position: absolute; inset: 32%; border: 1px solid #b6f1ffad; border-radius: 50%; animation: signal-expand 4s ease-out infinite; }
.wave-two { animation-delay: -2s; }
.signal-sweep { position: absolute; inset: 5%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 265deg, #55c9fa0a 285deg, #85e6ff4d 355deg, #d7faffb3 359deg, transparent 360deg); animation: signal-turn 8s linear infinite; mix-blend-mode: screen; }
.signal-vessels { position: absolute; inset: 15%; width: 70%; height: 70%; stroke-width: 1.3; opacity: .75; filter: drop-shadow(0 0 5px #73d7fa); }
.signal-vessels path { stroke-dasharray: 360; stroke-dashoffset: 0; animation: signal-trace 8s ease-in-out infinite; }
.signal-vessels .vessel-secondary { opacity: .4; stroke-width: .65; animation-delay: -3s; }
.signal-orbit { position: absolute; border-radius: 50%; animation: signal-turn 13s linear infinite; }
.orbit-one { inset: 4%; }
.orbit-two { inset: 24%; animation-duration: 9s; animation-direction: reverse; }
.signal-orbit i { display: block; position: absolute; width: 6px; height: 6px; left: 50%; top: -3px; background: #e2fbff; border-radius: 50%; box-shadow: 0 0 15px 4px #80d9ff91; }
.signal-core { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle, #c6f8ff 0%, #7ad8ec 8%, #245c79 36%, #061522 68%); box-shadow: 0 0 45px #75dcff4a; animation: core-pulse 3s ease-in-out infinite; }
.signal-core span { position: absolute; inset: 25%; border-radius: 50%; border: 1px solid #cbf8ff6b; }
.signal-cross { position: absolute; background: #a1e5f8a6; }
.cross-top, .cross-bottom { width: 1px; height: 15px; left: 50%; }
.cross-top { top: 0; } .cross-bottom { bottom: 0; }
.cross-left, .cross-right { height: 1px; width: 15px; top: 50%; }
.cross-left { left: 0; } .cross-right { right: 0; }
.signal-tag { position: absolute; bottom: 16%; width: 100%; text-align: center; font-size: 8px; letter-spacing: 3px; color: #b9dfe9; }
.innovation-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0; font-size: 9px; letter-spacing: 1.7px; color: #b5d6e8; }
.innovation-caption i { display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #a4ebec; animation: core-pulse 3s ease-in-out infinite; }
.motion-toggle { border: 1px solid #7bacc54a; border-radius: 20px; background: transparent; color: #c7ddeb; font-size: 10px; padding: 8px 12px; letter-spacing: 0; }
.signal-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #82b7dc40; }
.signal-controls button { padding: 15px 4px; border: 0; border-bottom: 2px solid transparent; color: #91a8be; background: transparent; text-align: left; font-size: 11px; }
.signal-controls button[aria-pressed=true] { color: #d6f5ff; border-bottom-color: #9ae7ed; }
.signal-description { min-height: 48px; font-size: 13px; line-height: 1.7; margin: 18px 0 12px; }
.signal-disclaimer { font-size: 8px; letter-spacing: 1.2px; line-height: 1.7; color: #94a7bd; margin: 0; }
.signal-stage[data-phase=analyse] .signal-sweep { animation-duration: 3s; }
.signal-stage[data-phase=analyse] .signal-vessels { opacity: 1; stroke-width: 1.8; }
.signal-stage[data-phase=review] .signal-core { box-shadow: 0 0 65px #9debf780; }
.signal-stage[data-phase=review] .ring-three { border-color: #d9fbff; }
.innovation.is-paused *, .innovation.is-paused *::before, .innovation.is-paused *::after { animation-play-state: paused !important; }
@keyframes signal-turn { to { transform: rotate(360deg); } }
@keyframes signal-breathe { 0%, 100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes signal-expand { 0% { transform: scale(.5); opacity: 0; } 18% { opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes core-pulse { 0%, 100% { transform: scale(.93); opacity: .75; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes signal-trace { 0%, 100% { stroke-dashoffset: 360; opacity: .3; } 40%, 75% { stroke-dashoffset: 0; opacity: 1; } }
@media (min-width: 1600px) { .wide { padding: 90px max(8%, calc((100vw - 1400px) / 2)); } }
@media (max-width: 800px) {
  .footer { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .footer .brand { width: 138px; height: 46px; }
  .footer p { max-width: 100%; }
  .textlink { max-width: 100%; line-height: 1.65; }
  .wide { grid-template-columns: minmax(0, 1fr); gap: 50px; padding: 70px 6%; }
  .wide .wide-copy { max-width: 100%; }
  .innovation { max-width: 460px; }
  .wide-copy h2 { max-width: 100%; }
  .life-banner { min-height: 660px; }
  .life-banner > div { width: 88%; margin: 75px 6%; padding: 0; }
  .life-banner h2 { font-size: clamp(36px, 8.5vw, 48px); max-width: 410px; }
  .life-banner p { max-width: 340px; font-size: 14px; }
  .life-banner .button { max-width: 100%; }
  .life-banner::after { background: linear-gradient(90deg, #050d19ed, #050d1980), linear-gradient(0deg, #050d19c9, transparent 80%); }
}
@media (prefers-reduced-motion: reduce) {
  .innovation *, .innovation *::before, .innovation *::after { animation: none !important; }
  .signal-wave { opacity: .25; }
  .signal-description { min-height: 0; }
}

/* Contact details follow the same spacious editorial rhythm. */
.office-location { margin: 38px auto 0; padding-top: 30px; border-top: 1px solid var(--line); max-width: 530px; }
.office-location .eyebrow { margin-bottom: 14px; }
.office-location address { font-style: normal; color: #d5dfef; font-size: 15px; line-height: 1.9; }
.footer strong { font-weight: 400; color: #edf3fc; }