/* Micro2 theme: global styles.
   Section styles (hero, channels, work and so on) ship with their Elementor widgets
   and only load on pages that use them. This file covers what every page needs.
   Uses logical properties (inline-start/end) so the Arabic site mirrors correctly. */

/* ---------- tokens ---------- */
:root{
  --m2-black:#000;
  --m2-panel:#070707;
  --m2-glass:rgba(8,8,8,.58);
  --m2-line:rgba(244,239,230,.12);
  --m2-line-hi:rgba(244,239,230,.3);
  --m2-cream:#F4EFE6;
  --m2-mute:rgba(244,239,230,.62);
  --m2-gold:#C99D51;
  --m2-gold-hi:#E2BE7E;
  --m2-gold-soft:rgba(201,157,81,.1);
  --m2-ink:#0B0B0B;
  --m2-ok:#3ECF6E;
  --m2-display:"Bebas Neue","Oswald",Impact,"Arial Narrow",sans-serif;
  --m2-body:"Outfit","Helvetica Neue",Arial,sans-serif;
  --m2-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --m2-gl:max(clamp(16px,4.5vw,64px),env(safe-area-inset-left,0px));
  --m2-gr:max(clamp(16px,4.5vw,64px),env(safe-area-inset-right,0px));
  /* one vertical rhythm for every section: phones 48px, desktop up to 88px (sections stack, so the gap between two is double) */
  /* vertical rhythm: three steps, set per screen size below (desktop / tablet / phone) */
  --m2-space-s:48px;
  --m2-space-m:88px;
  --m2-space-l:136px;
  --m2-header-h:80px;
  --m2-sec:var(--m2-space-m);    /* between sections */
  --m2-sec-sm:var(--m2-space-s); /* between blocks inside a section */
  --m2-top-m:calc(var(--m2-header-h) + var(--m2-space-m) + var(--m2-nav-top)); /* page heroes: under the header */
  --m2-top-s:calc(var(--m2-header-h) + var(--m2-space-s) + var(--m2-nav-top)); /* compact tops (booking, work, hubs) */
  --m2-sticky-top:calc(var(--m2-header-h) + var(--m2-space-s) + var(--m2-nav-top)); /* sticky side columns */
  --m2-ease-out:cubic-bezier(.2,.8,.2,1);
  --m2-ease-io:cubic-bezier(.7,0,.2,1);
  --m2-nav-top:0px;
  color-scheme:dark;
}
/* Arabic: Bebas and Outfit have no Arabic glyphs. */
:root:lang(ar){
  --m2-display:"Noto Kufi Arabic","Bebas Neue",sans-serif;
  --m2-body:"IBM Plex Sans Arabic","Outfit",Arial,sans-serif;
}
.admin-bar{--m2-nav-top:32px}
@media (max-width:1199.98px){:root{--m2-space-s:40px;--m2-space-m:72px;--m2-space-l:104px}}
@media (max-width:767.98px){:root{--m2-space-s:28px;--m2-space-m:48px;--m2-space-l:80px;--m2-header-h:86px}}
@media (max-width:782px){.admin-bar{--m2-nav-top:46px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--m2-black);-webkit-text-size-adjust:100%;overflow-x:clip} /* safety net: nothing may widen the page on phones (overflow-x: clip, unlike hidden, keeps sticky working) */
body{margin:0;background:var(--m2-black);color:var(--m2-cream);font-family:var(--m2-body);font-size:17px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--m2-gold);color:var(--m2-black)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,svg,video{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--m2-gold);outline-offset:3px}
[hidden]{display:none!important}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{clip:auto;width:auto;height:auto;margin:0;inset-block-start:calc(var(--m2-nav-top) + 8px);inset-inline-start:8px;z-index:200;padding:12px 18px;background:var(--m2-gold);color:var(--m2-black);font-weight:500}

