/* ============================================================
   FONTS
============================================================ */

@font-face {
	font-family: 'Jetbrains';
	src: url('assets/public/fonts/JetBrains.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Geist';
	src: url('assets/public/fonts/Geist.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   VARIABLES
============================================================ */

:root {
	--ch: calc((100% - 1180px) / 2);
	--cv: 132px;
	--c: var(--cv) var(--ch);

	--gmultiplier: 1;
	--g140: round(calc(140px * var(--gmultiplier)), 1px);
     --g120: round(calc(120px * var(--gmultiplier)), 1px);
     --g100: round(calc(100px * var(--gmultiplier)), 1px);
     --g80: round(calc(80px * var(--gmultiplier)), 1px);
     --g72: round(calc(72px * var(--gmultiplier)), 1px);
     --g60: round(calc(60px * var(--gmultiplier)), 1px);
     --g52: round(calc(52px * var(--gmultiplier)), 1px);
     --g40: round(calc(40px * var(--gmultiplier)), 1px);
     --g36: round(calc(36px * var(--gmultiplier)), 1px);
     --g32: round(calc(32px * var(--gmultiplier)), 1px);
     --g28: round(calc(28px * var(--gmultiplier)), 1px);
     --g24: round(calc(24px * var(--gmultiplier)), 1px);
     --g20: round(calc(20px * var(--gmultiplier)), 1px);
     --g16: round(calc(16px * var(--gmultiplier)), 1px);
     --g14: round(calc(14px * var(--gmultiplier)), 1px);
     --g12: round(calc(12px * var(--gmultiplier)), 1px);
     --g10: round(calc(10px * var(--gmultiplier)), 1px);
     --g8: round(calc(8px * var(--gmultiplier)), 1px);
     --g6: round(calc(6px * var(--gmultiplier)), 1px);
     --g4: round(calc(4px * var(--gmultiplier)), 1px);

	--t9: #050505;
	--t8: #1F1F1F;
	--t7: #363636;
	--t6: #474747;
	--t5: #5C5C5C;
	--t4: #6E6E6E;
	--t3: #878787;
	--t2: #A1A1A1;

	--f-b: #0A0A0A;
}

/* ============================================================
   RESET & BASE
============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-family: 'Geist';
}

body {
	background-color: white;
	font-optical-sizing: auto;
	font-kerning: normal;
	max-width: 100vw;
	overflow-x: hidden;
	font-synthesis: none;
	font-variant-ligatures: common-ligatures;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a {
	text-decoration: none;
}

button {
	border: none;
	background-color: transparent;
	cursor: pointer;
}

video,
img {
	width: 100%;
	object-fit: cover;
	object-position: center;
}

main,
section {
	background-color: white;
	position: relative;
	z-index: 3;
}

ul {
	list-style: none;
}

/* ============================================================
   TRANSITIONS
============================================================ */

input,
input::placeholder,
a,
a::before,
button,
.cu {
	transition: all 250ms ease;
}

/* ============================================================
   CONTAINER
============================================================ */

.c   { padding: var(--c); }
.ch {
     padding-right: var(--ch) !important;
     padding-left: var(--ch) !important;
}
.cv {
     padding-top: var(--cv) !important;
     padding-bottom: var(--cv) !important;
}

/* ============================================================
   FLEX
============================================================ */

.fc {
     display: flex;
     flex-direction: column;
}

.fr {
     display: flex;
     align-items: center;
}

/* ============================================================
   UTILITIES & SHARED COMPONENTS
============================================================ */

.ast {
     align-items: stretch;
}

.g20 {
     gap: var(--g20);
}

.g36 {
     gap: var(--g36);
}

.jc {
     justify-content: center;
}

.slider-indicator {
	background-color: #F2F2F2;
	padding: 5px;
     gap: 5px;
	border-radius: 50px;
	transition-duration: .5s;
	margin: calc(var(--g8) * -1) auto;
     transition-duration: .3s;

	div {
		background-color: #BDBDBD;
		transition: inherit;
		width: 4px;
		position: relative;
		cursor: pointer;
		height: 4px;
		border-radius: 50px;
	}

	div.active {
		width: 20px;
	}

	div::before {
		content: "";
		display: block;
		background-color: #111;
		border-radius: 50px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}

.slider-indicator div.active::before {
	animation: fillProgress var(--autoplay-ms, 3000ms) ease forwards;
}

.slider-indicator.is-paused div.active::before {
	animation-play-state: paused;
}

.slider-indicator div.past::before {
	width: 100%;
}

@keyframes fillProgress {
	from { width: 0%; }
	to   { width: 100%; }
}

.g52 {
     gap: var(--g52);
}

.g32 {
     gap: var(--g32);
}

.be-mo,
.be-ta,
.be-mo {
     display: none;
}

.a1 {
     align-items: start;
     justify-content: space-between;
}

.ac {
     align-items: center;
}

h2,.h2 {
     font-size: 17.5px;
     font-variation-settings: 'wght' 660;
     color: var(--t9);
     line-height: 1.2;
}

.as {
     align-items: start;
}

.jsb {
     justify-content: space-between;
}

.g140 {
     gap: var(--g140);
}

.flex {
     flex: 1;
}

.bm {
     font-size: 12px;
     color: var(--t3) !important; 
     font-variation-settings: 'wght' 530;
     padding: 8px 11px 7px 11px;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 4%), 0px 0px 0px 1px rgba(0, 0, 0, 11%);
     background-color: white;
     border-radius: 2px;
}

.bm:hover {
     background-color: #F2F2F2;
     color: var(--t6);
}

.ab {
     font-size: 12px;

     svg {
          width: 13px;
          transition: inherit;
          margin-bottom: 1px;
     }
}

.ab:hover {
     color: var(--t6);

     svg {
          transform: translateX(3px);
     }
}

.bcd {
     img {
          filter: brightness(100%) saturate(99%);
     }
}

.bcd:hover {
     color: var(--t9) !important;
     img {
          filter: brightness(101%) saturate(110%);
          scale: 1.07;
     }
}

.fs {
     width: 100%;
     height: 100%;
     inset: 0;
}

.g10 {
     gap: var(--g10);
}

.g16 {
     gap: var(--g16);
}

.g8 {
     gap: var(--g8);
}

.im-w {
     overflow: hidden;
     border-radius: .001em;
     grid-column: 1 / 3;
}

.t,
.j {
     font-family: 'Jetbrains';
     text-transform: uppercase;
     font-variation-settings: 'wght' 500;
     color: var(--t2);
}

@keyframes pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	100% { transform: scale(2.6); opacity: 0; }
}

.g12 {
     gap: var(--g12);
}

.logo {
     svg {
          height: 100%;
     }
}

.t {
     color: #A8A8A8 !important;
     font-size: 12px;
     padding-top: 2px;
}

/* ============================================================
   NAV
============================================================ */

nav {
     transition-delay: .5s;
     position: fixed;
     top: 0;
     background-color: white;
     width: 100%;
     top: 0;
     border-bottom: 1px solid transparent;
     z-index: 10;

     .c-w {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          position: relative;
          z-index: 10;
          align-items: center;
          border-bottom: 1px solid transparent;
          transition: background-color 0s ease .5s, border-color .5s ease;

          .logo {
               justify-self: start;
               height: 15px;
               color: var(--t9);
          }

          .logohover {
               color: var(--t7);
          }

          .lw {
               height: 100%;
          }

          .m-d,
          #tgl {
               height: 100%;
          }

          .lw {
               a {
                    padding: 7px 9px 6px 9px;
                    border-radius: 3px;
                    font-size: 12.5px;
                    font-variation-settings: 'wght' 570;
                    color: var(--t3);
               }

               a:hover {
                    background-color: #F2F2F2;
                    color: var(--t8);
               }
          }

          .pulse {
               justify-self: end;
               margin: var(--g12) 0;
               font-size: 12px;
               font-variation-settings: 'wght' 540;
               padding: 9px 12px 8px 12px;
               border-radius: 2px;

               div {
                    background-color: #2EAB60;
                    height: 5px;
                    transform: translateY(-1px);
                    position: relative;
                    aspect-ratio: 1;
                    border-radius: 50px;
               }

               div::before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background-color: inherit;
                    animation: pulse 1900ms ease-in-out infinite;
               }
          }

          .pulse:hover {
               background-color: #F2F2F2;
               color: var(--t6);
          }
     }

     /* ARTICLE DROPDOWN */

     .art-d {
          padding: var(--g40);
          width: 100%;
          transition-duration: .45s;
          pointer-events: none;
          position: absolute;
          bottom: 1px;
          transform: translateY(-8%);
          background-color: white;
          z-index: 9;
          display: grid;
          grid-template-columns: repeat(4, calc(25% - ((var(--g16) * 3) / 4)));

          .he {
               color: var(--t9);
               grid-column: 1 / 2;
               grid-row: 1 / 2;
               font-size: 12.5px;
               font-variation-settings: 'wght' 650;
          }

          .ab {
               align-self: end;
          }

          .bcd {
               grid-row: 1 / 3;
               color: var(--t8);

               p {
                    white-space: nowrap;
                    overflow: hidden;
                    transition: inherit;
                    text-overflow: ellipsis;
                    font-size: 12.5px;
                    font-variation-settings: 'wght' 660;
               }
          }
     }
}

