/* Header */
.site-header{position:fixed;z-index:1000;top:0;left:0;width:100%;height:var(--header-h);color:var(--white);transition:background var(--motion-normal),height var(--motion-normal),box-shadow var(--motion-normal)}
.site-header.is-scrolled{height:70px;background:rgba(23,17,57,.96);box-shadow:0 10px 35px rgba(0,0,0,.12);backdrop-filter:blur(12px)}
.header-inner{height:100%;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.65rem;min-width:max-content}
.brand-symbol{width:46px;height:40px;object-fit:contain}
.brand-wordmark{display:grid;line-height:1}.brand-wordmark strong{font-family:var(--font-en);font-size:1.18rem;letter-spacing:.06em}.brand-wordmark small{font-size:.64rem;opacity:.78;margin-top:.25rem}
.desktop-nav{margin-inline:auto;display:flex;align-items:center;gap:clamp(.65rem,1.4vw,1.3rem);font-size:.81rem;font-weight:600}
.desktop-nav a{position:relative;white-space:nowrap;opacity:.85;transition:opacity var(--motion-fast)}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{opacity:1}
.desktop-nav a[aria-current=page]::after{content:"";position:absolute;inset-inline:0;bottom:-.65rem;height:1px;background:var(--rosco-gold)}
.header-actions{display:flex;align-items:center;gap:.8rem}
.language-switch{font-family:var(--font-en);font-size:.75rem;font-weight:700;border-inline-start:1px solid rgba(255,255,255,.3);padding-inline-start:.8rem}
.header-cta{font-size:.78rem;padding:.72rem 1rem!important}
.menu-toggle{display:none;background:none;border:0;color:inherit;width:44px;height:44px;padding:10px}
.menu-toggle span{display:block;height:1px;background:currentColor;margin:7px 0}
.mobile-drawer{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--surface-dark);padding:1rem 1.5rem 2rem;border-top:1px solid rgba(255,255,255,.12)}
.mobile-drawer nav{display:grid}.mobile-drawer a{padding:1rem;border-bottom:1px solid rgba(255,255,255,.12);font-size:1.05rem}

/* Buttons */
.btn{min-height:48px;padding:.85rem 1.35rem;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:700;font-size:.9rem;border:1px solid transparent;border-radius:var(--radius-sm);transition:transform var(--motion-fast),background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--rosco-gold);color:var(--charcoal)}
.btn-gold:hover{background:var(--rosco-gold-light)}
.btn-violet{background:var(--rosco-violet);color:var(--white)}
.btn-violet:hover{background:var(--rosco-violet-dark)}
.btn-ghost{color:inherit;border-color:currentColor;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* Hero */
.hero,.page-hero,.project-hero{position:relative;color:var(--white);background:var(--rosco-violet-deep);overflow:hidden}
.hero-home{min-height:max(720px,100svh);display:grid;align-items:end;padding:calc(var(--header-h) + 4rem) 0 6rem}
.hero-media{position:absolute;inset:0;background:
 radial-gradient(circle at 72% 42%,rgba(204,159,71,.18),transparent 28%),
 linear-gradient(125deg,var(--rosco-violet-deep),#2b2168 58%,#171139)}
.hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
.hero-light{position:absolute;width:40vw;height:40vw;border:1px solid rgba(204,159,71,.18);transform:rotate(45deg);right:-10vw;top:10vh;box-shadow:0 0 180px rgba(204,159,71,.05) inset}
.hero-content{position:relative;z-index:2;display:grid;gap:1.5rem}
.hero-content h1{font-size:var(--text-display-xl);max-width:13ch}
html[dir=rtl] .hero-content h1{max-width:10ch}
.hero-content p{font-size:var(--text-body-lg);color:rgba(255,255,255,.78)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.8rem}
.hero-rail{position:absolute;z-index:2;inset-inline-end:2rem;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center;display:flex;align-items:center;gap:.8rem;font-family:var(--font-en);font-size:.65rem;letter-spacing:.15em}
.hero-rail div{width:90px;height:1px;background:rgba(255,255,255,.4)}
.page-hero,.project-hero{
    padding:calc(var(--header-h) + clamp(5rem,10vw,10rem)) 0 clamp(4rem,7vw,7rem);
    background:linear-gradient(125deg,var(--rosco-violet-deep),var(--rosco-violet));
    min-height:clamp(420px,56vw,680px);
    display:flex;
    align-items:flex-end;
    isolation:isolate;
}
.page-hero.compact{padding-bottom:clamp(3rem,5vw,5rem)}
.page-hero .container,.project-hero .container{
    display:grid;
    gap:1.4rem;
    position:relative;
    z-index:3;
}
.page-hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transform:scale(1.02);
    filter:saturate(1.04) contrast(1.03);
}
.page-hero.has-hero-media::before,
.project-hero.has-hero-media::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        110deg,
        rgba(9,12,20,.82) 0%,
        rgba(23,17,57,.78) 35%,
        rgba(57,45,128,.54) 62%,
        rgba(9,12,20,.70) 100%
    );
    z-index:1;
}
.page-hero.has-hero-media::after,
.project-hero.has-hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
        circle at 82% 22%,
        rgba(204,159,71,.16),
        transparent 32%
    );
    z-index:2;
    pointer-events:none;
}
.page-hero h1,.project-hero h1{font-size:var(--text-display-lg);max-width:16ch}
.page-hero p,.project-hero p{font-size:var(--text-body-lg);color:rgba(255,255,255,.76);max-width:62ch}
.project-meta{display:flex;flex-wrap:wrap;gap:1px;margin-top:1.5rem;background:rgba(255,255,255,.14);max-width:1000px}
.project-meta span{display:grid;gap:.2rem;padding:1rem 1.4rem;min-width:180px;background:rgba(23,17,57,.38);font-size:.7rem;letter-spacing:.08em}
.project-meta strong{font-size:1rem;letter-spacing:0}

/* Stats / cards */
.stats-band{background:var(--rosco-gold);color:var(--charcoal)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats-grid article{padding:1.8rem;border-inline-start:1px solid rgba(21,19,27,.18);display:grid;gap:.2rem}
.stats-grid strong{font-family:var(--font-en);font-size:clamp(1.9rem,3vw,3rem);line-height:1}
.stats-grid span{font-size:.8rem}
.service-card{
    min-height:300px;
    background:var(--white);
    padding:1.7rem;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    transition:background var(--motion-normal),color var(--motion-normal);
}
.service-card-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transform:scale(1.03);
}
.service-card.has-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(23,17,57,.16),
        rgba(23,17,57,.82)
    );
}
.service-card.has-media>span,
.service-card.has-media>h2,
.service-card.has-media>h3,
.service-card.has-media>p,
.service-card.has-media>i{
    position:relative;
    z-index:2;
    color:var(--white);
}
.service-card.has-media>p,
.service-card.has-media:hover p,
.service-card.has-media:hover>span{
    color:rgba(255,255,255,.84);
}
.service-card.tall{min-height:380px}
.service-card>span{font-family:var(--font-en);font-size:.68rem;color:var(--rosco-gold-dark)}
.service-card h2,.service-card h3{margin-top:auto;font-size:clamp(1.35rem,2vw,1.9rem)}
.service-card p{font-size:.9rem;color:var(--concrete);margin-top:.8rem}
.service-card i{font-style:normal;position:absolute;top:1.5rem;inset-inline-end:1.5rem;font-size:1.2rem}
.service-card:hover{background:var(--rosco-violet);color:var(--white)}
.service-card:hover p,.service-card:hover>span{color:rgba(255,255,255,.72)}
.plain-card{background:var(--white);padding:2rem;min-height:220px}
.plain-card p{margin-top:1rem;color:var(--concrete)}
.data-placeholder{border:1px dashed rgba(57,45,128,.35);background:rgba(57,45,128,.035);padding:2rem;display:grid;gap:.5rem}
.data-placeholder.large{min-height:260px;align-content:center;justify-items:start}
.data-placeholder strong{font-family:var(--font-en);font-size:.72rem;letter-spacing:.14em;color:var(--rosco-violet)}
.data-placeholder span{color:var(--concrete);max-width:60ch}

/* Signature */
.signature-section{height:260vh;background:var(--surface-dark);color:var(--white)}
.signature-sticky{height:100vh;position:sticky;top:0;display:flex;align-items:center;overflow:hidden}
.signature-bg{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(57,45,128,.38),transparent 58%)}
.blueprint{position:absolute;inset:8%;border:1px solid rgba(204,159,71,.16);background-image:linear-gradient(rgba(204,159,71,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(204,159,71,.09) 1px,transparent 1px);background-size:48px 48px;clip-path:inset(0 100% 0 0)}
.structure-lines{position:absolute;left:50%;top:50%;width:min(60vw,820px);height:min(55vh,560px);transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.1);clip-path:polygon(0 100%,10% 62%,25% 62%,38% 25%,55% 25%,70% 48%,85% 48%,100% 0,100% 100%);background:linear-gradient(to top,rgba(204,159,71,.24),transparent)}
.signature-copy{position:relative;text-align:center;display:grid;justify-items:center;gap:1.5rem}
.signature-copy h2{font-family:var(--font-en);font-size:var(--text-display-lg);letter-spacing:-.05em}
html[dir=rtl] .signature-copy h2{font-family:var(--font-ar);letter-spacing:0}
.signature-stages{display:flex;gap:1px;background:rgba(255,255,255,.12);margin-top:2rem}
.signature-stages span{font-family:var(--font-en);font-size:.66rem;letter-spacing:.1em;padding:.8rem 1rem;background:rgba(23,17,57,.8);opacity:.35;transition:opacity var(--motion-normal),color var(--motion-normal)}
.signature-stages span.is-active{opacity:1;color:var(--rosco-gold-light)}

/* Projects */
.project-card{display:block;background:var(--white);border:1px solid var(--line);overflow:hidden}
.project-card-media{
    height:clamp(280px,34vw,520px);
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,var(--rosco-violet-dark),var(--rosco-violet));
}
.project-card-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transition:transform var(--motion-cinematic) var(--ease-cinematic);
}
.project-card:hover .project-card-image{
    transform:scale(1.03);
}
.project-placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:rgba(255,255,255,.55);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:42px 42px}
.project-placeholder span{font-family:var(--font-en);font-size:clamp(2rem,6vw,5rem);letter-spacing:.08em}
.project-placeholder small{font-family:var(--font-en);letter-spacing:.14em}
.project-mask{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(204,159,71,.22));transform:translateX(-110%);transition:transform var(--motion-cinematic) var(--ease-cinematic)}
.project-card:hover .project-mask{transform:translateX(100%)}
.project-status{position:absolute;top:1rem;inset-inline-start:1rem;background:rgba(23,17,57,.85);color:var(--white);padding:.45rem .65rem;font-family:var(--font-en);font-size:.62rem;letter-spacing:.08em}
.project-card-body{display:flex;align-items:end;justify-content:space-between;gap:1rem;padding:1.5rem}
.project-card-body h3{margin-top:.35rem}
.progress-mini{font-family:var(--font-en);font-size:1.4rem;color:var(--rosco-violet)}
.project-sequence{display:flex;align-items:center;gap:.6rem;padding:0 1.5rem 1.4rem;font-family:var(--font-en);font-size:.58rem;letter-spacing:.08em;color:var(--concrete)}
.project-sequence i{width:30px;height:1px;background:var(--line)}
.progress-chart{background:var(--white);border:1px solid var(--line);padding:1.2rem}
.progress-chart svg{width:100%;height:auto;min-height:220px}
.chart-legend{display:flex;gap:1.5rem;font-size:.8rem}.chart-legend span{display:flex;align-items:center;gap:.4rem}.chart-legend i{width:20px;height:2px;background:var(--rosco-violet)}.chart-legend span:nth-child(2) i{background:var(--rosco-gold)}
.work-grid{display:grid;gap:1px;background:var(--line)}
.work-grid article{background:var(--white);display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:1.5rem;padding:1.25rem}
.work-grid article>div:first-child{display:grid}.work-grid h3{font-size:1rem}.work-grid span{font-size:.68rem;color:var(--concrete);font-family:var(--font-en)}
.bar{height:6px;background:var(--surface-soft);overflow:hidden}.bar i{height:100%;display:block;background:linear-gradient(90deg,var(--rosco-violet),var(--rosco-gold))}
.metric-grid article{background:var(--white);padding:2rem;display:grid;gap:.5rem}.metric-grid span{font-size:.8rem;color:var(--concrete)}.metric-grid strong{font-family:var(--font-en);font-size:1.8rem}
.gallery{columns:2;column-gap:1rem}.gallery figure{break-inside:avoid;margin-bottom:1rem}.gallery figcaption{padding:.6rem 0;font-size:.8rem;color:var(--concrete)}

