/* TRQ: the website's monochrome signature, signal lime, Arabic display forms and soft surfaces. */
:root{--r:18px;--cut:0px}
body{font-feature-settings:"ss01" 1,"calt" 1,"liga" 1}
[lang=ar] .hero-title,[lang=ar] .chead-title,[lang=ar] .st-big,[lang=ar] .foot-title,[lang=ar] .pr-ar,[lang=ar] .wt-ar{font-weight:500;line-height:1.16;letter-spacing:0}
:root[lang=en] .hero-title,:root[lang=en] .chead-title,:root[lang=en] .st-big,:root[lang=en] .os-text,:root[lang=en] .foot-title,.pr-en,.wt-en{font-style:normal;text-transform:none;letter-spacing:-.045em}
:root[lang=en] .hero-title{font-size:clamp(70px,11vw,180px);line-height:.96}
:root[lang=en] .hero-title .ln:nth-child(2){font-size:1em}
.hero-title .ln{padding-block:.06em}
.bar-logo .logo-svg{width:142px}
.tile,.anatomy-stage,.weights,.lab-stage,.shot,.pin-end,.motion-stage,.tone-stage,.av{clip-path:none;border-radius:18px}
.btn{clip-path:none;border-radius:4px;text-transform:none;letter-spacing:0}
.pill,.badge,.seg,.seg button,.switch{border-radius:4px}
.hb-or,.hb-ink,.loaded .hb-or,.loaded .hb-ink{clip-path:none;border-radius:18px}
.hb-or{border-radius:50%}.hb-ph{border-radius:18px;background:#f3f3f3}
.hb-ph img{object-fit:contain!important}
.hb-line .mk-outline{width:100%;height:100%;max-height:100%}
.mk-outline path{stroke-width:1.1px;fill:none;vector-effect:non-scaling-stroke}
.pr-en{font-family:'TRQ Sans',sans-serif!important;font-size:clamp(38px,4.8vw,82px)!important;font-style:normal;font-weight:700!important;line-height:1.1!important;letter-spacing:-.04em!important}
.pr-ar{font-size:clamp(42px,5.4vw,96px);line-height:1.25!important;font-weight:500}
.tl-mark{width:48%;bottom:20%}.tl-mark svg{width:100%;height:auto}
.tl-type .tl-abc,.mp-type{font-weight:500}
.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}
.logo-svg .w{fill:var(--wc,#f3f3f3)}
.logo-anim [data-lockup=horizontal] .m{stroke:#f3f3f3;fill:transparent;stroke-width:1px;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.logo-anim.play [data-lockup=horizontal] .m{animation:trq-draw 1.4s var(--ease2) .1s forwards,trq-fill .6s ease 1.2s forwards}
.logo-svg.static .m{fill:#f3f3f3}
.anatomy-stage .logo-svg{--wc:#f3f3f3}.anatomy-stage{padding-block:clamp(50px,7vw,100px)}
.lab-stage[data-bg=grey]{background-color:#d3d3d3}
.lab-stage[data-bg=photo]::before{background-image:url('../assets/brand/trq-poster.png')}
#labArt[data-l=logo-mark]{width:min(52%,340px)}
.extended-arabic{font-feature-settings:"ss01" 1,"calt" 1,"liga" 1!important;font-style:normal!important}
.tester-text:not(.extended-arabic){font-feature-settings:"ss01" 0,"calt" 1,"liga" 1}
.swatch{border-radius:10px}.swatch .sw-name{font-weight:500}
#colour-story .sq{border-radius:.1em}
#graphics .cut{opacity:.1;color:var(--or)}
#graphics .rules{position:relative}.rules li{background:transparent}
.os-text{font-style:normal;font-weight:500;line-height:1.2}
.shot img[src$='.svg']{object-fit:contain;background:var(--paper);transform:none}
.shot img[src$='trq-code.webp']{object-fit:contain;background:var(--paper)}
#logo-motion .logo-svg{--wc:#f3f3f3}
.cc-aa svg{width:clamp(180px,22vw,340px)}
@keyframes trq-draw{to{stroke-dashoffset:0}}
@keyframes trq-fill{to{fill:#f3f3f3;stroke-width:0}}
@media(max-width:760px){
 .bar-logo .logo-svg{width:115px}
 :root[lang=ar] .hero-title{font-size:23vw}
 :root[lang=en] .hero-title{font-size:18vw}
 :root[lang=en] .hero-title .ln:nth-child(2){font-size:1em}
 .hero-foot p{font-size:18px;line-height:1.6}
 .pr-en{font-size:clamp(32px,8vw,64px)!important}.pr-ar{font-size:clamp(36px,9vw,72px)}
 .shot{aspect-ratio:8/5}
 .foot-title{line-height:1.2}.chead-lead{line-height:1.65}
 .pill{font-size:13px;padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){
 .logo-anim [data-lockup=horizontal] .m{animation:none!important;fill:#f3f3f3;stroke-width:0;stroke-dashoffset:0}
}

#lab,#weights,#tText,#ccStage{scroll-margin-top:100px}
/* Lime is a signal surface, not low-contrast text on white. */
.t-light .chead-num,.t-white .chead-num,.t-light .dl-n,.t-white .dl-n{color:var(--ink)}
.t-light .fill-text .hl .fw.on,.t-white .fill-text .hl .fw.on{color:var(--ink)}
.t-light .principles em,.t-white .principles em{color:var(--ink)}
/* The fixed Arabic marketing name accompanies the original symbol in both UI languages. */
.logo-anim [data-lockup=horizontal] .trq-logo-separator{opacity:0}.logo-anim.play [data-lockup=horizontal] .trq-logo-separator{animation:trq-guide-divider .6s ease 1.05s forwards}@keyframes trq-guide-divider{to{opacity:.3}}.logo-svg.static .trq-logo-separator{opacity:.3}.loader-logo{width:min(82vw,650px)}#motionLogo{max-width:760px}.bar-logo.trq-marketing-lockup{width:auto;max-width:none}
@media(prefers-reduced-motion:reduce){.logo-anim [data-lockup=horizontal] .trq-logo-separator{opacity:.3;animation:none!important}}