/* =================================================================== 
 * Tyndale Main Stylesheet
 * Template Ver. 1.0.0
 * 06-17-2021
 * ------------------------------------------------------------------
 *
 * TOC:
 * # SETTINGS
 *      ## fonts 
 *      ## colors
 *      ## spacing and typescale
 *      ## grid variables
 * # NORMALIZE
 * # BASE SETUP
 * # GRID 
 *      ## large screen devices 
 *      ## medium screen devices 
 *      ## tablet devices 
 *      ## mobile devices 
 *      ## small screen devices 
 *      ## additional column stackpoints 
 * # UTILITY CLASSES
 * # TYPOGRAPHY
 *      ## base type styles
 *      ## additional typography & helper classes
 *      ## lists
 *      ## spacing
 * # PRELOADER
 * # FORM
 *      ## style placeholder text
 *      ## change autocomplete styles in Chrome
 * # BUTTONS
 * # TABLE
 * # COMPONENTS
 *      ## pagination
 *      ## alert box
 *      ## skillbars
 *      ## stats tabs
 * # PROJECT-WIDE SHARED STYLES
 *      ## media classes
 *      ## swiper overrides
 *      ## section header
 *      ## theme-specific typography classes
 * # PAGE WRAP
 * # SITE HEADER
 *      ## logo
 *      ## main navigation
 *      ## header social
 *      ## mobile menu toggle
 * # INTRO
 *      ## intro content
 *      ## intro scroll down
 *      ## intro about
 *      ## intro stats
 * # SERVICES
 *      ## services list
 * # WORKS
 *      ## portfolio list
 *      ## clients
 *      ## video block
 *      ## testimonials
 * # CONTACT
 * # FOOTER
 *      ## contact list
 *      ## copyright
 *      ## go top
 *
 * ------------------------------------------------------------------ */