.richtext{
    display:grid;
    gap:1rem;
}
.richtext p,
.richtext ul,
.richtext ol,
.richtext blockquote{
    margin:0;
}
.richtext ul,
.richtext ol{
    padding-inline-start:1.4rem;
}
.richtext li+li{
    margin-top:.35rem;
}
.richtext h2,
.richtext h3,
.richtext h4{
    margin-top:1rem;
}
.richtext blockquote{
    padding-inline-start:1rem;
    border-inline-start:3px solid var(--rosco-gold);
    color:var(--concrete);
}
.richtext a{
    text-decoration:underline;
    text-underline-offset:.18em;
}

/* Panels / timeline */
.technical-panel{position:sticky;top:100px;padding:2rem;background:var(--surface-dark);color:var(--white);display:grid;gap:.5rem;border-top:3px solid var(--rosco-gold)}
.technical-panel span{font-family:var(--font-en);font-size:.62rem;letter-spacing:.12em;color:var(--rosco-gold-light);margin-top:1rem}
.technical-panel strong{font-size:1.05rem}.technical-panel .btn{margin-top:1rem}
.timeline{list-style:none;padding:0;margin:0;display:grid}
.timeline li{display:grid;grid-template-columns:170px 1fr;gap:2rem;padding:1.5rem 0;border-top:1px solid currentColor}
.timeline time{font-family:var(--font-en);font-size:.8rem;color:var(--rosco-gold-light)}
.timeline p{opacity:.72;margin-top:.4rem}

/* Forms */
.form-card{background:var(--white);border:1px solid var(--line);padding:clamp(1.3rem,4vw,3rem);box-shadow:var(--shadow-soft)}
.form-card form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.25rem}
.form-card label{display:grid;gap:.45rem;font-weight:600;font-size:.85rem}
.form-card label.full,.form-card button{grid-column:1/-1}
input,textarea,select{width:100%;border:1px solid #c9c5bd;background:var(--white);color:var(--charcoal);border-radius:var(--radius-sm);padding:.8rem .9rem;min-height:48px}
textarea{resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--rosco-violet);outline:2px solid rgba(57,45,128,.14)}
label small{font-size:.72rem;color:var(--concrete);font-weight:400}
.form-alert{padding:1rem;margin-bottom:1.2rem;border-inline-start:3px solid}
.form-alert.success{background:#edf8f1;border-color:var(--success);color:var(--success)}
.form-alert.error{background:#fff1f1;border-color:var(--danger);color:var(--danger)}
.form-aside{display:grid;gap:1rem}
.branch-list{display:grid;margin-top:1rem}.branch-list>div{display:grid;padding:1rem 0;border-top:1px solid var(--line)}.branch-list span{font-size:.85rem;color:var(--concrete)}
.map-container{height:380px;margin-top:1rem;background:var(--surface-soft);border:1px solid var(--line)}

.contact-details{display:grid;border-top:1px solid var(--line)}
.contact-details>a,.contact-details>div{display:grid;gap:.25rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.contact-details span,.footer-contact span{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--concrete)}
.contact-details strong{font-size:.92rem;overflow-wrap:anywhere}
.contact-social,.footer-social{display:flex;flex-wrap:wrap;gap:.55rem}
.contact-social a{font-size:.78rem;border:1px solid var(--line);padding:.45rem .7rem}
.map-container.is-visible{display:block}
.map-container iframe{display:block;width:100%;height:100%;border:0}
.map-external-link{justify-self:start;margin-top:.25rem}
.footer-contact{display:grid;width:100%;margin-top:1.1rem;border-top:1px solid rgba(255,255,255,.12)}
.footer-contact>a,.footer-contact>div{display:grid;gap:.15rem;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-contact span{color:rgba(255,255,255,.48)}
.footer-contact b{font-size:.78rem;font-weight:500;overflow-wrap:anywhere}
.footer-social{margin-top:.85rem}
.footer-social a{font-size:.72rem;border:1px solid rgba(255,255,255,.16);padding:.38rem .6rem;opacity:.8}

/* Article / careers */
.article-card{padding:1.5rem;border-top:2px solid var(--rosco-violet);background:var(--surface-soft)}.article-card>span{font-family:var(--font-en);font-size:.7rem;color:var(--concrete)}.article-card h2{font-size:1.45rem;margin:.8rem 0}.article-card p{font-size:.9rem;color:var(--concrete)}
.job-list{display:grid}.job-list>a{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding:1.5rem;border-top:1px solid var(--line);transition:background var(--motion-fast)}.job-list>a:hover{background:var(--surface-soft)}.job-list span{font-size:.7rem;color:var(--concrete)}.job-list h2{font-size:1.35rem;margin-top:.3rem}.job-list>a>div:last-child{display:flex;gap:1.5rem;align-items:center}

/* Footer */
.site-footer{background:#0f0d1d;color:var(--white);padding:5rem 0 1.5rem}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:3rem}
.footer-grid section{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}.footer-grid h2{font-size:.85rem;color:var(--rosco-gold-light);margin-bottom:.7rem}.footer-grid a{font-size:.88rem;opacity:.75}.footer-grid a:hover{opacity:1}.footer-grid p{font-size:.9rem;opacity:.65;margin-top:1rem;max-width:40ch}
.footer-brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-en);font-size:1.5rem;letter-spacing:.08em}
.footer-bottom{display:flex;justify-content:space-between;gap:2rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem;margin-top:4rem;font-size:.72rem;opacity:.6}

/* CTA */
.cta-panel{background:var(--surface-soft);border-inline-start:5px solid var(--rosco-gold);padding:clamp(2rem,5vw,4rem);display:flex;justify-content:space-between;align-items:end;gap:2rem}
.cta-panel h2{margin-top:.7rem}.cta-actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* Chat */
.chat-shell{position:fixed;z-index:1200;bottom:1.2rem;inset-inline-end:1.2rem}
.chat-trigger{display:flex;align-items:center;gap:.55rem;background:var(--rosco-violet);color:var(--white);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.75rem 1rem;box-shadow:0 12px 35px rgba(23,17,57,.25)}
.chat-trigger span:first-child{color:var(--rosco-gold-light)}
.chat-panel{position:absolute;bottom:calc(100% + .7rem);inset-inline-end:0;width:min(380px,calc(100vw - 2rem));max-height:min(640px,75vh);background:var(--white);color:var(--charcoal);border:1px solid var(--line);box-shadow:0 25px 70px rgba(23,17,57,.25);display:grid;grid-template-rows:auto 1fr auto}
.chat-panel[hidden]{display:none}.chat-panel header{background:var(--surface-dark);color:var(--white);padding:1rem;display:flex;justify-content:space-between}.chat-panel header button{border:0;background:none;color:inherit;font-size:1.3rem}
.chat-messages{padding:1rem;overflow:auto;display:grid;gap:.8rem;max-height:360px}.chat-messages p{padding:.75rem .9rem;font-size:.85rem;line-height:1.6;border-radius:var(--radius-md)}.assistant-msg{background:var(--surface-soft)}.user-msg{background:var(--rosco-violet);color:var(--white);justify-self:end}
.chat-panel form{padding:1rem;border-top:1px solid var(--line);display:grid;gap:.65rem}.chat-panel textarea{min-height:72px}.consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:start!important;font-size:.68rem!important;font-weight:400!important}.consent input{width:16px;height:16px;min-height:0}

/* Error */
.error-page{min-height:100vh;background:var(--surface-dark);color:var(--white);display:grid;place-items:center;padding:8rem 0}.error-page .container{display:grid;justify-items:start;gap:1rem}.error-page span{font-family:var(--font-en);font-size:clamp(7rem,20vw,18rem);line-height:.8;color:var(--rosco-gold);opacity:.2}.error-page h1{font-size:var(--text-h1)}.error-page p{opacity:.7}

.process-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,1fr);border-block:1px solid var(--line)}
.process-grid li{min-height:180px;padding:1.2rem;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
.process-grid span{font-family:var(--font-en);font-size:.65rem;color:var(--rosco-gold-dark)}.process-grid strong{font-family:var(--font-en);font-size:clamp(.8rem,1.2vw,1.05rem);letter-spacing:.05em}
.client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.client-grid span{background:var(--white);min-height:130px;display:grid;place-items:center;padding:1rem;text-align:center;font-weight:700}
@media(max-width:900px){.process-grid{grid-template-columns:repeat(3,1fr)}.client-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.process-grid{grid-template-columns:repeat(2,1fr)}.client-grid{grid-template-columns:1fr}}

.stage-visual{position:relative;min-height:min(65vw,680px);overflow:hidden;background:#0d0b17}
.stage-visual figure{position:absolute;inset:0;opacity:0;transition:opacity var(--motion-cinematic) var(--ease-cinematic);margin:0}
.stage-visual figure.is-active{opacity:1;z-index:2}
.stage-visual img{width:100%;height:100%;object-fit:cover}
.stage-visual figcaption{position:absolute;bottom:1rem;inset-inline-start:1rem;background:rgba(23,17,57,.82);padding:.5rem .7rem;font:700 .68rem/1 var(--font-en);letter-spacing:.12em}
.stage-controls{display:flex;border-top:1px solid rgba(255,255,255,.16)}
.stage-controls button{flex:1;border:0;border-inline-end:1px solid rgba(255,255,255,.16);background:transparent;color:rgba(255,255,255,.48);padding:1rem;font:700 .7rem/1 var(--font-en);letter-spacing:.1em}
.stage-controls button.is-active{color:var(--rosco-gold-light);background:rgba(255,255,255,.04)}

.breadcrumbs{position:absolute;z-index:10;top:calc(var(--header-h) + 1rem);inset-inline:0;color:rgba(255,255,255,.72);font-size:.72rem}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-inline-start:.45rem;opacity:.45}
.breadcrumbs a:hover{color:var(--white)}
main{position:relative}

/* ROSCO MEDIA HERO V2 BEGIN */

.page-hero.has-hero-media,
.project-hero.has-hero-media{
    isolation:isolate;
    display:flex;
    align-items:flex-end;
    background:var(--rosco-violet-deep);
}

/* Service image proportions */
.page-hero.has-hero-media{
    min-height:clamp(460px,52vw,650px);
    padding-top:calc(
        var(--header-h) + clamp(5rem,9vw,8rem)
    );
    padding-bottom:clamp(3.5rem,6vw,6rem);
}

/* Projects receive a slightly more cinematic canvas */
.project-hero.has-hero-media{
    min-height:clamp(520px,58vw,730px);
    padding-top:calc(
        var(--header-h) + clamp(5rem,9vw,8rem)
    );
    padding-bottom:clamp(3.8rem,6vw,6.5rem);
}

/* Main media */
.page-hero-image{
    position:absolute;
    inset:0;
    z-index:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center 50%;

    transform:scale(1.015);

    filter:
        saturate(.92)
        contrast(1.06)
        brightness(.82);
}

/* Dark cinematic layer behind text */
.page-hero.has-hero-media::before,
.project-hero.has-hero-media::before{
    content:"";

    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(13,10,31,.90) 0%,
            rgba(23,17,57,.77) 38%,
            rgba(31,24,70,.48) 67%,
            rgba(12,10,28,.55) 100%
        ),
        linear-gradient(
            0deg,
            rgba(10,8,24,.64) 0%,
            transparent 52%
        );

    pointer-events:none;
}

/* ROSCO gold/violet lighting */
.page-hero.has-hero-media::after,
.project-hero.has-hero-media::after{
    content:"";

    position:absolute;
    inset:0;
    z-index:2;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(204,159,71,.22),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            transparent 32%,
            rgba(0,0,0,.10)
        );

    pointer-events:none;
}

.page-hero.has-hero-media .container,
.project-hero.has-hero-media .container{
    position:relative;
    z-index:3;
}

