@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');

html{  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: none;min-height: 100%;}input,select,textarea{-webkit-appearance:none}
body{margin:0;font-family:Arial;font-size:14px;position:relative;min-height: 100vh;}
*,*:before,*:after{
      margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;

}

a,
a:hover,
input,
textarea,
select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: 0 none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
nav,
section,
summary,
main {
  display: block;
}

/* Lists */
ol {
  list-style: decimal inside;
  margin-bottom: 20px;

  li { padding: 5px 0 5px 15px; }
}

ul { list-style: none; }

/* Quotes */
blockquote,
q { quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after { content: none; }

.c,hr{clear:both;font-size:0;overflow:hidden;display:block;border: 0;}
a{color:#1c85ed;outline:none}a:hover{text-decoration:none}a img{border:0}
.wrap{width:1440px;margin:0 auto;max-width:94%}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.alignleft  { float: left;  margin: 0 30px 10px 0; }
.alignright { float: right; margin: 0 0 10px 30px; }
.aligncenter { margin: 0 auto 20px; }
.alignnone { margin: 0 0 20px; }

@media only screen and (max-width:767px) {
    .alignleft,
    .aligncenter,
    .alignright {

        float: none;
        margin: 0 auto 20px;

    }
}




footer {
  position: sticky;
  top: 100%;
}




















#m_rwd{
    z-index: 20;
}

@media only screen and (min-width:1025px) {
	#m_rwd, #mod_add_content{display:none}
	
	
}



@media only screen and (max-width:1024px) {

	/* Mobile Menu WP */
	#m_rwd, #mainmenu, #mainmenu li a,#mainmenu .menu-item-has-children>span:after{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease}
	#mainmenu{position:fixed;top:0;bottom:0;left:105%;right:0;z-index:10;background: rgba(51,51,51,0.98);box-shadow:0 5px 10px rgba(0,0,0,.5);overflow:auto;}
	#mainmenu li { border-bottom: 1px solid #000; border-top: 1px solid #555; display: block; position:relative;padding:0;margin:0 }
	#mainmenu li a { height: 50px;  line-height:50px;display: block; color: #fff; font-size: 18px;text-decoration:none;text-transform:uppercase;padding:0 10px;margin:0}
	#mainmenu li a:hover{background:#555}
	#mainmenu .menu-item-has-children>span{position:absolute;top:0;right:0;width:50px;height:50px;background:rgba(0,0,0,.3);cursor:pointer}
	#mainmenu .menu-item-has-children>span:before,#mainmenu .menu-item-has-children>span:after{content:"";position:absolute;top:50%;left:50%;background:#ccc;width:15px;height:3px;transform:translate(-50%,-50%)}
	#mainmenu .menu-item-has-children>span:after{width:3px;height:15px}
	#mainmenu li li a{padding:0 15px}#mainmenu li li li a{padding:0 20px}#mainmenu li li li li a{padding:0 25px}
	#mainmenu .sub-menu>li{border-bottom:0;box-shadow:0 0 0 1px #000}
	#mainmenu .sub-menu li{background:rgba(0,0,0,.15);}
	#mainmenu .sub-menu{display:none}
	#mainmenu .menu-item-has-children>span.act+ul{display:block}
	#mainmenu .menu-item-has-children>span.act:after{transform:translate(-50%,-50%) rotate(90deg)}
	#m_rwd.act+#mainmenu{left:0}

	#m_rwd {
    display: block;
    width: 30px;
    height: 30px;
    float: right;
    position: relative;
    cursor: pointer;
    margin: 8px 8px 7px 10px;
    background: #00b4ff;
    transition: background .3s;
}

#m_rwd span,
#m_rwd span:before,
#m_rwd span:after {
    content: "";
    position: absolute;
    left: 50%;
    width: 20px;
    height: 3px;
    background: #fff;
    transition: all .3s ease;
}

#m_rwd span {
    top: 50%;
    transform: translate(-50%, -50%);
}

#m_rwd span:before {
    top: -7px;
    left: 0;
}

#m_rwd span:after {
    top: 7px;
    left: 0;
}

#m_rwd:hover,
#m_rwd.act {
    background: #e31e24;
}

/* ===== Cross Animation ===== */

#m_rwd.act span {
    background: transparent;
}

#m_rwd.act span:before {
    top: 0;
    transform: rotate(45deg);
}

