.references .ref img,.references .ref:hover img{filter:none!important;opacity:1!important;transition:none!important}
.portfolio-references{margin:65px -4vw 0;padding:55px 0 42px;background:#1d201e;overflow:hidden;font-family:Manrope,Arial,sans-serif;color:#eeeee8}
.portfolio-references .ref-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:0 6vw 28px}
.portfolio-references h2{font-size:clamp(28px,3vw,45px);font-weight:400;letter-spacing:-1.5px;margin:0}
.portfolio-references .ref-heading p{font-size:11px;color:#a4aaa2;line-height:1.7}
.portfolio-references .marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);padding:8px 0}
.portfolio-references .logo-track{display:flex;width:max-content;gap:14px;animation:portfolio-logo-flow 180s linear infinite}
.portfolio-references .marquee:nth-child(2) .logo-track{animation-direction:reverse;animation-duration:200s}
.portfolio-references .logo-set{display:flex;gap:14px}
.portfolio-references .ref{width:166px;height:87px;flex:none;display:flex;align-items:center;justify-content:center;padding:19px 24px;background:#f3f3ef;border-radius:3px}
.portfolio-references .ref img{object-fit:contain;max-width:140px;max-height:52px}
.portfolio-references:hover .logo-track,.portfolio-references:focus-within .logo-track,.portfolio-references.is-paused .logo-track{animation-play-state:paused}
.portfolio-references .ref-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 6vw 0;color:#9da49a;font-size:10px}
.portfolio-references .ref-controls button{background:transparent;color:inherit;border:1px solid #ffffff30;border-radius:24px;padding:9px 15px;font:inherit;cursor:pointer}
@keyframes portfolio-logo-flow{to{transform:translateX(calc(-50% - 7px))}}
@media(max-width:650px){.portfolio-references .ref-heading{display:block}.portfolio-references .ref-heading p{margin-top:15px}.portfolio-references .ref{width:140px;height:76px;padding:18px}.portfolio-references .ref img{max-width:116px;max-height:47px}}
@media(prefers-reduced-motion:reduce){.portfolio-references .logo-track{animation:none!important}.portfolio-references .marquee{overflow-x:auto;mask-image:none}.portfolio-references .logo-set[aria-hidden]{display:none}}

/* Match white-backed source logos to the card surface. */
.references .ref,.references .ref:hover,.portfolio-references .ref,.portfolio-references .ref:hover{background:#fff!important}

/* Reference strips run continuously without hover or focus pauses. */
.references:hover .logo-track,.references:focus-within .logo-track,.references.is-paused .logo-track,.portfolio-references:hover .logo-track,.portfolio-references:focus-within .logo-track,.portfolio-references.is-paused .logo-track{animation-play-state:running}

/* Shared compact footer: membership beside copyright and legal links. */
footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:32px;row-gap:12px;padding-top:24px;padding-bottom:24px}
footer .forum-membership{grid-column:1;grid-row:1 / 3;align-self:center;padding:0 28px 0 0;border-bottom:0;border-right:1px solid #ffffff1c;gap:12px}
footer .forum-membership img{width:48px;height:48px;border-radius:4px}
footer .forum-membership>div{gap:5px}
footer .forum-membership strong{font-size:11px}
footer .forum-membership span{font-size:10px;white-space:nowrap}
footer>span{grid-column:2;grid-row:1}
footer>.other{grid-column:3;grid-row:1;justify-self:end}
footer .legal-links{grid-column:2 / 4;grid-row:2;padding:0;border:0;gap:10px 22px;line-height:1.6}
body[data-brand="colorum"] footer{grid-template-columns:1fr auto}
body[data-brand="colorum"] footer>span{grid-column:1}
body[data-brand="colorum"] footer>.other{grid-column:2}
body[data-brand="colorum"] footer .legal-links{grid-column:1 / 3}
@media(max-width:760px){footer{grid-template-columns:1fr auto;column-gap:20px;row-gap:16px}footer .forum-membership{grid-column:1;grid-row:1;padding:0;border:0}footer>.other{grid-column:2;grid-row:1;font-size:10px}footer>span{grid-column:1 / 3;grid-row:2}footer .legal-links{grid-column:1 / 3;grid-row:3;gap:10px 18px}body[data-brand="colorum"] footer .legal-links{grid-row:2}body[data-brand="colorum"] footer>span{grid-row:1}}
@media(max-width:420px){footer{column-gap:12px}footer>.other{max-width:115px;text-align:right;line-height:1.7}footer .forum-membership{gap:9px}footer .forum-membership img{width:42px;height:42px}}
/* Cross-brand navigation uses the original brand marks. */
footer>.other{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:4px 8px;background:transparent;border:0;text-decoration:none;cursor:pointer;max-width:none;transition:opacity .2s ease}
footer>.other:hover{opacity:.8}
.footer-brand-logo{display:block;object-fit:contain;height:48px}
.footer-brand-logo.forum{width:40px;filter:none}
.footer-brand-logo.colorum{width:145px;filter:brightness(0) invert(1)}
@media(max-width:480px){footer>.other{padding-inline:0}.footer-brand-logo.colorum{width:120px;height:42px}.footer-brand-logo.forum{width:35px;height:44px}}
/* Centre copyright and legal navigation as one horizontal group. */
footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 28px;text-align:center}
body[data-brand="colorum"] footer{display:flex}
footer>span,footer>.legal-links{grid-column:auto;grid-row:auto}
footer>span{white-space:nowrap}
footer .legal-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:auto;gap:12px 24px;padding:0;border:0;text-align:center}
footer>.forum-membership{order:-2;flex:0 0 100%;justify-content:center;border:0;padding:0}
footer>.other{order:-1;flex:0 0 100%;justify-content:center;padding:0;margin:0 0 6px}
footer>.other .footer-brand-logo{flex:none}
@media(max-width:600px){footer{gap:12px 20px}footer>span{flex:0 0 100%}footer .legal-links{gap:8px 18px}}
/* Membership left, cross-brand mark right; legal row remains centred below. */
footer>.forum-membership{flex:1 1 calc(50% - 14px);justify-content:flex-start;min-width:0}
footer>.other{flex:1 1 calc(50% - 14px);justify-content:flex-end;margin:0 0 8px}
body[data-brand="colorum"] footer>.other{flex:0 0 100%;justify-content:flex-end}
@media(max-width:600px){footer{column-gap:16px}footer>.forum-membership,footer>.other{flex-basis:calc(50% - 8px)}footer>.forum-membership{gap:10px}footer>.forum-membership img{width:40px;height:40px}footer>.other .footer-brand-logo.colorum{width:110px}}
/* Three aligned desktop groups: membership, legal information, partner mark. */
footer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 30px;text-align:center}
footer>.forum-membership{grid-column:1;grid-row:1;order:initial;justify-content:flex-start;margin:0;padding:0;border:0}
footer>.footer-center{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 22px;min-width:0}
.footer-center>span{font-size:11px;white-space:nowrap}
footer .footer-center .legal-links{width:auto;gap:10px 20px;justify-content:center;font-size:11px}
footer>.other{grid-column:3;grid-row:1;order:initial;margin:0;justify-content:flex-end}
body[data-brand="colorum"] footer{display:grid;grid-template-columns:minmax(0,1fr) auto}
body[data-brand="colorum"] footer>.footer-center{grid-column:1}
body[data-brand="colorum"] footer>.other{grid-column:2;grid-row:1}
@media(max-width:800px){footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 18px}footer>.other{grid-column:2;grid-row:1}footer>.footer-center{grid-column:1 / -1;grid-row:2}body[data-brand="colorum"] footer{grid-template-columns:1fr auto}body[data-brand="colorum"] footer>.footer-center{grid-column:1 / -1;grid-row:2}body[data-brand="colorum"] footer>.other{grid-column:2;grid-row:1}}