.page-hero.has-hero-media h1,
.project-hero.has-hero-media h1{
    text-shadow:
        0 4px 28px rgba(0,0,0,.30);
}

.page-hero.has-hero-media p,
.project-hero.has-hero-media p{
    color:rgba(255,255,255,.84);

    text-shadow:
        0 2px 18px rgba(0,0,0,.24);
}

/* Project information glass panel */
.project-hero.has-hero-media .project-meta{
    background:rgba(23,17,57,.24);

    border:
        1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
}

/* Cards */
.service-card-image,
.project-card-image{
    object-position:center center;
}

.service-card.has-media::after{
    background:
        linear-gradient(
            180deg,
            rgba(17,13,39,.08) 5%,
            rgba(23,17,57,.30) 44%,
            rgba(16,12,37,.90) 100%
        );
}

.project-card-media::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 58%,
            rgba(15,11,34,.18)
        );
}

/* Mobile */
@media (max-width:720px){

    .page-hero.has-hero-media{
        min-height:500px;
    }

    .project-hero.has-hero-media{
        min-height:560px;
    }

    .page-hero-image{
        object-position:center center;
    }

    .page-hero.has-hero-media::before,
    .project-hero.has-hero-media::before{
        background:
            linear-gradient(
                0deg,
                rgba(12,9,29,.94) 0%,
                rgba(23,17,57,.72) 58%,
                rgba(16,12,38,.42) 100%
            );
    }
}

/* ROSCO MEDIA HERO V2 END */

/* ROSCO CONTACT MAP V2 BEGIN */

.contact-map-section{
    padding:
        0
        0
        clamp(5rem,8vw,8rem);

    background:var(--surface);
}

.contact-map-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;

    gap:2rem;

    margin-bottom:1.5rem;
}

.contact-map-heading>div{
    display:grid;
    gap:.6rem;
}

.contact-map-heading h2{
    font-size:clamp(1.8rem,3.5vw,3.4rem);
    max-width:16ch;
}

.contact-map-shell{
    position:relative;

    min-height:
        clamp(440px,55vw,650px);

    overflow:hidden;

    background:
        var(--rosco-violet-deep);

    border:
        1px solid var(--line);
}

.contact-map-canvas{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    margin:0;

    border:0;

    background:
        var(--surface-soft);
}

.contact-map-canvas iframe{
    width:100%;
    height:100%;

    border:0;

    filter:
        saturate(.88)
        contrast(1.03);
}

.contact-map-shell::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        inset 0 -100px 120px rgba(15,13,29,.14);
}

.contact-map-badge{
    position:absolute;

    z-index:2;

    inset-inline-start:1.5rem;
    bottom:1.5rem;

    display:grid;
    gap:.15rem;

    min-width:
        min(320px,calc(100% - 3rem));

    padding:
        1rem 1.2rem;

    background:
        rgba(15,13,29,.90);

    color:
        var(--white);

    border-inline-start:
        3px solid var(--rosco-gold);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 18px 50px rgba(0,0,0,.20);
}

.contact-map-badge span{
    font-family:
        var(--font-en);

    font-size:.62rem;

    letter-spacing:.14em;

    color:
        var(--rosco-gold-light);
}

.contact-map-badge strong{
    font-size:1rem;
}

@media(max-width:720px){

    .contact-map-heading{
        align-items:start;
        flex-direction:column;
    }

    .contact-map-heading .btn{
        width:100%;
    }

    .contact-map-shell{
        min-height:500px;
    }

    .contact-map-badge{
        inset-inline:1rem;
        bottom:1rem;
        min-width:0;
    }

}

/* ROSCO CONTACT MAP V2 END */

/* ROSCO LEGAL PAGES V2 BEGIN */

.legal-page-wrap{
    display:grid;
    grid-template-columns:
        minmax(190px,260px)
        minmax(0,1fr);
    gap:clamp(2rem,5vw,5rem);
    align-items:start;
}

.legal-switcher{
    position:sticky;
    top:calc(var(--header-h) + 1.2rem);
    display:grid;
    background:var(--white);
    border:1px solid var(--line);
}

.legal-switcher a{
    padding:1rem 1.1rem;
    border-bottom:1px solid var(--line);
    font-weight:600;
}

.legal-switcher a:last-child{
    border-bottom:0;
}

.legal-switcher a.is-active{
    background:var(--rosco-violet);
    color:var(--white);
    border-inline-start:
        3px solid var(--rosco-gold);
}

.legal-prose{
    max-width:900px;
}

.legal-updated{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.2rem;
    margin-bottom:2rem;
    background:var(--surface-soft);
    border-inline-start:
        3px solid var(--rosco-gold);
    font-size:.82rem;
}

.legal-updated span{
    color:var(--concrete);
}

.legal-prose .richtext{
    gap:1.1rem;
}

.legal-prose .richtext h2{
    font-size:
        clamp(1.35rem,2.2vw,1.8rem);
    margin-top:2.2rem;
}

.legal-prose .richtext h2:first-child{
    margin-top:0;
}

.legal-prose .richtext p,
.legal-prose .richtext li{
    line-height:1.95;
}

@media(max-width:760px){

    .legal-page-wrap{
        grid-template-columns:1fr;
    }

    .legal-switcher{
        position:static;
        grid-template-columns:
            repeat(3,1fr);
    }

    .legal-switcher a{
        text-align:center;
        padding:.8rem .4rem;
        font-size:.78rem;
        border-bottom:0;
    }

}

/* ROSCO LEGAL PAGES V2 END */

/* ROSCO COOKIE CONSENT V1 BEGIN */
.cookie-consent{position:fixed;inset:0;z-index:1200;pointer-events:none}
.cookie-banner{pointer-events:auto;position:absolute;inset-inline:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2rem);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;padding:clamp(1.4rem,3vw,2.2rem);background:rgba(18,14,42,.96);color:var(--white);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--rosco-gold);box-shadow:0 24px 70px rgba(0,0,0,.28);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.cookie-copy{max-width:800px;display:grid;gap:.65rem}.cookie-copy h2{font-size:clamp(1.35rem,2.6vw,2rem)}.cookie-copy p{color:rgba(255,255,255,.78);max-width:70ch}.cookie-copy>a{font-size:.82rem;color:var(--rosco-gold-light);text-decoration:underline;text-underline-offset:.2em}.cookie-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.65rem;max-width:460px}.cookie-secondary{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.24)}.cookie-actions .text-link{color:rgba(255,255,255,.82)}
.cookie-preferences{pointer-events:auto;position:absolute;inset:0;display:grid;place-items:center;padding:1rem;background:rgba(10,8,24,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cookie-preferences-card{width:min(760px,100%);max-height:min(760px,calc(100vh - 2rem));overflow:auto;background:var(--white);color:var(--charcoal);border-top:4px solid var(--rosco-gold);box-shadow:0 30px 90px rgba(0,0,0,.32)}.cookie-preferences-card>header{display:flex;justify-content:space-between;align-items:start;gap:1rem;padding:1.5rem 1.6rem;border-bottom:1px solid var(--line)}.cookie-preferences-card>header>div{display:grid;gap:.35rem}.cookie-close{border:0;background:transparent;font-size:1.8rem;line-height:1;cursor:pointer}.cookie-category{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;padding:1.35rem 1.6rem;border-bottom:1px solid var(--line)}.cookie-category>div{display:grid;gap:.35rem}.cookie-category p{font-size:.86rem;color:var(--concrete);max-width:60ch}.cookie-switch{display:flex;align-items:center;gap:.6rem;white-space:nowrap;font-size:.78rem}.cookie-switch input{width:1.1rem;height:1.1rem;accent-color:var(--rosco-violet)}.cookie-preferences-card>footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 1.6rem}.footer-cookie-settings{border:0;background:none;padding:0;text-align:start;color:inherit;font:inherit;cursor:pointer}.footer-cookie-settings:hover{text-decoration:underline;text-underline-offset:.2em}
.map-container{position:relative}.map-cookie-placeholder{position:absolute;inset:0;z-index:4;display:grid;place-content:center;text-align:center;gap:.7rem;padding:2rem;background:linear-gradient(135deg,rgba(23,17,57,.96),rgba(57,45,128,.90));color:var(--white)}.map-cookie-placeholder p{max-width:42ch;color:rgba(255,255,255,.75)}.map-cookie-placeholder .btn{justify-self:center}
@media(max-width:760px){.cookie-banner{grid-template-columns:1fr;align-items:start}.cookie-actions{justify-content:stretch;max-width:none}.cookie-actions .btn{flex:1 1 100%}.cookie-actions .text-link{width:100%;text-align:center}.cookie-category{grid-template-columns:1fr}.cookie-preferences-card>footer{align-items:stretch;flex-direction:column}.cookie-preferences-card>footer .btn{width:100%}}
/* ROSCO COOKIE CONSENT V1 END */

/* ROSCO CHAT EXPERIENCE V2 BEGIN */
.chat-panel{
    width:min(480px,calc(100vw - 1.2rem));
    max-height:min(740px,84vh);
}
.chat-messages{
    max-height:460px;
    gap:.85rem;
    scroll-behavior:smooth;
}
.chat-message{
    max-width:92%;
    padding:.85rem 1rem;
    border-radius:var(--radius-md);
    font-size:.86rem;
    line-height:1.75;
    overflow-wrap:anywhere;
}
.chat-message.assistant-msg{
    justify-self:start;
    background:var(--surface-soft);
}
.chat-message.user-msg{
    justify-self:end;
    background:var(--rosco-violet);
    color:var(--white);
}
.chat-message .chat-richtext{
    display:grid;
    gap:.55rem;
    min-width:0;
}
.chat-message .chat-richtext p,
.chat-message .chat-richtext ul,
.chat-message .chat-richtext ol,
.chat-message .chat-richtext blockquote,
.chat-message .chat-richtext pre,
.chat-message .chat-richtext h3,
.chat-message .chat-richtext h4,
.chat-message .chat-richtext h5,
.chat-message .chat-richtext h6{
    margin:0;
}
.chat-messages .chat-message .chat-richtext p{
    padding:0;
    background:none;
    border-radius:0;
    font-size:inherit;
    line-height:inherit;
}
.chat-richtext strong{font-weight:750;color:inherit}
.chat-richtext ul,
.chat-richtext ol{
    padding-inline-start:1.25rem;
    display:grid;
    gap:.32rem;
}
.chat-richtext li{padding-inline-start:.12rem}
.chat-richtext h3,
.chat-richtext h4,
.chat-richtext h5,
.chat-richtext h6{
    line-height:1.35;
    font-weight:750;
}
.chat-richtext h3{font-size:1.02rem}
.chat-richtext h4{font-size:.96rem}
.chat-richtext h5,.chat-richtext h6{font-size:.9rem}
.chat-richtext blockquote{
    border-inline-start:3px solid var(--rosco-gold);
    padding:.15rem .8rem;
    color:var(--concrete);
}
.chat-richtext code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.82em;
    background:rgba(57,45,128,.08);
    padding:.12rem .32rem;
    border-radius:4px;
}
.chat-richtext pre{
    overflow:auto;
    background:#12101e;
    color:#f5f3fb;
    padding:.8rem;
    border-radius:8px;
    direction:ltr;
    text-align:left;
}
.chat-richtext pre code{background:none;padding:0;color:inherit}
.chat-table-wrap{
    overflow:auto;
    max-width:100%;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--white);
}
.chat-richtext table{
    width:100%;
    min-width:360px;
    border-collapse:collapse;
    font-size:.78rem;
}
.chat-richtext th,
.chat-richtext td{
    padding:.62rem .7rem;
    border-bottom:1px solid var(--line);
    text-align:start;
    vertical-align:top;
}
.chat-richtext th{
    background:rgba(57,45,128,.07);
    color:var(--rosco-violet-deep);
    font-weight:750;
}
.chat-richtext tr:last-child td{border-bottom:0}
.chat-richtext hr{border:0;border-top:1px solid var(--line);margin:.2rem 0}