/* ===================================================================
 * # SETTINGS
 *
 *
 * ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## fonts 
 * ------------------------------------------------------------------- */
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@300;400;500;600;700&display=swap");

 :root {
 
     --font-1: "Inter", sans-serif;
     --font-2: "Manrope", sans-serif;
 
     /* monospace
      */
     --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
 }
 
 /* ------------------------------------------------------------------- 
   * ## colors
   * ------------------------------------------------------------------- */
 :root {
 
     /* color-1(#24A89B)
       * color-2(#eddea4)
       */
     --color-1: hsl(0deg 64.71% 40%);
     --color-2: hsla(48, 67%, 79%, 1);
 
     /* theme color variations
       */
     --color-1-lighter: hsla(174, 65%, 60%, 1);
     --color-1-light: hsla(174, 65%, 50%, 1);
     --color-1-dark: hsla(174, 65%, 35%, 1);
     --color-1-darker: hsla(174, 65%, 20%, 1);
     --color-2-lighter: hsla(48, 67%, 99%, 1);
     --color-2-light: hsla(48, 67%, 89%, 1);
     --color-2-dark: hsla(48, 67%, 69%, 1);
     --color-2-darker: hsla(48, 67%, 59%, 1);
 
     /* feedback colors
       * color-error(#ffd1d2), color-success(#c8e675), 
       * color-info(#d7ecfb), color-notice(#fff099)
       */
     --color-error: hsla(359, 100%, 91%, 1);
     --color-success: hsla(76, 69%, 68%, 1);
     --color-info: hsla(205, 82%, 91%, 1);
     --color-notice: hsla(51, 100%, 80%, 1);
     --color-error-content: hsla(359, 50%, 50%, 1);
     --color-success-content: hsla(76, 29%, 28%, 1);
     --color-info-content: hsla(205, 32%, 31%, 1);
     --color-notice-content: hsla(51, 30%, 30%, 1);
 
     /* shades 
       * generated using 
       * Tint & Shade Generator 
       * (https                      ://maketintsandshades.com/)
       */
     --color-black: #000000;
     --color-gray-19: #020202;
     --color-gray-18: #040404;
     --color-gray-17: #060607;
     --color-gray-16: #080809;
     --color-gray-15: #0a0b0b;
     --color-gray-14: #0c0d0d;
     --color-gray-13: #0e0f0f;
     --color-gray-12: #101112;
     --color-gray-11: #121314;
     --color-gray-10: #141516;
     --color-gray-9: #2c2c2d;
     --color-gray-8: #434445;
     --color-gray-7: #5b5b5c;
     --color-gray-6: #727373;
     --color-gray-5: #8a8a8b;
     --color-gray-4: #a1a1a2;
     --color-gray-3: #b9b9b9;
     --color-gray-2: #d0d0d0;
     --color-gray-1: #e8e8e8;
     --color-white: #ffffff;
 
     /* text
       */
     --color-text: var(--color-gray-5);
     --color-text-dark: var(--color-white);
     --color-text-light: var(--color-gray-6);
     --color-placeholder: var(--color-gray-6);
 
     /* buttons
       */
     --color-btn: var(--color-gray-9);
     --color-btn-text: var(--color-white);
     --color-btn-hover: var(--color-white);
     --color-btn-hover-text: var(--color-black);
     --color-btn-primary: var(--color-1);
     --color-btn-primary-text: var(--color-white);
     --color-btn-primary-hover: hsl(0deg 64.71% 40%);
     --color-btn-primary-hover-text: var(--color-white);
     --color-btn-stroke: var(--color-white);
     --color-btn-stroke-text: var(--color-white);
     --color-btn-stroke-hover: var(--color-white);
     --color-btn-stroke-hover-text: var(--color-black);
 
     /* preloader
       */
     --color-preloader-bg: var(--color-gray-12);
     --color-loader: white;
     --color-loader-light: rgba(255, 255, 255, 0.1);
 
     /* others
       */
     --color-body: var(--color-gray-12);
     --color-border: rgba(255, 255, 255, .05);
     --border-radius: 3px;
 }
 
 /* ------------------------------------------------------------------- 
   * ## spacing and typescale
   * ------------------------------------------------------------------- */
 :root {
 
     /* spacing
       * base font size: 18px 
       * vertical space unit : 32px
       */
     --base-size: 62.5%;
     --multiplier: 1;
     --base-font-size: calc(1.8rem * var(--multiplier));
     --space: calc(3.2rem * var(--multiplier));
 
     /* vertical spacing 
       */
     --vspace-0_125: calc(0.125 * var(--space));
     --vspace-0_25: calc(0.25 * var(--space));
     --vspace-0_375: calc(0.375 * var(--space));
     --vspace-0_5: calc(0.5 * var(--space));
     --vspace-0_625: calc(0.625 * var(--space));
     --vspace-0_75: calc(0.75 * var(--space));
     --vspace-0_875: calc(0.875 * var(--space));
     --vspace-1: calc(var(--space));
     --vspace-1_25: calc(1.25 * var(--space));
     --vspace-1_5: calc(1.5 * var(--space));
     --vspace-1_75: calc(1.75 * var(--space));
     --vspace-2: calc(2 * var(--space));
     --vspace-2_5: calc(2.5 * var(--space));
     --vspace-3: calc(3 * var(--space));
     --vspace-3_5: calc(3.5 * var(--space));
     --vspace-4: calc(4 * var(--space));
     --vspace-4_5: calc(4.5 * var(--space));
     --vspace-5: calc(5 * var(--space));
 
     /* type scale
       * ratio 1         :2 | base: 18px
       * -------------------------------------------------------
       *
       * --text-display-3 = (77.40px)
       * --text-display-2 = (64.50px)
       * --text-display-1 = (53.75px)
       * --text-xxxl      = (44.79px)
       * --text-xxl       = (37.32px)
       * --text-xl        = (31.10px)
       * --text-lg        = (25.92px)
       * --text-md        = (21.60px)
       * --text-size      = (18.00px) BASE
       * --text-sm        = (15.00px)
       * --text-xs        = (12.50px)
       *
       * ---------------------------------------------------------
       */
     --text-scale-ratio: 1.2;
     --text-size: var(--base-font-size);
     --text-xs: calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
     --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
     --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
     --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
     --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
     --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
     --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
     --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
     --text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
     --text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));
 
     /* default button height
       */
     --vspace-btn: var(--vspace-2);
 }
 
 /* on mobile devices below 600px, change the value of '--multiplier' 
   * to adjust the values of base font size and vertical space unit.
   */
 @media screen and (max-width: 600px) {
     :root {
         --multiplier: .875;
     }
 }
 
 /* ------------------------------------------------------------------- 
   * ## grid variables
   * ------------------------------------------------------------------- */
 :root {
 
     /* widths for rows and containers
       */
     --width-full: 100%;
     --width-max: 1200px;
     --width-wide: 1400px;
     --width-wider: 1600px;
     --width-widest: 1800px;
     --width-narrow: 1000px;
     --width-narrower: 800px;
     --width-grid-max: var(--width-max);
 
     /* gutter
       */
     --gutter: 2rem;
 }
 
 /* on medium screen devices
   */
 @media screen and (max-width: 1200px) {
     :root {
         --gutter: 1.8rem;
     }
 }
 
 /* on mobile devices
   */
 @media screen and (max-width: 600px) {
     :root {
         --gutter: 1rem;
     }
 }
 
 
 /* ====================================================================
   * # NORMALIZE
   *
   *
   * --------------------------------------------------------------------
   * normalize.css v8.0.1 | MIT License |
   * github.com/necolas/normalize.css
   * -------------------------------------------------------------------- */
 html {
     line-height: 1.15;
     -webkit-text-size-adjust: 100%;
 }
 
 body {
     margin: 0;
 }
 
 main {
     display: block;
 }
 
 h1 {
     font-size: 2em;
     margin: 0.67em 0;
 }
 
 hr {
     box-sizing: content-box;
     height: 0;
     overflow: visible;
 }
 
 pre {
     font-family: monospace, monospace;
     font-size: 1em;
 }
 
 a {
     background-color: transparent;
 }
 
 abbr[title] {
     border-bottom: none;
     text-decoration: underline;
     text-decoration: underline dotted;
 }
 
 b,
 strong {
     font-weight: bolder;
 }
 
 code,
 kbd,
 samp {
     font-family: monospace, monospace;
     font-size: 1em;
 }
 
 small {
     font-size: 80%;
 }
 
 sub,
 sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
 }
 
 sub {
     bottom: -0.25em;
 }
 
 sup {
     top: -0.5em;
 }
 
 img {
     border-style: none;
 }
 
 button,
 input,
 optgroup,
 select,
 textarea {
     font-family: inherit;
     font-size: 100%;
     line-height: 1.15;
     margin: 0;
 }
 
 button,
 input {
     overflow: visible;
 }
 
 button,
 select {
     text-transform: none;
 }
 
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
     -webkit-appearance: button;
 }
 
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
     border-style: none;
     padding: 0;
 }
 
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
     outline: 1px dotted ButtonText;
 }
 
 fieldset {
     padding: 0.35em 0.75em 0.625em;
 }
 
 legend {
     box-sizing: border-box;
     color: inherit;
     display: table;
     max-width: 100%;
     padding: 0;
     white-space: normal;
 }
 
 progress {
     vertical-align: baseline;
 }
 
 textarea {
     overflow: auto;
 }
 
 [type="checkbox"],
 [type="radio"] {
     box-sizing: border-box;
     padding: 0;
 }
 
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
     height: auto;
 }
 
 [type="search"] {
     -webkit-appearance: textfield;
     outline-offset: -2px;
 }
 
 [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
 ::-webkit-file-upload-button {
     -webkit-appearance: button;
     font: inherit;
 }
 
 details {
     display: block;
 }
 
 summary {
     display: list-item;
 }
 
 template {
     display: none;
 }
 
 [hidden] {
     display: none;
 }
 
 
 /* ===================================================================
   * # BASE SETUP
   *
   *
   * ------------------------------------------------------------------- */
 html {
     font-size: var(--base-size);
     box-sizing: border-box;
 }
 
 *,
 *::before,
 *::after {
     box-sizing: inherit;
 }
 
 html,
 body {
     height: 100%;
 }
 
 body {
     background-color: var(--color-body);
     -webkit-overflow-scrolling: touch;
     -webkit-text-size-adjust: 100%;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
 p {
     font-size: inherit;
     text-rendering: optimizeLegibility;
 }
 
 a {
     text-decoration: none;
 }
 
 svg,
 img,
 video {
     max-width: 100%;
     height: auto;
 }
 
 pre {
     overflow: auto;
 }
 
 div,
 dl,
 dt,
 dd,
 ul,
 ol,
 li,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 pre,
 form,
 p,
 blockquote,
 th,
 td {
     margin: 0;
     padding: 0;
 }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
 }
 
 
 /* ===================================================================
   * # GRID v4.0.0
   *
   *
   *   -----------------------------------------------------------------
   * - Grid breakpoints are based on MAXIMUM WIDTH media queries, 
   *   meaning they apply to that one breakpoint and ALL THOSE BELOW IT.
   * - Grid columns without a specified width will automatically layout 
   *   as equal width columns.
   *
   * - BLOCK GRID columns(columns inside BLOCK GRID containers) are 
   *   equally-sized columns define at parent/row level. 
   *   A BLOCK GRID container's class attribute value begins with "block-".
   *
   * ------------------------------------------------------------------- */
 
 /* row 
   */
 .row {
     width: 92%;
     max-width: var(--width-grid-max);
     margin: 0 auto;
     display: flex;
     flex-flow: row wrap;
 }
 
 .row .row {
     width: auto;
     max-width: none;
     margin-left: calc(var(--gutter) * -1);
     margin-right: calc(var(--gutter) * -1);
 }
 
 /* column
   */
 .column {
     display: block;
     flex: 1 1 0%;
     padding: 0 var(--gutter);
 }
 
 .collapse>.column,
 .column.collapse {
     padding: 0;
 }
 
 /* row utility classes
   */
 .row.row-wrap {
     flex-wrap: wrap;
 }
 
 .row.row-nowrap {
     flex-wrap: nowrap;
 }
 
 .row.row-y-top {
     align-items: flex-start;
 }
 
 .row.row-y-bottom {
     align-items: flex-end;
 }
 
 .row.row-y-center {
     align-items: center;
 }
 
 .row.row-stretch {
     align-items: stretch;
 }
 
 .row.row-baseline {
     align-items: baseline;
 }
 
 .row.row-x-left {
     justify-content: flex-start;
 }
 
 .row.row-x-right {
     justify-content: flex-end;
 }
 
 .row.row-x-center {
     justify-content: center;
 }
 
 /* --------------------------------------------------------------------
   * ## large screen devices 
   * -------------------------------------------------------------------- */
 .lg-1 {
     flex: none;
     width: 8.33333%;
 }
 
 .lg-2 {
     flex: none;
     width: 16.66667%;
 }
 
 .lg-3 {
     flex: none;
     width: 25%;
 }
 
 .lg-4 {
     flex: none;
     width: 33.33333%;
 }
 
 .lg-5 {
     flex: none;
     width: 41.66667%;
 }
 
 .lg-6 {
     flex: none;
     width: 50%;
 }
 
 .lg-7 {
     flex: none;
     width: 58.33333%;
 }
 
 .lg-8 {
     flex: none;
     width: 66.66667%;
 }
 
 .lg-9 {
     flex: none;
     width: 75%;
 }
 
 .lg-10 {
     flex: none;
     width: 83.33333%;
 }
 
 .lg-11 {
     flex: none;
     width: 91.66667%;
 }
 
 .lg-12 {
     flex: none;
     width: 100%;
 }
 
 .block-lg-one-eight>.column {
     flex: none;
     width: 12.5%;
 }
 
 .block-lg-one-sixth>.column {
     flex: none;
     width: 16.66667%;
 }
 
 .block-lg-one-fifth>.column {
     flex: none;
     width: 20%;
 }
 
 .block-lg-one-fourth>.column {
     flex: none;
     width: 25%;
 }
 
 .block-lg-one-third>.column {
     flex: none;
     width: 33.33333%;
 }
 
 .block-lg-one-half>.column {
     flex: none;
     width: 50%;
 }
 
 .block-lg-whole>.column {
     flex: none;
     width: 100%;
 }
 
 /* --------------------------------------------------------------------
   * ## medium screen devices 
   * -------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .md-1 {
         flex: none;
         width: 8.33333%;
     }
 
     .md-2 {
         flex: none;
         width: 16.66667%;
     }
 
     .md-3 {
         flex: none;
         width: 25%;
     }
 
     .md-4 {
         flex: none;
         width: 33.33333%;
     }
 
     .md-5 {
         flex: none;
         width: 41.66667%;
     }
 
     .md-6 {
         flex: none;
         width: 50%;
     }
 
     .md-7 {
         flex: none;
         width: 58.33333%;
     }
 
     .md-8 {
         flex: none;
         width: 66.66667%;
     }
 
     .md-9 {
         flex: none;
         width: 75%;
     }
 
     .md-10 {
         flex: none;
         width: 83.33333%;
     }
 
     .md-11 {
         flex: none;
         width: 91.66667%;
     }
 
     .md-12 {
         flex: none;
         width: 100%;
     }
 
     .block-md-one-eight>.column {
         flex: none;
         width: 12.5%;
     }
 
     .block-md-one-sixth>.column {
         flex: none;
         width: 16.66667%;
     }
 
     .block-md-one-fifth>.column {
         flex: none;
         width: 20%;
     }
 
     .block-md-one-fourth>.column {
         flex: none;
         width: 25%;
     }
 
     .block-md-one-third>.column {
         flex: none;
         width: 33.33333%;
     }
 
     .block-md-one-half>.column {
         flex: none;
         width: 50%;
     }
 
     .block-md-whole>.column {
         flex: none;
         width: 100%;
     }
 
     .hide-on-md {
         display: none;
     }
 }
 
 /* --------------------------------------------------------------------
   * ## tablet devices 
   * -------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .tab-1 {
         flex: none;
         width: 8.33333%;
     }
 
     .tab-2 {
         flex: none;
         width: 16.66667%;
     }
 
     .tab-3 {
         flex: none;
         width: 25%;
     }
 
     .tab-4 {
         flex: none;
         width: 33.33333%;
     }
 
     .tab-5 {
         flex: none;
         width: 41.66667%;
     }
 
     .tab-6 {
         flex: none;
         width: 50%;
     }
 
     .tab-7 {
         flex: none;
         width: 58.33333%;
     }
 
     .tab-8 {
         flex: none;
         width: 66.66667%;
     }
 
     .tab-9 {
         flex: none;
         width: 75%;
     }
 
     .tab-10 {
         flex: none;
         width: 83.33333%;
     }
 
     .tab-11 {
         flex: none;
         width: 91.66667%;
     }
 
     .tab-12 {
         flex: none;
         width: 100%;
     }
 
     .block-tab-one-eight>.column {
         flex: none;
         width: 12.5%;
     }
 
     .block-tab-one-sixth>.column {
         flex: none;
         width: 16.66667%;
     }
 
     .block-tab-one-fifth>.column {
         flex: none;
         width: 20%;
     }
 
     .block-tab-one-fourth>.column {
         flex: none;
         width: 25%;
     }
 
     .block-tab-one-third>.column {
         flex: none;
         width: 33.33333%;
     }
 
     .block-tab-one-half>.column {
         flex: none;
         width: 50%;
     }
 
     .block-tab-whole>.column {
         flex: none;
         width: 100%;
     }
 
     .hide-on-tab {
         display: none;
     }
 }
 
 /* --------------------------------------------------------------------
   * ## mobile devices 
   * -------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .row {
         width: 100%;
         padding-left: 6vw;
         padding-right: 6vw;
     }
 
     .row .row {
         padding-left: 0;
         padding-right: 0;
     }
 
     .mob-1 {
         flex: none;
         width: 8.33333%;
     }
 
     .mob-2 {
         flex: none;
         width: 16.66667%;
     }
 
     .mob-3 {
         flex: none;
         width: 25%;
     }
 
     .mob-4 {
         flex: none;
         width: 33.33333%;
     }
 
     .mob-5 {
         flex: none;
         width: 41.66667%;
     }
 
     .mob-6 {
         flex: none;
         width: 50%;
     }
 
     .mob-7 {
         flex: none;
         width: 58.33333%;
     }
 
     .mob-8 {
         flex: none;
         width: 66.66667%;
     }
 
     .mob-9 {
         flex: none;
         width: 75%;
     }
 
     .mob-10 {
         flex: none;
         width: 83.33333%;
     }
 
     .mob-11 {
         flex: none;
         width: 91.66667%;
     }
 
     .mob-12 {
         flex: none;
         width: 100%;
     }
 
     .block-mob-one-eight>.column {
         flex: none;
         width: 12.5%;
     }
 
     .block-mob-one-sixth>.column {
         flex: none;
         width: 16.66667%;
     }
 
     .block-mob-one-fifth>.column {
         flex: none;
         width: 20%;
     }
 
     .block-mob-one-fourth>.column {
         flex: none;
         width: 25%;
     }
 
     .block-mob-one-third>.column {
         flex: none;
         width: 33.33333%;
     }
 
     .block-mob-one-half>.column {
         flex: none;
         width: 50%;
     }
 
     .block-mob-whole>.column {
         flex: none;
         width: 100%;
     }
 
     .hide-on-mob {
         display: none;
     }
 }
 
 /* --------------------------------------------------------------------
   * ## small screen devices 
   * --------------------------------------------------------------------*/
 
 /* stack columns on small screen devices
   */
 @media screen and (max-width: 400px) {
     .row .row {
         margin-left: 0;
         margin-right: 0;
     }
 
     .block-stack>.column,
     .column {
         flex: none;
         width: 100%;
         margin-left: 0;
         margin-right: 0;
         padding: 0;
     }
 
     .hide-on-sm {
         display: none;
     }
 }
 
 /* --------------------------------------------------------------------
   * ## additional column stackpoints 
   * -------------------------------------------------------------------- */
 @media screen and (max-width: 1000px) {
 
     .stack-on-1000,
     .block-stack-on-1000>.column {
         flex: none;
         width: 100%;
         margin-left: 0;
         margin-right: 0;
     }
 }
 
 @media screen and (max-width: 700px) {
 
     .stack-on-700,
     .block-stack-on-700>.column {
         flex: none;
         width: 100%;
         margin-left: 0;
         margin-right: 0;
     }
 }
 
 @media screen and (max-width: 550px) {
 
     .stack-on-550,
     .block-stack-on-550>.column {
         flex: none;
         width: 100%;
         margin-left: 0;
         margin-right: 0;
     }
 }
 
 
 /* ===================================================================
   * # UTILITY CLASSES
   *
   *
   * ------------------------------------------------------------------- */
 
 /* flex item alignment classes
   */
 .u-flexitem-center {
     margin: auto;
     align-self: center;
 }
 
 .u-flexitem-left {
     margin-right: auto;
     align-self: center;
 }
 
 .u-flexitem-right {
     margin-left: auto;
     align-self: center;
 }
 
 .u-flexitem-x-center {
     margin-right: auto;
     margin-left: auto;
 }
 
 .u-flexitem-x-left {
     margin-right: auto;
 }
 
 .u-flexitem-x-right {
     margin-left: auto;
 }
 
 .u-flexitem-y-center {
     align-self: center;
 }
 
 .u-flexitem-y-top {
     align-self: flex-start;
 }
 
 .u-flexitem-y-bottom {
     align-self: flex-end;
 }
 
 /* misc helper classes
   */
 .u-clearfix:after {
     content: "";
     display: table;
     clear: both;
 }
 
 .u-hidden {
     display: none;
 }
 
 .u-invisible {
     visibility: hidden;
 }
 
 .u-antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
 .u-overflow-hidden {
     overflow: hidden;
 }
 
 .u-remove-top {
     margin-top: 0;
 }
 
 .u-remove-bottom {
     margin-bottom: 0;
 }
 
 .u-add-half-bottom {
     margin-bottom: var(--vspace-0_5);
 }
 
 .u-add-bottom {
     margin-bottom: var(--vspace-1);
 }
 
 .u-no-border {
     border: none;
 }
 
 .u-fullwidth {
     width: 100%;
 }
 
 .u-pull-left {
     float: left;
 }
 
 .u-pull-right {
     float: right;
 }
 
 
 /* ===================================================================
   * # TYPOGRAPHY 
   *
   *
   * ------------------------------------------------------------------- 
   * type scale - ratio 1:2 | base: 18px
   * -------------------------------------------------------------------
   *
   * --text-display-3 = (77.40px)
   * --text-display-2 = (64.50px)
   * --text-display-1 = (53.75px)
   * --text-xxxl      = (44.79px)
   * --text-xxl       = (37.32px)
   * --text-xl        = (31.10px)
   * --text-lg        = (25.92px)
   * --text-md        = (21.60px)
   * --text-size      = (18.00px) BASE
   * --text-sm        = (15.00px)
   * --text-xs        = (12.50px)
   *
   * -------------------------------------------------------------------- */
 
 /* --------------------------------------------------------------------
   * ## base type styles
   * -------------------------------------------------------------------- */
 body {
     font-family: var(--font-1);
     font-size: var(--base-font-size);
     font-weight: 400;
     line-height: var(--vspace-1);
     color: var(--color-text);
 }
 
 /* links
   */
 a {
     color: hsl(0, 0%, 100%);
     transition: all 0.3s ease-in-out;
 }
 
 a:focus,
 a:hover,
 a:active {
     color: var(--color-2);
 }
 
 a:hover,
 a:active {
     outline: 0;
 }

 .what-we-can-do:hover {
    color: #A82424;
 }
 
 /* headings
   */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6 {
     font-family: var(--font-2);
     font-weight: 600;
     color: var(--color-text-dark);
     font-variant-ligatures: common-ligatures;
     text-rendering: optimizeLegibility;
 }
 
 h1,
 .h1 {
     margin-top: var(--vspace-2_5);
     margin-bottom: var(--vspace-0_75);
 }
 
 h2,
 .h2,
 h3,
 .h3,
 h4,
 .h4 {
     margin-top: var(--vspace-2);
     margin-bottom: var(--vspace-0_5);
 }
 
 h5,
 .h5,
 h6,
 .h6 {
     margin-top: var(--vspace-1_5);
     margin-bottom: var(--vspace-0_5);
 }
 
 h1,
 .h1 {
     font-size: var(--text-display-1);
     line-height: var(--vspace-2);
     letter-spacing: -.01em;
 }
 
 @media screen and (max-width: 500px) {
 
     h1,
     .h1 {
         font-size: var(--text-xxxl);
         line-height: calc(1.625 * var(--space));
     }
 }
 
 h2,
 .h2 {
     font-size: var(--text-xxl);
     line-height: var(--vspace-1_5);
 }
 
 h3,
 .h3 {
     font-size: var(--text-xl);
     line-height: var(--vspace-1_25);
 }
 
 h4,
 .h4 {
     font-size: var(--text-lg);
     line-height: var(--vspace-1);
 }
 
 h5,
 .h5 {
     font-size: var(--text-md);
     line-height: var(--vspace-0_875);
 }
 
 h6,
 .h6 {
     font-family: var(--font-1);
     font-size: var(--text-sm);
     line-height: var(--vspace-0_75);
     text-transform: uppercase;
     letter-spacing: .3rem;
 }
 
 /* emphasis, italic,
   * strong, bold and small text
   */
 em,
 i,
 strong,
 b {
     font-size: inherit;
     line-height: inherit;
 }
 
 em,
 i {
     font-style: italic;
 }
 
 strong,
 b {
     font-weight: 600;
 }
 
 small {
     font-size: 75%;
     font-weight: 400;
     line-height: var(--vspace-0_5);
 }
 
 /* blockquotes
   */
 blockquote {
     margin: 0 0 var(--vspace-1) 0;
     padding: var(--vspace-1) var(--vspace-1_5);
     border-left: 2px solid var(--color-text-light);
     position: relative;
 }
 
 @media screen and (max-width: 400px) {
     blockquote {
         padding: var(--vspace-0_75) var(--vspace-0_75);
     }
 }
 
 blockquote p {
     font-family: var(--font-1);
     font-weight: 400;
     font-size: var(--text-lg);
     font-style: normal;
     line-height: var(--vspace-1_25);
     color: var(--color-text-dark);
     padding: 0;
 }
 
 blockquote cite {
     display: block;
     font-family: var(--font-1);
     font-weight: 400;
     font-size: var(--text-sm);
     line-height: var(--vspace-0_75);
     font-style: normal;
 }
 
 blockquote cite:before {
     content: "\2014 \0020";
 }
 
 blockquote cite,
 blockquote cite a,
 blockquote cite a:visited {
     color: var(--color-text-light);
     border: none;
 }
 
 /* figures
   */
 figure img,
 p img {
     margin: 0;
     vertical-align: bottom;
 }
 
 figure {
     display: block;
     margin-left: 0;
     margin-right: 0;
 }
 
 figure img+figcaption {
     margin-top: var(--vspace-1);
 }
 
 figcaption {
     font-style: italic;
     font-size: var(--text-sm);
     text-align: center;
     margin-bottom: 0;
 }
 
 /* preformatted, code
   */
 var,
 kbd,
 samp,
 code,
 pre {
     font-family: var(--font-mono);
 }
 
 pre {
     padding: var(--vspace-0_75) var(--vspace-1) var(--vspace-1);
     background: var(--color-gray-9);
     overflow-x: auto;
 }
 
 code {
     font-size: var(--text-sm);
     line-height: 1.6rem;
     margin: 0 .2rem;
     padding: calc(((var(--vspace-1) - 1.6rem) / 2) - .1rem) calc(.8rem - .1rem);
     white-space: nowrap;
     background: var(--color-gray-9);
     border: 1px solid var(--color-gray-8);
     color: var(--color-text-dark);
     border-radius: 3px;
 }
 
 pre>code {
     display: block;
     white-space: pre;
     line-height: var(--vspace-1);
     padding: 0;
     margin: 0;
     border: none;
 }
 
 /* deleted text, abbreviation,
   * & mark text
   */
 del {
     text-decoration: line-through;
 }
 
 abbr {
     font-family: var(--font-1);
     font-weight: 600;
     font-variant: small-caps;
     text-transform: lowercase;
     letter-spacing: .1em;
 }
 
 abbr[title],
 dfn[title] {
     border-bottom: 1px dotted;
     cursor: help;
     text-decoration: none;
 }
 
 mark {
     background: var(--color-2);
     color: var(--color-black);
 }
 
 /* horizontal rule
   */
 hr {
     border: solid var(--color-border);
     border-width: .1rem 0 0;
     clear: both;
     margin: var(--vspace-2) 0 calc(var(--vspace-2) - 1px);
     height: 0;
 }
 
 hr.fancy {
     border: none;
     margin: var(--vspace-2) 0;
     height: var(--vspace-1);
     text-align: center;
 }
 
 hr.fancy::before {
     content: "*****";
     letter-spacing: .3em;
 }
 
 /* --------------------------------------------------------------------
   * ## additional typography & helper classes
   * -------------------------------------------------------------------- */
 .lead,
 .attention-getter {
     font-family: var(--font-1);
     font-weight: 400;
     font-size: var(--text-md);
     line-height: var(--vspace-1_25);
     color: var(--color-text-light);
 }
 
 .pull-quote {
     position: relative;
     padding: 0;
     margin-top: 0;
     text-align: center;
 }
 
 .pull-quote blockquote {
     border: none;
     margin: 0 auto;
     max-width: 62rem;
     padding-top: var(--vspace-2_5);
     position: relative;
 }
 
 .pull-quote blockquote p {
     font-weight: 400;
     color: var(--color-text-dark);
 }
 
 .pull-quote blockquote:before {
     content: "";
     display: block;
     height: var(--vspace-1);
     width: var(--vspace-1);
     background-repeat: no-repeat;
     background: center center;
     background-size: contain;
     background-image: url(../images/icons/icon-quote.svg);
     transform: translate(-50%, 0, 0);
     position: absolute;
     top: var(--vspace-1);
     left: 50%;
 }
 
 .drop-cap:first-letter {
     float: left;
     font-family: var(--font-1);
     font-weight: 600;
     font-size: calc(3 * var(--space));
     line-height: 1;
     padding: 0 0.125em 0 0;
     text-transform: uppercase;
     background: transparent;
     color: var(--color-text-dark);
 }
 
 .text-center {
     text-align: center;
 }
 
 .text-left {
     text-align: left;
 }
 
 .text-right {
     text-align: right;
 }
 
 /* --------------------------------------------------------------------
   * ## lists
   * -------------------------------------------------------------------- */
 ol {
     list-style: decimal;
 }
 
 ul {
     list-style: disc;
 }
 
 li {
     display: list-item;
 }
 
 ol,
 ul {
     margin-left: 1.6rem;
 }
 
 ul li {
     padding-left: .4rem;
 }
 
 ul ul,
 ul ol,
 ol ol,
 ol ul {
     margin: 1.6rem 0 1.6rem 1.6rem;
 }
 
 ul.disc li {
     display: list-item;
     list-style: none;
     padding: 0 0 0 .8rem;
     position: relative;
 }
 
 ul.disc li::before {
     content: "";
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--color-1);
     position: absolute;
     left: -.9em;
     top: 11px;
     vertical-align: middle;
 }
 
 dt {
     margin: 0;
     color: var(--color-1);
 }
 
 dd {
     margin: 0 0 0 2rem;
 }
 
 /* definition list line style 
   */
 .lining dt,
 .lining dd {
     display: inline;
     margin: 0;
 }
 
 .lining dt+dt:before,
 .lining dd+dt:before {
     content: "\A";
     white-space: pre;
 }
 
 .lining dd+dd:before {
     content: ", ";
 }
 
 .lining dd+dd:before {
     content: ", ";
 }
 
 .lining dd:before {
     content: ": ";
     margin-left: -0.2em;
 }
 
 /* definition list dictionary style 
   */
 .dictionary-style dt {
     display: inline;
     counter-reset: definitions;
 }
 
 .dictionary-style dt+dt:before {
     content: ", ";
     margin-left: -0.2em;
 }
 
 .dictionary-style dd {
     display: block;
     counter-increment: definitions;
 }
 
 .dictionary-style dd:before {
     content: counter(definitions, decimal) ". ";
 }
 
 /* --------------------------------------------------------------------
   * ## spacing
   * -------------------------------------------------------------------- */
 fieldset,
 button,
 .btn {
     margin-bottom: var(--vspace-0_5);
 }
 
 input,
 textarea,
 select,
 pre,
 blockquote,
 figure,
 figcaption,
 table,
 p,
 ul,
 ol,
 dl,
 form,
 img,
 .video-container,
 .ss-custom-select {
     margin-bottom: var(--vspace-1);
 }
 
 
 /* ===================================================================
   * # PRELOADER
   * 
   * 
   * -------------------------------------------------------------------
   * - markup:
   *
   * <div id="preloader">
   *    <div id="loader"></div>
   * </div>
   *
   * ------------------------------------------------------------------- */
 #preloader {
     position: fixed;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     align-items: center;
     background: var(--color-body);
     z-index: 500;
     height: 100vh;
     width: 100%;
     opacity: 1;
 }
 
 .no-js #preloader {
     display: none;
 }
 
 #loader {
     width: 50px;
     height: 50px;
     background: radial-gradient(circle, #ff8000, #ff4500, #a82424);
     border-radius: 50%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation: fire-animation 1.5s infinite ease-in-out alternate,
         flicker 1.5s infinite;
     box-shadow: 0px 0px 40px rgba(255, 69, 0, 0.8);
 }
 
 /* 🔥 Fire-like pulsing and flickering */
 @keyframes fire-animation {
     0% {
         transform: translate(-50%, -50%) scale(0.8);
         opacity: 1;
         box-shadow: 0px 0px 30px rgba(255, 69, 0, 0.8);
     }
 
     50% {
         transform: translate(-50%, -50%) scale(1.1);
         opacity: 0.9;
         box-shadow: 0px 0px 50px rgba(255, 165, 0, 0.9);
     }
 
     100% {
         transform: translate(-50%, -50%) scale(0.9);
         opacity: 1;
         box-shadow: 0px 0px 40px rgba(255, 69, 0, 0.8);
     }
 }
 
 /* 🔥 Flickering effect to simulate fire movement */
 @keyframes flicker {
     0% {
         opacity: 0.9;
         filter: hue-rotate(0deg);
     }
 
     25% {
         opacity: 0.7;
         filter: hue-rotate(10deg);
     }
 
     50% {
         opacity: 0.8;
         filter: hue-rotate(-10deg);
     }
 
     75% {
         opacity: 0.9;
         filter: hue-rotate(5deg);
     }
 
     100% {
         opacity: 1;
         filter: hue-rotate(0deg);
     }
 }
 
 
 
 /* ===================================================================
   * # FORM
   *
   *
   * ------------------------------------------------------------------- */
 fieldset {
     border: none;
 }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea,
 select {
     --input-height: var(--vspace-2);
     --input-line-height: var(--vspace-1);
     --input-vpadding: calc((var(--input-height) - var(--input-line-height)) / 2);
     display: block;
     height: var(--input-height);
     padding: var(--input-vpadding) 0 calc(var(--input-vpadding) - 1px);
     border: 0;
     outline: 0;
     color: var(--color-text-light);
     font-family: var(--font-1);
     font-size: calc(var(--text-size) * 0.7778);
     line-height: var(--input-line-height);
     max-width: 100%;
     background: transparent;
     border-bottom: 1px solid var(--color-border);
     transition: all .3s ease-in-out;
 }
 
 .ss-custom-select {
     position: relative;
     padding: 0;
 }
 
 .ss-custom-select select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     text-indent: 0.01px;
     text-overflow: '';
     margin: 0;
     vertical-align: middle;
     line-height: var(--vspace-1);
 }
 
 .ss-custom-select select option {
     padding-left: 2rem;
     padding-right: 2rem;
     background-color: var(--color-body);
 }
 
 .ss-custom-select select::-ms-expand {
     display: none;
 }
 
 .ss-custom-select::after {
     border-bottom: 1px solid white;
     border-right: 1px solid white;
     content: '';
     display: block;
     height: 8px;
     width: 8px;
     margin-top: -7px;
     pointer-events: none;
     position: absolute;
     right: 2.4rem;
     top: 50%;
     transition: all 0.15s ease-in-out;
     transform-origin: 66% 66%;
     transform: rotate(45deg);
 }
 
 textarea {
     min-height: calc(8 * var(--space));
 }
 
 input[type="email"]:focus,
 input[type="number"]:focus,
 input[type="search"]:focus,
 input[type="text"]:focus,
 input[type="tel"]:focus,
 input[type="url"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 select:focus {
     color: var(--color-text);
     border-bottom: 1px solid var(--color-1);
 }
 
 label,
 legend {
     font-family: var(--font-1);
     font-weight: 600;
     font-size: var(--text-sm);
     line-height: var(--vspace-0_5);
     margin-bottom: var(--vspace-0_5);
     color: var(--color-text-dark);
     display: block;
 }
 
 input[type="checkbox"],
 input[type="radio"] {
     display: inline;
 }
 
 label>.label-text {
     display: inline-block;
     margin-left: 1rem;
     font-family: var(--font-1);
     line-height: inherit;
 }
 
 label>input[type="checkbox"],
 label>input[type="radio"] {
     margin: 0;
     position: relative;
     top: 2px;
 }
 
 /* ------------------------------------------------------------------- 
   * ## style placeholder text
   * ------------------------------------------------------------------- */
 ::-webkit-input-placeholder {
     /* WebKit, Blink, Edge */
     color: var(--color-placeholder);
 }
 
 :-moz-placeholder {
     /* Mozilla Firefox 4 to 18 */
     color: var(--color-placeholder);
     opacity: 1;
 }
 
 ::-moz-placeholder {
     /* Mozilla Firefox 19+ */
     color: var(--color-placeholder);
     opacity: 1;
 }
 
 :-ms-input-placeholder {
     /* Internet Explorer 10-11 */
     color: var(--color-placeholder);
 }
 
 ::-ms-input-placeholder {
     /* Microsoft Edge */
     color: var(--color-placeholder);
 }
 
 ::placeholder {
     /* Most modern browsers support this now. */
     color: var(--color-placeholder);
 }
 
 /* ------------------------------------------------------------------- 
   * ## change autocomplete styles in Chrome
   * ------------------------------------------------------------------- */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
 textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
     -webkit-text-fill-color: var(--color-1);
     transition: background-color 5000s ease-in-out 0s;
 }
 
 
 /* ===================================================================
   * # BUTTONS
   *
   *
   * ------------------------------------------------------------------- */
 .btn,
 button,
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
     --btn-height: var(--vspace-btn);
     display: inline-block;
     font-family: var(--font-1);
     font-weight: 600;
     font-size: var(--text-xs);
     text-transform: uppercase;
     letter-spacing: .35em;
     height: var(--btn-height);
     line-height: calc(var(--btn-height) - 2px);
     padding: 0 3.6rem;
     margin: 0 0.4rem var(--vspace-0_5) 0;
     color: var(--color-btn-text);
     text-decoration: none;
     text-align: center;
     white-space: nowrap;
     cursor: pointer;
     transition: all .3s;
     border-radius: var(--border-radius);
     background-color: var(--color-btn);
     border: 1px solid var(--color-btn);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
 .btn:focus,
 button:focus,
 input[type="submit"]:focus,
 input[type="reset"]:focus,
 input[type="button"]:focus,
 .btn:hover,
 button:hover,
 input[type="submit"]:hover,
 input[type="reset"]:hover,
 input[type="button"]:hover {
     background-color: var(--color-btn-hover);
     border-color: var(--color-btn-hover);
     color: var(--color-btn-hover-text);
     outline: 0;
 }
 
 /* button primary
   */
 .btn.btn--primary,
 button.btn--primary,
 input[type="submit"].btn--primary,
 input[type="reset"].btn--primary,
 input[type="button"].btn--primary {
     background: var(--color-btn-primary);
     border-color: var(--color-btn-primary);
     color: var(--color-btn-primary-text);
 }
 
 .btn.btn--primary:focus,
 button.btn--primary:focus,
 input[type="submit"].btn--primary:focus,
 input[type="reset"].btn--primary:focus,
 input[type="button"].btn--primary:focus,
 .btn.btn--primary:hover,
 button.btn--primary:hover,
 input[type="submit"].btn--primary:hover,
 input[type="reset"].btn--primary:hover,
 input[type="button"].btn--primary:hover {
     background: var(--color-btn-primary-hover);
     border-color: var(--color-btn-primary-hover);
     color: var(--color-btn-primary-hover-text);
 }
 
 /* button modifiers
   */
 .btn.u-fullwidth,
 button.u-fullwidth {
     width: 100%;
     margin-right: 0;
 }
 
 .btn--small,
 button.btn--small {
     --btn-height: calc(var(--vspace-btn) - 1.6rem);
 }
 
 .btn--medium,
 button.btn--medium {
     --btn-height: calc(var(--vspace-btn) + .8rem);
 }
 
 .btn--large,
 button.btn--large {
     --btn-height: calc(var(--vspace-btn) + 1.6rem);
 }
 
 .btn--stroke,
 button.btn--stroke {
     background: transparent !important;
     border: 1px solid var(--color-btn-stroke);
     color: var(--color-btn-stroke-text);
 }
 
 .btn--stroke:focus,
 button.btn--stroke:focus,
 .btn--stroke:hover,
 button.btn--stroke:hover {
     background: var(--color-btn-stroke-hover) !important;
     border: 1px solid var(--color-btn-stroke-hover);
     color: var(--color-btn-stroke-hover-text);
 }
 
 .btn--pill,
 button.btn--pill {
     padding-left: 3.2rem !important;
     padding-right: 3.2rem !important;
     border-radius: 1000px !important;
 }
 
 
 /* ===================================================================
   * # TABLE
   *
   *
   * ------------------------------------------------------------------- */
 table {
     border-width: 0;
     width: 100%;
     max-width: 100%;
     font-family: var(--font-1);
     border-collapse: collapse;
 }
 
 th,
 td {
     padding: var(--vspace-0_5) 3.2rem calc(var(--vspace-0_5) - 1px);
     text-align: left;
     border-bottom: 1px solid var(--color-border);
 }
 
 th {
     padding: var(--vspace-0_5) 3.2rem;
     color: var(--color-text-dark);
     font-family: var(--font-1);
     font-weight: 600;
 }
 
 th:first-child,
 td:first-child {
     padding-left: 0;
 }
 
 th:last-child,
 td:last-child {
     padding-right: 0;
 }
 
 .table-responsive {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }
 
 
 /* ===================================================================
   * # COMPONENTS
   *
   *
   * ------------------------------------------------------------------- */
 
 /* -------------------------------------------------------------------
   * ## pagination
   * ------------------------------------------------------------------- */
 .pgn {
     --pgn-num-height: calc(var(--vspace-1) + .4rem);
     margin: var(--vspace-1) auto;
     text-align: center;
 }
 
 .pgn ul {
     display: inline-flex;
     flex-flow: row wrap;
     justify-content: center;
     list-style: none;
     margin-left: 0;
     position: relative;
     padding: 0 6rem;
 }
 
 .pgn ul li {
     margin: 0;
     padding: 0;
 }
 
 .pgn__num {
     font-family: var(--font-1);
     font-weight: 600;
     font-size: var(--text-size);
     line-height: var(--vspace-1);
     display: block;
     padding: .2rem 1.2rem;
     height: var(--pgn-num-height);
     margin: .2rem .2rem;
     color: var(--color-text-dark);
     border-radius: 4px;
     transition: all, .3s, ease-in-out;
 }
 
 .pgn__num:focus,
 .pgn__num:hover {
     background: var(--color-gray-9);
     color: var(--color-white);
 }
 
 .pgn .current,
 .pgn .current:focus,
 .pgn .current:hover {
     background-color: var(--color-gray-9);
     color: var(--color-white);
 }
 
 .pgn .inactive,
 .pgn .inactive:focus,
 .pgn .inactive:hover {
     opacity: 0.4;
     cursor: default;
 }
 
 .pgn__prev,
 .pgn__next {
     display: inline-flex;
     flex-flow: row wrap;
     justify-content: center;
     align-items: center;
     height: var(--pgn-num-height);
     width: 4.8rem;
     line-height: var(--vspace-1);
     border-radius: 4px;
     padding: 0;
     margin: 0;
     opacity: 1;
     font: 0/0 a;
     text-shadow: none;
     color: transparent;
     transition: all, .3s, ease-in-out;
     position: absolute;
     top: 50%;
     transform: translate(0, -50%);
 }
 
 .pgn__prev:focus,
 .pgn__prev:hover,
 .pgn__next:focus,
 .pgn__next:hover {
     background-color: var(--color-gray-9);
 }
 
 .pgn__prev svg,
 .pgn__next svg {
     height: 2.4rem;
     width: 2.4rem;
     transition: all, .3s, ease-in-out;
 }
 
 .pgn__prev svg path,
 .pgn__next svg path {
     fill: var(--color-text-dark);
 }
 
 .pgn__prev:focus svg path,
 .pgn__prev:hover svg path,
 .pgn__next:focus svg path,
 .pgn__next:hover svg path {
     fill: white;
 }
 
 .pgn__prev {
     left: 0;
 }
 
 .pgn__next {
     right: 0;
 }
 
 .pgn__prev.inactive,
 .pgn__next.inactive {
     opacity: 0.4;
     cursor: default;
 }
 
 .pgn__prev.inactive:focus,
 .pgn__prev.inactive:hover,
 .pgn__next.inactive:focus,
 .pgn__next.inactive:hover {
     background-color: transparent;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * pagination
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .pgn ul {
         padding: 0 5.2rem;
     }
 }
 
 /* ------------------------------------------------------------------- 
   * ## alert box 
   * ------------------------------------------------------------------- */
 .alert-box {
     padding: var(--vspace-0_75) 4rem var(--vspace-0_75) 3.2rem;
     margin-bottom: var(--vspace-1);
     border-radius: var(--border-radius);
     font-family: var(--font-1);
     font-weight: 500;
     font-size: var(--text-sm);
     line-height: var(--vspace-0_75);
     opacity: 1;
     visibility: visible;
     position: relative;
 }
 
 .alert-box__close {
     position: absolute;
     display: block;
     right: 1.6rem;
     top: 1.6rem;
     cursor: pointer;
     width: 12px;
     height: 12px;
 }
 
 .alert-box__close::before,
 .alert-box__close::after {
     content: '';
     display: inline-block;
     width: 1px;
     height: 12px;
     position: absolute;
     top: 0;
     left: 5px;
 }
 
 .alert-box__close::before {
     transform: rotate(45deg);
 }
 
 .alert-box__close::after {
     transform: rotate(-45deg);
 }
 
 .alert-box--error {
     background-color: var(--color-error);
     color: var(--color-error-content);
 }
 
 .alert-box--error .alert-box__close::before,
 .alert-box--error .alert-box__close::after {
     background-color: var(--color-error-content);
 }
 
 .alert-box--success {
     background-color: var(--color-success);
     color: var(--color-success-content);
 }
 
 .alert-box--success .alert-box__close::before,
 .alert-box--success .alert-box__close::after {
     background-color: var(--color-success-content);
 }
 
 .alert-box--info {
     background-color: var(--color-info);
     color: var(--color-info-content);
 }
 
 .alert-box--info .alert-box__close::before,
 .alert-box--info .alert-box__close::after {
     background-color: var(--color-info-content);
 }
 
 .alert-box--notice {
     background-color: var(--color-notice);
     color: var(--color-notice-content);
 }
 
 .alert-box--notice .alert-box__close::before,
 .alert-box--notice .alert-box__close::after {
     background-color: var(--color-notice-content);
 }
 
 .alert-box.hideit {
     opacity: 0;
     visibility: hidden;
     transition: all .5s;
 }
 
 /* ------------------------------------------------------------------- 
   * ## skillbars
   * ------------------------------------------------------------------- */
 .skill-bars {
     list-style: none;
     margin: var(--vspace-2) 0 var(--vspace-1);
 }
 
 .skill-bars li {
     height: .4rem;
     background: var(--color-gray-9);
     width: 100%;
     margin-bottom: calc(var(--vspace-2) - .4rem);
     padding: 0;
     position: relative;
 }
 
 .skill-bars li strong {
     position: absolute;
     left: 0;
     top: calc((var(--vspace-1) * 1.25) * -1);
     font-family: var(--font-1);
     font-weight: 600;
     color: var(--color-text-dark);
     text-transform: uppercase;
     letter-spacing: .2em;
     font-size: var(--text-xs);
     line-height: var(--vspace-0_75);
 }
 
 .skill-bars li .progress {
     background: var(--color-1);
     position: relative;
     height: 100%;
 }
 
 .skill-bars li .progress span {
     display: block;
     font-family: var(--font-1);
     color: white;
     font-size: 1rem;
     line-height: 1;
     background: var(--color-black);
     padding: var(--vspace-0_25);
     border-radius: 4px;
     position: absolute;
     right: 0;
     top: calc((var(--vspace-1) + .8rem) * -1);
 }
 
 .skill-bars li .progress span::after {
     position: absolute;
     left: 50%;
     bottom: -10px;
     margin-left: -5px;
     width: 0;
     height: 0;
     border: 5px solid transparent;
     border-top-color: var(--color-black, var(--color-black));
     content: "";
 }
 
 .skill-bars li .percent5 {
     width: 5%;
 }
 
 .skill-bars li .percent10 {
     width: 10%;
 }
 
 .skill-bars li .percent15 {
     width: 15%;
 }
 
 .skill-bars li .percent20 {
     width: 20%;
 }
 
 .skill-bars li .percent25 {
     width: 25%;
 }
 
 .skill-bars li .percent30 {
     width: 30%;
 }
 
 .skill-bars li .percent35 {
     width: 35%;
 }
 
 .skill-bars li .percent40 {
     width: 40%;
 }
 
 .skill-bars li .percent45 {
     width: 45%;
 }
 
 .skill-bars li .percent50 {
     width: 50%;
 }
 
 .skill-bars li .percent55 {
     width: 55%;
 }
 
 .skill-bars li .percent60 {
     width: 60%;
 }
 
 .skill-bars li .percent65 {
     width: 65%;
 }
 
 .skill-bars li .percent70 {
     width: 70%;
 }
 
 .skill-bars li .percent75 {
     width: 75%;
 }
 
 .skill-bars li .percent80 {
     width: 80%;
 }
 
 .skill-bars li .percent85 {
     width: 85%;
 }
 
 .skill-bars li .percent90 {
     width: 90%;
 }
 
 .skill-bars li .percent95 {
     width: 95%;
 }
 
 .skill-bars li .percent100 {
     width: 100%;
 }
 
 /* --------------------------------------------------------------------
   * ## stats tabs
   * -------------------------------------------------------------------- */
 .stats-tabs {
     padding: 0;
     margin: var(--vspace-1) 0;
 }
 
 .stats-tabs li {
     display: inline-block;
     margin: 0 1.6rem var(--vspace-0_5) 0;
     padding: 0 1.5rem 0 0;
     border-right: 1px solid var(--color-border);
 }
 
 .stats-tabs li:last-child {
     margin: 0;
     padding: 0;
     border: none;
 }
 
 .stats-tabs li a {
     display: block;
     font-family: var(--font-1);
     font-size: var(--text-lg);
     font-weight: 600;
     line-height: var(--vspace-1_5);
     border: none;
     color: var(--color-text-dark);
 }
 
 .stats-tabs li a:hover {
     color: var(--color-1);
 }
 
 .stats-tabs li a em {
     display: block;
     margin: 0;
     font-family: var(--font-1);
     font-size: var(--text-sm);
     line-height: var(--vspace-0_5);
     font-weight: 400;
     font-style: normal;
     color: var(--color-text-light);
 }
 
 
 /* ===================================================================
   * # PROJECT-WIDE SHARED STYLES
   *
   *
   * ------------------------------------------------------------------- */
 .wide {
     max-width: var(--width-wide);
 }
 
 .wider {
     max-width: var(--width-wider);
 }
 
 .narrow {
     max-width: var(--width-narrow);
 }
 
 .body-text-sm {
     font-size: calc(var(--text-size) * 0.8889);
     line-height: calc(0.9375 * var(--space));
 }
 
 .screen-reader-text {
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
     height: 1px;
     width: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     border: 0;
     position: absolute;
     word-wrap: normal !important;
 }
 
 [data-animate-el] {
     opacity: 0;
 }
 
 .basicLightbox iframe {
     width: 880px;
     aspect-ratio: 16/9;
 }
 
 /* ------------------------------------------------------------------- 
   * ## media classes
   * ------------------------------------------------------------------- */
 
 /* floated image
   */
 img.u-pull-right {
     margin: var(--vspace-0_5) 0 var(--vspace-0_5) var(--vspace-0_875);
 }
 
 img.u-pull-left {
     margin: var(--vspace-0_5) var(--vspace-0_875) var(--vspace-0_5) 0;
 }
 
 /* responsive video container
   */
 .video-container {
     --aspect-ratio: 16/9;
     position: relative;
     height: 0;
     overflow: hidden;
     padding-bottom: calc(100%/(var(--aspect-ratio)));
 }
 
 .video-container iframe,
 .video-container object,
 .video-container embed,
 .video-container video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }
 
 /* ------------------------------------------------------------------- 
   * ## swiper overrides
   * ------------------------------------------------------------------- */
 .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet {
     margin: 0 1.2rem;
 }
 
 .swiper-container .swiper-pagination-bullet {
     width: 6px;
     height: 6px;
     background: white;
     opacity: 1;
 }
 
 .swiper-container .swiper-pagination-bullet-active {
     background: var(--color-1);
     opacity: 1;
 }
 
 /* ------------------------------------------------------------------- 
   * ## section header
   * ------------------------------------------------------------------- */
 .section-header {
     max-width: 800px;
     margin-bottom: var(--vspace-1_5);
     text-align: center;
     position: relative;
 }
 
 .section-header.has-bottom-sep {
     padding-bottom: calc(var(--vspace-1_25) - 1px);
     position: relative;
 }
 
 .section-header.has-bottom-sep::before {
     content: "";
     display: inline-block;
     height: 1px;
     width: 400px;
     background-color: rgba(255, 255, 255, 0.15);
     transform: translateX(-50%);
     position: absolute;
     bottom: 0;
     left: 50%;
 }
 
 .section-header--dark.has-bottom-sep::before {
     background-color: rgba(255, 255, 255, 0.05);
 }
 
 /* ------------------------------------------------------------------- 
   * ## theme-specific typography classes
   * ------------------------------------------------------------------- */
 .text-pretitle {
     font-family: var(--font-2);
     font-size: var(--text-sm);
     font-weight: 600;
     color: var(--color-body);
     text-transform: uppercase;
     letter-spacing: .3em;
     margin-top: 0;
     margin-left: .2rem;
     margin-bottom: 0;
     position: relative;
 }
 
 .section-header--dark .text-pretitle {
     color: var(--color-1);
 }
 
 .text-display-title {
     --text-display-title-size: 5.6rem;
     --text-multiplier: 1;
     font-family: var(--font-2);
     font-size: calc(var(--text-display-title-size) * var(--text-multiplier));
     font-weight: 600;
     line-height: 1.2857;
     margin-top: 0;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * project-wide shared styles
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 1000px) {
     .text-display-title {
         --text-multiplier: .9286;
     }
 }
 
 @media screen and (max-width: 900px) {
     .text-display-title {
         --text-multiplier: .8214;
     }
 }
 
   
   
 
 @media screen and (max-width: 800px) {
     .section-header {
         max-width: 600px;
     }
 
     .text-display-title br {
         display: none;
     }
 }
 
 @media screen and (max-width: 600px) {
     .section-header.has-bottom-sep::before {
         width: 300px;
     }
 
     .text-display-title {
         --text-multiplier: .75;
     }
 }
 
 @media screen and (max-width: 500px) {
     .text-display-title {
         --text-multiplier: .6786;
     }
 }
 
 @media screen and (max-width: 400px) {
     .section-header.has-bottom-sep::before {
         width: 240px;
     }
 
     .text-pretitle {
         font-size: var(--text-xs);
     }
 
     .text-display-title {
         --text-multiplier: .6071;
     }
 }
 
 
 /* ===================================================================
   * # PAGE WRAP
   *
   *
   * ------------------------------------------------------------------- */
 .s-pagewrap {
     --header-height: 7.2rem;
 
     display: flex;
     flex-direction: column;
     min-height: 100%;
     overflow: hidden;
     position: relative;
 }
 
 
 /* ===================================================================
   * # SITE HEADER
   *
   *
   * ------------------------------------------------------------------- */
 .s-header {
     --logo-width: 104px;
     --box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06),
         0 2px 2px rgba(0, 0, 0, 0.06),
         0 4px 4px rgba(0, 0, 0, 0.06),
         0 8px 8px rgba(0, 0, 0, 0.06);
 
     z-index: 100;
     display: flex;
     height: var(--header-height);
     background-color: var(--color-body);
     border-bottom: 1px solid var(--color-border);
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
 }
 
 .s-header__block {
     z-index: 101;
 }
 
 /* --------------------------------------------------------------------
   * ## logo
   * -------------------------------------------------------------------- */
 .s-header__logo {
     z-index: 3;
     position: absolute;
     top: 0.5rem;
     left: 2rem;
 }
 
 .s-header__logo a {
     display: block;
     margin: 0;
     padding: 0;
     outline: 0;
     border: none;
 }
 
 .s-header__logo img {
     width: var(--logo-width);
   
     vertical-align: bottom;
 }
 
 
 /* --------------------------------------------------------------------
   * ## main navigation
   * -------------------------------------------------------------------- */
 .s-header__nav-wrap {
     justify-content: center;
     align-items: flex-start;
 }
 
 .s-header__nav a {
     display: block;
     font-size: 10px;
     font-weight: 400;
     line-height: calc(var(--header-height) - 1px);
     text-transform: uppercase;
     letter-spacing: .4em;
     color: rgba(255, 255, 255, 0.5);
     padding: 0 2.8rem;
     transition-property: color, background-color;
     white-space: nowrap;
 }
 
 .s-header__nav a:focus,
 .s-header__nav a:hover {
     color: white;
 }
 
 .s-header__nav .current a {
     background-color: var(--color-gray-9);
     color: var(--color-white);
 }
 
 .s-header__nav ul {
     list-style: none;
     display: flex;
     flex-flow: row nowrap;
     margin: 0;
     padding: 0;
     border-left: 1px solid var(--color-border);
 }
 
 .s-header__nav li {
     padding-left: 0;
     border-right: 1px solid var(--color-border);
 }
 
 /* --------------------------------------------------------------------
   * ## header social
   * -------------------------------------------------------------------- */
 .s-header__social {
     list-style: none;
     display: flex;
     margin: 0;
     transform: translate(0, -50%);
     position: absolute;
     top: calc(50% - .2rem);
     right: 2rem;
 }
 
 .s-header__social li {
     padding-left: 0;
     margin-right: 1rem;
     line-height: 1;
 }
 
 .s-header__social li:last-child {
     margin-right: 0;
 }
 
 .s-header__social svg {
     height: 2.4rem;
     width: 2.4rem;
 }
 
 .s-header__social svg path {
     fill: white;
 }
 
 /* --------------------------------------------------------------------
   * ## mobile menu toggle
   * -------------------------------------------------------------------- */
 .s-header__menu-toggle {
     display: none;
     width: 6.8rem;
     height: var(--header-height);
     position: absolute;
     top: 0;
     right: .8rem;
 }
 
 .s-header__menu-toggle span {
     display: block;
     background-color: white;
     width: 22px;
     height: 1px;
     margin-top: -1px;
     font: 0/0 a;
     text-shadow: none;
     color: transparent;
     transition: background-color 0.2s ease-in-out;
     position: absolute;
     right: 23px;
     top: 50%;
     bottom: auto;
     left: auto;
 }
 
 .s-header__menu-toggle span::before,
 .s-header__menu-toggle span::after {
     content: "";
     width: 100%;
     height: 100%;
     background-color: inherit;
     transition-duration: 0.2s, 0.2s;
     transition-delay: 0.2s, 0s;
     position: absolute;
     left: 0;
 }
 
 .s-header__menu-toggle span::before {
     top: -8px;
     transition-property: top, transform;
 }
 
 .s-header__menu-toggle span::after {
     bottom: -8px;
     transition-property: bottom, transform;
 }
 
 /* is clicked 
   */
 .s-header__menu-toggle.is-clicked span {
     background-color: rgba(255, 255, 255, 0);
 }
 
 .s-header__menu-toggle.is-clicked span::before,
 .s-header__menu-toggle.is-clicked span::after {
     background-color: white;
     transition-delay: 0s, 0.2s;
 }
 
 .s-header__menu-toggle.is-clicked span::before {
     top: 0;
     transform: rotate(45deg);
 }
 
 .s-header__menu-toggle.is-clicked span::after {
     bottom: 0;
     transform: rotate(-45deg);
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * site-header
   * ------------------------------------------------------------------- */
   @media screen and (max-width: 1800px) {
     /* reduce nav font, spacing, and/or letter spacing */
     .s-header__nav a {
       font-size: 9.5px;
       padding: 0 1rem;
       letter-spacing: 0.15em;
     }
   
     /* shrink the logo as well */
     .s-header__logo img {
       max-width: 120px;
       height: auto;
     }
   }
   @media screen and (max-width: 414px) {
     .s-header__logo {
       left: 1rem; /* or 0; adjust to suit */
       top: 1rem;  /* if it’s absolutely positioned */
     }
     
     .s-header__logo img {
       max-width: 90px; /* shrink further on smaller screens */
     }
   }
   
   
 
 @media screen and (max-width: 1550px) {
     .s-header {
         display: block;
         border: none;
         background-color: transparent;
     }
 
  
     .s-header__block {
         width: 100%;
         height: var(--header-height);
         background-color: var(--color-body);
         border-bottom: 1px solid var(--color-border);
         box-shadow: var(--box-shadow);
     }
 
     .s-header__logo {
         left: 2.8rem;
     }
 
     .s-header__nav-wrap {
         display: block;
         width: 100%;
         max-width: none;
         transform: scaleY(0);
         transform-origin: center top;
         padding: var(--vspace-2) 3.2rem var(--vspace-2);
         background-color: var(--color-body);
         border-bottom: 1px solid var(--color-border);
         box-shadow: var(--box-shadow);
     }
 
     .s-header__nav,
     .s-header__social {
         transform: translateY(-2rem);
         opacity: 0;
         visibility: hidden;
     }
 
     .s-header__nav {
         padding: 0 0 var(--vspace-1_5);
     }
 
     .s-header__nav a {
         font-family: var(--font-2);
         font-size: var(--text-lg);
         font-weight: 300;
         line-height: var(--vspace-1);
         text-transform: none;
         letter-spacing: 0;
         padding: var(--vspace-0_375) 0;
         color: white;
     }
 
     .s-header__nav a:focus,
     .s-header__nav a:hover {
         color: rgba(255, 255, 255, 0.6);
     }
 
     .s-header__nav .current a {
         background-color: transparent;
         color: var(--color-1);
     }
 
     .s-header__nav ul {
         display: block;
         background-color: transparent;
         text-align: left;
         margin: 0;
         border: none;
     }
 
     .s-header__nav ul li {
         display: block;
         border: none;
     }
 
     .s-header__social {
         position: static;
     }
 
     .s-header__menu-toggle {
         display: block;
         right: .8rem;
     }
 
     .menu-is-open .s-header {
         height: auto;
     }
 
     .menu-is-open .s-header__block {
         box-shadow: none;
     }
 
     .menu-is-open .s-header__nav-wrap {
         transform: scaleY(1);
         transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
         transition-delay: 0s;
     }
 
     .menu-is-open .s-header__nav,
     .menu-is-open .s-header__social {
         transform: translateY(0);
         opacity: 1;
         visibility: visible;
         transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
         transition-delay: .4s;
     }
 }
 
 
 /* ===================================================================
   * # SIDE NAV
   *
   *
   * ------------------------------------------------------------------- */
 .s-sidenav {
     position: fixed;
     top: calc(var(--header-height) + 4rem);
     left: 2.8rem;
     z-index: 50;
     display: flex;
     flex-direction: row;
     align-items: stretch;
 }

 /* vertical track line */
 .s-sidenav__track {
     width: 1px;
     background: rgba(255, 255, 255, 0.1);
     position: relative;
     flex-shrink: 0;
     margin-right: 1.6rem;
 }

 /* filled progress overlay */
 .s-sidenav__fill {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 0%;
     background: rgba(255, 255, 255, 0.55);
     transition: height 80ms linear;
 }

 .s-sidenav ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .s-sidenav li {
     position: relative;
     padding-left: 0;
     margin-bottom: 1.4rem;
 }

 /* dot aligned on the track */
 .s-sidenav li::before {
     content: '';
     position: absolute;
     left: calc(-1.6rem);
     top: 0.45em;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.12);
     transform: translateX(-50%);
     transition: background 0.2s;
 }

 .s-sidenav li.current::before {
     background: rgba(255, 255, 255, 0.9);
 }

 .s-sidenav a {
     display: block;
     font-family: var(--font-1);
     font-size: 9px;
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: .3em;
     color: rgba(255, 255, 255, 0.28);
     transition: color 0.2s;
     white-space: nowrap;
     text-decoration: none;
     line-height: 1.4;
 }

 .s-sidenav a:hover,
 .s-sidenav a:focus {
     color: rgba(255, 255, 255, 0.75);
 }

 .s-sidenav .current a {
     color: rgba(255, 255, 255, 0.9);
 }

 @media screen and (max-width: 1550px) {
     .s-sidenav {
         display: none;
     }
 }


 /* ===================================================================
   * # INTRO
   *
   *
   * ------------------------------------------------------------------- */
 .s-intro {
     --text-huge: 5rem;
     --text-huge-line-height: 1.158;
     --text-huge-multiplier: 1;
     padding-top: calc(var(--header-height) + var(--vspace-5));
     padding-bottom: var(--vspace-5);
 }
 
 /* --------------------------------------------------------------------
   * ## intro content
   * -------------------------------------------------------------------- */
 .s-intro__top-block {
     width: 100%;
     padding: 0 12%;
     position: relative;
 }
 
 .s-intro__bg {
    width: 100%;
    position: absolute;
    top: calc(1.5 * var(--text-huge-line-height) * var(--text-huge) * var(--text-huge-multiplier));
    right: 0;
    bottom: 0;
    left: 0;

    /* ensure the .s-intro__bg can contain an absolutely positioned <video>: */
    overflow: hidden;
}

