/* TRQ: carbon, porcelain, acidic chartreuse. Geometry follows the forward V. */
:root{--ink:#131313;--ink2:#222222;--paper:#f3f3f3;--white:#f3f3f3;--or:#98fe00;--grey:#d3d3d3;--r:2px;--cut:clamp(12px,1.8vw,28px)}
.t-dark{--mute:#a4a4a4;--line:rgba(243,243,243,.17);--card:#222222;--card2:#333333;color:var(--paper)}
.t-light,.t-white{--mute:#5a5a5a;--line:rgba(19,19,19,.17);--card:#e5e5e5;--card2:#d3d3d3;background:var(--paper);color:var(--ink)}
.logo-svg .w{fill:var(--wc,#f3f3f3)}.logo-svg .m{fill-rule:evenodd}
.logo-anim [data-lockup="horizontal"] .m{stroke-width:1px;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.logo-anim.play [data-lockup="horizontal"] .m{animation-delay:calc(.1s + var(--mi,0)*100ms),1.05s}
.bar-logo .logo-svg{width:150px}.bar-logo{min-height:46px}
.pill,.badge,.switch,.seg,.seg button{border-radius:2px}
.pill{background:rgba(19,19,19,.92)}.pill:hover{background:#333333}
.btn{border-radius:2px;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);text-transform:uppercase;letter-spacing:.02em}
.btn:hover{background:var(--or);color:var(--ink)}.t-dark .btn{background:var(--or);color:var(--ink)}
.btn-meta{opacity:.8}.t-dark .btn-meta{color:var(--ink)}
.hero-copy{padding-top:112px}.hero-title{font-weight:900}
.hero-eyebrow{color:#5a5a5a}.hero-grid i,.hero-grid b{background:rgba(19,19,19,.13)}
.hero-title .ln{padding-block:.04em}.hero-foot{border-color:rgba(19,19,19,.17)}
.hb{border-radius:0}.hb-or{clip-path:polygon(25% 0,100% 0,75% 100%,0 100%)}
.hb-ink{clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%)}
.hb-line .mk-outline{width:100%;height:100%;overflow:visible}.mk-outline path{vector-effect:non-scaling-stroke;stroke-width:1.2px}
:root[lang='en'] .hero-title{font-size:clamp(64px,9.8vw,180px);font-weight:700;line-height:.88;letter-spacing:-.055em;font-style:oblique 10deg;text-transform:uppercase}
:root[lang='en'] .hero-title .ln:nth-child(2){font-size:.68em}
:root[lang='en'] .chead-title,:root[lang='en'] .st-big,:root[lang='en'] .os-text,:root[lang='en'] .foot-title{font-weight:700;font-style:oblique 10deg;text-transform:uppercase;letter-spacing:-.05em}
:root[lang='ar'] .chead-title,:root[lang='ar'] .st-big{font-weight:900}
.t-dark .fill-text .hl,.t-dark .chead-num{color:var(--or)}
.tile,.anatomy-stage,.weights,.lab-stage,.shot,.pin-end,.motion-stage,.tone-stage,.av{border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.tile em{color:inherit}.tile b{font-weight:900}.tl-dl:hover{background:#222222}
.tl-or{background:var(--or)}.tl-col,.mp-type,.mp-col{background:var(--paper)}
.tl-stripes i:nth-child(1),.mp-col i:nth-child(1){background:var(--ink)}.tl-stripes i:nth-child(2),.mp-col i:nth-child(2){background:var(--paper)}.tl-stripes i:nth-child(3),.mp-col i:nth-child(3){background:var(--or)}.tl-stripes i:nth-child(4),.mp-col i:nth-child(4){background:#d3d3d3}
.tl-mark svg,.mp-or svg{width:60%;height:65%;fill:var(--ink)}.tl-gfx .tl-cut i{clip-path:none;bottom:-15%;height:auto;width:75%;background:none;color:var(--or)}
.tl-cut i svg{display:block;width:100%;height:auto;fill:currentColor}.tl-cut i:last-child{background:none;color:#d3d3d3;opacity:.5}
.pr-en{font-family:'TRQ Sans',sans-serif;font-weight:700!important;font-style:oblique 10deg;line-height:.95!important;letter-spacing:-.05em!important;font-size:clamp(45px,6.1vw,112px)!important}
.pr-en span{color:var(--or)}.pr-ar{font-weight:900;font-size:clamp(44px,6vw,110px)}
.anat{border-radius:2px}.anat b{font-weight:900}.anat em{border-radius:0}
.lab-stage{background-color:var(--paper)}.lab-stage[data-bg='grey']{background:#d3d3d3}.lab-stage[data-bg='photo']::before{box-shadow:inset 0 0 0 2000px rgba(19,19,19,.5)}
#labArt[data-l='logo-mark']{width:min(35%,280px)}
.cs-stage{background:var(--paper);border-radius:2px}.cs-stage svg{height:100%}
.wt-en{font-weight:700;font-style:oblique 10deg;text-transform:uppercase;font-size:clamp(54px,8.7vw,148px)}.wt-ar{font-weight:900}
.weights{--mute:#a4a4a4;--line:rgba(243,243,243,.17)}.t-dark .wt-now b{color:var(--or)}
.oblique-accent{font-family:'TRQ Sans',sans-serif!important;font-style:oblique 12deg;font-weight:700!important;text-transform:uppercase;letter-spacing:-.04em}
.swatch{border-radius:0}.swatch .sw-val{font-size:clamp(19px,2.3vw,38px)}.swatch .sw-name{font-size:clamp(19px,1.8vw,30px)}
.sw-pan{font-size:11px;line-height:1.5;white-space:normal}.swatch:nth-child(4){--t:#131313}
.t-trq-graphics{background:var(--ink);color:var(--paper);--mute:#a4a4a4;--line:rgba(243,243,243,.17);--card:#222222;--card2:#333333}
#graphics .chead-num{color:var(--or)}#graphics .cut{height:auto;width:42vw;background:none;clip-path:none;color:var(--or)}
#graphics .cut svg{display:block;width:100%;height:auto;fill:currentColor}
#graphics .c1{right:-26vw;top:8%;opacity:.3;bottom:auto;left:auto}
#graphics .c2{right:-33vw;top:44%;opacity:.65;bottom:auto;left:auto}
#graphics .c3{left:-28vw;bottom:-10%;opacity:.2;top:auto;right:auto}
#graphics .rules{border-color:var(--line)}#graphics .rules li{border-color:var(--line)}#graphics .rules span{color:var(--mute)}
#graphics .motion-side .st-body{color:var(--paper)}.os-mark{height:130%;display:grid;place-items:center;opacity:.35}
.os-mark .mk-outline{height:100%;width:100%;stroke:#d3d3d3}.os-text{line-height:1}.os-cap{color:#a4a4a4}
.foot .btn.big{font-size:clamp(18px,2.7vw,42px)}.legal span{white-space:pre-line}
@media(max-width:1100px) and (min-width:761px){.swatch{padding:18px 14px}.swatch .sw-name{font-size:20px}.swatch .sw-val{font-size:21px}}
@media(max-width:760px){
 .bar-logo .logo-svg{width:118px}.pill{padding-inline:14px}.bar{gap:6px}
 .hero-title{font-size:23vw}.hero-eyebrow{gap:10px;font-size:10px}.hero-foot p{font-size:17px}
 :root[lang='en'] .hero-title{font-size:20vw}:root[lang='en'] .hero-title .ln:nth-child(2){font-size:.66em}
 :root[lang='en'] .hb-ink{left:75%;width:25%}:root[lang='ar'] .hb-ink{left:0;width:25%}
 .pr-en{font-size:clamp(38px,10vw,72px)!important}.pr-ar{font-size:clamp(38px,10vw,75px)}.wt-en{font-size:13vw}
 .swatch .sw-name{font-size:24px}.swatch .sw-val{font-size:27px}
 #graphics .cut{width:70vw}#graphics .c1{right:-52vw;top:10%}#graphics .c2{right:-58vw;top:48%}#graphics .c3{left:-54vw;bottom:-5%}
 .os-mark{width:160%;height:100%}.os-text{font-size:clamp(38px,8.8vw,80px)}.foot .btn.big{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.logo-anim [data-lockup="horizontal"] .m{stroke-dashoffset:0;fill:var(--or);stroke-width:0}.logo-anim [data-lockup="horizontal"] .w{opacity:1;transform:none}.hb,.hero-eyebrow,.hero-foot,.hero-grid i,.hero-grid b{opacity:1;transform:none}}
/* Keep English headlines clear of the mobile photo column. */
.loaded .hb-or{clip-path:polygon(25% 0,100% 0,75% 100%,0 100%)}
.loaded .hb-ink{clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%)}
@media(max-width:760px){
 .hero-eyebrow{font-size:11px;gap:8px 12px}
 :root[lang='en'] .hero-title{font-size:17.5vw}
 :root[lang='en'] .hb-ph{left:68%;width:32%}
 :root[lang='en'] .hb-ph img{object-position:40% center}
 :root[lang='en'] .hb-ink{left:75%;top:80px;height:22%;width:25%}
}
/* Preserve each gallery asset's framing on narrow screens. */
.shot img[src$='.svg'],.shot img[src*='brand-board']{transform:none}
.shot img[src*='brand-board']{object-fit:contain;background:var(--paper)}
@media(max-width:760px){
 .pin-track{align-items:center}
 .shot{height:auto;aspect-ratio:16/9;align-self:center}
 .shot.sq{aspect-ratio:1}
 .shot img{position:absolute;inset:0}
 .pin-end{height:72vw;aspect-ratio:auto;align-self:center}
}
.principles em{color:var(--ink);font-weight:700}
@media(min-width:761px){.pin-sticky{padding-top:32px}}
@media(max-width:760px){.pin-sticky{padding:88px 0 48px}}

/* The guide follows its own identity and contrast rules. */
.tl-mark{width:44%;bottom:14%}.tl-mark svg{width:100%;height:auto;fill:var(--ink)}
.cc-aa{font-size:0;line-height:0!important}.cc-aa svg{display:block;width:clamp(150px,18vw,300px);height:auto;fill:currentColor}
.swatch .sw-name,.swatch .sw-role,.swatch .sw-val,.swatch .sw-pan{color:inherit}
.bal-bar{box-shadow:inset 0 0 0 1px rgba(243,243,243,.22)}
.bal-bar i:first-child{box-shadow:inset 0 0 0 1px rgba(243,243,243,.22)}
.logo-anim svg:not([data-lockup="horizontal"]) .m,.logo-anim svg:not([data-lockup="horizontal"]) .w{animation:none!important;transform:none!important;opacity:1;fill:currentColor}

/* Secondary UI text and motion diagrams remain readable on carbon surfaces. */
.menu-list a{color:#a4a4a4}.menu-list a:hover,.menu-list a.on{color:var(--paper)}
.wt-scale span{color:#a4a4a4}.wt-scale span.on{color:var(--paper)}
.swatch .sw-role,.swatch .sw-pan{opacity:1}
.areweb-lists .not li{background:#222222;color:var(--paper);text-decoration-color:var(--or)}
.motion-side .curve-line{stroke:var(--or)}.motion-side .curve-grid{stroke:#d3d3d3}.motion-side .curve circle{fill:var(--paper)}
#palette,#logo-motion{scroll-margin-top:88px}

/* Inline palette samples follow the sharp TRQ geometry. */
#colour-story{scroll-margin-top:100px}
#colour-story .sq{border-radius:0;box-shadow:inset 0 0 0 1px rgba(243,243,243,.25)}