* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: #262626;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html[lang="en"] body {
  font-family: 'Inter', sans-serif;
}


:root{
  --header-h: 110px; /* must match real header height */
}


.tech-strip {
  height: 210px;
  background: #262626;
  overflow: hidden;
  
}

.tech-strip-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.tech-icon {
  width: 52px;
  height: 52px;
  display: inline-block;

  background: rgba(255, 255, 255, 0.62);

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  transition:
    transform 0.22s ease,
    background 0.22s ease,
    filter 0.22s ease,
    opacity 0.22s ease;

  opacity: 0.9;
}

.tech-icon:hover {
  background: #598560;
  opacity: 1;
  transform: translateY(-2px);

  filter:
    drop-shadow(0 0 8px rgba(89, 133, 96, 0.75))
    drop-shadow(0 0 18px rgba(89, 133, 96, 0.45));
}

.tech-html5 {
  -webkit-mask-image: url('../assets/tech/html5.svg');
  mask-image: url('../assets/tech/html5.svg');
}

.tech-css3 {
  -webkit-mask-image: url('../assets/tech/css3-plain.svg');
  mask-image: url('../assets/tech/css3-plain.svg');
}

.tech-javascript {
  -webkit-mask-image: url('../assets/tech/javascript.svg');
  mask-image: url('../assets/tech/javascript.svg');
}

.tech-react {
  -webkit-mask-image: url('../assets/tech/react.svg');
  mask-image: url('../assets/tech/react.svg');
}

.tech-nodedotjs {
  -webkit-mask-image: url('../assets/tech/nodedotjs.svg');
  mask-image: url('../assets/tech/nodedotjs.svg');
}

.tech-python {
  -webkit-mask-image: url('../assets/tech/python.svg');
  mask-image: url('../assets/tech/python.svg');
}

.tech-mongodb {
  -webkit-mask-image: url('../assets/tech/mongodb.svg');
  mask-image: url('../assets/tech/mongodb.svg');
}

.tech-mysql {
  -webkit-mask-image: url('../assets/tech/mysql.svg');
  mask-image: url('../assets/tech/mysql.svg');
}

.tech-threedotjs {
  -webkit-mask-image: url('../assets/tech/threedotjs.svg');
  mask-image: url('../assets/tech/threedotjs.svg');
}

.tech-github {
  -webkit-mask-image: url('../assets/tech/github.svg');
  mask-image: url('../assets/tech/github.svg');
}

.site-header {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

html,
body {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* =========================================
   SCROLLBAR — RESPONSIVE VISIBILITY
   ========================================= */

/* Desktop and small desktop — visible */
@media (min-width: 1025px) {

  html,
  body {
    scrollbar-width: auto;
    -ms-overflow-style: auto;
  }

}

/* Tablet and mobile — hidden */
@media (max-width: 1024px) {

  html,
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none;
  }

}

/* Real landscape touch tablets — hidden */
@media (hover: none) and (pointer: coarse)
       and (min-width: 1025px)
       and (max-width: 1366px)
       and (max-height: 700px) {

  html,
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none;
  }

}


/* ===============================
   LANGUAGE SWITCH — SMOOTH FADE
   =============================== */

.site-header .brand-copy,
.site-header .nav a,
.lang-toggle,

.catalogue-title,

.blog-title,
.blog-category,
.blog-card-category,
.blog-card-title,
.blog-card-excerpt,
.blog-card-meta span,

.blog-post-back,
.blog-post-category,
.blog-post-heading h1,
.blog-post-excerpt,
.blog-post-meta span,
.blog-post-content,

.contact-title,
.contact-info-label,
.contact-info a,
.contact-info p,
.contact-form-title,
.contact-field label,
.contact-field input,
.contact-field select,
.contact-field textarea,
.contact-submit,

.services-title,
.service-card-title,

.process-title,
.process-step h3,

.footer-brand-copy,
.footer-cta,
.footer-nav a,
.footer-bottom span {
  transition:
    opacity 220ms ease,
    color 220ms ease;
}


body.language-changing .site-header .brand-copy,
body.language-changing .site-header .nav a,
body.language-changing .lang-toggle,

body.language-changing .catalogue-title,

body.language-changing .blog-title,
body.language-changing .blog-category,
body.language-changing .blog-card-category,
body.language-changing .blog-card-title,
body.language-changing .blog-card-excerpt,
body.language-changing .blog-card-meta span,

body.language-changing .blog-post-back,
body.language-changing .blog-post-category,
body.language-changing .blog-post-heading h1,
body.language-changing .blog-post-excerpt,
body.language-changing .blog-post-meta span,
body.language-changing .blog-post-content,

body.language-changing .contact-title,
body.language-changing .contact-info-label,
body.language-changing .contact-info a,
body.language-changing .contact-info p,
body.language-changing .contact-form-title,
body.language-changing .contact-field label,
body.language-changing .contact-field input,
body.language-changing .contact-field select,
body.language-changing .contact-field textarea,
body.language-changing .contact-submit

body.language-changing .services-title,
body.language-changing .service-card-title,

body.language-changing .process-title,
body.language-changing .process-step h3,

body.language-changing .footer-brand-copy,
body.language-changing .footer-cta,
body.language-changing .footer-nav a,
body.language-changing .footer-bottom span {
  opacity: 0;
}

/* ===============================
   MOBILE — HORIZONTAL CONTAINMENT
   =============================== */

@media (max-width: 699px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
}

/* ===============================
   430 MOBILE — TECH STRIP
   =============================== */

@media (max-width: 430.99px) {

  .tech-strip-inner {
    width: 100%;
    height: 100%;

    padding: 0 28px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);

    align-content: center;
    justify-items: center;

    column-gap: 12px;
    row-gap: 52px;
 }

  .tech-strip .tech-icon {
  width: 32px;
  height: 32px;

  position: relative;
  top: 20px;
}
}

.section-scroll-home-icon {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    stroke 0.25s ease;
}

.section-scroll-button:hover
.section-scroll-home-icon {
  stroke: #598560;
}