/* ---------- type and layout utilities ---------- */
.wrap{padding-inline:var(--m2-gl) var(--m2-gr)}
.gold{color:var(--m2-gold)}
.eyebrow{font-family:var(--m2-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--m2-mute);margin:0}
.display{font-family:var(--m2-display);font-weight:400;text-transform:uppercase;line-height:.86;letter-spacing:.004em;text-wrap:balance;margin:0}
.h2{font-size:clamp(3rem,7vw,7.4rem);margin:16px 0 24px}
.lead{max-width:44ch;color:var(--m2-mute);font-size:clamp(17px,1.3vw,20px);margin:0}
/* Split-text wrappers used by the reveal animation. */
.w{display:inline-block;overflow:hidden;vertical-align:top;white-space:nowrap;padding:.04em 0 .08em;margin:-.04em 0 -.08em}
.ch{display:inline-block;will-change:transform}
/* Arabic letters join, so Arabic headings animate word by word, never per letter. */
:lang(ar) .display{line-height:1.2;letter-spacing:0;text-transform:none}
:lang(ar) .eyebrow{letter-spacing:0}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 26px;font-family:var(--m2-body);font-weight:500;font-size:15px;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;transition:color .4s,border-color .4s;white-space:nowrap;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .55s var(--m2-ease-io)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn .arr{display:inline-block;transition:transform .45s var(--m2-ease-out)}
.btn:hover .arr{transform:translateX(5px)}
:dir(rtl) .btn .arr{transform:scaleX(-1)}
:dir(rtl) .btn:hover .arr{transform:scaleX(-1) translateX(5px)}
.btn-gold{background:var(--m2-gold);color:var(--m2-black)}
.btn-gold::before{background:var(--m2-cream)}
.btn-ghost{background:transparent;border-color:var(--m2-line-hi);color:var(--m2-cream)}
.btn-ghost::before{background:var(--m2-cream)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--m2-black);border-color:var(--m2-cream)}
.btn-sm{height:44px;padding:0 20px;font-size:14px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.mag{transition:color .4s,border-color .4s,transform .5s var(--m2-ease-out)}

/* ---------- grain, vignette, cursor ---------- */
/* Plain opacity, not mix-blend-mode: blending a full-screen layer over the moving 3D canvas costs every pixel, every frame. */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:80px -30px}60%{background-position:-20px -90px}80%{background-position:50px 70px}100%{background-position:0 0}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}

.cdot,.cring{position:fixed;left:0;top:0;z-index:95;pointer-events:none;display:none}
html.has-cursor .cdot,html.has-cursor .cring{display:block}
/* Native cursor stays for text fields so people can see where they are typing. */
html.has-cursor body,html.has-cursor a,html.has-cursor button{cursor:none}
/* Pop-ups open in the browser's top layer, above the custom cursor: use the normal one there. */
html.has-cursor.m2-dialog-open .cdot,html.has-cursor.m2-dialog-open .cring{display:none}
html.has-cursor.m2-dialog-open body,html.has-cursor.m2-dialog-open a,html.has-cursor.m2-dialog-open button{cursor:auto}
html.has-cursor.m2-dialog-open a,html.has-cursor.m2-dialog-open button{cursor:pointer}
.cdot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--m2-gold)}
.cring-c{position:absolute;left:0;top:0;width:40px;height:40px;transform:translate(-50%,-50%);border:1px solid rgba(244,239,230,.45);border-radius:50%;display:grid;place-items:center;transition:width .45s var(--m2-ease-out),height .45s var(--m2-ease-out),background .3s,border-color .3s}
.cring.is-link .cring-c{width:66px;height:66px;border-color:var(--m2-gold)}
.cring.is-label .cring-c{width:96px;height:96px;background:var(--m2-gold);border-color:var(--m2-gold)}
.clab{font-family:var(--m2-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--m2-black);opacity:0;transition:opacity .25s}
.cring.is-label .clab{opacity:1}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:var(--m2-black);display:flex;flex-direction:column;justify-content:space-between;padding-inline:var(--m2-gl) var(--m2-gr);padding-block:calc(28px + env(safe-area-inset-top,0px)) calc(32px + env(safe-area-inset-bottom,0px));transition:transform 1.1s cubic-bezier(.87,0,.13,1)}
/* Safety net: if the script never runs, the loader still gets out of the way. */
html:not(.js) #loader,html.ld-skip #loader{display:none}
/* later pages of a visit: no loader, just a quick fade in */
html.ld-skip body{animation:m2-pagein .45s ease-out both}
@keyframes m2-pagein{from{opacity:0}}
@media (prefers-reduced-motion:reduce){html.ld-skip body{animation:none}}
html.ld-active,html.ld-active body{overflow:hidden}
#loader{animation:ldAuto .5s ease 4.5s forwards}
@keyframes ldAuto{to{opacity:0;visibility:hidden}}
#loader.done{transform:translateY(-100%)}
.ld-logo .logo-txt{font-size:30px}
.ld-logo img{height:30px;width:auto}
.ld-num{font-family:var(--m2-display);font-size:clamp(7rem,27vw,27rem);line-height:.78;font-variant-numeric:tabular-nums}
.ld-row{display:flex;justify-content:space-between;gap:16px;margin-top:18px;font-family:var(--m2-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--m2-mute)}
.ld-row b{color:var(--m2-gold);font-weight:500}
.ld-bar{height:1px;background:var(--m2-line);margin-top:14px}
.ld-bar span{display:block;height:100%;background:var(--m2-gold);transform-origin:left;transform:scaleX(0)}
:dir(rtl) .ld-bar span{transform-origin:right}