body.open {
     nav {
          #tgl a {
               background-color: #F2F2F2;
               color: var(--t8);
          }

          .c-w {
               background-color: white;
               border-color: #EDEDED;
               transition: background-color 0s ease, border-color .5s ease;
          }

          .art-d {
               transform: translateY(100%);
               pointer-events: all;
          }
     }

     .bck-bl {
          opacity: 1;
     }
}

.bck-bl {
     pointer-events: none;
     opacity: 0;
     z-index: 9;
     backdrop-filter: blur(7px);
     position: fixed;
     background-color: hsl(0, 0%, 0%, .2);
}

/* ============================================================
   HERO
============================================================ */

#s2h {
     .blk {
          display: grid;
          grid-template-columns: 1fr auto auto;
          grid-template-rows: repeat(3, auto);
          margin-top: var(--g40);
          row-gap: var(--g16);
          column-gap: var(--g24);

          .j.he {
               font-size: 12.5px;
               font-variation-settings: 'wght' 540;
               color: var(--t3);
               grid-column: 1 / 4;
          }

          h1 {
               font-size: 21px;
               font-variation-settings: 'wght' 680;
               line-height: 1.3;
               color: var(--t9);
               grid-row: 2 / 4;
          }
          
          a {
               grid-row: 3 / 4;
               align-self: center;
               margin-bottom: 2px;
          }
     }

     .vd-w {
          aspect-ratio: 192 / 73;
          overflow: hidden;
          margin: var(--g36) 0 var(--g40) 0;
     }

     .lg-w {
          .j {
               font-size: 12.5px;
               font-variation-settings: 'wght' 560;
               color: var(--t4);
               line-height: 1.7;
          }

          img {
               width: auto;
          }

          .one {
               height: 14px;
          }

          .two {
               height: 17px;
          }

          .three {
               height: 10.5px;
               transform: translateY(-1px);
          }

          .four {
               height: 17px;
               transform: translateY(-1px);
          }

          .five {
               height: 15px;
               transform: translateY(1px);
          }
     }
}

/* ============================================================
   SCROLL
============================================================ */

footer,
section {
     max-width: 100vw;
     overflow: hidden;
}

#s2sc {
     height: 175vh;
     overflow: visible;

     .blk {
          position: sticky;
          top: 50%;
     }

     h2 {
          font-size: 20px;
          max-width: 480px;
          font-variation-settings: 'wght' 660;
          line-height: 1.3;
          text-align: center;
     }

     h2 span {
		transition: inherit;
		transition-duration: .3s !important;
	}

     .t {
		transition-duration: .3s !important;
	}

     img {
		position: absolute;
		opacity: 1;
		width: auto;
          transition: inherit;
          transition-duration: .4s;
		border-radius: 3px;
	}

	.one   { left: 12%; top: -8%; }
	.two   { left: 1%;  top: 48%; }
	.three { left: 13%; bottom: -3%; }
	.four  { right: 10%; top: -5%; }
	.five  { right: 0;   top: 50%; }
	.six   { right: 14%; bottom: -6%; }
}

/* ============================================================
   ABOUT
============================================================ */