.s-intro__bg video {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    /*
      'object-fit: cover' makes the video behave
      similarly to 'background-size: cover'.
    */
    object-fit: cover;
}

 
 
 
.s-intro__bg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /*
      Original radial gradient from your code:
      radial-gradient(rgba(0, 0, 0, 0) 35%, rgba(24, 24, 24, 0.5) 55%, rgba(24, 24, 24, 0.7) 60%, rgba(24, 24, 24, 0.85) 65%, rgba(24, 24, 24, 1) 70%)
    */
    background: radial-gradient(rgba(0, 0, 0, 0) 0%, 
                               rgba(24, 24, 24, 0.5) 55%, 
                               rgba(24, 24, 24, 0.7) 60%, 
                               rgba(24, 24, 24, 0.85) 65%, 
                               rgba(24, 24, 24, 1) 70%);
    pointer-events: none; /* let clicks pass through */
}

.s-intro__bg::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background:
      /* radial gradient */
      radial-gradient(rgba(0, 0, 0, 0) 35%,
                      rgba(16, 17, 18, 0.5) 55%,
                      rgba(16, 17, 18, 0.7) 60%,
                      rgba(16, 17, 18, 0.85) 65%,
                      rgba(16, 17, 18, 1) 70%),
      /* black overlay with some alpha */
      rgba(0,0,0,0.3);
    pointer-events: none;
}

 
 .s-intro__text {
     font-family: var(--font-2);
     font-weight: 500;
     font-size: calc(var(--text-huge) * var(--text-huge-multiplier));
     line-height: var(--text-huge-line-height);
     letter-spacing: normal;
     text-align: center;
     margin: 0;
     padding-bottom: calc(10 * var(--space));
     position: relative;
 }
 
 .s-intro__text span {
     color: hsl(0deg 65% 40%);
 }
 
 /* --------------------------------------------------------------------
   * ## intro scroll down
   * -------------------------------------------------------------------- */
 .s-intro__scroll-down {
     display: flex;
     align-items: center;
     font-family: var(--font-2);
     font-size: 10px;
     font-weight: 300;
     text-transform: uppercase;
     letter-spacing: .6em;
     color: white;
     line-height: 1.6rem;
     padding: .8rem 0;
     transform: translateY(0) rotate(90deg);
     transform-origin: right bottom;
     position: absolute;
     bottom: 0;
     right: -4rem;
 }
 
 .s-intro__scroll-down svg {
     height: 1.4rem;
     width: 1.4rem;
     margin-left: 1.6rem;
 }
 
 .s-intro__scroll-down svg path {
     fill: white;
 }
 
 .s-intro__scroll-down:focus,
 .s-intro__scroll-down:hover {
     color: var(--color-1);
 }
 
 /* --------------------------------------------------------------------
   * ## intro about
   * -------------------------------------------------------------------- */
 .s-intro__about {
     z-index: 1;
     flex: none;
     width: 75%;
     max-width: 880px;
     background-color: rgba(10, 11, 11, 0.75);
     font-weight: 300;
     font-size: calc(var(--text-size) * 1.1111);
     line-height: var(--vspace-1_25);
     color: var(--color-text-light);
     margin-top: calc(var(--vspace-3) * -1);
     margin-bottom: var(--vspace-3_5);
     padding: var(--vspace-2_5) var(--vspace-3) var(--vspace-2);
     position: relative;
 }
 
 .s-intro__about::before {
     content: "";
     display: block;
     width: 1px;
     height: var(--vspace-2);
     background-color: hsl(0deg 64.71% 40%);
     transform: translateX(-50%);
     position: absolute;
     top: calc(var(--vspace-1) * -1);
     left: 50%;
 }
 
 .s-intro__about .s-intro__about-title {
     text-align: center;
     font-size: var(--text-lg);
     line-height: var(--vspace-1);
     margin-top: 0;
     margin-bottom: var(--vspace-2);
 }
 
 /* --------------------------------------------------------------------
   * ## intro stats
   * -------------------------------------------------------------------- */
 .stats__item h5 {
     margin-top: var(--vspace-0_75);
 }
 
 .stats__count {
     font-family: var(--font-1);
     font-weight: 500;
     font-size: calc(var(--text-size) * 5.1111);
     line-height: 1;
     color: var(--color-1);
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * intro
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 1400px) {
     .s-intro {
         --text-huge-multiplier: .95;
     }
 
     .s-intro__scroll-down {
         bottom: -22rem;
         right: 6rem;
     }
 }
 
 @media screen and (max-width: 1300px) {
     .s-intro {
         --text-huge-multiplier: .9;
     }
 
     .s-intro__about {
         font-size: calc(var(--text-size) * 1.056);
         line-height: calc(1.125 * var(--space));
     }
 
     .stats__count {
         font-size: calc(var(--text-size) * 4.8889);
     }
 }
 
 @media screen and (max-width: 1200px) {
     .s-intro {
         --text-huge-multiplier: .85;
         padding-top: calc(var(--header-height) + var(--vspace-4));
     }
 
     .s-intro__text br {
         display: none;
     }
 
     .about-stats {
         max-width: 920px;
     }
 }
 
 @media screen and (max-width: 1100px) {
     .s-intro {
         --text-huge-multiplier: .75;
     }
 }
 
 @media screen and (max-width: 1000px) {
     .s-intro {
         --text-huge-multiplier: .7;
     }
 
     .s-intro__top-block {
         padding: 0 8vw;
     }
 
     .s-intro__about {
         font-size: var(--text-size);
         padding: var(--vspace-2) var(--vspace-1_75) var(--vspace-1);
     }
 
     .s-intro__about .s-intro__about-title {
         font-size: var(--text-md);
         line-height: var(--vspace-0_875);
         margin-bottom: var(--vspace-1_5);
     }
 }
 
 @media screen and (max-width: 900px) {
     .s-intro {
         padding-top: calc(var(--header-height) + var(--vspace-3));
     }
 
     .s-intro__text {
         padding-bottom: calc(8 * var(--space));
     }
 
     .s-intro__scroll-down {
         display: none;
     }
 
     .s-intro__about {
         width: 82%;
     }
 }
 
 @media screen and (max-width: 800px) {
     .stats__count {
         font-size: calc(var(--text-size) * 4.4444);
     }
 }
 
 @media screen and (max-width: 700px) {
     .s-intro {
         --text-huge-multiplier: .6;
     }
 
     .s-intro__about {
         width: 85%;
         font-size: calc(var(--text-size) * 0.9444);
         line-height: var(--vspace-1);
         padding: var(--vspace-2) var(--vspace-1_5) var(--vspace-1);
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-intro {
         --text-huge-multiplier: .5;
     }
 
     .s-intro__top-block {
         padding: 0 5vw;
     }
 
     .s-intro .s-intro__text {
         padding-bottom: calc(5 * var(--space));
     }
 
     .s-intro__about {
         width: calc(100% - var(--gutter) * 2);
         margin-top: 0;
         padding: var(--vspace-2) var(--vspace-1_25) var(--vspace-1);
     }
 
     .s-intro__about::before {
         height: var(--vspace-1_5);
         top: calc(var(--vspace-0_75) * -1);
     }
 
     .stats__item {
         margin-bottom: var(--vspace-0_25);
     }
 
     .stats__item h5 {
         margin-top: var(--vspace-0_5);
     }
 
     .stats__count {
         font-size: calc(var(--text-size) * 4);
     }
 }
 
 @media screen and (max-width: 500px) {
     .s-intro {
         --text-huge-multiplier: .425;
         padding-top: calc(var(--header-height) + var(--vspace-2_5));
     }
 
     .s-intro__about {
         margin-bottom: var(--vspace-2_5);
         padding: var(--vspace-2) var(--vspace-1) var(--vspace-0_5);
     }
 
     .s-intro__about .s-intro__about-title {
         font-size: var(--text-size);
         line-height: var(--vspace-0_75);
         margin-bottom: var(--vspace-1_25);
     }
 }
 
 @media screen and (max-width: 400px) {
     .s-intro {
         --text-huge-multiplier: .4;
         padding-top: calc(var(--header-height) + var(--vspace-2));
     }
 
     .s-intro__about {
         width: 100%;
     }
 }
 
 @media screen and (max-width: 350px) {
     .s-intro {
         --text-huge-multiplier: .38;
     }
 
     .s-intro__about {
         padding: var(--vspace-2) var(--vspace-0_75) var(--vspace-1);
     }
 }
 
 /* ==================== Continuous Scrolling + Center Scale ==================== */
 
 /* A horizontally scrollable container. 
    We hide the scrollbar to give a cleaner look. */
    .tech-scroll-container {
     display: flex;
     gap: 2rem;                  /* spacing between slides */
     overflow-x: hidden;         /* important: hide scroll, but we still set scrollLeft in JS */
     position: relative;
     padding: 2rem 0;           /* top/bottom padding as needed */
   }
   .tech-scroll-container::-webkit-scrollbar {
     display: none; /* hides scrollbar on Chrome/Safari/Opera */
   }
   
   /* Each "slide" block. We'll scale them in JS. */
   .tech-slide {
     flex: 0 0 auto;             /* keep them side by side */
     transition: transform 0.3s ease; /* animate scale changes */
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   /* Adjust image size to your preference. */
   .tech-slide img {
     max-width: 80px;
     height: auto;
     display: block;
   }
   
 /* ===================================================================
   * # SHARED IGNITE BACKGROUND EFFECT
   * Applied to all major accent sections
   * ------------------------------------------------------------------- */

/* Base: position + isolation so pseudo layers work */
.s-services {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.s-contact {
    position: relative;
    overflow: hidden;
    background-color: #000000;
}

/* Layer 1: deep diagonal dark-crimson gradient */
.s-services::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #0a0000 0%,
        #1a0606 20%,
        #2d0b0b 40%,
        hsl(0deg 64.71% 18%) 55%,
        #2d0b0b 70%,
        #140404 100%
    );
    z-index: 0;
}

/* Layer 2: sweeping shimmer - reuses the divider-shimmer keyframe */
.s-services::after {
    content: "";
    position: absolute;
    inset: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(168, 36, 36, 0.15) 45%,
        rgba(255, 80, 80, 0.07) 50%,
        transparent 65%
    );
    animation: divider-shimmer 6s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* Lift all direct content children above the pseudo layers */
.s-services > * {
    position: relative;
    z-index: 2;
}

/* Dot-grid overlay child - fades in at top, out at bottom */
.section-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    pointer-events: none;
}

 /* ===================================================================
   * # SERVICES
   *
   *
   * ------------------------------------------------------------------- */
 .s-services {
     padding-top: var(--vspace-5);
     padding-bottom: var(--vspace-5);
 }
 
 /* --------------------------------------------------------------------
   * ## services list
   * -------------------------------------------------------------------- */
 .services-list {
     max-width: 1080px;
     margin-top: var(--vspace-2_5);
     color: white;
 }
 
 .services-list .column:nth-child(2n + 1) {
     padding-right: 2.8rem;
 }
 
 .services-list .column:nth-child(2n + 2) {
     padding-left: 2.8rem;
 }
 
 .service-item {
     display: flex;
     margin-bottom: var(--vspace-1);
 }
 
 .service-item h3 {
     margin-top: 0;
     color: white;
 }
 
 .service-icon-block {
     margin-right: 2.6rem;
 }
 
 .service-icon {
     display: block;
     width: var(--vspace-1_75);
     height: var(--vspace-1_75);
     margin-top: .4rem;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     opacity: 1;
 }
 
 .service-icon--product-design {
     background-image: url(../images/icons/services/custom+dev.svg);
 }
 
 .service-icon--branding {
     background-image: url(../images/icons/services/mobileOptimisation.svg);
 }
 
 .service-icon--frontend {
     background-image: url(../images/icons/services/hosting+maintenance.svg);
 }
 
 .service-icon--research {
     background-image: url(../images/icons/services/icon-research.svg);
 }
 
 .service-icon--illustration {
     background-image: url(../images/icons/services/SEO.svg);
 }
 
 .service-icon--ecommerce {
     background-image: url(../images/icons/services/icon-mobile-development.png);
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * services
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .services-list .column:nth-child(2n + 1) {
         padding-right: var(--gutter);
     }
 
     .services-list .column:nth-child(2n + 2) {
         padding-left: var(--gutter);
     }
 }
 
 @media screen and (max-width: 1000px) {
     .service-icon-block {
         margin-right: 2rem;
     }
 
     .service-icon {
         width: var(--vspace-1_5);
         height: var(--vspace-1_5);
     }
 }
 
 @media screen and (max-width: 800px) {
     .service-item {
         margin-bottom: 0;
     }
 
     .service-icon-block {
         margin-right: 2.6rem;
     }
 
     .service-icon {
         width: var(--vspace-1_75);
         height: var(--vspace-1_75);
     }
 }
 
 @media screen and (max-width: 600px) {
     .service-item {
         display: block;
     }
 
     .service-icon-block {
         margin-right: 0;
         margin-bottom: var(--vspace-0_5);
     }
 }
 
 @media screen and (max-width: 400px) {
     .services-list .column:nth-child(2n + 1) {
         padding-right: 0;
     }
 
     .services-list .column:nth-child(2n + 2) {
         padding-left: 0;
     }
 }
 
 
 /* ===================================================================
   * # WORKS
   *
   *
   * ------------------------------------------------------------------- */
 .s-works {
     padding-top: var(--vspace-5);
 }
 
 /* ------------------------------------------------------------------- 
   * ## portfolio list
   * ------------------------------------------------------------------- */
 .folio-list {
     margin-top: var(--vspace-2_5);
     margin-bottom: var(--vspace-2);
 }
 
 .folio-item {
     position: relative;
     overflow: hidden;
 }
 
 .folio-item__caption {
     display: none;
 }
 
 /* thumbnail
   */
 .folio-item__thumb a {
     display: block;
 }
 
 .folio-item__thumb a::before {
     z-index: 1;
     content: "";
     display: block;
     background-color: rgba(0, 0, 0, 0.85);
     opacity: 0;
     visibility: hidden;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     transition: all, .5s;
 }
 
 .folio-item__thumb a::after {
     z-index: 1;
     content: "...";
     text-align: center;
     font-family: var(--font-1);
     font-weight: 300;
     font-size: 3rem;
     color: white;
     display: block;
     height: 3.2rem;
     width: 3.2rem;
     line-height: 3.2rem;
     margin-left: -1.6rem;
     margin-top: -3rem;
     text-align: center;
     opacity: 0;
     visibility: hidden;
     transform: scale(0.5);
     transition: all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
     position: absolute;
     left: 50%;
     top: 50%;
 }
 
 .folio-item__thumb img {
     vertical-align: bottom;
     margin-bottom: 0;
     transition: all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 /* portfolio info
   */
 .folio-item__info {
     z-index: 2;
     padding: 0 3rem;
     transform: translateY(-100%);
     opacity: 0;
     visibility: hidden;
     transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
     position: absolute;
     left: 0;
     top: var(--vspace-1);
 }
 
 .folio-item__title {
     font-size: calc(var(--text-size) * 0.8889);
     line-height: 1.25;
     margin: 0;
     color: white;
 }
 
 .folio-item__cat {
     font-family: var(--font-2);
     font-size: 1.2rem;
     font-size: calc(var(--text-size) * 0.6667);
     line-height: 1.5;
     margin-bottom: 0.2rem;
     color: rgba(255, 255, 255, 0.5);
 }
 
 .folio-item__project-link {
     z-index: 2;
     display: block;
     font-weight: 400;
     font-size: 1.2rem;
     line-height: 2rem;
     color: white;
     background-color: transparent;
     border: 1px solid rgba(255, 255, 255, 0.3);
     padding: .6rem 1.2rem;
     opacity: 0;
     visibility: hidden;
     transform: translateX(-100%);
     transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
     position: absolute;
     bottom: var(--vspace-1);
     left: 3rem;
 }
 
 .folio-item__project-link::before {
     display: block;
     content: "";
     height: 1px;
     width: 3rem;
     background-color: rgba(255, 255, 255, 0.3);
     position: absolute;
     top: 50%;
     left: -3rem;
 }
 
 .folio-item__project-link:focus,
 .folio-item__project-link:hover,
 .folio-item__project-link:active {
     background-color: white;
     border: 1px solid white;
     color: black;
 }
 
 /* on hover
   */
 .folio-item:hover .folio-item__thumb img {
     transform: scale(1.05);
 }
 
 .folio-item:hover .folio-item__thumb a::before {
     opacity: 1;
     visibility: visible;
 }
 
 .folio-item:hover .folio-item__thumb a::after {
     opacity: 1;
     visibility: visible;
     transform: scale(1);
 }
 
 .folio-item:hover .folio-item__info {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }
 
 .folio-item:hover .folio-item__project-link {
     opacity: 1;
     visibility: visible;
     transform: translateX(0);
 }
 
 /* ------------------------------------------------------------------- 
   * ## clients
   * ------------------------------------------------------------------- */
 .clients-outer {
     max-width: 1020px;
 }
 
 .clients-outer .text-clients-title {
     max-width: 640px;
     line-height: calc(1.375 * var(--space));
     margin-left: auto;
     margin-right: auto;
     margin-top: 0;
     text-align: center;
 }
 
 .clients {
     margin-top: var(--vspace-1_5);
     padding-bottom: var(--vspace-3);
 }
 
 .clients__slide img {
     margin-bottom: -150%;
     opacity: 1;
     transform: scale(0.9);
     transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 .clients__slide:focus img,
 .clients__slide:hover img {
     transform: scale(1);
     opacity: 1;
 }
 
 /* ------------------------------------------------------------------- 
   * ## video block
   * ------------------------------------------------------------------- */
 .video-block {
     margin-top: var(--vspace-5);
     display: flex;
     justify-content: center;
     align-items: center;
     padding-top: calc(5.5 * var(--space));
     padding-bottom: calc(5.5 * var(--space));
     text-align: center;
     position: relative;
 }
 
 .video-block__bg-left,
 .video-block__bg-right {
     pointer-events: none;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     position: absolute;
     top: 0;
     bottom: 0;
 }
 
 .video-block__bg-left {
     background-image: url(../images/video-bg-01.jpg);
     left: 0;
     right: 50%;
 }
 
 .video-block__bg-right {
     background-image: url(../images/video-bg-02.jpg);
     left: 50%;
     right: 0;
 }
 
 .video-block__content {
     position: relative;
 }
 
 .video-link {
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: white;
     height: var(--vspace-3_5);
     width: var(--vspace-3_5);
     border-radius: 50%;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: var(--vspace-2);
 }
 
 .video-link svg {
     height: var(--vspace-1_25);
     width: var(--vspace-1_25);
     transform: translateX(4%);
 }
 
 .video-link svg path {
     fill: black;
     transition: all 0.3s ease-in-out;
 }
 
 .video-link:focus,
 .video-link:hover {
     background-color: var(--color-body);
 }
 
 .video-link:focus svg path,
 .video-link:hover svg path {
     fill: white;
 }
 
 .video-caption {
     font-size: calc(var(--text-size) * 0.6111);
     text-transform: uppercase;
     letter-spacing: .4em;
     color: white;
     background-color: var(--color-body);
     padding: .6rem 2.4rem .6rem 2.8rem;
     margin: 0;
 }
 
 /* ------------------------------------------------------------------- 
   * ## testimonials
   * ------------------------------------------------------------------- */
 .testimonials {
     margin-top: var(--vspace-4_5);
     max-width: 1080px;
 }
 
 .testimonials .swiper-container {
     padding-bottom: var(--vspace-1_5);
 }
 
 /* testimonial slider
   */
 .testimonial-slider__slide {
     position: relative;
 }
 
 .testimonial-slider__author {
     display: inline-block;
     min-height: var(--vspace-2);
     margin-bottom: var(--vspace-0_625);
     padding-left: calc(2.25 * var(--space));
     position: relative;
 }
 
 .testimonial-slider__avatar {
     width: var(--vspace-1_75);
     height: var(--vspace-1_75);
     border-radius: 100%;
     outline: none;
     position: absolute;
     top: 0;
     left: 0;
 }
 
 .testimonial-slider__cite {
     display: block;
 }
 
 .testimonial-slider__cite strong,
 .testimonial-slider__cite span {
     font-style: normal;
     transition: all 0.3s ease-in-out;
 }
 
 .testimonial-slider__cite strong {
     font-size: calc(var(--text-size) * 0.9444);
     font-weight: 400;
     line-height: var(--vspace-0_75);
     color: var(--color-1);
 }
 
 .testimonial-slider__cite span {
     display: block;
     font-size: var(--text-xs);
     font-weight: 400;
     line-height: var(--vspace-0_5);
     color: white;
 }
 
 /* ------------------------------------------------------------------- 
   * responsive:
   * works
   * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .clients-outer .text-clients-title {
         max-width: 500px;
     }
 
     .clients-outer .text-clients-title br {
         display: none;
     }
 
     .testimonials {
         max-width: 600px;
     }
 }
 
 @media screen and (max-width: 600px) {
     .video-block {
         padding-top: var(--vspace-5);
         padding-bottom: var(--vspace-5);
     }
 }
 
 @media screen and (max-width: 400px) {
     .folio-list {
         margin-bottom: var(--vspace-1);
     }
 
     .clients-outer .text-clients-title {
         max-width: 300px;
         font-size: var(--text-lg);
         line-height: var(--vspace-1);
     }
 
     .video-block {
         padding-top: var(--vspace-4);
         padding-bottom: var(--vspace-4);
     }
 
     .video-link {
         height: var(--vspace-2_5);
         width: var(--vspace-2_5);
     }
 
     .video-link svg {
         height: var(--vspace-1);
         width: var(--vspace-1);
     }
 }
 
 
 /* ===================================================================
   * # CONTACT
   *
   *
   * ------------------------------------------------------------------- */
 .s-contact {
     padding-top: var(--vspace-5);
     padding-bottom: var(--vspace-3);
 }
 
 .s-contact__content {
     max-width: 600px;
 }
 
 .s-contact__content .btn-wrap {
     max-width: 480px;
     margin: 0 auto;
 }
 
 .s-contact__content .btn {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: var(--vspace-1);
 }
 
 .s-contact__content .btn svg {
     margin-right: 1.6rem;
     height: var(--vspace-0_75);
     width: var(--vspace-0_75);
 }
 
 .s-contact__content .btn svg path {
     fill: white;
 }
 
 
 /* ===================================================================
   * # FOOTER
   *
   *
   * ------------------------------------------------------------------- */
 .s-footer {
     border-top: 1px solid var(--color-border);
     padding: var(--vspace-3) 0 var(--vspace-1_5);
 }

 .s-footer__main {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: var(--vspace-1_5) var(--vspace-3);
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 3.2rem;
 }

 .s-footer__logo {
     display: inline-block;
     margin-bottom: var(--vspace-0_75);
 }

 .s-footer__logo img {
     width: 80px;
     display: block;
 }

 .s-footer__tagline {
     font-size: var(--text-sm);
     line-height: 1.75;
     color: rgba(255, 255, 255, 0.32);
     margin: 0;
     max-width: 26rem;
 }

 .s-footer__heading {
     font-family: var(--font-1);
     font-size: 9px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: .4em;
     color: rgba(255, 255, 255, 0.3);
     margin: 0 0 var(--vspace-0_75);
 }

 .s-footer__links {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .s-footer__links li {
     padding: 0;
     margin-bottom: var(--vspace-0_375);
 }

 .s-footer__links a {
     font-size: var(--text-sm);
     color: rgba(255, 255, 255, 0.55);
     text-decoration: none;
     transition: color 0.2s;
 }

 .s-footer__links a:hover,
 .s-footer__links a:focus {
     color: white;
 }

 /* bottom bar */
 .s-footer__bottom {
     display: flex;
     align-items: center;
     gap: 2.4rem;
     max-width: 1280px;
     margin: var(--vspace-2) auto 0;
     padding: var(--vspace-1) 3.2rem 0;
     border-top: 1px solid var(--color-border);
 }

 .s-footer__copyright {
     font-size: var(--text-xs);
     color: rgba(255, 255, 255, 0.25);
     flex: 1;
 }

 .s-footer__cookie {
     font-size: var(--text-xs);
     color: rgba(255, 255, 255, 0.25);
     text-decoration: none;
     transition: color 0.2s;
 }

 .s-footer__cookie:hover {
     color: rgba(255, 255, 255, 0.65);
 }

 .s-footer__go-top {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 3.4rem;
     height: 3.4rem;
     border: 1px solid var(--color-border);
     border-radius: 50%;
     color: white;
     text-decoration: none;
     flex-shrink: 0;
     transition: border-color 0.2s, background-color 0.2s;
 }

 .s-footer__go-top svg {
     width: 1.4rem;
     height: 1.4rem;
 }

 .s-footer__go-top:hover {
     border-color: var(--color-1);
     background-color: var(--color-1);
 }

 /* partnership badge */
 .s-footer__partner-badge {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     gap: 1.4rem;
     max-width: 1280px;
     margin: var(--vspace-1_5) auto 0;
     padding: var(--vspace-1) 3.2rem;
     border-top: 1px solid var(--color-border);
     font-size: var(--text-xs);
     color: rgba(255, 255, 255, 0.45);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     line-height: 1;
 }

 .s-footer__partner-badge::before {
     content: '';
     display: inline-block;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--color-1);
     flex-shrink: 0;
 }

 .s-footer__partner-link {
     display: inline-flex;
     align-items: center;
     opacity: 0.85;
     transition: opacity 0.2s;
 }

 .s-footer__partner-link:hover {
     opacity: 1;
 }

 .s-footer__partner-logo {
     height: 28px;
     width: auto;
     display: block;
     transform: translateY(2px);
 }

 @media screen and (max-width: 1200px) {
     .s-footer__main {
         grid-template-columns: 1fr 1fr 1fr;
     }

     .s-footer__brand {
         grid-column: 1 / -1;
     }

     .s-footer__tagline {
         max-width: 48rem;
     }
 }

 @media screen and (max-width: 800px) {
     .s-footer__main {
         grid-template-columns: 1fr 1fr;
         gap: var(--vspace-1_5) var(--vspace-2);
     }

     .s-footer__brand {
         grid-column: 1 / -1;
     }
 }

 @media screen and (max-width: 500px) {
     .s-footer__main {
         grid-template-columns: 1fr;
     }

     .s-footer__bottom {
         flex-wrap: wrap;
         gap: var(--vspace-0_5);
     }

     .s-footer__copyright {
         order: 2;
         flex: none;
         width: 100%;
     }

     .s-footer__go-top {
         margin-left: auto;
     }
 }

 /* 🔥 FORM CONTAINER */
 .contact-form-container {
     background-color: #1b1b1b;
     border: 2px solid #FF6600;
     padding: 60px;
     justify-content: center;
     border-radius: 15px;
     box-shadow: 0 0 15px rgba(255, 102, 0, 0.3);
     max-width: 500px;
     width: 100%;
 }
 
 .form-title {
     color: #FF6600;
     font-weight: bold;
     font-size: 1.5rem;
     text-align: center;
     margin-bottom: 1rem;
 }
 
 .input-row {
     display: flex;
     gap: 1rem;
 }
 
 .form-control {
     width: 100%;
     background-color: #222;
     color: #fff;
     border: none;
     padding: 0.75rem;
     border-radius: 5px;
     margin-bottom: 3rem;
 }
 
 .form-control:focus {
     background-color: #444;
     color: #fff;
     outline: none;
     box-shadow: 0 0 0 0.2rem rgba(185, 16, 4, 0.76);
 }
 
 
 /* ===================================================================
  * # WHY CHOOSE US SECTION
  * ------------------------------------------------------------------- */
 .why-choose-us {
     background-color: #000;
     padding: var(--vspace-5) 0;
     color: var(--color-text-dark);
 }
 
 .why-choose-us .section-header {
     margin-bottom: var(--vspace-3);
 }
 
 .why-choose-us .text-pretitle {
     color: var(--color-1);
 }
 
 .why-choose-us .text-display-title {
     font-size: var(--text-display-1);
     margin-bottom: var(--vspace-3);
 }
 
 /* Features container */
 .why-choose-us__features {
     display: flex;
     flex-wrap: wrap;
     gap: var(--gutter);
     justify-content: center;
     margin-top: var(--vspace-4);
     padding: 0 var(--gutter);
 }
 
 /* Individual feature blocks */
 .why-choose-us__features .feature {
     flex: 1 1 calc(50% - var(--gutter));
     max-width: calc(50% - var(--gutter));
     background: #FFFFFF;
     padding: var(--vspace-1_5) var(--vspace-2);
     border: 1px solid var(--color-border);
     border-radius: var(--border-radius);
     text-align: center;
     transition: transform 0.3s ease;
     margin-bottom: var(--vspace-1);
     /* Set initial state for animation */
     opacity: 0;
     transform: translateX(-100px);
 }
 
 .why-choose-us__features .feature:hover {
     transform: translateY(-5px);
 }
 
 .why-choose-us__features .feature h3,
 .why-choose-us__features .feature h4 {
     font-size: var(--text-lg);
     color: var(--color-1);
     margin-bottom: var(--vspace-0_5);
     margin-top: 0;
 }
 
 .why-choose-us__features .feature p {
     font-size: var(--text-md);
     color: #000000; 
     line-height: var(--vspace-1_25);
     margin-bottom: 0;
 }
 
 /* Responsive adjustments */
 @media screen and (max-width: 800px) {
     .why-choose-us__features .feature {
         flex: 1 1 100%;
         max-width: 100%;
     }
 }
 
 
 /* ==============================
   OUR SERVICES – FLIP CARD STYLES
   ============================== */

/* SECTION WRAPPER (Optional) */
.our-services {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: var(--vspace-2) 0;
    color: white;
}
.our-services::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a0000 0%, #1a0606 20%, #2d0b0b 40%, hsl(0deg 64.71% 18%) 55%, #2d0b0b 70%, #140404 100%);
    z-index: 0;
}
.our-services > * { position: relative; z-index: 2; }
  
  .our-services .section-header {
    margin-bottom: var(--vspace-3);
  }
  .our-services .text-pretitle {
    color: #000;
    font-weight: bold;
  }
  .our-services .text-display-title {
    font-size: var(--text-display-1);
    margin-bottom: var(--vspace-3);
    color: white;
  }
  
  /* CONTAINER for the flip cards */
  .services-list {
    /* 
      For desktops, set up a flex container. 
      We’ll define 3 columns in a media query below.
    */
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;           /* spacing between cards */
    justify-content: center;
    padding: 0 1rem;
  }
  
  /* Each card item */
  .services-list .service-item {
    /* 
      For smaller devices, we’ll override to 100% width. 
      For desktops, we set 3 columns in a media query below.
    */
    flex: 0 0 100%;
    box-sizing: border-box;
  }
  
  /* ================
     FLIP-CARD BASE
     (applies to all screen sizes unless overridden)
     ================ */
  .flip-card {
    background-color: transparent;
    width: 100%;
    min-height: 350px;      /* Base min-height, will be bigger on desktop below */
    perspective: 1000px;    /* 3D effect */
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  /* Flip on hover/focus */
  .flip-card:hover .flip-card-inner,
  .flip-card:focus-within .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Front & Back faces */
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* FRONT FACE */
  .flip-card-front {
    background: #fff;
    color: #000;
  }
  
  /* Front Face Title */
  .flip-card-front h4 {
    font-size: 1.5rem; /* default front title size */
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    margin: 0;
    position: relative;
  }
  .flip-card-front h4::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.5rem;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: var(--color-1);
  }
  
  /* BACK FACE */
  .flip-card-back {
    background: #fff;
    color: #333;
    transform: rotateY(180deg);
  }
  
  /* Back Face Paragraph */
  .flip-card-back p {
    font-size: 1.5rem;
    line-height: 1.4;
    margin: 0;
    padding: 0 1.5rem;
    color: #333;
  }
  
  @media screen and (max-width: 600px) {

    /* Force one column layout */
    .services-list .service-item {
      flex: 0 0 100%;
    }
  
    /* Increase overall card height */
    .flip-card {
      min-height: 300px !important;  /* increased from 420px */
    }
  
    /* Let inner container auto-adjust */
    .flip-card-inner {
      height: 300px !important;
    }
    .flip-card-front,
    .flip-card-back {
      height: 300px !important;
      padding: 1%.5;  /* increased padding so content doesn't stick to the edges */
    }
  
    /* Increase text sizes so they fill the card more */
    .flip-card-front h4,
    .flip-card-back p {
      font-size: 1.4rem;  /* increased from 1.3rem */
    }
  }
  
  
  /* 2) DESKTOP (Above 600px) – 3 Cards per Row */
  @media screen and (min-width: 601px) {
    
    /* Force 3 columns */
    .services-list .service-item {
      flex: 0 0 calc(33.333% - 1.333rem); 
      /* 
        - We have 2rem gap total, 
        - distributed among multiple columns. 
        - Another approach: flex: 0 0 30%;
      */
    }
  
    /* Bump min-height so they’re bigger on desktop */
    .flip-card {
      min-height: 400px;
    }
  
    /* Slightly larger text on desktop */
    .flip-card-front h4 {
      font-size: 1.6rem; 
    }
    .flip-card-back p {
      font-size: 1.6rem;
    }
  }
  
      
 
   /* =======================
    COOL ANIMATED BUTTON
    ======================= */
 .btn-ignite {
     display: inline-block;
     font-family: var(--font-2);
     font-weight: 700;
     font-size: 1.75rem; /* Text size */
     text-transform: uppercase;
     color: #fff;
     background: linear-gradient(90deg, #A82424 0%, #383939 100%);
    
     padding: 1rem 2rem;
     margin-top: 1.5rem;
     border-radius: 50px;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
     text-decoration: none; /* Remove underline */
   }
   .s-intro__contact-btn-wrapper {
     text-align: center;       /* Centers the button horizontally */
     margin-top: 2rem;         /* Space above the button; adjust as needed */
   }
   
   
   /* Hover effect: gradient flip, slight lift, and glow */
   .btn-ignite:hover {
     background: linear-gradient(90deg, #383939 0%, #ff6a00d1 100%);
 
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(255, 106, 0, 0.3);
   }
   
   /* Subtle "shine" effect sliding across on hover */
   .btn-ignite::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.2);
     transform: skewX(-45deg);
     transition: left 0.5s ease;
   }
   
   .btn-ignite:hover::before {
     left: 100%;
   }
   .s-intro__contact-btn-wrapper {
     text-align: center;       /* Centers the button horizontally */
     margin-top: 2rem;         /* Space above the button; adjust as needed */
   }
   
   
   

/* ===================================================================
 * # PACKAGES DIVIDER
 * ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- 
 * Shared bg context: divider + packages section flow together
 * ------------------------------------------------------------------- */
.packages-divider,
.s-packages {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.packages-divider {
    padding: 9.6rem 0;
}

/* deep layered diagonal gradient - shared across both elements */
.packages-divider__bg {
    position: absolute;
    inset: 0;
    /* extend downward beyond its own box so s-packages picks it up via its own pseudo */
    background:
        linear-gradient(135deg,
            #0a0000 0%,
            #1a0606 20%,
            #2d0b0b 40%,
            hsl(0deg 64.71% 18%) 55%,
            #2d0b0b 70%,
            #140404 100%);
    z-index: 0;
}

/* The packages section carries the same gradient, starting from the same
   mid-tone so it reads as one continuous band */
.s-packages::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            #140404 0%,
            #2d0b0b 25%,
            hsl(0deg 64.71% 15%) 50%,
            #1a0606 75%,
            #0a0000 100%);
    z-index: 0;
}

/* animated diagonal shimmer - runs on both via a shared animation */
.packages-divider__bg::after,
.s-packages::after {
    content: "";
    position: absolute;
    inset: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(168, 36, 36, 0.15) 45%,
        rgba(255, 80, 80, 0.07) 50%,
        transparent 65%
    );
    animation: divider-shimmer 6s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* offset the shimmer on the packages section so it feels continuous not duplicated */
.s-packages::after {
    animation-delay: -3s;
}

@keyframes divider-shimmer {
    0%   { transform: translateX(-60%) skewX(-15deg); }
    100% { transform: translateX(60%) skewX(-15deg); }
}

/* dot-grid overlay */
.packages-divider__grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    /* only fade at the very top; let the bottom bleed into the packages section */
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
}

/* carry the dot grid into the packages section */
.s-packages .packages-section__grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    /* fade out at the bottom as we return to the site's dark bg */
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    pointer-events: none;
}

