/*
Theme Name: Transkop Paracin
Theme URI: https://transkop.net/
Author: Ivan Petrovic
Author URI: https://ivan-petrovic.vercel.app/
Description: Transkop Paracin - behaton ploce
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: transkop-paracin
*/
:root{
    /* Colors */
    --color-text-black:#393737;
    --color-text-white:#FFFFFF;
    --color-transkop-orange:#C9613C;
    --color-transkop-red:#BA352F;
    --color-transkop-grey:#7C7C7C;
    --color-background-grey:#F3F3F3;
    --color-dark-grey:#393737;
    --color-dark-grey-70:rgba(57,55,55,0.7);
    --color-dark-grey-50:rgba(57,55,55,0.5);

    /* Typography scale (px converted to rem at 16px base) */
    --fs-h1:3.875rem; /* 62px */
    --lh-h1:1; /* 100% */
    --fs-h2:2.625rem; /* 42px */
    --lh-h2:1.1; /* 110% */
    --fs-h3:2rem; /* 32px */
    --lh-h3:1.2; /* 120% */
    --fs-h4:1.75rem; /* 28px */
    --lh-h4:1.2; /* 120% */
    --fs-h5:1.25rem; /* 20px */
    --lh-h5:1.2; /* 120% */
    --fs-h6:1.125rem; /* 18px */
    --lh-h6:1.5; /* 150% */
    --fs-p:1rem; /* 16px */
    --lh-p:1.5; /* 150% */
    --fs-a:0.875rem; /* 14px */
    --lh-a:1.5; /* 150% */
    --ls-a:0.15em; /* 15% letter spacing */
}

html{ font-size:16px; }
body{
    font-family:'Inter';
    color:var(--color-text-black);
    background:#fff;
    overflow-x: hidden;
}

main {
    display:flex;
    flex-direction:column;
    min-height:100svh;
}

h1, h2, h3, h4, h5, h6{ color:var(--color-text-black); margin:0; }
 h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); font-weight:700; }
 h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:600; }
 h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:600; }
 h4{ font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:600; }
 h5{ font-size:var(--fs-h5); line-height:var(--lh-h5); font-weight:600; }
 h6{ font-size:var(--fs-h6); line-height:var(--lh-h6); font-weight:700; text-transform:uppercase; }

p{ font-size:var(--fs-p); line-height:var(--lh-p); font-weight:300;  margin: 0;}
a{ font-size:var(--fs-a); line-height:var(--lh-a); font-weight:400; letter-spacing:var(--ls-a); text-transform:uppercase; text-decoration:none; position:relative; display:inline-block; overflow:hidden; }
a:hover{ text-decoration:none; }

/* Utility text colors */
.text-black{ color:var(--color-text-black) !important; }
.text-white{ color:var(--color-text-white) !important; }
.text-orange{ color:var(--color-transkop-orange) !important; }
.transkop-orange{ color:var(--color-transkop-orange) !important; }
.text-red{ color:var(--color-transkop-red) !important; }
.text-grey{ color:var(--color-transkop-grey) !important; }
.bg-grey{ background:var(--color-background-grey) !important; }
.dark-grey{ color:var(--color-dark-grey) !important; }
.dark-grey-70{ color:var(--color-dark-grey-70) !important; }
.dark-grey-50{ color:var(--color-dark-grey-50) !important; }

/* Layout */
.container-boxed{ width:100%; max-width:calc(1320px + 4rem); margin:0 auto; padding-left:2rem; padding-right:2rem; }
/* Front page section spacing */
.home section + section{ margin-top:20vh; }

/* Header */
.site-header{ position:fixed; top:0; left:0; right:0; height:100px; display:flex; align-items:center;  z-index:1002; background:#fff; transition:height 0.3s ease; }
.site-header .header-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; }
.site-header .header-inner{ transition:padding 0.3s ease; }
.site-header .site-logo img, .site-header .site-logo .custom-logo{ width:230px; height:auto; display:block; transition: width 0.3s ease, height 0.3s ease; }