#m_rwd.act span:after {
    top: 0;
    transform: rotate(-45deg);
}
	/* End of Mobile Menu WP */

}



:root{
  /* ---- Brand colors (single scheme) ---- */
  --color-accent:        #364fe0;
  --color-accent-dark:   #2b3fb3;
  --color-accent-soft:   #5b74ea;
  --color-ink:           #1f1f1f;
  --color-text:          #757575;
  --color-text-soft:     #9a9a9a;
  --color-white:         #ffffff;
  --color-bg-soft:       #f7f7f7;
  --color-bg-card:       #f4f4f4;
  --color-border:        #e6e6e6;
  --color-dark-bg:       #1c1c1c;
  --color-darker-bg:     #131313;
  --color-dark-panel:    #292929;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  /* ---- Layout ---- */
  --wrap-width: 1440px;
  --wrap-gutter: 3vw;
  --section-pad-lg: 9rem;
  --section-pad-md: 6rem;
  --section-pad-sm: 3.5rem;
  --radius: 4px;

  /* Header is sized with `height`, never with vertical padding, so its
     box never jumps around as content or breakpoints change. Desktop-only
     (>=1025px) shrinks from --header-h to --header-h-sm once .sm is added
     on scroll. At <=1024px the header is permanently --header-h-mobile
     (smaller than --header-h-sm) and the .sm scroll class never resizes
     it — see the two header rules below theme.css's header section. */
  --header-h: 6.5rem;
  --header-h-sm: 5rem;
  --header-h-mobile: 4rem;

  /* ---- Motion ---- */
  --ease: .3s ease;
}

/* Allow .wrap (defined in style.css) to follow the theme variable */
.wrap{ width:var(--wrap-width); }

html{ font-size:16px; }
body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--color-text);
  background:var(--color-white);
}

@media (max-width:767px){
  html{ font-size:15px; }
}

/* ==========================================================================
   Generic elements
   ========================================================================== */

section{ position:relative; }

.gx-block{ padding-top:var(--section-pad-lg); padding-bottom:var(--section-pad-lg); }
.gx-block--sm{ padding-top:var(--section-pad-sm); padding-bottom:var(--section-pad-sm); }

@media (max-width:991px){
  .gx-block{ padding-top:var(--section-pad-md); padding-bottom:var(--section-pad-md); }
}
@media (max-width:767px){
  .gx-block{ padding-top:30px; padding-bottom:30px; }
}

img{ user-select:none; }

.gx-heading-xl,
.gx-heading-lg,
.gx-heading-sm{
  font-family:var(--font-display);
  color:var(--color-ink);
  line-height:1.25;
  font-weight:400;
  margin:0 0 1rem;
}

.gx-heading-xl{ font-size:clamp(2.4rem, 4.6vw, 4.5rem); line-height:1.15; }
.gx-heading-lg{ font-size:clamp(1.9rem, 2.9vw, 2.7rem); }
.gx-heading-sm{ font-size:1.35rem; }

.gx-kicker{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  color:var(--color-accent);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
}
.gx-kicker::before{
  content:"";
  display:inline-block;
  width:2.4rem;
  height:2px;
  background:var(--color-accent);
}
.gx-align-center.gx-kicker{ justify-content:center; }

.gx-lede{
  font-size:1.2rem;
  font-weight:600;
  line-height:1.6;
  color:var(--color-ink);
  margin:0 0 1.1rem;
}

.gx-copy{
  font-size:1.05rem;
  line-height:1.85;
  color:var(--color-text);
  margin:0 0 1.5rem;
}

.gx-align-center{ text-align:center; }

.gx-kicker-group{ margin-bottom:3.5rem; }

/* ==========================================================================
   Buttons & text links
   ========================================================================== */

.gx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid transparent;
  border-radius:var(--radius);
  padding:.95rem 2.6rem;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background-color var(--ease), color var(--ease), border-color var(--ease);
  text-decoration:none;
}

.gx-btn--solid{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:var(--color-white);
  box-shadow:0 0 0 rgba(54,79,224,0);
  transition:background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.gx-btn--solid:hover,
.gx-btn--solid:focus-visible{
  background:var(--color-accent-dark);
  border-color:var(--color-accent-dark);
  color:var(--color-white);
  box-shadow:0 10px 26px rgba(43,63,179,.32);
}

.gx-btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.4);
  color:var(--color-white);
}
.gx-btn--ghost:hover{ background:var(--color-white); border-color:var(--color-white); color:var(--color-ink); }