/* Dark surfaces with restrained brand colour; content and logos retain their colours. */
body{
  --surface-hero:#29191c;
  --surface-services:#342023;
  --surface-work:#241b1e;
  --surface-references:#33251f;
  --surface-team:#281e22;
  --surface-contact:#3a1c23;
  --surface-footer:#1d1316;
  --wash-primary:rgba(202,58,40,.25);
  --wash-secondary:rgba(222,105,63,.17);
  --surface-line:rgba(237,120,105,.25);
}
body[data-brand="colorum"]{
  --surface-hero:#2d1d3d;
  --surface-services:#302443;
  --surface-work:#3b2034;
  --surface-references:#1a3143;
  --surface-team:#28223b;
  --surface-contact:#402137;
  --surface-footer:#21162b;
  --wash-primary:rgba(170,79,250,.30);
  --wash-secondary:rgba(244,91,163,.23);
  --surface-line:rgba(197,153,253,.30);
}
.hero{background:radial-gradient(ellipse at 85% 28%,var(--wash-primary),transparent 62%),var(--surface-hero)}
.services{background:radial-gradient(ellipse at 0 100%,var(--wash-secondary),transparent 65%),var(--surface-services);border-top-color:var(--surface-line)}
.portfolio-entry{background:radial-gradient(ellipse at 95% 50%,var(--wash-secondary),transparent 65%),var(--surface-work);border-top:1px solid var(--surface-line)}
.references,.portfolio-references{background:var(--surface-references);border-top:1px solid var(--surface-line);border-bottom:1px solid var(--surface-line)}
#ekip{background:linear-gradient(120deg,var(--surface-team),var(--surface-hero))}
.contact{background:radial-gradient(ellipse at 80% 90%,var(--wash-primary),transparent 70%),var(--surface-contact);border-top:1px solid var(--surface-line)}
footer{background:var(--surface-footer)}
body[data-brand="colorum"] .colorum-awards{background:radial-gradient(ellipse at 85% 0,rgba(216,157,72,.16),transparent 65%),#302333;border-top-color:#d4bd8226}
body[data-brand="colorum"] .award-card{background:#ffffff05}
body[data-brand="colorum"] .services-kicker,body[data-brand="colorum"] .service-number{color:#c6a5f2}
body[data-brand="colorum"] .service-item:nth-child(3n+2) .service-number{color:#edabc8}
body[data-brand="colorum"] .service-item:nth-child(3n) .service-number{color:#91bfde}
/* The separate Forum presentation shares the same restrained red accents. */
.portfolio-title{background:radial-gradient(ellipse at 80% 50%,var(--wash-primary),transparent 70%)}

body[data-brand="colorum"] .references{background:radial-gradient(ellipse at 10% 50%,rgba(43,137,177,.18),transparent 70%),var(--surface-references)}
body[data-brand="colorum"] #ekip{background:radial-gradient(ellipse at 90% 80%,rgba(109,77,185,.20),transparent 65%),var(--surface-team)}

/* All moving strips share the text column's left and right edges. */
.references #refs,.portfolio-references #portfolio-references-logos{margin-inline:6vw;min-width:0}
.references .marquee,.portfolio-references .marquee{mask-image:none}
.work-photo-window{overflow:hidden;width:100%;margin-top:28px;cursor:default;border-radius:6px}
.work-photo-track{display:flex;gap:18px;width:max-content;animation:work-photo-flow 65s linear infinite}
.work-photo-set{display:flex;gap:18px;flex:none}
.work-photo{margin:0;width:clamp(260px,32vw,460px);aspect-ratio:3/2;flex:none;overflow:hidden;border-radius:6px;background:#ffffff08}
.work-photo img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
@keyframes work-photo-flow{to{transform:translateX(calc(-50% - 9px))}}
@media(max-width:600px){.work-photo{width:72vw;min-width:0}.work-photo-track,.work-photo-set{gap:12px}@keyframes work-photo-flow{to{transform:translateX(calc(-50% - 6px))}}}
@media(prefers-reduced-motion:reduce){.work-photo-window{overflow-x:auto}.work-photo-track{animation:none}.work-photo-set[aria-hidden="true"]{display:none}}

/* Readable service rows with restrained, brand-aware motion. */
.services .service-item{--service-rgb:237,120,105;position:relative;isolation:isolate;padding:28px 18px 31px;border-radius:0 0 8px 8px;transition:border-color .3s ease,box-shadow .3s ease}
body[data-brand="forum"] .services .service-item:nth-child(2n){--service-rgb:235,151,107}
body[data-brand="colorum"] .services .service-item{--service-rgb:192,149,250}
body[data-brand="colorum"] .services .service-item:nth-child(3n+2){--service-rgb:246,142,188}
body[data-brand="colorum"] .services .service-item:nth-child(3n){--service-rgb:115,194,235}
.services .service-item::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(115deg,rgba(var(--service-rgb),.18),rgba(var(--service-rgb),.025));opacity:0;transform:scaleX(.94);transform-origin:left;transition:opacity .35s ease,transform .45s ease;pointer-events:none}
.services .service-item::after{content:"↗";position:absolute;right:17px;top:29px;color:rgb(var(--service-rgb));font-size:20px;opacity:0;transform:translate(-5px,5px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.services .service-item>div{padding-right:18px}
.services .service-item h3{transition:transform .35s ease,color .3s ease}
.services .service-item .service-number{color:rgb(var(--service-rgb));transform-origin:left top;transition:transform .35s ease}
.services .service-item:is(:focus-visible,.is-active){outline:1px solid rgba(var(--service-rgb),.45);outline-offset:3px;border-top-color:rgba(var(--service-rgb),.7)}
.services .service-item:is(:focus-visible,.is-active)::before{opacity:1;transform:scaleX(1)}
.services .service-item:is(:focus-visible,.is-active)::after{opacity:1;transform:translate(0,0)}
.services .service-item:is(:focus-visible,.is-active) h3{transform:translateX(5px);color:rgb(var(--service-rgb))}
.services .service-item:is(:focus-visible,.is-active) .service-number{transform:scale(1.25)}
@media(hover:hover){
 .services .service-item:hover{border-top-color:rgba(var(--service-rgb),.7)}
 .services .service-item:hover::before{opacity:1;transform:scaleX(1)}
 .services .service-item:hover::after{opacity:1;transform:translate(0,0)}
 .services .service-item:hover h3{transform:translateX(5px);color:rgb(var(--service-rgb))}
 .services .service-item:hover .service-number{transform:scale(1.25)}
}
.services .services-animated .service-item{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease,border-color .3s ease;transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms}
.services .services-animated .service-item.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:600px){.services .service-item{padding:23px 12px}.services .service-item::after{right:11px;top:24px}}
@media(prefers-reduced-motion:reduce){
 .services .service-item,.services .service-item::before,.services .service-item::after,.services .service-item h3,.services .service-item .service-number{transition:none!important;transform:none!important}
 .services .services-animated .service-item{opacity:1}
}

/* Fixed brand slot keeps navigation in place when the logo changes. */
header>a:first-child{display:flex;align-items:center;flex:0 0 174px;min-height:68px}
header nav a,.renewal-header nav a{position:relative;display:inline-block;padding:9px 0;transition:color .22s ease}
header nav a::after,.renewal-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;border-radius:2px;background:var(--accent,#ed7869);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
header nav a:is(:hover,:focus-visible),.renewal-header nav a:is(:hover,:focus-visible){color:var(--accent,#ed7869)}
header nav a:is(:hover,:focus-visible)::after,.renewal-header nav a:is(:hover,:focus-visible)::after{transform:scaleX(1)}
/* Stable heading geometry, independent of the rotating slogan. */
.hero h1 em{font-size:clamp(30px,5.6vw,94px);line-height:1.15;letter-spacing:-.045em;margin-top:.2em;min-height:2.3em;overflow-wrap:normal}
@media(max-width:800px){header>a:first-child{flex-basis:110px;min-height:52px}}
@media(max-width:600px){.hero h1 em{font-size:clamp(28px,6.8vw,42px);line-height:1.2;min-height:2.4em}}
@media(prefers-reduced-motion:reduce){header nav a,header nav a::after,.renewal-header nav a,.renewal-header nav a::after{transition:none}}

.hero{justify-content:flex-start}
.hero .hero-meta{margin-top:auto;padding-top:20px}

/* Space is measured for the longest heading so the page stays still as it types. */
.hero h1 em{font-size:clamp(30px,5.6vw,94px);line-height:1.15;letter-spacing:-.045em;margin-top:.2em;overflow-wrap:normal;text-wrap:wrap}
.hero h1 em.is-typing::after{content:"";display:inline-block;width:2px;height:.78em;margin-left:.09em;background:currentColor;vertical-align:-.02em;animation:type-caret 1s steps(1) infinite}
@keyframes type-caret{50%{opacity:0}}
@media(max-width:600px){.hero h1 em{font-size:clamp(28px,6.8vw,42px);line-height:1.2}}
@media(prefers-reduced-motion:reduce){.hero h1 em::after{display:none}}

/* Shared phone/tablet layer; content and interactions remain available. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{min-width:0}
main,.section,.hero,.hero-bottom,.contact-grid,.team-grid,.services-grid,.award-cards,.award-card,.layout,.stage,.playlist{min-width:0}
img,video{max-width:100%}
.person,.person h3,.service-item>div,.award-copy,.contact-grid>div{min-width:0}
.person a,.big-mail,.address,.award-copy dd{overflow-wrap:anywhere}
button,a,input,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#legal-dialog,#portfolio-request{max-height:calc(100dvh - 32px);overscroll-behavior:contain;scrollbar-gutter:stable}
#legal-dialog button,#portfolio-request button{min-height:44px}
#legal-content{font-size:14px}
.request-grid input{font-size:16px}
@media(max-width:1100px){
 body>header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:0;height:auto;gap:14px 20px;margin-inline:6vw;padding:16px 0}
 body>header>a:first-child{grid-column:1;grid-row:1;min-height:64px;min-width:0;width:174px;max-width:100%}
 body>header .tools{display:contents}
 body>header .lang{grid-column:2;grid-row:1;justify-self:end;margin:0;min-width:44px;min-height:44px;font-size:12px}
 body>header .brand-picker{grid-column:1 / -1;grid-row:2;order:initial;width:100%;min-width:0}
 body>header .switch{display:flex;width:100%;gap:10px;min-width:0}
 body>header .switch button{flex:1;min-width:0;min-height:52px;padding:12px 18px}
 body>header nav{grid-column:1 / -1;grid-row:3;order:initial;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0 24px;width:100%;padding-top:9px;border-top:1px solid #ffffff20;font-size:12px}
 body>header nav a{min-height:44px;display:inline-flex;align-items:center;padding-block:10px}
 .hero{min-height:0;max-height:none;padding:36px 6vw 30px}
 .hero h1{font-size:clamp(48px,10.5vw,112px);margin:35px 0 26px}
 .hero-bottom{gap:20px}
 .hero p{font-size:15px;line-height:1.8;margin:0 0 12px;max-width:520px}
 .hero .hero-meta{margin-top:30px;gap:20px;padding-top:20px;flex-wrap:wrap}
 .section{padding:58px 6vw}
 .services-head,.award-intro{gap:28px}
 .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
 .contact-grid{grid-template-columns:1fr;gap:30px}
 .contact h2{font-size:clamp(40px,7vw,76px)}
 .big-mail{font-size:clamp(20px,4vw,34px);max-width:100%}
 .portfolio-feature-copy{max-width:90%;padding:32px}
 .portfolio-feature{min-height:330px}
}
@media(max-width:800px){
 .hero .intro-note{display:block;font-size:12px;line-height:1.8;max-width:520px}
 .hero-bottom{grid-template-columns:minmax(0,1fr)}
 .services-head{grid-template-columns:1fr;gap:20px}
 .services-grid{grid-template-columns:1fr}
 .services-head>p,.service-item p{max-width:none}
 .services .service-item{padding-block:24px}
 .service-item h3{font-size:20px}
 .award-intro{grid-template-columns:1fr;gap:20px}
 .award-cards{grid-template-columns:1fr}
 .award-card{grid-template-columns:150px minmax(0,1fr)}
 .award-visual{min-height:170px;height:auto;margin:24px 0;padding:20px}
 .award-copy{padding:28px 24px 28px 0}
 .muse-visual img{height:170px}
 .section-head{display:block;margin-bottom:30px}
 .section-head small{display:block;max-width:none;margin-top:14px;line-height:1.7}
 .section-head h2,.services h2,.award-intro h2{font-size:clamp(30px,6.4vw,48px);letter-spacing:-1.3px;line-height:1.2}
 .portfolio-feature h3{font-size:clamp(28px,5vw,40px)}
}
@media(max-width:600px){
 body>header{row-gap:10px}
 body>header>a:first-child{min-height:58px;width:150px}
 body>header .logo{width:46px;height:58px}
 body>header .logo.colorum{width:150px;height:46px}
 body>header nav{gap:0 17px;font-size:11px}
 body>header .switch button b{font-size:21px}
 .eyebrow{font-size:9px;letter-spacing:1.4px;line-height:1.7}
 .hero{padding-top:28px}
 .hero h1{font-size:12.2vw;margin:26px 0 22px}
 .hero h1 em{font-size:clamp(26px,6.8vw,40px)}
 .hero p{font-size:14px}
 .hero-meta{font-size:9px;line-height:1.8}
 .hero-meta a{min-height:36px;display:inline-flex;align-items:center}
 .orbit{opacity:.3}
 .section{padding-block:44px}
 .team-grid{grid-template-columns:minmax(0,1fr)}
 .person{padding-block:22px}
 .person h3{font-size:19px}
 .person p,.person a{font-size:13px;line-height:1.6}
 .person a{padding-block:0}
 .contact h2{font-size:clamp(34px,9vw,50px);margin-bottom:30px}
 .contact-short,.services-contact{min-height:44px}
 .portfolio-feature{min-height:310px}
 .portfolio-feature-copy{max-width:100%;padding:26px 22px 72px}
 .portfolio-feature p{max-width:none;padding-right:12px}
 .portfolio-feature b{gap:20px;font-size:11px;margin-top:14px}
 .feature-play{right:20px;bottom:18px}
 .request-inner{padding:22px 20px}
 .request-grid{grid-template-columns:1fr;gap:15px}
 .request-wide{grid-column:auto}
 .request-top{padding:12px 16px;gap:12px}
 .request-top>span{font-size:9px;line-height:1.6;letter-spacing:1px}
 #request-close,#close-legal{width:44px;min-width:44px;height:44px}
 #legal-content{padding:5px 18px 24px;line-height:1.8}
 #legal-content h1{font-size:22px}
 #legal-content h2{font-size:18px;margin-top:24px}
 footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
 footer .legal-links a{font-size:11px;min-height:36px;display:inline-flex;align-items:center}
}
@media(max-width:480px){
 .award-card{grid-template-columns:minmax(0,1fr)}
 .award-visual{margin:0;min-height:0;padding:22px 24px 0;height:auto;align-items:flex-start;flex-direction:row;justify-content:flex-start;gap:20px}
 .felis-visual img{width:150px;max-height:65px}
 .felis-visual>span{font-size:16px;align-self:center}
 .muse-visual img{height:125px;max-width:100%}
 .award-copy{padding:22px}
 .award-copy h3{font-size:23px}
 .award-copy dd,.award-copy a{font-size:12px}
 .award-copy a{min-height:40px}
}
/* Separate presentation: retain categories, stories, video and playlist on small screens. */
@media(max-width:1000px){
 .renewal-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;min-height:0;height:auto}
 .renewal-header>a:first-child{grid-column:1;grid-row:1;width:auto;min-height:58px}
 .renewal-header .renewal-switch{grid-column:2;grid-row:1;gap:8px;min-width:0}
 .renewal-header .renewal-switch a{min-width:0;padding:10px 14px;min-height:48px}
 .renewal-header .renewal-switch b{font-size:19px}
 .renewal-header nav{display:flex;grid-column:1 / -1;grid-row:2;flex-wrap:wrap;justify-content:flex-start;gap:0 19px;width:100%;font-size:11px}
 .renewal-header nav a{min-height:44px;display:inline-flex;align-items:center}
 .portfolio-title{display:block;padding-block:30px}
 .portfolio-title h1{font-size:clamp(34px,7vw,58px);letter-spacing:-1.8px}
 .portfolio-title-actions{margin-top:20px;gap:18px;flex-wrap:wrap}
 .layout,body.is-presentation .layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"categories" "stage" "playlist"}
 .category-panel,.stage,.playlist{grid-column:auto}
 .video-frame,body.is-presentation .video-frame{min-height:0;aspect-ratio:16 / 9}
 .playlist{position:static;max-height:none}
 .video-meta{padding:20px}
 .video-meta h2{font-size:20px;overflow-wrap:anywhere}
}
@media(max-width:600px){
 .renewal-header .renewal-switch a{padding:10px;gap:7px}
 .renewal-header .renewal-switch b{font-size:17px}
 .renewal-header .renewal-logo img{width:40px;height:50px}
 .portfolio-title-actions>a,.presentation-button{min-height:44px}
 .stories-panel,.category-panel,.playlist{min-width:0;max-width:100%}
 .video-meta{padding:16px}
}
@media(orientation:landscape) and (max-height:550px){
 #legal-dialog,#portfolio-request{max-height:calc(100dvh - 16px);margin-block:auto}
 .request-inner{padding-top:18px}
 .hero{min-height:0}
 .hero h1{margin-top:20px}
}
/* Reference headings and strips already own their 6vw inset. */
@media(max-width:1100px){.section.references{padding-inline:0}}

/* More deliberate navigation typography and quiet, tactile interactions. */
body>header nav,.renewal-header nav{gap:4px;padding:5px;border:1px solid #ffffff15;border-radius:30px;background:#ffffff03;align-items:center}
body>header nav a,.renewal-header nav a{padding:11px 14px;min-height:42px;border-radius:24px;font-family:Manrope,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.045em;line-height:1.5;white-space:nowrap;transition:color .25s ease,background .25s ease,box-shadow .25s ease}
body>header nav a::after,.renewal-header nav a::after{left:15px;right:15px;bottom:6px;height:1px}
body>header nav a:is(:hover,:focus-visible),.renewal-header nav a:is(:hover,:focus-visible){background:color-mix(in srgb,var(--accent,#ed7869) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#ed7869) 18%,transparent)}
body>header .lang{display:grid;place-items:center;width:46px;height:44px;min-width:46px;padding:8px;border:1px solid #ffffff20;border-radius:12px;background:#ffffff04;transition:background .25s ease,border-color .25s ease}
body>header .lang:hover{background:#ffffff0d;border-color:var(--accent)}
body>header .lang img{display:block;width:30px;height:20px;object-fit:cover;border-radius:3px;box-shadow:0 1px 6px #0004}
.switch button,.renewal-switch a{justify-content:center;text-align:center}
.switch button b,.renewal-switch b{font-size:19px;line-height:1.3;letter-spacing:-.5px;font-weight:600}
.switch button span{min-width:0}
.switch button i,.renewal-switch i{display:none}
.services .service-item::after{content:none!important;display:none!important}
.services .service-item>div{padding-right:0}
/* Slow atmospheric gradients, contained to the opening section. */
.hero{background:linear-gradient(120deg,#24141b 0%,#551c2b 35%,#7b2631 62%,#2b1720 100%);background-size:220% 220%;animation:hero-atmosphere 8s ease-in-out infinite}
body[data-brand="colorum"] .hero{background:linear-gradient(120deg,#302045 0%,#523064 25%,#6d2e59 48%,#254c69 73%,#34234c 100%);background-size:250% 250%;animation:hero-atmosphere 8s ease-in-out infinite}
@supports(background-clip:text) or (-webkit-background-clip:text){
 body[data-brand="colorum"] #hero-line{color:transparent;background:linear-gradient(100deg,#ffb8d4,#ffd58e,#cbb6ff,#a5deff,#ffb8d4);background-size:250% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:hero-ink 6s ease-in-out infinite}
 body[data-brand="forum"] #hero-line{color:transparent;background:linear-gradient(105deg,#ffc3b3,#ff877b,#eaa1b6,#ffc3b3);background-size:220% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:hero-ink 6s ease-in-out infinite}
 .hero h1 em.is-typing::after{background:var(--accent)}
}
@keyframes hero-atmosphere{0%,100%{background-position:0% 35%}50%{background-position:100% 65%}}
@keyframes hero-ink{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(min-width:1251px){body>header nav{gap:0}body>header nav a{padding-inline:10px;font-size:10px}.switch button{min-width:180px;padding-inline:14px}}
@media(max-width:1100px){body>header nav{justify-content:flex-start;gap:3px;padding:5px;border-radius:18px}body>header nav a{padding:10px 13px;font-size:11px}.switch button b{font-size:21px}}
@media(max-width:600px){body>header nav,.renewal-header nav{gap:2px;border-radius:16px;padding:4px}body>header nav a,.renewal-header nav a{font-size:10px;letter-spacing:.025em;padding:10px 11px;min-height:42px}body>header .switch button{padding:12px 9px;min-height:58px}body>header .switch button b{font-size:17px;letter-spacing:-.4px}.renewal-header .renewal-switch a{padding:10px 9px}.renewal-header .renewal-switch b{font-size:14px;line-height:1.25}.renewal-header .renewal-switch{max-width:calc(100vw - 100px)}}
@media(max-width:360px){body>header .switch button b{font-size:15px}.renewal-header .renewal-switch b{font-size:12px}body>header nav a{padding-inline:9px}}
@media(prefers-reduced-motion:reduce){.hero,body[data-brand="colorum"] .hero,body[data-brand] #hero-line{animation:none}body>header nav a,.renewal-header nav a,body>header .lang{transition:none}}
/* Clearer navigation sizing at every breakpoint. */
body>header nav a,.renewal-header nav a{font-size:13px;font-weight:600;letter-spacing:.035em;padding:12px 16px;min-height:46px}
@media(min-width:1251px){body>header nav a{font-size:12px;padding-inline:13px}}
@media(max-width:1100px){body>header nav a,.renewal-header nav a{font-size:13px;padding:12px 15px}}
@media(max-width:600px){body>header nav a,.renewal-header nav a{font-size:12px;letter-spacing:.015em;padding:11px 13px;min-height:44px}}
@media(max-width:360px){body>header nav a,.renewal-header nav a{font-size:12px;padding-inline:11px}}
/* Colour blocks provide separation; avoid partial rules around the opening area. */
body>header,.renewal-header{border-bottom:0}
body>header nav,.renewal-header nav{border:0}
.hero .hero-meta{border-top:0}
.hero+.services{border-top:0}
/* More generous menu scale and spacing. */
body>header nav,.renewal-header nav{column-gap:12px;row-gap:6px}
body>header nav a,.renewal-header nav a{font-size:14px;letter-spacing:.04em;padding:13px 17px;min-height:48px}
@media(min-width:1251px){body>header nav a{font-size:14px;padding-inline:15px}body>header nav{column-gap:10px}}
@media(max-width:1100px){body>header nav,.renewal-header nav{column-gap:14px}body>header nav a,.renewal-header nav a{font-size:14px;padding:12px 15px}}
@media(max-width:600px){body>header nav,.renewal-header nav{column-gap:10px;row-gap:4px}body>header nav a,.renewal-header nav a{font-size:13px;letter-spacing:.025em;padding:11px 12px;min-height:46px}}
@media(max-width:360px){body>header nav,.renewal-header nav{column-gap:7px}body>header nav a,.renewal-header nav a{font-size:13px;padding-inline:10px}}
/* Compact flag with an invisible, touch-friendly hit area. */
body>header .lang{border:0;background:transparent;padding:10px;box-shadow:none;border-radius:0}
body>header .lang:hover{border:0;background:transparent}
body>header .lang img{width:23px;height:15px;border-radius:1px;box-shadow:none}
/* The opening description stands alone after removing the secondary brand note. */
.hero-bottom{grid-template-columns:minmax(0,1fr)}
/* A clearly visible portfolio play marker in each brand's accent. */
.portfolio-feature .feature-play{background:#c8493a;color:#fff;border:1px solid #ffb2a6;box-shadow:0 0 0 7px #ed78691c,0 8px 32px #0005,0 0 32px #ed78694d;text-shadow:0 1px 5px #0003;transition:background .25s ease,box-shadow .25s ease}
body[data-brand="colorum"] .portfolio-feature .feature-play{background:#914fce;border-color:#e0b8ff;box-shadow:0 0 0 7px #bd9af31f,0 8px 32px #0005,0 0 35px #bd9af359}
.portfolio-feature:hover .feature-play{background:#db5444;box-shadow:0 0 0 10px #ed786926,0 8px 32px #0005,0 0 42px #ed786966}
body[data-brand="colorum"] .portfolio-feature:hover .feature-play{background:#a05dde;box-shadow:0 0 0 10px #bd9af32b,0 8px 32px #0005,0 0 42px #bd9af373}
/* Distinct Colorum menu colours, with matching text, wash and underline. */
body[data-brand="colorum"]>header nav a:nth-child(1){--nav-accent:#c7a1ff}
body[data-brand="colorum"]>header nav a:nth-child(2){--nav-accent:#ff9fc6}
body[data-brand="colorum"]>header nav a:nth-child(3){--nav-accent:#ffbc83}
body[data-brand="colorum"]>header nav a:nth-child(4){--nav-accent:#f2db86}
body[data-brand="colorum"]>header nav a:nth-child(5){--nav-accent:#94d9ff}
body[data-brand="colorum"]>header nav a::after{background:var(--nav-accent)}
body[data-brand="colorum"]>header nav a:is(:hover,:focus-visible){color:var(--nav-accent);background:color-mix(in srgb,var(--nav-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nav-accent) 35%,transparent),0 4px 18px color-mix(in srgb,var(--nav-accent) 8%,transparent)}
/* Centre wrapped menu rows on phones. */
@media(max-width:600px){body>header nav,.renewal-header nav{justify-content:center;text-align:center}}
/* Multicolour outline for the Colorum brand switch. */
body>header .switch button[data-brand="colorum"],.renewal-switch a[href*="brand=colorum"]{border:1px solid transparent;background:linear-gradient(#201d26,#201d26) padding-box,linear-gradient(115deg,#bd93ff,#f08bb9,#f6b26f,#edda83,#82c8f0,#bd93ff) border-box;box-shadow:none}
body>header .switch button[data-brand="colorum"]:is(:hover,.active),.renewal-switch a[href*="brand=colorum"]:is(:hover,.active){background:linear-gradient(#302438,#302438) padding-box,linear-gradient(115deg,#bd93ff,#f08bb9,#f6b26f,#edda83,#82c8f0,#bd93ff) border-box;box-shadow:0 0 16px #bd93ff20}
/* Match border weight and interaction timing for both brand switches. */
body>header .switch button[data-brand="forum"],.renewal-switch a[href*="brand=forum"]{--switch-face:#241b1d;--switch-active-face:#352024;--switch-border:linear-gradient(115deg,#ed7869,#f3a18f);--switch-glow:#ed786920}
body>header .switch button[data-brand="colorum"],.renewal-switch a[href*="brand=colorum"]{--switch-face:#201d26;--switch-active-face:#302438;--switch-border:linear-gradient(115deg,#bd93ff,#f08bb9,#f6b26f,#edda83,#82c8f0,#bd93ff);--switch-glow:#bd93ff20}
body>header .switch button[data-brand],.renewal-switch a[href]{border:1px solid transparent;background:linear-gradient(var(--switch-face),var(--switch-face)) padding-box,var(--switch-border) border-box;box-shadow:none;transform:translateY(0);transition:transform .25s ease,background .3s ease,box-shadow .3s ease}
body>header .switch button[data-brand]:is(:hover,.active),.renewal-switch a[href]:is(:hover,.active){border:1px solid transparent;background:linear-gradient(var(--switch-active-face),var(--switch-active-face)) padding-box,var(--switch-border) border-box;box-shadow:0 0 16px var(--switch-glow)}
@media(hover:hover){body>header .switch button[data-brand]:hover,.renewal-switch a[href]:hover{transform:translateY(-2px)}}
body>header .switch button[data-brand]:active,.renewal-switch a[href]:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){body>header .switch button[data-brand],.renewal-switch a[href]{transition:none;transform:none!important}}
/* A separate selection signal, independent of the equal-weight outlines. */
body>header .switch button[data-brand],.renewal-switch a[href]{position:relative}
body>header .switch button[data-brand]::after,.renewal-switch a[href]::after{content:"";position:absolute;bottom:6px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--button-accent,#ed7869);opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
body>header .switch button[data-brand="forum"].active,.renewal-switch a[href*="brand=forum"].active{--switch-active-face:#4a292b;color:#fff}
body>header .switch button[data-brand="colorum"].active,.renewal-switch a[href*="brand=colorum"].active{--switch-active-face:#493052;color:#fff}
body>header .switch button[data-brand].active::after,.renewal-switch a[href].active::after{opacity:1;transform:scale(1);box-shadow:0 0 9px currentColor}
body>header .switch button[data-brand].active b,.renewal-switch a[href].active b{font-weight:800}
@media(prefers-reduced-motion:reduce){body>header .switch button[data-brand]::after,.renewal-switch a[href]::after{transition:none}}
/* Selection uses only a darker button surface. */
body>header .switch button[data-brand]::after,.renewal-switch a[href]::after{display:none}
body>header .switch button[data-brand="forum"].active,.renewal-switch a[href*="brand=forum"].active{--switch-active-face:#130b0e}
body>header .switch button[data-brand="colorum"].active,.renewal-switch a[href*="brand=colorum"].active{--switch-active-face:#100c18}
body>header .switch button[data-brand].active b,.renewal-switch a[href].active b{font-weight:600}
/* Small external pointer marks the selected brand without changing its border. */
body>header .switch button[data-brand],.renewal-switch a[href]{overflow:visible}
body>header .switch button[data-brand]::after,.renewal-switch a[href]::after{content:"";display:block;position:absolute;top:calc(100% + 6px);bottom:auto;left:50%;width:9px;height:6px;margin-left:-4.5px;background:var(--button-accent,#ed7869);clip-path:polygon(50% 100%,0 0,100% 0);border-radius:0;opacity:0;transform:none;box-shadow:none;pointer-events:none}
body>header .switch button[data-brand].active::after,.renewal-switch a[href].active::after{opacity:1;transform:none;box-shadow:none}
body>header .switch button[data-brand]::after,.renewal-switch a[href]::after{width:15px;height:10px;margin-left:-7.5px;top:calc(100% + 5px)}
/* Keep introductory copy legible above the video and brand gradients. */
.hero #hero-description{color:#fff;text-shadow:0 1px 8px #0004}
/* Increase only the Forum header mark, keeping the brand slot unchanged. */
body>header #logo.forum{width:64px;height:80px;object-fit:contain}
@media(max-width:600px){body>header #logo.forum{width:54px;height:68px}}

/* Atmospheric video sits below the existing animated gradient and all content. */
.hero>.hero-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:0;pointer-events:none;opacity:0;filter:saturate(.65) brightness(.8);transition:opacity 1.2s ease}
.hero>.hero-video.is-playing{opacity:.42}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:inherit;animation:inherit;opacity:.5;pointer-events:none}
.hero>.eyebrow,.hero>h1,.hero>.hero-bottom,.hero>.hero-meta{position:relative;z-index:2}
.hero>.orbit{z-index:1;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hero>.hero-video{display:none}.hero::before{animation:none;opacity:1}}

.ui-arrow{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:0 0 14px;line-height:1;vertical-align:-2px;margin-left:3px;pointer-events:none;color:inherit}
.ui-arrow svg{display:block;width:100%;height:100%;overflow:visible}
.ui-arrow[data-direction="right"] svg{transform:rotate(45deg)}
.ui-arrow[data-direction="left"] svg{transform:rotate(225deg)}
.ui-arrow[data-direction="down"] svg{transform:rotate(135deg)}
.ui-arrow[data-direction="up"] svg{transform:rotate(-45deg)}
.ui-arrow[data-direction="down-diagonal"] svg{transform:rotate(90deg)}
.contact-short{gap:14px}
.contact-short>.arrow{display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:1;width:15px;height:15px}
.contact-short>.arrow .ui-arrow{margin:0;width:15px;height:15px;flex-basis:15px}
.services-contact{gap:16px}
.services-contact>i,.portfolio-feature b>i,.request-submit>i{font-size:0;line-height:1;display:inline-flex;align-items:center}
.services-contact>i .ui-arrow,.portfolio-feature b>i .ui-arrow,.request-submit>i .ui-arrow{margin:0}
.request-mark .ui-arrow{width:20px;height:20px;flex-basis:20px;margin:0}
.person a .ui-arrow{width:12px;height:12px;flex-basis:12px}

/* Keep the real mail link while adding clear pointer, keyboard and tap feedback. */
.big-mail{position:relative;isolation:isolate;max-width:100%;transition:color .25s ease,text-shadow .3s ease,transform .2s ease,border-color .25s ease;transform-origin:left center}
.big-mail::before{content:"";position:absolute;inset:-10px -12px -2px;z-index:-1;pointer-events:none;border-radius:10px;background:radial-gradient(ellipse at 40% 50%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 75%);opacity:0;transition:opacity .3s ease}
.big-mail::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;pointer-events:none}
.big-mail:is(:hover,:focus-visible,.is-pressed){color:var(--accent);text-shadow:0 0 24px color-mix(in srgb,var(--accent) 35%,transparent);border-color:transparent}
.big-mail:is(:hover,:focus-visible,.is-pressed)::before{opacity:1}
.big-mail:is(:hover,:focus-visible,.is-pressed)::after{transform:scaleX(1)}
.big-mail:active,.big-mail.is-pressed{transform:translateY(2px) scale(.985)}
@media(prefers-reduced-motion:reduce){.big-mail,.big-mail::before,.big-mail::after{transition:none}.big-mail:active,.big-mail.is-pressed{transform:none}}

.mobile-module>summary{display:block;list-style:none;cursor:default}
.mobile-module>summary::-webkit-details-marker{display:none}
.mobile-module .module-indicator{display:none}
.mobile-module>.module-body>.module-intro{font-size:13px;line-height:1.9;color:#aeb8a5;max-width:600px;margin:0 0 30px}
@media(max-width:767px),(max-width:1024px) and (max-height:500px) and (pointer:coarse){
 .section.has-mobile-module{padding:0;border-top:1px solid #ffffff16;border-bottom:0}
 .has-mobile-module .mobile-module>summary{position:relative;padding:23px 6vw;cursor:pointer;touch-action:manipulation}
 .has-mobile-module .mobile-module>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
 .has-mobile-module .mobile-module>summary .section-head,.has-mobile-module .mobile-module>summary .services-head,.has-mobile-module .mobile-module>summary .award-intro{display:block;padding:0 35px 0 0;margin:0}
 .has-mobile-module .mobile-module>summary h2{font-size:clamp(22px,5.4vw,29px);letter-spacing:-.8px;line-height:1.3;margin:0;padding-right:30px}
 .has-mobile-module .mobile-module>summary .services-kicker,.has-mobile-module .mobile-module>summary .awards-eyebrow{font-size:8px;margin:0 0 9px}
 .has-mobile-module .mobile-module>summary small{display:block;font-size:10px;line-height:1.7;max-width:none;margin:8px 0 0;color:#aeb5ab}
 .has-mobile-module.contact .mobile-module>summary>small{margin:0 0 10px;font-size:9px;letter-spacing:1.5px}
 .has-mobile-module .module-indicator{display:block;position:absolute;right:6vw;top:50%;width:27px;height:27px;margin-top:-13px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:50%;color:var(--accent)}
 .has-mobile-module .module-indicator::before,.has-mobile-module .module-indicator::after{content:"";position:absolute;left:8px;top:12px;width:9px;height:1px;background:currentColor}
 .has-mobile-module .module-indicator::after{transform:rotate(90deg);transition:transform .2s ease}
 .has-mobile-module .mobile-module[open]>summary .module-indicator::after{transform:rotate(0)}
 .has-mobile-module .mobile-module[open]>summary{color:var(--accent)}
 .has-mobile-module .module-body{padding:0 6vw 28px}
 .has-mobile-module.references .module-body{padding-inline:0}
 .has-mobile-module .module-intro{font-size:13px;margin:0 0 22px}
 .has-mobile-module .module-body .portfolio-feature{min-height:280px}
 .has-mobile-module.contact .contact-grid{gap:26px}
 .has-mobile-module .module-body .ref-controls{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){.module-indicator::after{transition:none!important}}
/* References remain visible without a tap, even while another module is open. */
.has-mobile-module.references .mobile-module>summary{cursor:default}
.has-mobile-module.references .module-indicator{display:none}

.work-title-mobile{display:none}
@media(max-width:767px),(max-width:1024px) and (max-height:500px) and (pointer:coarse){
 .work-title-desktop{display:none}
 .work-title-mobile{display:inline}
}

/* Two expressions of one geometric motion language. */
.hero>.brand-emblem{position:absolute;right:3vw;top:13%;width:clamp(200px,31vw,470px);aspect-ratio:1;z-index:1;pointer-events:none;opacity:.62}
.emblem-inner{width:100%;height:100%;transform:translate(var(--emblem-x,0px),var(--emblem-y,0px));transition:transform .7s ease-out}
.forum-emblem,.colorum-emblem{position:absolute;inset:0;width:100%;height:100%}
.colorum-emblem{display:none}
body[data-brand="colorum"] .forum-emblem{display:none}
body[data-brand="colorum"] .colorum-emblem{display:block}
.forum-emblem{overflow:visible;fill:none;stroke:#ff9c8e;stroke-width:.65;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px #ff66532b)}
.forum-emblem .stage-frame{stroke-dasharray:100;stroke-dashoffset:100;animation:stage-build 11s ease-in-out infinite}
.forum-emblem .stage-frame.inner{stroke:#ffceba;stroke-width:.35;animation-delay:.25s}
.forum-emblem .stage-floor{stroke:#ed7869;transform-origin:50% 76%;animation:stage-floor 11s ease-in-out infinite}
.forum-emblem .stage-beam{stroke-width:.3;stroke:#ffbea7;animation:stage-light 11s ease-in-out infinite;opacity:.25}
.forum-emblem .stage-beam.second{animation-delay:.4s}
.forum-emblem .stage-node{fill:#ffb5a1;stroke:none;animation:stage-light 11s ease-in-out infinite}
@keyframes stage-build{0%,8%{stroke-dashoffset:100;opacity:0;transform:translateY(3px)}30%,76%{stroke-dashoffset:0;opacity:1;transform:translateY(0)}94%,100%{stroke-dashoffset:-100;opacity:0;transform:translateY(-2px)}}
@keyframes stage-floor{0%,12%,100%{opacity:0;transform:scaleX(.3)}35%,76%{opacity:.8;transform:scaleX(1)}94%{opacity:0;transform:scaleX(.3)}}
@keyframes stage-light{0%,22%,94%,100%{opacity:0}38%,70%{opacity:.65}80%{opacity:.2}}
.colorum-sequence .colour-piece{position:absolute;width:31%;height:31%;border-radius:30%;box-shadow:inset 0 0 35px #ffffff16,0 0 25px #0001;animation:creative-form 10s cubic-bezier(.45,0,.25,1) infinite;animation-delay:var(--piece-delay,0s)}
.colour-piece:nth-child(1){left:18%;top:18%;--piece-turn:-30deg;--piece-x:-12%;--piece-y:-12%;background:linear-gradient(135deg,#d5b5ff,#9557df)}
.colour-piece:nth-child(2){right:18%;top:18%;--piece-turn:60deg;--piece-x:12%;--piece-y:-12%;--piece-delay:-.15s;background:linear-gradient(135deg,#ffb9d5,#eb659b)}
.colour-piece:nth-child(3){left:18%;bottom:18%;--piece-turn:-60deg;--piece-x:-12%;--piece-y:12%;--piece-delay:-.3s;background:linear-gradient(135deg,#ffc99c,#ef934e)}
.colour-piece:nth-child(4){right:18%;bottom:18%;--piece-turn:30deg;--piece-x:12%;--piece-y:12%;--piece-delay:-.45s;background:linear-gradient(135deg,#a8dcf9,#638cdd)}
@keyframes creative-form{0%,12%,100%{transform:translate(var(--piece-x),var(--piece-y)) rotate(0deg) scale(.8);border-radius:50%}35%{transform:translate(0,0) rotate(var(--piece-turn)) scale(.95);border-radius:16% 50% 16% 50%}58%{transform:translate(0,0) rotate(90deg) scale(.9);border-radius:8%}75%,85%{transform:translate(0,0) rotate(180deg) scale(.88);border-radius:50% 8% 50% 8%}}
@media(max-width:800px){.hero>.brand-emblem{width:260px;right:-70px;top:50px;opacity:.25}}
@media(prefers-reduced-motion:reduce){.emblem-inner{transform:none;transition:none}.forum-emblem .stage-frame{animation:none;stroke-dashoffset:0;opacity:1}.forum-emblem .stage-floor,.forum-emblem .stage-beam,.forum-emblem .stage-node{animation:none;opacity:.5}.colorum-sequence .colour-piece{animation:none}}
/* A sequence of clearer event and creative motifs. */
.hero>.brand-emblem{width:clamp(230px,34vw,510px);right:2vw;top:12%;opacity:.94}
body[data-brand="colorum"] .hero>.brand-emblem{opacity:.72}
.forum-sequence,.colorum-sequence,.motion-scene{position:absolute;inset:0}
.colorum-sequence{display:none}
body[data-brand="colorum"] .forum-sequence{display:none}
body[data-brand="colorum"] .colorum-sequence{display:block}
.motion-scene{opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);transition:opacity .65s ease,transform .65s ease,visibility 0s .65s}
.motion-scene.is-current{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.motion-scene:not(.is-current):not(.is-leaving):not(.is-preparing) *{animation:none!important}
.forum-emblem{stroke:#ffd2c3;stroke-width:1.05;filter:drop-shadow(0 0 8px #fa8c6b66)}
.forum-emblem .stage-frame.inner{stroke:#ffe3d5;stroke-width:.65}
.forum-emblem .stage-floor{stroke:#ffb59b}
.forum-emblem .stage-beam{stroke:#ffd8bf;stroke-width:.6}
.forum-emblem .draw-line{stroke-dasharray:280;animation:technical-draw 3s ease-out both}
.forum-emblem .screen-trace{stroke:#ff9e87;stroke-width:.8;stroke-dasharray:80;animation:trace-scan 4s ease-in-out infinite}
.forum-emblem .console-faders{stroke:#ffb6a0;stroke-width:.7}
.forum-emblem .fader{stroke:#ffe4ce;stroke-width:1.7;animation:console-mix 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.forum-emblem .fader.b,.forum-emblem .fader.d{animation-delay:-1.3s}
.forum-emblem .fader.c{animation-delay:-.7s}
.forum-emblem .fader.e{animation-delay:-1.8s}
.forum-emblem .meter-bars{stroke:#ffb7a0;animation:meter-level 1.6s ease-in-out infinite}
.forum-emblem .tally-light{fill:#ff9b87;stroke:none;animation:tally-breathe 2.4s ease-in-out infinite}
.forum-emblem .signal{stroke:#ffd0b2;stroke-width:1;stroke-dasharray:60;animation:broadcast-wave 3s ease-out infinite}
.forum-emblem .signal-two{animation-delay:.4s}
.forum-emblem .signal-three{animation-delay:.8s}
.forum-emblem .stream-route{stroke:#ff9f85;stroke-width:.6;stroke-dasharray:6 5;animation:stream-flow 3s linear infinite}
.forum-emblem .camera-lens{stroke:#ffe0c9;stroke-width:.8}
.forum-emblem .camera-lens.inner{stroke:#ff9a85;animation:tally-breathe 2.4s ease-in-out infinite}
.creative-lines{width:100%;height:100%;fill:none;stroke:url(#creative-spectrum);stroke-width:.85;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 0 10px #d09fff33)}
.creative-orbits{transform-origin:50% 50%;animation:creative-turn 12s linear infinite}
.creative-orbits ellipse{stroke-dasharray:190;animation:trace-scan 5s ease-in-out infinite}
.creative-core{fill:#d7adff;stroke:none;transform-origin:50% 50%;animation:core-breathe 3s ease-in-out infinite}
.orbit-dot{fill:#ffc69a;stroke:none;animation:orbit-travel 6s linear infinite;transform-origin:50% 50%}
.creative-dash{stroke:#ffa6c9;stroke-width:1;animation:tally-breathe 3s ease-in-out infinite}
.geometry-scene{stroke:#cfaaff}
.geometry-forms{transform-origin:50% 50%;animation:creative-turn 18s linear infinite}
.geometry-square{stroke:#9cdbff;stroke-dasharray:210;animation:trace-scan 6s ease-in-out infinite}
.geometry-circle{stroke:#ffa4cf;stroke-dasharray:190;animation:trace-scan 6s ease-in-out infinite;animation-delay:-2s}
.geometry-triangle{stroke:#ffd49a;stroke-dasharray:220;animation:trace-scan 6s ease-in-out infinite;animation-delay:-4s}
.creative-wave{stroke:#d9b7ff;stroke-width:1.2;stroke-dasharray:100;animation:trace-scan 5s ease-in-out infinite}
.geometry-dot{fill:#ffb7d4;stroke:none;animation:core-breathe 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.geometry-dot.second{fill:#a7dbff;animation-delay:-1.5s}
@keyframes technical-draw{from{stroke-dashoffset:280;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes trace-scan{0%,100%{stroke-dashoffset:80;opacity:.4}35%,75%{stroke-dashoffset:0;opacity:1}}
@keyframes console-mix{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes meter-level{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes tally-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes broadcast-wave{0%{stroke-dashoffset:60;opacity:0}35%,60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes stream-flow{to{stroke-dashoffset:-33}}
@keyframes creative-turn{to{transform:rotate(360deg)}}
@keyframes core-breathe{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.15);opacity:1}}
@keyframes orbit-travel{from{transform:rotate(0deg) translateX(37px)}to{transform:rotate(360deg) translateX(37px)}}
@media(max-width:800px){.hero>.brand-emblem{width:245px;right:-32px;top:38px;opacity:.56}body[data-brand="colorum"] .hero>.brand-emblem{opacity:.38}}
@media(prefers-reduced-motion:reduce){.motion-scene{transition:none;transform:none}.motion-scene *{animation:none!important;stroke-dashoffset:0}.forum-emblem{opacity:1}}
/* The opening Colorum scene is now a fine pen drawing, with no solid blobs. */
.pencil-scene{stroke:url(#pencil-spectrum);stroke-width:.85;fill:none}
.pencil-outline{stroke-dasharray:100;animation:pencil-outline-draw 7.5s ease-in-out infinite}
.pencil-detail{stroke-width:.6;animation:pencil-outline-draw 7.5s ease-in-out infinite}
.pencil-trail{stroke-width:1.1;stroke-dasharray:100;animation:pencil-trail-draw 7.5s ease-in-out infinite}
.sketch-guide{stroke:#a9dfff;stroke-width:.5;stroke-dasharray:100;animation:sketch-guide-draw 7.5s ease-in-out infinite}
.sketch-cross{stroke:#ffc69b;stroke-width:.7;animation:tally-breathe 4s ease-in-out infinite}
.colorum-sequence .creative-core{fill:none;stroke:#d7adff;stroke-width:.8}
@keyframes pencil-outline-draw{0%,5%{stroke-dashoffset:100;opacity:0}34%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.65}}
@keyframes pencil-trail-draw{0%,25%{stroke-dashoffset:100;opacity:0}68%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.65}}
@keyframes sketch-guide-draw{0%,30%{stroke-dashoffset:100;opacity:0}72%,100%{stroke-dashoffset:0;opacity:.65}}
@media(prefers-reduced-motion:reduce){.pencil-scene *{animation:none!important;stroke-dashoffset:0;opacity:1}}
/* Travel, ticketing and live presentations expand the Forum sequence. */
.flight-route{stroke:#ffb69b;stroke-width:.65;stroke-dasharray:3 3;animation:flight-route-flow 8s linear infinite}
.aircraft{transform-box:fill-box;transform-origin:center;animation:aircraft-float 6s ease-in-out infinite}
.aircraft-detail,.ticket-copy{stroke:#ffb69b;stroke-width:.6}
.travel-node{fill:none;stroke:#ffcfb5;stroke-width:.8}
.ticket-bars{stroke:#ffccad;stroke-width:1.2;animation:tally-breathe 3s ease-in-out infinite}
.ticket-scan{stroke:#ff9d87;stroke-width:.6;animation:ticket-scan 4s ease-in-out infinite}
.speaker-arm{stroke:#ffbea3;transform-origin:23px 44px;animation:speaker-gesture 4s ease-in-out infinite}
.presentation-chart{stroke:#ffb096;stroke-width:.7}
.presentation-chart .chart-bar{transform-origin:50% 43px;animation:presentation-chart 5s ease-in-out infinite}
.presentation-chart .second{animation-delay:-.4s}
.presentation-chart .third{animation-delay:-.8s}
.audience{stroke:#ffd7bf;stroke-width:.8;stroke-dasharray:60;animation:audience-draw 3.5s ease-out both}
@keyframes flight-route-flow{to{stroke-dashoffset:-36}}
@keyframes aircraft-float{0%,100%{transform:translate(-2px,2px) rotate(-3deg)}50%{transform:translate(2px,-2px) rotate(3deg)}}
@keyframes ticket-scan{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(18px);opacity:1}}
@keyframes speaker-gesture{0%,100%{transform:rotate(0)}40%,65%{transform:rotate(-10deg)}}
@keyframes presentation-chart{0%,100%{transform:scaleY(.65)}45%,75%{transform:scaleY(1)}}
@keyframes audience-draw{from{stroke-dashoffset:60;opacity:0}to{stroke-dashoffset:0;opacity:1}}

/* Draw the stage first; reveal open light rays only after its frame exists. */
.forum-emblem .stage-frame{animation-name:stage-frame-reveal;animation-fill-mode:both}
.forum-emblem .stage-floor{animation-fill-mode:both}
.forum-emblem .stage-beam,.forum-emblem .stage-node{animation-name:stage-rays-reveal;animation-fill-mode:both;fill:none}
.forum-emblem .stage-node{fill:#ffb5a1}
@keyframes stage-frame-reveal{0%{stroke-dashoffset:100;opacity:.2;transform:none}23%,100%{stroke-dashoffset:0;opacity:1;transform:none}}
@keyframes stage-rays-reveal{0%,30%{opacity:0}44%,76%{opacity:.6}90%,100%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.forum-emblem .stage-frame,.forum-emblem .stage-floor,.forum-emblem .stage-beam,.forum-emblem .stage-node{animation:none!important;stroke-dashoffset:0;opacity:1}}
/* A symmetric airliner with rounded nose, swept wings and restrained engine detail. */
.airliner-outline{fill:#ffc8ab06;stroke:#ffe0c6;stroke-width:.95;stroke-dasharray:100;animation:airliner-reveal 2.8s ease-out both}
.airliner-engines{stroke:#ffc1a0;stroke-width:.6}
.ticket-airliner{stroke-width:1.8}
@keyframes airliner-reveal{from{stroke-dashoffset:100;opacity:0}to{stroke-dashoffset:0;opacity:1}}
/* A slim fountain pen and continuous ink line, using the same light stroke weight. */
.pencil-scene .pen-nib{stroke:#ffd1ad;stroke-width:.8}
.pen-breather{fill:none;stroke:#ffd1ad;stroke-width:.6}
.pencil-scene .pencil-detail{stroke:#b7dfff;stroke-width:.55;animation:tally-breathe 4s ease-in-out infinite}
.sketch-pencil{transform-origin:33px 72px;animation:pen-gesture 7.5s ease-in-out infinite}
@keyframes pen-gesture{0%,30%,100%{transform:rotate(0)}52%{transform:rotate(-2deg)}75%{transform:rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.airliner-outline{animation:none;stroke-dashoffset:0}.sketch-pencil{animation:none;transform:none}}
/* Bring in the complete pen before any ink or guide detail: no detached fragments. */
.pencil-scene .sketch-pencil{opacity:0;animation:pen-tool-enter 7.5s ease-in-out both}
.pencil-scene .sketch-pencil .pencil-outline,.pencil-scene .sketch-pencil .pencil-detail,.pencil-scene .sketch-pencil .pen-breather{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:1}
.pencil-scene .pencil-trail{animation:pencil-trail-draw 7.5s ease-in-out both}
.pencil-scene .sketch-guide{animation:sketch-guide-draw 7.5s ease-in-out both}
.pencil-scene .sketch-cross{animation:pen-detail-enter 3s ease 2.2s both}
@keyframes pen-tool-enter{0%,5%{opacity:0;transform:translate(2px,-2px) rotate(-3deg)}16%,35%{opacity:1;transform:none}55%{opacity:1;transform:rotate(-2deg)}78%,100%{opacity:1;transform:none}}
@keyframes pen-detail-enter{from{opacity:0}to{opacity:.7}}
/* CMYK and RGB stay in the same fine-line style as the other Colorum scenes. */
.process-channel{stroke:var(--channel);stroke-width:.85;fill:none}
.process-channel circle{stroke-dasharray:100;stroke-dashoffset:100;animation:channel-draw 6.5s ease-in-out var(--channel-delay,0s) both}
.process-channel text{font-family:Manrope,Arial,sans-serif;font-size:5px;font-weight:500;letter-spacing:.04em;stroke:none;fill:var(--channel);animation:channel-label 6.5s ease-in-out var(--channel-delay,0s) both}
.process-registration{stroke:#dfc9ef;stroke-width:.5;animation:pen-detail-enter 2s ease 2s both}
.rgb-spectrum-line{stroke:#d9c4ed;stroke-width:.75;stroke-dasharray:100;animation:pencil-trail-draw 6.5s ease both}
@keyframes channel-draw{0%{stroke-dashoffset:100;opacity:0}18%{opacity:1}48%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes channel-label{0%,35%{opacity:0}55%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.pencil-scene .sketch-pencil,.pencil-scene .sketch-cross,.process-scene *{animation:none!important;opacity:1;stroke-dashoffset:0;transform:none}}
/* A carefully timed drawing study: board, continuous ink and a fine-line pen. */
.drafting-scene{stroke:url(#draft-spectrum);stroke-width:.75;fill:none}
.draft-board{stroke:#cbbbe3;stroke-width:.6;animation:draft-board-enter 1s ease both}
.draft-border{opacity:.35;stroke-dasharray:1 2}
.draft-construction{stroke:#aed9ee;stroke-width:.35;stroke-dasharray:1.2 2;animation:draft-guides-enter 7.2s ease both}
.draft-ink{stroke-width:1.05;stroke-dasharray:100;stroke-dashoffset:100;animation:draft-ink-draw 7.2s linear both}
.draft-pen{stroke:#ffe0ce;stroke-width:.75;stroke-linejoin:round;animation:draft-tool-enter .9s ease both}
.draft-pen-body{fill:#30233b40}
.draft-pen-tip{stroke:#ffd0b6;stroke-width:.65}
.draft-pen-highlight{stroke:#b9e5fa;stroke-width:.4}
.draft-finish{stroke:#cbb3ed;stroke-width:.6;stroke-dasharray:100;animation:draft-finish 7.2s ease both}
@keyframes draft-board-enter{from{opacity:0}to{opacity:.75}}
@keyframes draft-guides-enter{0%,12%{opacity:0}25%,70%{opacity:.4}100%{opacity:.2}}
@keyframes draft-ink-draw{0%,15%{stroke-dashoffset:100}80%,100%{stroke-dashoffset:0}}
@keyframes draft-tool-enter{from{opacity:0}to{opacity:1}}
@keyframes draft-finish{0%,82%{stroke-dashoffset:100;opacity:0}100%{stroke-dashoffset:0;opacity:.6}}
@media(prefers-reduced-motion:reduce){.drafting-scene *{animation:none!important;stroke-dashoffset:0;opacity:1}}
/* Exhibition stand builds from an architectural floor plan into a finished booth. */
.booth-floor{stroke:#ffc8aa;stroke-width:.7;stroke-dasharray:100;animation:booth-floor-draw 7s ease both}
.booth-architecture{stroke:#ffe1c7;stroke-width:.9}
.booth-architecture path{stroke-dasharray:100;animation:booth-wall-draw 7s ease both}
.booth-screen{stroke:#ffb39c;stroke-width:.65;stroke-dasharray:100;animation:booth-detail-draw 7s ease both}
.booth-counter{stroke:#ffdbc1;stroke-width:.8;animation:booth-counter-enter 7s ease both}
.booth-counter path[pathLength]{stroke-dasharray:100;animation:booth-detail-draw 7s ease both}
.booth-counter-mark{stroke:#ffac96;stroke-width:.55}
.booth-lighting{stroke:#ffc7a6;stroke-width:1;animation:booth-light-enter 7s ease both}
.booth-light-wash{stroke-width:.4}
@keyframes booth-floor-draw{0%{stroke-dashoffset:100;opacity:0}18%,100%{stroke-dashoffset:0;opacity:.85}}
@keyframes booth-wall-draw{0%,10%{stroke-dashoffset:100;opacity:0}38%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes booth-detail-draw{0%,32%{stroke-dashoffset:100;opacity:0}64%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes booth-counter-enter{0%,32%{opacity:0;transform:translateY(2px)}54%,100%{opacity:1;transform:none}}
@keyframes booth-light-enter{0%,60%{opacity:0}82%,100%{opacity:.8}}

/* Outgoing objects keep their final shape until fully transparent. */
.motion-scene.is-leaving{visibility:visible;opacity:0;transform:translateY(-4px) scale(.985);transition:opacity .6s ease,transform .6s ease}
.motion-scene.is-leaving *,.motion-scene.is-preparing *,.brand-emblem.is-paused .motion-scene *{animation-play-state:paused!important}
.motion-scene.is-preparing{visibility:hidden;opacity:0;transition:none;transform:translateY(8px) scale(.96)}
.motion-scene *{animation-fill-mode:both}
@media(prefers-reduced-motion:reduce){.motion-scene,.motion-scene.is-leaving{transition:none;transform:none}}
/* Stage construction: lattice truss, LED wall, line arrays, fixtures and stepped deck. */
.stage-structure{stroke:#ffe1c7;stroke-width:.85}
.stage-structure>path{stroke-dasharray:100;animation:stage-structure-draw 7.4s ease both}
.stage-structure .truss-bracing{stroke-width:.42;stroke:#ffc0a1}
.stage-led{stroke:#ffe0c7;stroke-width:.8;animation:stage-led-enter 7.4s ease both}
.stage-led rect{stroke-dasharray:100;animation:stage-led-draw 7.4s ease both}
.led-inner-frame{stroke-width:.35;stroke:#ffbda0}
.led-graphic{stroke:#ffab98;stroke-width:.65}
.stage-platform{stroke:#ffd5b8;stroke-width:.75;animation:stage-platform-enter 7.4s ease both}
.stage-platform>path[pathLength]{stroke-dasharray:100;animation:stage-structure-draw 7.4s ease both}
.platform-seams{stroke-width:.35;opacity:.55}
.stage-speakers{stroke:#ffbea2;stroke-width:.65;animation:stage-equipment-enter 7.4s ease both}
.stage-fixtures{stroke:#ffdfc1;stroke-width:.65;animation:stage-equipment-enter 7.4s ease both}
.stage-light-rays{stroke:#ffcaa5;stroke-width:.35;animation:stage-lighting-enter 7.4s ease both}
.stage-lectern{stroke:#ffe0c7;stroke-width:.55;animation:stage-equipment-enter 7.4s ease both}
@keyframes stage-structure-draw{0%{stroke-dashoffset:100;opacity:0}28%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes stage-led-enter{0%,18%{opacity:0}40%,100%{opacity:1}}
@keyframes stage-led-draw{0%,18%{stroke-dashoffset:100}45%,100%{stroke-dashoffset:0}}
@keyframes stage-platform-enter{0%,10%{opacity:0}30%,100%{opacity:1}}
@keyframes stage-equipment-enter{0%,32%{opacity:0}56%,100%{opacity:1}}
@keyframes stage-lighting-enter{0%,60%{opacity:0}82%,100%{opacity:.65}}
/* Stand columns, connections, panel seams and fascia remain visually distinct. */
.booth-construction-joints{stroke:#ffd2ad;stroke-width:.5;animation:booth-joints-enter 7s ease both}
.booth-wall-panels{stroke:#ffbd9f;stroke-width:.55;animation:booth-panel-enter 7s ease both}
.booth-wall-panels>path[pathLength]{stroke-dasharray:100;animation:booth-detail-draw 7s ease both}
.booth-panel-seams{stroke-width:.3;opacity:.5}
.detailed-booth .booth-architecture path{stroke-width:.75}
@keyframes booth-joints-enter{0%,28%{opacity:0}47%,100%{opacity:1}}
@keyframes booth-panel-enter{0%,25%{opacity:0}50%,100%{opacity:1}}
/* The pen must appear before guides, not after scattered board details. */
.drafting-scene .draft-pen{animation:draft-tool-enter .75s ease both}
.drafting-scene .draft-board{animation:draft-board-enter .7s ease .85s both}
.drafting-scene .draft-construction{animation:draft-guides-after-pen 7.2s ease both}
@keyframes draft-guides-after-pen{0%,30%{opacity:0}48%,75%{opacity:.35}100%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.detailed-stage *,.detailed-booth *,.drafting-scene *{animation:none!important;opacity:1;stroke-dashoffset:0}}
/* Lighter stage hierarchy: clear structure, restrained secondary detail. */
.detailed-stage{filter:drop-shadow(0 0 4px #fa8c6b33)}
.detailed-stage .stage-structure{stroke-width:.6}
.detailed-stage .stage-structure .truss-bracing{stroke-width:.3}
.detailed-stage .stage-led{stroke-width:.55}
.detailed-stage .led-graphic{stroke-width:.4}
.detailed-stage .stage-platform{stroke-width:.5}
.detailed-stage .stage-speakers,.detailed-stage .stage-fixtures{stroke-width:.45}
.detailed-stage .stage-lectern{stroke-width:.4}
.detailed-stage .stage-light-rays{stroke-width:.23}
/* Only pen and ink remain; suppress even the first rounded dash endpoint. */
.drafting-scene .draft-ink{animation:clean-ink-entry 7.2s linear both}
@keyframes clean-ink-entry{0%,15%{stroke-dashoffset:100;opacity:0}16%{opacity:1}80%,100%{stroke-dashoffset:0;opacity:1}}
@media(prefers-reduced-motion:reduce){.drafting-scene .draft-ink{animation:none;stroke-dashoffset:0;opacity:1}}
/* Richer design study, with every supporting mark appearing after the pen. */
.draft-layout-frame{stroke:#c4b7e6;stroke-width:.5;opacity:0;animation:draft-layout-reveal 7.2s ease both}
.draft-layout-frame>path{stroke-dasharray:100;animation:draft-layout-stroke 7.2s ease both}
.draft-margin-guides{stroke-width:.3;stroke:#b4d4ea}
.draft-pen-grip{stroke:#f4d5cb;stroke-width:.35}
.draft-layout-details{stroke:#cfbce7;stroke-width:.55;opacity:0;animation:draft-detail-reveal 7.2s ease both}
.draft-layout-details>path{stroke-dasharray:100;animation:draft-detail-stroke 7.2s ease both}
.draft-copy-heading{stroke-width:1}
.draft-copy-lines{stroke-width:.4;opacity:.7}
.draft-dimension{stroke:#b6ddeb;stroke-width:.3}
.draft-colour-studies{fill:none;stroke-width:.6;opacity:0;animation:draft-palette-reveal 7.2s ease both}
.draft-swatch.purple{stroke:#d5b5ff}
.draft-swatch.pink{stroke:#ffb1cf}
.draft-swatch.blue{stroke:#afe3ff}
@keyframes draft-layout-reveal{0%,20%{opacity:0}48%,100%{opacity:.65}}
@keyframes draft-layout-stroke{0%,20%{stroke-dashoffset:100}58%,100%{stroke-dashoffset:0}}
@keyframes draft-detail-reveal{0%,45%{opacity:0}72%,100%{opacity:.85}}
@keyframes draft-detail-stroke{0%,45%{stroke-dashoffset:100}80%,100%{stroke-dashoffset:0}}
@keyframes draft-palette-reveal{0%,62%{opacity:0}88%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.draft-layout-frame,.draft-layout-details,.draft-colour-studies{animation:none!important;opacity:1}.draft-layout-frame>path,.draft-layout-details>path{animation:none!important;stroke-dashoffset:0}}

/* Comfortable reading sizes across desktop and tablet viewports. */
@media(min-width:768px){
 .service-item p{font-size:14px;line-height:1.85}
 .services-head>p,.module-body>.module-intro{font-size:14px;line-height:1.85}
 .person p,.person a{font-size:13px;line-height:1.65}
 .award-intro>p{font-size:14px;line-height:1.85}
 .award-category,.award-copy dd{font-size:13px;line-height:1.8}
 .award-copy dt,.award-copy a{font-size:11px;line-height:1.8}
 .section-head small{font-size:12px;line-height:1.7}
 .portfolio-feature p{font-size:14px;line-height:1.85}
 .contact-short,.services-contact{font-size:14px}
 footer .legal-links{font-size:12px;line-height:1.7}
}
/* Two deliberate header rows prevent laptop menus from wrapping unpredictably. */
@media(min-width:1025px) and (max-width:1599px){
 body>header,.renewal-header{display:grid;grid-template-columns:174px minmax(0,1fr);align-items:center;height:auto;min-height:0;padding:14px 0 12px;gap:12px 24px;margin-inline:5vw}
 body>header>a:first-child,.renewal-header>a:first-child{grid-column:1;grid-row:1;width:174px;min-height:64px}
 body>header .tools{grid-column:2;grid-row:1;display:flex;align-items:center;justify-self:end;gap:16px;min-width:0}
 body>header .brand-picker{width:auto;order:initial;grid-column:auto;grid-row:auto}
 body>header .switch{width:auto;gap:10px}
 body>header .switch button{min-width:180px;min-height:54px;padding:12px 17px}
 body>header .switch button b{font-size:20px}
 body>header .lang{margin:0;min-width:44px}
 body>header nav,.renewal-header nav{grid-column:1 / -1;grid-row:2;order:initial;display:flex;width:100%;justify-content:center;flex-wrap:wrap;padding:4px 0;gap:4px 16px;border:0}
 body>header nav a,.renewal-header nav a{font-size:14px;min-height:44px;padding:10px 14px;letter-spacing:.025em}
 .renewal-header{margin-inline:0}
 .renewal-header .renewal-switch{grid-column:2;grid-row:1;justify-self:end;width:auto;max-width:none;order:initial}
 .renewal-header .renewal-switch a{min-width:180px;min-height:54px;padding:12px 17px}
 .renewal-header .renewal-switch b{font-size:20px}
 .hero{min-height:calc(100svh - 160px);max-height:none;padding:30px 6vw 24px;justify-content:flex-start}
 .hero h1{font-size:clamp(76px,7.6vw,112px);line-height:1.04;margin:26px 0 22px;letter-spacing:-.065em}
 .hero h1 em{font-size:clamp(34px,3.6vw,54px);line-height:1.16;letter-spacing:-.035em;margin-top:.16em}
 .hero #hero-description{font-size:16px;line-height:1.75;max-width:570px;margin:0 0 8px}
 .hero .hero-meta{font-size:11px;line-height:1.7;gap:24px;margin-top:auto;padding-top:22px}
 .hero .eyebrow{font-size:11px;letter-spacing:1.5px}
 .hero>.brand-emblem{width:clamp(290px,29vw,415px);right:4vw;top:11%}
 .section{padding-block:64px}
 .section-head h2,.services h2,.award-intro h2{font-size:clamp(36px,3.5vw,49px);letter-spacing:-1.5px;line-height:1.2}
 .services-head,.award-intro{gap:36px;margin-bottom:36px}
 .service-item h3{font-size:21px;line-height:1.45}
 .services-grid{gap:0 34px}
 .services .service-item{padding-block:25px}
 .award-cards{gap:20px}
 .award-copy{padding:28px 20px 26px 4px}
 .award-copy h3{font-size:23px}
 .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
 .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px}
 .contact h2{font-size:clamp(48px,5.7vw,78px);margin-bottom:35px}
 .big-mail{font-size:clamp(24px,2.5vw,34px)}
 .portfolio-title{padding-block:36px}
 .portfolio-title h1{font-size:clamp(44px,4.8vw,66px)}
 .portfolio-title p:last-child{font-size:14px}
 .video-meta h2{font-size:22px;line-height:1.4}
}
/* Browser chrome reduces vertical room on 13-inch laptops. */
@media(min-width:1025px) and (max-width:1599px) and (max-height:800px){
 body>header,.renewal-header{padding-top:10px;padding-bottom:8px;row-gap:8px}
 .hero{padding-top:24px;padding-bottom:22px;min-height:calc(100svh - 150px)}
 .hero h1{font-size:clamp(72px,7vw,102px);margin-top:20px;margin-bottom:18px}
 .hero h1 em{font-size:clamp(32px,3.35vw,49px)}
 .hero .hero-meta{padding-top:18px}
 .hero>.brand-emblem{width:clamp(270px,27vw,380px);top:9%}
}

/* One layout governs the hero at every scale; no distributed flex gaps. */
.hero{
 display:grid;
 grid-template-columns:minmax(0,1.55fr) minmax(230px,.85fr);
 grid-template-areas:"eyebrow art" "heading art" "description art" "meta meta";
 grid-template-rows:auto auto auto auto;
 align-items:start;align-content:center;
 gap:22px 36px;
 min-height:clamp(480px,calc(100svh - var(--site-header-height,160px)),740px);
 height:auto;max-height:none;
 padding:36px 6vw 30px;
}
.hero>.eyebrow{grid-area:eyebrow;order:initial;margin:0}
.hero>h1{grid-area:heading;order:initial;width:100%;min-width:0;max-width:none;margin:0;line-height:1.04;font-size:clamp(52px,6.7vw,104px);letter-spacing:-.06em}
.hero>h1>span{font-size:inherit}
.hero>h1 em{font-size:clamp(30px,3.15vw,49px);line-height:1.2;letter-spacing:-.035em;margin-top:12px;white-space:normal;word-break:normal;overflow-wrap:normal;text-wrap:pretty}
.hero>.hero-bottom{grid-area:description;order:initial;display:block;margin:0;padding:0;min-width:0}
.hero #hero-description{font-size:16px;line-height:1.8;max-width:570px;margin:0 0 10px;color:#fff}
.hero .contact-short{font-size:14px;min-height:44px;margin:0;padding:8px 0}
.hero>.hero-meta{grid-area:meta;order:initial;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0;padding:0;font-size:10px;line-height:1.8}
.hero>.brand-emblem{grid-area:art;order:initial;position:relative;inset:auto;align-self:center;justify-self:center;width:100%;max-width:390px;min-width:0;aspect-ratio:1;margin:0}
.hero>.hero-video{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover}
.hero>.hero-video.is-playing{opacity:.28}
.hero::before{opacity:.64}
@media(min-width:1600px){.hero{column-gap:56px;padding-block:44px;min-height:min(740px,calc(100svh - var(--site-header-height,115px)))}}
@media(min-width:801px) and (max-width:1100px){.hero{grid-template-columns:minmax(0,1.45fr) minmax(200px,.8fr);gap:20px 24px;padding-block:30px}.hero>h1{font-size:clamp(50px,6.4vw,70px)}.hero>h1 em{font-size:clamp(28px,3.1vw,36px)}.hero>.brand-emblem{max-width:300px}}
@media(min-width:801px) and (max-height:750px){.hero{min-height:0;gap:18px 30px;padding-block:28px}.hero>h1{font-size:clamp(50px,6.1vw,88px)}.hero>h1 em{font-size:clamp(28px,2.9vw,42px)}.hero>.brand-emblem{max-width:330px}}
@media(max-width:800px){
 .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "heading" "art" "description" "meta";grid-template-rows:repeat(5,auto);gap:20px;min-height:0;height:auto;align-content:start;padding:28px 6vw}
 .hero>h1{font-size:clamp(38px,10.5vw,72px);line-height:1.08}
 .hero>h1 em{font-size:clamp(26px,6vw,38px);line-height:1.2;margin-top:10px}
 .hero>.brand-emblem{width:clamp(180px,48vw,230px);max-width:230px;opacity:.9}
 body[data-brand="colorum"] .hero>.brand-emblem{opacity:.8}
 .hero #hero-description{font-size:14px;line-height:1.8}
 .hero>.hero-meta{font-size:9px;gap:10px 18px}
}
/* Crop letterbox bars embedded in the background footage. */
.hero>.hero-video{transform:scale(1.2);transform-origin:center;pointer-events:none}
/* Equal typography for the two opening-section labels. */
.hero>.hero-meta #category,.hero>.hero-meta>a{font:inherit;font-weight:500;letter-spacing:inherit;text-transform:inherit;line-height:inherit}
/* The contact invitation is the last row of the opening section. */
.hero{grid-template-areas:"eyebrow art" "heading art" "description art" "meta meta" "action action";grid-template-rows:auto auto auto auto minmax(44px,1fr);align-content:stretch}
.hero>.hero-action{grid-area:action;position:relative;z-index:2;align-self:end;min-width:0}
@media(max-width:800px){.hero{grid-template-areas:"eyebrow" "heading" "art" "description" "meta" "action";grid-template-rows:repeat(6,auto)}.hero>.hero-action{order:5}}
/* Both opening invitations share the same final row and visual treatment. */
.hero>.hero-action{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 28px}
.hero>.hero-action .contact-short{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.7;padding:8px 0;border-bottom:1px solid #ffffff60}
@media(max-width:600px){.hero>.hero-action{align-items:flex-start;gap:14px 22px}.hero>.hero-action .contact-short{font-size:13px}}
/* Opening invitations share clear brand-colour hover and keyboard feedback. */
.hero>.hero-action .contact-short{transition:color .25s ease,border-color .25s ease,text-shadow .25s ease}
.hero>.hero-action .contact-short:is(:hover,:focus-visible){color:#ffb09b;border-bottom-color:#ffb09b;text-shadow:0 0 18px #ff9c8730}
body[data-brand="colorum"] .hero>.hero-action .contact-short:first-child:is(:hover,:focus-visible){color:#ffb4d8;border-bottom-color:#ffb4d8;text-shadow:0 0 18px #ff9ccb30}
body[data-brand="colorum"] .hero>.hero-action .brands-short:is(:hover,:focus-visible){color:#a9ddff;border-bottom-color:#a9ddff;text-shadow:0 0 18px #8bcfff30}
@media(prefers-reduced-motion:reduce){.hero>.hero-action .contact-short{transition:none}}
/* Centre the artwork against the entire left copy block, including its category. */
@media(min-width:801px){
 .hero{grid-template-areas:"eyebrow art" "heading art" "description art" "meta art" "action action"}
 .hero>.brand-emblem{align-self:center;justify-self:center}
}

.hero #hero-description{white-space:pre-line}

/* Independent colour washes keep both award cards readable and responsive. */
body[data-brand="colorum"] .award-card{--award-rgb:247,167,151;position:relative;isolation:isolate;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
body[data-brand="colorum"] .award-card:nth-child(2){--award-rgb:207,174,255}
body[data-brand="colorum"] .award-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(var(--award-rgb),.21),rgba(var(--award-rgb),.035));opacity:0;transition:opacity .35s ease;pointer-events:none}
body[data-brand="colorum"] .award-card:focus-within{border-color:rgba(var(--award-rgb),.65);box-shadow:0 10px 32px #0002}
body[data-brand="colorum"] .award-card:focus-within::before{opacity:1}
body[data-brand="colorum"] .award-card .award-rank{transition:color .3s ease}
body[data-brand="colorum"] .award-card:focus-within .award-rank{color:rgb(var(--award-rgb))}
@media(hover:hover){body[data-brand="colorum"] .award-card:hover{transform:translateY(-4px);border-color:rgba(var(--award-rgb),.65);box-shadow:0 10px 32px #0003}body[data-brand="colorum"] .award-card:hover::before{opacity:1}body[data-brand="colorum"] .award-card:hover .award-rank{color:rgb(var(--award-rgb))}}
@media(prefers-reduced-motion:reduce){body[data-brand="colorum"] .award-card,body[data-brand="colorum"] .award-card::before,body[data-brand="colorum"] .award-card .award-rank{transition:none;transform:none!important}}

/* Contact spans the same full text width as the team and other sections. */
.contact h2{font-size:clamp(32px,3.5vw,49px);font-weight:400;letter-spacing:-1.5px;line-height:1.2;margin:0 0 38px}
.contact .contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr) minmax(280px,.9fr);gap:clamp(28px,3.5vw,64px);align-items:start;width:100%;max-width:none}
.contact-details{display:contents}
.contact-details>div{min-width:0}
.contact-details>div:first-child{grid-column:1;grid-row:1}
.contact-details>div:last-child{grid-column:2;grid-row:1}
.contact-details small{display:block;margin:0 0 14px;line-height:1.5;font-size:10px;letter-spacing:1.5px}
.contact .big-mail{font-size:clamp(22px,2vw,32px);max-width:100%;overflow-wrap:anywhere;line-height:1.4;padding-bottom:10px}
.contact .address{display:inline-block;font-size:14px;line-height:1.9;overflow-wrap:normal}
.contact-map{grid-column:3;grid-row:1;width:100%;max-width:420px;justify-self:end;min-width:0;margin:0}
.map-preview{display:block;overflow:hidden;border:1px solid #ffffff20;border-radius:7px;background:#e9e6df;transition:border-color .25s ease,box-shadow .25s ease}
.map-preview img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1);transition:filter .45s ease}
.contact-map:is(:hover,:focus-within) .map-preview img{filter:grayscale(0)}
.map-preview:is(:hover,:focus-visible){border-color:var(--accent);box-shadow:0 5px 24px #0003}
.map-caption{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:10px;line-height:1.7;color:#b6bbb2}
.map-caption>a:first-child{font-size:11px;color:var(--accent)}
@media(min-width:901px) and (max-width:1250px){
 .contact .contact-grid{grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:26px 40px}
 .contact-details{display:grid;grid-column:1;grid-row:1;gap:24px}
 .contact-details>div:first-child,.contact-details>div:last-child{grid-column:auto;grid-row:auto}
 .contact-map{grid-column:2;grid-row:1;max-width:340px}
 .contact .big-mail{font-size:27px}
}
@media(max-width:900px){
 .contact .contact-grid{grid-template-columns:minmax(0,1fr);gap:26px}
 .contact-details{display:grid;grid-column:1;grid-row:1;gap:24px}
 .contact-details>div:first-child,.contact-details>div:last-child{grid-column:auto;grid-row:auto}
 .contact-map{grid-column:1;grid-row:2;width:min(100%,360px);max-width:360px;justify-self:center}
 .contact h2{font-size:clamp(30px,6.4vw,46px);margin-bottom:28px}
 .contact .big-mail{font-size:clamp(21px,4.8vw,30px)}
}
@media(prefers-reduced-motion:reduce){.map-preview,.map-preview img{transition:none}}

/* Center the map against the complete contact content, including its heading. */
.contact-title-mobile{display:none}
@media(min-width:901px){
 .section.contact{position:relative;--map-width:clamp(300px,28vw,420px);padding-block:52px;min-height:calc(var(--map-width)*.625 + 140px)}
 .contact .mobile-module>summary,.contact .contact-grid{width:calc(100% - var(--map-width) - clamp(32px,4vw,64px))}
 .contact .contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,3vw,48px)}
 .contact .contact-map{position:absolute;right:6vw;top:50%;transform:translateY(-50%);width:var(--map-width);max-width:none}
}
@media(min-width:901px) and (max-width:1250px){
 .contact .contact-grid{grid-template-columns:minmax(0,1fr)}
 .contact-details{grid-column:1;gap:20px}
}
@media(max-width:767px),(max-width:1024px) and (max-height:500px) and (pointer:coarse){
 .section.contact.has-mobile-module{padding:0;min-height:0}
 .contact-title-desktop{display:none}
 .contact-title-mobile{display:inline}
 .contact.has-mobile-module .mobile-module>summary>small{display:none}
 .contact .contact-map{position:static;transform:none;justify-self:center;grid-column:1;grid-row:2;width:min(100%,360px)}
 .contact .contact-grid{width:100%;grid-template-columns:minmax(0,1fr)}
 .contact .mobile-module>summary{width:100%}
}

.contact-phone{margin-top:22px}
.contact .contact-phone small{margin-bottom:7px}
.contact-phone>a{display:inline-block;font-size:clamp(18px,1.5vw,23px);line-height:1.5;transition:color .2s ease}
.contact-phone>a:is(:hover,:focus-visible){color:var(--accent)}
/* Keep the email and telephone at the same readable size on every screen. */
.contact .big-mail,.contact .contact-phone>a{font-family:inherit;font-size:clamp(18px,1.5vw,23px);font-weight:400;line-height:1.5;letter-spacing:normal}

.header-utilities{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:none}
.site-sound{width:40px;height:44px;min-width:40px;display:grid;place-items:center;padding:10px;border:0;background:transparent;color:#c9cdc5;cursor:pointer;transition:color .2s ease}
.site-sound:hover,.site-sound:focus-visible{color:var(--accent)}
.site-sound>svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sound-bars{display:none;align-items:center;justify-content:center;gap:2px;width:20px;height:20px;color:var(--accent)}
.sound-bars i{display:block;width:2px;height:14px;border-radius:2px;background:currentColor;transform-origin:center;animation:sound-level 1.1s ease-in-out infinite}
.sound-bars i:nth-child(2){animation-delay:-.3s;animation-duration:.9s}
.sound-bars i:nth-child(3){animation-delay:-.6s;animation-duration:1.3s}
.sound-bars i:nth-child(4){animation-delay:-.2s;animation-duration:1s}
.sound-bars i:nth-child(5){animation-delay:-.8s;animation-duration:1.2s}
.site-sound.is-playing>svg{display:none}
.site-sound.is-playing .sound-bars{display:flex}
@keyframes sound-level{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media(max-width:1100px){body>header .header-utilities{grid-column:2;grid-row:1;justify-self:end}}
@media(min-width:1025px) and (max-width:1599px){body>header .header-utilities{grid-column:auto;grid-row:auto}}
@media(max-width:600px){.header-utilities{gap:2px}.site-sound{width:36px;min-width:36px}}
@media(prefers-reduced-motion:reduce){.sound-bars i{animation:none;transform:scaleY(.65)}.sound-bars i:nth-child(2n){transform:scaleY(1)}.site-sound{transition:none}}

/* Shared mobile alignment for Forum and Colorum. */
@media(max-width:767px),(max-width:1024px) and (max-height:500px) and (pointer:coarse){
 .hero,.section{text-align:center}
 .hero>.eyebrow,.hero>.hero-meta,.hero>.hero-action{justify-content:center}
 .hero #hero-description{margin-inline:auto}
 .hero>.hero-action{align-items:center}
 .has-mobile-module .mobile-module>summary{padding-inline:calc(6vw + 35px)}
 .has-mobile-module .mobile-module>summary .section-head,
 .has-mobile-module .mobile-module>summary .services-head,
 .has-mobile-module .mobile-module>summary .award-intro,
 .has-mobile-module .mobile-module>summary h2{padding-inline:0}
 .has-mobile-module .mobile-module>summary small,
 .has-mobile-module .module-intro{margin-inline:auto}
 .services .service-item{grid-template-columns:minmax(0,1fr);gap:8px;justify-items:center}
 .services .service-item>div{padding-right:0}
 .services .service-item .service-number{padding-top:0;transform-origin:center}
 .services .service-item:is(:hover,:focus-visible,.is-active) h3{transform:none}
 .services .service-item p,.services-head>p{margin-inline:auto}
 .person,.contact-details>div,.award-copy{text-align:center}
 .contact .big-mail,.contact .address{margin-inline:auto}
 .contact .contact-map{justify-self:center}
 .map-caption{justify-content:center}
 .portfolio-feature .portfolio-feature-copy{left:6%;right:6%;text-align:center}
 .portfolio-feature p{margin-inline:auto}
 .award-copy a{justify-content:center}
}