#s2ab {
     .t {
          margin-top: 3px;
          white-space: nowrap;
     }

     .autw {
          display: grid;
		grid-template-columns: min-content min-content;
		column-gap: var(--g28);

          img {
			grid-column: 1 / 3;
			width: 100%;
			filter: blur(4px);
			opacity: .6;
			border-radius: 1px;
			transition-duration: .4s;
               margin-top: var(--g36);
		}

          img.revealed {
			filter: blur(0);
			opacity: 1;
		}

		p,
		span {
			font-size: 14.5px;
			font-variation-settings: 'wght' 660;
			line-height: 1.56;
			transition-duration: .32s;
			white-space: nowrap;
		}

		span {
			transition: inherit;
		}

		.reveal-text-dark,
		.reveal-text-grey {
			color: #E6E6E6;
			filter: blur(2px);
		}

		.reveal-text-dark.revealed {
			filter: blur(0px);
			color: var(--t9);
		}

		.reveal-text-grey.revealed {
			filter: blur(0px);
			color: var(--t5);
		}
     }
}

#s2ab.cmpt {
     p .grey {
          color: var(--t5);
     }
}

/* ============================================================
   WORK
============================================================ */

#s2pf {
     .wrkg {
          display: grid;
          align-items: start;
          row-gap: var(--g100);
          grid-template-columns: repeat(12, 1fr);

          a {
               display: grid;
               grid-template-columns: auto 1fr;

               .im-w {
                    position: relative;
                    .fs {
                         position: absolute;
                         background-color: white;
                         transform: translateX(101%);
                         transition-duration: 1.1s !important;
                    }
               }

               .j {
                    font-size: 12px;
                    color: var(--t3);
                    margin-top: 2px;
                    transition-duration: .4s;
                    transition-delay: .4s;
               }

               p {
                    font-size: 13px;
                    font-variation-settings: 'wght' 660;
                    color: var(--t9);
                    line-height: 1.4;
                    transition-duration: .4s;
                    transition-delay: .5s;
                    justify-self: end;
               }
          }

          a:hover {
               img {
                    filter: blur(3px);
                    scale: 1.08;
               }
          }

          .two {
               grid-column: 1 / 6;
               grid-row: 1 / 2;
               margin-top: var(--g80);
          }

          .one {
               grid-column: 8 / 13;
          }

          .three {
               grid-column: 6 / 12;
          }

          a.outview {
               p, .j {
                    transform: translateX(-4px);
                    opacity: 0;
               }

               .fs {
                    transform: translateX(0);
               }
          }
     }
}

/* ============================================================
   SERVICES
============================================================ */

#s2ser {
     background-color: transparent;
     padding: var(--g120);
     z-index: 0;

     img {
          position: fixed;
          pointer-events: none;
          z-index: -1;
     }

     .t {
          color: #D2AFAF !important;
     }
     
     .top {
          p {
               margin-bottom: var(--g52);
               font-size: 15px;
               font-variation-settings: 'wght' 650;
               letter-spacing: .003em;
               line-height: 1.4;
               color: white;
          }
     }

     div,li {
          display: flex;
          align-items: start;
          justify-content: space-between;
     }

     .block {
          padding: var(--g24) 0;
          background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.65) 0px, rgba(255, 255, 255, 0.65) 6px, transparent 6px, transparent 9px);
          background-size: 100% 1px;
          background-repeat: no-repeat;
          background-position: center top;

          .j {
               color: #D6BDBD;
               font-size: 14px;
          }

          .group {
               width: 490px;
          }

          .group > :last-child {
               width: 138px;
          }

          li {
               font-size: 13.5px;
               color: white;
               font-variation-settings: 'wght' 630;

               .j {
                    margin-bottom: var(--g4);
                    font-size: 12.5px;
               }
          }
     }

     .block.last {
          padding-bottom: 0;
     }
}

/* ============================================================
   PRINCIPLES
============================================================ */

#principles {
     overflow: hidden;
     .slider {
          margin: var(--g40) 0 var(--g32) 0; 

          .j {
               font-size: 11px;
               color: var(--t2);
          }

          .cd {
               background-color: #F5F5F5;
               gap: var(--g12);
		border-radius: 1px;
		padding: var(--g16);
          }

          .cd.grp {
               p {
                    font-size: 13px;
                    line-height: 1.4;
                    font-variation-settings: 'wght' 660;
                    color: var(--t8);
                    white-space: nowrap;
               }
          }

          .cd.ill {
               position: relative;
               padding: var(--g36);
          }

          .fc.b {
               height: 340px;
               img {
                    position: absolute;
                    inset: var(--g36);
                    height: calc(100% * (var(--g36) * 2));
                    width: auto;
		}
          }

          .cd.main {
               width: 330px;
               min-width: 330px;
               height: 340px;

               h3 {
                    font-size: 15px;
                    font-variation-settings: 'wght' 600;
                    color: var(--t9);
                    line-height: 1.3;
               }

               p {
                    color: var(--t4);
                    margin-top: auto;
                    font-size: 12.5px;
                    font-variation-settings: 'wght' 540;
                    line-height: 1.5;
               }
          }
     }

     #sliderTrack {
          will-change: transform;
          cursor: grab;
          user-select: none;
          transition: none;
     }

     #sliderTrack.is-dragging {
          cursor: grabbing;
     }

     #sliderTrack.is-snapping {
          transition: transform 0.75s cubic-bezier(0.22, 1, 0.28, 1);
     }

     .cd,
     .card-group {
          transition: opacity 0.17s cubic-bezier(0.16, 1, 0.3, 1),
                         filter 0.17s cubic-bezier(0.16, 1, 0.3, 1);
     }

     .cd.is-past,
     .cd-group.is-past {
          opacity: 0;
          filter: blur(4px);
          pointer-events: none;
          transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                         filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
     }
}

/* ============================================================
   FAQ
============================================================ */

#faq-sec {
     h2 {
          font-size: 19px;
          line-height: 1.4;
          margin: var(--g16) 0 var(--g24) 0;

          span {
               color: var(--t4);
          }
     }

     .faq-wrp {
          width: 630px;

          .t {
               margin-bottom: var(--g12);
          }

          .t.sec {
               margin-top: var(--g52);
          }

          .faq {
               margin-left: var(--g8);
               cursor: pointer;
               display: grid;
               grid-template-columns: auto 1fr;
               padding: var(--g14) 0;
               column-gap: var(--g14);
               border-bottom: 1px solid #E6E6E6;
               align-items: start;

               * {
                    transition-duration: .3s;
               }

               svg {
                    width: 9px;
                    transform: translateY(6px);
                    fill: var(--t3);
               }

               h3 {
                    font-size: 14px;
                    color: var(--t7);
                    line-height: 1.5;
                    font-variation-settings: 'wght' 630;
               }
          }

          .ans {
               grid-column: 2 / 3;
               overflow: hidden;
               height: 0px;

               p {
                    font-size: 13px;
                    font-variation-settings: 'wght' 560;
                    color: var(--t3);
                    padding-top: 3px;
                    line-height: 1.5;
               }
          }

          .faq.active {
               svg {
                    transform: translateY(6px) rotate(45deg);
                    fill: var(--t9);
               }

               h3 {
                    color: var(--t9);
               }
          }
     }
}