.chat-message.is-processing{
    width:min(100%,390px);
}
.chat-process{
    display:grid;
    gap:.58rem;
}
.chat-process-step{
    display:grid;
    grid-template-columns:16px 1fr;
    align-items:center;
    gap:.6rem;
    color:var(--concrete);
    opacity:.52;
    transition:opacity .2s ease,color .2s ease;
}
.chat-process-step>span{
    width:10px;
    height:10px;
    border-radius:50%;
    border:2px solid rgba(57,45,128,.28);
    position:relative;
}
.chat-process-step strong{font-size:.76rem;font-weight:600}
.chat-process-step.is-done{opacity:.72}
.chat-process-step.is-done>span{
    background:var(--rosco-gold);
    border-color:var(--rosco-gold);
}
.chat-process-step.is-active{
    opacity:1;
    color:var(--rosco-violet-deep);
}
.chat-process-step.is-active>span{
    border-color:var(--rosco-violet);
    box-shadow:0 0 0 4px rgba(57,45,128,.10);
    animation:roscoChatPulse 1.1s ease-in-out infinite;
}
@keyframes roscoChatPulse{
    50%{transform:scale(.72);box-shadow:0 0 0 7px rgba(57,45,128,.05)}
}
.chat-consent-error{
    margin:0!important;
    padding:0!important;
    color:#a43b32!important;
    background:none!important;
    font-size:.7rem!important;
    line-height:1.45!important;
}
.chat-panel button[type="submit"]:disabled{
    opacity:.45;
    cursor:not-allowed;
    filter:grayscale(.2);
}
.consent span{line-height:1.5}
.consent a{text-decoration:underline;text-underline-offset:.15em}

@media(max-width:560px){
    .chat-shell{bottom:.7rem;inset-inline-end:.6rem}
    .chat-panel{
        width:calc(100vw - 1.2rem);
        max-height:82vh;
    }
    .chat-messages{max-height:52vh;padding:.8rem}
    .chat-message{max-width:96%;padding:.75rem .82rem}
}
/* ROSCO CHAT EXPERIENCE V2 END */



/* ROSCO VISUAL PHASE 1 */
.clients-showcase{overflow:hidden}
.clients-heading{margin-bottom:2rem}
.client-marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.client-marquee-track{display:flex;width:max-content;animation:rosco-client-marquee 38s linear infinite;will-change:transform}
.client-marquee-group{display:flex;align-items:stretch;gap:1rem;padding-inline-end:1rem}
.client-marquee:hover .client-marquee-track{animation-play-state:paused}
.client-logo-card{width:clamp(180px,18vw,260px);min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;padding:1.2rem 1.5rem;background:var(--white);border:1px solid var(--line);text-align:center;transition:transform var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.client-logo-card:hover{transform:translateY(-3px);border-color:rgba(57,45,128,.35);box-shadow:var(--shadow-soft)}
.client-logo-card img{max-width:150px;max-height:50px;width:auto;height:auto;object-fit:contain}
.client-logo-card strong{font-size:.88rem;line-height:1.5}
html[dir=rtl] .client-marquee-track{animation-direction:reverse}
@keyframes rosco-client-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .5rem))}}
@media (prefers-reduced-motion:reduce){.client-marquee-track{animation:none}.client-marquee{overflow:auto}.client-marquee-group[aria-hidden=true]{display:none}}

.client-hero-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,300px);gap:clamp(2rem,6vw,6rem);align-items:center}
.client-detail-logo{background:var(--white);min-height:180px;display:grid;place-items:center;padding:2rem;border:1px solid rgba(255,255,255,.2)}
.client-detail-logo img{max-width:220px;max-height:100px;width:auto;height:auto;object-fit:contain}
.client-detail-grid,.media-article-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(2rem,5vw,5rem);align-items:start}
.client-detail-main{display:grid;gap:4rem}
.client-info-panel{padding:clamp(1.5rem,3vw,2.5rem);background:var(--surface-soft);border-inline-start:4px solid var(--rosco-gold)}
.client-info-panel p{margin-top:1rem;max-width:75ch}
.client-contact-panel{margin:0}

.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.media-card{background:var(--white);border:1px solid var(--line);overflow:hidden;min-width:0;transition:transform var(--motion-fast),box-shadow var(--motion-fast)}
.media-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.media-card-link{display:grid;height:100%;color:inherit}
.media-card-visual{aspect-ratio:16/10;overflow:hidden;background:var(--surface-dark)}
.media-card-visual img{width:100%;height:100%;object-fit:cover;transition:transform var(--motion-normal)}
.media-card:hover .media-card-visual img{transform:scale(1.035)}
.media-card-body{padding:1.5rem;display:flex;flex-direction:column;gap:.85rem}
.media-card-meta,.media-article-meta{display:flex;flex-wrap:wrap;gap:.65rem 1rem;align-items:center;font-size:.72rem;color:var(--concrete)}
.media-card-meta span,.media-article-meta span{color:var(--rosco-gold-dark);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.media-card h2{font-size:clamp(1.2rem,2vw,1.55rem)}
.media-card p{font-size:.9rem;color:var(--concrete)}
.media-card-cta{margin-top:auto;padding-top:.5rem;color:var(--rosco-violet);font-size:.82rem}
.media-article-hero .container{max-width:1000px}
.media-article-meta{position:relative;z-index:2;color:rgba(255,255,255,.8);margin-bottom:1rem}
.media-article-meta span{color:var(--rosco-gold-light)}
.media-article-content{max-width:820px}

.page-hero-image,.service-card-image,.media-card-visual img{object-position:center}
.page-hero.has-hero-media,.project-hero.has-hero-media,.media-article-hero.has-hero-media{isolation:isolate}
.page-hero.has-hero-media::after,.media-article-hero.has-hero-media::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,14,42,.92),rgba(18,14,42,.55) 60%,rgba(18,14,42,.32))}
html[dir=rtl] .page-hero.has-hero-media::after,html[dir=rtl] .media-article-hero.has-hero-media::after{background:linear-gradient(270deg,rgba(18,14,42,.92),rgba(18,14,42,.55) 60%,rgba(18,14,42,.32))}

@media(max-width:900px){
  .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .client-detail-grid,.media-article-layout,.client-hero-layout{grid-template-columns:1fr}
  .client-detail-logo{max-width:320px}
}
@media(max-width:620px){
  .media-grid{grid-template-columns:1fr}
  .client-logo-card{width:180px;min-height:104px}
  .client-marquee{mask-image:none;-webkit-mask-image:none}
}

/* ROSCO VISUAL CORRECTION V2 */

/* Clients: immediate visibility + seamless controlled motion */
.clients-showcase{
    overflow:hidden;
    padding-block:clamp(3.8rem,6vw,6rem);
}
.clients-showcase .clients-heading{
    margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.clients-showcase .client-marquee{
    overflow:hidden;
    position:relative;
    width:100%;
    mask-image:none;
    -webkit-mask-image:none;
}
.clients-showcase .client-marquee-track{
    --client-marquee-duration:64s;
    display:flex;
    width:max-content;
    direction:ltr;
    will-change:transform;
    animation-play-state:paused;
}
html[dir=ltr] .clients-showcase .client-marquee-track{
    animation:
        rosco-client-marquee-ltr
        var(--client-marquee-duration)
        linear
        infinite
        paused;
}
html[dir=rtl] .clients-showcase .client-marquee-track{
    animation:
        rosco-client-marquee-rtl
        var(--client-marquee-duration)
        linear
        infinite
        paused;
}
.clients-showcase.is-marquee-active .client-marquee-track{
    animation-play-state:running;
}
.clients-showcase .client-marquee-group{
    display:flex;
    align-items:stretch;
    gap:.8rem;
    padding-inline-end:.8rem;
    direction:ltr;
}
.clients-showcase .client-logo-card{
    width:clamp(190px,15vw,235px);
    min-height:110px;
    padding:1rem 1.2rem;
    gap:.7rem;
    flex:0 0 auto;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(21,19,27,.12);
    box-shadow:none;
}
html[dir=rtl] .clients-showcase .client-logo-card{
    direction:rtl;
}
html[dir=ltr] .clients-showcase .client-logo-card{
    direction:ltr;
}
.clients-showcase .client-logo-media{
    width:100%;
    height:46px;
    display:grid;
    place-items:center;
}
.clients-showcase .client-logo-card img{
    max-width:142px;
    max-height:46px;
    width:auto;
    height:auto;
    object-fit:contain;
}
.clients-showcase .client-logo-card strong{
    max-width:20ch;
    font-size:.84rem;
    line-height:1.45;
}
.clients-showcase .client-logo-card:hover{
    transform:translateY(-2px);
}
.clients-showcase .client-marquee:hover .client-marquee-track{
    animation-play-state:paused;
}
@keyframes rosco-client-marquee-ltr{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-50%,0,0)}
}
@keyframes rosco-client-marquee-rtl{
    from{transform:translate3d(-50%,0,0)}
    to{transform:translate3d(0,0,0)}
}

/* Client detail */
.page-hero.client-detail-hero{
    min-height:clamp(430px,46vw,570px);
    padding-top:calc(var(--header-h) + clamp(4rem,7vw,6.5rem));
    padding-bottom:clamp(3rem,5vw,4.8rem);
    align-items:flex-end;
}
.client-detail-hero .container{
    width:100%;
}
.client-hero-copy{
    width:min(820px,100%);
    margin-inline-end:auto;
    display:grid;
    justify-items:start;
    gap:1rem;
    text-align:start;
}
.client-detail-hero h1{
    max-width:18ch;
    font-size:clamp(2.5rem,4.8vw,4.8rem);
}
.client-detail-hero p{
    max-width:62ch;
}
.client-hero-logo{
    min-width:120px;
    max-width:190px;
    min-height:70px;
    padding:.8rem 1rem;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.26);
    box-shadow:0 14px 34px rgba(0,0,0,.14);
}
.client-hero-logo img{
    max-width:150px;
    max-height:54px;
    width:auto;
    height:auto;
    object-fit:contain;
}
.client-detail-section{
    padding-top:clamp(4rem,6vw,6rem);
}
.client-detail-main{
    gap:clamp(2.5rem,5vw,4rem);
}

/* Homepage Media Center */
.home-media-heading{
    margin-bottom:clamp(1.8rem,3vw,2.6rem);
}
.home-media-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.35rem;
}
.home-media-card{
    min-width:0;
    background:var(--white);
    border:1px solid var(--line);
    overflow:hidden;
    transition:
        transform var(--motion-fast),
        box-shadow var(--motion-fast);
}
.home-media-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-soft);
}
.home-media-card-link{
    display:grid;
    grid-template-rows:auto 1fr;
    height:100%;
    color:inherit;
}
.home-media-visual{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:var(--rosco-violet-deep);
}
.home-media-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform var(--motion-normal);
}
.home-media-card:hover .home-media-visual img{
    transform:scale(1.035);
}
.media-visual-placeholder{
    position:absolute;
    inset:0;
    display:grid;
    place-content:center;
    gap:.15rem;
    text-align:center;
    color:var(--white);
    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(204,159,71,.28),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            var(--rosco-violet-deep),
            var(--rosco-violet)
        );
}
.media-visual-placeholder::before,
.media-visual-placeholder::after{
    content:"";
    position:absolute;
    border:1px solid rgba(255,255,255,.10);
    transform:rotate(45deg);
}
.media-visual-placeholder::before{
    width:150px;
    height:150px;
    inset-inline-end:-55px;
    top:-65px;
}
.media-visual-placeholder::after{
    width:90px;
    height:90px;
    inset-inline-start:-35px;
    bottom:-45px;
}
.media-visual-placeholder span{
    font-family:var(--font-en);
    font-size:.72rem;
    letter-spacing:.18em;
    opacity:.72;
}
.media-visual-placeholder strong{
    font-family:var(--font-en);
    font-size:clamp(1.3rem,2.6vw,2rem);
    letter-spacing:.08em;
}
.home-media-body{
    padding:1.35rem 1.45rem 1.5rem;
    display:flex;
    flex-direction:column;
    gap:.8rem;
}
.home-media-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.55rem .9rem;
    font-size:.7rem;
    color:var(--concrete);
}
.home-media-meta span{
    color:var(--rosco-gold-dark);
    font-weight:700;
}
.home-media-body h3{
    font-size:clamp(1.15rem,1.8vw,1.45rem);
    line-height:1.45;
}
.home-media-body p{
    color:var(--concrete);
    font-size:.88rem;
}
.home-media-cta{
    margin-top:auto;
    padding-top:.35rem;
    color:var(--rosco-violet);
    font-size:.8rem;
}