.gx-btn--link{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color:var(--color-accent);
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  transition:color var(--ease), gap var(--ease);
}
.gx-btn--link .gx-ico{ background-color:var(--color-accent); transition:background-color var(--ease); }
.gx-btn--link:hover{ color:var(--color-accent-dark); gap:.9rem; }
.gx-btn--link:hover .gx-ico{ background-color:var(--color-accent-dark); }

/* ==========================================================================
   Icons — every gx-ico is one of the SVGs in /img/svg, applied as a CSS mask
   so its color can be controlled and changed on hover.
   ========================================================================== */

.gx-ico{
  display:inline-block;
  width:1.2rem;
  height:1.2rem;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  flex:none;
}

.gx-ico-search{ -webkit-mask-image:url(img/svg/search.svg); mask-image:url(img/svg/search.svg); }
.gx-ico-fb{ -webkit-mask-image:url(img/svg/facebook.svg); mask-image:url(img/svg/facebook.svg); }
.gx-ico-li{ -webkit-mask-image:url(img/svg/linkedin.svg); mask-image:url(img/svg/linkedin.svg); }
.gx-ico-tw{ -webkit-mask-image:url(img/svg/twitter.svg); mask-image:url(img/svg/twitter.svg); }
.gx-ico-pinterest{ -webkit-mask-image:url(img/svg/pinterest.svg); mask-image:url(img/svg/pinterest.svg); }
.gx-ico-ig{ -webkit-mask-image:url(img/svg/instagram.svg); mask-image:url(img/svg/instagram.svg); }
.gx-ico-phone{ -webkit-mask-image:url(img/svg/phone.svg); mask-image:url(img/svg/phone.svg); }
.gx-ico-mail{ -webkit-mask-image:url(img/svg/mail.svg); mask-image:url(img/svg/mail.svg); }
.gx-ico-pin{ -webkit-mask-image:url(img/svg/maps-and-flags.svg); mask-image:url(img/svg/maps-and-flags.svg); }
.gx-ico-play{ -webkit-mask-image:url(img/svg/play-button-arrowhead.svg); mask-image:url(img/svg/play-button-arrowhead.svg); }
.gx-ico-design{ -webkit-mask-image:url(img/svg/setting.svg); mask-image:url(img/svg/setting.svg); }
.gx-ico-web{ -webkit-mask-image:url(img/svg/link.svg); mask-image:url(img/svg/link.svg); }
.gx-ico-seo{ -webkit-mask-image:url(img/svg/filter.svg); mask-image:url(img/svg/filter.svg); }
.gx-ico-arrow{ -webkit-mask-image:url(img/svg/right-arrow-tail.svg); mask-image:url(img/svg/right-arrow-tail.svg); }
.gx-ico-chevron{ -webkit-mask-image:url(img/svg/right-arrow.svg); mask-image:url(img/svg/right-arrow.svg); }
.gx-ico-close{ -webkit-mask-image:url(img/svg/minus.svg); mask-image:url(img/svg/minus.svg); }
.gx-ico-view{ -webkit-mask-image:url(img/svg/external-link.svg); mask-image:url(img/svg/external-link.svg); }
.gx-ico-tiktok{ -webkit-mask-image:url(img/svg/tik-tok.svg); mask-image:url(img/svg/tik-tok.svg); }
.gx-ico-youtube{ -webkit-mask-image:url(img/svg/youtube.svg); mask-image:url(img/svg/youtube.svg); }
.gx-ico-whatsapp{ -webkit-mask-image:url(img/svg/whatsapp.svg); mask-image:url(img/svg/whatsapp.svg); }

/* ==========================================================================
   Header
   — full-bleed width (no .wrap cap — see the gx-topbar markup)
   — sized with `height` + `align-items:center`, never with padding
   — desktop and mobile rules are fully separated: nothing that targets
     desktop layout is allowed to run without a `min-width:1025px` guard,
     and the mobile block below is the ONLY place mobile is styled
   ========================================================================== */

header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  width:100%;
}

/* push page content below the fixed header on every section that isn't
   meant to sit underneath it (the hero intentionally starts at 0 so the
   header can float, transparent, over the image/diagonal background) */
.hero{ margin-top:0; }

.gx-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  padding: 0 3%;
  transition:background-color var(--ease), height var(--ease), box-shadow var(--ease);
}