/* ============================================================
   PRICING
============================================================ */

#s2pri {
     .crd {
          .blk {
               padding: var(--g20);
               background-color: #1A1A1A;

               .j.pa {
                    font-size: 11.5px;
                    color: #8A8A8A;
               }

               .pr, .h {
                    font-size: 17px;
                    font-variation-settings: 'wght' 610;
               }

               .h {
                    font-size: 17px;
                    font-variation-settings: 'wght' 630;
                    margin: var(--g10) 0 var(--g16) 0;
                    color: #FCFCFC;
                    line-height: 1.4;
               }

               .pr {
                    color: #808080;
               }

               a {
                    font-size: 11px;
                    padding: 8px 9px 7px 9px;
                    border-radius: 2px;
                    margin-top: var(--g28);
                    font-variation-settings: 'wght' 550;
                    background-color: white;
                    color: var(--t9);
               }

               a:hover {
                    background-color: #F2F2F2;
               }
          }

          .blk.two {
               background-color: #EBEBEB;

               .j {
                    color: #8C8C8C;
               }

               .pr, .h {
                    font-variation-settings: 'wght' 650;
               }

               .h {
                    color: var(--t8);
               }

               .p {
                    color: #6E6E6E;
               }

               a {
                    background-color: #1A1A1A;
                    color: white !important;
               }

               a:hover {
                    background-color: #292929;
               }
          }
     }

     .des {
          font-size: 13px;
          font-variation-settings: 'wght' 600;
          margin: var(--g20) 0;
          line-height: 1.5;
          color: var(--t5);
     }

     .j.pnt {
          padding: var(--g14) 0;
          border-top: 1px solid #E6E6E6;
          font-size: 11px;
          font-variation-settings: 'wght' 550;
          line-height: 1.1;
          color: var(--t3);
     }
}

/* ============================================================
   ARTICLES
============================================================ */

#s2art {
     .slider-indicator {
          margin-top: calc(var(--g4) * -1);
     }

     .bcd {
          width: 320px;
          max-width: 320px;
          color: var(--t7);

          h3 {
               font-size: 13px;
               line-height: 1.45;
               font-variation-settings: 'wght' 640;
          }
     }

     .blcw {
          padding-right: var(--g24);
     }

     .bcd {
		transition: all 0.17s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.bcd.is-past {
		opacity: 0;
		filter: blur(4px);
		pointer-events: none;
		transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	}

	#blogTrack {
		will-change: transform;
		user-select: none;
	}

	#blogTrack.is-dragging,
	#blogTrack.is-dragging * {
		cursor: grabbing !important;
	}

	#blogTrack.is-snapping {
		transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	}
}

/* ============================================================
   CATALOGUE
============================================================ */

#cat-sec {
     display: grid;
     grid-template-columns: repeat(3, 1fr);

     .crd {
          display: grid;
          grid-template-columns: repeat(2, 1fr);

          .im-w {
               position: relative;
               margin-bottom: var(--g16);

               img {
                    transition-delay: .15s;
               }

               .ic-w {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: white;
                    height: 36px;
                    aspect-ratio: 1;
                    border-radius: 50px;
                    background-color: hsl(0, 0%, 100%, .2);
                    cursor: not-allowed;
                    opacity: 0;

                    svg {
                         height: 16px;
                         margin: 1px 0 0 1px;
                    }
               }
          }

          .sld,
          .itm {
               font-size: 12.5px;
               line-height: 1.2;
          }

          .itm {
               color: var(--t9);
               font-variation-settings: 'wght' 670;
          }

          .sld {
               font-variation-settings: 'wght' 610;
               color: var(--t5);
               justify-self: end;
          }

          .j {
               font-variation-settings: 'wght' 480;
               color: var(--t2);
               font-size: 12.5px;
               margin-top: var(--g6);
          }
     }

     @media (min-width: 860px) {
          .crd:hover {
               .im-w {
                    img {
                         filter: blur(5px) brightness(98%);
                         scale: 1.08;
                    }

                    .ic-w {
                         opacity: 1;
                         transition-delay: .25s;
                    }
               }
          }
     }
}

/* ============================================================
   CTA
============================================================ */

#cta {
     span {
          font-size: 19px;
          font-variation-settings: 'wght' 530;
          color: var(--t9);
     }

     .fr {
          margin: var(--g8) 0 var(--g24) 0;

          span {
               color: var(--t4);
          }
     }

     .bm {
          font-size: 11.5px;
          margin-bottom: var(--g52);
     }
}

footer.still {
     position: relative !important;
     z-index: 2;
}

.as {
     align-items: start;
}

footer a div.as {
     align-items: end !important;
}

/* ============================================================
   FOOTER
============================================================ */

footer {
     z-index: -1;
     background-color: #080808;
     position: sticky;
     bottom: 0;
     display: grid;
     padding: var(--g72);
     gap: var(--g100);
     grid-template-columns: auto auto 1fr auto auto;

     .logo {
          color: white;
          height: 16px;
          margin-right: calc(var(--g100) - var(--g72));
     }

     .logo:hover {
          color: #EDEDED;
     }

     a,p {
          font-size: 13.5px;
          color: white;
          line-height: 1.3;
     }

     .j {
          color: #7A7A7A;
          font-size: 12px;
          line-height: 1.1;
          margin-bottom: var(--g4);
     }

     .link {
          font-variation-settings: 'wght' 620;
          div {
               overflow: hidden;
               width: 0px;
          }
          div::before {
               height: 4px;
               content: "";
               display: block;
               border-radius: 50px;
               aspect-ratio: 1;
               margin-right: var(--g12);
               background-color: white;
          }
     }

     .link:hover {
          margin-right: calc((var(--g12) + 4px) * -1);
          div {
               width: calc(var(--g12) + 4px);
          }
     }

     .clock {
          grid-column: 1 / 4;
          .j {
               color: #6B6B6B;
               line-height: 1.3;
          }

          p {
               font-variation-settings: 'wght' 590;
          }
     }

     .social-wrap {
          justify-self: end;
          align-self: end;
          grid-column: 4 / 6;

          a {
               height: 15px;
               width: 15px;
               opacity: .25;
          }

          a:hover {
               opacity: 1;
          }
     }
}