/* Media listing */
.media-card-visual{
    position:relative;
}
.media-card-visual .media-visual-placeholder{
    position:absolute;
    inset:0;
}

/* Article hero */
.page-hero.media-article-hero{
    min-height:clamp(430px,44vw,570px);
    padding-top:calc(var(--header-h) + clamp(4rem,7vw,6.5rem));
    padding-bottom:clamp(3.2rem,5vw,4.8rem);
    align-items:flex-end;
}
.page-hero.media-article-hero .container{
    width:100%;
    max-width:var(--container);
}
.media-article-hero-copy{
    width:min(880px,100%);
    margin-inline-end:auto;
    display:grid;
    justify-items:start;
    gap:1rem;
    text-align:start;
}
.media-article-hero .media-article-meta{
    margin:0;
    justify-content:flex-start;
    text-align:start;
}
.media-article-hero h1{
    max-width:22ch;
    font-size:clamp(2.15rem,3.8vw,3.8rem);
    line-height:1.14;
    text-align:start;
}
.media-article-hero p{
    max-width:68ch;
    text-align:start;
}
.page-hero.media-article-hero.has-hero-media::after{
    z-index:2;
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(204,159,71,.18),
            transparent 28%
        );
}
html[dir=rtl] .media-article-hero-copy,
html[dir=rtl] .media-article-hero h1,
html[dir=rtl] .media-article-hero p{
    direction:rtl;
    text-align:right;
}
html[dir=ltr] .media-article-hero-copy,
html[dir=ltr] .media-article-hero h1,
html[dir=ltr] .media-article-hero p{
    direction:ltr;
    text-align:left;
}

/* Corporate CMS pages are no longer rendered as legal pages */
.page-hero.corporate-hero{
    min-height:clamp(420px,44vw,560px);
    padding-top:calc(var(--header-h) + clamp(4rem,7vw,6.5rem));
    padding-bottom:clamp(3.2rem,5vw,4.8rem);
}
.corporate-hero .container{
    width:100%;
}
.corporate-hero-copy{
    width:min(850px,100%);
    margin-inline-end:auto;
    display:grid;
    justify-items:start;
    gap:1rem;
    text-align:start;
}
.corporate-hero h1{
    max-width:18ch;
    font-size:clamp(2.5rem,4.7vw,4.6rem);
}
.corporate-hero p{
    max-width:64ch;
}
.corporate-page-section{
    padding-top:clamp(4rem,6vw,6rem);
}
.corporate-page-wrap{
    display:block;
}
.corporate-prose{
    width:min(1050px,100%);
    margin-inline-end:auto;
    display:grid;
    gap:1.15rem;
    font-size:clamp(1rem,1.2vw,1.08rem);
    line-height:1.95;
}
.corporate-prose h2{
    margin-top:1.5rem;
    font-size:clamp(1.55rem,2.6vw,2.15rem);
}
.corporate-prose h3{
    margin-top:1rem;
    font-size:clamp(1.2rem,2vw,1.55rem);
}
html[dir=rtl] .corporate-hero-copy,
html[dir=rtl] .corporate-prose{
    direction:rtl;
    text-align:right;
}
html[dir=ltr] .corporate-hero-copy,
html[dir=ltr] .corporate-prose{
    direction:ltr;
    text-align:left;
}

@media(max-width:900px){
    .home-media-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .client-detail-hero h1,
    .corporate-hero h1{
        font-size:clamp(2.2rem,8vw,3.8rem);
    }
}

@media(max-width:620px){
    .clients-showcase{
        padding-block:3.4rem;
    }
    .clients-showcase .client-logo-card{
        width:175px;
        min-height:102px;
    }
    .home-media-grid{
        grid-template-columns:1fr;
    }
    .page-hero.media-article-hero,
    .page-hero.corporate-hero,
    .page-hero.client-detail-hero{
        min-height:440px;
    }
    .media-article-hero h1{
        font-size:clamp(2rem,9vw,3rem);
    }
}

@media(prefers-reduced-motion:reduce){
    .clients-showcase .client-marquee{
        overflow-x:auto;
        scrollbar-width:thin;
    }
    .clients-showcase .client-marquee-track{
        animation:none!important;
        transform:none!important;
    }
    .clients-showcase .client-marquee-group[aria-hidden=true]{
        display:none;
    }
}

/* ROSCO VISUAL CORRECTION V2 END */

/* ROSCO VISUAL ALIGNMENT V3 */

/* -------------------------------------------------------------------------
   CLIENTS — stable from first paint; JS owns movement.
   ------------------------------------------------------------------------- */
.clients-showcase{
    padding-top:clamp(3.5rem,5vw,5rem);
    padding-bottom:clamp(2rem,3vw,3rem);
    min-height:0;
}
.clients-showcase .clients-heading{
    margin-bottom:clamp(1.5rem,2.5vw,2rem);
}
.clients-showcase .client-marquee{
    width:100%;
    overflow:hidden;
    direction:ltr;
}
.clients-showcase .client-marquee-track,
html[dir=rtl] .clients-showcase .client-marquee-track,
html[dir=ltr] .clients-showcase .client-marquee-track{
    display:flex;
    width:max-content;
    direction:ltr;
    animation:none!important;
    animation-direction:normal!important;
    animation-play-state:paused!important;
    transform:translate3d(0,0,0);
    will-change:transform;
}
.clients-showcase .client-marquee-group{
    flex:0 0 auto;
    display:flex;
    align-items:stretch;
    gap:.75rem;
    padding-inline-end:.75rem;
    direction:ltr;
}
.clients-showcase .client-logo-card{
    flex:0 0 clamp(188px,14vw,224px);
    width:clamp(188px,14vw,224px);
    min-height:104px;
    padding:.95rem 1.1rem;
    gap:.6rem;
    border:1px solid rgba(21,19,27,.12);
    border-top:2px solid rgba(204,159,71,.34);
    background:#fff;
    box-shadow:0 6px 18px rgba(17,14,39,.025);
    transition:
        transform var(--motion-fast),
        border-color var(--motion-fast),
        box-shadow var(--motion-fast);
}
.clients-showcase .client-logo-card:hover{
    transform:translateY(-3px);
    border-top-color:var(--rosco-gold);
    box-shadow:0 14px 34px rgba(17,14,39,.08);
}
.clients-showcase .client-logo-media{
    height:42px;
}
.clients-showcase .client-logo-card img{
    max-width:136px;
    max-height:42px;
}
.clients-showcase .client-logo-card strong{
    max-width:22ch;
    font-size:.82rem;
    line-height:1.4;
    text-align:center;
}
html[dir=rtl] .clients-showcase .client-logo-card{
    direction:rtl;
}
html[dir=ltr] .clients-showcase .client-logo-card{
    direction:ltr;
}

/* -------------------------------------------------------------------------
   HERO STANDARD — project listing page is the visual reference.
   Corporate pages, client detail and Media article use the exact same
   geometry, typography and horizontal alignment as .page-hero.
   ------------------------------------------------------------------------- */
.page-hero.corporate-hero,
.page-hero.client-detail-hero,
.page-hero.media-article-hero{
    min-height:clamp(420px,56vw,680px);
    padding:
        calc(var(--header-h) + clamp(5rem,10vw,10rem))
        0
        clamp(4rem,7vw,7rem);
    display:flex;
    align-items:flex-end;
}

/* Override the smaller image-Hero rule from MEDIA HERO V2. */
.page-hero.corporate-hero.has-hero-media,
.page-hero.client-detail-hero.has-hero-media,
.page-hero.media-article-hero.has-hero-media{
    min-height:clamp(420px,56vw,680px);
    padding:
        calc(var(--header-h) + clamp(5rem,10vw,10rem))
        0
        clamp(4rem,7vw,7rem);
}

.page-hero.corporate-hero .container,
.page-hero.client-detail-hero .container,
.page-hero.media-article-hero .container{
    width:100%;
    display:grid;
    gap:1.4rem;
}

/*
 * Wrappers remain for semantic grouping, but no longer create their own
 * independent hero layout.
 */
.corporate-hero-copy,
.client-hero-copy,
.media-article-hero-copy{
    width:100%;
    max-width:none;
    margin:0;
    display:grid;
    gap:1.4rem;
    align-items:start;
}

/* Exact title/description sizing used by the normal page hero. */
.page-hero.corporate-hero h1,
.page-hero.client-detail-hero h1,
.page-hero.media-article-hero h1{
    font-size:var(--text-display-lg);
    max-width:16ch;
    line-height:inherit;
}
.page-hero.corporate-hero p,
.page-hero.client-detail-hero p,
.page-hero.media-article-hero p{
    font-size:var(--text-body-lg);
    max-width:62ch;
    color:rgba(255,255,255,.76);
}

/* Arabic: every hero element locks to the right edge of the container. */
html[dir=rtl] .corporate-hero-copy,
html[dir=rtl] .client-hero-copy,
html[dir=rtl] .media-article-hero-copy{
    direction:rtl;
    text-align:right;
}
html[dir=rtl] .corporate-hero-copy > *,
html[dir=rtl] .client-hero-copy > *,
html[dir=rtl] .media-article-hero-copy > *{
    justify-self:end;
}
html[dir=rtl] .corporate-hero-copy h1,
html[dir=rtl] .corporate-hero-copy p,
html[dir=rtl] .client-hero-copy h1,
html[dir=rtl] .client-hero-copy p,
html[dir=rtl] .media-article-hero-copy h1,
html[dir=rtl] .media-article-hero-copy p{
    text-align:right;
}

/* English: same geometry, mirrored naturally to the left. */
html[dir=ltr] .corporate-hero-copy,
html[dir=ltr] .client-hero-copy,
html[dir=ltr] .media-article-hero-copy{
    direction:ltr;
    text-align:left;
}
html[dir=ltr] .corporate-hero-copy > *,
html[dir=ltr] .client-hero-copy > *,
html[dir=ltr] .media-article-hero-copy > *{
    justify-self:start;
}
html[dir=ltr] .corporate-hero-copy h1,
html[dir=ltr] .corporate-hero-copy p,
html[dir=ltr] .client-hero-copy h1,
html[dir=ltr] .client-hero-copy p,
html[dir=ltr] .media-article-hero-copy h1,
html[dir=ltr] .media-article-hero-copy p{
    text-align:left;
}

/* Media metadata follows the same side as the hero copy. */
.media-article-hero .media-article-meta{
    width:auto;
    margin:0;
}
html[dir=rtl] .media-article-hero .media-article-meta{
    justify-content:flex-end;
    text-align:right;
}
html[dir=ltr] .media-article-hero .media-article-meta{
    justify-content:flex-start;
    text-align:left;
}

/* Client logo, when it is a real logo, stays inside the text column. */
.client-hero-logo{
    justify-self:inherit;
    margin:0;
}

/* Corporate body follows the same container rhythm as other content pages. */
.corporate-page-section{
    padding-top:clamp(4rem,6vw,6rem);
}
.corporate-prose{
    width:min(980px,100%);
    max-width:none;
    margin:0;
}
html[dir=rtl] .corporate-prose{
    margin-left:auto;
    margin-right:0;
}
html[dir=ltr] .corporate-prose{
    margin-left:0;
    margin-right:auto;
}

/* Mobile keeps the same hierarchy without oversized headings. */
@media(max-width:720px){
    .page-hero.corporate-hero,
    .page-hero.client-detail-hero,
    .page-hero.media-article-hero,
    .page-hero.corporate-hero.has-hero-media,
    .page-hero.client-detail-hero.has-hero-media,
    .page-hero.media-article-hero.has-hero-media{
        min-height:500px;
        padding-top:calc(var(--header-h) + 5rem);
        padding-bottom:3.5rem;
    }

    .clients-showcase{
        padding-top:3.2rem;
        padding-bottom:2.2rem;
    }

    .clients-showcase .client-logo-card{
        flex-basis:174px;
        width:174px;
        min-height:98px;
    }
}

/* ROSCO VISUAL ALIGNMENT V3 END */

/* ROSCO HERO REFERENCE V4 */

/*
 * These pages intentionally use the exact base .page-hero geometry.
 * No custom width/position wrappers are allowed.
 */