/* ---------- nav ---------- */
.nav{position:fixed;top:var(--m2-nav-top);left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:calc(18px + env(safe-area-inset-top,0px)) 18px;transition:background .5s,backdrop-filter .5s}
.nav.scrolled,html.mnav-open .nav{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.logo{display:inline-flex;align-items:center}
.logo img{height:28px;width:auto}
.logo-txt{font-family:var(--m2-display);font-size:32px;line-height:1;letter-spacing:.05em}
.nav-end{display:flex;align-items:center;gap:10px}
/* the three-bar menu button: on every screen size, in the fixed header, so it stays as you scroll */
.burger{display:block;width:44px;height:44px;border:1px solid var(--m2-line-hi);background:transparent;position:relative;cursor:pointer;transition:border-color .3s}
.burger:hover{border-color:var(--m2-gold)}
.burger i{position:absolute;left:12px;right:12px;height:1px;background:var(--m2-cream);transition:transform .45s var(--m2-ease-out),top .45s var(--m2-ease-out),opacity .3s}
.burger i:nth-of-type(1){top:15px}
.burger i:nth-of-type(2){top:21px}
.burger i:nth-of-type(3){top:27px}
.burger[aria-expanded="true"] i:nth-of-type(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-of-type(2){opacity:0}
.burger[aria-expanded="true"] i:nth-of-type(3){top:21px;transform:rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:59;background:#040302;display:flex;flex-direction:column;justify-content:flex-start;gap:18px;padding-block:calc(110px + var(--m2-nav-top) + env(safe-area-inset-top,0px)) calc(32px + env(safe-area-inset-bottom,0px));overflow-y:auto;opacity:0;transition:opacity .5s var(--m2-ease-out)}
.mnav.is-open{opacity:1}
.mnav.is-closing{opacity:0;transition-delay:.18s}
/* gold dust, drifting (the light version; desktop adds the 3D layer on top) */
.mnav-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1px 1px at 12% 18%,rgba(230,190,120,.8),transparent),radial-gradient(1px 1px at 72% 12%,rgba(230,190,120,.7),transparent),radial-gradient(1.5px 1.5px at 34% 64%,rgba(230,190,120,.6),transparent),radial-gradient(1px 1px at 86% 48%,rgba(230,190,120,.7),transparent),radial-gradient(1px 1px at 54% 86%,rgba(230,190,120,.6),transparent),radial-gradient(1.5px 1.5px at 22% 92%,rgba(230,190,120,.5),transparent),radial-gradient(1px 1px at 92% 82%,rgba(230,190,120,.6),transparent),radial-gradient(1px 1px at 6% 46%,rgba(230,190,120,.6),transparent),radial-gradient(45% 40% at 78% 40%,rgba(201,157,81,.13),transparent 70%),radial-gradient(40% 36% at 14% 80%,rgba(201,157,81,.08),transparent 70%);background-size:420px 420px,380px 380px,460px 460px,400px 400px,440px 440px,500px 500px,360px 360px,480px 480px,100% 100%,100% 100%;animation:m2-mdust 60s linear infinite}
@keyframes m2-mdust{to{background-position:0 -420px,0 -380px,0 -460px,0 -400px,0 -440px,0 -500px,0 -360px,0 -480px,0 0,0 0}}
.mnav-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-width:min(52vw,720px)}
.mnav-list>li{opacity:0;transform:translateY(34px);transition:opacity .55s var(--m2-ease-out),transform .7s var(--m2-ease-out);transition-delay:calc(var(--r,0) * .04s)}
.mnav.is-open .mnav-list>li{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0) * .07s)}
.mnav-list>li>a{position:relative;display:inline-block;font-family:var(--m2-display);font-size:clamp(3rem,min(14vw,11vh),7rem);line-height:1;text-transform:uppercase;padding-block:4px;background:linear-gradient(90deg,var(--m2-gold) 0 50%,var(--m2-cream) 50% 100%) 100% 0/200% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .6s var(--m2-ease-out),transform .5s var(--m2-ease-out),opacity .4s}
.mnav-list>li>a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--m2-gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--m2-ease-out)}
.mnav-list>li>a:hover,.mnav-list>li>a:focus-visible{background-position:0 0;transform:translateX(14px)}
.mnav-list>li>a:hover::after,.mnav-list>li>a:focus-visible::after{transform:scaleX(1)}
@media (hover:hover){.mnav-list:hover>li>a:not(:hover){opacity:.32}}
.mnav-phone{display:inline-grid;gap:4px;margin-top:auto;padding-top:20px;color:var(--m2-cream);opacity:0;transform:translateY(16px);transition:opacity .6s .4s,transform .7s .4s var(--m2-ease-out)}
.mnav.is-open .mnav-phone{opacity:1;transform:none}
.mnav-phone b{font-size:clamp(2.2rem,3.2vw,3.2rem);line-height:1;font-variant-numeric:tabular-nums}
.mnav-phone:hover b{color:var(--m2-gold)}
.mnav-foot{display:flex;flex-wrap:wrap;gap:20px 40px;margin-top:0;opacity:0;transition:opacity .6s .5s}
.mnav.is-open .mnav-foot{opacity:1}
.mnav-foot p{margin:0;display:grid;gap:6px}
/* the preview side (desktop with a pointer) */
.mnav-pane{display:none}
@media (min-width:900px) and (hover:hover){
  .mnav-pane{display:block;position:fixed;top:0;right:0;bottom:0;width:46vw;pointer-events:none}
  .mnav-gl{position:absolute;inset:0;width:100%;height:100%}
  .mnav-prev{position:absolute;inset:0;z-index:1;display:grid;place-items:end center;padding-bottom:12vh;opacity:0;transition:opacity .6s var(--m2-ease-out)}
  .mnav[data-preview="services"] [data-prev="services"],.mnav[data-preview="about"] [data-prev="about"],.mnav[data-preview="work"] [data-prev="work"],.mnav[data-preview="contact"] [data-prev="contact"]{opacity:1}
  .mnav-prev-contact{place-items:end center;align-content:end;gap:8px;text-align:center}
  .mnav-prev-contact b{font-size:clamp(2.4rem,3.4vw,3.6rem);color:var(--m2-gold)}
  .mnav-phone{display:none}
}