footer.above {
     z-index: 2;
}

@media (max-width: 1340px) {
     :root {
          --ch: 8%;
          --cv: 128px;

          --gmultiplier: .94;
     }

     h2,.h2 {
          font-size: 16.5px;
     }

     .bm {
          font-size: 11.5px;
     }

     .ab {
          font-size: 11.5px;

          svg {
               width: 12px;
          }
     }

     .t {
          font-size: 11.5px;
     }

     /* ============================================================
     NAV
     ============================================================ */

     nav {
          .c-w {

               .logo {
                    height: 14px;
               }
               .lw {
                    a {
                         padding: 7px 8px 6px 8px;
                         font-size: 12px;
                    }
               }

               .pulse {
                    font-size: 11.5px;
                    padding: 9px 11px 8px 11px;
               }
          }

          /* ARTICLE DROPDOWN */

          .art-d {
               display: grid;
               grid-template-columns: auto repeat(3, 25%);

               .he {
                    font-size: 12px;
               }

               .bcd {
                    p {
                         font-size: 12px;
                    }
               }
          }
     }

     /* ============================================================
          HERO
     ============================================================ */

     #s2h {
          .blk {

               .j.he {
                    font-size: 12px;
               }

               h1 {
                    font-size: 20px;
               }
               
          }

          .vd-w {
               aspect-ratio: 192 / 75;
          }

          .lg-w {
               .j {
                    font-size: 12px;
               }

               img {
                    width: auto;
               }

               .one {
                    height: 13px;
               }

               .two {
                    height: 16px;
               }

               .three {
                    height: 10px;
               }

               .four {
                    height: 16px;
               }

               .five {
                    height: 14px;
               }
          }
     }

     /* ============================================================
     SCROLL
     ============================================================ */

     #s2sc {
          height: 175vh;

          .blk {
               position: sticky;
               top: 50%;
          }

          h2 {
               font-size: 18px;
               max-width: 430px;
          }

          img {
               scale: .85;
          }
     }

     /* ============================================================
     ABOUT
     ============================================================ */

     #s2ab {
          .t {
               margin-top: 2px;
          }

          .autw {
               span {
                    font-size: 13.5px;
               }
          }
     }

     /* ============================================================
     WORK
     ============================================================ */

     #s2pf {
          .wrkg {
               grid-template-columns: repeat(14, 1fr);

               a {
                    .j {
                         font-size: 11.5px;
                    }

                    p {
                         font-size: 12.5px;
                    }
               }

               .one {
                    grid-column: 9 /15;
               }

               .two {
                    grid-column: 1 / 7;
               }

               .three {
                    grid-column: 7 / 14;
               }
          }
     }

     /* ============================================================
     SERVICES
     ============================================================ */

     #s2ser {
          
          .top {
               p {
                    font-size: 14px;
               }
          }

          .block {
               .j {
                    font-size: 13px;
               }

               .group {
                    width: 458px;
               }

               .group > :last-child {
                    width: 133px;
               }

               li {
                    font-size: 13px;

                    .j {
                         font-size: 12px;
                    }
               }
          }
     }

     /* ============================================================
     PRINCIPLES
     ============================================================ */

     #principles {
          overflow: hidden;
          .slider {
               .j {
                    font-size: 10.5px;
               }

               .cd.grp {
                    p {
                         font-size: 12.5px;
                    }
               }

               .fc.b {
                    height: 320px;
               }

               .cd.main {
                    width: 310px;
                    min-width: 310px;
                    height: 320px;

                    h3 {
                         font-size: 14px;
                    }

                    p {
                         font-size: 12px;
                    }
               }
          }
     }

     /* ============================================================
     FAQ
     ============================================================ */

     #faq-sec {
          h2 {
               font-size: 18px;
          }

          .faq-wrp {
               width: 600px;

               .faq {
                    svg {
                         width: 8px;
                    }

                    h3 {
                         font-size: 13.5px;
                    }
               }

               .ans {
                    p {
                         font-size: 12.5px;
                    }
               }
          }
     }

     /* ============================================================
     PRICING
     ============================================================ */

     #s2pri {
          .crd {
               .blk {
                    .j.pa {
                         font-size: 11px;
                    }

                    .pr, .h {
                         font-size: 16px;
                    }

                    .h {
                         font-size: 16px;
                    }

                    a {
                         font-size: 10.5px;
                    }
               }
          }

          .des {
               font-size: 12.5px;
          }

          .j.pnt {
               font-size: 10.5px;
          }
     }

     /* ============================================================
     ARTICLES
     ============================================================ */

     #s2art {
          .bcd {
               width: 310px;
               max-width: 310px;

               h3 {
                    font-size: 12.5px;
               }
          }
     }

     /* ============================================================
     CATALOGUE
     ============================================================ */

     #cat-sec {
          .crd {

               .im-w {
                    .ic-w {
                         scale: .93;
                    }
               }

               .sld,
               .itm {
                    font-size: 12px;
               }

               .j {
                    font-size: 12px;
               }
          }
     }

     /* ============================================================
     CTA
     ============================================================ */

     #cta {
          span {
               font-size: 18px;
          }

          .bm {
               font-size: 11px;
          }
     }

     /* ============================================================
     FOOTER
     ============================================================ */

     footer {
          .logo {
               height: 15px;
          }

          a,p {
               font-size: 13px;
               line-height: 1.3;
          }

          .j {
               font-size: 11.5px;
          }

          .clock {
               svg {
                    height: 38px;
                    width: 38px;
               }
          }

          .social-wrap {
               a {
                    height: 14px;
                    width: 14px;
               }
          }
     }
}

.be-ta {
     display: none;
}

@media (min-width: 1055px) {
     nav {
          .menu-btn,
          .cases-grid,
          .swrap {
               display: none !important;
          }
     }
}

