/* Alternative composition; the approved site and video controller are unchanged. */
.focus-layout{--selector-duration:480ms;--selector-ease:cubic-bezier(.22,1,.36,1)}
.focus-layout .website>.site-header{grid-template-columns:auto 1fr;height:96px}
.focus-layout .site-header>.project-open{display:none}
.focus-layout .hero{grid-template-columns:42% 58%;grid-template-rows:1fr .62fr;min-height:540px;height:calc(100svh - 210px);max-height:820px;padding:0 4% 0 8%;align-items:stretch}
.focus-layout .copy{grid-column:1;grid-row:1;align-self:end;padding:16px 0 0;min-height:0}
.focus-layout .copy h1{font-size:clamp(42px,4.6vw,76px);line-height:1.12}
.focus-layout .copy p{max-width:35ch;min-height:5.25em;margin:24px 0 20px}
.focus-layout .hero-actions{grid-column:1;grid-row:2;align-self:start;z-index:2;padding-top:0}
.focus-layout #liquid-art{grid-column:2;grid-row:1/3;align-self:center;width:114%;max-width:none;max-height:none;margin-left:-9%;pointer-events:auto}
.focus-layout #cta{display:inline-flex;align-items:center;gap:16px;min-height:60px;font-size:22px;font-weight:650;letter-spacing:-.025em;color:#244fc0;padding:12px 0 18px;overflow:visible}
.focus-layout #cta::after{content:'';display:block;position:static;width:22px;height:22px;flex-shrink:0;border:0;border-radius:0;animation:none;z-index:1;background:center/22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' stroke='%23244fc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transition:transform 220ms ease}
.focus-layout #cta:hover::after{transform:translateX(4px)}
.focus-layout :is(#cta,.project-open) .cta-flow-light,
.focus-layout :is(#cta,.project-open) .cta-flow-wave,
.focus-layout #cta::before,
.focus-layout .project-open::before,
.focus-layout .project-open::after{display:none;animation:none;content:none}
.focus-layout .portfolio-invitation .invitation-link{border-bottom:0}
.focus-layout .project-help{margin-top:4px;font-size:12px;color:#52647b;text-decoration:none}
.focus-layout .project-help:hover{text-decoration:underline;text-underline-offset:4px}
.focus-layout .chapters{--active-index:0;position:relative;max-width:760px;margin:0 auto 40px;min-height:64px;border-top:0;border-bottom:1px solid #dce7f0;gap:0}
.focus-layout .chapters:has([data-chapter=web][aria-current=true]){--active-index:1}
.focus-layout .chapters:has([data-chapter=management][aria-current=true]){--active-index:2}
.focus-layout .chapters{grid-template-columns:repeat(5,minmax(0,1fr))}
.focus-layout .chapters:has([data-chapter=automation][aria-current=true]){--active-index:3}
.focus-layout .chapters:has([data-chapter=social][aria-current=true]){--active-index:4}
.focus-layout .chapters::before{content:'';position:absolute;width:20%;height:3px;left:0;bottom:-1px;border-radius:50%;background:linear-gradient(90deg,transparent,#71cde5 16%,#2852be 54%,#75bfdf 84%,transparent);transform:translateX(calc(var(--active-index)*100%));transition:transform var(--selector-duration) var(--selector-ease);pointer-events:none}
.focus-layout .chapters button{position:relative;text-align:center;font-size:14px;padding:18px 8px;min-height:64px;transition:color 160ms ease}
.focus-layout .chapters button[aria-current=true]::before{content:none}
.focus-layout .chapters button:hover{color:#244fc0}
.focus-layout .home-sections .gallery-heading{border-top:0;padding-top:40px}
.focus-layout .hero{position:relative}
.swipe-guide{position:absolute;left:0;bottom:16px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;color:#52647b;font-size:12px;line-height:1.5;pointer-events:none}
.swipe-demonstration{position:relative;display:block;width:60px;height:28px;flex-shrink:0;color:#46669c}
.swipe-hand{display:block;margin:auto;width:28px;height:28px;opacity:.8;animation:linud-swipe-cue 3.8s ease-in-out infinite}
.hero[data-swipe-direction=last] .swipe-demonstration{transform:scaleX(-1)}
.hero[data-swipe-direction=middle] .swipe-hand{animation-name:linud-swipe-both;animation-duration:7.6s}
body[data-paused=true] .swipe-hand{animation-play-state:paused}
@keyframes linud-swipe-cue{0%{transform:translateX(14px);opacity:0}18%{transform:translateX(14px);opacity:.8}65%{transform:translateX(-14px);opacity:.8}85%,100%{transform:translateX(-14px);opacity:0}}
@keyframes linud-swipe-both{0%{transform:translateX(14px);opacity:0}9%{transform:translateX(14px);opacity:.8}32%{transform:translateX(-14px);opacity:.8}43%,49%{transform:translateX(-14px);opacity:0}50%{transform:translateX(-14px) scaleX(-1);opacity:0}59%{transform:translateX(-14px) scaleX(-1);opacity:.8}82%{transform:translateX(14px) scaleX(-1);opacity:.8}93%,100%{transform:translateX(14px) scaleX(-1);opacity:0}}
.social-flow-canvas,.social-flow-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;z-index:4;pointer-events:none}
.social-flow-fallback{z-index:5}
.focus-layout:has([data-chapter=social][aria-current=true]) .copy h1{font-size:clamp(36px,3.8vw,62px)}
@media(min-width:701px) and (max-width:1000px){
 .focus-layout .hero{padding-left:6%;grid-template-columns:46% 54%}
 .focus-layout .copy h1{font-size:clamp(34px,4.6vw,46px)}
 .focus-layout .copy p{font-size:15px}
 .focus-layout #cta{font-size:19px}
 .focus-layout .chapters{margin-inline:8%}
}
@media(max-width:700px){
 .focus-layout .website>.site-header{height:76px;padding:8px 20px;grid-template-columns:auto 1fr;gap:16px}
 .focus-layout .brand-logo{width:108px}
 .focus-layout .site-nav{grid-row:1;grid-column:2;justify-content:flex-end;gap:14px}
 .focus-layout .site-nav a{font-size:11px;min-height:44px}
 .focus-layout .hero{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;padding:20px 24px 0}
 .focus-layout .copy{order:0;align-self:auto;padding:0}
 .focus-layout .copy h1{font-size:clamp(34px,9.3vw,52px)}
 .focus-layout:has([data-chapter=social][aria-current=true]) .copy h1{font-size:clamp(30px,8vw,40px)}
 .focus-layout .copy p{font-size:15px;line-height:1.7;max-width:35ch;min-height:5.1em;margin:16px auto 0}
 .focus-layout #liquid-art{order:1;width:calc(100% + 24px);height:clamp(210px,29svh,270px);aspect-ratio:auto;max-width:450px;max-height:none;margin:0 -12px;align-self:center}
 .focus-layout .hero-actions{order:2;align-self:center;text-align:center;padding:0;max-width:100%}
 .swipe-guide{position:static;order:1;width:100%;margin:2px 0 12px;gap:4px;font-size:11px;min-height:64px}
 .focus-layout #cta{font-size:20px;min-height:56px;gap:12px;padding-bottom:16px}
 .focus-layout .project-help{font-size:11px;min-height:40px;margin:0 auto}
 .focus-layout .chapters{margin:16px 24px 32px;min-height:56px}
 .focus-layout .chapters button{font-size:11px;min-height:56px;padding:14px 2px}
 .focus-layout .home-sections .gallery-heading{padding-top:32px}
}
@media(max-width:360px){.focus-layout .website>.site-header{padding-inline:16px;gap:12px}.focus-layout .brand-logo{width:94px}.focus-layout .site-nav{gap:10px}.focus-layout .hero{padding-inline:20px}.focus-layout #cta{font-size:18px}}
@media(prefers-reduced-motion:reduce){.focus-layout .chapters::before,.focus-layout #cta::after{transition:none}.focus-layout #cta:hover::after{transform:none}}
@media(prefers-reduced-motion:reduce){.swipe-guide{display:none}.swipe-hand{animation:none}}