/* ---------- plain pages, posts, archives ---------- */
.page-pad{padding-block:var(--m2-top-m) var(--m2-space-l);min-height:70vh}
.page-head{margin-bottom:40px}
.prose{max-width:72ch;font-size:18px}
.prose>*+*{margin-top:1.1em}
.prose h2,.prose h3{font-family:var(--m2-display);font-weight:400;text-transform:uppercase;line-height:.95;margin-top:1.6em}
.prose h2{font-size:clamp(2.2rem,4vw,3.4rem)}
.prose h3{font-size:clamp(1.8rem,3vw,2.4rem)}
.prose a:not(.btn){color:var(--m2-gold);text-decoration:underline;text-underline-offset:3px}
.prose img{border:1px solid var(--m2-line)}
.prose blockquote{margin-inline:0;padding-inline-start:20px;border-inline-start:2px solid var(--m2-gold);color:var(--m2-mute)}
.post-hero{margin:0 0 40px}
.post-hero img{width:100%;border:1px solid var(--m2-line)}
.post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--m2-line)}
.post-row{display:grid;gap:8px;padding-block:28px;border-bottom:1px solid var(--m2-line)}
.post-row-title{font-family:var(--m2-display);font-size:clamp(2rem,4vw,3.4rem);line-height:.95;text-transform:uppercase;transition:color .4s}
.post-row:hover .post-row-title{color:var(--m2-gold)}
.post-row-ex{color:var(--m2-mute);max-width:70ch}
.pagination{margin-top:40px;font-family:var(--m2-mono);font-size:13px}
.pagination .nav-links{display:flex;gap:16px}
.pagination .current{color:var(--m2-gold)}
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:24px;padding-block:140px 80px}
.nf-num{font-size:clamp(9rem,34vw,30rem);line-height:.8;color:var(--m2-gold)}

