:root{
  color-scheme:light;
  --red:#DA1F26;
  --red-deep:#B3161C;
  --logo-red:#C73631;
  --cream:#FCF0E3;
  --cream-2:#F6E4D0;
  --white:#FFFFFF;
  --ink:#1F1A17;
  --ink-2:#4A423D;
  --mute:#665C56;
  --line:rgba(31,26,23,.10);
  --line-2:rgba(31,26,23,.18);
  --font:"Tajawal","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --mono:var(--font);
  /* one type scale for the whole site */
  --fs-xs:.85rem;
  --fs-sm:.95rem;
  --fs-base:1.0625rem;
  --fs-md:1.15rem;
  --fs-lg:1.35rem;
  --fs-xl:clamp(1.6rem,2.6vw,2.2rem);
  --fs-2xl:clamp(2rem,4.2vw,3.6rem);
  --fs-3xl:clamp(2.4rem,5.6vw,4.8rem);
  --gut:clamp(16px,4.5vw,64px);
  --ease:cubic-bezier(.19,1,.22,1);
  --leaf:clamp(40px,6vw,90px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--white);scrollbar-color:var(--red) var(--cream);accent-color:var(--red);caret-color:var(--red)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--cream)}::-webkit-scrollbar-thumb{background:var(--red);border-radius:0 6px 0 6px}