/* content wrapper */
.packages-divider__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.4rem;
}

/* eyebrow label */
.packages-divider__eyebrow {
    display: inline-block;
    font-family: var(--font-2);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.45em;
    color: var(--color-1);
    padding: 0.6rem 2rem;
    border: 1px solid rgba(168, 36, 36, 0.5);
    border-radius: 50px;
    background: rgba(168, 36, 36, 0.08);
    animation: divider-fade-in 0.8s ease both;
}

/* large headline words that stagger in */
.packages-divider__headline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 2.4rem;
    margin: 0;
    font-family: var(--font-2);
    font-weight: 700;
    font-size: clamp(3.6rem, 6vw, 7.2rem);
    line-height: 1.1;
    color: var(--color-white);
    letter-spacing: -0.02em;
}

.packages-divider__headline span {
    display: inline-block;
    opacity: 0;
    transform: translateY(2rem);
    animation: divider-word-in 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.packages-divider__headline span:nth-child(1) { animation-delay: 0.15s; }
.packages-divider__headline span:nth-child(2) { 
    animation-delay: 0.3s;
    color: var(--color-1);
}
.packages-divider__headline span:nth-child(3) { animation-delay: 0.45s; }

/* animated red underline */
.packages-divider__line {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-1), transparent);
    animation: divider-line-in 1s 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes divider-fade-in {
    from { opacity: 0; transform: translateY(-1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes divider-word-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes divider-line-in {
    to { width: 24rem; }
}

@media screen and (max-width: 600px) {
    .packages-divider {
        padding: 6.4rem 2rem;
    }
    .packages-divider__headline {
        flex-direction: column;
        gap: 0.4rem;
    }
    @keyframes divider-line-in {
        to { width: 14rem; }
    }
}


/* ===================================================================
 * # PACKAGES SECTION
 * ------------------------------------------------------------------- */
.s-packages {
    padding: var(--vspace-5) 0 calc(var(--vspace-5) + 4rem);
    /* background handled by ::before pseudo above */
    background-color: transparent;
}

.s-packages .text-pretitle {
    color: var(--color-1);
}

/* push all direct children above the pseudo-element layers */
.s-packages > * {
    position: relative;
    z-index: 2;
}

.s-packages__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 3.2rem;
    justify-content: center;
    align-items: stretch;
    margin-top: var(--vspace-3);
}

.s-packages__card {
    flex: 1 1 28rem;
    max-width: 38rem;
    display: flex;
}

/* the card itself */
.package-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: rgba(10, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(168, 36, 36, 0.2);
    border-radius: 8px;
    padding: var(--vspace-2) var(--vspace-1_5);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* featured card */
.package-card--featured {
    background: rgba(45, 11, 11, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: var(--color-1);
    border-width: 2px;
    box-shadow: 0 0 40px rgba(168, 36, 36, 0.15), inset 0 1px 0 rgba(255,255,255,0.04);
}

.package-card__badge {
    position: absolute;
    top: -1.4rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-1);
    color: #fff;
    font-family: var(--font-2);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.4rem 1.6rem;
    border-radius: 50px;
    white-space: nowrap;
}

.package-card__header {
    text-align: center;
    margin-bottom: var(--vspace-1_5);
    padding-bottom: var(--vspace-1);
    border-bottom: 1px solid var(--color-border);
}

.package-card__tier {
    display: block;
    font-family: var(--font-2);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-1);
    margin-bottom: 0.8rem;
}

.package-card__name {
    font-family: var(--font-2);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 var(--vspace-0_75);
    line-height: 1.2;
}

.package-card__price {
    font-family: var(--font-2);
    font-size: var(--text-xxl);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
}

.package-card__currency {
    font-size: var(--text-lg);
    vertical-align: super;
    color: var(--color-gray-3);
}

.package-card__divider {
    color: var(--color-gray-5);
    font-size: var(--text-lg);
}

.package-card__plus {
    font-size: var(--text-lg);
    color: var(--color-1);
}

.package-card__price-note {
    font-size: var(--text-xs);
    color: var(--color-gray-5);
    margin-top: 0.8rem;
    margin-bottom: 0;
    line-height: 1.4;
}

/* feature list */
.package-card__features {
    list-style: none;
    margin: 0 0 var(--vspace-2);
    padding: 0;
    flex: 1;
}

.package-card__features li {
    padding: 0.8rem 0;
    padding-left: 2.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: var(--text-sm);
    color: var(--color-gray-3);
    position: relative;
}

.package-card__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-1);
    font-weight: 700;
}