.page-hero.corporate-reference-hero,
.page-hero.client-reference-hero,
.page-hero.media-reference-hero,
.page-hero.about-reference-hero{
    padding:
        calc(var(--header-h) + clamp(5rem,10vw,10rem))
        0
        clamp(4rem,7vw,7rem);
    min-height:clamp(420px,56vw,680px);
    display:flex;
    align-items:flex-end;
}

.page-hero.corporate-reference-hero .container,
.page-hero.client-reference-hero .container,
.page-hero.media-reference-hero .container,
.page-hero.about-reference-hero .container{
    width:100%;
    max-width:var(--container);
    display:grid;
    gap:1.4rem;
    position:relative;
    z-index:3;
}

/*
 * Match Projects typography exactly.
 */
.page-hero.corporate-reference-hero h1,
.page-hero.client-reference-hero h1,
.page-hero.media-reference-hero h1,
.page-hero.about-reference-hero h1{
    font-size:var(--text-display-lg);
    max-width:16ch;
}

.page-hero.corporate-reference-hero p,
.page-hero.client-reference-hero p,
.page-hero.media-reference-hero p,
.page-hero.about-reference-hero p{
    font-size:var(--text-body-lg);
    color:rgba(255,255,255,.76);
    max-width:62ch;
}

/*
 * Explicit text direction only. No justify-self/start/end; that was the RTL bug.
 */
html[dir=rtl] .page-hero.corporate-reference-hero .container,
html[dir=rtl] .page-hero.client-reference-hero .container,
html[dir=rtl] .page-hero.media-reference-hero .container,
html[dir=rtl] .page-hero.about-reference-hero .container{
    direction:rtl;
    text-align:right;
}

html[dir=ltr] .page-hero.corporate-reference-hero .container,
html[dir=ltr] .page-hero.client-reference-hero .container,
html[dir=ltr] .page-hero.media-reference-hero .container,
html[dir=ltr] .page-hero.about-reference-hero .container{
    direction:ltr;
    text-align:left;
}

/*
 * Client identity treatment.
 * Hero image stays full bleed; content area receives a directional cinematic
 * overlay that preserves the photograph on the opposite side.
 */
.page-hero.client-reference-hero.has-hero-media::before{
    background:
        linear-gradient(
            90deg,
            rgba(13,10,31,.42) 0%,
            rgba(23,17,57,.54) 44%,
            rgba(19,14,47,.86) 100%
        ),
        linear-gradient(
            0deg,
            rgba(10,8,24,.58) 0%,
            transparent 55%
        );
}

html[dir=ltr] .page-hero.client-reference-hero.has-hero-media::before{
    background:
        linear-gradient(
            90deg,
            rgba(19,14,47,.86) 0%,
            rgba(23,17,57,.54) 56%,
            rgba(13,10,31,.42) 100%
        ),
        linear-gradient(
            0deg,
            rgba(10,8,24,.58) 0%,
            transparent 55%
        );
}

.page-hero.client-reference-hero .page-hero-image{
    object-position:center center;
    transform:scale(1.005);
    filter:
        saturate(1)
        contrast(1.05)
        brightness(.88);
}

.client-reference-logo{
    width:clamp(190px,18vw,280px);
    min-height:clamp(100px,10vw,140px);
    padding:1.25rem 1.5rem;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(255,255,255,.30);
    border-bottom:3px solid var(--rosco-gold);
    box-shadow:
        0 18px 50px rgba(5,4,15,.22);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.client-reference-logo img{
    max-width:220px;
    max-height:92px;
    width:auto;
    height:auto;
    object-fit:contain;
}

/*
 * Corporate content: wide enough to feel intentional, but still readable.
 */
.corporate-reference-section{
    padding-top:clamp(4rem,6vw,6rem);
}

.corporate-reference-prose{
    width:min(1000px,100%);
    font-size:clamp(1rem,1.15vw,1.08rem);
    line-height:1.95;
}

.corporate-reference-prose > * + *{
    margin-top:1.15rem;
}

.corporate-reference-prose h2{
    margin-top:2rem;
    font-size:clamp(1.55rem,2.6vw,2.15rem);
}

.corporate-reference-prose h3{
    margin-top:1.5rem;
    font-size:clamp(1.22rem,2vw,1.58rem);
}

html[dir=rtl] .corporate-reference-prose{
    margin-left:auto;
    margin-right:0;
    text-align:right;
}

html[dir=ltr] .corporate-reference-prose{
    margin-left:0;
    margin-right:auto;
    text-align:left;
}

/*
 * Media article no longer inherits the old 1000px Hero container cap.
 */
.media-reference-hero .container{
    max-width:var(--container)!important;
}

/*
 * Neutralize V2/V3 wrapper-specific layout when old selectors still exist
 * elsewhere in the stylesheet.
 */
.corporate-reference-hero .corporate-hero-copy,
.client-reference-hero .client-hero-copy,
.media-reference-hero .media-article-hero-copy{
    display:contents!important;
}

/* Mobile follows the existing page Hero system. */
@media(max-width:720px){
    .page-hero.corporate-reference-hero,
    .page-hero.client-reference-hero,
    .page-hero.media-reference-hero,
    .page-hero.about-reference-hero{
        min-height:500px;
    }

    .client-reference-logo{
        width:180px;
        min-height:92px;
        padding:1rem;
    }

    .client-reference-logo img{
        max-width:145px;
        max-height:62px;
    }
}

/* ROSCO HERO REFERENCE V4 END */

/* ROSCO HERO SAFE MARGIN V6
   Scope ONLY:
   - Quality & HSE
   - Capabilities
   - Sustainability
   - Media article detail
   - Client detail
*/

.page-hero.corporate-reference-hero > .container,
.page-hero.media-reference-hero > .container,
.page-hero.client-reference-hero > .container{
    box-sizing:border-box;
    padding-inline:
        clamp(3rem,5vw,5.5rem);
}

/*
 * Keep the requested safe edge spacing symmetrical:
 * RTL -> visible space on the right.
 * LTR -> visible space on the left.
 * No changes to hero height, typography, image, or global page-hero rules.
 */
@media(max-width:900px){
    .page-hero.corporate-reference-hero > .container,
    .page-hero.media-reference-hero > .container,
    .page-hero.client-reference-hero > .container{
        padding-inline:
            clamp(1.5rem,4vw,2.5rem);
    }
}

@media(max-width:620px){
    .page-hero.corporate-reference-hero > .container,
    .page-hero.media-reference-hero > .container,
    .page-hero.client-reference-hero > .container{
        padding-inline:1.25rem;
    }
}

/* ROSCO HERO SAFE MARGIN V6 END */

/* ROSCO CONTACT MAP FULLHEIGHT V2
   Scope: Contact page map only.
*/

.contact-map-shell{
    position:relative;
    overflow:hidden;
}

.contact-map-canvas,
.contact-map-canvas.is-visible{
    position:relative;
    width:100%;
    height:clamp(420px,48vw,620px);
    min-height:0;
    overflow:hidden;
    background:var(--rosco-violet-deep);
}

.contact-map-canvas iframe,
.contact-map-canvas.is-visible iframe{
    position:absolute;
    inset:0;
    display:block;
    width:100%!important;
    height:100%!important;
    min-width:100%;
    min-height:100%;
    border:0;
}

/*
 * The information badge remains above the map instead of affecting
 * the map canvas height.
 */
.contact-map-badge{
    position:absolute;
    z-index:3;
    inset-inline-end:clamp(1rem,2vw,1.6rem);
    bottom:clamp(1rem,2vw,1.6rem);
}

/* Tablet */
@media(max-width:900px){
    .contact-map-canvas,
    .contact-map-canvas.is-visible{
        height:500px;
    }
}

/* Mobile */
@media(max-width:620px){
    .contact-map-canvas,
    .contact-map-canvas.is-visible{
        height:420px;
    }

    .contact-map-badge{
        position:relative;
        inset:auto;
    }
}

/* ROSCO CONTACT MAP FULLHEIGHT V2 END */

/* ROSCO MOBILE FIX V1 */

/* -------------------------------------------------------------------------
   Mobile navigation drawer
   ------------------------------------------------------------------------- */
@media(max-width:1180px){

    .mobile-drawer{
        position:fixed;

        top:var(--header-h);
        right:0;
        bottom:0;
        left:0;

        width:100%;
        height:auto;
        max-height:
            calc(
                100dvh - var(--header-h)
            );

        overflow-x:hidden;
        overflow-y:auto;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;

        padding:
            1rem
            1.5rem
            calc(
                2rem
                + env(safe-area-inset-bottom)
            );

        background:
            var(--surface-dark);

        border-top:
            1px solid
            rgba(255,255,255,.12);
    }

    .mobile-drawer[hidden]{
        display:none!important;
    }

    .mobile-drawer nav{
        display:grid;
        width:100%;
        min-width:0;
        padding-bottom:.5rem;
    }

    .mobile-drawer a{
        width:100%;
        min-width:0;
        padding:
            .9rem
            .25rem;

        overflow-wrap:anywhere;
    }

    body.mobile-menu-open{
        overflow:hidden!important;
        touch-action:none;
    }

}

/* -------------------------------------------------------------------------
   Contact page mobile containment
   Fixes content being wider than the viewport.
   ------------------------------------------------------------------------- */
@media(max-width:900px){

    .form-layout{
        width:100%;
        max-width:100%;
        min-width:0!important;

        grid-template-columns:
            minmax(0,1fr)!important;
    }

    .form-layout > *,
    .form-card,
    .form-card form,
    .form-card label,
    .form-aside,
    .contact-details,
    .branch-list{
        width:100%;
        max-width:100%;
        min-width:0!important;
    }

    .form-card form{
        overflow:visible;
    }

    .form-card input,
    .form-card textarea,
    .form-card select,
    .form-card button{
        min-width:0!important;
        max-width:100%!important;
    }

    .form-card input,
    .form-card textarea,
    .form-card select{
        width:100%!important;
    }

    .contact-details > a,
    .contact-details > div,
    .branch-list > div{
        min-width:0;
        max-width:100%;
    }

    .contact-details strong,
    .branch-list strong,
    .branch-list span{
        min-width:0;
        max-width:100%;

        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .contact-map-section,
    .contact-map-section > .container,
    .contact-map-heading,
    .contact-map-heading > div,
    .contact-map-shell,
    .contact-map-canvas{
        min-width:0!important;
        max-width:100%!important;
    }

    .contact-map-section > .container,
    .contact-map-shell,
    .contact-map-canvas{
        width:100%;
    }

    .contact-map-heading{
        flex-direction:column;
        align-items:stretch;
        gap:1rem;
    }

    .contact-map-heading > div{
        width:100%;
    }

    .contact-map-heading .btn{
        width:100%;
        max-width:100%;
        align-self:stretch;
    }

}

/* Narrow phones */
@media(max-width:640px){

    .form-layout{
        gap:1.75rem!important;
    }

    .form-card{
        padding:1rem!important;
        overflow:hidden;
    }

    .form-card form{
        grid-template-columns:
            minmax(0,1fr)!important;
    }

    .form-card label,
    .form-card button{
        grid-column:1!important;
    }

    .contact-map-heading h2{
        max-width:100%;
    }

    .contact-map-shell,
    .contact-map-canvas{
        width:100%;
        max-width:100%;
    }

}

/* ROSCO MOBILE FIX V1 END */

/* ROSCO AI V2 LINKS */
.chat-richtext a{
    color:var(--rosco-violet);
    font-weight:700;
    text-decoration:underline;
    text-decoration-color:rgba(57,45,128,.35);
    text-underline-offset:.18em;
    overflow-wrap:anywhere;
}

.chat-richtext a:hover{
    text-decoration-color:currentColor;
}

.chat-richtext a[target="_blank"]::after{
    content:"↗";
    display:inline-block;
    margin-inline-start:.28em;
    font-size:.78em;
}
/* ROSCO AI V2 LINKS END */

/* =========================================================
   ROSCO SIGNATURE EXPERIENCE V2
   FROM GROUND TO LANDMARK
   ========================================================= */

.signature-section{
    position:relative;
    height:330vh;
    background:#0e0b20;
    color:#fff;
}

.signature-section.signature-fallback{
    height:260vh;
}

.signature-sticky{
    position:sticky;
    top:0;
    height:100vh;
    min-height:640px;
    overflow:hidden;
    display:flex;
    align-items:stretch;
    isolation:isolate;
    background:
        radial-gradient(
            circle at 50% 44%,
            rgba(57,45,128,.3),
            transparent 58%
        ),
        #0e0b20;
}

.signature-media{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
}

.signature-layer{
    position:absolute;
    inset:0;
    margin:0;
    overflow:hidden;
    transform-origin:center center;
    will-change:
        transform,
        clip-path,
        filter;
}

.signature-layer-before{
    z-index:1;
}

.signature-layer-during{
    z-index:2;
}

.signature-layer-after{
    z-index:3;
}

.signature-layer img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}

.signature-image-vignette{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(8,6,20,.62) 0%,
            rgba(8,6,20,.08) 34%,
            rgba(8,6,20,.10) 58%,
            rgba(8,6,20,.82) 100%
        ),
        linear-gradient(
            90deg,
            rgba(10,7,27,.44),
            transparent 34%,
            transparent 66%,
            rgba(10,7,27,.30)
        );
}