/* .sm (scroll-triggered compact) only ever applies on desktop — on mobile/
   tablet the header is already permanently compact (see the <=1024px block
   below) and must stay a fixed, static size regardless of the .sm class. */
@media (min-width:1025px){
  header.sm .gx-topbar{
    background:var(--color-white);
    box-shadow:0 8px 30px rgba(0,0,0,.06);
    height:var(--header-h-sm);
  }
}

.logo{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--color-ink);
  text-decoration:none;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  flex:none;
}
.gx-logo-mark{
  display:inline-block;
  width:1.5rem;
  height:1.82rem;
  background-color:currentColor;
  -webkit-mask-image:url(img/svg/logo-mark.svg);
  mask-image:url(img/svg/logo-mark.svg);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  flex:none;
}

/* ---- Desktop nav (>=1025px only) --------------------------------------- */
@media (min-width:1025px){
  #mainmenu{ flex:1; }
  #mainmenu nav{ display:flex; justify-content:flex-end; }
  #mainmenu > nav > ul{
    display:flex;
    align-items:center;
    gap:2.6rem;
    list-style:none;
    margin:0;
    padding:0;
  }
  #mainmenu > nav > ul > li{ position:relative; }
  #mainmenu > nav > ul > li > a{
    display:block;
    color:#fff;
    text-decoration:none;
    font-size:1rem;
    font-weight:600;
    padding:.5rem 0;
    transition:color var(--ease);
  }
    .sm #mainmenu > nav > ul > li > a{
        color: #000
    }
  #mainmenu > nav > ul > li > a:hover{ color:var(--color-accent); }

  /* dropdown sub-menus (fade only — no vertical movement) */
  #mainmenu .sub-menu{
    list-style:none;
    margin:0;
    padding:.9rem 0;
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    min-width:230px;
    background:var(--color-white);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--ease);
    z-index:50;
  }
  #mainmenu .menu-item-has-children:hover > .sub-menu{ opacity:1; visibility:visible; }
  #mainmenu .sub-menu .sub-menu{ top:0; left:100%; transform:none; }
  #mainmenu .sub-menu li a{
    display:block;
    padding:.6rem 1.6rem;
    color:var(--color-text);
    text-decoration:none;
    font-size:.95rem;
    white-space:nowrap;
    transition:color var(--ease), padding-left var(--ease);
  }
  #mainmenu .sub-menu li a:hover{ color:var(--color-accent); padding-left:2rem; }
  #mainmenu .menu-item-has-children > span{ display:none; }
}

/* ---- Mobile / tablet header (<=1024px only) ----------------------------
   Always rendered the way the desktop header only looks once scrolled
   (.sm): solid background, compact height, permanently — never transparent
   over the hero, regardless of scroll position. Nothing here is shared
   with, or overridden by, the desktop rules above. */
@media (max-width:1024px){
  #mainmenu{ flex:none; }

  header{ position:sticky; top:0; }
  .gx-topbar{
    background:var(--color-white);
    box-shadow:0 4px 20px rgba(0,0,0,.06);
    height:var(--header-h-mobile);
  }
}

#m_rwd{ background:var(--color-ink) !important; }
#m_rwd:hover,
#m_rwd.act{ background:var(--color-accent) !important; }

.gx-topbar__phone{
  color:var(--color-ink);
  font-weight:700;
  text-decoration:none;
  font-size:1.1rem;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  transition:color var(--ease);
}
.gx-topbar__phone:hover{ color:var(--color-accent); }

/* mobile off-canvas menu only (#mod_add_content is hidden at desktop
   widths by the base stylesheet) — phone number + social links */
@media (max-width:1024px){
  #mod_add_content{ padding:1.5rem 20px 2rem; border-top:1px solid rgba(255,255,255,.12); }
  #mod_add_content .gx-topbar__phone{ color:var(--color-white); }
  #mod_add_content .gx-topbar__phone:hover{ color:var(--color-accent); }
}

.gx-topbar__social{
  display:flex;
  gap:.6rem;
  list-style:none;
  margin:1.4rem 0 0;
  padding:0;
}
.gx-topbar__social a{
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color var(--ease), transform var(--ease);
}
.gx-topbar__social .gx-ico{
  background-color:var(--color-white);
  width:1rem;
  height:1rem;
  transition:background-color var(--ease);
}
.gx-topbar__social a:hover{ background:var(--color-accent); transform:scale(1.1); }