@media (max-width: 1054px) {
     :root {
          --ch: 7%;
          --cv: 118px;
     }

     /* ============================================================
     NAV
     ============================================================ */

     nav {
          max-width: 100vw;

          .c-w {
               padding: var(--g14);

               .logo {
                    height: 14px;
                    z-index: 12;
                    position: relative;
               }

               .menu-btn {
                    display: flex !important;
                    z-index: 12;
                    grid-column: 3 / 4;
                    justify-self: end;

                    svg {
                         fill: #080808;
                         height: 16px;
                         width: auto;
                    }
               }

               .m-d {
                    background-color: #0A0A0A;
                    position: fixed;
                    flex-direction: column;
                    align-items: start;
                    gap: var(--g100);
                    z-index: 11;
                    padding: calc(44px + var(--g80));
                    inset: 0;
                    height: 100vh !important;
                    transform: translateY(-101%);
                    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);

                    .cases-grid {
                         display: grid;
                         scrollbar-width: none;
                         scroll-behavior: smooth;
                         grid-template-columns: repeat(3, auto);

                         span {
                              font-size: 15px;
                              color: #878787;
                              font-variation-settings: 'wght' 570;
                              margin-bottom: var(--g20);
                              grid-column: 1 / 4;
                         }

                         .crd {
                              height: 100%;

                              img {
                                   height: 100%;
                                   width: auto;
                                   max-height: 240px;
                                   margin-bottom: var(--g8);
                              }

                              p {
                                   color: #737373;
                                   font-size: 12px;
                                   font-variation-settings: 'wght' 540;
                              }
                         }
                    }

                    .lw {
                         flex-direction: column;
                         align-items: start;
                         gap: var(--g28);

                         a {
                              font-size: 22px;
                              color: white;
                         }

                         a:hover {
                              background-color: transparent;
                         }

                         #tgl {
                              height: auto;
                         }
                    }

                    .swrap {
                         margin-top: auto;
                         width: 100%;
                         display: flex !important;

                         a {
                              color: #616161;
                              font-size: 13.5px;
                              font-variation-settings: 'wght' 530;
                         }

                         .mr {
                              margin-right: auto;
                         }
                    }

                    .lw,
                    .cases-grid,
                    .swrap {
                         opacity: 0;
                         transition: opacity 0.25s ease;
                    }
               }

               .pulse {
                    display: none;
               }
          }
     }

     .pulse {
          display: none !important;
     }

     /* ARTICLE DROPDOWN */

     .art-d {
          display: none;
     }

     /* ── OPEN ── */

     body.mob-open {
          overflow: hidden !important;

          nav {
               .logo {
                    color: white;
               }

               .c-w .m-d {
                    transform: translateY(0%) !important;
               }

               .m-d {
                    .lw {
                         opacity: 1;
                         transition-delay: 0.35s;
                    }

                    .cases-grid {
                         opacity: 1;
                         transition-delay: 0.45s;
                    }

                    .swrap {
                         opacity: 1;
                         transition-delay: 0.55s;
                    }
               }
          }
     }

     /* ── CLOSING ── */

     body.mob-closing {
          nav {
               .m-d {
                    .swrap {
                         opacity: 0;
                         transition-delay: 0s;
                    }

                    .cases-grid {
                         opacity: 0;
                         transition-delay: 0.08s;
                    }

                    .lw {
                         opacity: 0;
                         transition-delay: 0.16s;
                    }
               }

               .c-w .m-d {
                    transform: translateY(-101%);
                    transition-delay: 0.28s;
               }
          }
     }

     /* ============================================================
     HERO
     ============================================================ */

     .no-ta {
          display: none !important;
     }

     .be-ta {
          display: block;
     }

     #s2h {
          .blk {
               grid-template-columns: auto 1fr;
               grid-template-rows: repeat(3, auto);

               .j.he {
                    font-size: 12px;
               }

               h1 {
                    font-size: 20px;
                    grid-column: 1 / 4;
                    margin-bottom: var(--g8);
                    grid-row: 2 / 3;
               }

               a {
                    grid-row: 3 / 4;
                    justify-self: start;
               }
          }

          .vd-w {
               aspect-ratio: 192 / 79;
          }

          .lg-w {
               flex-direction: column;
               gap: var(--g32);

               div {
                    width: 100%;
               }
               .j {
                    font-size: 12px;
               }
          }
     }

     /* ============================================================
     SCROLL
     ============================================================ */

     #s2sc {
          height: 175vh;

          .blk {
               position: sticky;
               top: 50%;
          }

          h2 {
               font-size: 17px;
               max-width: 410px;
          }

          img {
               scale: .82;
          }
     }

     /* ============================================================
     ABOUT
     ============================================================ */

     #s2ab {
          gap: var(--g100);
          .autw {
               max-width: 540px;
               grid-template-columns: 1fr;
               br {
                    display: none;
               }

               p, span {
                    white-space: wrap;
               }

               .sec {
                    margin-top: var(--g14);
               }

               img {
                    grid-column: 1 / 2;
               }
               span {
                    font-size: 14px;
               }
          }
     }

     /* ============================================================
     WORK
     ============================================================ */

     #s2pf {
          .wrkg {
               grid-template-columns: repeat(2, 1fr);
               gap: var(--g36);

               a {
                    gap: 0px;
                    .j {
                         grid-column: 1 / 3;
                         font-size: 11.5px;
                         margin-top: var(--g16);
                         margin-bottom: var(--g8);
                    }

                    p {
                         font-size: 12px;
                         br {
                              display: none;
                         }
                    }
               }

               .one {
                    grid-column: 2 / 3;
                    img {
                         aspect-ratio: 1 /1.1;
                    }
               }

               .two {
                    grid-column: 1 / 2;
                    margin-top: 0;
                    img {
                         aspect-ratio: 1 /1.1;
                    }
               }

               .three {
                    grid-column: 1 / 2;
               }
          }
     }

     /* ============================================================
     SERVICES
     ============================================================ */

     #s2ser {
          .top {
               p {
                    font-size: 13.5px;
               }
          }

          .block {
               .group {
                    width: 441px;
               }
          }
     }

     /* ============================================================
     PRINCIPLES
     ============================================================ */

     /* ============================================================
     FAQ
     ============================================================ */

     #faq-sec {
          flex-direction: column;
          gap: var(--g52);
          .blk {
               display: grid;
               grid-template-columns: 1fr auto;
               width: 100%;
               .t {
                    grid-column: 1 / 3;
               }

               a {
                    align-self: end;
                    margin-bottom: 3px;
               }
          }
          h2 {
               font-size: 18px;
               margin-bottom: 0;
          }

          .faq-wrp {
               width: 100%;

               .faq {
                    svg {
                         width: 8px;
                    }

                    h3 {
                         font-size: 13.5px;
                    }
               }

               .ans {
                    p {
                         font-size: 12.5px;
                    }
               }
          }
     }

     /* ============================================================
     PRICING
     ============================================================ */

     #s2pri {
          .fr.g32 {
               flex-direction: column;
          }
     }

     /* ============================================================
     ARTICLES
     ============================================================ */

     #s2art {
          .bcd {
               width: 310px;
               max-width: 310px;

               h3 {
                    font-size: 12.5px;
               }
          }
     }

     /* ============================================================
     CATALOGUE
     ============================================================ */

     #cat-sec {
          grid-template-columns: 1fr 1fr;

          h2 {
               grid-column: 1 / 3;
          }
     }

     /* ============================================================
     CTA
     ============================================================ */

     #cta {
          span {
               font-size: 18px;
          }

          .bm {
               font-size: 11px;
          }
     }

     /* ============================================================
     FOOTER
     ============================================================ */

     footer {
          grid-template-columns: auto 1fr auto auto;

          .css {
               display: none;
          }
          .logo {
               height: 15px;
          }

          a,p {
               font-size: 13px;
               line-height: 1.3;
          }

          .clock {
               grid-column: 1 / 3;
          }

          .social-wrap {
               grid-column: 3 / 5;
          }
     }
}