.signature-bg{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    background:
        radial-gradient(
            circle at center,
            rgba(57,45,128,.22),
            transparent 62%
        );
}

.signature-section.has-signature-sequence
.signature-bg{
    background:none;
}

.signature-section
.blueprint{
    position:absolute;
    inset:7%;
    border:
        1px solid
        rgba(218,174,83,.22);
    background-image:
        linear-gradient(
            rgba(218,174,83,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(218,174,83,.12) 1px,
            transparent 1px
        );
    background-size:48px 48px;
    clip-path:inset(0 100% 0 0);
    opacity:.84;
    will-change:
        opacity,
        clip-path;
}

.signature-section
.structure-lines{
    position:absolute;
    left:50%;
    top:50%;
    width:min(64vw,920px);
    height:min(58vh,590px);
    transform:
        translate(-50%,-50%);
    border:
        1px solid
        rgba(255,255,255,.13);
    clip-path:
        polygon(
            0 100%,
            10% 62%,
            25% 62%,
            38% 25%,
            55% 25%,
            70% 48%,
            85% 48%,
            100% 0,
            100% 100%
        );
    background:
        linear-gradient(
            to top,
            rgba(218,174,83,.30),
            rgba(57,45,128,.05) 62%,
            transparent
        );
    box-shadow:
        inset 0 0 80px
        rgba(218,174,83,.04);
    will-change:
        opacity,
        transform;
}

.signature-scan-line{
    position:absolute;
    left:5%;
    right:5%;
    top:50%;
    height:1px;
    opacity:0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(236,196,105,.9) 20%,
            #fff1c3 50%,
            rgba(236,196,105,.9) 80%,
            transparent
        );
    box-shadow:
        0 0 30px
        rgba(218,174,83,.35);
    will-change:
        transform,
        opacity;
}

.signature-copy{
    position:relative;
    z-index:7;
    width:100%;
    min-height:100%;
    padding-top:
        clamp(7.5rem,12vh,10rem);
    padding-bottom:
        clamp(2rem,5vh,4rem);
    display:grid;
    align-content:space-between;
    justify-items:start;
    gap:2rem;
    pointer-events:none;
}

.signature-copy-inner{
    width:min(760px,100%);
    display:grid;
    justify-items:start;
    gap:1rem;
    text-align:start;
    padding:
        clamp(1.2rem,2.3vw,2rem)
        clamp(1.3rem,2.8vw,2.4rem);
    background:
        linear-gradient(
            120deg,
            rgba(13,10,32,.78),
            rgba(13,10,32,.42) 72%,
            transparent
        );
    border-inline-start:
        2px solid
        rgba(218,174,83,.82);
    backdrop-filter:
        blur(8px);
    -webkit-backdrop-filter:
        blur(8px);
}

.signature-copy .eyebrow{
    color:var(--rosco-gold-light);
}

.signature-copy h2{
    margin:0;
    max-width:16ch;
    font-family:var(--font-en);
    font-size:
        clamp(2.7rem,6vw,6.2rem);
    line-height:.96;
    letter-spacing:-.055em;
    text-wrap:balance;
}

html[dir=rtl]
.signature-copy h2{
    font-family:var(--font-ar);
    letter-spacing:0;
    line-height:1.16;
}

.signature-copy p{
    max-width:62ch;
    color:
        rgba(255,255,255,.76);
    font-size:
        clamp(.95rem,1.25vw,1.08rem);
    line-height:1.85;
}

.signature-project-meta{
    margin-top:.35rem;
    display:grid;
    gap:.25rem;
}

.signature-project-meta span{
    color:
        var(--rosco-gold-light);
    font-family:var(--font-en);
    font-size:.65rem;
    letter-spacing:.14em;
}

.signature-project-meta strong{
    max-width:54ch;
    font-size:
        clamp(.95rem,1.3vw,1.1rem);
    line-height:1.55;
}

.signature-project-link{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    width:max-content;
    margin-top:.4rem;
    padding:.7rem 0;
    color:#fff;
    border-bottom:
        1px solid
        rgba(218,174,83,.7);
    font-size:.82rem;
    font-weight:700;
}

.signature-project-link span{
    color:
        var(--rosco-gold-light);
}

.signature-control{
    width:100%;
    display:grid;
    gap:.85rem;
    align-self:end;
}

.signature-progress{
    width:100%;
    height:2px;
    overflow:hidden;
    background:
        rgba(255,255,255,.16);
}

.signature-progress i{
    display:block;
    width:100%;
    height:100%;
    transform:scaleX(0);
    transform-origin:left center;
    background:
        linear-gradient(
            90deg,
            var(--rosco-gold),
            #f3d38b
        );
    will-change:transform;
}

html[dir=rtl]
.signature-progress i{
    transform-origin:right center;
}

.signature-stages{
    width:100%;
    display:grid;
    grid-template-columns:
        repeat(5,minmax(0,1fr));
    gap:1px;
    margin:0;
    background:
        rgba(255,255,255,.12);
    pointer-events:none;
}

.signature-stages span{
    min-height:48px;
    padding:.78rem .85rem;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:rgba(255,255,255,.52);
    background:
        rgba(16,12,39,.78);
    opacity:1;
    font-family:var(--font-en);
    font-size:.61rem;
    letter-spacing:.09em;
    transition:
        color .25s ease,
        background .25s ease;
}

html[dir=rtl]
.signature-stages span{
    font-family:var(--font-ar);
    letter-spacing:0;
}

.signature-stages
span.is-active{
    color:#fff0c1;
    background:
        rgba(57,45,128,.78);
}

@media(max-width:900px){

    .signature-section{
        height:300vh;
    }

    .signature-sticky{
        min-height:580px;
    }

    .signature-copy{
        padding-top:
            clamp(6.8rem,12vh,8rem);
    }

    .signature-copy-inner{
        width:min(650px,94%);
    }

    .signature-copy h2{
        font-size:
            clamp(2.3rem,9vw,4.7rem);
    }

    .signature-section
    .blueprint{
        inset:9% 4%;
        background-size:
            38px 38px;
    }

    .signature-section
    .structure-lines{
        width:84vw;
        height:48vh;
    }
}

@media(max-width:620px){

    .signature-section{
        height:270vh;
    }

    .signature-sticky{
        min-height:560px;
    }

    .signature-copy{
        padding-top:6.8rem;
        padding-bottom:1.25rem;
    }

    .signature-copy-inner{
        width:100%;
        padding:1.05rem 1rem;
        backdrop-filter:
            blur(6px);
        -webkit-backdrop-filter:
            blur(6px);
    }

    .signature-copy h2{
        font-size:
            clamp(2.15rem,11vw,3.4rem);
    }

    .signature-copy p{
        font-size:.91rem;
        line-height:1.7;
    }

    .signature-stages span{
        min-height:42px;
        padding:.6rem .3rem;
        font-size:.52rem;
    }

    .signature-project-meta{
        display:none;
    }

    .signature-image-vignette{
        background:
            linear-gradient(
                180deg,
                rgba(8,6,20,.70) 0%,
                rgba(8,6,20,.10) 30%,
                rgba(8,6,20,.18) 56%,
                rgba(8,6,20,.90) 100%
            );
    }
}

@media(prefers-reduced-motion:reduce){

    .signature-section,
    .signature-section.signature-fallback{
        height:auto!important;
        min-height:88vh;
    }

    .signature-sticky{
        position:relative;
        min-height:88vh;
        height:auto;
    }

    .signature-layer-before,
    .signature-layer-during{
        display:none;
    }

    .signature-layer-after{
        opacity:1!important;
        transform:none!important;
        clip-path:inset(0)!important;
        filter:none!important;
    }

    .signature-section
    .blueprint,
    .signature-section
    .structure-lines,
    .signature-scan-line{
        animation:none!important;
        transition:none!important;
        transform:none;
    }

    .signature-progress i{
        transform:scaleX(1)!important;
    }
}

/* ROSCO SIGNATURE EXPERIENCE V2 END */

/* ROSCO SIGNATURE EXPERIENCE V4 */
.signature-section.signature-v4{
    position:relative;
    height:410vh;
    min-height:410vh;
    padding:0;
    margin:0;
    background:#0c091d;
    color:#fff;
    overflow:visible;
}

.signature-v4-sticky{
    position:sticky;
    top:0;
    z-index:1;
    height:100vh;
    height:100svh;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 44%,rgba(57,45,128,.25),transparent 54%),
        #0c091d;
}

.signature-v4-shell{
    width:min(94vw,1560px);
    height:calc(100svh - 106px);
    min-height:560px;
    max-height:940px;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:clamp(12px,1.8vh,20px);
    padding-top:clamp(82px,9vh,106px);
    padding-bottom:clamp(16px,2vh,24px);
    box-sizing:border-box;
}

.signature-v4-heading{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
    align-items:end;
    gap:clamp(24px,5vw,80px);
}

.signature-v4-heading .eyebrow{
    display:block;
    margin-bottom:.35rem;
    color:var(--rosco-gold-light);
    font-size:.68rem;
    letter-spacing:.13em;
}

.signature-v4-heading h2{
    margin:0;
    color:#fff;
    font-family:var(--font-en);
    font-size:clamp(2rem,4.2vw,4.8rem);
    line-height:.95;
    letter-spacing:-.055em;
}

html[dir=rtl] .signature-v4-heading h2{
    font-family:var(--font-ar);
    letter-spacing:0;
    line-height:1.1;
}

.signature-v4-heading p{
    margin:0;
    max-width:58ch;
    color:rgba(255,255,255,.62);
    font-size:clamp(.84rem,1.05vw,.98rem);
    line-height:1.75;
}

.signature-v4-canvas{
    position:relative;
    width:100%;
    min-height:0;
    border-radius:clamp(18px,2vw,30px);
    overflow:hidden;
    isolation:isolate;
    background:#17122f;
    box-shadow:
        0 30px 90px rgba(0,0,0,.30),
        0 0 0 1px rgba(255,255,255,.08);
}

.signature-v4-media,
.signature-v4-layer,
.signature-v4-layer picture{
    position:absolute;
    inset:0;
    margin:0;
    width:100%;
    height:100%;
}

.signature-v4-layer{
    will-change:clip-path,transform;
    transform-origin:center center;
}

.signature-v4-layer-1{z-index:1}
.signature-v4-layer-2{
    z-index:2;
    clip-path:inset(100% 0 0 0);
}
.signature-v4-layer-3{
    z-index:3;
    clip-path:inset(0 100% 0 0);
}
.signature-v4-layer-4{
    z-index:4;
    clip-path:inset(0 50% 0 50%);
}

.signature-v4-layer img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}

.signature-v4-grade{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(6,4,18,.28),transparent 28%,transparent 60%,rgba(6,4,18,.72)),
        linear-gradient(90deg,rgba(7,5,20,.25),transparent 32%,transparent 72%,rgba(7,5,20,.10));
}

.signature-v4-blueprint{
    position:absolute;
    inset:0;
    z-index:6;
    opacity:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(219,178,91,.18) 1px,transparent 1px),
        linear-gradient(90deg,rgba(219,178,91,.18) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);
}

