.logo-opening{--mark-size:clamp(240px,36vmin,360px);position:fixed;inset:0;background:#fff;z-index:90;overflow:hidden;isolation:isolate}
.logo-mark{position:absolute;left:50%;top:46%;width:var(--mark-size);height:var(--mark-size);margin-left:calc(var(--mark-size) / -2);margin-top:calc(var(--mark-size) / -2);transform-origin:center;will-change:transform;contain:layout style}
.logo-mark svg{width:100%;height:100%;display:block;overflow:visible}
.logo-contour{fill:none;stroke:#1e2083;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.logo-caption{position:absolute;top:calc(46% + var(--mark-size) / 2 + 18px);left:0;width:100%;text-align:center;opacity:0;transform:translateY(5px)}
.logo-caption p{font-size:26px;font-weight:600;letter-spacing:-.035em;line-height:1.6;color:#283548}
.logo-caption span{display:block;margin-top:8px;font-size:13px;letter-spacing:.18em;color:#697586;line-height:1.7;padding-left:.22em}
body.logo-active{overflow:hidden}
.logo-review{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:100;width:max-content;max-width:calc(100% - 24px);border-radius:17px;border:1px solid #e5e8eb;background:#fffffff5;box-shadow:0 8px 35px #243a5912;color:#37445a;backdrop-filter:blur(16px);font-size:12px;transition:opacity .15s}
.logo-toolbar{display:flex;gap:5px;align-items:center;padding:9px 11px;white-space:nowrap}
.logo-review-title{margin:0 12px 0 5px;font-weight:600}.logo-review-title span{font-weight:400;font-size:10px;color:#8b95a1;margin-left:7px}
.logo-toolbar button,.logo-toolbar a{font-size:12px;line-height:20px;padding:10px 12px;min-height:40px;border-radius:10px}
.logo-toolbar button:hover,.logo-toolbar a:hover{background:#f2f5fa}#logo-replay{background:#edf3ff;color:#2363df;font-weight:600}
body.logo-playing .logo-review{opacity:0;pointer-events:none}
#logo-controls{padding:15px 18px;border-top:1px solid #edf0f4}.logo-scenes{display:flex;gap:7px;flex-wrap:wrap}.logo-scenes button{font-size:11px;padding:7px 10px;min-height:36px;border-radius:8px;background:#f2f5fa}.logo-scenes button[aria-pressed=true]{color:#1b5adc;background:#e5eeff}#logo-slow{margin-left:auto}
.logo-timeline{display:flex;align-items:center;gap:12px;font-size:11px;white-space:nowrap;margin-top:15px}.logo-timeline input{min-width:65px;flex:1;accent-color:#2469ee}.logo-timeline output{width:45px;text-align:right;font-variant-numeric:tabular-nums}#logo-controls p{font-size:10px;color:#8b95a1;margin-top:10px}
@media(max-width:600px){.logo-opening{--mark-size:clamp(215px,59vw,290px)}.logo-mark{top:43%}.logo-caption{top:calc(43% + var(--mark-size) / 2 + 25px)}.logo-caption p{font-size:23px}.logo-caption span{font-size:11.5px}.logo-review{bottom:14px;max-width:calc(100% - 20px)}.logo-toolbar{padding:7px;gap:1px}.logo-review-title{font-size:10px;margin:0 8px}.logo-review-title span{display:none}.logo-toolbar button,.logo-toolbar a{font-size:10px;padding:8px 10px}.logo-toolbar a{display:none}#logo-controls{padding:12px}.logo-scenes{gap:5px}.logo-scenes button{font-size:10px;padding:7px}#logo-slow{margin-left:0}.logo-timeline{gap:8px}}
@media(max-height:520px) and (min-width:601px){.logo-opening{--mark-size:clamp(150px,36vh,210px)}.logo-mark{top:40%}.logo-caption{top:calc(40% + var(--mark-size) / 2 + 15px)}.logo-caption p{font-size:21px}}
@media(prefers-reduced-motion:reduce){.logo-review{transition:none}.logo-mark{will-change:auto}}
/* Keep the paused final wordmark visible above the review drawer. */
#logo-controls{padding:10px 14px}.logo-scenes button{min-height:30px;padding:4px 8px}.logo-timeline{margin-top:8px}#logo-controls p{display:none}

.logo-caption{opacity:1;transform:none}.logo-caption p,.logo-caption span{opacity:0;will-change:opacity,transform}.logo-caption p{color:#1e2083}

#site-preview #main:focus{outline:none}

/* Reserve the scrollbar width while the opening temporarily locks scrolling. */
html{scrollbar-gutter:stable}
body.logo-active .hero-gallery .hero-image img{
  transform:scale(calc(1.018 - var(--hero-reveal,0) * .018));
  transform-origin:58% 47%;will-change:transform;
}
body.logo-active .hero-gallery .hero-copy{
  opacity:var(--hero-copy-reveal,0);
  transform:translateY(calc((1 - var(--hero-copy-reveal,0)) * 12px));
  will-change:opacity,transform;
}
@media(prefers-reduced-motion:reduce){
  body.logo-active .hero-gallery .hero-image img,
  body.logo-active .hero-gallery .hero-copy{transform:none;will-change:auto}
}

/* Selected size option 4; the existing mobile typography stays in effect. */
@media(min-width:601px){.logo-caption p{font-size:clamp(50px,3.472222vw,62px)}.logo-caption span{font-size:clamp(25px,1.736111vw,31px)}}