@keyframes fadeUp {
     from { opacity: 0; transform: translateY(10px); }
     to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeDown {
     from { opacity: 1; transform: translateY(0);    }
     to   { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 860px) {
     /* ============================================================
     VARIABLES
     ============================================================ */

     :root {
          --ch: 8.5%;
          --cv: 114px;

          --gmultiplier: .87;
     }

     .slider-indicator {
          padding: 4px;
          gap: 4px;

          div {
               width: 3px;
               height: 3px;
          }

          div.active {
               width: 16px;
          }
     }

     h2,.h2 {
          font-size: 16px;
     }

     .bm {
          font-size: 11px;
     }

     .ab {
          font-size: 11px;

          svg {
               width: 12px;
          }
     }

     .t {
          font-size: 11px;
     }

     /* ============================================================
          NAV
     ============================================================ */

     nav {
          border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
          .c-w {
               .logo {
                    height: 13px;
               }

               .menu-btn {
                    svg {
                         height: 15px;
                    }
               }

               .m-d {
                    transition: transform 0.6s ease;
                    padding: calc(39px + var(--g80));
                    max-height: 100svh !important;
                    padding-bottom: var(--g32);

                    .cases-grid {
                         span {
                              font-size: 13.5px;
                         }

                         .crd {
                              height: auto;
                              img {
                                   max-height: 120px;
                              }

                              p {
                                   font-size: 11.5px;
                              }
                         }
                    }

                    .lw {
                         gap: var(--g12) !important;
                         a {
                              font-size: 17px;
                         }
                    }

                    .swrap {
                         a {
                              font-size: 12.5px;
                         }
                    }
               }
          }
     }

     /* ============================================================
          HERO
     ============================================================ */

     #s2h {
          .blk {
               .j.he {
                    font-size: 12px;
                    font-variation-settings: 'wght' 540;
                    color: var(--t3);
                    grid-column: 1 / 4;
               }

               h1 {
                    font-size: 20px;
                    line-height: 1.4;
               }
          }

          .vd-w {
               aspect-ratio: 192 / 100 !important;
               overflow: hidden;
               margin: var(--g36) 0 var(--g40) 0;
          }

          .lg-w {
               .four {
                    display: none !important;
               }
          }
     }

     /* ============================================================
          SCROLL
     ============================================================ */

     #s2sc {
          .blk {
               position: sticky;
               top: 50%;
          }

          h2 {
               font-size: 17px;
               max-width: 400px;
          }

          .four,
          .six {
               display: none;
          }

          .one   { left: 3%; top: 4%; }
          .two   { left: auto; right: 0%;  top: -12%; }
          .three { left: 0%; bottom: -1%; }
          .five  { right: -4%; right: -2%; top: auto; bottom: 9%; }
     }

     /* ============================================================
          ABOUT
     ============================================================ */

     #s2ab {
          flex-direction: column;
          gap: var(--g24);

          .autw {
               span {
                    font-size: 14px;
               }
          }
     }

     /* ============================================================
          WORK
     ============================================================ */

     @media (min-width: 640px) {
          #s2pf {
               flex-direction: row;
               align-items: start;
               gap: var(--g100);
               
               div.fr.jsb {
                    display: grid;
                    grid-template-rows: auto auto;
                    gap: var(--g12);

                    .t {
                         grid-row: 1 / 2;
                         white-space: nowrap;
                    }

                    h2 {
                         white-space: nowrap;
                    }
               }
          }
     }

     #s2pf {
          .wrkg {
               row-gap: var(--g40);
               grid-template-columns: 1fr;

               a {
                    .j {
                         font-size: 11px;
                    }

                    p {
                         font-size: 12px;
                    }
               }

               .one,
               .two,
               .three {
                    grid-column: 1 / 2;
               }
          }
     }

     /* ============================================================
     SERVICES
     ============================================================ */

     #s2ser {
          .top {
               p {
                    font-size: 13px;
                    max-width: 425px;
                    br {
                         display: none;
                    }
               }
          }

          .block {
               .j {
                    color: #D6BDBD;
                    font-size: 12.5px;
               }

               .group {
                    width: 424px;
               }

               .group > :last-child {
                    width: 127px;
               }

               li {
                    font-size: 12.5px;

                    .j {
                         font-size: 11.5px;
                    }
               }
          }
     }

     /* ============================================================
     PRINCIPLES
     ============================================================ */

     #principles {
          .slider {
               .j {
                    font-size: 10px;
               }

               .cd.grp {
                    p {
                         font-size: 12px;
                    }
               }

               .fc.b {
                    height: 280px;
                    img {
                         height: 130px !important;
                         max-height: 130px !important;
                         align-self: center;
                         margin: 0 auto;
                    }
               }

               .cd.main {
                    width: 280px;
                    min-width: 280px;
                    height: 280px;

                    h3 {
                         font-size: 13.5px;
                    }

                    p {
                         font-size: 11.5px;
                    }
               }
          }
     }

     /* ============================================================
     FAQ
     ============================================================ */

     #faq-sec {
          h2 {
               font-size: 17px;
               margin-bottom: 0;
          }

          .faq-wrp {
               width: 100%;

               .faq {
                    margin-left: 0;
                    svg {
                         width: 7px;
                    }

                    h3 {
                         font-size: 13px;
                    }
               }

               .ans {
                    p {
                         font-size: 12px;
                    }
               }
          }
     }

     /* ============================================================
     PRICING
     ============================================================ */

     #s2pri {
          div.g32 {
               gap: var(--g40);
          }
          .crd {
               .blk {
                    .j.pa {
                         font-size: 10px;
                    }

                    .pr, .h {
                         font-size: 13.5px;
                    }

                    .h {
                         font-size: 13.5px;
                    }

                    a {
                         font-size: 10px;
                         padding: 7px 8px 6px 8px;
                    }
               }
          }

          .des {
               font-size: 11.5px;
          }

          .j.pnt {
               font-size: 10px;
          }
     }

     /* ============================================================
     CATALOGUE
     ============================================================ */

     #cat-sec {
     }

     /* ============================================================
     CTA
     ============================================================ */

     #cta {
          span {
               font-size: 16px;
               font-variation-settings: 'wght' 530;
               color: var(--t9);
          }

          .bm {
               font-size: 11px;
               margin-bottom: var(--g52);
          }
     }

     /* ============================================================
     FOOTER
     ============================================================ */

     footer {
          grid-template-columns: auto 1fr auto auto;
          column-gap: var(--g52);

          .css {
               display: none;
          }
          .logo {
               height: 15px;
               margin-right: 0;
          }

          .j {
               font-size: 11px;
          }

          a,p {
               font-size: 12.5px;
          }
     }
}

