.tracking-mark{display:flex;align-items:center;justify-content:center;gap:20px;color:#eee}.tracking-mark svg{width:76px;height:76px;flex-shrink:0}.tracking-mark strong{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.5px}.tracking-art{min-height:280px;border:1px solid #252525;border-radius:18px;background:linear-gradient(145deg,#161616,#080808);display:flex;align-items:center;justify-content:center;position:relative;margin:38px 0}.tracking-art .tracking-mark svg{width:140px;height:140px}.tracking-art small{position:absolute;bottom:22px;left:24px;color:#777;letter-spacing:2px;font-size:10px}.tracking-copy{max-width:740px;margin:40px 0 65px}.tracking-copy h2{font-size:28px;margin-bottom:18px}.tracking-copy p{color:#999;line-height:1.8}.tracking-concept{font-size:12px;letter-spacing:2px;color:#aaa}.page-hero.tracking-hero h1{font-size:clamp(36px,6vw,76px);max-width:950px;line-height:1.1}@media(max-width:600px){.tracking-mark{gap:10px}.tracking-mark svg{width:48px;height:48px}.tracking-mark strong{font-size:15px}}
/* Full-width NTASPACE wordmark inside the compact project card. */
.compact-art.ntaspace-logo-card{padding:20px 18px;gap:0;width:100%;overflow:hidden}.compact-art.ntaspace-logo-card .ntaspace-full-logo{display:block;width:100%;max-width:none;height:auto;max-height:100%;object-fit:contain;filter:none;opacity:1;transform:none}

/* NTASPACE alone: preserve original NTA, reveal SPACE alongside on scroll. */
body.ntaspace-page header .brand{flex-shrink:0}
body.ntaspace-page .space-header-lockup{display:block;width:100px;height:36px;overflow:hidden;transition:width .55s cubic-bezier(.22,1,.36,1)}
body.ntaspace-page .space-header-logo{display:block!important;width:279px!important;height:36px!important;max-width:none!important;color:inherit;transform:none!important;opacity:1!important}
body.ntaspace-page .space-header-logo .space-extension{opacity:0;transform:translateX(-12px);clip-path:inset(0 100% 0 0);transition:opacity .22s ease,transform .5s ease,clip-path .5s ease}
body.ntaspace-page header.is-scrolled .space-header-lockup{width:279px}
body.ntaspace-page header.is-scrolled .space-extension{opacity:1;transform:translateX(0);clip-path:inset(0 0 0 0)}
body.ntaspace-page .tracking-hero h1 .space-page-logo{width:min(100%,720px);height:auto;display:block;color:#eee}
@media(max-width:1100px){body.ntaspace-page .space-header-lockup{width:72px;height:26px}body.ntaspace-page .space-header-logo{width:201.5px!important;height:26px!important}body.ntaspace-page header.is-scrolled .space-header-lockup{width:201.5px}}
@media(max-width:600px){body.ntaspace-page .space-header-lockup{width:61px;height:22px}body.ntaspace-page .space-header-logo{width:170.5px!important;height:22px!important}body.ntaspace-page header.is-scrolled .space-header-lockup{width:170.5px}}
@media(prefers-reduced-motion:reduce){body.ntaspace-page .space-header-lockup,body.ntaspace-page .space-extension{transition:none!important}}
body.ntaspace-page header a.brand{width:auto;flex:0 0 auto}body.ntaspace-page .space-header-lockup{flex:0 0 auto}
/* Shared header logo dimensions on every TR/EN page. */
body:not(.ntaspace-page) header a.brand{width:100px;flex:0 0 100px}
body:not(.ntaspace-page) header .brand .scroll-brand{display:block;position:relative;width:100px;height:36px;flex:0 0 auto}
body:not(.ntaspace-page) header .brand .scroll-brand>svg.brand-morph{display:block;width:100px!important;height:36px!important;max-width:none}
@media(max-width:1100px){body:not(.ntaspace-page) header a.brand{width:72px;flex-basis:72px}body:not(.ntaspace-page) header .brand .scroll-brand{width:72px;height:26px}body:not(.ntaspace-page) header .brand .scroll-brand>svg.brand-morph{width:72px!important;height:26px!important}}
@media(max-width:600px){body:not(.ntaspace-page) header a.brand{width:61px;flex-basis:61px}body:not(.ntaspace-page) header .brand .scroll-brand{width:61px;height:22px}body:not(.ntaspace-page) header .brand .scroll-brand>svg.brand-morph{width:61px!important;height:22px!important}}

.tracking-copy h3{font-size:22px;line-height:1.35;margin:38px 0 14px;color:#eee}.tracking-copy p{margin-bottom:22px}.tracking-art img{object-fit:contain}

.ntaspace-separation{margin:28px 0 48px;border:1px solid #252525;border-radius:18px;overflow:hidden;background:#0a0a0a}.ntaspace-separation img{display:block;width:100%;height:auto}.ntaspace-separation figcaption{padding:16px 22px;color:#999;font-size:12px;line-height:1.6}

.ddos-card{display:flex;gap:18px;align-items:center;justify-content:center;color:#eee}.ddos-card svg{width:65px;height:75px}.ddos-card strong{font-size:clamp(18px,2.2vw,32px);letter-spacing:-1px}.ddos-hero-art{margin:36px 0;border:1px solid #272727;border-radius:18px;padding:60px 24px;display:flex;align-items:center;flex-direction:column;gap:20px;background:radial-gradient(ellipse at top,#202020,#090909 75%)}.ddos-hero-art>svg{width:100px;height:110px}.ddos-hero-art>strong{font-size:clamp(28px,6vw,64px);letter-spacing:-2px}.ddos-capacity{display:flex;flex-direction:column;text-align:center;border-top:1px solid #333;padding-top:24px;margin-top:12px;gap:8px}.ddos-capacity b{font-size:34px;font-weight:500}.ddos-capacity span{font-size:12px;color:#999}

.ddos-card .ddos-wordmark{display:block;width:68%;max-width:340px;height:auto;object-fit:contain}.ddos-hero-art>.ddos-wordmark{width:min(86%,620px);height:auto}.page-hero h1 .ddos-wordmark{display:block;width:min(100%,760px);height:auto}

/* Project-specific wordmarks replace NTA on scroll. NTASPACE remains independent. */
body.project-brand-page header a.brand{width:100px;flex:0 0 auto;transition:width .55s cubic-bezier(.22,1,.36,1)}
body.project-brand-page header.is-scrolled a.brand{width:var(--project-width)}
body.project-brand-page .project-brand-lockup{display:block;position:relative;width:100%;height:36px;overflow:visible}
body.project-brand-page header .project-brand-lockup>svg{display:block;position:absolute;left:0;top:0;height:36px!important;max-width:none!important}
body.project-brand-page header .project-brand-nta{width:100px!important;opacity:1;transform:translateY(0);transition:opacity .18s ease .2s,transform .25s ease .2s}
body.project-brand-page header .project-brand-name{width:var(--project-width)!important;opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .2s ease}
body.project-brand-page header.is-scrolled .project-brand-nta{opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .2s ease}
body.project-brand-page header.is-scrolled .project-brand-name{opacity:1;transform:translateY(0);transition:opacity .25s ease .2s,transform .3s ease .2s}
.ddos-card .ddos-wordmark{width:90%;max-width:440px}.ddos-menu-wordmark{width:100%!important;max-width:230px!important;height:auto!important;object-fit:contain}
@media(max-width:1100px){body.project-brand-page header a.brand{width:72px;flex-basis:auto}body.project-brand-page header.is-scrolled a.brand{width:var(--project-tablet)}body.project-brand-page .project-brand-lockup{height:26px}body.project-brand-page header .project-brand-lockup>svg{height:26px!important}body.project-brand-page header .project-brand-nta{width:72px!important}body.project-brand-page header .project-brand-name{width:var(--project-tablet)!important}}
@media(max-width:600px){body.project-brand-page header a.brand{width:61px;flex-basis:auto}body.project-brand-page header.is-scrolled a.brand{width:var(--project-mobile)}body.project-brand-page .project-brand-lockup{height:22px}body.project-brand-page header .project-brand-lockup>svg{height:22px!important}body.project-brand-page header .project-brand-nta{width:61px!important}body.project-brand-page header .project-brand-name{width:var(--project-mobile)!important}}
@media(prefers-reduced-motion:reduce){body.project-brand-page header a.brand,body.project-brand-page header .project-brand-lockup>svg{transition:none!important}}
