/* Entry-page language shared with Quest Loop: ink, paper, and blocks of color. */
.visual-site .brand img { width: 92px; height: auto; }
.visual-site .nav-actions .button--primary { min-height: 44px; padding: .4rem .2rem; border: 0; border-bottom: 3px solid #f5c65f; border-radius: 0; background: transparent; color: #f8f5ed; }
.visual-site .nav-actions .button--primary:hover,
.visual-site .nav-actions .button--primary:focus-visible { background: #194149; color: #fff; }

.visual-site .home-hero { display: block; min-height: 720px; isolation: isolate; overflow: hidden; border-bottom: 8px solid #e87560; background: #10282e; }
.visual-site .home-hero::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 63%; background: #12505a; }
.visual-site .home-hero::after { content: ""; position: absolute; z-index: -1; width: 15vw; min-width: 90px; height: 100%; top: 0; right: 0; background: #194177; }
.visual-site .home-hero .shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.visual-site .home-hero__copy { padding: clamp(86px, 9vw, 145px) 0 80px; }
.visual-site .home-hero .eyebrow { max-width: 44ch; border-left: 5px solid #62d9d1; padding-left: 14px; }
.visual-site .home-hero h1 { max-width: 12ch; font-size: clamp(3.4rem, 5.6vw, 6rem); line-height: .98; }
.visual-site .home-hero .hero-detail { max-width: 58ch; }
.visual-site .home-hero .hero-actions { display: grid; justify-items: start; gap: 12px; margin-top: 26px; }

.visual-site .home-hero .qiiq-entry { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; align-items: stretch; width: min(100%, 480px); min-height: 76px; margin: 0; padding: 0; border: 0; border-radius: 0; background: #f5c65f; color: #10282e; box-shadow: 7px 7px 0 #e87560; text-align: left; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.visual-site .home-hero .qiiq-entry:hover,
.visual-site .home-hero .qiiq-entry:focus-visible { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 #e87560; background: #ffda79; }
.qiiq-entry__index,.qiiq-entry__arrow { display: grid; place-items: center; }
.qiiq-entry__index { background: #26459b; color: #fff; font-family: 'DM Sans',sans-serif; font-size: .82rem; font-weight: 800; letter-spacing: .08em; }
.qiiq-entry__label { align-self: center; padding: .8rem 1rem; font-size: clamp(.98rem, 1.3vw, 1.12rem); font-weight: 800; line-height: 1.25; }
.qiiq-entry__arrow { border-left: 1px solid rgba(16,40,46,.28); font-size: 1.45rem; }
.visual-site .home-hero .qiiq-secondary-link { display: inline-flex; justify-content: flex-start; gap: .6rem; width: auto; min-height: 44px; margin: 0; padding: .3rem 0; border: 0; border-bottom: 2px solid #62d9d1; border-radius: 0; background: transparent; color: #f8f5ed; font-size: 1rem; font-weight: 700; text-decoration: none; text-align: left; }
.visual-site .home-hero .qiiq-secondary-link:hover,
.visual-site .home-hero .qiiq-secondary-link:focus-visible { color: #96f1e8; background: transparent; }
.visual-site .home-hero a:focus-visible,.life-in-motion a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

.visual-site .home-hero__screen { position: relative; isolation: isolate; width: min(100%, 410px); max-width: none; justify-self: center; margin: 65px 0 60px; padding: 12px; border: 0; border-radius: 0; background: #e9eee5; box-shadow: -20px 20px 0 #f5c65f; }
.visual-site .home-hero__screen::before { content: ""; position: absolute; z-index: -1; top: -38px; right: -32px; width: 68%; height: 62%; background: #e87560; }
.visual-site .home-hero__screen img { display: block; width: 100%; height: 430px; max-height: none; object-fit: cover; object-position: center 30%; border-radius: 0; }
.visual-site .home-hero__screen figcaption { padding: 10px 2px 2px; color: #223b3c; font-size: .82rem; }
.qiiq-proof-label { display: block; margin-bottom: 10px; color: #183d40; font-size: .7rem; font-weight: 800; letter-spacing: .13em; }

.life-in-motion { padding-block: clamp(70px, 9vw, 140px); color: #152b2b; background: #f4ecdb; }
.life-in-motion__grid { display: grid; grid-template-columns: minmax(0,.98fr) minmax(0,1.02fr); gap: clamp(42px,8vw,120px); align-items: center; }
.qiiq-life-map { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 560px; padding: clamp(26px,3vw,46px); overflow: hidden; isolation: isolate; background: #1537ad; color: #fff; }
.qiiq-life-map::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto auto; width: 13%; height: 51%; background: #ff533c; }
.qiiq-life-map::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0 auto; width: 13%; height: 49%; background: #b4ff27; }
.qiiq-life-map__edition { align-self: flex-start; padding-bottom: .55rem; border-bottom: 2px solid #91ecff; color: #c9f4ff; font: 800 .78rem/1.2 'DM Sans',sans-serif; letter-spacing: .16em; }
.qiiq-life-map__threads { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.qiiq-life-map__threads i { position: absolute; display: block; right: 13%; width: 9px; height: 100%; background: #19dddf; }
.qiiq-life-map__threads i:nth-child(2) { right: calc(13% + 9px); width: 5px; background: #ffcc24; }
.qiiq-life-map__threads i:nth-child(n+3) { display: none; }
.qiiq-life-map__statement { position: relative; display: block; margin: auto 0; max-width: 9ch; padding: 28px 0; font: 700 clamp(3.3rem,6vw,6.5rem)/.93 'Fraunces',Georgia,serif; letter-spacing: -.06em; }
.qiiq-life-map__statement em { color: #fcff69; font-style: normal; }
.qiiq-life-map__details { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; width: calc(100% - 13%); margin-top: 2.5rem; background: #071e57; }
.qiiq-life-map__details span { display: block; min-height: 48px; padding: 11px 5px; border-top: 2px solid #73f2ef; font: 700 .85rem/1.2 'DM Sans',sans-serif; }
.qiiq-life-map__details span:nth-child(2) { border-color: #ffce2c; }
.qiiq-life-map__details span:nth-child(3) { border-color: #fc6fae; }
.qiiq-life-map__details span:nth-child(4) { border-color: #b4ff27; }
.qiiq-life-map__end { max-width: 85%; padding-top: 14px; color: #d7e7ff; font: 600 .76rem/1.4 'DM Sans',sans-serif; }
.life-in-motion .eyebrow { color: #963b59; }
.life-in-motion h2 { max-width: 12ch; margin: 16px 0 28px; font-family: 'Fraunces',Georgia,serif; font-size: clamp(3rem,5vw,5.8rem); letter-spacing: -.04em; line-height: 1.02; }
.life-in-motion__copy > p:not(.eyebrow) { max-width: 52ch; color: #354744; font-size: clamp(1.05rem,1.5vw,1.23rem); line-height: 1.6; }
.life-in-motion__copy .button { display: inline-flex; gap: .8rem; margin-top: 18px; padding: .45rem 0; border: 0; border-bottom: 3px solid #e87560; border-radius: 0; background: transparent; color: #17344a; text-align: left; }
.life-in-motion__copy .button:hover,.life-in-motion__copy .button:focus-visible { background: transparent; color: #963b59; }
.life-in-motion__copy small { display: block; max-width: 50ch; margin-top: 16px; color: #586963; line-height: 1.5; }

@media(max-width:900px) {
  .visual-site .home-hero .shell { grid-template-columns: minmax(0,1.1fr) minmax(240px,.9fr); gap: 35px; }
  .visual-site .home-hero__screen { width: min(100%,340px); }
  .life-in-motion__grid { gap: 42px; }
  .qiiq-life-map { min-height: 500px; }
}
@media(max-width:700px) {
  .visual-site .home-hero { min-height: 0; }
  .visual-site .home-hero::before { inset: auto 0 0; height: 28%; }
  .visual-site .home-hero::after { display: none; }
  .visual-site .home-hero .shell { grid-template-columns: 1fr; gap: 35px; }
  .visual-site .home-hero__copy { padding: 130px 0 0; }
  .visual-site .home-hero h1 { font-size: clamp(2.9rem,9vw,4.3rem); }
  .visual-site .home-hero__screen { width: min(75%,350px); margin: 10px auto 65px; }
  .life-in-motion__grid { grid-template-columns: 1fr; }
  .qiiq-life-map { min-height: 440px; }
}
@media(max-width:480px) {
  .visual-site .home-hero__copy { padding-top: 120px; }
  .visual-site .home-hero .qiiq-entry { width: 100%; }
  .visual-site .home-hero__screen { width: min(80%,300px); box-shadow: -12px 12px 0 #f5c65f; }
  .visual-site .home-hero__screen::before { top: -20px; right: -18px; }
  .qiiq-life-map { min-height: 430px; }
  .qiiq-life-map__statement { font-size: clamp(3.4rem,12vw,5rem); }
  .life-in-motion h2 { font-size: clamp(2.75rem,12vw,3.7rem); }
}
@media(prefers-reduced-motion:reduce) { .visual-site .home-hero .qiiq-entry { transition: none; } }