.package-card__features li:last-child {
    border-bottom: none;
}

/* cta button */
.package-card__cta {
    text-align: center;
    margin-top: auto;
}

.package-card__cta .btn-ignite {
    margin-top: 0;
    width: 100%;
    text-align: center;
}

/* section header sep blends into the crimson bg */
.s-packages .section-header.has-bottom-sep::before {
    background-color: rgba(168, 36, 36, 0.3);
}

.s-packages .text-display-title {
    color: var(--color-white);
}

@media screen and (max-width: 900px) {
    .s-packages__card {
        flex: 1 1 100%;
        max-width: 48rem;
    }
}


/* ===================================================================
 * # FAQ (AEO)
 * ------------------------------------------------------------------- */
.s-faq {
    padding-top: var(--vspace-3);
    padding-bottom: var(--vspace-3);
}

.s-faq__list {
    max-width: 80rem;
    margin: 0 auto;
}

.s-faq__item {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--vspace-0_75) var(--vspace-1_25);
    margin-bottom: var(--vspace-0_75);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.s-faq__item[open] {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.s-faq__item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.s-faq__item summary::-webkit-details-marker { display: none; }

.s-faq__item summary h3 {
    font-size: var(--text-lg);
    color: var(--color-1);
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
}

.s-faq__icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.s-faq__icon::before,
.s-faq__icon::after {
    content: "";
    position: absolute;
    background: var(--color-1);
    transition: transform 0.25s ease;
}
.s-faq__icon::before {
    top: 8px; left: 0; right: 0; height: 2px;
}
.s-faq__icon::after {
    left: 8px; top: 0; bottom: 0; width: 2px;
}
.s-faq__item[open] .s-faq__icon::after {
    transform: scaleY(0);
}

.s-faq__item p {
    margin: var(--vspace-0_5) 0 0;
    color: #000;
    line-height: var(--vspace-1_25);
    font-size: var(--text-md);
}


/* ===================================================================
 * # COOKIE BANNER
 * ------------------------------------------------------------------- */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    background: var(--color-body);
    border-top: 1px solid var(--color-border);
}

.cookie-banner__inner {
    padding-top: var(--vspace-0_75);
    padding-bottom: var(--vspace-0_75);
    align-items: center;
}

.cookie-banner__text {
    margin: 0;
    color: var(--color-text-dark);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.cookie-banner__actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: var(--vspace-0_5);
}

.cookie-cmt__actions {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: var(--vspace-0_5);
}

@media screen and (min-width: 901px) {
    .cookie-banner__actions {
        margin-top: 0;
    }
}