/* ==========================================================================
   Hero / banner slider
   ========================================================================== */

.hero{
  background:var(--color-bg-soft);
  position:relative;
  overflow:hidden;
  display:flex;
  min-height:100vh;
  min-height:100svh;
}
.hero .gx-stage{ width:100%; }
.hero::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:62%;
  height:100%;
  background:linear-gradient(100deg, #eeeeee 0%, #eeeeee 55%, transparent 56%);
  opacity:.6;
  pointer-events:none;
}

.hero .swiper-slide{ overflow:hidden; }

.gx-stage__frame{
  display:flex;
  align-items:center;
  min-height:44rem;
  padding:9.5rem 0 6rem;
  position:relative;
}
/* Desktop only: the hero now stretches to min-height:100vh/100svh, so let
   each slide's frame fill that full height and vertically center its
   content in it. Mobile keeps its own content-sized height below. */
@media (min-width:1025px){
  .gx-stage__frame{ height:100%; }
}

.gx-stage__box{
  position:relative;
  z-index:2;
  width:100%;
}

.gx-stage__text{ max-width:640px; }
.gx-stage__text .gx-heading-xl{ margin-bottom:1.6rem; }
.gx-stage__text .gx-copy{ font-size:1.2rem; margin-bottom:2.6rem; max-width:520px; }

/* Deliberately OUTSIDE .wrap (see markup): bleeds from the very top of the
   slide to the very bottom, and to the actual right edge of the viewport —
   never capped by the wrapper's max-width/gutter. */
.gx-stage__visual{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:42%;
  overflow:hidden;
}
.gx-stage__visual img{
  width:100%;
  height:100%;
  object-fit:cover;

}

.gx-stage__index{
  position:absolute;
  left:2%;
  bottom:-2.4rem;
  font-family:var(--font-display);
  font-size:9rem;
  line-height:1;
  color:rgba(0,0,0,.08);
  z-index:1;
  user-select:none;
}