@media (max-width: 580px) {
     /* ============================================================
     VARIABLES
     ============================================================ */

     :root {
          --ch: 6.5%;
          --cv: 108px;
     }

     h2,.h2 {
          font-size: 15.5px;
     }

     .bm {
          font-size: 10.5px;
     }

     .bm:hover {
          background-color: #F2F2F2;
          color: var(--t6);
     }

     .ab {
          font-size: 10.5px;
     }

     .t {
          font-size: 10.5px;
     }

     /* ============================================================
          NAV
     ============================================================ */

     nav {
          .c-w {
               .logo {
                    height: 12.5px;
               }

               .menu-btn {
                    padding: 4px;
                    margin: -4px;

                    svg {
                         height: 14px;
                    }
               }

               .m-d {
                    span {
                         font-size: 12px;
                    }

                    .crd {
                         p {
                              font-size: 11px;
                         }
                    }

                    .lw {
                         gap: var(--g12) !important;

                         a {
                              font-size: 17px;
                         }
                    }

                    .swrap {
                         a {
                              font-size: 12px;
                         }
                    }
               }
          }
     }

     .no-mo {
          display: none;
     }

     .be-mo {
          display: block;
     }

     /* ============================================================
          HERO
     ============================================================ */

     #s2h {
          padding-top: var(--g40) !important;
          display: grid;
          grid-template-rows: auto auto;
          
          .blk {
               margin-top: var(--g40);
               grid-row: 2 / 3;

               .j.he {
                    font-size: 11px;
               }

               h1 {
                    font-size: 20px;
               }
          }

          .vd-w {
               aspect-ratio: 192 / 210 !important;
               border-radius: 10px !important;
               margin-bottom: 0;
               padding: 0 var(--ch);
          }

          .lg-w {
               display: none;
          }
     }

     /* ============================================================
     SCROLL
     ============================================================ */

     #s2sc {
          height: 190vh;

          h2 {
               font-size: 15px;
               max-width: 350px;
          }

          h2 {
               padding-bottom: var(--g20);
          }

          img {
               scale: .7 !important;
          }
     }

     /* ============================================================
     ABOUT
     ============================================================ */

     #s2ab {
          .autw {
               p,
               span {
                    font-size: 12.5px;
               }
          }
     }

     .no-mo {
          display: none !important;
     }

     /* ============================================================
          SERVICES
     ============================================================ */

     #s2ser {
          .top {
               flex-direction: column;
               gap: var(--g16);
               align-self: start;
               p {
                    font-size: 12.5px;
                    max-width: none;

                    br {
                         display: none;
                    }
               }
          }

          .block {
               .group {
                    width: 126px;
                    flex-direction: column;
                    gap: var(--g10);
               }

               .group > :last-child {
                    width: 126px;
               }
          }
     }

     /* ============================================================
     FAQ
     ============================================================ */

     #faq-sec {
          h2 {
               font-size: 16.5px;
               margin-bottom: 0;
               margin-bottom: var(--g24);
          }

          .blk {
               display: flex;
               flex-direction: column;
               
               .ab {
                    align-self: start;
               }
          }
     }

     /* ============================================================
     ARTICLES
     ============================================================ */

     #s2art {
          .bcd {
               width: 280px;
               max-width: 280px;
               color: var(--t7);
          }
     }

     /* ============================================================
     CATALOGUE
     ============================================================ */

     #cat-sec {
          grid-template-columns: 1fr;

          h2 {
               grid-column: 1 / 2;
          }
     }

     /* ============================================================
     CTA
     ============================================================ */

     #cta {
          span {
               font-size: 15px;
          }

          .bm {
               font-size: 10.5px;
               padding: 7px 10px 6px 10px;
               margin-bottom: var(--g52);
          }
     }

     /* ============================================================
     FOOTER
     ============================================================ */

     footer {
          grid-template-columns: 1fr min-content;
          column-gap: var(--g32);
          row-gap: 0;
          grid-template-rows: auto var(--g52) auto var(--g32) auto var(--g80) auto !important;

          .logo {
               height: 13px;
               grid-column: 1 / 3;
               grid-row: 1 / 3;
          }

          .one {
               grid-column: 1 / 2;
               grid-row: 3 / 4;
          }

          .two {
               grid-row: 3 / 4;
               grid-column: 2 / 3;
          }

          .three {
               grid-column: 1 / 2;
               grid-row: 5 / 6;
          }

          .four {
               grid-row: 5 / 6;
               grid-column: 2 / 3;
          }

          .j {
               font-size: 11px;
          }

          .css {
               display: flex;
          }

          a,p {
               font-size: 12.5px;
          }

          .clock {
               div {
                    gap: 2px;
               }
               svg {
                    height: 36px;
               }
          }

          .clock {
               grid-column: 1 / 2;
               grid-row: 8 / 9;
          }

          .social-wrap {
               grid-row: 8 / 9;
               grid-column: 2 / 3;

               a {
                    height: 12.5px;
                    width: 12.5px;
               }
          }
     }
}