.site-header .header-actions{ width:240px; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.site-header .site-logo, .site-header .btn-contact{ position:relative; z-index:1002; }

.site-header .btn-contact{ height:55px; display:inline-flex; align-items:center; justify-content:center; padding:0 18px; border:1px solid var(--color-text-black); border-radius:30px; background:#fff; color:var(--color-text-black); text-transform:none; letter-spacing:0; font-size:1rem; transition:all 0.3s ease; }
.site-header .btn-contact{ transition: height 0.3s ease, padding 0.3s ease, font-size 0.3s ease, border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease; }
.site-header .btn-contact:hover{ text-decoration:none; background:var(--color-dark-grey); color:var(--color-text-white); }

/* Shrink on scroll */
.site-header.is-shrunk{ height:70px; }
.site-header.is-shrunk .site-logo img, 
.site-header.is-shrunk .site-logo .custom-logo{ width:160px; }
.site-header.is-shrunk .btn-contact{ height:45px; padding:0 14px; font-size:0.9rem; }
.site-header.is-shrunk .hamburger{ width:50px; height:45px; }
.site-header.is-shrunk .hamburger .hamburger-icon{ width:24px; height:24px; }

.site-header .hamburger{ width:60px; height:55px; background:#fff; border:1px solid var(--color-text-black); border-radius:100px; display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease; }
.site-header .hamburger .hamburger-icon{ width:30px; height:30px; display:block; transition: width 0.3s ease, height 0.3s ease; }

/* Site nav */
.site-nav{ position:fixed; inset:0; background:#fff; z-index:1001; display:flex; pointer-events:none; clip-path: circle(0 at var(--nav-cx, 50%) var(--nav-cy, 50%)); transition: clip-path 0.5s ease-in-out; will-change: clip-path; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.site-nav.is-open{ pointer-events:auto; clip-path: circle(150vmax at var(--nav-cx, 20%) var(--nav-cy, 20%)); }
.site-nav .container-boxed{ width:100%; min-height:100%; display:flex; align-items:center; justify-content:center; }
.site-nav .nav-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; padding:0; margin:0 auto; }
.site-nav .nav-col{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2rem; }
.site-nav .nav-col .menu{ list-style:none; margin:0; padding-left:0; }
.site-nav .nav-col h2{ color:var(--color-transkop-orange); }
.site-nav a{ color:var(--color-text-black); font-size:1.5rem; text-transform:none; letter-spacing:0; }
.site-nav a, .site-footer .footer-col a{ position:relative; display:inline-block; overflow:hidden; padding-bottom:0; transition:ease-in 0.3s; text-decoration:none; align-self: baseline;}
.site-nav a::after, .site-footer .footer-col a::after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; transform:translateX(-100%); transition:transform 0.3s ease; }
.site-nav a::after{ background-color:var(--color-dark-grey); }
.site-footer .footer-col a::after{ background-color:#fff; }
.site-nav a:hover::after, .site-footer .footer-col a:hover::after{ transform:translateX(0); }
.site-nav a:hover, .site-footer .footer-col a:hover{ text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  .site-nav{ transition:none; clip-path:none; display:none; }
  .site-nav.is-open{ display:flex; }
}

/* Buttons */
.btn-hero{ width:210px; height:50px; border-radius:30px; padding:0 1rem; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; color:var(--color-text-black); font-size:var(--fs-a); line-height:var(--lh-a); letter-spacing:var(--ls-a); text-transform:uppercase; font-weight:400; }
.btn-hero img{ margin-left:10px; width:16px; height:16px; display:inline-block; transition:transform 0.3s ease, filter 0.3s ease; }
.btn-hero--primary{ background:var(--color-transkop-orange); color:var(--color-text-white); border-color:var(--color-transkop-orange); transition:all 0.3s ease;  }
.btn-hero--primary:hover{ background:var(--color-transkop-red); border-color:var(--color-transkop-red); transition:all 0.3s ease;}
.btn-hero--outline{ background:transparent; color:var(--color-dark-grey); border-color:var(--color-dark-grey); transition:all 0.3s ease; }
.btn-hero--outline:hover{ background:var(--color-dark-grey); color:var(--color-text-white); }
.btn-hero:hover{ text-decoration:none; }
.btn-hero:hover img{ transform:rotate(45deg); }
.btn-hero--primary img{ filter: invert(1); }
.btn-hero--outline:hover img{ filter: invert(1); }

/* Hero */
.hero{ position:relative; height:calc(100vh - 100px); display:flex; align-items:flex-end; margin-top:100px; overflow:hidden; }
.hero .container-boxed{ position:relative; z-index:2; width:100%; }
.hero .hero-content{ display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:10svh; max-width:535px; }
.hero .hero-content h5{ color:var(--color-transkop-red); margin-bottom:1rem; font-weight:300; }
.hero .actions{ display:flex; flex-wrap:nowrap; gap:1rem; }
.hero p { margin-top:40px; margin-bottom:60px; }
.hero .hero-media{ position:absolute; top:0; right:0; width:55%; height:100%; z-index:1; pointer-events: none; }
.hero-img-1 { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; opacity: 0; animation: fadeInRight 0.8s ease forwards; display: block; }
.hero-img-2 { position: absolute; bottom: 5%; width: 50%; height: auto; object-fit: contain; z-index: 2; opacity: 0; animation: slideDownImg 1s ease 0.8s forwards; display: block; }

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

.hero-overlay {
  position: absolute;
  right: 0;
  width: 0;
  z-index: 10;
  opacity: 0;
}

.hero-overlay-red {
  top: 10%;
  height: 40%;
  background-color: rgba(186, 53, 47, 0.8);
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 100%);
  animation: sweepTrapezoid 0.8s ease-out forwards;
}

.hero-overlay-orange {
  top: 50%;
  left: 0;
  width: 42.5%;
  height: 20%;
  background-color: rgba(204, 97, 44, 0.8);
  animation: fadeInOrange 0.8s ease-out 0.4s forwards;
}

@keyframes sweepTrapezoid {
  0% { 
    opacity: 1;
    width: 0; 
  }
  100% { 
    opacity: 1;
    width: 100%; 
  }
}

@keyframes fadeInOrange {
  0% { 
    opacity: 1;
    height: 0;
  }
  100% { 
    opacity: 1;
    height: 20%;
  }
}

@keyframes slideDownImg {
  0% { 
    opacity: 0;
    bottom: 15%;
  }
  100% { 
    opacity: 1;
    bottom: 5%;
  }
}

/* Footer */
.site-footer{ position:relative; width:100%; display:block; border-top:3px solid #fff; padding:0; background:var(--color-dark-grey); margin-top:auto; }
.site-footer .footer-bg{ width:100%; height:auto; display:block; object-fit:contain; }
.site-footer .footer-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; }

.site-footer .footer-top-wrapper{ width:100%; padding-top:0; padding-bottom:50px; }
.site-footer .footer-top-row{ display:flex; justify-content:space-between; align-items:flex-end; }
.site-footer .footer-logo img{ filter: brightness(0) invert(1); width:225px; height:auto; display:block; }
.site-footer .footer-addresses{ display:flex; flex-direction:column; gap:10px; text-align:left; }
.site-footer .footer-addresses p{ font-size:18px; font-weight:300; line-height:1.5; margin:0; color:#fff; }

.site-footer .footer-bottom-row{ width:100%; background:rgba(35, 35, 36, 0.8); height:70px; display:flex; align-items:center; margin-top:0; }
.site-footer .footer-bottom-inner{ width:100%; display:flex; justify-content:space-between; align-items:center; }

.site-footer .footer-mail{ display:inline-block; color: var(--color-text-white); text-transform:none; letter-spacing:var(--ls-a); font-size:0.875rem; text-decoration:none; transition:color 0.2s ease; }
.site-footer .footer-mail:hover{ color:var(--color-transkop-orange); text-decoration:none; }

.site-footer .footer-socials{ display:flex; gap:15px; align-items:center; overflow:visible; }
.site-footer .footer-socials a{ display:inline-block; overflow:visible; }
.site-footer .footer-socials img{ width:16px; height:16px; filter: brightness(0) invert(1); transition:all 0.3s ease; }
.site-footer .footer-socials a:hover img{ transform:scale(1.1); filter: invert(43%) sepia(61%) saturate(666%) hue-rotate(326deg) brightness(92%) contrast(89%); }


.homepage-inner{ display:grid; grid-template-columns:15% 85%; }
.homepage-left{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
.homepage-left h2,.homepage-left p{  color:var(--color-transkop-grey) }

.link-with-arrow{ display:inline-flex; align-items:center; gap:10px; color:var(--color-text-black); font-size:var(--fs-a); line-height:var(--lh-a); letter-spacing:var(--ls-a); text-transform:uppercase; text-decoration:none; position:relative; overflow:hidden; padding-bottom:0; }
.link-with-arrow .link-text{ position:relative; display:inline-block; padding-bottom:0; }
.link-with-arrow .link-text::after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:var(--color-dark-grey); transform:translateX(-100%); transition:transform 0.3s ease; }
.link-with-arrow:hover .link-text::after{ transform:translateX(0); }
.link-with-arrow img{ width:16px; height:16px; transition:transform 0.3s ease; }
.link-with-arrow:hover{ text-decoration:none; }
.link-with-arrow:hover img{ transform:rotate(45deg); }

.about .about-right {display:flex; flex-direction:column; gap:60px; }
.about .about-right h2 .text-orange{ color:var(--color-transkop-orange); }

  .about .about-stats .splide__list { display:grid !important; grid-template-columns:repeat(4, 1fr); gap:10px; width: 100%; }
  .about .about-stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1rem 1rem; height:150px; }
  
  @media (max-width: 1024px) {
    .about .about-stats .splide__list { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 767.98px) {
    .about .about-stats .splide__list { display: flex !important; box-sizing: border-box; gap: 0; padding: 0; } /* Splide handles layout */
  }

.about .about-cta{ display:flex; justify-content:space-between; gap:1rem; }
.about .about-cta p{ max-width:650px; margin:0; }

/* Services section */
.services .services-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.services .services-top h2{ margin:0; }
.services .services-right p{ margin-top:1rem; margin-bottom:4rem; }
.services .services-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.services .services-card{ display:flex; flex-direction:column; gap:1.25rem; padding:2rem; height:220px; justify-content: space-between;
}
.services .services-card .service-head{ display:flex; align-items:center; justify-content:space-between; }
.services .services-card .service-left{ display:flex; align-items:center; gap:1rem; }
.services .services-card .service-icon{ width:35px; height:35px; }
.services .services-card h5{ margin:0; }
.services .services-card .service-cta{ border:0; background:transparent; padding:0; cursor:pointer; }
.services .services-card .service-cta__circle{ width:35px; height:35px; border-radius:50%; background:var(--color-dark-grey); display:none; align-items:center; justify-content:center; }
.services .services-card .service-cta__circle img{ width:16px; height:16px; filter: invert(1); transition:transform 0.3s ease; }
.services .services-card .service-cta:hover .service-cta__circle img{ transform:rotate(45deg); }
.services .services-card .service-desc{ margin:0;}
.services-image{ width:100%; height:100vh; position:relative; overflow:hidden; }
.services-image .services-image__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.services .services-card, .services .services-card h5, .services .services-card .service-desc{ transition:color 0.3s ease, background-color 0.3s ease; }
.services .services-card .service-icon{ transition:filter 0.3s ease; }
.services .services-card .service-cta__circle{ transition:background-color 0.3s ease; }
.services .services-card .service-cta__circle img{ transition:transform 0.3s ease, filter 0.3s ease; }

.services .services-card:hover{ background:var(--color-transkop-orange) !important; color:#fff; }
.services .services-card:hover h5,
.services .services-card:hover .service-desc{ color:#fff; }
.services .services-card:hover .service-icon{ filter: brightness(0) invert(1); }
.services .services-card:hover .service-cta__circle{ background:#fff; }
.services .services-card:hover .service-cta__circle img{ filter:none; }

/* Products section */
.products .products-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.products .products-top h2{ margin:0; }
.products .products-right p{ max-width:650px; margin-top:1rem; margin-bottom:4rem; }
.products .products-layout{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:stretch; }
.products .products-media{ position:relative; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.products .products-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:opacity 0.3s linear; will-change: opacity; }
.products #products-media-img{ opacity:1; }
.products #products-media-img-overlay{ opacity:0; }
.products .products-list{ display:flex; flex-direction:column; gap:10px; }
.products .products-list{ height:100%; }
.products .products-media{ height:100%; }
.products .product-tab{ border:0; padding:0; text-align:left; cursor:pointer; }
.products .product-tab .product-tab__inner{ display:flex; align-items:center; justify-content:space-between; padding:1.5rem; }
.products .product-tab h5{ margin:0; transition:color 0.3s ease; }
.products .product-tab .service-cta__circle{ width:35px; height:35px; border-radius:50%; background:var(--color-dark-grey); display:inline-flex; align-items:center; justify-content:center; transition:background-color 0.3s ease; }
.products .product-tab .service-cta__circle img{ width:16px; height:16px; filter: invert(1); transition:filter 0.3s ease, transform 0.3s ease; }
.products .product-tab:hover .service-cta__circle img{ transform:rotate(45deg); }
.products .product-tab.is-active,
.products .product-tab:hover{ background:var(--color-transkop-orange) !important; }
.products .product-tab.is-active h5,
.products .product-tab:hover h5{ color:#fff; }
.products .product-tab.is-active .service-cta__circle,
.products .product-tab:hover .service-cta__circle{ background:#fff; }
.products .product-tab.is-active .service-cta__circle img,
.products .product-tab:hover .service-cta__circle img{ filter:none; }

/* Portfolio section */
.portfolio .portfolio-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.portfolio .portfolio-right p{ max-width:650px; margin-top:1rem; margin-bottom:4rem; }
.portfolio .portfolio-right{ position:relative; z-index:1; }
.portfolio { overflow:hidden; }
.portfolio .portfolio-slider-wrap{ position:relative; }
.portfolio .splide__track{ overflow:visible; }
.portfolio .portfolio-card{ display:block; color:inherit; text-decoration:none; cursor:pointer; }
.portfolio .portfolio-card__media{ position:relative; width:100%; aspect-ratio:3/4; overflow: hidden;}
.portfolio .portfolio-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.3s ease;}
.portfolio .portfolio-card__meta{ padding:1rem 1.5rem; }
.portfolio .portfolio-card__bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.portfolio .portfolio-cta{ display:inline-flex; }
.portfolio .portfolio-cta__circle{ width:35px; height:35px; border-radius:50%; background:transparent; display:inline-flex; align-items:center; justify-content:center; transition:background-color 0.3s ease; }
.portfolio .portfolio-cta__circle img{ width:16px; height:16px; filter:invert(1); transition:filter 0.3s ease, transform 0.3s ease; }
.portfolio .splide__slide:hover .portfolio-cta__circle{ background:var(--color-dark-grey); }
.portfolio .portfolio-card__cat,.portfolio .portfolio-card__tag{ margin:0; font-size:14px; color:var(--color-dark-grey-50); }
.portfolio .portfolio-card__meta, .portfolio .portfolio-card__meta h6, .portfolio .portfolio-card__cat, .portfolio .portfolio-card__tag{ transition: background-color 0.3s ease, color 0.3s ease; }
.portfolio .splide__slide{ transition: background-color 0.3s ease; }
.portfolio .splide__slide:hover{ background:var(--color-transkop-orange); }
.portfolio .splide__slide:hover .portfolio-card__media img{ transform: scale(1.1);}
.portfolio .splide__slide:hover .portfolio-card__meta h6,
.portfolio .splide__slide:hover .portfolio-card__cat,
.portfolio .splide__slide:hover .portfolio-card__tag{ color:#fff; }
.portfolio .portfolio-arrows{ position:static; display:flex; justify-content:flex-end; gap:3rem; margin-top:3rem; }
.portfolio-related{ margin:6rem auto; overflow: visible;}
.product-single-gallery{ overflow:visible; }
.product-single-gallery .splide__track{ overflow:visible; }
.product-related{ margin:6rem auto; overflow:visible; }
.product-related .portfolio-top{ margin-bottom:3rem; }
.product-related .splide__track{ overflow:visible; }
.product-related .splide__slide{ transition: transform 0.3s ease; background:transparent; }
.product-related .splide__slide:hover{ background:transparent; }
.product-related .splide__slide:hover .product-card__media img{ transform:scale(1.06); }
.product-related .product-card__meta h6{ transition: color 0.3s ease; }
.portfolio-related .portfolio-top{ margin-bottom:3rem; }
.portfolio .portfolio-arrow{ width:50px; height:50px; border:1px solid var(--color-text-black); border-radius:100px; background:white; display:inline-flex; align-items:center; justify-content:center; transition:background-color 0.2s ease, border-color 0.2s ease; }
.portfolio .portfolio-arrow img{ width:20px; height:20px; transform:rotate(45deg); transition:filter 0.2s ease; }
.portfolio .portfolio-arrow:hover{ background:var(--color-dark-grey); border-color:var(--color-dark-grey); }
.portfolio .portfolio-arrow:hover img{ filter:invert(1); }
.portfolio .js-portfolio-prev img{ transform:rotate(225deg); }

/* Portfolio Grid page */
.portfolio-grid-page{ padding-top:9rem; padding-bottom:6rem; }
.products-tax{ padding-top:9rem; padding-bottom:6rem; }
.products-tax__header{ margin-bottom:2rem; }
.chips{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1rem; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:0.5rem 1.5rem; background:var(--color-background-grey); color:var(--color-text-black); border-radius:999px; text-transform:none; letter-spacing:0; font-size:var(--fs-p); transition:background-color 0.2s ease, color 0.2s ease; }
.chip:hover{ background:var(--color-transkop-orange); color:#fff; text-decoration:none; }
.chip.is-active{ background:var(--color-transkop-orange); color:#fff; }
.active-filters{ margin-top:1.5rem; display:flex; align-items:center; gap:1rem; }
.active-filters__label{ font-size:1rem; color:var(--color-transkop-grey); text-transform:none; letter-spacing:0; }
.active-filters__chips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip--small{ padding:0.25rem 0.75rem; font-size:1rem; border-radius:20px; background:var(--color-background-grey); color:var(--color-text-black); text-transform:none; letter-spacing:0; }
.chip--small .chip-text{ margin-right:6px; }
.chip--small .chip-close{ font-size:1rem; line-height:1; }
.chip--small.is-active{ border:1px solid var(--color-text-black); border-radius: 30px; color:var(--color-text-black); background-color: #fff; }
.chip--small.is-active:hover{ background:var(--color-transkop-red);  border:1px solid var(--color-transkop-red); color:#fff; }
.products-tax__content{ display:grid; grid-template-columns:1fr; gap:1rem; }
.products-tax__content.has-sidebar{ grid-template-columns:20% 1fr; }
.products-tax__sidebar{ align-self:start; background:var(--color-background-grey); padding:1rem; border-radius: 5px; }
.subcategory-list{ list-style:none; margin:0; padding-left:0; display:flex; flex-direction:column; gap:0; }
.subcategory-list li{ padding-top:1rem;padding-bottom: .75rem; }
.subcategory-list li + li{ border-top:0.5px solid var(--color-transkop-grey); }
.subcategory-list a, .subcategory-list span{ text-transform:none; letter-spacing:0; color:var(--color-text-black); font-size:var(--fs-p); line-height: 1.2; }
.subcategory-list a:hover{ color:var(--color-transkop-orange); text-decoration:none; }
.subcategory-list .is-active{ color:var(--color-transkop-orange); cursor:default; }
.products-tax__grid .grid-3x{ display:grid; grid-template-columns:repeat(4, 1fr); column-gap:1rem; row-gap:3rem; }
.products-tax__content.has-sidebar .products-tax__grid .grid-3x{ grid-template-columns:repeat(3, 1fr); }
.product-card__media{ width:100%; aspect-ratio:3/4; overflow:hidden; }
.product-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s ease; }
.product-card__meta{ margin-top:1rem; }
.product-card__link{ display:block; width:100%; }
.product-card__link:hover .product-card__media img{ transform:scale(1.06); }
.products-tax__pagination{ margin-top:2rem; }
.products-tax__pagination{ display:flex; justify-content:center; }
.products-tax__pagination .page-numbers{ color:var(--color-transkop-grey); text-transform:none; letter-spacing:0; padding:0.5rem 0.75rem; display:inline-flex; align-items:center; justify-content:center; line-height:1; vertical-align:middle; font-size: 1rem; }
.products-tax__pagination .page-numbers:hover{ color:var(--color-text-black); text-decoration:none; }
.products-tax__pagination .page-numbers.current{ color:var(--color-transkop-orange); }
.products-tax__pagination .pag-arrow{ width:15px; height:15px; display:inline-block; vertical-align:middle; filter: none; }
.products-tax__pagination .pag-prev{ transform: rotate(225deg); }
.products-tax__pagination .pag-next{ transform: rotate(45deg); }

@media (max-width: 1024px) {
  .products-tax__content.has-sidebar{ grid-template-columns:1fr; }
  .products-tax__grid .grid-3x{ grid-template-columns:repeat(2, 1fr); }
}
.portfolio-grid-header{ margin-bottom:2rem; }
.portfolio-grid__list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.portfolio-grid__item{ background:transparent; }
.portfolio-card__container{ height:100%; }
.portfolio .portfolio-grid__item{ transition: background-color 0.3s ease; }
.portfolio .portfolio-grid__item:hover{ background:var(--color-transkop-orange); }
.portfolio .portfolio-grid__item:hover .portfolio-card__media img{ transform: scale(1.1); }
.portfolio .portfolio-grid__item:hover .portfolio-card__meta h6,
.portfolio .portfolio-grid__item:hover .portfolio-card__cat,
.portfolio .portfolio-grid__item:hover .portfolio-card__tag{ color:#fff; }
.portfolio .portfolio-grid__item:hover .portfolio-cta__circle{ background:var(--color-dark-grey); }

.h1-as-h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:600; }
.h1-as-h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:600;}
/* Products archive page */
.products-archive{ padding-top:9rem; padding-bottom:6rem; }
.products-archive .cat-media{ aspect-ratio:3/2; display:flex; align-items:flex-end; justify-content:stretch; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%), var(--cat-img) center no-repeat; background-size: auto, 100%; overflow:hidden; transition: background-size 0.3s ease; }
.products-archive a:hover .cat-media{ background-size: auto, 110%; }
.products-archive .product-cat-caption{ padding: 1.5rem; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%); color:#fff; font-size:1rem; text-transform:none; letter-spacing:0; font-weight:300; width: 100%}
.products-archive .product-tab{ border:0; padding:0; text-align:left; cursor:pointer; transition: background-color 0.3s ease; }
.products-archive .product-tab .product-tab__inner{ display:flex; align-items:center; justify-content:space-between; padding:1.5rem; }
.products-archive .product-tab h5{ margin:0; transition:color 0.3s ease; }
.products-archive .product-tab .service-cta__circle{ width:35px; height:35px; border-radius:50%; background:var(--color-dark-grey); display:inline-flex; align-items:center; justify-content:center; transition:background-color 0.3s ease; }
.products-archive .product-tab .service-cta__circle img{ width:16px; height:16px; filter: invert(1); transition:filter 0.3s ease, transform 0.3s ease; }
.products-archive a:hover .product-tab{ background:var(--color-transkop-orange) !important; }
.products-archive a:hover .product-tab h5{ color:#fff; }
.products-archive a:hover .product-tab .service-cta__circle{ background:#fff; }
.products-archive a:hover .product-tab .service-cta__circle img{ filter:none; transform:rotate(45deg); }

/* Single Product */
.single-product{ margin-top:100px; overflow-x:hidden !important; }
.single-product__nav{ padding-top:2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:2rem; }
.link-with-arrow--back img{ transform:rotate(225deg) !important; }
.link-with-arrow--back:hover img{ transform:rotate(225deg) !important; }
.link-with-arrow img{ transform:rotate(45deg); }
.link-with-arrow--back{ text-decoration:none; }
.link-with-arrow--back .link-text{ position:relative; display:inline-block; text-transform: none; }
.link-with-arrow--back .link-text::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.3s ease;
}
.link-with-arrow--back:hover .link-text::after{
  transform:scaleX(1);
}
.single-product__header{ padding-top:4rem; padding-bottom:3rem; }
.single-product__grid{ display:grid; grid-template-columns:1fr 2fr; gap:4rem; align-items:start; }
.single-product__media{ width:100%; aspect-ratio:1/1; background:var(--color-background-grey); overflow:hidden;}
.single-product__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.single-product__info{ display:flex; flex-direction:column; gap:2.5rem; height:100%; }
.single-product__thickness-section{ display:flex; flex-direction:column; gap:1rem; }
.single-product__thickness-row{ display:flex; align-items:flex-end; gap:30px; flex-wrap:nowrap; }
.single-product__thickness-icons{ display:flex; align-items:flex-end; gap:1rem; flex-wrap:nowrap; }
.thickness-icon{ object-fit:contain; }
.single-product__description{ background:#f3f3f3; padding:20px; padding-bottom: 60px; border-radius:8px; margin-top:auto; }
.single-product__description p{ font-size: 20px; }
.single-product__tabs{ padding-bottom:3rem; }
.product-tabs{ display:flex; gap:1rem; border-bottom:1px solid #e6e6e6; flex-wrap:wrap; }
.product-tabs__tab{ background:transparent; border:0; padding:0.75rem 1rem; font-weight:500; text-transform:uppercase; color:var(--color-dark-grey); cursor:pointer; border-bottom:3px solid transparent; transition:color 0.2s ease, border-color 0.2s ease; }
.product-tabs__tab.is-active{ color:var(--color-text-black); border-color:var(--color-transkop-orange); }
.product-tabs__tab:focus-visible{ outline:2px solid var(--color-transkop-orange); outline-offset:2px; }
.product-tabs__panels{ padding-top:1.5rem; }
.product-tabs__panel{ display:none; }
.product-tabs__panel.is-active{ display:block; }
.product-tabs__panel p{ margin-bottom:1rem; }
.product-documents-grid{ display:flex; flex-direction:column; gap:2rem; align-items:flex-start; }
.product-document-card{ display:flex; align-items:center; gap:30px; flex-wrap:nowrap; width:fit-content; }
.product-document__header{ display:flex; align-items:center; gap:10px; }
.product-document__icon{ width:24px; height:24px; flex-shrink:0; }
.product-document__title{ margin:0; font-size:20px; font-weight:400; line-height:1.4; color:var(--color-text-black); }
.product-document__actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.product-document__btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:140px; height:36px; background: var(--color-background-grey); border:0; border-radius:100px; color:var(--color-text-black); text-decoration:none; font-size:16px; letter-spacing:0px; text-transform:capitalize; transition:background-color 0.2s ease, color 0.2s ease; cursor:pointer; }
.product-document__btn:hover{ background:var(--color-transkop-orange); color:#fff; text-decoration:none; }
.product-document__btn img{ width:16px; height:16px; transition:filter 0.2s ease; }
.product-document__btn:hover img{ filter:invert(1); }
.product-single-gallery{ margin-top:2rem; }
.single-product__meta-row{ display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start; margin-bottom:2rem; }
.single-product__thickness{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.single-product__thickness-list{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.badge-pill{ display:inline-flex; align-items:center; padding:0.5rem 0.9rem; background:var(--color-background-grey); border-radius:999px; font-weight:600; letter-spacing:0; }
.single-product__icons{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.single-product__icon{ display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0.65rem; border:1px solid var(--color-background-grey); border-radius:6px; background:#fff; }
.single-product__icon img{ width:32px; height:32px; object-fit:contain; display:block; }
.single-product__icon span{ font-size:0.95rem; color:var(--color-text-black); }

.single-product__classic{ margin-right:0.5rem; display:inline-block; vertical-align:baseline; }

/* Single Portfolio */
.single-portfolio{ overflow-x: hidden;}
.single-portfolio__hero{ position:relative; width:100%; height:calc(100vh - 100px); overflow:hidden; margin-top:100px; }
.single-portfolio__hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.single-portfolio__container{ padding-top:5rem; padding-bottom:6rem; }
.single-portfolio__title{ margin:0 0 2rem 0; }
.single-portfolio__meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.single-portfolio__labels{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:2rem; }
.single-portfolio__labels .meta-row{ display:flex; align-items:baseline; gap:0.5rem; font-size:0.875rem; letter-spacing:var(--ls-a); text-transform:uppercase; }
.single-portfolio__labels .meta-label{ color:var(--color-dark-grey-50); }
.single-portfolio__labels .meta-value{ font-weight:700; color:var(--color-text-black); text-transform:none; }
.single-portfolio__content p{ text-align:justify; }
.materials{ width: 75%; margin-left: auto; }
.materials__list{ display:flex; flex-direction:column; gap:2rem;}
.materials__item{ width:fit-content; max-width:100%; }
.materials__row{ display:grid; grid-template-columns:60px 1fr; gap:1rem; align-items:start; }
.materials__thumb{ width:60px; height:60px; background:var(--color-background-grey); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.materials__img{ width:100%; height:100%; object-fit:cover; display:block; }
.material-row{ display:flex; align-items:baseline; gap:0.5rem; font-size:0.875rem; letter-spacing:var(--ls-a); text-transform:uppercase; }
.material-label{ color:var(--color-dark-grey-50); }
.material-value{ font-weight:700; color:var(--color-text-black); text-transform:none; }

/* Gallery on single portfolio */
.portfolio-single-gallery{ overflow:visible; margin-top:1rem; }
.portfolio-single-gallery .splide__track{ overflow:visible; }
.portfolio-single-gallery .portfolio-card__media{ aspect-ratio:auto; background:transparent; height:70vh; }
.portfolio-single-gallery .portfolio-card__media img{ object-fit:contain; width:auto; max-width:none; height:100%; display:block; margin:0 auto; }
.portfolio-single-gallery .js-gallery-prev img{ transform:rotate(225deg) !important; }

/* Override hover styles from homepage portfolio slider */
.portfolio-single-gallery .splide__slide:hover{ background:transparent; }
.portfolio-single-gallery .splide__slide:hover .portfolio-card__media img{ transform:none; }
.portfolio-single-gallery .splide__slide:hover .portfolio-card__meta h6,
.portfolio-single-gallery .splide__slide:hover .portfolio-card__cat,
.portfolio-single-gallery .splide__slide:hover .portfolio-card__tag{ color:inherit; }
.portfolio-single-gallery .splide__slide:hover .portfolio-cta__circle{ background:transparent; }

/* Lightbox styles */
.lightbox-overlay{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity 0.2s ease, visibility 0s linear 0.2s; }
.lightbox-overlay.is-open{ opacity:1; visibility:visible; transition:opacity 0.2s ease; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.85); z-index:0; }
.lightbox-content{ position:relative; z-index:1; max-width:90vw; max-height:90vh; display:flex; align-items:center; justify-content:center; gap:1rem; }
.lightbox-img{ max-width:90vw; max-height:90vh; width:auto; height:auto; object-fit:contain; display:block; }
.lightbox-close,.lightbox-prev,.lightbox-next{ position:fixed; background:transparent; color:#fff; border:0; font-size:2rem; line-height:1; cursor:pointer; z-index:1101; }
.lightbox-close{ top:1rem; right:1rem; }
.lightbox-prev,.lightbox-next{ top:50%; transform:translateY(-50%); width:50px; height:50px; background:#fff; border:1px solid var(--color-text-black); border-radius:100px; display:flex; align-items:center; justify-content:center; }
.lightbox-prev{ left:calc(1rem); }
.lightbox-next{ right:calc(1rem); }
.lightbox-prev{ left:1rem; }
.lightbox-next{ right:1rem; }
.lightbox-prev img{ transform:rotate(225deg); width:20px; height:20px; }
.lightbox-next img{ transform:rotate(45deg); width:20px; height:20px; }
.lightbox-close img{ width:20px; height:20px; filter:invert(1); }

/* ==========================================================================
   O NAMA PAGE STYLES
   ========================================================================== */

/* Hero O Nama section */
.hero-o-nama{ 
    min-height: calc(100vh - 100px); 
    margin-top: 100px; 
    display: flex;
}
.hero-o-nama__img{
    width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; z-index: -1;
}
.hero-o-nama-inner{ 
    width: 100%; 
    max-width: calc(1320px + 4rem); 
    margin: 0 auto;
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 5rem;
}
.hero-o-nama-content{ 
    display: flex;
    padding-top: 4rem;
}
.hero-o-nama-content h2{ 
    color: var(--color-text-white); 
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 600;
    max-width: 275px;
}
.hero-o-nama-text{ 
    display: flex;
    padding-top: 4rem;
}
.hero-o-nama-text p{ 
    text-align: justify;
}

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* O nama content section */
.o-nama-content{ 
    padding: 10rem 2rem;
}
.o-nama-content h3{ 
    text-align: center;
    max-width: 1085px; 
    margin: 0 auto;
    font-weight: 400;
    line-height: 1.5;
}
.o-nama-content h3 strong{
    font-weight: 700;
}

/* Istorijat section */
.istorijat{
    padding: 10rem 0;
}
.istorijat-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: flex-start;
}
.istorijat-image{
    position: sticky;
    top: 100px;
}
.istorijat-image img, .istorijat__img{
    width: 100%;
    height: 85vh;
    object-fit: cover;
    object-position: center;
}
.istorijat-content h3{
    margin-bottom: 3rem;
    color: var(--color-text-black);
}

/* Timeline styles */
.timeline{
    position: relative;
    padding-left: 2rem;
}
.timeline::before{
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-background-grey);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.8s ease;
    z-index: 0;
}
.timeline.animate::before{
    transform: scaleY(1);
}
.timeline-item{
    position: relative;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease;
}
.timeline-item.animate{
    opacity: 1;
    transform: translateX(0);
}
.timeline-dot{
    position: absolute;
    left: -32px;
    top: 0px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    border: 6px solid var(--color-transkop-orange);
    transform: scale(0);
    transition: transform 0.4s ease;
    z-index: 10;
}
.timeline-item.animate .timeline-dot{
    transform: scale(1);
}
.timeline-content h5{
    color: var(--color-transkop-grey);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.timeline-content p{
    margin: 0;
    line-height: 1.6;
}

/* O nama detail section */
.o-nama-detail{
    padding: 10rem 0;
}
.o-nama-detail-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.o-nama-detail-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.o-nama-detail-content h3{
    margin-bottom: 3rem;
    color: var(--color-text-black);
}
.o-nama-detail-text{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 3rem;
}
.o-nama-detail-text p{
    text-align: justify;
    margin: 0;
    line-height: 1.6;
}
.o-nama-detail-image{
    position: sticky;
    top: 100px;
}
.o-nama-detail-image img, .o-nama-detail__img{
    width: 100%;
    height: 85vh;
    object-fit: cover;
    object-position: center;
}

/* Fade-in animation for O nama detail items */
.fade-item{
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}
.fade-item.animate{
    opacity: 1;
    transform: translateY(0);
}

/* Hide map left container only on O nama page */
.page-o-nama .map-section .homepage-left,
.page-template-o-nama .map-section .homepage-left,
body[class*="o-nama"] .map-section .homepage-left{
    display: none !important;
}
.page-o-nama .map-section .homepage-inner,
.page-template-o-nama .map-section .homepage-inner,
body[class*="o-nama"] .map-section .homepage-inner{
    grid-template-columns: 1fr !important;
}

/* Map section */
/* Map section */
.map-section .map-boxed-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; background: url('assets/img/map-bg.webp') center center / cover no-repeat; padding:3rem 3rem 3rem 0; border-radius:0; }
.map-section .map-right{ position:relative; z-index:1; }
.map-section .map-right p{ max-width:650px; margin-top:1rem; margin-bottom:0; }

.map-section .map-cities{ display:flex; align-items:center; }
.map-section .city-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; }
.map-section .city-list li{ font-size:2rem; font-weight:500; color:#7C7C7C; cursor:pointer; transition:color 0.3s ease; }
.map-section .city-list li:hover{ color:var(--color-transkop-orange); }

.map-section .map-visual-boxed{ position:relative; width:100%; }
.map-section .map-wrap{ position:relative; width:100%; max-width:100%; margin:0 auto; }
.map-section .map-base{ width:100%; height:auto; display:block; }
.map-section .map-marker{ position:absolute; }
.map-section .map-pin{ width:60px; height:60px; display:block; }
.map-section .map-tooltip{ position:absolute; left:50%; bottom:100%; transform:translate(-50%, -12px); background:#fff; color:var(--color-text-black); padding:0.75rem 1rem; box-shadow:0 8px 24px rgba(0,0,0,0.15); width:max-content; max-width:260px; opacity:0; visibility:hidden; transition:opacity 0.15s ease, transform 0.15s ease; z-index:10; }
.map-section .map-tooltip::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #fff; }
.map-section .map-marker:hover .map-tooltip,
.map-section .map-marker.is-active .map-tooltip{ opacity:1; visibility:visible; transform:translate(-50%, -16px); }
.map-section .map-tooltip h6{ margin-bottom: .25rem;}
.map-section .map-tooltip p{ margin:0; font-size:0.875rem; letter-spacing:0; text-transform:none; }

/* 404 Error Page */
.error-404-page{ min-height:calc(100vh - 200px); display:flex; align-items:center; justify-content:center; padding:6rem 0; }
.error-404-content{ text-align:center; max-width:800px; margin:0 auto; }
.error-404-inner{ padding:2rem 0; }

.error-404-number{ font-size:8rem; font-weight:700; color:var(--color-transkop-orange); line-height:1; margin-bottom:1rem; }
.error-404-title{ font-size:var(--fs-h2); font-weight:600; color:var(--color-text-black); margin-bottom:1.5rem; }
.error-404-description{ font-size:var(--fs-p); color:var(--color-transkop-grey); margin-bottom:3rem; max-width:600px; margin-left:auto; margin-right:auto; }

.error-404-actions{ display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-bottom:4rem; }
.error-404-actions .btn-hero{ width:auto; min-width:180px; padding:0 2rem; }

.error-404-suggestions{ margin-top:2rem; }
.error-404-suggestions h3{ font-size:var(--fs-h4); margin-bottom:2rem; color:var(--color-text-black); }
.suggestions-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1.5rem; max-width:600px; margin:0 auto; }
.suggestion-item{ text-align:center; }
.suggestion-item a{ display:flex; flex-direction:column; align-items:center; gap:1rem; padding:1.5rem; border:1px solid var(--color-background-grey); transition:all 0.3s ease; text-transform:none; letter-spacing:0; }
.suggestion-item a:hover{ border-color:var(--color-transkop-orange); transform:translateY(-4px); box-shadow:0 8px 24px rgba(201,97,60,0.15); }
.suggestion-item img{ width:40px; height:40px; filter:var(--color-transkop-orange); }
.suggestion-item span{ font-size:0.875rem; font-weight:500; color:var(--color-text-black); }

/* Responsive Media Queries */

/* Tablet and smaller desktop */
@media (max-width: 1024px) {
  .site-nav.is-open{ clip-path: circle(110vmax at var(--nav-cx, 20%) var(--nav-cy, 20%)); }

  .home section + section{ margin-top:8rem; }
  .single-portfolio__meta-grid{ grid-template-columns:1fr; }
  .istorijat-inner{
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .istorijat-image{
    position: static;
  }
  .istorijat-image img{
    height: 50vh;
  }
  .o-nama-detail-inner{
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .o-nama-detail-image{
    position: static;
    order: -1;
  }
  .o-nama-detail-image img{
    height: 50vh;
  }
  
  /* Global Tablet Padding */
  .container-boxed {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hero Tablet */
  .hero {
    flex-direction: column;
    height: auto;
    padding-top: 0;
    margin-top:0px;
  }
  .hero .hero-media {
    position: relative;
    width: calc(100% - 16px);
    min-height: 300px;
    order: -1;
    padding-left: 16px;
    pointer-events: none;
  }
  .hero .hero-img-1{
    position: relative;
    height:55vh;
  }
  .hero .hero-img-2{
    width: 50%;
    margin-left: -16px;
  }
  .hero .container-boxed {
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .hero .hero-content {
    max-width: 100%;
    padding-bottom: 0;
    justify-content: flex-start;
  }
  .hero p {
      margin-top: 20px;
      margin-bottom: 30px;
  }

  /* About Tablet */
  /* Handled via .splide__list override above */
  .about .about-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  .about .about-cta p {
    max-width: 100%;
  }

  /* Map Tablet */
  .map-section .map-pin {
    width: 45px;
    height: 45px;
  }
  
  /* Materials Tablet */
  .materials {
    margin-left: 0;
    width: 100%;
  }
  .single-portfolio__meta-grid {
    flex-direction: column;
  }
  
  .services-image {
    height: 70vh;
  }
}

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:100px; align-items:stretch; }
.contact-col{ padding:2rem; display:flex; flex-direction:column; justify-content:center; border-radius:4px; }
.contact-stack{ display:flex; flex-direction:column; gap:2rem; }
.contact-right__title{ margin-bottom:1rem; }
.contact-right__intro{ margin-bottom:2rem; font-size:var(--fs-p); line-height:var(--lh-p); color:var(--color-text-black); text-transform:none; letter-spacing:0; }

/* Links styled like paragraph */
.p-link{ font-size:var(--fs-p); line-height:var(--lh-p); font-weight:300; text-transform:none; letter-spacing:0; color:var(--color-text-black); text-decoration:none; position:relative; display:inline-block; overflow:hidden; padding-bottom:0; }
.p-link::after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:var(--color-dark-grey); transform:translateX(-100%); transition:transform 0.3s ease; }
.p-link:hover::after{ transform:translateX(0); }
.p-label{ font-size:var(--fs-p); line-height:var(--lh-p); font-weight:600; text-transform:none; letter-spacing:0; color:var(--color-text-black); }

/* CF7: spacing and controls */
.wpcf7 form p{ margin:0; }
.wpcf7 form p:has(.wpcf7-form-control-wrap){ margin-bottom:1.5rem; }
.wpcf7 form p:has(textarea){ margin-bottom:2rem; }
.wpcf7 form .wpcf7-form-control{ width:100%; border:none; border-radius:10px; padding:0.75rem 1rem; background:#fff; color:var(--color-text-black); }
.wpcf7 form label{ display:block; }
.wpcf7 form .wpcf7-form-control-wrap{ display:block; width:100%; }
.wpcf7 form label .wpcf7-form-control-wrap{ margin-top:0.5rem; }
.wpcf7 form textarea{ height:7rem; }

/* CF7 submit as hero button with arrow */
.wpcf7 form .wpcf7-submit{ position:relative; width:100%; height:50px; border-radius:30px; padding:0 1rem 0 1.25rem; display:inline-flex; align-items:center; justify-content:center; background:var(--color-transkop-orange); border:1px solid var(--color-transkop-orange); color:var(--color-text-white); font-size:var(--fs-a); line-height:var(--lh-a); letter-spacing:var(--ls-a); text-transform:uppercase; cursor:pointer; transition:background-color 0.3s ease, border-color 0.3s ease; margin-top:0; }
.wpcf7 form .wpcf7-submit::after{ content:''; display:inline-block; width:16px; height:16px; margin-left:10px; background:url('assets/img/button-arrow.svg') no-repeat center / contain; filter:invert(1); transition:transform 0.3s ease; }
.wpcf7 form .wpcf7-submit:hover{ background:var(--color-transkop-red); border-color:var(--color-transkop-red); }
.wpcf7 form .wpcf7-submit:hover::after{ transform:rotate(45deg); }

/* Mobile */
@media (max-width: 767.98px) {

  :root {
    --fs-h1: 2rem;
    --lh-h1: 1.1;

    --fs-h2: 1.5rem;
    --lh-h2: 1.15;

    --fs-h3: 1.5rem;
    --lh-h3: 1.25;

    --fs-h4: 1.375rem;
    --lh-h4: 1.25;

    --fs-h5: 1.125rem;
    --lh-h5: 1.3;

    --fs-h6: 1rem;
    --lh-h6: 1.4;

    --fs-p: 0.875rem;
    --lh-p: 1.6;

    --fs-a: 0.75rem;
    --lh-a: 1.5;
    --ls-a: 0.12em;
  }

  .products .products-media {
    display: none;
  }
  .products .products-layout {
    grid-template-columns: 1fr;
  }
  /* Hide portfolio arrows on mobile */
  .portfolio .portfolio-arrows {
    display: none;
  }

  .home section + section { margin-top: 5rem; }
  .portfolio-grid__list { grid-template-columns: repeat(2, 1fr); }
  .error-404-number{ font-size:5rem; }
  .error-404-title{ font-size:var(--fs-h3); }
  .error-404-actions{ flex-direction:column; gap:1rem; }
  .error-404-actions .btn-hero{ width:100%; max-width:280px; justify-content:center; }
  .suggestions-grid{ grid-template-columns:repeat(2, 1fr); gap:1rem; }
  .suggestion-item a{ padding:1rem; }
  .contact-grid{ min-height:auto; align-items:stretch; grid-template-columns:1fr; }
  
  /* Prevent body scroll when nav is open (mobile only) */
  .nav-open { overflow: hidden; }
  
  /* Global Mobile Layout */
  .homepage-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .homepage-left {
    width: fit-content;
    align-self: flex-start;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    align-items: center;
  }
  .homepage-left h2 {
    font-size: var(--fs-h1);
    line-height: 1;
  }
  .homepage-left p {
    font-size: var(--fs-a);
    margin: 0;
  }
  .btn-hero {
    width: 50%;
    height: 42px;
    padding: 0 0.5rem;
    font-size: 12px;
    letter-spacing: 0.2;
  }
  .hero .actions {
    width: 100%;
    justify-content: center;
    gap: 1rem;
  }
  .hero .btn-hero {
    width: 50%;
  }
  .hero .btn-hero img {
    width: 14px;
    height: 14px;
  }
  .hero .container-boxed{
    padding: 1rem;
  }
  .services .services-grid {
    grid-template-columns: 1fr;
  }
  .services .services-card {
    height: auto;
  }
  
  .site-header .btn-contact {
    display: none;
  }
  
  /* Force Shrink Header Look on Mobile */
  .site-header { height: 70px; }
  .site-header .site-logo img, 
  .site-header .site-logo .custom-logo { width: 150px; }
  .site-header .hamburger { width: 50px; height: 45px; }
  .site-header .hamburger .hamburger-icon { width: 24px; height: 24px; }

  /* Hero Mobile Margin */
  .hero {
    margin-top: 70px;
  }
  
  /* Map Section Mobile */
  .map-section .map-boxed-wrapper {
    grid-template-columns: 1fr;
    padding: 2rem;
    margin-top: 0;
  }
  .map-section .city-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;    
  }
  .map-section .city-list li {
    font-size: 18px;
    line-height: 1;
  }
  
  /* Map Pin Mobile */
  .map-section .map-pin {
    width: 35px;
    height: 35px;
  }

  .services-image {
    height: 50vh;
  }

  /* About Stat Mobile */
  .about .about-stat h3 {
    font-size: 20px;
  }
  .about .about-stats {
     display: block; /* Ensure wrapper allows slider */
  }
  .about .about-stat {
    height: 120px;
  }
  
  /* Portfolio Card Mobile */
  .portfolio .portfolio-card__meta {
    padding: 1rem 0.5rem;
  }
  .portfolio-card__meta h6, .product-card__meta h6{
    font-size: 14px;
  }
  .portfolio .portfolio-card__cat, .portfolio .portfolio-card__tag{
    font-size: 12px;
  }
  
  /* Product Tabs Mobile */
  .product-tab__inner h5{
    font-size: 16px;
  }

  /* Service CTA Mobile */
  .products .product-tab .service-cta__circle, 
  .products-archive .product-tab .service-cta__circle,
  .services .services-card .service-cta__circle {
    width: 30px;
    height: 30px;
  }
  .portfolio .portfolio-top{
    align-items: baseline;
  }
  .portfolio .portfolio-top h3 {
    max-width: 200px;
  }
  .products .product-tab .service-cta__circle img, 
  .products-archive .product-tab .service-cta__circle img,
  .services .services-card .service-cta__circle img {
    width: 14px;
    height: 14px;
  }
  
  .link-with-arrow {
    font-size: 12px;
    gap: 5px;
    align-items: flex-end;
    height: 1.5rem;
  }

  .link-with-arrow img{
    height: 18px !important;
  }

  /* Footer Mobile */
  .site-footer {
    height: 50vh !important;
  }
  .site-footer .footer-bg {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .site-footer .footer-top-wrapper {
    height: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .site-footer .footer-top-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1rem;
    height: 100%;
  }
  .site-footer .footer-logo img {
    width: 150px;
  }

  /* Navigation Mobile */
  .site-nav .nav-grid {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 100px 16px;
    align-items: flex-start;
    gap: 2rem;
  }
  .site-nav .nav-col {
    gap: 0.5rem;
  }
  .site-nav .nav-col h2 {
    font-size: 18px;
  }
  .site-nav .nav-col li a {
    font-size: 16px;
  }
  .site-nav .container-boxed {
    align-items: flex-start;
    padding: 0;
    justify-content: flex-start;
    height: auto !important;
  }
  
  .portfolio-grid-page, .products-tax, .products-archive{
    padding-top: 100px;
  }

  /* Single Portfolio Hero Mobile */
  .single-portfolio__hero {
    margin-top: 70px;
  }
  .single-portfolio__hero, .single-portfolio__hero img {
    height: 50vh;
  }
  .single-portfolio__container{
    padding-top: 2rem;
  }

  .meta-label, .meta-value, .material-label, .material-value {
    font-size: 12px;
  }

  .portfolio-single-gallery .portfolio-card__media {
    height: 50vh;
  }
  
  .products-tax__content.has-sidebar .products-tax__grid .grid-3x,
  .products-tax__grid .grid-3x {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.5rem;
    row-gap: 1.5rem;
  }

  .single-product{
    margin-top:70px; overflow-x:hidden !important;
  }
  .single-product__nav{
    padding-top:1rem;
    flex-wrap:wrap;
    gap:1rem;
  }
  .single-product__grid{
    grid-template-columns:1fr;
  }
  .single-product__media{
    max-width:480px;
  }
  .single-product__title{
    margin-bottom:24px;
  }
  .single-product__thickness-row{
    flex-wrap:wrap;
    gap:1rem;
  }
  .thickness-icon{
    width:28px;
    height:28px;
  }
  .product-tabs{
    gap:0.5rem;
  }
  .product-tabs__tab{
    padding:0.5rem 0.75rem;
  }

  .product-documents-grid{
    gap:1.5rem;
  }
  
  .product-document-card{
    flex-wrap:wrap;
  }
  
  .product-document__header{
    width:100%;
    margin-bottom:0.5rem;
  }
  
  .product-document__btn{
    width:120px;
    height:32px;
    font-size:14px;
  }

  .chip{
    font-size: 12px;
    letter-spacing: 0.2;
    padding: 0.5rem 1rem;
  }
}