.gx-stage__controls{
  position:absolute;
  right:var(--wrap-gutter);
  bottom:1.8rem;
  z-index:3;
  display:flex;
  gap:.5rem;
}
.gx-stage__controls button{
  width:3.6rem;
  height:3.6rem;
  border:none;
  border-radius:var(--radius);
  background:rgba(31,31,31,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color var(--ease), transform var(--ease);
}
.gx-stage__controls button:hover{ background:var(--color-accent); transform:scale(1.08); }
.gx-stage__controls .gx-ico{ background-color:var(--color-white); width:1rem; height:1rem; }
.gx-stage__controls .gx-stage__prev .gx-ico{ transform:scaleX(-1); }

@media (max-width:1024px){
  /* header is sticky (in normal flow, pinned on scroll) at this breakpoint,
     so the hero no longer needs generous top padding to clear a floating
     fixed header */
  .gx-stage__frame{ min-height:auto; padding:3.5rem 0 3rem; flex-direction:column; align-items:stretch; }
  /* below this breakpoint the media drops back into normal flow, stacked
     under the text, instead of bleeding to the edge */
  .gx-stage__visual{
    position:static;
    width:100%;
    height:20rem;
    margin-top:2.5rem;
  }
  .hero::before{ width:100%; }
}
@media (max-width:575px){
  .gx-stage__index{ font-size:5rem; }
}

/* ==========================================================================
   About
   ========================================================================== */

.gx-story{
  display:grid;
  grid-template-columns:minmax(0,42%) minmax(0,58%);
  gap:3rem;
  align-items:center;
}

.gx-story__visual{
  position:relative;
  height:28rem;
}
.gx-story__visual-back,
.gx-story__visual-front{
  position:absolute;
  overflow:hidden;
  background:var(--color-bg-soft);
}
.gx-story__visual-back{
  width:66%;
  height:70%;
  left:0;
  top:0;
}
.gx-story__visual-front{
  width:66%;
  height:78%;
  right:0;
  bottom:0;
  box-shadow:-14px 14px 40px rgba(0,0,0,.12);
}
.gx-story__visual img{
  width:100%;
  height:100%;
  object-fit:cover;

}

.gx-story__text .gx-lede{ font-size:1.3rem; }

@media (max-width:767px){
  .gx-story{ grid-template-columns:1fr; }
  .gx-story__visual{ height:22rem; max-width:26rem; margin:0 auto 3rem; }
    .gx-story__visual-back{
     position: relative
}
}

/* ==========================================================================
   Contact — dark closing section with the enquiry form
   ========================================================================== */

.gx-invite{
  background-color:var(--color-darker-bg);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:16px 16px;
  overflow:hidden;
}
.gx-invite .gx-heading-lg{ color:var(--color-white); }
.gx-invite .gx-lede{ color:var(--color-white); }
.gx-invite .gx-copy{ color:#a9adc7; }
.gx-invite .gx-btn--solid{ align-self:flex-start; }
.gx-invite__box{
  display:grid;
  grid-template-columns:minmax(0,42%) minmax(0,58%);
  align-items:start;
  gap:3.5rem;
  padding-top:1rem;
}
.gx-invite__text{ padding-top:1rem; }
.gx-invite__text .gx-heading-lg{ margin-bottom:1.4rem; }
.gx-invite__text .gx-copy{ margin-bottom:2rem; }

.gx-invite__form{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.gx-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
}
.gx-field input,
.gx-field textarea{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  padding:1rem 1.2rem;
  color:var(--color-white);
  font-family:var(--font-body);
  font-size:.98rem;
  transition:border-color var(--ease), background-color var(--ease);
}
.gx-field textarea{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.92rem;
  resize:vertical;
  min-height:8rem;
}
.gx-field input::placeholder,
.gx-field textarea::placeholder{ color:#7d81a0; }
.gx-field input:focus,
.gx-field textarea:focus{
  outline:none;
  border-color:var(--color-accent-soft);
  background:rgba(255,255,255,.06);
}
.gx-invite__submit{
  align-self:flex-start;
  border:none;
  background:linear-gradient(90deg, var(--color-accent), var(--color-accent-soft));
  color:var(--color-white);
  min-width:174px;
  transition:opacity var(--ease), box-shadow var(--ease);
}
.gx-invite__submit:hover{ opacity:.9; box-shadow:0 10px 26px rgba(54,79,224,.35); }
.gx-invite__submit:disabled{ cursor:not-allowed; opacity:.75; }
.gx-invite__submit-loader{
  display:none;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:var(--color-white);
  border-radius:50%;
  animation:gx-spin .7s linear infinite;
}
.gx-invite__submit.is-loading .gx-invite__submit-text{ display:none; }
.gx-invite__submit.is-loading .gx-invite__submit-loader{ display:inline-block; }
@keyframes gx-spin{ to{ transform:rotate(360deg); } }
.gx-invite__form-note{
  font-size:.92rem;
  color:var(--color-accent-soft);
  min-height:1.2em;
  margin:0;
}
.gx-invite__form-note.is-success{ color:#72d99b; }
.gx-invite__form-note.is-error{ color:#ff8a8a; }

@media (max-width:991px){
  .gx-invite__box{ grid-template-columns:1fr; gap:2.5rem; }
  .gx-invite .gx-btn--solid{ align-self:center; }
}
@media (max-width:575px){
  .gx-field-row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Services
   ========================================================================== */

.gx-offer-list{
  margin-top:3.5rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.gx-offer{
  padding:1.5rem 3rem;
  text-align:left;
}
.gx-offer + .gx-offer{ border-left:1px solid var(--color-border); }
.gx-offer__icon{
  width:3.4rem;
  height:3.4rem;
  margin-bottom:2rem;
  background-color:var(--color-accent);
}
.gx-offer .gx-heading-sm{ margin-bottom:.9rem; }

@media (max-width:767px){
  .gx-offer-list{ grid-template-columns:1fr; }
  .gx-offer + .gx-offer{ border-left:none; border-top:1px solid var(--color-border); margin-top:2rem; padding-top:2rem; }
    
    
    .gx-story__visual-back{
        display: none;
    }
    .gx-story__visual-front{
        position: relative;
        bottom: auto;
        width: 100%;
    }
    .gx-story__visual{
        height: auto;
        margin: 0;
    }
    
    
}

/* ==========================================================================
   Portfolio carousel
   ========================================================================== */

.gx-works{ margin-top:4rem; }
.gx-work{
  position:relative;
  aspect-ratio: 3 / 4;
  overflow:hidden;
  background:var(--color-ink);
}
.gx-work img{
  width:100%;
  height:100%;
  object-fit:cover;
  
  transition:opacity var(--ease), transform .5s ease;
}
.gx-work:hover img{ opacity:.25; transform:scale(1.06); }
.gx-work__info{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  opacity:0;
  transition:opacity var(--ease);
}
.gx-work:hover .gx-work__info{ opacity:1; }
.gx-work__view{
  width:2.8rem;
  height:2.8rem;
  border-radius:50%;
  background:var(--color-white);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color var(--ease);
}
.gx-work__view .gx-ico{ background-color:var(--color-ink); width:1rem; height:1rem; }
.gx-work:hover .gx-work__view{ background:var(--color-accent); }
.gx-work:hover .gx-work__view .gx-ico{ background-color:var(--color-white); }
.gx-work__name{
  background:var(--color-accent);
  color:var(--color-white);
  font-family:var(--font-display);
  font-size:1.15rem;
  padding:.5rem 1.4rem;
}

.gx-works__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
  margin-top:3rem;
}
.gx-works__prev,
.gx-works__next{
  width:3rem;
  height:3rem;
  flex:none;
  border-radius:50%;
  border:1px solid var(--color-border);
  background:var(--color-white);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color var(--ease), border-color var(--ease), transform var(--ease);
}
.gx-works__prev .gx-ico,
.gx-works__next .gx-ico{ background-color:var(--color-ink); width:.9rem; height:.9rem; transition:background-color var(--ease); }
.gx-works__prev .gx-ico{ transform:scaleX(-1); }
.gx-works__prev:hover,
.gx-works__next:hover{ background:var(--color-accent); border-color:var(--color-accent); transform:scale(1.08); }
.gx-works__prev:hover .gx-ico,
.gx-works__next:hover .gx-ico{ background-color:var(--color-white); }

.gx-dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin:0;
}
.gx-dots .swiper-pagination-bullet{
  width:1.4rem;
  height:2px;
  border-radius:2px;
  background:var(--color-border);
  opacity:1;
  transition:background-color var(--ease), width var(--ease);
}
.gx-dots .swiper-pagination-bullet-active{
  background:var(--color-accent);
  width:2.2rem;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.gx-footer{ background:var(--color-darker-bg); color:#bdbdbd; }
.gx-footer__top{
  background-color:var(--color-dark-panel);
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:14px 14px;
  padding:3rem 0 2.6rem;
}
.gx-footer__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.5rem;
  padding-bottom:2.4rem;
  margin-bottom:2.6rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.gx-footer__menu{ display:flex; flex-wrap:wrap; gap:2.2rem; list-style:none; margin:0; padding:0; }
.gx-footer__menu a{ color:#bdbdbd; text-decoration:none; font-size:.98rem; transition:color var(--ease); }
.gx-footer__menu a:hover{ color:var(--color-accent); }

.gx-footer__grid{
  display:grid;
  grid-template-columns:1.6fr .1fr 1fr 1fr;
  gap:2rem;
}
.gx-footer__col h3{
  color:var(--color-white);
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:400;
  margin:0 0 1.5rem;
}
.gx-footer__col p{ font-size:.98rem; line-height:1.8; margin:0; }

.gx-footer__list{ list-style:none; margin:0; padding:0; }
.gx-footer__list li + li{ margin-top:.85rem; }
.gx-footer__list a{ color:#bdbdbd; text-decoration:none; font-size:.98rem; transition:color var(--ease); }
.gx-footer__list a:hover{ color:var(--color-accent); }

.gx-footer__reach{ list-style:none; margin:0; padding:0; }
.gx-footer__reach li{ display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; font-size:.98rem; }
.gx-footer__reach .gx-ico-frame{
  flex:none;
  width:2.8rem;
  height:2.8rem;
  background:#333333;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gx-footer__reach .gx-ico{ background-color:var(--color-white); }

.gx-footer__base{
  padding:1.6rem 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.9rem;
}
@media (max-width:991px){
  .gx-footer__grid{ grid-template-columns:1fr 1fr; }
  .gx-footer__grid > :first-child{ grid-column:1 / -1; }
  .gx-footer__grid > :nth-child(2){ display:none; }
    .gx-dots{
        display: none;
    }
}
@media (max-width:575px){
  .gx-footer__grid{ grid-template-columns:1fr; text-align:center; }
  .gx-footer__reach li{ justify-content:center; }
  .gx-footer__row{ justify-content:center; text-align:center; }
  .gx-footer__menu{ justify-content:center; }
  .gx-footer__base{ justify-content:center; text-align:center; }
}