.skip{position:fixed;top:-60px;right:16px;z-index:120;background:var(--red);color:#fff;padding:10px 18px;border-radius:0 12px 0 12px;font-weight:700;transition:top .3s}
.skip:focus{top:12px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:var(--fs-base);line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:800;line-height:1.2;text-wrap:balance}
p{margin:0}
.wrap{padding-inline:var(--gut);max-width:1440px;margin-inline:auto}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.title{font-size:var(--fs-2xl);position:relative;max-width:18ch}
.title::after{content:"";display:block;width:72px;height:5px;background:var(--red);margin-top:20px;border-radius:0 5px 0 5px}
.title u{text-decoration:none;color:var(--red)}
.lead{color:var(--ink-2);max-width:52ch;font-size:var(--fs-md)}

/* loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--white);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
.loader.done{opacity:0;visibility:hidden}
.loader img{width:min(240px,55vw);animation:pulse 1.4s ease-in-out infinite}
.loader i{display:block;width:min(240px,55vw);height:2px;background:var(--cream-2);margin-top:22px;overflow:hidden;position:relative}
.loader i::after{content:"";position:absolute;inset:0;width:40%;background:var(--red);animation:bar 1.1s ease-in-out infinite}
@keyframes bar{from{transform:translateX(160%)}to{transform:translateX(-260%)}}
@keyframes pulse{50%{opacity:.55}}

/* nav */
/* top bar: one floating bar, the same at the top of the page and while scrolling */
.nav{position:fixed;top:0;inset-inline:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--line);transition:top .5s var(--ease),inset .5s var(--ease),border-radius .5s var(--ease),box-shadow .5s var(--ease),background .5s}
.nav.float{top:calc(10px + env(safe-area-inset-top,0px));inset-inline:clamp(10px,2vw,28px);padding-top:0;border-radius:0 26px 0 26px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 0 0 1px var(--line),0 22px 44px -22px rgba(31,26,23,.45);animation:navPop .7s var(--ease)}
@keyframes navPop{from{transform:translateY(calc(-100% - 20px));opacity:.4}to{transform:none;opacity:1}}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.nav.float .nav-in{height:70px;padding-inline:clamp(14px,2vw,28px)}
.logo{display:block;flex:none}
.logo img{height:52px;width:auto}
.nav.float .logo img{height:44px}
.links{display:flex;gap:clamp(14px,2vw,32px);font-weight:700;font-size:var(--fs-sm);color:var(--ink-2)}
.links a{position:relative;padding-block:6px;transition:color .3s}
.links a:hover{color:var(--ink)}
.links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.links a:hover::after,.links a.on::after{transform:scaleX(1)}
.links a.on{color:var(--red)}
.nav-cta{display:flex;gap:10px;align-items:center}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:52px;padding-inline:28px;font-weight:700;font-size:var(--fs-base);overflow:hidden;isolation:isolate;white-space:nowrap;border-radius:0 26px 0 26px;transition:transform .5s var(--ease),background .4s,color .4s,border-color .4s}
.btn-red{background:var(--red);color:#fff;box-shadow:0 14px 30px -16px rgba(120,20,20,.55)}
.hero .btn-red{box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
.btn-red::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--red-deep);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.btn-red:hover::after{transform:scaleX(1)}
.btn-line{border:1.5px solid rgba(255,255,255,.7);color:#fff;backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.btn-line:hover{background:#fff;color:var(--ink)}
.btn-dark{border:1.5px solid var(--line-2);color:var(--ink)}
.btn-dark:hover{border-color:var(--red);color:var(--red)}
.btn:active,.chip:active,.menu-btn:active{transform:scale(.97)}
.arrow{display:inline-block;transition:transform .5s var(--ease)}
a:hover .arrow{transform:translateX(-6px)}
.menu-btn{display:none;width:48px;height:48px;border-radius:0 16px 0 16px;background:var(--red);place-items:center}
.menu-btn span{display:block;width:18px;height:2px;background:#fff;box-shadow:0 6px 0 #fff,0 -6px 0 #fff}
.drawer{position:fixed;inset:0;z-index:60;background:var(--white);display:flex;flex-direction:column;justify-content:center;gap:4px;padding-inline:var(--gut);padding-block:90px 40px}
.drawer a{font-size:var(--fs-xl);font-weight:800;border-bottom:1px solid var(--line);padding-block:12px}
.drawer a:hover{color:var(--red)}
.drawer .x{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));inset-inline-start:var(--gut);width:48px;height:48px;border-radius:0 16px 0 16px;background:var(--cream);font-size:var(--fs-xl)}

/* hero */
.hero{position:relative;min-height:min(100svh,960px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;color:#fff;background:#2a2320}
.hero-img{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:40% 60%;transform:scale(1.08);animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.18) translate(-1.5%,-1%)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(20,14,12,.82) 0%,rgba(20,14,12,.45) 42%,rgba(20,14,12,0) 70%),linear-gradient(0deg,rgba(20,14,12,.75),transparent 40%)}
.hero-copy{padding-block:170px 50px;max-width:820px}
.hero .hero .hero h1{font-size:var(--fs-3xl);font-weight:900;line-height:1.12}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block}
.hero h1 em{font-style:normal;color:#fff;background:linear-gradient(transparent 62%,var(--red) 62%,var(--red) 90%,transparent 90%)}
.hero-sub{margin-top:22px;font-size:var(--fs-md);max-width:40ch;color:rgba(255,255,255,.88);font-weight:400}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.saudi{position:absolute;top:110px;inset-inline-end:var(--gut);width:130px;height:auto;aspect-ratio:2660/1180;border-radius:6px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.hero-strip{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.96);color:var(--ink);border-radius:0 var(--leaf) 0 0;overflow:hidden}
.hero-strip div{padding:24px 28px;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.hero-strip div:first-child{border-inline-start:0}
.hero-strip dt{font-size:var(--fs-xs);color:var(--mute)}
.hero-strip dd{margin:0;font-weight:700;font-size:var(--fs-md)}
.hero-strip dd.mono{color:var(--red);font-size:var(--fs-md)}

/* marquee */
.marquee{background:var(--red);color:#fff;overflow:hidden;padding-block:20px}
.marquee-track{display:flex;width:max-content;animation:marq 34s linear infinite}
.marquee span{font-size:var(--fs-xl);font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:40px;padding-inline-end:40px}
.marquee span::after{content:"";width:10px;height:10px;background:#fff;border-radius:0 5px 0 5px}
@keyframes marq{to{transform:translateX(50%)}}

/* sections */
.sec{padding-block:clamp(90px,12vw,170px)}
.cream{background:var(--cream);position:relative;isolation:isolate}
.cream::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .85  0 0 0 0 .72  0 0 0 0 .58  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 60px;margin-bottom:clamp(40px,5vw,70px)}

/* about */
.about{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,100px);align-items:center}
.about-text p.lead{margin-top:26px}
.about-text .quote{margin-top:30px;padding-inline-start:22px;border-inline-start:3px solid var(--red);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.about-media{position:relative}
.frame{position:relative;overflow:hidden;border-radius:0 var(--leaf) 0 var(--leaf);box-shadow:0 40px 80px -40px rgba(31,26,23,.45);aspect-ratio:4/3;max-width:100%;background:var(--cream-2)}
.frame img{width:100%;height:100%;object-fit:cover}
.about-media .badge{position:absolute;bottom:-28px;inset-inline-start:-18px;background:var(--red);color:#fff;padding:22px 26px;border-radius:0 30px 0 30px;box-shadow:0 20px 40px -18px rgba(218,31,38,.7)}
.badge b{display:block;font-family:var(--mono);font-size:var(--fs-xl);line-height:1;font-weight:800}
.badge span{font-size:var(--fs-sm)}

/* products */
.pin{overflow:hidden}
.track{display:flex;gap:clamp(18px,2vw,28px);padding-inline:var(--gut);width:max-content}
.card{position:relative;width:clamp(300px,31vw,470px);flex:none;background:var(--white);border-radius:0 var(--leaf) 0 var(--leaf);overflow:hidden;box-shadow:0 30px 60px -40px rgba(31,26,23,.4);display:flex;flex-direction:column;transition:transform .6s var(--ease)}
.card:hover{transform:translateY(-8px)}
.card .ph{aspect-ratio:4/3;max-width:100%;overflow:hidden;position:relative;background:var(--cream-2)}
.card .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.card:hover .ph img{transform:scale(1.14)}
.card .ph .num{position:absolute;top:16px;inset-inline-start:16px;background:rgba(255,255,255,.92);color:var(--ink);font-family:var(--mono);font-size:var(--fs-xs);padding:5px 12px;border-radius:0 12px 0 12px}
.card-body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:var(--fs-xl)}
.card p{color:var(--ink-2);font-size:var(--fs-sm)}
.card .more{margin-top:auto;padding-top:12px;color:var(--red);font-weight:700;display:inline-flex;gap:8px;align-items:center}
.pin-foot{display:flex;align-items:center;gap:20px;margin-top:40px}
.progress{flex:1;max-width:420px;height:3px;background:var(--cream-2);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--red);transform:scaleX(.08);transform-origin:right}
.hint{font-size:var(--fs-sm);color:var(--ink-2)}

/* signature */
.sig{position:relative;min-height:min(92svh,880px);display:flex;align-items:flex-end;overflow:hidden;color:#fff;isolation:isolate}
.sig-img{position:absolute;inset:-10% 0;z-index:-2}
.sig-img img{width:100%;height:100%;object-fit:cover}
.sig::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(18,12,10,.85) 0%,rgba(18,12,10,.25) 50%,rgba(18,12,10,0) 75%)}
.sig-in{padding-block:80px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;width:100%}
.sig h2{font-size:var(--fs-2xl);font-weight:900;margin-top:14px}
.sig .sig p{color:rgba(255,255,255,.88);max-width:44ch;font-size:var(--fs-md)}
.promise{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.promise span{padding:9px 18px;border:1px solid rgba(255,255,255,.45);border-radius:0 16px 0 16px;font-weight:500;backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}


.svc-list{border-top:1px solid var(--line-2)}
.svc-row{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.4fr) auto;gap:18px 32px;align-items:center;padding-block:28px;border-bottom:1px solid var(--line-2);transition:background .4s}
.svc-row>*{transition:transform .5s var(--ease)}
.svc-row:hover>*{transform:translateX(-10px)}
.svc-row:hover{background:linear-gradient(270deg,var(--cream),transparent)}
.svc-row svg{width:48px;height:48px;stroke:var(--red);fill:none;stroke-width:1.5}
.svc-row h3{font-size:var(--fs-lg)}
.svc-row p{color:var(--ink-2);max-width:52ch}
.svc-row a{color:var(--red);font-weight:700;display:inline-flex;gap:8px;white-space:nowrap}
/* gallery strip */
.gal{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:18px}
.gal .frame{aspect-ratio:auto;min-height:260px}
.gal .g1{grid-row:span 2;min-height:600px}
.gal figure{margin:0;position:relative}
.gal-more{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:260px;padding:30px;background:var(--red);color:#fff;border-radius:0 var(--leaf) 0 var(--leaf);transition:background .4s}
.gal-more:hover{background:var(--red-deep)}
.gal-more b{font-size:var(--fs-xl);font-weight:800;line-height:1.25}
.gal-more span{opacity:.9}
.gal figcaption{position:absolute;bottom:16px;inset-inline-start:16px;background:rgba(255,255,255,.94);padding:8px 16px;border-radius:0 14px 0 14px;font-weight:700;font-size:var(--fs-sm)}

/* branches */
.br{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.map{background:var(--white);border-radius:0 var(--leaf) 0 var(--leaf);overflow:hidden;box-shadow:0 30px 60px -40px rgba(31,26,23,.35);aspect-ratio:3/2;max-width:100%}
.map svg{width:100%;height:100%}
.map .ring{fill:none;stroke:var(--red);transform-box:fill-box;transform-origin:center;animation:ping 2.6s ease-out infinite}
@keyframes ping{from{transform:scale(.5);opacity:.9}to{transform:scale(3.4);opacity:0}}
.map .route{stroke:var(--red);stroke-width:1.4;fill:none;stroke-dasharray:5 7;opacity:.55;animation:dash 16s linear infinite}
@keyframes dash{to{stroke-dashoffset:-400}}
.branch{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding-block:20px;border-bottom:1px solid var(--line-2)}
.branch:first-child{border-top:1px solid var(--line-2)}
.branch .city{font-size:var(--fs-xs);color:var(--red-deep);font-weight:700}
.branch h3{font-size:var(--fs-lg)}
.branch .note{color:var(--mute);font-size:var(--fs-sm)}
.phones{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding-inline:14px;border-radius:0 14px 0 14px;background:var(--white);border:1px solid var(--line-2);font-family:var(--mono);font-size:var(--fs-xs);direction:ltr;transition:all .3s}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip.ok{background:var(--red);border-color:var(--red);color:#fff}
.chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.tag{align-self:start;font-size:var(--fs-xs);font-weight:700;padding:4px 12px;border-radius:0 10px 0 10px;background:var(--red);color:#fff}

/* franchise */
.fr-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(50px,6vw,80px)}
.feat div{background:var(--white);border-radius:var(--leaf) 0 var(--leaf) 0;padding:34px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 24px 44px -34px rgba(31,26,23,.35)}
.feat svg{width:54px;height:54px;stroke:var(--red);fill:none;stroke-width:1.5}
.feat b{color:var(--red);font-weight:700}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.step{background:var(--red);color:#fff;border-radius:0 var(--leaf) 0 0;padding:26px 22px 28px;display:flex;flex-direction:column;gap:14px;min-height:170px}
.step i{font-style:normal;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:800;font-family:var(--mono)}
.step b{font-size:var(--fs-md)}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border-radius:0 30px 0 30px;overflow:hidden;margin-top:34px}
.figs div{background:var(--white);padding:20px 22px}
.figs dt{font-size:var(--fs-xs);color:var(--mute)}
.figs dd{margin:0;font-weight:800;font-size:var(--fs-lg)}
.figs .wide{grid-column:1/-1}

/* contact */
.cta{position:relative;overflow:hidden;background:var(--red);color:#fff;border-radius:0 var(--leaf) 0 var(--leaf);padding:clamp(40px,6vw,90px);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;isolation:isolate}
.cta::after{content:"";position:absolute;inset-block:0;left:0;width:45%;z-index:-1;background:url("img/facade.jpg") center/cover;opacity:.22;mix-blend-mode:luminosity}
.cta h2{font-size:var(--fs-2xl);font-weight:900}
.cta p{margin-top:14px;color:rgba(255,255,255,.9);font-size:var(--fs-md)}
.cta .phone{font-family:var(--mono);font-size:var(--fs-xl);direction:ltr;display:block;text-align:right}
.cta .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;justify-content:flex-start}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{background:var(--ink);color:#fff}
.btn-ghostw{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.btn-ghostw:hover{background:#fff;color:var(--red)}

/* footer */
footer{background:var(--ink);color:#d9d2cc;padding-block:70px 40px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));margin-top:clamp(80px,10vw,140px)}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.foot .flogo{background:#fff;display:inline-block;padding:12px 18px;border-radius:0 20px 0 20px}
.foot .flogo img{height:50px;width:auto}
.foot p{color:#a79d96;margin-top:18px;max-width:34ch;font-size:var(--fs-sm)}
.foot h2{margin:0 0 16px;color:#fff;font-size:var(--fs-base)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--fs-sm)}
.foot ul a:hover{color:#fff}
.socials{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.socials a{width:42px;height:42px;border-radius:0 14px 0 14px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .3s}
.socials a:hover{background:var(--red)}
.socials svg{width:17px;height:17px;fill:#fff}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:var(--fs-xs);color:#8d837c}

.wa{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:22px;z-index:40;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(37,211,102,.18),0 14px 30px -10px rgba(0,0,0,.4);transition:transform .4s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px;fill:#fff}

@media (max-width:1100px){
  .links{gap:clamp(10px,3vw,22px)}
  .links a:not(.m){display:none}
  .menu-btn{display:grid}
  .feat,.steps{grid-template-columns:repeat(2,1fr)}
  .svc-row{grid-template-columns:48px 1fr;}
  .svc-row p,.svc-row a{grid-column:2}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .about,.br,.fr-hero,.cta,.sig-in{grid-template-columns:1fr}
  .card{width:min(84vw,420px)}
  .hero-strip{grid-template-columns:1fr 1fr}
  .hero-strip div:nth-child(3){border-inline-start:0}
  .hero-strip div:nth-child(n+3){border-top:1px solid var(--line)}
  .gal{grid-template-columns:1fr}
  .gal .g1{grid-row:auto;min-height:380px}
  .saudi{width:112px;top:100px}
  .cta::after{display:none}
}
@media (max-width:600px){
  .nav-cta .btn{display:none}
  .nav-in{gap:10px;height:66px}
  .nav.float .nav-in{height:60px;padding-inline:12px}
  .logo img,.nav.float .logo img{height:34px}
  .links{font-size:var(--fs-xs)}
  .menu-btn{width:42px;height:42px;border-radius:0 14px 0 14px}
  .feat,.steps{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .hero-strip div{padding:18px}
  .figs{grid-template-columns:1fr}
  .about-media .badge{inset-inline-start:0}
}
@media (prefers-reduced-motion:reduce){
  .nav.float{animation:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
.cream .feat b,.cream .svc-row a,.cream .card .more{color:var(--red-deep)}
.svc-row a,.hero-strip dd.mono{color:var(--red-deep)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- multi-page additions ---- */
.pin{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:10px 30px}
.pin::-webkit-scrollbar{display:none}
.card{scroll-snap-align:start}
/* products strip: drag sideways with the mouse (touch scrolls natively) */
@media (hover:hover) and (pointer:fine){.pin{cursor:grab}.pin.drag{cursor:grabbing;scroll-snap-type:none}.pin.drag a{pointer-events:none}}
.pin img{-webkit-user-drag:none;user-select:none}
/* page hero */
.phero{position:relative;min-height:min(62svh,620px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;isolation:isolate;background:#2a2320}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:kb 22s ease-in-out infinite alternate}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(20,14,12,.85),rgba(20,14,12,.35) 60%,rgba(20,14,12,.15)),linear-gradient(0deg,rgba(20,14,12,.6),transparent 50%)}
.phero .wrap{width:100%;padding-block:150px 64px}
.crumbs{display:flex;gap:10px;font-size:var(--fs-sm);color:rgba(255,255,255,.8)}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
.phero h1{font-size:var(--fs-3xl);font-weight:900;margin-top:14px}
.phero h1::after{content:"";display:block;width:80px;height:6px;background:var(--red);margin-top:20px;border-radius:0 6px 0 6px}
.phero p{margin-top:18px;max-width:52ch;font-size:var(--fs-md);color:rgba(255,255,255,.88)}
/* product rows */
.prod{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,90px);align-items:center;padding-block:clamp(50px,7vw,100px);border-bottom:1px solid var(--line)}
.prod:nth-child(even) .frame{order:2}
.prod h2{font-size:var(--fs-2xl)}
.prod h2::after{content:"";display:block;width:64px;height:5px;background:var(--red);margin-top:16px;border-radius:0 5px 0 5px}
.prod p{margin-top:20px;color:var(--ink-2);max-width:50ch;font-size:var(--fs-md)}
.uses{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.uses li{padding:8px 16px;background:var(--cream);border-radius:0 14px 0 14px;font-weight:500;font-size:var(--fs-sm)}
.prod .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* works */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.filters button{height:44px;padding-inline:20px;border-radius:0 16px 0 16px;border:1.5px solid var(--line-2);font-weight:700;transition:all .3s}
.filters button:hover{border-color:var(--red);color:var(--red)}
.filters button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.works{columns:3 320px;column-gap:18px}
.work{break-inside:avoid;margin:0 0 18px;position:relative;overflow:hidden;border-radius:0 var(--leaf) 0 var(--leaf);background:var(--cream-2)}
.work img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.work:hover img{transform:scale(1.06)}
.work figcaption{position:absolute;inset-inline:14px;bottom:14px;background:rgba(255,255,255,.95);padding:10px 16px;border-radius:0 14px 0 14px;display:flex;justify-content:space-between;gap:10px;font-weight:700}
.work figcaption span{color:var(--red-deep);font-weight:500;font-size:var(--fs-xs)}
/* follow us: each app's own mark */
.follow{margin-top:44px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.follow span{font-weight:700;color:var(--ink-2);margin-inline-end:6px}
.app{width:58px;height:58px;border-radius:0 18px 0 18px;display:grid;place-items:center;color:#fff;box-shadow:0 12px 24px -14px rgba(31,26,23,.55);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.app:hover{transform:translateY(-4px);box-shadow:0 18px 30px -14px rgba(31,26,23,.6)}
.app svg{width:26px;height:26px;fill:currentColor}
.app-x{background:#000}
.app-tt{background:#000}
.app-tt svg{overflow:visible}.app-tt .c{fill:#25F4EE;transform:translate(-1.2px,-1.2px)}.app-tt .r{fill:#FE2C55;transform:translate(1.2px,1.2px)}
.app-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
/* ISO */
.iso{display:grid;grid-template-columns:1fr 2fr;gap:clamp(30px,5vw,80px);align-items:center}
.iso-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.iso-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:26px 16px;background:var(--white);border-radius:var(--leaf) 0 var(--leaf) 0;box-shadow:0 24px 44px -34px rgba(31,26,23,.35)}
.iso-item img{width:min(150px,80%);height:auto;transition:transform .8s var(--ease)}
.iso-item:hover img{transform:rotate(-8deg) scale(1.05)}
.iso-item b{font-size:var(--fs-md)}
.iso-item span{color:var(--ink-2);font-size:var(--fs-sm)}
.foot-iso{display:flex;gap:10px;margin-top:22px}
.foot-iso img{width:58px;height:58px;background:#fff;border-radius:50%}
/* process */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-2)}
.proc div{padding:30px 24px 10px;border-inline-start:1px solid var(--line-2)}
.proc div:first-child{border-inline-start:0;padding-inline-start:0}
.proc i{font-style:normal;font-family:var(--mono);color:var(--red-deep);font-size:var(--fs-base)}
.proc b{display:block;font-size:var(--fs-lg);margin-top:8px}
.proc p{color:var(--ink-2);margin-top:8px;font-size:var(--fs-sm)}
/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:var(--fs-sm)}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:0 14px 0 14px;background:#fff;color:var(--ink);transition:border-color .3s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--red)}
.form textarea{min-height:130px;resize:vertical}
.form .err{color:var(--red-deep);font-size:var(--fs-xs);font-weight:500;min-height:1.2em}
.form-done{grid-column:1/-1;background:var(--cream);padding:20px 22px;border-radius:0 20px 0 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.panel{background:var(--white);border-radius:0 var(--leaf) 0 var(--leaf);padding:clamp(24px,4vw,48px);box-shadow:0 30px 60px -40px rgba(31,26,23,.35)}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,5vw,70px);align-items:start}
.cinfo{display:grid;gap:14px}
.cinfo div{padding:22px 24px;background:var(--cream);border-radius:0 24px 0 24px}
.cinfo dt{font-size:var(--fs-xs);color:var(--ink-2)}
.cinfo dd{margin:4px 0 0;font-size:var(--fs-lg);font-weight:800}
.band{background:var(--ink);color:#fff;border-radius:0 var(--leaf) 0 var(--leaf);padding:clamp(30px,5vw,70px);display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;overflow:hidden;position:relative;isolation:isolate}
.band::after{content:"";position:absolute;inset:0;left:auto;width:50%;z-index:-1;background:url("img/cladding.jpg") center/cover;opacity:.35;mask-image:linear-gradient(90deg,#000,transparent)}
.band h2{font-size:var(--fs-2xl);font-weight:900}
.band p{color:#d9d2cc;margin-top:12px;max-width:46ch}
@media (max-width:900px){
  .prod,.iso,.contact-grid,.band{grid-template-columns:1fr}
  .prod:nth-child(even) .frame{order:0}
  .iso-list{grid-template-columns:repeat(3,1fr)}
  .proc{grid-template-columns:1fr 1fr}
  .proc div:nth-child(3){border-inline-start:0;padding-inline-start:0}
}
@media (max-width:600px){
  .iso-list{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .proc{grid-template-columns:1fr}
  .proc div{border-inline-start:0;padding-inline-start:0}
}

/* ---- product card clip that plays on hover ---- */
.card .ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);opacity:0;transition:transform 1.2s var(--ease),opacity .35s ease-out}
.card:hover .ph video{transform:scale(1.14)}
.card .ph video.on{opacity:1}
/* ISO seals resting on the top edge of the hero info strip, half over the photo */
.hero-base{position:relative}
.hero-iso{position:absolute;top:0;inset-inline-end:clamp(18px,2.2vw,28px);z-index:2;display:flex;flex-direction:row-reverse;gap:clamp(6px,.9vw,12px);transform:translateY(-60%)}
.hero-iso img{width:clamp(64px,6.4vw,92px);height:auto;aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 14px 16px rgba(10,6,5,.38));transition:rotate .6s var(--ease),scale .6s var(--ease)}
.hero-iso img:hover{rotate:-8deg;scale:1.06}
.hero-iso:focus-visible{outline:3px solid #fff;outline-offset:6px;border-radius:999px}
.hero-strip div{padding-top:clamp(40px,4vw,50px)}
#iso{scroll-margin-top:72px}
/* hero clip: the house moves through the day as the page scrolls (site.js adds .scrub) */
.hero-img img{object-position:50% 50%;transform:none;animation:none;transform-origin:50% 55%}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .6s var(--ease)}
.hero-vid.on{opacity:1}
.hero-track{position:relative}
.hero-track.scrub{background:var(--red)}
.hero-track.scrub .hero{position:sticky;min-height:100vh;min-height:100svh}
@media print{.hero-track{height:auto!important;background:none}.hero-track .hero{position:relative!important;top:auto!important}.hero-vid{display:none}}
/* from imagination to reality: the plan and the finished work stacked; dragging the line changes only which part shows (site.js "compare") */
.sig{display:block;min-height:0;background:var(--cream);color:var(--ink);padding-block:clamp(20px,3vw,44px) clamp(64px,8vw,110px)}
.sig::before{content:none}
.sig-head{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(18px,4vw,56px);align-items:end;margin-bottom:clamp(26px,3.5vw,48px)}
.sig-head h2{margin-top:0;line-height:1.15;text-wrap:balance;color:var(--ink)}
.sig-head>p{color:var(--ink-2);max-width:44ch;font-size:var(--fs-md)}
.sig-sub{margin-top:12px;color:var(--red-deep);font-weight:700}
.sig .promise span{border-color:rgba(31,26,23,.16);background:#fff;color:var(--ink);backdrop-filter:none}
.cmp{position:relative;direction:ltr;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y;cursor:ew-resize;--k:56px}
.cmp-media{position:relative;aspect-ratio:1672/941;max-height:84vh;max-height:84svh;overflow:hidden;background:#EDEBE7;border-radius:0 clamp(28px,4vw,64px) 0 clamp(28px,4vw,64px);box-shadow:0 30px 60px -34px rgba(90,40,20,.45)}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none;-webkit-user-drag:none}
.cmp-before{position:absolute;inset:0;-webkit-clip-path:inset(0 50% 0 0);clip-path:inset(0 50% 0 0)}
.cmp-tag{position:absolute;top:clamp(12px,2vw,24px);padding:7px 16px;border-radius:0 14px 0 14px;font-weight:700;font-size:var(--fs-sm);line-height:1.6;pointer-events:none;transition:opacity .3s var(--ease)}
.cmp-tag-b{left:clamp(12px,2vw,24px);background:#fff;color:var(--ink);box-shadow:0 8px 20px -10px rgba(31,26,23,.35)}
.cmp-tag-a{right:clamp(12px,2vw,24px);background:var(--red);color:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.cmp-line{position:absolute;top:0;bottom:0;left:0;width:3px;margin-left:-1.5px;background:var(--red);box-shadow:0 0 0 1px rgba(255,255,255,.35);pointer-events:none;will-change:transform;transform:translate3d(0,0,0)}
.cmp-knob{position:absolute;top:50%;left:0;touch-action:none;width:var(--k);height:var(--k);margin:calc(var(--k) / -2) 0 0 calc(var(--k) / -2);cursor:grab;will-change:transform;outline:none;border-radius:0 20px 0 20px}
.cmp-k{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:var(--red);color:#fff;border:3px solid #fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.55);transition:transform .25s var(--ease),background-color .25s var(--ease)}
.cmp-knob:hover .cmp-k{background:var(--red-deep)}
.cmp.dragging,.cmp.dragging .cmp-knob{cursor:grabbing}
.cmp.dragging .cmp-k{transform:scale(1.08);background:var(--red-deep)}
.cmp-knob:focus-visible .cmp-k{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.cmp-hint{margin-top:16px;text-align:center;color:var(--ink-2);font-size:var(--fs-sm)}
.sig-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 24px;margin-top:clamp(26px,3vw,40px)}
.sig-foot .promise{margin-top:0}
@media (max-width:900px){.sig-head{grid-template-columns:1fr;align-items:start}}
@media (max-width:700px){.cmp{--k:50px}.cmp-media{aspect-ratio:4/3}.cmp-tag{font-size:var(--fs-xs);padding:6px 12px}}
@media print{.cmp-line,.cmp-knob,.cmp-hint{display:none}}

/* branches: the name is a link to the branch on Google Maps */
.maplink{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:underline;text-decoration-color:rgba(218,31,38,.35);text-decoration-thickness:2px;text-underline-offset:6px;transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.maplink svg{color:var(--red);flex:none;transition:transform .3s var(--ease)}
.maplink:hover,.maplink:focus-visible{color:var(--red);text-decoration-color:var(--red)}
.maplink:hover svg{transform:translateY(-3px)}

/* top clients: white logo tiles drifting along the red band under the hero */
.clients{background:var(--red);color:#fff;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(14px,2vw,28px);padding-block:clamp(16px,1.8vw,24px) clamp(4px,.6vw,10px);padding-inline-start:var(--gut);overflow:hidden}
.clients-head{display:flex;align-items:center;gap:12px;padding-bottom:14px}
.clients h2{margin:0;font-size:var(--fs-lg);font-weight:800;white-space:nowrap;line-height:1.3}
.clients-view{overflow:hidden;cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;padding-block:10px 24px;-webkit-mask-image:linear-gradient(to left,transparent 0,#000 4%,#000 90%,transparent);mask-image:linear-gradient(to left,transparent 0,#000 4%,#000 90%,transparent)}
.clients-view.drag{cursor:grabbing}
.clients-view:focus-visible{outline:3px solid #fff;outline-offset:-3px;border-radius:0 18px 0 18px}
.clients-track{list-style:none;margin:0;padding:0;display:flex;gap:clamp(10px,1.2vw,16px);width:max-content;will-change:transform}
.client{flex:none;width:clamp(138px,13vw,188px);height:clamp(74px,6.6vw,96px);display:grid;place-items:center;background:#fff;border-radius:0 18px 0 18px;box-shadow:0 12px 24px -16px rgba(60,6,8,.55)}
.client img{max-width:80%;max-height:64%;width:auto;height:auto;object-fit:contain;pointer-events:none}
.client.txt span{color:var(--ink);font-weight:800;font-size:var(--fs-sm);line-height:1.35;text-align:center;padding-inline:10px}
@media (max-width:700px){.clients{grid-template-columns:1fr;padding-inline-start:0;row-gap:4px}.clients-head{padding-inline:var(--gut);padding-bottom:0;justify-content:space-between}
  .clients-view{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to left,transparent 0,#000 6%,#000 94%,transparent)}}
@media (max-width:900px){.hero-strip div{padding-top:24px}.hero-strip div:nth-child(-n+2){padding-top:clamp(36px,5vw,46px)}}
@media (max-width:600px){.hero-copy{padding-block:156px 62px}.hero-iso{inset-inline-end:auto;inset-inline-start:18px}.hero-strip div{padding-top:18px}.hero-strip div:nth-child(-n+2){padding-top:36px}}
.prod .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease-out}
.prod .frame video.on{opacity:1}

/* ---- project reels (works page) ---- */
.reels-head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.reels-head p{color:var(--mute);max-width:48ch;margin-top:10px}
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),280px));gap:18px;margin-bottom:clamp(56px,8vw,96px)}
.reel{position:relative;display:block;width:100%;aspect-ratio:9/16;overflow:hidden;isolation:isolate;border-radius:0 var(--leaf) 0 var(--leaf);background:var(--ink);color:#fff;text-align:start;cursor:pointer;box-shadow:0 30px 50px -36px rgba(31,26,23,.6);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.reel video,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease),filter .6s var(--ease)}
.reel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(20,14,12,.82),rgba(20,14,12,.1) 45%,transparent 70%)}
.reel .cap{position:absolute;inset-inline:18px;bottom:18px;display:grid;gap:4px}
.reel .cap b{font-size:var(--fs-md);line-height:1.4}
.reel .cap span{font-size:var(--fs-xs);color:#f3e3d3;display:flex;gap:10px;align-items:center}
.reel .cap .mono{font-size:var(--fs-xs);letter-spacing:.02em;font-style:normal}
.reel .play{position:absolute;top:16px;inset-inline-start:16px;width:48px;height:48px;border-radius:0 16px 0 16px;background:var(--red);display:grid;place-items:center;box-shadow:0 12px 24px -12px rgba(120,20,20,.8);transition:transform .5s var(--ease),background .3s}
.reel .play svg{width:18px;height:18px;fill:#fff}
.reel:hover{transform:translateY(-6px);box-shadow:0 44px 60px -40px rgba(31,26,23,.7)}
.reel:hover video,.reel:hover img{transform:scale(1.05)}
.reel:hover .play{transform:scale(1.08);background:var(--red-deep)}
.reel:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.player{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:#fff}
.player::backdrop{background:rgba(20,14,12,.94)}
.player[open]::backdrop{animation:bdin .35s ease-out}
@keyframes bdin{from{opacity:0}}
.player .stage{position:absolute;inset:0;display:grid;grid-template-columns:auto minmax(0,auto) auto;align-items:center;justify-content:center;gap:clamp(10px,3vw,40px);padding:clamp(56px,6vh,80px) 16px clamp(20px,4vh,40px)}
.player figure{margin:0;display:grid;gap:14px;justify-items:start}
.player .frame-v{position:relative;height:min(calc(100svh - clamp(56px,6vh,80px) - clamp(20px,4vh,40px) - 90px),calc((100vw - 32px) * 16 / 9));aspect-ratio:9/16;max-width:calc(100vw - 32px);border-radius:0 calc(var(--leaf) * .6) 0 calc(var(--leaf) * .6);overflow:hidden;background:#000;box-shadow:0 60px 90px -50px rgba(0,0,0,.9)}
.player .frame-v.wide{aspect-ratio:16/9;height:auto;width:min(84vw,calc((100svh - 200px) * 16 / 9))}
.player video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.player figcaption{display:grid;gap:2px}
.player figcaption b{font-size:var(--fs-lg)}
.player figcaption span{color:#e9d9c9;font-size:var(--fs-sm)}
.player .x,.player .nav-b{width:52px;height:52px;border-radius:0 18px 0 18px;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.35);color:#fff;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.player .x{position:absolute;top:16px;inset-inline-end:16px;z-index:2}
.player .x:hover,.player .nav-b:hover{background:var(--red);border-color:var(--red)}
.player .nav-b:disabled{opacity:.3;pointer-events:none}
.player svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.player .x:focus-visible,.player .nav-b:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:700px){
  .reels{grid-template-columns:1fr 1fr;gap:12px}
  .reel .cap{inset-inline:12px;bottom:12px}
  .reel .cap b{font-size:var(--fs-sm)}
  .reel .play{width:40px;height:40px;top:12px;inset-inline-start:12px}
  .player .stage{grid-template-columns:1fr;justify-items:center;padding-top:76px}
  .player .nav-b{display:none}
  .player .frame-v{height:min(calc(100svh - 76px - clamp(20px,4vh,40px) - 90px),calc((100vw - 32px) * 16 / 9))}
}
@media (max-height:520px) and (orientation:landscape){
  .player .stage{padding:16px 84px 16px 16px}
  .player figure{grid-template-columns:auto auto;align-items:end;gap:18px}
  .player .frame-v{height:calc(100svh - 32px)}
  .player .frame-v.wide{height:auto;width:min(70vw,calc((100svh - 32px) * 16 / 9))}
}
.motion-t{display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:18px;border-radius:0 16px 0 16px;border:1.5px solid var(--line-2);font-weight:700;color:var(--ink-2);transition:border-color .3s,color .3s}
.motion-t svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.motion-t .ir{fill:currentColor;stroke:none;display:none}
.motion-t[aria-pressed="true"] .ir{display:inline}
.motion-t[aria-pressed="true"] .ip{display:none}
.motion-t:hover{border-color:var(--red);color:var(--red-deep)}
.motion-t:focus-visible{outline:3px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .reel,.reel video,.reel img,.reel .play{transition:none}
  .reel:hover{transform:none}
  .reel:hover video,.reel:hover img{transform:none}
}