/* Progressive enhancement: all editorial content is visible before interop runs. */
.cn-site { --cn-burgundy:#701422; --cn-motion-quick:220ms; --cn-motion-reveal:750ms; --cn-motion-major:1150ms; --cn-motion-ease:cubic-bezier(.22,1,.36,1); }
.cn-home { position:relative; overflow-x:clip; }
.cn-hero-panel { height:100%; min-width:0; overflow:clip; position:relative; }
.cn-hero-panel img { width:100%; height:100%; object-fit:cover; }
.cn-word-mask { display:inline-block; overflow:clip; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.cn-word-mask>[data-cn-hero-word] { display:inline-block; }
.cn-line-mask { display:block; overflow:clip; padding-bottom:.12em; margin-bottom:-.12em; }
.cn-line-mask>[data-cn-line] { display:block; }
.cn-footer-brand>.cn-footer-brand-row { font:inherit; margin:0; line-height:.84; overflow:clip; }
.cn-home .cn-ticker>.cn-ticker-track { display:flex; width:max-content; animation:none; }
.cn-ticker-copy { display:flex; align-items:center; justify-content:space-around; flex:none; min-width:100vw; white-space:nowrap; }
.cn-ticker-copy>span { display:inline-block; }
.cn-motion-desktop .cn-hero-stage { height:calc(var(--cn-hero-height) + var(--cn-ticker-height) + 120svh); }
.cn-motion-desktop .cn-hero-media { background:var(--cn-ink); }
.cn-motion-desktop .cn-hero-sticky { position:sticky; top:0; overflow:clip; }
.cn-motion-desktop .cn-qatar-stage { height:calc(var(--cn-qatar-height) + 68svh); }
.cn-motion-desktop .cn-qatar { position:sticky; top:0; overflow:clip; }
.cn-motion-desktop .cn-work,.cn-motion-desktop .cn-story { position:relative; background:var(--cn-paper); }
.cn-hero-cut { display:none; position:absolute; left:-5%; width:110%; bottom:0; padding:18px 0; color:var(--cn-ink); background:var(--cn-lime); font:800 54px/1 CN Display,Impact,sans-serif; white-space:nowrap; overflow:clip; z-index:8; pointer-events:none; }
.cn-hero-cut b { color:var(--cn-blue); margin:0 30px; }
.cn-motion-desktop .cn-hero-cut { display:block; visibility:hidden; }
.cn-doodle { position:absolute; stroke:var(--cn-lime); fill:none; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; pointer-events:none; display:none; }
.cn-motion-ready .cn-doodle { display:block; }
.cn-doodle-crown { width:100px; height:64px; left:43%; top:49%; transform:rotate(-12deg); }
.cn-doodle-arrow { width:108px; height:80px; right:6%; top:46%; }
.cn-scene-rail { display:none; position:fixed; right:10px; top:38%; z-index:45; width:43px; padding:12px 4px; background:#f8f8f5ed; color:var(--cn-ink); border:1px solid #16161622; }
.cn-motion-desktop .cn-scene-rail { display:flex; flex-direction:column; align-items:center; }
.cn-rail-counter { overflow:clip; font-size:9px; display:flex; gap:2px; margin-bottom:14px; white-space:nowrap; flex-shrink:0; }
.cn-rail-counter>span { display:block; }
.cn-scene-rail button { width:32px; height:32px; display:grid; place-items:center; padding:0; border:0; background:transparent; position:relative; }
.cn-scene-rail button::before { content:""; position:absolute; width:1px; background:#16161645; height:100%; top:0; }
.cn-scene-rail button>span { position:relative; width:6px; height:6px; border:1px solid var(--cn-blue); background:var(--cn-paper); border-radius:50%; transition:transform var(--cn-motion-quick),background var(--cn-motion-quick); }
.cn-scene-rail button[aria-current="step"]>span { background:var(--cn-blue); transform:scale(1.7); }
.cn-scene-rail small { writing-mode:vertical-rl; font-size:9px; margin-top:13px; }
.cn-cursor-follower { display:none; position:fixed; z-index:70; pointer-events:none; width:52px; height:52px; place-items:center; background:var(--cn-lime); color:var(--cn-ink); border-radius:50%; font-size:10px; font-weight:700; visibility:hidden; }
.cn-pointer-ready .cn-cursor-follower { display:grid; }
.cn-home .cn-product h3 { width:fit-content; background:linear-gradient(var(--cn-blue),var(--cn-blue)) left bottom/0 1px no-repeat; transition:background-size var(--cn-motion-quick); padding-bottom:3px; }
.cn-home .cn-product:hover h3 { background-size:100% 1px; }
.cn-motion-ready .cn-product-image>img { transition:none; }
.cn-motion-ready :is(.cn-button,.cn-create-arrow),.cn-shell-ready .cn-header-create { transition:background 220ms,color 220ms,border-color 220ms; }
.cn-home .cn-tabs { position:relative; isolation:isolate; }
.cn-tab-indicator { display:none; position:absolute; inset:0 auto auto 0; background:var(--cn-ink); z-index:-1; pointer-events:none; width:1px; height:1px; transform-origin:top left; }
.cn-filter-motion .cn-tab-indicator { display:block; }
.cn-filter-motion .cn-tabs button.is-active { background:transparent; }
.cn-filter-motion .cn-tabs button { transition:color var(--cn-motion-quick); }
.cn-home .cn-story-image { overflow:clip; }
.cn-home .cn-qatar-copy { position:relative; z-index:2; background:var(--cn-blue); }
.cn-motion-desktop .cn-qatar { background:var(--cn-burgundy); }
.cn-home .cn-create-band { overflow:clip; z-index:2; }
.cn-home .cn-create-arrow { position:relative; isolation:isolate; overflow:clip; }
.cn-home .cn-create-arrow::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--cn-blue); clip-path:circle(0 at 50% 100%); transition:clip-path 400ms var(--cn-motion-ease); }
.cn-home .cn-create-arrow:hover { background:transparent; color:white; border-color:var(--cn-blue); transform:none; }
.cn-home .cn-create-arrow:hover::before,.cn-home .cn-create-arrow:active::before { clip-path:circle(150% at 50% 100%); }
.cn-home .cn-create-arrow:active { color:white; }
.cn-site .cn-text-link .app-icon,.cn-footer a .app-icon { transition:transform var(--cn-motion-quick) var(--cn-motion-ease); }
.cn-site .cn-text-link:hover .app-icon,.cn-footer a:hover .app-icon { transform:translateX(5px); }
.cn-nav-panel { display:contents; }
.cn-menu-close { display:none; }
.cn-header { transition:background var(--cn-motion-quick); }
.cn-header.cn-header-compact { background:#f8f8f5f7; }
.cn-header-compact .cn-logo img { transform:scale(.9); transform-origin:left center; }
.cn-logo img { transition:transform var(--cn-motion-quick); }
.cn-nav>a::after { content:""; position:absolute; bottom:5px; left:0; width:100%; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--cn-motion-quick) var(--cn-motion-ease); }
.cn-nav>a:hover::after,.cn-nav>a:focus-visible::after { transform:scaleX(1); }
.cn-nav>a>span { display:inline-block; transition:transform var(--cn-motion-quick); }
.cn-nav>a:hover>span { transform:translate(2px,-3px); }
.cn-header-create { position:relative; isolation:isolate; overflow:clip; }
.cn-header-create::before { content:""; position:absolute; inset:0; background:#d3f12a; z-index:-1; transform:translateX(-101%); transition:transform 400ms var(--cn-motion-ease); }
.cn-header-create:hover::before { transform:translateX(0); }
.cn-header-create .app-icon { transition:transform 180ms var(--cn-motion-ease); }
.cn-header-create:hover .app-icon { transform:translateX(4px); }
.cn-menu-lines { height:16px; border:0; position:relative; }
.cn-menu-lines::before,.cn-menu-lines::after { content:""; position:absolute; top:4px; left:0; width:22px; height:2px; background:currentColor; transition:transform 250ms var(--cn-motion-ease); }
.cn-menu-lines::after { top:11px; }
.cn-menu-button[aria-expanded="true"] .cn-menu-lines::before { transform:translateY(3.5px) rotate(45deg); }
.cn-menu-button[aria-expanded="true"] .cn-menu-lines::after { transform:translateY(-3.5px) rotate(-45deg); }
.cn-static-menu { position:absolute; top:100%; left:0; right:0; background:var(--cn-lime); display:flex; gap:15px; padding:12px; font-size:12px; justify-content:center; }
.cn-footer-motion .cn-footer-bottom { position:relative; border-top-color:transparent; }
.cn-footer-motion .cn-footer-bottom::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:#404040; transform:scaleX(var(--cn-divider,1)); transform-origin:left; }
@media(min-width:1101px) { .cn-motion-desktop :is(.cn-section,.cn-create-band) { padding-right:80px; } }
@media(max-width:950px) { .cn-hero-panel[data-cn-panel="right"] { display:none; } }
@media(max-width:700px) {
    .cn-hero-panel[data-cn-panel="left"] { display:none; }
    .cn-hero-panel[data-cn-panel="centre"] img { display:block; }
    .cn-doodle-crown { width:66px; top:46%; left:auto; right:12%; }
    .cn-doodle-arrow { display:none!important; }
    .cn-shell-ready .cn-nav-panel { display:block; position:fixed; top:74px; left:0; right:0; height:calc(100dvh - 74px); background:var(--cn-blue); color:white; visibility:hidden; pointer-events:none; overflow:auto; overscroll-behavior:contain; clip-path:polygon(0 0,100% 0,100% 0,0 0); }
    .cn-shell-ready .cn-nav-panel.cn-menu-active { pointer-events:auto; }
    .cn-shell-ready .cn-nav { display:flex; position:static; background:transparent; flex-direction:column; align-items:stretch; padding:70px 25px 30px; border:0; box-shadow:none; gap:0; }
    .cn-shell-ready .cn-nav>a { font-size:54px; color:white; padding:19px 0; border-color:#ffffff50; }
    .cn-shell-ready .cn-nav>a>span { color:var(--cn-lime); font-size:12px; vertical-align:top; margin-top:12px; }
.cn-shell-ready .cn-nav .cn-mobile-create { font-family:CN Sans,sans-serif; font-size:16px; font-weight:700; color:var(--cn-ink); background:var(--cn-lime); margin-top:30px; padding:22px; }
    .cn-shell-ready .cn-menu-close { display:grid; place-items:center; position:absolute; right:20px; top:18px; width:44px; height:44px; border:1px solid #ffffff70; color:white; background:transparent; }
}
@media(prefers-reduced-motion:reduce) {
    .cn-cursor-follower,.cn-hero-cut,.cn-doodle,.cn-scene-rail { display:none!important; }
    .cn-home .cn-ticker-track { transform:none!important; animation:none!important; }
    .cn-ticker-copy[aria-hidden="true"] { display:none; }
    .cn-home .cn-ticker-copy { min-width:0; white-space:normal; flex-wrap:wrap; row-gap:10px; padding-inline:15px; font-size:22px; }
    .cn-ticker-copy>span { margin-inline:12px; }
    .cn-motion-desktop .cn-hero-stage,.cn-motion-desktop .cn-qatar-stage { height:auto; }
    .cn-motion-desktop .cn-hero-sticky,.cn-motion-desktop .cn-qatar { position:relative; }
    .cn-site *,.cn-site *::before,.cn-site *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}