/* ============ interaction polish (Emil Kowalski pass, 15 Oct) — loaded last ============ */
:root{--press:cubic-bezier(.23,1,.32,1)}

/* press feedback: every pressable answers the finger */
.btn{transition:background .25s,color .25s,transform .16s var(--press)}
/* the hero button also rides the slide entrance — keep both */
.s-copy>.btn{transition:transform .9s var(--ease),opacity .6s,background .25s,color .25s}
.slide.on .s-copy>.btn:active{transform:scale(.97);transition:transform .16s var(--press),opacity .6s,background .25s,color .25s}
.tabs button,.pager button{transition:color .3s,transform .16s var(--press)}
.pause,.filters button,.burger,.mnav .x,.cycp,.dd>button{transition:color .2s,background-color .2s,border-color .2s,transform .16s var(--press)}
.chips span{transition:background .2s,color .2s,border-color .2s,transform .16s var(--press)}
.btn:active,.pause:active,.filters button:active,.burger:active,.mnav .x:active,.cycp:active,.dd>button:active{transform:scale(.97)}
.tabs button:active,.pager button:active{transform:scale(.98)}
.chips label:active span{transform:scale(.97)}
.qa button{transition:transform .16s var(--press)}
.qa button:active{transform:translateY(1px)}

/* products dropdown: closes faster than it opens; no animation when driven from the keyboard */
.dd ul{transition:opacity .15s,transform .15s var(--ease),visibility 0s .15s}
.dd ul.open{transition:opacity .22s,transform .22s var(--ease)}
.dd ul.kb,.dd ul.kb.open{transition:none}

/* mobile menu: open .45s, get out of the way in .25s */
.mnav{transition:clip-path .25s var(--ease),visibility 0s .25s}
.mnav.open{transition:clip-path .45s var(--ease)}

/* record rows: no layout animation — content slides on transform, the row never reflows */
.rec{transition:background-color .3s}
.rec:hover,.rec:focus-visible{padding-left:0;padding-right:0}
@media (max-width:860px){
  .rec:hover>:not(.go),.rec:focus-visible>:not(.go){transform:translateX(8px)!important}
  .rec:hover>.go,.rec:focus-visible>.go{transform:translateX(-8px)!important}
}

/* film grain sleeps when its plate is off screen (chain.js toggles .off) */
.plate.off .grain{animation-play-state:paused}

/* reduced motion: keep gentle fades and colour changes, drop all movement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color,fill,stroke,visibility!important;transition-duration:.2s!important}
  .btn:active,.pause:active,.filters button:active,.burger:active,.mnav .x:active,.cycp:active,.dd>button:active,
  .tabs button:active,.pager button:active,.chips label:active span,.qa button:active{transform:none}
}

/* three-up title blocks: let labels wrap on phones instead of ellipsing ("Sharjah, UAE") */
@media (max-width:420px){.tblock.three b{white-space:normal;overflow:visible}}

/* phones: the spine owns the 16px margin, so the footer logo stops hanging into it */
@media (max-width:767px){.ftr .top>div:first-child img{margin-left:0}}

/* ============ numbers removed site-wide (Samuel, 19 Oct): the layouts close up around what's left ============ */
/* FAQ: question + plus, no number column */
.qa button{grid-template-columns:minmax(0,1fr) 24px}
.ans p{padding-left:0}
/* Why Choose Us proof records: copy + photo */
.proof{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
@media (max-width:860px){.proof{grid-template-columns:1fr}}
/* blog records: title, topic, read */
.rec{grid-template-columns:minmax(0,1fr) 180px 92px;grid-template-areas:"tt tg go"}
@media (max-width:860px){.rec{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tt tt" "tg go"}}
/* title blocks: however many fields remain share the strip */
@media (min-width:861px){.tblock:not(.three){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
/* hero pager on phones: five segments with their progress line, no digits */
@media (max-width:860px){.pager button{min-height:44px}}

/* registration marks at half strength everywhere (Samuel, 19 Oct) */
.reg{opacity:.5}

/* ============ grey ground #F4F4F2 (Samuel, 19 Oct; brand guideline porcelain) ============
   Home: Platform, Testimonials, Contact · About: FAQs · Contact: Enquiry. The header follows the ground. */
.grey{--bg:var(--porcelain);--surface:var(--paper)}
.grey .form{background:var(--paper)}