/* Alan Agency is a visual/interaction reference, not a source of brand assets,
   claims, code dependencies or licensed typography. Original local implementation. */
@font-face{font-family:'DM Sans';src:url('/assets/dm-sans-light.ttf') format('truetype');font-style:normal;font-weight:300;font-display:swap}
:root{--color-hero:#101013;--color-glass:#242329ed;--color-hero-line:#535059;--header-inset:20px;--hero-display:clamp(72px,8.75vw,146px)}
.agency-direction{background:var(--color-surface-alt)}
.agency-direction .preview-bar{background:var(--color-hero);color:var(--color-on-dark);border-color:var(--color-hero-line)}
.agency-direction .site-header{position:sticky;top:var(--header-inset);margin:var(--header-inset) var(--header-inset) -110px;background:var(--color-glass);color:var(--color-inverse);border:1px solid var(--color-hero-line);border-radius:8px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.agency-direction .header-inner{width:auto;margin:0;padding:0 24px;min-height:80px;max-width:none}
.agency-direction .brand-description>span{color:var(--color-on-dark)}
.agency-direction nav>a:hover{color:var(--color-inverse);text-decoration:underline;text-underline-offset:6px}
.agency-direction nav .button{background:transparent;border-color:var(--color-on-dark);font-weight:400}
.agency-direction nav .button:hover{background:var(--color-brand-primary);text-decoration:none}
.hero-statement{background:var(--color-hero);color:var(--color-inverse);position:relative;isolation:isolate;overflow:hidden;padding:144px 0 40px;min-height:890px}
.statement-inner{max-width:1720px;position:relative;z-index:2}
.statement-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.statement-top .eyebrow{font-weight:400;color:var(--color-on-dark)}
.motion-toggle{display:flex;gap:8px;align-items:center;background:transparent;border:0;color:var(--color-on-dark);font-size:11px;min-height:36px;padding:8px 0 8px 10px}
.motion-dot{width:6px;height:6px;border-radius:50%;background:var(--color-on-dark)}
.motion-toggle[aria-pressed=true] .motion-dot{background:transparent;border:1px solid currentColor}
.hero-statement h1{font-size:var(--hero-display);font-weight:300;line-height:1.01;letter-spacing:-.045em;position:relative}
.hero-line{display:block;position:relative;width:max-content;max-width:100%;will-change:transform}
.hero-line.line-one{transform:translateX(var(--line-shift,0px))}
.hero-line.line-two{margin-top:10px}
.hero-line.line-three{margin-left:auto;transform:translateX(calc(var(--line-shift,0px)*-1));margin-top:10px}
.hero-line.line-four{margin-top:10px}
.hero-orb{position:absolute;z-index:1;width:clamp(300px,35vw,650px);aspect-ratio:1;left:50%;top:43%;border-radius:50%;background:var(--color-brand-primary);transform:translate(calc(-50% + var(--orb-x,0px)),calc(-50% + var(--orb-y,0px))) scale(var(--orb-scale,1));will-change:transform;pointer-events:none}
.statement-bottom{display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:40px;margin-top:48px;font-size:14px;line-height:1.55}
.statement-bottom p{color:var(--color-on-dark)}
.statement-bottom .button{font-weight:400;padding:15px 22px}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:10px;letter-spacing:.12em;min-width:44px;min-height:44px}
.intro-statement{text-align:center;background:var(--color-surface-alt);padding-block:clamp(96px,12vw,190px)}
.intro-statement .eyebrow{color:var(--color-brand-primary);font-weight:400}
.intro-statement h2{font-size:clamp(36px,4.6vw,72px);font-weight:300;line-height:1.15;max-width:25ch;margin:40px auto;letter-spacing:-.035em}
.scroll-copy span{color:var(--color-text-muted);transition:color 250ms}
.scroll-copy span.is-read{color:var(--color-text)}
.intro-statement p:not(.eyebrow){font-size:18px;max-width:50ch;color:var(--color-text-muted);margin:0 auto 32px}
.intro-statement .button{font-weight:400}
.agency-direction .section-heading h2,.agency-direction .collaboration h2,.agency-direction .contact h2,.agency-direction .footer-top h2{font-weight:300;letter-spacing:-.04em}
.agency-direction .audience{border-top:0}
.agency-direction .approach{background:var(--color-surface-alt);color:var(--color-text)}
.agency-direction .approach .section-heading .eyebrow,.agency-direction .approach .section-heading.wide>p,.agency-direction .approach .system-flow p,.agency-direction .approach .method-note,.agency-direction .approach .flow-num{color:var(--color-text-muted)}
.agency-direction .system-flow li{border-color:var(--color-border)}
.agency-direction .system-flow li:before{background:var(--color-brand-primary)}
.agency-direction .solutions{padding-bottom:80px}
.agency-direction .program-layout{border-top:1px solid var(--color-border);padding-top:32px}
.agency-direction .stage-tabs button[aria-selected=true]{background:var(--color-brand-primary);color:var(--color-inverse);border-color:var(--color-brand-primary)}
.agency-direction .stage-tabs button[aria-selected=true] .stage-number,.agency-direction .stage-tabs button[aria-selected=true] small{color:var(--color-inverse)}
.agency-direction .stage-panel{background:var(--color-surface);border:0}
.agency-direction .solution summary h3{font-weight:300;font-size:clamp(25px,3vw,42px)}
.agency-direction .work{padding:100px 0 40px;background:var(--color-hero);color:var(--color-inverse)}
.agency-direction .work>.container{width:100%;max-width:none}
.agency-direction .work .section-heading{width:min(calc(100% - var(--gutter)*2),var(--container-max));margin:0 auto 64px}
.agency-direction .work .section-heading .eyebrow,.agency-direction .work .section-heading.wide>p,.agency-direction .work>.container>.scope-note{color:var(--color-on-dark)}
.agency-direction .work .section-heading h2{font-size:clamp(48px,6vw,88px)}
.agency-direction .project-grid{display:block}
.agency-direction .project-card{min-height:640px;height:75svh;max-height:880px;position:relative;overflow:hidden;border-top:1px solid var(--color-hero-line)}
.agency-direction .project-image{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0;background:var(--color-surface)}
.agency-direction .project-image img{object-fit:cover;padding:0;transform:scale(var(--project-scale,1.06));transition:transform 180ms linear;will-change:transform}
.agency-direction .feature-koluman{background:var(--color-brand-accent)}
.agency-direction .project-image.koluman{background:var(--color-brand-accent)}
.agency-direction .project-image.koluman img{width:56%;margin-left:39%;padding:36px;object-fit:contain;transform:scale(var(--project-scale,1.04))}
.agency-direction .project-image.hyundai img,.agency-direction .project-image.huawei img{object-fit:contain;width:66%;margin-left:35%;background:var(--color-surface)}
.agency-direction .project-caption{position:absolute;left:max(var(--gutter),calc((100% - var(--container-max))/2));top:50%;transform:translateY(-50%);width:31%;z-index:2;color:var(--color-text);pointer-events:none;padding:0}
.agency-direction .project-caption h3{font-size:clamp(32px,4vw,62px);font-weight:300;line-height:1.12;margin-block:24px}
.agency-direction .project-caption p{font-size:16px;max-width:35ch}
.agency-direction .project-caption .text-link{pointer-events:auto;font-weight:400;text-decoration:underline;text-underline-offset:6px;margin-top:24px}
.agency-direction .project-image .round-button{right:var(--gutter);bottom:32px;background:var(--color-surface-alt);width:56px;height:56px}
.agency-direction .work>.container>.scope-note{width:min(calc(100% - var(--gutter)*2),var(--container-max));margin:32px auto 0}
.project-cursor{position:absolute;left:var(--cursor-x,50%);top:var(--cursor-y,50%);z-index:3;transform:translate(-50%,-50%) scale(.8);opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:6px;width:112px;height:112px;border-radius:50%;background:var(--color-brand-primary);color:var(--color-inverse);font-size:12px;transition:opacity 120ms,transform 180ms}
.project-cursor svg{width:18px}
@media(hover:hover) and (pointer:fine){.agency-direction:not(.motion-paused) .project-image.pointer-inside .project-cursor{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.agency-direction .collaboration{background:var(--color-brand-primary);color:var(--color-inverse)}
.agency-direction .collaboration p,.agency-direction .collaboration li>span{color:var(--color-inverse)}
.agency-direction .collaboration li{border-color:var(--color-on-dark)}
.agency-direction .site-footer{background:var(--color-hero)}
.agency-direction .footer-top h2{font-size:clamp(48px,6vw,92px)}
.agency-direction .button,.agency-direction .text-link{transition:background 200ms,color 200ms}
.agency-direction .button svg{transition:transform 250ms cubic-bezier(.2,.6,.4,1)}
.motion-paused .hero-line,.motion-paused .hero-orb,.motion-paused .project-image img{will-change:auto}
@media(max-width:1049px){.agency-direction .site-header{margin-bottom:-100px;top:12px;margin-inline:12px;margin-top:12px}.agency-direction .header-inner{padding:0 16px;min-height:72px}.agency-direction .menu-button{color:var(--color-inverse)}.agency-direction nav{background:var(--color-hero);color:var(--color-inverse);border-radius:0 0 8px 8px}.agency-direction nav>a:not(.button){border-color:var(--color-hero-line)}.hero-statement{padding-top:136px;min-height:780px}.hero-statement h1{font-size:clamp(72px,9.7vw,118px)}.statement-bottom{grid-template-columns:1fr auto;gap:24px}.statement-bottom .scroll-cue{display:none}.agency-direction .project-card{min-height:580px;height:70svh}.agency-direction .project-caption{width:36%}.agency-direction .project-caption h3{font-size:40px}.agency-direction .project-caption p{font-size:14px}.agency-direction .project-image.hyundai img,.agency-direction .project-image.huawei img{width:60%;margin-left:41%}.agency-direction .project-image.koluman img{width:56%;margin-left:42%;padding:24px}.hero-orb{width:45vw;min-width:300px;top:44%}}
@media(max-width:767px){.hero-statement{padding-top:130px;padding-bottom:32px;min-height:0}.statement-top{margin-bottom:32px;gap:12px}.statement-top .eyebrow{font-size:9px;letter-spacing:.08em}.motion-toggle{font-size:10px;white-space:nowrap}.hero-statement h1{font-size:clamp(44px,10.6vw,82px);letter-spacing:-.045em;line-height:1.15}.hero-line.line-two,.hero-line.line-three,.hero-line.line-four{margin-top:10px}.hero-orb{width:55vw;min-width:180px;max-width:330px;left:54%;top:39%}.statement-bottom{display:flex;flex-direction:column;align-items:flex-start;margin-top:40px;gap:24px;font-size:14px}.statement-bottom .button{padding:16px 20px;font-size:13px;max-width:100%}.intro-statement{padding-block:80px}.intro-statement h2{font-size:36px;margin:24px auto;line-height:1.22}.intro-statement p:not(.eyebrow){font-size:16px}.agency-direction .work{padding-top:64px}.agency-direction .work .section-heading{margin-bottom:40px}.agency-direction .work .section-heading h2{font-size:42px}.agency-direction .project-card{min-height:0;height:auto;max-height:none;display:flex;flex-direction:column;padding:0;background:var(--color-surface);color:var(--color-text)}.agency-direction .project-image{position:relative;height:360px;order:2;aspect-ratio:1.1}.agency-direction .project-image.koluman{background:var(--color-brand-accent)}.agency-direction .project-image.koluman img{width:100%;height:100%;margin:0;padding:20px 40px 20px 0}.agency-direction .project-image.hyundai img,.agency-direction .project-image.huawei img{width:100%;margin:0;object-fit:cover}.agency-direction .project-caption{position:relative;top:auto;left:auto;transform:none;width:auto;padding:32px var(--gutter) 24px;pointer-events:auto;order:1}.agency-direction .feature-koluman .project-caption{background:var(--color-brand-accent)}.agency-direction .project-caption h3{font-size:36px;max-width:14ch;margin-block:16px}.agency-direction .project-caption p{font-size:15px;max-width:40ch}.agency-direction .project-caption .text-link{margin-top:16px}.agency-direction .project-image .round-button{right:20px;bottom:20px;width:48px;height:48px}.project-cursor{display:none}.agency-direction .footer-top h2{font-size:48px}}
@media(max-width:374px){.hero-statement h1{font-size:clamp(38px,10.4vw,44px)}.statement-top .eyebrow{font-size:8px}.motion-toggle{font-size:9px}.hero-orb{min-width:160px;top:36%}.statement-bottom .button{font-size:12px;padding:14px 16px}.intro-statement h2{font-size:32px}.agency-direction .project-image{height:310px}}
@media(prefers-reduced-motion:reduce){.hero-line{transform:none!important}.hero-orb{transform:translate(-50%,-50%)!important}.agency-direction .project-image img{transform:none!important}.project-cursor{display:none!important}.scroll-copy span{color:var(--color-text)}.hero-line,.hero-orb,.project-image img{will-change:auto!important}}