/* ---------- footer: content over a full-bleed scene ---------- */
.foot{position:relative;z-index:2;overflow:hidden;isolation:isolate;background:#060606;border-top:1px solid var(--m2-line);display:flex}
.foot-in{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;padding-block:72px calc(24px + env(safe-area-inset-bottom,0px));pointer-events:none} /* empty space passes clicks to the scene */
.foot-in a,.foot-in button,.foot-in input,.foot-in select{pointer-events:auto}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px clamp(24px,3vw,48px);text-shadow:0 1px 14px rgba(0,0,0,.85)} /* contact | follow | offices | ask AI, with the M and the 2 behind */
.foot-col{min-width:0}
.foot-col>*+div{margin-top:28px}
.foot h4{font-family:var(--m2-mono);font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--m2-mute);margin:0 0 14px}
.foot p{margin:0;font-size:15.5px;line-height:1.7}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15.5px}
.foot a{transition:color .3s}
.foot a:hover{color:var(--m2-gold)}
.foot-dim{color:var(--m2-mute);font-size:13px}
.foot-book{margin-top:18px}
.foot-icons{grid-template-columns:repeat(2,minmax(0,max-content));gap:10px 22px!important}
.foot-icons a,.m2-ask-ai a{display:inline-flex;align-items:center;gap:10px}
.m2-ico{width:18px;height:18px;flex:none}
.foot-stage{height:290px} /* the M and the 2 stand here, under the columns (footer3d.js sizes it to the letters) */
.foot-base{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 24px;font-size:13px;color:var(--m2-mute);padding-top:22px;border-top:1px solid rgba(244,239,230,.1)}
.foot-places{font-family:var(--m2-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.foot-top-link{font-family:var(--m2-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--m2-cream)}
.foot-legal{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px 20px}
.foot-legal ul{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.foot-sister{font-family:var(--m2-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--m2-cream)}

/* ---------- responsive ---------- */
@media (max-width:899.98px){
  .grain{display:none} /* saves a full-screen layer on phones */
  .nav .btn-sm{padding:0 14px}
  .foot{min-height:0}
  .foot-in{padding-top:var(--m2-sec)} /* 48px on phones, like every section */
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-stage{height:220px}
  .foot-base{grid-template-columns:1fr auto;row-gap:14px}
  .foot-legal{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:520px){
  .btn{height:50px;padding:0 20px}
  .nav .btn-sm .arr{display:none}
  .foot-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .grain{display:none}
}
/* office names that link somewhere (e.g. Dubai → its home page section) */
.mnav-foot .eyebrow a,.foot-places a{color:var(--m2-cream);border-bottom:1px solid rgba(201,157,81,.6);padding-bottom:2px;transition:color .3s,border-color .3s}
.mnav-foot .eyebrow a:hover,.foot-places a:hover{color:var(--m2-gold);border-color:var(--m2-gold)}

/* ---------- floating buttons: back to top (above WhatsApp), and all of them step aside from buttons and fields ---------- */
.m2-totop{--wa:56px;position:fixed;z-index:65;inset-inline-end:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px));width:44px;height:44px;margin-inline-end:6px;padding:0;border:1px solid var(--m2-gold);border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--m2-gold);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s,transform .35s var(--m2-ease-out),visibility 0s .35s,background .25s,color .25s}
body:has(.m2-wa) .m2-totop{bottom:calc(max(20px,calc(env(safe-area-inset-bottom,0px) + 12px)) + var(--wa) + 12px)}
.m2-totop svg{width:20px;height:20px}
.m2-totop.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s var(--m2-ease-out),visibility 0s,background .25s,color .25s}
.m2-totop:hover,.m2-totop:focus-visible{background:var(--m2-gold);color:#000}
.m2-totop:focus-visible{outline:2px solid var(--m2-gold);outline-offset:3px}
html.mnav-open .m2-totop{display:none}
.m2-wa,.m2-totop{transition-property:opacity,transform,visibility,background,color,box-shadow}
.m2-wa.is-aside,.m2-totop.is-aside,.cky-btn-revisit-wrapper.is-aside{opacity:0!important;transform:scale(.7)!important;pointer-events:none!important}
.cky-btn-revisit-wrapper{transition:opacity .3s,transform .3s!important}
@media (max-width:767px){.m2-totop{--wa:48px;width:40px;height:40px;margin-inline-end:4px}}
@media print{.m2-totop{display:none}}

/* Buttons keep their own hover colours: dark text on the cream sweep. Without this, any
   "links turn gold on hover" rule (footer, prose, an old Elementor kit) made the label
   gold on gold and it disappeared. */
/* every state, so no "links are gold" rule anywhere (prose, footer, an old Elementor kit) can
   turn a label the colour of its button: gold buttons dark text, ghost buttons cream text,
   both dark text on the cream hover sweep */
.btn.btn-gold,.btn.btn-gold:visited{color:var(--m2-black)!important;text-decoration:none!important}
.btn.btn-ghost,.btn.btn-ghost:visited{color:var(--m2-cream)!important;text-decoration:none!important}
.btn.btn-gold:is(:hover,:focus-visible,:active),.btn.btn-ghost:is(:hover,:focus-visible,:active){color:var(--m2-black)!important}
.btn :is(.arr,svg){color:inherit}