.signature-v4-scan{
    position:absolute;
    z-index:7;
    left:3%;
    right:3%;
    top:0;
    height:1px;
    opacity:0;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(230,190,101,.95) 24%,
            #fff0bb 50%,
            rgba(230,190,101,.95) 76%,
            transparent
        );
    box-shadow:0 0 28px rgba(204,159,71,.45);
    will-change:transform,opacity;
}

.signature-v4-topline{
    position:absolute;
    z-index:8;
    top:clamp(14px,2vw,24px);
    inset-inline-start:clamp(14px,2vw,24px);
    inset-inline-end:clamp(14px,2vw,24px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.45);
}

.signature-v4-topline span{
    font-family:var(--font-en);
    font-size:.66rem;
    letter-spacing:.12em;
    color:var(--rosco-gold-light);
}

.signature-v4-topline strong{
    max-width:min(62ch,72%);
    text-align:end;
    font-size:clamp(.75rem,1vw,.92rem);
    font-weight:600;
}

.signature-v4-stage-copy{
    position:absolute;
    z-index:8;
    inset-inline-start:clamp(16px,2.5vw,34px);
    bottom:clamp(18px,3vw,34px);
    width:min(560px,72%);
    display:grid;
    gap:.28rem;
    padding:clamp(14px,1.8vw,22px);
    color:#fff;
    border-inline-start:2px solid var(--rosco-gold);
    background:
        linear-gradient(
            115deg,
            rgba(11,8,29,.84),
            rgba(11,8,29,.54) 68%,
            rgba(11,8,29,.12)
        );
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.signature-v4-counter{
    color:var(--rosco-gold-light);
    font-family:var(--font-en);
    font-size:.68rem;
    letter-spacing:.12em;
}

.signature-v4-stage-copy strong{
    font-size:clamp(1.05rem,1.8vw,1.55rem);
    line-height:1.35;
}

.signature-v4-stage-copy p{
    margin:0;
    max-width:52ch;
    color:rgba(255,255,255,.75);
    font-size:clamp(.78rem,.95vw,.9rem);
    line-height:1.7;
}

.signature-v4-project-link{
    position:absolute;
    z-index:9;
    inset-inline-end:clamp(18px,2.5vw,34px);
    bottom:clamp(20px,3vw,36px);
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    padding:.72rem 1rem;
    color:#17122f;
    background:#fff;
    border-radius:999px;
    font-size:.76rem;
    font-weight:800;
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition:
        opacity .28s ease,
        transform .28s ease,
        background .2s ease;
}

.signature-v4-project-link.is-visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.signature-v4-project-link:hover{
    background:var(--rosco-gold-light);
}

.signature-v4-project-link b{
    color:var(--rosco-violet);
}

.signature-v4-footer{
    display:grid;
    gap:.72rem;
}

.signature-v4-progress{
    width:100%;
    height:2px;
    overflow:hidden;
    background:rgba(255,255,255,.15);
}

.signature-v4-progress i{
    display:block;
    width:100%;
    height:100%;
    transform:scaleX(0);
    transform-origin:left center;
    background:
        linear-gradient(
            90deg,
            var(--rosco-gold),
            #f0d493,
            var(--rosco-violet)
        );
    will-change:transform;
}

html[dir=rtl] .signature-v4-progress i{
    transform-origin:right center;
}

.signature-v4-dots{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;
    background:rgba(255,255,255,.12);
}

.signature-v4-dots span{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    min-height:38px;
    padding:.5rem .65rem;
    color:rgba(255,255,255,.42);
    background:rgba(18,13,46,.72);
    transition:
        color .2s ease,
        background .2s ease;
}

.signature-v4-dots b{
    font-family:var(--font-en);
    font-size:.6rem;
}

.signature-v4-dots em{
    font-style:normal;
    font-size:.65rem;
}

.signature-v4-dots span.is-past{
    color:rgba(255,255,255,.66);
}

.signature-v4-dots span.is-active{
    color:#fff0bf;
    background:rgba(57,45,128,.95);
}

.signature-v4-fallback{
    height:auto;
    min-height:70vh;
    background:#0c091d;
}

.signature-v4-fallback-card{
    width:min(90vw,900px);
    margin:auto;
    text-align:center;
}

.signature-v4-fallback-card h2{
    color:#fff;
}

/* Tablet */
@media(max-width:980px){

    .signature-section.signature-v4{
        height:370vh;
        min-height:370vh;
    }

    .signature-v4-sticky{
        min-height:560px;
    }

    .signature-v4-shell{
        width:min(95vw,1200px);
        height:calc(100svh - 88px);
        min-height:520px;
        padding-top:74px;
    }

    .signature-v4-heading{
        grid-template-columns:1fr;
        gap:.45rem;
    }

    .signature-v4-heading h2{
        font-size:clamp(2rem,7vw,3.8rem);
    }

    .signature-v4-heading p{
        max-width:70ch;
    }

    .signature-v4-stage-copy{
        width:min(620px,78%);
    }
}

/* Mobile */
@media(max-width:700px){

    .signature-section.signature-v4{
        height:330vh;
        min-height:330vh;
    }

    .signature-v4-sticky{
        min-height:520px;
        align-items:center;
    }

    .signature-v4-shell{
        width:100%;
        height:100svh;
        min-height:520px;
        max-height:none;
        padding:
            76px 12px
            12px;
        gap:10px;
    }

    .signature-v4-heading{
        padding-inline:3px;
    }

    .signature-v4-heading .eyebrow{
        margin-bottom:.15rem;
        font-size:.57rem;
    }

    .signature-v4-heading h2{
        font-size:clamp(1.75rem,9vw,2.7rem);
    }

    .signature-v4-heading p{
        display:none;
    }

    .signature-v4-canvas{
        align-self:center;
        min-height:0;
        aspect-ratio:16/9;
        border-radius:18px;
    }

    .signature-v4-layer img{
        object-fit:cover;
        object-position:center center;
    }

    .signature-v4-topline{
        top:10px;
        inset-inline:10px;
    }

    .signature-v4-topline strong{
        max-width:72%;
        font-size:.62rem;
    }

    .signature-v4-topline span{
        font-size:.52rem;
    }

    .signature-v4-stage-copy{
        inset-inline:10px;
        bottom:10px;
        width:auto;
        max-width:none;
        padding:10px 11px;
        background:rgba(11,8,29,.78);
    }

    .signature-v4-counter{
        font-size:.54rem;
    }

    .signature-v4-stage-copy strong{
        font-size:.93rem;
    }

    .signature-v4-stage-copy p{
        max-width:100%;
        font-size:.7rem;
        line-height:1.55;
    }

    .signature-v4-project-link{
        display:none;
    }

    .signature-v4-blueprint{
        background-size:28px 28px;
    }

    .signature-v4-dots span{
        min-height:34px;
        padding:.4rem .25rem;
    }

    .signature-v4-dots em{
        display:none;
    }

    .signature-v4-dots b{
        font-size:.58rem;
    }
}

@media(prefers-reduced-motion:reduce){

    .signature-section.signature-v4{
        height:auto!important;
        min-height:0!important;
        padding:5rem 0;
    }

    .signature-v4-sticky{
        position:relative;
        top:auto;
        height:auto;
        min-height:0;
        overflow:visible;
    }

    .signature-v4-shell{
        height:auto;
        min-height:0;
        padding-top:0;
    }

    .signature-v4-canvas{
        aspect-ratio:16/9;
        min-height:0;
    }

    .signature-v4-layer{
        opacity:0!important;
        transform:none!important;
        clip-path:inset(0)!important;
    }

    .signature-v4-layer-4{
        opacity:1!important;
    }

    .signature-v4-blueprint,
    .signature-v4-scan{
        display:none!important;
    }

    .signature-v4-progress i{
        transform:scaleX(1)!important;
    }
}
/* ROSCO SIGNATURE EXPERIENCE V4 END */


/* ROSCO SIGNATURE MOBILE POLISH V4.2 */
.signature-v4-stage-copy-mobile{
    display:none;
}

.signature-v4-counter{
    direction:ltr;
    unicode-bidi:isolate;
    display:inline-block;
}

@media(max-width:700px){

    .signature-section.signature-v4{
        height:280vh;
        min-height:280vh;
    }

    .signature-v4-shell{
        width:100%;
        height:100svh;
        min-height:520px;
        max-height:none;
        padding:74px 12px 14px;
        gap:10px;
    }

    .signature-v4-heading{
        grid-template-columns:1fr;
        gap:6px;
        padding-inline:2px;
    }

    .signature-v4-heading .eyebrow{
        margin-bottom:.1rem;
        font-size:.56rem;
    }

    .signature-v4-heading h2{
        font-size:clamp(1.8rem,9vw,2.75rem);
        line-height:1.05;
    }

    .signature-v4-heading p{
        display:none;
    }

    .signature-v4-canvas{
        min-height:0;
        aspect-ratio:16/10;
        border-radius:16px;
    }

    .signature-v4-stage-copy{
        display:none !important;
    }

    .signature-v4-stage-copy-mobile{
        display:grid;
        gap:.28rem;
        padding:12px 14px;
        border-inline-start:2px solid var(--rosco-gold);
        border-radius:14px;
        background:
            linear-gradient(
                115deg,
                rgba(11,8,29,.88),
                rgba(11,8,29,.70)
            );
    }

    .signature-v4-stage-copy-mobile strong{
        color:#fff;
        font-size:1rem;
        line-height:1.35;
    }

    .signature-v4-stage-copy-mobile p{
        margin:0;
        color:rgba(255,255,255,.78);
        font-size:.76rem;
        line-height:1.58;
    }

    .signature-v4-topline{
        top:10px;
        inset-inline-start:10px;
        inset-inline-end:10px;
        gap:.45rem;
    }

    .signature-v4-topline strong{
        max-width:68%;
        font-size:.60rem;
    }

    .signature-v4-topline span{
        font-size:.50rem;
    }

    .signature-v4-project-link{
        display:none !important;
    }

    .signature-v4-footer{
        gap:.55rem;
    }

    .signature-v4-progress{
        height:2px;
    }

    .signature-v4-dots{
        border-radius:10px;
        overflow:hidden;
    }

    .signature-v4-dots span{
        min-height:32px;
        padding:.35rem .18rem;
    }

    .signature-v4-dots em{
        display:none;
    }

    .signature-v4-dots b{
        font-size:.58rem;
    }
}
/* ROSCO SIGNATURE MOBILE POLISH V4.2 END */


/* ROSCO SIGNATURE HYBRID V6 */
.signature-section.signature-v6-video{
    height:var(--signature-v6-scroll,340vh);
    min-height:var(--signature-v6-scroll,340vh);
}

.signature-v6-video-media{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#0b081d;
    isolation:isolate;
}

.signature-v6-video-media video,
.signature-v6-video-poster{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.signature-v6-video-media video{
    z-index:1;
    background:#0b081d;
    transform:translateZ(0);
    backface-visibility:hidden;
}

.signature-v6-video-poster{
    z-index:2;
    opacity:1;
    pointer-events:none;
    transition:opacity .34s ease;
}

.signature-v6-video-poster.is-hidden{
    opacity:0;
}

.signature-v6-video-hint{
    position:absolute;
    inset-inline-start:24px;
    bottom:24px;
    z-index:7;
    pointer-events:none;
    will-change:opacity;
}

.signature-v6-video-hint span{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(11,8,29,.54);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:.68rem;
    letter-spacing:.08em;
}

.signature-v6-video-footer{
    gap:.48rem;
}

.signature-v6-video-scale{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    direction:ltr;
    color:rgba(255,255,255,.52);
    font-size:.56rem;
    font-variant-numeric:tabular-nums;
}

.signature-v6-video-scale span{
    text-align:center;
}

@media(max-width:700px){

    .signature-section.signature-v6-video{
        min-height:var(--signature-v6-scroll,300vh);
    }

    .signature-v6-video-hint{
        inset-inline-start:10px;
        bottom:10px;
    }

    .signature-v6-video-hint span{
        min-height:28px;
        padding:0 9px;
        font-size:.52rem;
    }

    .signature-v6-video-scale{
        font-size:.48rem;
    }

    .signature-v6-video-poster{
        transition-duration:.22s;
    }
}

@media(prefers-reduced-motion:reduce){

    .signature-v6-video-hint{
        display:none;
    }

    .signature-v6-video-poster{
        transition:none;
    }
}
/* ROSCO SIGNATURE HYBRID V6 END */